Prevent adding classname attribute for react wrapped components (#108)

fcollonval · web-flow · commit bbe93e8d662c · 2024-06-25T16:20:05.000+02:00
Co-authored-by: Frédéric Collonval &lt;fcollonval@users.noreply.github.com&gt;
diff --git a/packages/react-components/lib/Accordion.js b/packages/react-components/lib/Accordion.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpAccordion());
 
 export const Accordion = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { expandMode, ...filteredProps } = props;
+  const { className, expandMode, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
diff --git a/packages/react-components/lib/AccordionItem.js b/packages/react-components/lib/AccordionItem.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpAccordionItem());
 
 export const AccordionItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { headingLevel, id, expanded, ...filteredProps } = props;
+  const { className, headingLevel, id, expanded, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
diff --git a/packages/react-components/lib/Anchor.js b/packages/react-components/lib/Anchor.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpAnchor());
 export const Anchor = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     appearance,
     download,
     href,
diff --git a/packages/react-components/lib/AnchoredRegion.js b/packages/react-components/lib/AnchoredRegion.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpAnchoredRegion());
 export const AnchoredRegion = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     horizontalViewportLock,
     horizontalInset,
     verticalViewportLock,
diff --git a/packages/react-components/lib/Avatar.js b/packages/react-components/lib/Avatar.js
@@ -10,7 +10,8 @@ provideJupyterDesignSystem().register(jpAvatar());
 
 export const Avatar = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { src, alt, fill, color, link, shape, ...filteredProps } = props;
+  const { className, src, alt, fill, color, link, shape, ...filteredProps } =
+    props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/Badge.js b/packages/react-components/lib/Badge.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpBadge());
 
 export const Badge = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { fill, color, circular, ...filteredProps } = props;
+  const { className, fill, color, circular, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'circular', props.circular);
diff --git a/packages/react-components/lib/Breadcrumb.js b/packages/react-components/lib/Breadcrumb.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpBreadcrumb());
 
 export const Breadcrumb = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { ...filteredProps } = props;
+  const { className, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/BreadcrumbItem.js b/packages/react-components/lib/BreadcrumbItem.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpBreadcrumbItem());
 export const BreadcrumbItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     download,
     href,
     hreflang,
diff --git a/packages/react-components/lib/Button.d.ts b/packages/react-components/lib/Button.d.ts
@@ -1,9 +1,10 @@
 import {
   Button as ButtonElement,
-  type ButtonScale
+  type ButtonScale,
+  type ButtonAppearance
 } from '@jupyter/web-components';
 
-export type { ButtonElement };
+export type { ButtonAppearance, ButtonElement, ButtonScale };
 
 export interface ButtonProps
   extends Omit<React.AllHTMLAttributes<HTMLElement>, 'form'> {
diff --git a/packages/react-components/lib/Button.js b/packages/react-components/lib/Button.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpButton());
 export const Button = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     minimal,
     appearance,
     form,
diff --git a/packages/react-components/lib/Card.js b/packages/react-components/lib/Card.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpCard());
 
 export const Card = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { ...filteredProps } = props;
+  const { className, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/Checkbox.js b/packages/react-components/lib/Checkbox.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpCheckbox());
 export const Checkbox = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     readOnly,
     indeterminate,
diff --git a/packages/react-components/lib/Combobox.d.ts b/packages/react-components/lib/Combobox.d.ts
@@ -3,7 +3,7 @@ import {
   type ComboboxScale
 } from '@jupyter/web-components';
 
-export type { ComboboxElement };
+export type { ComboboxElement, ComboboxScale };
 
 export interface ComboboxProps
   extends Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
diff --git a/packages/react-components/lib/Combobox.js b/packages/react-components/lib/Combobox.js
@@ -2,18 +2,14 @@ import {
   jpCombobox,
   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(jpCombobox());
 
 export const Combobox = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     autowidth,
     minimal,
     open,
diff --git a/packages/react-components/lib/DataGrid.js b/packages/react-components/lib/DataGrid.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpDataGrid());
 export const DataGrid = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     noTabbing,
     generateHeader,
     gridTemplateColumns,
