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

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

Author: fcollonval

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);

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);

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,

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,

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 */
 

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);

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 */
 

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,

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'> {

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,

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 */
 

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,

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'> {

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,

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,

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);

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,

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);

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,

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);

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 */
 

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,

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 */
 

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);

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,

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,

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,

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 */
 

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);

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(

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);

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);

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);

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,

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,

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,

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<

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,

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);

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,

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 */