From bbe93e8d662c7344ff143fe361e0b69044e0d85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?=
 <frederic.collonval@webscit.com>
Date: Tue, 25 Jun 2024 16:20:05 +0200
Subject: [PATCH] Prevent adding classname attribute for react wrapped
 components (#108)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
---
 packages/react-components/lib/Accordion.js        |  2 +-
 packages/react-components/lib/AccordionItem.js    |  2 +-
 packages/react-components/lib/Anchor.js           |  1 +
 packages/react-components/lib/AnchoredRegion.js   |  1 +
 packages/react-components/lib/Avatar.js           |  3 ++-
 packages/react-components/lib/Badge.js            |  2 +-
 packages/react-components/lib/Breadcrumb.js       |  2 +-
 packages/react-components/lib/BreadcrumbItem.js   |  1 +
 packages/react-components/lib/Button.d.ts         |  5 +++--
 packages/react-components/lib/Button.js           |  1 +
 packages/react-components/lib/Card.js             |  2 +-
 packages/react-components/lib/Checkbox.js         |  1 +
 packages/react-components/lib/Combobox.d.ts       |  2 +-
 packages/react-components/lib/Combobox.js         |  8 ++------
 packages/react-components/lib/DataGrid.js         |  1 +
 packages/react-components/lib/DataGridCell.js     | 10 ++++++++--
 packages/react-components/lib/DataGridRow.js      |  1 +
 packages/react-components/lib/DateField.js        | 12 ++++++++++--
 packages/react-components/lib/Dialog.js           |  1 +
 packages/react-components/lib/Disclosure.js       |  2 +-
 packages/react-components/lib/Divider.js          |  2 +-
 packages/react-components/lib/Listbox.js          |  1 +
 packages/react-components/lib/Menu.js             |  2 +-
 packages/react-components/lib/MenuItem.js         |  3 ++-
 packages/react-components/lib/NumberField.js      |  1 +
 packages/react-components/lib/Option.js           |  1 +
 packages/react-components/lib/Picker.js           |  1 +
 packages/react-components/lib/PickerList.js       |  2 +-
 packages/react-components/lib/PickerListItem.js   |  2 +-
 packages/react-components/lib/PickerMenu.js       |  2 +-
 packages/react-components/lib/PickerMenuOption.js |  2 +-
 packages/react-components/lib/Progress.js         |  2 +-
 packages/react-components/lib/ProgressRing.js     |  2 +-
 packages/react-components/lib/Radio.js            |  1 +
 packages/react-components/lib/RadioGroup.js       |  1 +
 packages/react-components/lib/Search.js           |  1 +
 packages/react-components/lib/Select.d.ts         |  2 +-
 packages/react-components/lib/Select.js           |  1 +
 packages/react-components/lib/Skeleton.js         |  2 +-
 packages/react-components/lib/Slider.js           |  1 +
 packages/react-components/lib/SliderLabel.js      |  2 +-
 packages/react-components/lib/Switch.js           | 11 +++++++++--
 packages/react-components/lib/Tab.js              |  2 +-
 packages/react-components/lib/TabPanel.js         |  2 +-
 packages/react-components/lib/Tabs.js             |  1 +
 packages/react-components/lib/TextArea.js         |  1 +
 packages/react-components/lib/TextField.js        |  1 +
 packages/react-components/lib/Toolbar.js          |  2 +-
 packages/react-components/lib/Tooltip.js          |  1 +
 packages/react-components/lib/TreeItem.js         |  2 +-
 packages/react-components/lib/TreeView.js         |  3 ++-
 51 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/packages/react-components/lib/Accordion.js b/packages/react-components/lib/Accordion.js
index 67fb007..028dd1c 100644
--- 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
index f6ebfaf..3119abb 100644
--- 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
index 921b2ac..8897984 100644
--- 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
index 2124492..943c0a6 100644
--- 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
index a4bd889..6a1ccdc 100644
--- 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
index dc9066e..2143a27 100644
--- 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
index 2f3c074..199f956 100644
--- 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
index 0fc97b2..76e7bff 100644
--- 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
index a53bce8..29a7c6d 100644
--- 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
index c42b6d8..0196ce1 100644
--- 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
index 9c58c61..cf23783 100644
--- 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
index 4cf30fa..174e72b 100644
--- 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
index a650103..77f950f 100644
--- 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
index e88ff1b..636f238 100644
--- 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
index 7dc4d4f..95f6889 100644
--- 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
index 1413c35..8884e1c 100644
--- 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
index da99c66..47646c4 100644
--- 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
index 70309ad..4710cb3 100644
--- 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
index 0df9d28..3ed9baf 100644
--- 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
index 4d6b314..a54dead 100644
--- 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
index 22bf1ea..1390b39 100644
--- 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
index 0858f52..793d28a 100644
--- 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
index a60f89f..ac2b0a9 100644
--- 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
index 30ac7b9..86a418a 100644
--- 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
index 6711b66..c3fb6eb 100644
--- 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
index 5b5d1c7..524e303 100644
--- 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
index f097cfe..2d84d6c 100644
--- 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
index 77e2143..52d2de9 100644
--- 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
index 41b62c3..3e3d92a 100644
--- 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
index 74e3e53..9e7badc 100644
--- 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
index 6c27194..aeb4d19 100644
--- 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
index 1c29cdb..b11eaa2 100644
--- 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
index b812746..007d6d5 100644
--- 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
index acc2bd3..7740a28 100644
--- 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
index 4b477c1..509814c 100644
--- 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
index 61f5026..850ecfb 100644
--- 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
index deaf545..e260d63 100644
--- 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
index 6468fc2..887c646 100644
--- 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
index 6c6e842..cfad924 100644
--- 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
index a3f434d..fb8ac27 100644
--- 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
index 879b620..87a0645 100644
--- 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
index 47e238d..9165fba 100644
--- a/packages/react-components/lib/Switch.js
+++ b/packages/react-components/lib/Switch.js
@@ -10,8 +10,15 @@ provideJupyterDesignSystem().register(jpSwitch());
 
 export const Switch = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { readonly, readOnly, checked, disabled, required, ...filteredProps } =
-    props;
+  const {
+    className,
+    readonly,
+    readOnly,
+    checked,
+    disabled,
+    required,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
diff --git a/packages/react-components/lib/Tab.js b/packages/react-components/lib/Tab.js
index ca196b2..5927459 100644
--- a/packages/react-components/lib/Tab.js
+++ b/packages/react-components/lib/Tab.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpTab());
 
 export const Tab = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { disabled, ...filteredProps } = props;
+  const { className, disabled, ...filteredProps } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'disabled', props.disabled);
diff --git a/packages/react-components/lib/TabPanel.js b/packages/react-components/lib/TabPanel.js
index a9577e7..9f46bd5 100644
--- a/packages/react-components/lib/TabPanel.js
+++ b/packages/react-components/lib/TabPanel.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpTabPanel());
 
 export const TabPanel = 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/Tabs.js b/packages/react-components/lib/Tabs.js
