Skip to content

Commit a336933

Browse files
fcollonvalfcollonval
authored
Fix boolean attributes handling in react components (#106)
* Fix boolean attributes handling in react components * Prettify --------- Co-authored-by: Frédéric Collonval <[email protected]>
1 parent aa84342 commit a336933

File tree

14 files changed

+62
-10
lines changed

14 files changed

+62
-10
lines changed

‎packages/react-components/lib/Button.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ export const Button = forwardRef((props, forwardedRef) => {
2222
autofocus,
2323
formnovalidate,
2424
defaultSlottedContent,
25+
disabled,
26+
required,
2527
...filteredProps
2628
} = props;
2729

2830
/** Properties - run whenever a property has changed */
2931
useProperties(ref, 'autofocus', props.autofocus);
3032
useProperties(ref, 'formnovalidate', props.formnovalidate);
3133
useProperties(ref, 'defaultSlottedContent', props.defaultSlottedContent);
34+
useProperties(ref, 'disabled', props.disabled);
35+
useProperties(ref, 'required', props.required);
3236

3337
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
3438
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Checkbox.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,25 @@ provideJupyterDesignSystem().register(jpCheckbox());
1313

1414
export const Checkbox = forwardRef((props, forwardedRef) => {
1515
const ref = useRef(null);
16-
const { readonly, readOnly, indeterminate, ...filteredProps } = props;
16+
const {
17+
readonly,
18+
readOnly,
19+
indeterminate,
20+
checked,
21+
disabled,
22+
required,
23+
...filteredProps
24+
} = props;
1725

1826
/** Event listeners - run once */
1927
useEventListener(ref, 'change', props.onChange);
2028

2129
/** Properties - run whenever a property has changed */
2230
useProperties(ref, 'readOnly', props.readOnly);
2331
useProperties(ref, 'indeterminate', props.indeterminate);
32+
useProperties(ref, 'checked', props.checked);
33+
useProperties(ref, 'disabled', props.disabled);
34+
useProperties(ref, 'required', props.required);
2435

2536
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
2637
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Combobox.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const Combobox = forwardRef((props, forwardedRef) => {
2828
disabled,
2929
selectedIndex,
3030
selectedOptions,
31+
required,
3132
...filteredProps
3233
} = props;
3334

@@ -44,6 +45,7 @@ export const Combobox = forwardRef((props, forwardedRef) => {
4445
useProperties(ref, 'disabled', props.disabled);
4546
useProperties(ref, 'selectedIndex', props.selectedIndex);
4647
useProperties(ref, 'selectedOptions', props.selectedOptions);
48+
useProperties(ref, 'required', props.required);
4749

4850
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4951
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/DateField.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ provideJupyterDesignSystem().register(jpDateField());
1313

1414
export const DateField = forwardRef((props, forwardedRef) => {
1515
const ref = useRef(null);
16-
const { autofocus, step, max, min, ...filteredProps } = props;
16+
const { autofocus, step, max, min, disabled, required, ...filteredProps } =
17+
props;
1718

1819
/** Event listeners - run once */
1920
useEventListener(ref, 'input', props.onInput);
@@ -24,6 +25,8 @@ export const DateField = forwardRef((props, forwardedRef) => {
2425
useProperties(ref, 'step', props.step);
2526
useProperties(ref, 'max', props.max);
2627
useProperties(ref, 'min', props.min);
28+
useProperties(ref, 'disabled', props.disabled);
29+
useProperties(ref, 'required', props.required);
2730

2831
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
2932
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/NumberField.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export const NumberField = forwardRef((props, forwardedRef) => {
2727
step,
2828
max,
2929
min,
30+
disabled,
31+
required,
3032
...filteredProps
3133
} = props;
3234

@@ -43,6 +45,8 @@ export const NumberField = forwardRef((props, forwardedRef) => {
4345
useProperties(ref, 'step', props.step);
4446
useProperties(ref, 'max', props.max);
4547
useProperties(ref, 'min', props.min);
48+
useProperties(ref, 'disabled', props.disabled);
49+
useProperties(ref, 'required', props.required);
4650

4751
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4852
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Radio.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,25 @@ provideJupyterDesignSystem().register(jpRadio());
1010

1111
export const Radio = forwardRef((props, forwardedRef) => {
1212
const ref = useRef(null);
13-
const { readonly, readOnly, name, ...filteredProps } = props;
13+
const {
14+
readonly,
15+
readOnly,
16+
name,
17+
checked,
18+
disabled,
19+
required,
20+
...filteredProps
21+
} = props;
1422

1523
/** Event listeners - run once */
1624
useEventListener(ref, 'change', props.onChange);
1725

1826
/** Properties - run whenever a property has changed */
1927
useProperties(ref, 'readOnly', props.readOnly);
2028
useProperties(ref, 'name', props.name);
29+
useProperties(ref, 'checked', props.checked);
30+
useProperties(ref, 'disabled', props.disabled);
31+
useProperties(ref, 'required', props.required);
2132

2233
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
2334
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Search.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export const Search = forwardRef((props, forwardedRef) => {
2222
minlength,
2323
size,
2424
spellcheck,
25+
disabled,
26+
required,
2527
...filteredProps
2628
} = props;
2729

@@ -36,6 +38,8 @@ export const Search = forwardRef((props, forwardedRef) => {
3638
useProperties(ref, 'minlength', props.minlength);
3739
useProperties(ref, 'size', props.size);
3840
useProperties(ref, 'spellcheck', props.spellcheck);
41+
useProperties(ref, 'disabled', props.disabled);
42+
useProperties(ref, 'required', props.required);
3943

4044
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4145
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Select.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const Select = forwardRef((props, forwardedRef) => {
2525
disabled,
2626
selectedIndex,
2727
selectedOptions,
28+
required,
2829
...filteredProps
2930
} = props;
3031

@@ -43,6 +44,7 @@ export const Select = forwardRef((props, forwardedRef) => {
4344
useProperties(ref, 'disabled', props.disabled);
4445
useProperties(ref, 'selectedIndex', props.selectedIndex);
4546
useProperties(ref, 'selectedOptions', props.selectedOptions);
47+
useProperties(ref, 'required', props.required);
4648

4749
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4850
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Slider.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const Slider = forwardRef((props, forwardedRef) => {
2020
min,
2121
max,
2222
step,
23+
disabled,
24+
required,
2325
...filteredProps
2426
} = props;
2527

@@ -33,6 +35,8 @@ export const Slider = forwardRef((props, forwardedRef) => {
3335
useProperties(ref, 'min', props.min);
3436
useProperties(ref, 'max', props.max);
3537
useProperties(ref, 'step', props.step);
38+
useProperties(ref, 'disabled', props.disabled);
39+
useProperties(ref, 'required', props.required);
3640

3741
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
3842
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/Switch.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@ provideJupyterDesignSystem().register(jpSwitch());
1010

1111
export const Switch = forwardRef((props, forwardedRef) => {
1212
const ref = useRef(null);
13-
const { readonly, readOnly, ...filteredProps } = props;
13+
const { readonly, readOnly, checked, disabled, required, ...filteredProps } =
14+
props;
1415

1516
/** Event listeners - run once */
1617
useEventListener(ref, 'change', props.onChange);
1718

1819
/** Properties - run whenever a property has changed */
1920
useProperties(ref, 'readOnly', props.readOnly);
21+
useProperties(ref, 'checked', props.checked);
22+
useProperties(ref, 'disabled', props.disabled);
23+
useProperties(ref, 'required', props.required);
2024

2125
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
2226
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/TextArea.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export const TextArea = forwardRef((props, forwardedRef) => {
2727
cols,
2828
rows,
2929
spellcheck,
30+
disabled,
31+
required,
3032
...filteredProps
3133
} = props;
3234

@@ -42,6 +44,8 @@ export const TextArea = forwardRef((props, forwardedRef) => {
4244
useProperties(ref, 'cols', props.cols);
4345
useProperties(ref, 'rows', props.rows);
4446
useProperties(ref, 'spellcheck', props.spellcheck);
47+
useProperties(ref, 'disabled', props.disabled);
48+
useProperties(ref, 'required', props.required);
4549

4650
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4751
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/TextField.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export const TextField = forwardRef((props, forwardedRef) => {
2626
minlength,
2727
size,
2828
spellcheck,
29+
disabled,
30+
required,
2931
...filteredProps
3032
} = props;
3133

@@ -40,6 +42,8 @@ export const TextField = forwardRef((props, forwardedRef) => {
4042
useProperties(ref, 'minlength', props.minlength);
4143
useProperties(ref, 'size', props.size);
4244
useProperties(ref, 'spellcheck', props.spellcheck);
45+
useProperties(ref, 'disabled', props.disabled);
46+
useProperties(ref, 'required', props.required);
4347

4448
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
4549
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

‎packages/react-components/lib/TreeItem.d.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,6 @@ export interface TreeItemProps
1818
/** 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. */
1919
disabled?: TreeItemElement['disabled'];
2020

21-
/** Whether the tree is nested */
22-
isNestedItem?: TreeItemElement['isNestedItem'];
23-
2421
/** Fires a custom 'expanded-change' event when the expanded state changes */
2522
onExpand?: (event: CustomEvent) => void;
2623

‎packages/react-components/lib/TreeItem.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ provideJupyterDesignSystem().register(jpTreeItem());
1313

1414
export const TreeItem = forwardRef((props, forwardedRef) => {
1515
const ref = useRef(null);
16-
const { expanded, selected, disabled, isNestedItem, ...filteredProps } =
17-
props;
16+
const { expanded, selected, disabled, ...filteredProps } = props;
1817

1918
/** Event listeners - run once */
2019
useEventListener(ref, 'expanded-change', props.onExpand);
@@ -24,7 +23,6 @@ export const TreeItem = forwardRef((props, forwardedRef) => {
2423
useProperties(ref, 'expanded', props.expanded);
2524
useProperties(ref, 'selected', props.selected);
2625
useProperties(ref, 'disabled', props.disabled);
27-
useProperties(ref, 'isNestedItem', props.isNestedItem);
2826

2927
/** Methods - uses `useImperativeHandle` hook to pass ref to component */
3028
useImperativeHandle(forwardedRef, () => ref.current, [ref.current]);

0 commit comments

Comments
 (0)