@bspk/ui 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Checkbox/Checkbox.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.js +2 -2
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +3 -4
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/CheckboxOption/CheckboxOption.d.ts +1 -1
- package/dist/components/CheckboxOption/CheckboxOption.js +2 -2
- package/dist/components/CheckboxOption/CheckboxOption.js.map +1 -1
- package/dist/components/Field/utils.d.ts +1 -1
- package/dist/components/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/components/RadioGroup/RadioGroup.js +1 -2
- package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/components/Switch/Switch.d.ts +1 -7
- package/dist/components/Switch/Switch.js +1 -2
- package/dist/components/Switch/Switch.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Checkbox/Checkbox.tsx +3 -8
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +1 -6
- package/src/components/CheckboxOption/CheckboxOption.tsx +1 -3
- package/src/components/Field/utils.ts +1 -1
- package/src/components/RadioGroup/RadioGroup.tsx +0 -2
- package/src/components/Switch/Switch.tsx +1 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './checkbox.scss';
|
|
2
2
|
import { ChangeEvent } from 'react';
|
|
3
3
|
import { ElementProps, FieldControlProps } from '-/types/common';
|
|
4
|
-
export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
|
|
4
|
+
export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'value'> & {
|
|
5
5
|
/**
|
|
6
6
|
* If the checkbox is partially checked or
|
|
7
7
|
* [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
|
|
@@ -57,5 +57,5 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
|
|
|
57
57
|
* @name Checkbox
|
|
58
58
|
* @phase UXReview
|
|
59
59
|
*/
|
|
60
|
-
export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled,
|
|
60
|
+
export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, required, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
|
|
61
61
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -32,7 +32,7 @@ import { useEffect, useRef } from 'react';
|
|
|
32
32
|
* @name Checkbox
|
|
33
33
|
* @phase UXReview
|
|
34
34
|
*/
|
|
35
|
-
export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled,
|
|
35
|
+
export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, required, ...props }) {
|
|
36
36
|
const indeterminate = !!indeterminateProp;
|
|
37
37
|
const checked = !!checkedProp && !indeterminate;
|
|
38
38
|
const inputRef = useRef();
|
|
@@ -41,7 +41,7 @@ export function Checkbox({ checked: checkedProp = false, indeterminate: indeterm
|
|
|
41
41
|
return;
|
|
42
42
|
inputRef.current.indeterminate = indeterminate;
|
|
43
43
|
}, [indeterminate]);
|
|
44
|
-
return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled ||
|
|
44
|
+
return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
|
|
45
45
|
if (!node)
|
|
46
46
|
return;
|
|
47
47
|
inputRef.current = node;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAAgB,UAAU,aACtB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
|
|
@@ -56,5 +56,5 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
|
|
|
56
56
|
* @name CheckboxGroup
|
|
57
57
|
* @phase UXReview
|
|
58
58
|
*/
|
|
59
|
-
export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled,
|
|
59
|
+
export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
|
|
60
60
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -33,16 +33,15 @@ const ALL_LABEL = 'All';
|
|
|
33
33
|
* @name CheckboxGroup
|
|
34
34
|
* @phase UXReview
|
|
35
35
|
*/
|
|
36
|
-
export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false,
|
|
36
|
+
export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
|
|
37
37
|
const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
|
|
38
38
|
idProp,
|
|
39
39
|
required,
|
|
40
40
|
disabled,
|
|
41
|
-
readOnly,
|
|
42
41
|
invalidProp,
|
|
43
42
|
});
|
|
44
|
-
return (_jsxs("div", { ...props, "aria-describedby": ariaDescribedByProp || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", id: id, role: "group", children: [selectAll && (_jsx(ToggleOption, { label: selectAllProps?.label || ALL_LABEL,
|
|
43
|
+
return (_jsxs("div", { ...props, "aria-describedby": ariaDescribedByProp || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", id: id, role: "group", children: [selectAll && (_jsx(ToggleOption, { label: selectAllProps?.label || ALL_LABEL, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": selectAllProps?.label || ALL_LABEL, checked: !!value.length && value.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabled, indeterminate: !!value.length && value.length < options.length, invalid: invalid || undefined, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), value: "all" }) })), options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || optionDisabled, label: label, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": label, checked: value.includes(optionValue), disabled: disabled || optionDisabled, invalid: invalid || undefined, name: name, onChange: (checked) => {
|
|
45
44
|
onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
|
|
46
|
-
},
|
|
45
|
+
}, value: optionValue }) }, optionValue)))] }));
|
|
47
46
|
}
|
|
48
47
|
//# sourceMappingURL=CheckboxGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG5E,MAAM,SAAS,GAAG,KAAK,CAAC;AA8BxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG5E,MAAM,SAAS,GAAG,KAAK,CAAC;AA8BxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EAC8B;IACtC,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO,CACH,kBACQ,KAAK,sBACS,mBAAmB,IAAI,eAAe,IAAI,SAAS,eAC3D,gBAAgB,EAC1B,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,SAAS,YACnD,KAAC,QAAQ,yBACc,oBAAoB,IAAI,gBAAgB,IAAI,SAAS,gBAC5D,cAAc,EAAE,KAAK,IAAI,SAAS,EAC9C,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAC9C,oBAAoB,EAChC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,CAClB,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnF,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,cAAc,EAEpC,KAAK,EAAE,KAAK,YAEZ,KAAC,QAAQ,yBACc,oBAAoB,IAAI,gBAAgB,IAAI,SAAS,gBAC5D,KAAK,EACjB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EACpC,QAAQ,EAAE,QAAQ,IAAI,cAAc,EACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;oBACzF,CAAC,EACD,KAAK,EAAE,WAAW,GACpB,IAdG,WAAW,CAeL,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
|
|
@@ -30,5 +30,5 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
|
|
|
30
30
|
* @name CheckboxOption
|
|
31
31
|
* @phase UXReview
|
|
32
32
|
*/
|
|
33
|
-
export declare function CheckboxOption({ label: labelProp, description, disabled,
|
|
33
|
+
export declare function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
|
|
34
34
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -29,9 +29,9 @@ import { ToggleOption } from '../ToggleOption';
|
|
|
29
29
|
* @name CheckboxOption
|
|
30
30
|
* @phase UXReview
|
|
31
31
|
*/
|
|
32
|
-
export function CheckboxOption({ label: labelProp, description, disabled,
|
|
32
|
+
export function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }) {
|
|
33
33
|
const label = labelProp || description;
|
|
34
34
|
const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
|
|
35
|
-
return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label,
|
|
35
|
+
return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, style: style, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled }) })));
|
|
36
36
|
}
|
|
37
37
|
//# sourceMappingURL=CheckboxOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAKnF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAKnF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,aAAa,EACE;IAClB,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBACC,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,YAEZ,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC/D,CAClB,CACJ,CAAC;AACN,CAAC"}
|
|
@@ -31,7 +31,7 @@ export declare function useFieldInit({ idProp, required, disabled, readOnly, inv
|
|
|
31
31
|
idProp: string | undefined;
|
|
32
32
|
required: boolean | undefined;
|
|
33
33
|
disabled: boolean | undefined;
|
|
34
|
-
readOnly
|
|
34
|
+
readOnly?: boolean | undefined;
|
|
35
35
|
invalidProp: boolean | undefined;
|
|
36
36
|
}): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & {
|
|
37
37
|
invalid: boolean;
|
|
@@ -57,5 +57,5 @@ export type RadioGroupProps = FieldControlProps & {
|
|
|
57
57
|
* @name RadioGroup
|
|
58
58
|
* @phase UXReview
|
|
59
59
|
*/
|
|
60
|
-
export declare function RadioGroup({ onChange, options, name, value: groupValue, disabled,
|
|
60
|
+
export declare function RadioGroup({ onChange, options, name, value: groupValue, disabled, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
|
|
61
61
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -33,12 +33,11 @@ import { RadioOption } from '../RadioOption';
|
|
|
33
33
|
* @name RadioGroup
|
|
34
34
|
* @phase UXReview
|
|
35
35
|
*/
|
|
36
|
-
export function RadioGroup({ onChange, options = [], name, value: groupValue, disabled = false,
|
|
36
|
+
export function RadioGroup({ onChange, options = [], name, value: groupValue, disabled = false, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
|
|
37
37
|
const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
|
|
38
38
|
idProp,
|
|
39
39
|
required,
|
|
40
40
|
disabled,
|
|
41
|
-
readOnly,
|
|
42
41
|
invalidProp,
|
|
43
42
|
});
|
|
44
43
|
return (_jsx("div", { ...props, "aria-describedby": ariaDescribedByProp || ariaDescribedBy || undefined, "data-bspk": "radio-group", id: id, role: "radiogroup", children: options.map(({ label, description, value, ...option }, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AA8BzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AA8BzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO,CACH,iBACQ,KAAK,sBACS,mBAAmB,IAAI,eAAe,IAAI,SAAS,eAC3D,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,YAAY,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE;YAC7D,OAAO,CACH,KAAC,WAAW,wBACU,mBAAmB,IAAI,eAAe,IAAI,SAAS,uBAClD,oBAAoB,IAAI,gBAAgB,IAAI,SAAS,EACxE,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACrC,OAAO,EAAE,OAAO,IAAI,SAAS,EAE7B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IALP,gBAAgB,KAAK,IAAI,KAAK,EAAE,CAMvC,CACL,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}
|
|
@@ -15,12 +15,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
|
|
|
15
15
|
* @required
|
|
16
16
|
*/
|
|
17
17
|
onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
-
/**
|
|
19
|
-
* Only exists as a alias for `disabled` and to match other input properties.
|
|
20
|
-
*
|
|
21
|
-
* @default false
|
|
22
|
-
*/
|
|
23
|
-
readOnly?: boolean;
|
|
24
18
|
/** The value of the switch. */
|
|
25
19
|
value: string;
|
|
26
20
|
};
|
|
@@ -51,5 +45,5 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
|
|
|
51
45
|
* @name Switch
|
|
52
46
|
* @phase UXReview
|
|
53
47
|
*/
|
|
54
|
-
export declare function Switch({ checked, disabled
|
|
48
|
+
export declare function Switch({ checked, disabled, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
55
49
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -27,8 +27,7 @@ import './switch.css.js';
|
|
|
27
27
|
* @name Switch
|
|
28
28
|
* @phase UXReview
|
|
29
29
|
*/
|
|
30
|
-
export function Switch({ checked = false, disabled
|
|
31
|
-
const disabled = readOnly || disabledProp;
|
|
30
|
+
export function Switch({ checked = false, disabled = false, ...props }) {
|
|
32
31
|
return (_jsxs("span", { "data-bspk": "switch", children: [_jsx("input", { ...props, "aria-disabled": disabled || undefined, checked: !!checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), type: "checkbox" }), _jsx("span", { "aria-hidden": true })] }));
|
|
33
32
|
}
|
|
34
33
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAsBvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,EAAe;IAC/E,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import './checkbox.scss';
|
|
|
2
2
|
import { ChangeEvent, useEffect, useRef } from 'react';
|
|
3
3
|
import { ElementProps, FieldControlProps } from '-/types/common';
|
|
4
4
|
|
|
5
|
-
export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
|
|
5
|
+
export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'value'> & {
|
|
6
6
|
/**
|
|
7
7
|
* If the checkbox is partially checked or
|
|
8
8
|
* [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
|
|
@@ -64,7 +64,6 @@ export function Checkbox({
|
|
|
64
64
|
indeterminate: indeterminateProp,
|
|
65
65
|
invalid,
|
|
66
66
|
disabled,
|
|
67
|
-
readOnly,
|
|
68
67
|
required,
|
|
69
68
|
...props
|
|
70
69
|
}: ElementProps<CheckboxProps, 'input'>) {
|
|
@@ -79,10 +78,7 @@ export function Checkbox({
|
|
|
79
78
|
}, [indeterminate]);
|
|
80
79
|
|
|
81
80
|
return (
|
|
82
|
-
<span
|
|
83
|
-
//
|
|
84
|
-
data-bspk="checkbox"
|
|
85
|
-
>
|
|
81
|
+
<span data-bspk="checkbox">
|
|
86
82
|
<input
|
|
87
83
|
{...props}
|
|
88
84
|
aria-describedby={props['aria-describedby'] || undefined}
|
|
@@ -90,9 +86,8 @@ export function Checkbox({
|
|
|
90
86
|
aria-invalid={invalid || undefined}
|
|
91
87
|
checked={checked}
|
|
92
88
|
data-indeterminate={indeterminate || undefined}
|
|
93
|
-
disabled={disabled ||
|
|
89
|
+
disabled={disabled || undefined}
|
|
94
90
|
onChange={(event) => props.onChange(!!event.target.checked, event)}
|
|
95
|
-
readOnly={readOnly}
|
|
96
91
|
ref={(node) => {
|
|
97
92
|
if (!node) return;
|
|
98
93
|
inputRef.current = node;
|
|
@@ -71,7 +71,6 @@ export function CheckboxGroup({
|
|
|
71
71
|
selectAll,
|
|
72
72
|
selectAllProps,
|
|
73
73
|
disabled = false,
|
|
74
|
-
readOnly,
|
|
75
74
|
invalid: invalidProp,
|
|
76
75
|
required,
|
|
77
76
|
id: idProp,
|
|
@@ -83,7 +82,6 @@ export function CheckboxGroup({
|
|
|
83
82
|
idProp,
|
|
84
83
|
required,
|
|
85
84
|
disabled,
|
|
86
|
-
readOnly,
|
|
87
85
|
invalidProp,
|
|
88
86
|
});
|
|
89
87
|
|
|
@@ -96,7 +94,7 @@ export function CheckboxGroup({
|
|
|
96
94
|
role="group"
|
|
97
95
|
>
|
|
98
96
|
{selectAll && (
|
|
99
|
-
<ToggleOption label={selectAllProps?.label || ALL_LABEL}
|
|
97
|
+
<ToggleOption label={selectAllProps?.label || ALL_LABEL}>
|
|
100
98
|
<Checkbox
|
|
101
99
|
aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
|
|
102
100
|
aria-label={selectAllProps?.label || ALL_LABEL}
|
|
@@ -107,7 +105,6 @@ export function CheckboxGroup({
|
|
|
107
105
|
invalid={invalid || undefined}
|
|
108
106
|
name={name}
|
|
109
107
|
onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
|
|
110
|
-
readOnly={readOnly}
|
|
111
108
|
value="all"
|
|
112
109
|
/>
|
|
113
110
|
</ToggleOption>
|
|
@@ -118,7 +115,6 @@ export function CheckboxGroup({
|
|
|
118
115
|
disabled={disabled || optionDisabled}
|
|
119
116
|
key={optionValue}
|
|
120
117
|
label={label}
|
|
121
|
-
readOnly={readOnly}
|
|
122
118
|
>
|
|
123
119
|
<Checkbox
|
|
124
120
|
aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
|
|
@@ -130,7 +126,6 @@ export function CheckboxGroup({
|
|
|
130
126
|
onChange={(checked) => {
|
|
131
127
|
onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
|
|
132
128
|
}}
|
|
133
|
-
readOnly={readOnly}
|
|
134
129
|
value={optionValue}
|
|
135
130
|
/>
|
|
136
131
|
</ToggleOption>
|
|
@@ -36,7 +36,6 @@ export function CheckboxOption({
|
|
|
36
36
|
label: labelProp,
|
|
37
37
|
description,
|
|
38
38
|
disabled,
|
|
39
|
-
readOnly,
|
|
40
39
|
style,
|
|
41
40
|
...checkboxProps
|
|
42
41
|
}: CheckboxOptionProps) {
|
|
@@ -49,10 +48,9 @@ export function CheckboxOption({
|
|
|
49
48
|
description={description}
|
|
50
49
|
disabled={disabled}
|
|
51
50
|
label={label}
|
|
52
|
-
readOnly={readOnly}
|
|
53
51
|
style={style}
|
|
54
52
|
>
|
|
55
|
-
<Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled}
|
|
53
|
+
<Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} />
|
|
56
54
|
</ToggleOption>
|
|
57
55
|
)
|
|
58
56
|
);
|
|
@@ -52,7 +52,7 @@ export function useFieldInit({
|
|
|
52
52
|
idProp: string | undefined;
|
|
53
53
|
required: boolean | undefined;
|
|
54
54
|
disabled: boolean | undefined;
|
|
55
|
-
readOnly
|
|
55
|
+
readOnly?: boolean | undefined;
|
|
56
56
|
invalidProp: boolean | undefined;
|
|
57
57
|
}): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & { invalid: boolean; id: string } {
|
|
58
58
|
const context = useContext(fieldContext);
|
|
@@ -68,7 +68,6 @@ export function RadioGroup({
|
|
|
68
68
|
name,
|
|
69
69
|
value: groupValue,
|
|
70
70
|
disabled = false,
|
|
71
|
-
readOnly,
|
|
72
71
|
invalid: invalidProp,
|
|
73
72
|
required,
|
|
74
73
|
id: idProp,
|
|
@@ -80,7 +79,6 @@ export function RadioGroup({
|
|
|
80
79
|
idProp,
|
|
81
80
|
required,
|
|
82
81
|
disabled,
|
|
83
|
-
readOnly,
|
|
84
82
|
invalidProp,
|
|
85
83
|
});
|
|
86
84
|
|
|
@@ -16,12 +16,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
|
|
|
16
16
|
* @required
|
|
17
17
|
*/
|
|
18
18
|
onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
|
|
19
|
-
/**
|
|
20
|
-
* Only exists as a alias for `disabled` and to match other input properties.
|
|
21
|
-
*
|
|
22
|
-
* @default false
|
|
23
|
-
*/
|
|
24
|
-
readOnly?: boolean;
|
|
25
19
|
/** The value of the switch. */
|
|
26
20
|
value: string;
|
|
27
21
|
};
|
|
@@ -53,9 +47,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
|
|
|
53
47
|
* @name Switch
|
|
54
48
|
* @phase UXReview
|
|
55
49
|
*/
|
|
56
|
-
export function Switch({ checked = false, disabled
|
|
57
|
-
const disabled = readOnly || disabledProp;
|
|
58
|
-
|
|
50
|
+
export function Switch({ checked = false, disabled = false, ...props }: SwitchProps) {
|
|
59
51
|
return (
|
|
60
52
|
<span data-bspk="switch">
|
|
61
53
|
<input
|