Ensure internal classes used for style :host(.<class>) are not overridden by className (#117)

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

packages/react-components/lib/Checkbox.js

@@ -37,12 +37,18 @@ export const Checkbox = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current?.indeterminate) {
+    allClasses += ' indeterminate';
+  }
+
   return React.createElement(
     'jp-checkbox',
     {
       ref,
       ...filteredProps,
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/DataGridCell.js

@@ -32,14 +32,20 @@ export const DataGridCell = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current?.cellType === 'columnheader') {
+    allClasses += ' column-header';
+  }
+
   return React.createElement(
     'jp-data-grid-cell',
     {
       ref,
       ...filteredProps,
       'cell-type': props.cellType || props['cell-type'],
       'grid-column': props.gridColumn || props['grid-column'],
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/DataGridRow.js

@@ -38,6 +38,14 @@ export const DataGridRow = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current) {
+    if (ref.current.rowType !== 'default') {
+      allClasses += ` ${ref.current.rowType}`;
+    }
+  }
+
   return React.createElement(
     'jp-data-grid-row',
     {
@@ -46,7 +54,7 @@ export const DataGridRow = forwardRef((props, forwardedRef) => {
       'grid-template-columns':
         props.gridTemplateColumns || props['grid-template-columns'],
       'row-type': props.rowType || props['row-type'],
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/MenuItem.js

@@ -28,13 +28,22 @@ export const MenuItem = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current) {
+    allClasses += ` indent-${ref.current.startColumnCount}`;
+    if (ref.current.expanded) {
+      allClasses += ' expanded';
+    }
+  }
+
   return React.createElement(
     'jp-menu-item',
     {
       ref,
       ...filteredProps,
       role: props.role,
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/SliderLabel.js

@@ -20,13 +20,19 @@ export const SliderLabel = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current?.disabled) {
+    allClasses += ' disabled';
+  }
+
   return React.createElement(
     'jp-slider-label',
     {
       ref,
       ...filteredProps,
       position: props.position,
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/Tab.js

@@ -18,12 +18,18 @@ export const Tab = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current?.classList.contains('vertical')) {
+    allClasses += ' vertical';
+  }
+
   return React.createElement(
     'jp-tab',
     {
       ref,
       ...filteredProps,
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/TreeItem.js

@@ -2,12 +2,7 @@ import {
   jpTreeItem,
   provideJupyterDesignSystem
 } from '@jupyter/web-components';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef
-} from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useEventListener, useProperties } from './react-utils.js';
 provideJupyterDesignSystem().register(jpTreeItem());
 
@@ -27,12 +22,18 @@ export const TreeItem = forwardRef((props, forwardedRef) => {
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);
 
+  // Add web component internal classes on top of `className`
+  let allClasses = className ?? '';
+  if (ref.current?.nested) {
+    allClasses += ' nested';
+  }
+
   return React.createElement(
     'jp-tree-item',
     {
       ref,
       ...filteredProps,
-      class: props.className,
+      class: allClasses.trim(),
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,

packages/react-components/lib/TreeView.js

@@ -17,12 +17,6 @@ export const TreeView = forwardRef((props, forwardedRef) => {
   const { className, renderCollapsedNodes, currentSelected, ...filteredProps } =
     props;
 
-  useLayoutEffect(() => {
-    // Fix using private API to force refresh of nested flag on
-    // first level of tree items.
-    ref.current?.setItems();
-  }, [ref.current]);
-
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'currentSelected', props.currentSelected);