diff --git a/packages/react-components/lib/DataGridCell.js b/packages/react-components/lib/DataGridCell.js
@@ -13,8 +13,14 @@ provideJupyterDesignSystem().register(jpDataGridCell());
 
 export const DataGridCell = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { cellType, gridColumn, rowData, columnDefinition, ...filteredProps } =
-    props;
+  const {
+    className,
+    cellType,
+    gridColumn,
+    rowData,
+    columnDefinition,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'cell-focused', props.onCellFocused);
diff --git a/packages/react-components/lib/DataGridRow.js b/packages/react-components/lib/DataGridRow.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpDataGridRow());
 export const DataGridRow = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     gridTemplateColumns,
     rowType,
     rowData,
diff --git a/packages/react-components/lib/DateField.js b/packages/react-components/lib/DateField.js
@@ -13,8 +13,16 @@ provideJupyterDesignSystem().register(jpDateField());
 
 export const DateField = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { autofocus, step, max, min, disabled, required, ...filteredProps } =
-    props;
+  const {
+    className,
+    autofocus,
+    step,
+    max,
+    min,
+    disabled,
+    required,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'input', props.onInput);
diff --git a/packages/react-components/lib/Dialog.js b/packages/react-components/lib/Dialog.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpDialog());
 export const Dialog = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     trapFocus,
     ariaDescribedby,
     ariaLabelledby,
diff --git a/packages/react-components/lib/Disclosure.js b/packages/react-components/lib/Disclosure.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpDisclosure());
 
 export const Disclosure = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { appearance, title, expanded, ...filteredProps } = props;
+  const { className, appearance, title, expanded, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'toggle', props.onToggle);
diff --git a/packages/react-components/lib/Divider.js b/packages/react-components/lib/Divider.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpDivider());
 
 export const Divider = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { role, orientation, ...filteredProps } = props;
+  const { className, role, orientation, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/Listbox.js b/packages/react-components/lib/Listbox.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpListbox());
 export const Listbox = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     multiple,
     size,
     length,
diff --git a/packages/react-components/lib/Menu.js b/packages/react-components/lib/Menu.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpMenu());
 
 export const Menu = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { ...filteredProps } = props;
+  const { className, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/MenuItem.js b/packages/react-components/lib/MenuItem.js
@@ -13,7 +13,8 @@ provideJupyterDesignSystem().register(jpMenuItem());
 
 export const MenuItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { role, disabled, expanded, checked, ...filteredProps } = props;
+  const { className, role, disabled, expanded, checked, ...filteredProps } =
+    props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'expanded-change', props.onExpand);
diff --git a/packages/react-components/lib/NumberField.js b/packages/react-components/lib/NumberField.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpNumberField());
 export const NumberField = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     hideStep,
     appearance,
diff --git a/packages/react-components/lib/Option.js b/packages/react-components/lib/Option.js
@@ -6,6 +6,7 @@ provideJupyterDesignSystem().register(jpOption());
 export const Option = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     selected,
     value,
     checked,
diff --git a/packages/react-components/lib/Picker.js b/packages/react-components/lib/Picker.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpPicker());
 export const Picker = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     filterSelected,
     filterQuery,
     selection,
diff --git a/packages/react-components/lib/PickerList.js b/packages/react-components/lib/PickerList.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpPickerList());
 
 export const PickerList = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { ...filteredProps } = props;
+  const { className, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/PickerListItem.js b/packages/react-components/lib/PickerListItem.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpPickerListItem());
 
 export const PickerListItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { value, contentsTemplate, ...filteredProps } = props;
