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>

Author: fcollonval

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

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

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

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

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

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

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

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

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

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