@astryxdesign/core 0.1.2-canary.d9633cc → 0.1.2-canary.deb5aa0
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/Center/Center.d.ts +1 -11
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +3 -9
- package/dist/CheckboxInput/CheckboxInput.d.ts +2 -23
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +7 -47
- package/dist/CheckboxList/CheckboxList.d.ts +1 -13
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +6 -28
- package/dist/CheckboxList/CheckboxListContext.d.ts +0 -7
- package/dist/CheckboxList/CheckboxListContext.d.ts.map +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +3 -3
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +5 -5
- package/dist/DateInput/DateInput.d.ts +1 -23
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +6 -42
- package/dist/DateRangeInput/DateRangeInput.d.ts +1 -23
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +5 -33
- package/dist/DateTimeInput/DateTimeInput.d.ts +1 -23
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +9 -59
- package/dist/FileInput/FileInput.d.ts +1 -22
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +4 -29
- package/dist/Grid/Grid.d.ts +1 -11
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +6 -32
- package/dist/InputGroup/InputGroup.d.ts +2 -2
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +4 -10
- package/dist/InputGroup/InputGroupContext.d.ts +0 -4
- package/dist/InputGroup/InputGroupContext.d.ts.map +1 -1
- package/dist/InputGroup/InputGroupContext.js +2 -2
- package/dist/InputGroup/index.d.ts +0 -1
- package/dist/InputGroup/index.d.ts.map +1 -1
- package/dist/Layout/Layout.d.ts +11 -4
- package/dist/Layout/Layout.d.ts.map +1 -1
- package/dist/Layout/Layout.js +11 -10
- package/dist/Layout/LayoutFooter.d.ts +2 -2
- package/dist/Layout/LayoutFooter.d.ts.map +1 -1
- package/dist/Layout/LayoutHeader.d.ts +2 -2
- package/dist/Layout/LayoutHeader.d.ts.map +1 -1
- package/dist/Layout/LayoutPanel.d.ts +2 -2
- package/dist/Layout/LayoutPanel.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts +2 -25
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +6 -31
- package/dist/NumberInput/NumberInput.d.ts +2 -23
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +11 -55
- package/dist/Popover/Popover.d.ts +2 -18
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +2 -5
- package/dist/Popover/usePopover.d.ts +1 -13
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +3 -6
- package/dist/PowerSearch/PowerSearch.d.ts +1 -11
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +0 -2
- package/dist/RadioList/RadioList.d.ts +1 -19
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +7 -30
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +2 -13
- package/dist/SegmentedControl/SegmentedControl.d.ts +1 -12
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +8 -30
- package/dist/SegmentedControl/SegmentedControlContext.d.ts +0 -7
- package/dist/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -9
- package/dist/Selector/Selector.d.ts +1 -22
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +6 -31
- package/dist/Slider/Slider.d.ts +0 -21
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +9 -36
- package/dist/Stack/Stack.d.ts +23 -11
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +0 -8
- package/dist/Stack/StackItem.d.ts +22 -0
- package/dist/Stack/StackItem.d.ts.map +1 -1
- package/dist/Switch/Switch.d.ts +2 -23
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +7 -39
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +2 -1
- package/dist/TextArea/TextArea.d.ts +1 -22
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +5 -39
- package/dist/TextInput/TextInput.d.ts +2 -23
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +10 -55
- package/dist/TimeInput/TimeInput.d.ts +1 -23
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +76 -147
- package/dist/Toast/ToastViewport.js +1 -0
- package/dist/Tokenizer/Tokenizer.d.ts +1 -12
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +4 -26
- package/dist/Typeahead/BaseTypeahead.d.ts +0 -9
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +2 -9
- package/dist/Typeahead/Typeahead.d.ts +1 -24
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +5 -29
- package/dist/astryx.css +3 -4
- package/dist/astryx.umd.js +54 -54
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/useKeyboardHint.d.ts +1 -1
- package/dist/hooks/useKeyboardHint.d.ts.map +1 -1
- package/dist/hooks/useKeyboardHint.js +136 -90
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -2
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +2 -5
- package/docs.mjs +2 -2
- package/package.json +4 -2
- package/src/Carousel/Carousel.doc.mjs +1 -7
- package/src/Center/Center.doc.mjs +2 -12
- package/src/Center/Center.tsx +3 -28
- package/src/CheckboxInput/CheckboxInput.doc.mjs +0 -10
- package/src/CheckboxInput/CheckboxInput.test.tsx +2 -158
- package/src/CheckboxInput/CheckboxInput.tsx +4 -74
- package/src/CheckboxList/CheckboxList.doc.mjs +0 -9
- package/src/CheckboxList/CheckboxList.test.tsx +2 -139
- package/src/CheckboxList/CheckboxList.tsx +0 -38
- package/src/CheckboxList/CheckboxListContext.tsx +0 -7
- package/src/Citation/Citation.doc.mjs +0 -10
- package/src/Citation/Citation.tsx +1 -9
- package/src/CommandPalette/CommandPalette.test.tsx +1 -47
- package/src/CommandPalette/CommandPalette.tsx +21 -9
- package/src/DateInput/DateInput.doc.mjs +56 -281
- package/src/DateInput/DateInput.test.tsx +2 -129
- package/src/DateInput/DateInput.tsx +3 -65
- package/src/DateRangeInput/DateRangeInput.doc.mjs +46 -251
- package/src/DateRangeInput/DateRangeInput.test.tsx +2 -113
- package/src/DateRangeInput/DateRangeInput.tsx +2 -56
- package/src/DateTimeInput/DateTimeInput.doc.mjs +71 -357
- package/src/DateTimeInput/DateTimeInput.test.tsx +2 -157
- package/src/DateTimeInput/DateTimeInput.tsx +4 -80
- package/src/Field/Field.doc.mjs +18 -59
- package/src/FileInput/FileInput.doc.mjs +0 -17
- package/src/FileInput/FileInput.test.tsx +1 -180
- package/src/FileInput/FileInput.tsx +1 -49
- package/src/Grid/Grid.doc.mjs +4 -17
- package/src/Grid/Grid.test.tsx +30 -43
- package/src/Grid/Grid.tsx +3 -38
- package/src/InputGroup/InputGroup.doc.mjs +23 -111
- package/src/InputGroup/InputGroup.test.tsx +0 -80
- package/src/InputGroup/InputGroup.tsx +3 -17
- package/src/InputGroup/InputGroupContext.ts +4 -9
- package/src/InputGroup/index.ts +0 -1
- package/src/Layout/Layout.tsx +16 -8
- package/src/Layout/LayoutFooter.doc.mjs +4 -4
- package/src/Layout/LayoutFooter.tsx +3 -3
- package/src/Layout/LayoutHeader.doc.mjs +4 -4
- package/src/Layout/LayoutHeader.tsx +3 -3
- package/src/Layout/LayoutPanel.tsx +3 -3
- package/src/Lightbox/Lightbox.doc.mjs +0 -9
- package/src/MultiSelector/MultiSelector.doc.mjs +0 -25
- package/src/MultiSelector/MultiSelector.test.tsx +1 -150
- package/src/MultiSelector/MultiSelector.tsx +3 -55
- package/src/NumberInput/NumberInput.doc.mjs +0 -17
- package/src/NumberInput/NumberInput.test.tsx +2 -170
- package/src/NumberInput/NumberInput.tsx +10 -77
- package/src/Popover/Popover.doc.mjs +0 -26
- package/src/Popover/Popover.test.tsx +0 -121
- package/src/Popover/Popover.tsx +2 -23
- package/src/Popover/usePopover.doc.mjs +0 -2
- package/src/Popover/usePopover.tsx +7 -22
- package/src/PowerSearch/PowerSearch.doc.mjs +0 -15
- package/src/PowerSearch/PowerSearch.test.tsx +1 -97
- package/src/PowerSearch/PowerSearch.tsx +3 -13
- package/src/RadioList/RadioList.doc.mjs +0 -9
- package/src/RadioList/RadioList.test.tsx +2 -123
- package/src/RadioList/RadioList.tsx +3 -64
- package/src/RadioList/RadioListItem.tsx +2 -14
- package/src/SegmentedControl/SegmentedControl.doc.mjs +0 -9
- package/src/SegmentedControl/SegmentedControl.test.tsx +2 -130
- package/src/SegmentedControl/SegmentedControl.tsx +4 -52
- package/src/SegmentedControl/SegmentedControlContext.ts +0 -7
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -12
- package/src/Selector/Selector.doc.mjs +0 -21
- package/src/Selector/Selector.test.tsx +1 -123
- package/src/Selector/Selector.tsx +3 -53
- package/src/Slider/Slider.doc.mjs +0 -15
- package/src/Slider/Slider.test.tsx +2 -155
- package/src/Slider/Slider.tsx +5 -53
- package/src/Stack/Stack.doc.mjs +0 -20
- package/src/Stack/Stack.tsx +23 -20
- package/src/Stack/StackItem.tsx +23 -0
- package/src/Switch/Switch.doc.mjs +0 -15
- package/src/Switch/Switch.test.tsx +27 -162
- package/src/Switch/Switch.tsx +5 -59
- package/src/Table/Table.doc.mjs +0 -2
- package/src/Table/index.ts +2 -0
- package/src/TextArea/TextArea.doc.mjs +0 -17
- package/src/TextArea/TextArea.test.tsx +35 -167
- package/src/TextArea/TextArea.tsx +2 -59
- package/src/TextInput/TextInput.doc.mjs +0 -17
- package/src/TextInput/TextInput.test.tsx +34 -168
- package/src/TextInput/TextInput.tsx +9 -77
- package/src/TimeInput/TimeInput.doc.mjs +60 -340
- package/src/TimeInput/TimeInput.test.tsx +7 -255
- package/src/TimeInput/TimeInput.tsx +70 -176
- package/src/Toast/ToastViewport.test.tsx +0 -10
- package/src/Toast/ToastViewport.tsx +3 -3
- package/src/Tokenizer/Tokenizer.doc.mjs +0 -15
- package/src/Tokenizer/Tokenizer.test.tsx +1 -105
- package/src/Tokenizer/Tokenizer.tsx +1 -37
- package/src/Typeahead/BaseTypeahead.tsx +1 -17
- package/src/Typeahead/Typeahead.doc.mjs +30 -136
- package/src/Typeahead/Typeahead.test.tsx +1 -171
- package/src/Typeahead/Typeahead.tsx +1 -52
- package/src/hooks/useKeyboardHint.doc.mjs +4 -4
- package/src/hooks/useKeyboardHint.tsx +128 -84
- package/src/hooks/useListFocus.doc.mjs +0 -1
- package/src/utils/index.ts +0 -2
- package/src/utils/timeParser.test.ts +0 -10
- package/src/utils/timeParser.ts +2 -5
- package/dist/utils/inputAria.d.ts +0 -29
- package/dist/utils/inputAria.d.ts.map +0 -1
- package/dist/utils/inputAria.js +0 -30
- package/src/Citation/Citation.test.tsx +0 -117
- package/src/docs-script.test.mjs +0 -50
- package/src/hooks/useKeyboardHint.test.tsx +0 -70
- package/src/utils/inputAria.test.ts +0 -39
- package/src/utils/inputAria.ts +0 -58
package/dist/Center/Center.d.ts
CHANGED
|
@@ -35,16 +35,6 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
|
|
|
35
35
|
* Numbers are treated as pixels, strings are used as-is (e.g., '100%').
|
|
36
36
|
*/
|
|
37
37
|
height?: SizeValue;
|
|
38
|
-
/**
|
|
39
|
-
* Maximum width of the container.
|
|
40
|
-
* Numbers are treated as pixels, strings are used as-is (e.g., '100%').
|
|
41
|
-
*/
|
|
42
|
-
maxWidth?: SizeValue;
|
|
43
|
-
/**
|
|
44
|
-
* Minimum height of the container.
|
|
45
|
-
* Numbers are treated as pixels, strings are used as-is (e.g., '100%').
|
|
46
|
-
*/
|
|
47
|
-
minHeight?: SizeValue;
|
|
48
38
|
/**
|
|
49
39
|
* Whether to make the container inline-flex (useful for text/icons).
|
|
50
40
|
* @default false
|
|
@@ -68,7 +58,7 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
|
|
|
68
58
|
* </Center>
|
|
69
59
|
* ```
|
|
70
60
|
*/
|
|
71
|
-
export declare function Center({ axis, width, height,
|
|
61
|
+
export declare function Center({ axis, width, height, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
|
|
72
62
|
export declare namespace Center {
|
|
73
63
|
var displayName: string;
|
|
74
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA2B9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAG5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmBb;yBA9Be,MAAM"}
|
package/dist/Center/Center.js
CHANGED
|
@@ -39,17 +39,13 @@ const styles = {
|
|
|
39
39
|
|
|
40
40
|
// Dynamic styles for sizing props
|
|
41
41
|
const dynamicStyles = {
|
|
42
|
-
sizing: (width, height
|
|
42
|
+
sizing: (width, height) => [{
|
|
43
43
|
kzqmXN: width != null ? "x5lhr3w" : width,
|
|
44
44
|
kZKoxP: height != null ? "x16ye13r" : height,
|
|
45
|
-
ks0D6T: maxWidth != null ? "xf68679" : maxWidth,
|
|
46
|
-
kAzted: minHeight != null ? "x82snj4" : minHeight,
|
|
47
45
|
$$css: true
|
|
48
46
|
}, {
|
|
49
47
|
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
|
|
50
|
-
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height)
|
|
51
|
-
"--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(maxWidth),
|
|
52
|
-
"--x-minHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(minHeight)
|
|
48
|
+
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height)
|
|
53
49
|
}]
|
|
54
50
|
};
|
|
55
51
|
/**
|
|
@@ -69,8 +65,6 @@ export function Center({
|
|
|
69
65
|
axis = 'both',
|
|
70
66
|
width,
|
|
71
67
|
height,
|
|
72
|
-
maxWidth,
|
|
73
|
-
minHeight,
|
|
74
68
|
isInline = false,
|
|
75
69
|
children,
|
|
76
70
|
xstyle,
|
|
@@ -81,7 +75,7 @@ export function Center({
|
|
|
81
75
|
}) {
|
|
82
76
|
const stylexProps = mergeProps(themeProps('center', {
|
|
83
77
|
axis
|
|
84
|
-
}), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null
|
|
78
|
+
}), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null), xstyle), className, style);
|
|
85
79
|
return /*#__PURE__*/_jsx("div", {
|
|
86
80
|
ref: ref,
|
|
87
81
|
...stylexProps,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file CheckboxInput.tsx
|
|
3
|
-
* @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
|
|
3
|
+
* @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
|
|
4
4
|
* @output Exports CheckboxInput component, CheckboxInputProps
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by CheckboxInput.test.tsx
|
|
6
6
|
*
|
|
@@ -66,27 +66,6 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
|
|
|
66
66
|
* @default false
|
|
67
67
|
*/
|
|
68
68
|
isDisabled?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Explains why the checkbox is disabled. When set together with
|
|
71
|
-
* `isDisabled`, the checkbox shows a tooltip with this text on hover and
|
|
72
|
-
* keyboard focus, and the control stays focusable (via `aria-disabled`) so
|
|
73
|
-
* the reason is discoverable by keyboard and assistive technology.
|
|
74
|
-
* Activation stays blocked.
|
|
75
|
-
*
|
|
76
|
-
* Use this instead of wrapping a disabled checkbox in `Tooltip` — disabled
|
|
77
|
-
* controls don't emit the pointer events an external tooltip needs.
|
|
78
|
-
*
|
|
79
|
-
* @example
|
|
80
|
-
* ```
|
|
81
|
-
* <CheckboxInput
|
|
82
|
-
* label="Accept terms"
|
|
83
|
-
* value={accepted}
|
|
84
|
-
* isDisabled
|
|
85
|
-
* disabledMessage="Terms are managed by your administrator"
|
|
86
|
-
* />
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
disabledMessage?: string;
|
|
90
69
|
/**
|
|
91
70
|
* Whether the checkbox is read-only.
|
|
92
71
|
* Displays the current state at full opacity but prevents interaction.
|
|
@@ -153,7 +132,7 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
|
|
|
153
132
|
* />
|
|
154
133
|
* ```
|
|
155
134
|
*/
|
|
156
|
-
export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled,
|
|
135
|
+
export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, }: CheckboxInputProps): import("react").JSX.Element;
|
|
157
136
|
export declare namespace CheckboxInput {
|
|
158
137
|
var displayName: string;
|
|
159
138
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA4IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,kBAAkB,+BAsKpB;yBA5Le,aAAa"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file CheckboxInput.tsx
|
|
7
|
-
* @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
|
|
7
|
+
* @input Uses React, useId, ChangeEvent, FieldLabel, FieldStatus, IconType, InputStatus
|
|
8
8
|
* @output Exports CheckboxInput component, CheckboxInputProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by CheckboxInput.test.tsx
|
|
10
10
|
*
|
|
@@ -15,19 +15,17 @@
|
|
|
15
15
|
* - /apps/storybook/stories/CheckboxInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/templates/blocks/components/CheckboxInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useCallback,
|
|
18
|
+
import { useId, useCallback, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, fontWeightVars, borderVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { FieldLabel } from "../Field/FieldLabel.js";
|
|
23
23
|
import { FieldStatus } from "../FieldStatus/FieldStatus.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
|
-
import { useTooltip } from "../Tooltip/index.js";
|
|
26
25
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
26
|
import "./checkbox.markers.stylex.js";
|
|
28
27
|
import { checkboxScope } from "./checkbox.markers.stylex.js";
|
|
29
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
|
-
import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
|
|
31
29
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
30
|
const styles = {
|
|
33
31
|
container: {
|
|
@@ -205,7 +203,6 @@ export function CheckboxInput({
|
|
|
205
203
|
isLoading = false,
|
|
206
204
|
value,
|
|
207
205
|
isDisabled = false,
|
|
208
|
-
disabledMessage,
|
|
209
206
|
isReadOnly = false,
|
|
210
207
|
isOptional = false,
|
|
211
208
|
isRequired = false,
|
|
@@ -226,26 +223,6 @@ export function CheckboxInput({
|
|
|
226
223
|
const [, startTransition] = useTransition();
|
|
227
224
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
228
225
|
const isBusy = isLoading || optimisticValue !== value;
|
|
229
|
-
|
|
230
|
-
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
231
|
-
// tooltip listeners attach to the checkbox row (which already exists) and the
|
|
232
|
-
// native checkbox stays perceivable via aria-disabled instead of the disabled
|
|
233
|
-
// attribute. Value mutation is blocked by the isDisabled guard in onChange.
|
|
234
|
-
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
235
|
-
// Keep the native checkbox focusable via aria-disabled either when it renders
|
|
236
|
-
// its own reason tooltip, or when it sits in a CheckboxList whose whole-group
|
|
237
|
-
// `disabledMessage` (shown on the group container) needs each checkbox to
|
|
238
|
-
// stay keyboard-perceivable. The group signals this through context rather
|
|
239
|
-
// than a public prop.
|
|
240
|
-
const checkboxListContext = use(CheckboxListContext);
|
|
241
|
-
const isFocusableDisabled = isDisabled && (showsDisabledMessage || (checkboxListContext?.hasDisabledMessage ?? false));
|
|
242
|
-
const disabledMessageTooltip = useTooltip({
|
|
243
|
-
placement: 'above',
|
|
244
|
-
// The container row is not naturally focusable; focusin bubbles up from the
|
|
245
|
-
// native checkbox, so always attach focus listeners.
|
|
246
|
-
focusTrigger: 'always',
|
|
247
|
-
isEnabled: showsDisabledMessage
|
|
248
|
-
});
|
|
249
226
|
const isIndeterminate = optimisticValue === 'indeterminate';
|
|
250
227
|
const isChecked = optimisticValue === true;
|
|
251
228
|
const isCheckedOrIndeterminate = isChecked || isIndeterminate;
|
|
@@ -269,42 +246,25 @@ export function CheckboxInput({
|
|
|
269
246
|
if (status?.message) {
|
|
270
247
|
describedByParts.push(statusMessageID);
|
|
271
248
|
}
|
|
272
|
-
if (showsDisabledMessage) {
|
|
273
|
-
describedByParts.push(disabledMessageTooltip.describedBy);
|
|
274
|
-
}
|
|
275
249
|
const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
|
|
276
250
|
return /*#__PURE__*/_jsxs("div", {
|
|
277
251
|
...mergeProps(themeProps('checkbox-input', {
|
|
278
252
|
size
|
|
279
253
|
}), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
|
|
280
254
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
281
|
-
ref: el => {
|
|
282
|
-
// Interaction (hover/focus) listeners for the disabled-message
|
|
283
|
-
// tooltip attach to the whole row for a larger trigger target;
|
|
284
|
-
// positioning anchors on the checkbox itself (below) so the tooltip
|
|
285
|
-
// appears next to the control, not the far edge of the row.
|
|
286
|
-
// Handlers are gated internally by isEnabled, so attaching
|
|
287
|
-
// unconditionally is safe.
|
|
288
|
-
disabledMessageTooltip.interactionRef(el);
|
|
289
|
-
},
|
|
290
255
|
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, !isDisabled && checkboxScope),
|
|
291
256
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
292
257
|
...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
|
|
293
258
|
children: [/*#__PURE__*/_jsx("input", {
|
|
294
|
-
ref: mergeRefs(ref, indeterminateRef
|
|
259
|
+
ref: mergeRefs(ref, indeterminateRef),
|
|
295
260
|
id: id,
|
|
296
261
|
type: "checkbox",
|
|
297
|
-
checked: isChecked
|
|
298
|
-
|
|
299
|
-
// aria-disabled so the reason is focus-discoverable; toggling is
|
|
300
|
-
// still blocked by the isDisabled guard in onChange below.
|
|
301
|
-
,
|
|
302
|
-
disabled: isDisabled && !isFocusableDisabled,
|
|
303
|
-
"aria-disabled": isFocusableDisabled ? 'true' : undefined,
|
|
262
|
+
checked: isChecked,
|
|
263
|
+
disabled: isDisabled,
|
|
304
264
|
readOnly: isReadOnly,
|
|
305
265
|
required: isRequired,
|
|
306
266
|
onChange: e => {
|
|
307
|
-
if (
|
|
267
|
+
if (isBusy || isReadOnly) {
|
|
308
268
|
return;
|
|
309
269
|
}
|
|
310
270
|
const checked = e.target.checked;
|
|
@@ -371,7 +331,7 @@ export function CheckboxInput({
|
|
|
371
331
|
message: status.message,
|
|
372
332
|
id: statusMessageID,
|
|
373
333
|
variant: "detached"
|
|
374
|
-
})
|
|
334
|
+
})]
|
|
375
335
|
});
|
|
376
336
|
}
|
|
377
337
|
CheckboxInput.displayName = 'CheckboxInput';
|
|
@@ -67,18 +67,6 @@ export interface CheckboxListProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
|
|
|
67
67
|
* @default false
|
|
68
68
|
*/
|
|
69
69
|
isDisabled?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* Explains why the checkbox group is disabled. Applies to the whole-group
|
|
72
|
-
* disabled state (`isDisabled`), not individual items. When set together with
|
|
73
|
-
* `isDisabled`, the group shows a tooltip with this text on hover and keyboard
|
|
74
|
-
* focus, and its checkboxes stay focusable (via `aria-disabled`) so the reason
|
|
75
|
-
* is discoverable by keyboard and assistive technology. Toggling stays
|
|
76
|
-
* blocked.
|
|
77
|
-
*
|
|
78
|
-
* Use this instead of wrapping a disabled group in `Tooltip` — disabled
|
|
79
|
-
* controls don't emit the pointer events an external tooltip needs.
|
|
80
|
-
*/
|
|
81
|
-
disabledMessage?: string;
|
|
82
70
|
/**
|
|
83
71
|
* Whether all checkbox items are read-only.
|
|
84
72
|
* Displays the current state at full opacity but prevents interaction.
|
|
@@ -115,7 +103,7 @@ export interface CheckboxListProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
|
|
|
115
103
|
* </CheckboxList>
|
|
116
104
|
* ```
|
|
117
105
|
*/
|
|
118
|
-
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled,
|
|
106
|
+
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, isReadOnly, children, ref, width, xstyle, className, style, 'data-testid': dataTestId, }: CheckboxListProps): import("react").JSX.Element;
|
|
119
107
|
export declare namespace CheckboxList {
|
|
120
108
|
var displayName: string;
|
|
121
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,GAC1B,EAAE,iBAAiB,+BAkGnB;yBArHe,YAAY"}
|
|
@@ -18,11 +18,10 @@
|
|
|
18
18
|
import { useCallback, useId, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import { Field } from "../Field/Field.js";
|
|
20
20
|
import { List } from "../List/List.js";
|
|
21
|
-
import { useTooltip } from "../Tooltip/index.js";
|
|
22
21
|
import { mergeProps } from "../utils/index.js";
|
|
23
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
23
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
25
|
-
import { jsx as _jsx
|
|
24
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
26
25
|
const EMPTY_ARRAY = [];
|
|
27
26
|
/**
|
|
28
27
|
* A checkbox group component for multi-value selection.
|
|
@@ -53,7 +52,6 @@ export function CheckboxList({
|
|
|
53
52
|
density = 'balanced',
|
|
54
53
|
hasDividers = false,
|
|
55
54
|
isDisabled = false,
|
|
56
|
-
disabledMessage,
|
|
57
55
|
isReadOnly = false,
|
|
58
56
|
children,
|
|
59
57
|
ref,
|
|
@@ -74,19 +72,6 @@ export function CheckboxList({
|
|
|
74
72
|
// Tracks which item has a pending `changeAction`. Auto-reverts to null when
|
|
75
73
|
// the transition settles, so the spinner clears without manual cleanup.
|
|
76
74
|
const [loadingValue, setLoadingValue] = useOptimistic(null);
|
|
77
|
-
|
|
78
|
-
// Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
|
|
79
|
-
// controls swallow pointer events, so the tooltip listeners attach to the
|
|
80
|
-
// group container and the checkboxes stay perceivable via aria-disabled
|
|
81
|
-
// instead of the disabled attribute. Toggling is blocked in the item.
|
|
82
|
-
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
83
|
-
const disabledMessageTooltip = useTooltip({
|
|
84
|
-
placement: 'above',
|
|
85
|
-
// The group container is not naturally focusable; focusin bubbles up from
|
|
86
|
-
// the checkboxes, so always attach focus listeners.
|
|
87
|
-
focusTrigger: 'always',
|
|
88
|
-
isEnabled: showsDisabledMessage
|
|
89
|
-
});
|
|
90
75
|
const handleChange = useCallback((newValues, toggledValue) => {
|
|
91
76
|
onChange?.(newValues);
|
|
92
77
|
if (changeAction) {
|
|
@@ -103,11 +88,10 @@ export function CheckboxList({
|
|
|
103
88
|
value: isCollectionMode ? optimisticValue : undefined,
|
|
104
89
|
onChange: isCollectionMode ? handleChange : undefined,
|
|
105
90
|
isDisabled,
|
|
106
|
-
hasDisabledMessage: showsDisabledMessage,
|
|
107
91
|
isReadOnly,
|
|
108
92
|
loadingValue
|
|
109
|
-
}), [isCollectionMode, optimisticValue, handleChange, isDisabled,
|
|
110
|
-
return /*#__PURE__*/
|
|
93
|
+
}), [isCollectionMode, optimisticValue, handleChange, isDisabled, isReadOnly, loadingValue]);
|
|
94
|
+
return /*#__PURE__*/_jsx(Field, {
|
|
111
95
|
ref: ref,
|
|
112
96
|
"data-testid": dataTestId,
|
|
113
97
|
label: label,
|
|
@@ -130,25 +114,19 @@ export function CheckboxList({
|
|
|
130
114
|
className,
|
|
131
115
|
style
|
|
132
116
|
}),
|
|
133
|
-
children:
|
|
117
|
+
children: /*#__PURE__*/_jsx(CheckboxListContext, {
|
|
134
118
|
value: contextValue,
|
|
135
119
|
children: /*#__PURE__*/_jsx("div", {
|
|
136
|
-
ref: el => {
|
|
137
|
-
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
138
|
-
// Handlers are gated internally by isEnabled, so attaching
|
|
139
|
-
// unconditionally is safe.
|
|
140
|
-
disabledMessageTooltip.ref(el);
|
|
141
|
-
},
|
|
142
120
|
role: "group",
|
|
143
121
|
"aria-labelledby": labelID,
|
|
144
|
-
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null
|
|
122
|
+
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined,
|
|
145
123
|
children: /*#__PURE__*/_jsx(List, {
|
|
146
124
|
density: density,
|
|
147
125
|
hasDividers: hasDividers,
|
|
148
126
|
children: children
|
|
149
127
|
})
|
|
150
128
|
})
|
|
151
|
-
})
|
|
129
|
+
})
|
|
152
130
|
});
|
|
153
131
|
}
|
|
154
132
|
CheckboxList.displayName = 'CheckboxList';
|
|
@@ -8,13 +8,6 @@ export interface CheckboxListContextValue {
|
|
|
8
8
|
*/
|
|
9
9
|
onChange?: (values: string[], toggledValue?: string) => void;
|
|
10
10
|
isDisabled: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* True when the whole group is disabled *and* a `disabledMessage` is set. In
|
|
13
|
-
* that mode items stay focusable via `aria-disabled` (instead of the native
|
|
14
|
-
* `disabled` attribute) so the group's disabled-reason tooltip is keyboard-
|
|
15
|
-
* and AT-discoverable; toggling is still blocked.
|
|
16
|
-
*/
|
|
17
|
-
hasDisabledMessage?: boolean;
|
|
18
11
|
isReadOnly: boolean;
|
|
19
12
|
/**
|
|
20
13
|
* The value of the item with a pending `changeAction`, or null when idle.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB
|
|
1
|
+
{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AA+FD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA0EpC;yBApFe,QAAQ"}
|
|
@@ -50,7 +50,7 @@ const styles = {
|
|
|
50
50
|
},
|
|
51
51
|
labelHover: {
|
|
52
52
|
kWkggS: "xe9uy6x",
|
|
53
|
-
kMwMTN: "
|
|
53
|
+
kMwMTN: "x140uwzg",
|
|
54
54
|
$$css: true
|
|
55
55
|
},
|
|
56
56
|
number: {
|
|
@@ -61,7 +61,7 @@ const styles = {
|
|
|
61
61
|
kGuDYH: "x141an7d",
|
|
62
62
|
k63SB2: "x2mo6ok",
|
|
63
63
|
kLWn49: "x1ltkj2j",
|
|
64
|
-
kMwMTN: "
|
|
64
|
+
kMwMTN: "xjse4m1",
|
|
65
65
|
kWkggS: "xgcxg3y",
|
|
66
66
|
kaIpWk: "xjspbzw",
|
|
67
67
|
k7Eaqz: "x16asifk",
|
|
@@ -75,7 +75,7 @@ const styles = {
|
|
|
75
75
|
$$css: true
|
|
76
76
|
},
|
|
77
77
|
numberHover: {
|
|
78
|
-
kWkggS: "
|
|
78
|
+
kWkggS: "xe9uy6x",
|
|
79
79
|
$$css: true
|
|
80
80
|
}
|
|
81
81
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA+GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAC5B,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,EACA,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAA8B,EAC9B,kBAAqC,EACrC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAyB,EACzB,KAAW,EACX,SAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAqRxB;yBAvSe,cAAc"}
|
|
@@ -314,12 +314,12 @@ export function CommandPalette({
|
|
|
314
314
|
isBusy
|
|
315
315
|
}), [optimisticSearch, setOptimisticSearch, runSearch, value, setValue, listId, combobox.highlightedIndex, combobox.setHighlightedIndex, combobox.getItemId, selectableItems, optimisticResults, selectItem, handleKeyDown, handleClose, isOpen, isBusy]);
|
|
316
316
|
|
|
317
|
-
//
|
|
318
|
-
//
|
|
319
|
-
//
|
|
320
|
-
//
|
|
317
|
+
// Empty state uses committed search (= what current results correspond to),
|
|
318
|
+
// not optimisticSearch (= what the user typed).
|
|
319
|
+
// While the transition is pending, search stays at '' so showEmptyBootstrap
|
|
320
|
+
// remains true even after the user has started typing.
|
|
321
321
|
const showEmptyBootstrap = search === '' && optimisticResults.length === 0;
|
|
322
|
-
const showEmptySearch = search !== '' && optimisticResults.length === 0;
|
|
322
|
+
const showEmptySearch = !isPending && search !== '' && optimisticResults.length === 0;
|
|
323
323
|
let listContent;
|
|
324
324
|
if (showEmptyBootstrap) {
|
|
325
325
|
listContent = /*#__PURE__*/_jsx(CommandPaletteEmpty, {
|
|
@@ -50,28 +50,6 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
50
50
|
* @default false
|
|
51
51
|
*/
|
|
52
52
|
isDisabled?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Explains why the input is disabled. When set together with
|
|
55
|
-
* `isDisabled`, the input shows a tooltip with this text on hover and
|
|
56
|
-
* keyboard focus, and the field stays focusable (via `aria-disabled`)
|
|
57
|
-
* so the reason is discoverable by keyboard and assistive technology.
|
|
58
|
-
* Typing and calendar activation stay blocked.
|
|
59
|
-
*
|
|
60
|
-
* Use this instead of wrapping a disabled input in `Tooltip` — disabled
|
|
61
|
-
* controls don't emit the pointer events an external tooltip needs.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```
|
|
65
|
-
* <DateInput
|
|
66
|
-
* label="Event date"
|
|
67
|
-
* value={date}
|
|
68
|
-
* onChange={setDate}
|
|
69
|
-
* isDisabled
|
|
70
|
-
* disabledMessage="You need the Editor role to change this"
|
|
71
|
-
* />
|
|
72
|
-
* ```
|
|
73
|
-
*/
|
|
74
|
-
disabledMessage?: string;
|
|
75
53
|
/**
|
|
76
54
|
* The selected date in ISO format (YYYY-MM-DD).
|
|
77
55
|
*/
|
|
@@ -154,7 +132,7 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
154
132
|
* />
|
|
155
133
|
* ```
|
|
156
134
|
*/
|
|
157
|
-
export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled,
|
|
135
|
+
export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder, size, status, labelTooltip, hasClear, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
|
|
158
136
|
export declare namespace DateInput {
|
|
159
137
|
var displayName: string;
|
|
160
138
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAW,KAAK,aAAa,EAAsB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAW,KAAK,aAAa,EAAsB,MAAM,aAAa,CAAC;AA4D9E,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAIpD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAA6B,EAC7B,IAAW,EACX,MAAM,EACN,YAAY,EACZ,QAAgB,EAChB,cAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkUhB;yBA5Ve,SAAS"}
|
|
@@ -26,7 +26,6 @@ import { Spinner } from "../Spinner/index.js";
|
|
|
26
26
|
import { Calendar } from "../Calendar/index.js";
|
|
27
27
|
import { useCalendarConstraints } from "../Calendar/hooks/index.js";
|
|
28
28
|
import { usePopover } from "../Popover/index.js";
|
|
29
|
-
import { useTooltip } from "../Tooltip/index.js";
|
|
30
29
|
import { parseDateInput } from "../utils/index.js";
|
|
31
30
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
32
31
|
const sizeStyles = {
|
|
@@ -71,7 +70,6 @@ export function DateInput({
|
|
|
71
70
|
isOptional = false,
|
|
72
71
|
isRequired = false,
|
|
73
72
|
isDisabled = false,
|
|
74
|
-
disabledMessage,
|
|
75
73
|
value,
|
|
76
74
|
onChange,
|
|
77
75
|
changeAction,
|
|
@@ -103,22 +101,6 @@ export function DateInput({
|
|
|
103
101
|
const isBusy = isLoading || optimisticValue !== value;
|
|
104
102
|
const isEffectivelyDisabled = isDisabled || isBusy;
|
|
105
103
|
|
|
106
|
-
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
107
|
-
// tooltip listeners attach to the input container (which already exists) and
|
|
108
|
-
// the text input stays perceivable via aria-disabled instead of the disabled
|
|
109
|
-
// attribute. Typing is blocked with readOnly and value mutation guards;
|
|
110
|
-
// calendar activation is blocked by the isEffectivelyDisabled guards. Only
|
|
111
|
-
// the persistent isDisabled state (not the transient busy state) surfaces a
|
|
112
|
-
// reason.
|
|
113
|
-
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
114
|
-
const disabledMessageTooltip = useTooltip({
|
|
115
|
-
placement: 'above',
|
|
116
|
-
// The container div is not naturally focusable; focusin bubbles up from
|
|
117
|
-
// the input, so always attach focus listeners.
|
|
118
|
-
focusTrigger: 'always',
|
|
119
|
-
isEnabled: showsDisabledMessage
|
|
120
|
-
});
|
|
121
|
-
|
|
122
104
|
// Status icon mapping
|
|
123
105
|
const statusIconMap = {
|
|
124
106
|
warning: 'warning',
|
|
@@ -139,7 +121,7 @@ export function DateInput({
|
|
|
139
121
|
max,
|
|
140
122
|
dateConstraints
|
|
141
123
|
});
|
|
142
|
-
const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null
|
|
124
|
+
const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
|
|
143
125
|
|
|
144
126
|
// Pending input while user is typing (null = show formatted value)
|
|
145
127
|
const [pendingInput, setPendingInput] = useState(null);
|
|
@@ -217,11 +199,6 @@ export function DateInput({
|
|
|
217
199
|
|
|
218
200
|
// Handle input text change - update immediately if valid and allowed
|
|
219
201
|
const handleInputChange = useCallback(e => {
|
|
220
|
-
// With a disabledMessage the input drops `disabled` for focusability, so
|
|
221
|
-
// guard value mutation explicitly (readOnly also blocks typing).
|
|
222
|
-
if (isEffectivelyDisabled) {
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
202
|
const newValue = e.target.value;
|
|
226
203
|
setPendingInput(newValue);
|
|
227
204
|
|
|
@@ -234,7 +211,7 @@ export function DateInput({
|
|
|
234
211
|
// Navigate calendar to show the parsed date's month
|
|
235
212
|
calendarRef.current?.navigateTo(parsedISO);
|
|
236
213
|
}
|
|
237
|
-
}, [value, fireChange, isDateDisabled
|
|
214
|
+
}, [value, fireChange, isDateDisabled]);
|
|
238
215
|
|
|
239
216
|
// Commit pending input (shared by blur and Enter key)
|
|
240
217
|
const commitPendingInput = useCallback(() => {
|
|
@@ -299,13 +276,7 @@ export function DateInput({
|
|
|
299
276
|
labelTooltip: labelTooltip,
|
|
300
277
|
width: width,
|
|
301
278
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
302
|
-
ref:
|
|
303
|
-
popover.triggerRef(el);
|
|
304
|
-
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
305
|
-
// Handlers are gated internally by isEnabled, and anchor names
|
|
306
|
-
// compose, so attaching unconditionally is safe.
|
|
307
|
-
disabledMessageTooltip.ref(el);
|
|
308
|
-
},
|
|
279
|
+
ref: popover.triggerRef,
|
|
309
280
|
...rest,
|
|
310
281
|
...mergeProps(themeProps('date-input', {
|
|
311
282
|
size,
|
|
@@ -339,15 +310,8 @@ export function DateInput({
|
|
|
339
310
|
onBlur: handleBlur,
|
|
340
311
|
onClick: handleInputClick,
|
|
341
312
|
onKeyDown: handleInputKeyDown,
|
|
342
|
-
placeholder: placeholder
|
|
343
|
-
|
|
344
|
-
// aria-disabled so the reason is focus-discoverable; typing is
|
|
345
|
-
// blocked with readOnly and the mutation guards, and calendar
|
|
346
|
-
// activation is blocked by the isEffectivelyDisabled guards.
|
|
347
|
-
,
|
|
348
|
-
disabled: isEffectivelyDisabled && !showsDisabledMessage,
|
|
349
|
-
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
350
|
-
readOnly: showsDisabledMessage || undefined,
|
|
313
|
+
placeholder: placeholder,
|
|
314
|
+
disabled: isEffectivelyDisabled,
|
|
351
315
|
"aria-describedby": ariaDescribedBy,
|
|
352
316
|
"aria-required": isRequired === true ? 'true' : undefined,
|
|
353
317
|
"aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
|
|
@@ -407,7 +371,7 @@ export function DateInput({
|
|
|
407
371
|
}), {
|
|
408
372
|
placement: 'below',
|
|
409
373
|
alignment: 'start'
|
|
410
|
-
})
|
|
374
|
+
})]
|
|
411
375
|
});
|
|
412
376
|
}
|
|
413
377
|
DateInput.displayName = 'DateInput';
|