index 428e902..2b15177 100644
--- a/packages/react-components/lib/Tabs.js
+++ b/packages/react-components/lib/Tabs.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpTabs());
 export const Tabs = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     orientation,
     activeid,
     activeindicator,
diff --git a/packages/react-components/lib/TextArea.js b/packages/react-components/lib/TextArea.js
index 3e32f59..3abe0df 100644
--- a/packages/react-components/lib/TextArea.js
+++ b/packages/react-components/lib/TextArea.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpTextArea());
 export const TextArea = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     appearance,
     resize,
     form,
diff --git a/packages/react-components/lib/TextField.js b/packages/react-components/lib/TextField.js
index 48c0a0c..5b62ae4 100644
--- a/packages/react-components/lib/TextField.js
+++ b/packages/react-components/lib/TextField.js
@@ -14,6 +14,7 @@ provideJupyterDesignSystem().register(jpTextField());
 export const TextField = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     readonly,
     appearance,
     placeholder,
diff --git a/packages/react-components/lib/Toolbar.js b/packages/react-components/lib/Toolbar.js
index f815791..2cbf296 100644
--- a/packages/react-components/lib/Toolbar.js
+++ b/packages/react-components/lib/Toolbar.js
@@ -10,7 +10,7 @@ provideJupyterDesignSystem().register(jpToolbar());
 
 export const Toolbar = 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/Tooltip.js b/packages/react-components/lib/Tooltip.js
index cfddae9..bfe36c7 100644
--- a/packages/react-components/lib/Tooltip.js
+++ b/packages/react-components/lib/Tooltip.js
@@ -11,6 +11,7 @@ provideJupyterDesignSystem().register(jpTooltip());
 export const Tooltip = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const {
+    className,
     horizontalViewportLock,
     verticalViewportLock,
     anchor,
diff --git a/packages/react-components/lib/TreeItem.js b/packages/react-components/lib/TreeItem.js
index 26ca79d..ab943f7 100644
--- a/packages/react-components/lib/TreeItem.js
+++ b/packages/react-components/lib/TreeItem.js
@@ -13,7 +13,7 @@ provideJupyterDesignSystem().register(jpTreeItem());
 
 export const TreeItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { expanded, selected, disabled, ...filteredProps } = props;
+  const { className, expanded, selected, disabled, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'expanded-change', props.onExpand);
diff --git a/packages/react-components/lib/TreeView.js b/packages/react-components/lib/TreeView.js
index 21f09a1..cf7b4a2 100644
--- a/packages/react-components/lib/TreeView.js
+++ b/packages/react-components/lib/TreeView.js
@@ -9,7 +9,8 @@ provideJupyterDesignSystem().register(jpTreeView());
 
 export const TreeView = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { renderCollapsedNodes, currentSelected, ...filteredProps } = props;
+  const { className, renderCollapsedNodes, currentSelected, ...filteredProps } =
+    props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'currentSelected', props.currentSelected);