+  const { className, value, contentsTemplate, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'contentsTemplate', props.contentsTemplate);
diff --git a/packages/react-components/lib/PickerMenu.js b/packages/react-components/lib/PickerMenu.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpPickerMenu());
 
 export const PickerMenu = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { suggestionsAvailableText, ...filteredProps } = props;
+  const { className, suggestionsAvailableText, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(
diff --git a/packages/react-components/lib/PickerMenuOption.js b/packages/react-components/lib/PickerMenuOption.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpPickerMenuOption());
 
 export const PickerMenuOption = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { value, contentsTemplate, ...filteredProps } = props;
+  const { className, value, contentsTemplate, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'contentsTemplate', props.contentsTemplate);
diff --git a/packages/react-components/lib/Progress.js b/packages/react-components/lib/Progress.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpProgress());
 
 export const Progress = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { value, min, max, paused, ...filteredProps } = props;
+  const { className, value, min, max, paused, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'value', props.value);
diff --git a/packages/react-components/lib/ProgressRing.js b/packages/react-components/lib/ProgressRing.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpProgressRing());
 
 export const ProgressRing = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { value, min, max, paused, ...filteredProps } = props;
+  const { className, value, min, max, paused, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'value', props.value);
diff --git a/packages/react-components/lib/Radio.js b/packages/react-components/lib/Radio.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpRadio());
 export const Radio = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     readOnly,
     name,
diff --git a/packages/react-components/lib/RadioGroup.js b/packages/react-components/lib/RadioGroup.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpRadioGroup());
 export const RadioGroup = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     disabled,
     name,
diff --git a/packages/react-components/lib/Search.js b/packages/react-components/lib/Search.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpSearch());
 export const Search = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     appearance,
     placeholder,
diff --git a/packages/react-components/lib/Select.d.ts b/packages/react-components/lib/Select.d.ts
@@ -3,7 +3,7 @@ import {
   type SelectScale
 } from '@jupyter/web-components';
 
-export type { SelectElement };
+export type { SelectElement, SelectScale };
 
 export interface SelectProps
   extends Omit<
diff --git a/packages/react-components/lib/Select.js b/packages/react-components/lib/Select.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpSelect());
 export const Select = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     autowidth,
     minimal,
     open,
diff --git a/packages/react-components/lib/Skeleton.js b/packages/react-components/lib/Skeleton.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpSkeleton());
 
 export const Skeleton = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { fill, shape, pattern, shimmer, ...filteredProps } = props;
+  const { className, fill, shape, pattern, shimmer, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'shimmer', props.shimmer);
diff --git a/packages/react-components/lib/Slider.js b/packages/react-components/lib/Slider.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpSlider());
 export const Slider = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     orientation,
     mode,
diff --git a/packages/react-components/lib/SliderLabel.js b/packages/react-components/lib/SliderLabel.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpSliderLabel());
 
 export const SliderLabel = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { hideMark, disabled, position, ...filteredProps } = props;
+  const { className, hideMark, disabled, position, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
 
diff --git a/packages/react-components/lib/Switch.js b/packages/react-components/lib/Switch.js
diff --git a/packages/react-components/lib/Tab.js b/packages/react-components/lib/Tab.js
diff --git a/packages/react-components/lib/TabPanel.js b/packages/react-components/lib/TabPanel.js
diff --git a/packages/react-components/lib/Tabs.js b/packages/react-components/lib/Tabs.js
diff --git a/packages/react-components/lib/TextArea.js b/packages/react-components/lib/TextArea.js
diff --git a/packages/react-components/lib/TextField.js b/packages/react-components/lib/TextField.js
diff --git a/packages/react-components/lib/Toolbar.js b/packages/react-components/lib/Toolbar.js
diff --git a/packages/react-components/lib/Tooltip.js b/packages/react-components/lib/Tooltip.js
diff --git a/packages/react-components/lib/TreeItem.js b/packages/react-components/lib/TreeItem.js
diff --git a/packages/react-components/lib/TreeView.js b/packages/react-components/lib/TreeView.js
