From 9e64cadb5a85d5160b07f2e491a260f32c546a31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?= Date: Fri, 12 Jul 2024 14:46:09 +0200 Subject: [PATCH] Ensure internal classes used for style `:host(.)` are not overridden by `className` --- packages/react-components/lib/Checkbox.js | 8 +++++++- packages/react-components/lib/DataGridCell.js | 8 +++++++- packages/react-components/lib/DataGridRow.js | 10 +++++++++- packages/react-components/lib/MenuItem.js | 11 ++++++++++- packages/react-components/lib/SliderLabel.js | 8 +++++++- packages/react-components/lib/Tab.js | 8 +++++++- packages/react-components/lib/TreeItem.js | 15 ++++++++------- packages/react-components/lib/TreeView.js | 6 ------ 8 files changed, 55 insertions(+), 19 deletions(-) diff --git a/packages/react-components/lib/Checkbox.js b/packages/react-components/lib/Checkbox.js index 174e72b..671ec0d 100644 --- a/packages/react-components/lib/Checkbox.js +++ b/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, diff --git a/packages/react-components/lib/DataGridCell.js b/packages/react-components/lib/DataGridCell.js index 8884e1c..c09f5b9 100644 --- a/packages/react-components/lib/DataGridCell.js +++ b/packages/react-components/lib/DataGridCell.js @@ -32,6 +32,12 @@ 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', { @@ -39,7 +45,7 @@ export const DataGridCell = forwardRef((props, forwardedRef) => { ...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, diff --git a/packages/react-components/lib/DataGridRow.js b/packages/react-components/lib/DataGridRow.js index 47646c4..66905ff 100644 --- a/packages/react-components/lib/DataGridRow.js +++ b/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, diff --git a/packages/react-components/lib/MenuItem.js b/packages/react-components/lib/MenuItem.js index 86a418a..cbefaab 100644 --- a/packages/react-components/lib/MenuItem.js +++ b/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, diff --git a/packages/react-components/lib/SliderLabel.js b/packages/react-components/lib/SliderLabel.js index 87a0645..9f90c62 100644 --- a/packages/react-components/lib/SliderLabel.js +++ b/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, diff --git a/packages/react-components/lib/Tab.js b/packages/react-components/lib/Tab.js index 5927459..d99b8c7 100644 --- a/packages/react-components/lib/Tab.js +++ b/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, diff --git a/packages/react-components/lib/TreeItem.js b/packages/react-components/lib/TreeItem.js index ab943f7..efcfbfc 100644 --- a/packages/react-components/lib/TreeItem.js +++ b/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, diff --git a/packages/react-components/lib/TreeView.js b/packages/react-components/lib/TreeView.js index 9ab6b22..13f4284 100644 --- a/packages/react-components/lib/TreeView.js +++ b/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);