Fix boolean attributes handling in react components (#106)

* Fix boolean attributes handling in react components * Prettify --------- Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
jupyterlab-contrib · Jun 17, 2024 · a336933 · a336933
1 parent aa84342
commit a336933
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 10 deletions.
diff --git a/packages/react-components/lib/Button.js b/packages/react-components/lib/Button.js
@@ -22,13 +22,17 @@ export const Button = forwardRef((props, forwardedRef) => {
     autofocus,
     formnovalidate,
     defaultSlottedContent,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'autofocus', props.autofocus);
   useProperties(ref, 'formnovalidate', props.formnovalidate);
   useProperties(ref, 'defaultSlottedContent', props.defaultSlottedContent);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Checkbox.js b/packages/react-components/lib/Checkbox.js
@@ -13,14 +13,25 @@ provideJupyterDesignSystem().register(jpCheckbox());
 
 export const Checkbox = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { readonly, readOnly, indeterminate, ...filteredProps } = props;
+  const {
+    readonly,
+    readOnly,
+    indeterminate,
+    checked,
+    disabled,
+    required,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'readOnly', props.readOnly);
   useProperties(ref, 'indeterminate', props.indeterminate);
+  useProperties(ref, 'checked', props.checked);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Combobox.js b/packages/react-components/lib/Combobox.js
@@ -28,6 +28,7 @@ export const Combobox = forwardRef((props, forwardedRef) => {
     disabled,
     selectedIndex,
     selectedOptions,
+    required,
     ...filteredProps
   } = props;
 
@@ -44,6 +45,7 @@ export const Combobox = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'disabled', props.disabled);
   useProperties(ref, 'selectedIndex', props.selectedIndex);
   useProperties(ref, 'selectedOptions', props.selectedOptions);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/DateField.js b/packages/react-components/lib/DateField.js
@@ -13,7 +13,8 @@ provideJupyterDesignSystem().register(jpDateField());
 
 export const DateField = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { autofocus, step, max, min, ...filteredProps } = props;
+  const { autofocus, step, max, min, disabled, required, ...filteredProps } =
+    props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'input', props.onInput);
@@ -24,6 +25,8 @@ export const DateField = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'step', props.step);
   useProperties(ref, 'max', props.max);
   useProperties(ref, 'min', props.min);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/NumberField.js b/packages/react-components/lib/NumberField.js
@@ -27,6 +27,8 @@ export const NumberField = forwardRef((props, forwardedRef) => {
     step,
     max,
     min,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
@@ -43,6 +45,8 @@ export const NumberField = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'step', props.step);
   useProperties(ref, 'max', props.max);
   useProperties(ref, 'min', props.min);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Radio.js b/packages/react-components/lib/Radio.js
@@ -10,14 +10,25 @@ provideJupyterDesignSystem().register(jpRadio());
 
 export const Radio = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { readonly, readOnly, name, ...filteredProps } = props;
+  const {
+    readonly,
+    readOnly,
+    name,
+    checked,
+    disabled,
+    required,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'readOnly', props.readOnly);
   useProperties(ref, 'name', props.name);
+  useProperties(ref, 'checked', props.checked);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Search.js b/packages/react-components/lib/Search.js
@@ -22,6 +22,8 @@ export const Search = forwardRef((props, forwardedRef) => {
     minlength,
     size,
     spellcheck,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
@@ -36,6 +38,8 @@ export const Search = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'minlength', props.minlength);
   useProperties(ref, 'size', props.size);
   useProperties(ref, 'spellcheck', props.spellcheck);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Select.js b/packages/react-components/lib/Select.js
@@ -25,6 +25,7 @@ export const Select = forwardRef((props, forwardedRef) => {
     disabled,
     selectedIndex,
     selectedOptions,
+    required,
     ...filteredProps
   } = props;
 
@@ -43,6 +44,7 @@ export const Select = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'disabled', props.disabled);
   useProperties(ref, 'selectedIndex', props.selectedIndex);
   useProperties(ref, 'selectedOptions', props.selectedOptions);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Slider.js b/packages/react-components/lib/Slider.js
@@ -20,6 +20,8 @@ export const Slider = forwardRef((props, forwardedRef) => {
     min,
     max,
     step,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
@@ -33,6 +35,8 @@ export const Slider = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'min', props.min);
   useProperties(ref, 'max', props.max);
   useProperties(ref, 'step', props.step);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/Switch.js b/packages/react-components/lib/Switch.js
@@ -10,13 +10,17 @@ provideJupyterDesignSystem().register(jpSwitch());
 
 export const Switch = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { readonly, readOnly, ...filteredProps } = props;
+  const { readonly, readOnly, checked, disabled, required, ...filteredProps } =
+    props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'change', props.onChange);
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'readOnly', props.readOnly);
+  useProperties(ref, 'checked', props.checked);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/TextArea.js b/packages/react-components/lib/TextArea.js
@@ -27,6 +27,8 @@ export const TextArea = forwardRef((props, forwardedRef) => {
     cols,
     rows,
     spellcheck,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
@@ -42,6 +44,8 @@ export const TextArea = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'cols', props.cols);
   useProperties(ref, 'rows', props.rows);
   useProperties(ref, 'spellcheck', props.spellcheck);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/TextField.js b/packages/react-components/lib/TextField.js
@@ -26,6 +26,8 @@ export const TextField = forwardRef((props, forwardedRef) => {
     minlength,
     size,
     spellcheck,
+    disabled,
+    required,
     ...filteredProps
   } = props;
 
@@ -40,6 +42,8 @@ export const TextField = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'minlength', props.minlength);
   useProperties(ref, 'size', props.size);
   useProperties(ref, 'spellcheck', props.spellcheck);
+  useProperties(ref, 'disabled', props.disabled);
+  useProperties(ref, 'required', props.required);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

diff --git a/packages/react-components/lib/TreeItem.d.ts b/packages/react-components/lib/TreeItem.d.ts
@@ -18,9 +18,6 @@ export interface TreeItemProps
   /** When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information. */
   disabled?: TreeItemElement['disabled'];
 
-  /** Whether the tree is nested */
-  isNestedItem?: TreeItemElement['isNestedItem'];
-
   /** Fires a custom 'expanded-change' event when the expanded state changes */
   onExpand?: (event: CustomEvent) => void;
 

diff --git a/packages/react-components/lib/TreeItem.js b/packages/react-components/lib/TreeItem.js
@@ -13,8 +13,7 @@ provideJupyterDesignSystem().register(jpTreeItem());
 
 export const TreeItem = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { expanded, selected, disabled, isNestedItem, ...filteredProps } =
-    props;
+  const { expanded, selected, disabled, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, 'expanded-change', props.onExpand);
@@ -24,7 +23,6 @@ export const TreeItem = forwardRef((props, forwardedRef) => {
   useProperties(ref, 'expanded', props.expanded);
   useProperties(ref, 'selected', props.selected);
   useProperties(ref, 'disabled', props.disabled);
-  useProperties(ref, 'isNestedItem', props.isNestedItem);
 
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);