@astryxdesign/core 0.1.2-canary.df46db7 → 0.1.2-canary.e0724f3
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/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +1 -4
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +4 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +14 -33
- package/dist/Calendar/hooks/index.d.ts +2 -0
- package/dist/Calendar/hooks/index.d.ts.map +1 -1
- package/dist/Calendar/hooks/index.js +2 -1
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts +57 -0
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map +1 -0
- package/dist/Calendar/hooks/useCalendarRovingTabindex.js +96 -0
- package/dist/Calendar/index.d.ts +2 -2
- package/dist/Calendar/index.d.ts.map +1 -1
- package/dist/Calendar/index.js +1 -1
- 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 +9 -31
- 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/Field/Field.d.ts +4 -4
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +2 -2
- package/dist/Field/FieldLabel.d.ts +4 -4
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +2 -2
- 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 +7 -13
- 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/Layer/useLayer.js +3 -23
- 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/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -2
- 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/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +4 -2
- package/dist/RadioList/RadioList.d.ts +1 -19
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +10 -33
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +2 -13
- package/dist/SegmentedControl/SegmentedControl.d.ts +2 -13
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +66 -78
- 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 +11 -41
- package/dist/TabList/TabList.d.ts +2 -3
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +33 -55
- 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 +9 -41
- 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/Toolbar/Toolbar.d.ts +3 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +6 -46
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +22 -16
- package/dist/TreeList/TreeListItem.d.ts +2 -3
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- 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 +0 -7
- package/dist/astryx.umd.js +54 -54
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +2 -4
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/useGridFocus.d.ts +0 -56
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +24 -138
- package/dist/hooks/useTreeFocus.d.ts +3 -27
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +6 -69
- 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/Breadcrumbs/BreadcrumbItem.tsx +2 -5
- package/src/Button/Button.tsx +16 -3
- package/src/Calendar/Calendar.tsx +22 -52
- package/src/Calendar/hooks/index.ts +6 -0
- package/src/Calendar/hooks/useCalendarRovingTabindex.ts +118 -0
- package/src/Calendar/index.ts +3 -0
- 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 +3 -41
- 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/Field/Field.test.tsx +2 -2
- package/src/Field/Field.tsx +5 -5
- package/src/Field/FieldLabel.tsx +5 -5
- 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 +6 -20
- package/src/InputGroup/InputGroupContext.ts +4 -9
- package/src/InputGroup/index.ts +0 -1
- package/src/Layer/useLayer.tsx +3 -23
- 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/Link/Link.tsx +13 -2
- 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/ProgressBar/ProgressBar.tsx +3 -2
- package/src/RadioList/RadioList.doc.mjs +0 -9
- package/src/RadioList/RadioList.test.tsx +2 -123
- package/src/RadioList/RadioList.tsx +6 -67
- 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 +80 -102
- 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 +21 -61
- package/src/TabList/TabList.test.tsx +0 -41
- package/src/TabList/TabList.tsx +39 -66
- 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 +15 -62
- 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/Toolbar/Toolbar.test.tsx +6 -64
- package/src/Toolbar/Toolbar.tsx +4 -55
- package/src/TreeList/TreeList.tsx +28 -17
- package/src/TreeList/TreeListItem.tsx +2 -3
- 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/VisuallyHidden/VisuallyHidden.doc.mjs +7 -7
- package/src/hooks/index.ts +5 -12
- package/src/hooks/useGridFocus.doc.mjs +2 -40
- package/src/hooks/useGridFocus.ts +23 -179
- package/src/hooks/useListFocus.doc.mjs +0 -1
- package/src/hooks/useTreeFocus.doc.mjs +1 -15
- package/src/hooks/useTreeFocus.ts +6 -101
- package/src/utils/index.ts +0 -2
- package/src/utils/timeParser.test.ts +0 -10
- package/src/utils/timeParser.ts +2 -5
- package/dist/hooks/useKeyboardHint.d.ts +0 -82
- package/dist/hooks/useKeyboardHint.d.ts.map +0 -1
- package/dist/hooks/useKeyboardHint.js +0 -220
- 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/Layer/useLayer.test.tsx +0 -111
- package/src/docs-script.test.mjs +0 -50
- package/src/hooks/useGridFocus.test.tsx +0 -132
- package/src/hooks/useKeyboardHint.doc.mjs +0 -101
- package/src/hooks/useKeyboardHint.test.tsx +0 -70
- package/src/hooks/useKeyboardHint.tsx +0 -332
- package/src/utils/inputAria.test.ts +0 -39
- package/src/utils/inputAria.ts +0 -58
|
@@ -59,7 +59,7 @@ export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onC
|
|
|
59
59
|
* <BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
|
|
60
60
|
* ```
|
|
61
61
|
*/
|
|
62
|
-
export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId,
|
|
62
|
+
export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId, }: BreadcrumbItemProps): React.JSX.Element;
|
|
63
63
|
export declare namespace BreadcrumbItem {
|
|
64
64
|
var displayName: string;
|
|
65
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,mBAAmB,qBAqJrB;yBAjKe,cAAc"}
|
|
@@ -82,8 +82,7 @@ export function BreadcrumbItem({
|
|
|
82
82
|
xstyle,
|
|
83
83
|
className,
|
|
84
84
|
style,
|
|
85
|
-
'data-testid': testId
|
|
86
|
-
...rest
|
|
85
|
+
'data-testid': testId
|
|
87
86
|
}) {
|
|
88
87
|
const ctx = use(BreadcrumbContext);
|
|
89
88
|
const LinkComponent = useLinkComponent(as);
|
|
@@ -145,7 +144,6 @@ export function BreadcrumbItem({
|
|
|
145
144
|
ref: mergeRefs(ref, liRef),
|
|
146
145
|
...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
147
146
|
"data-testid": testId,
|
|
148
|
-
...rest,
|
|
149
147
|
children: [/*#__PURE__*/_jsx("span", {
|
|
150
148
|
"aria-hidden": "true",
|
|
151
149
|
...{
|
|
@@ -173,7 +171,6 @@ export function BreadcrumbItem({
|
|
|
173
171
|
ref: mergeRefs(ref, liRef),
|
|
174
172
|
...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
175
173
|
"data-testid": testId,
|
|
176
|
-
...rest,
|
|
177
174
|
children: [/*#__PURE__*/_jsx("span", {
|
|
178
175
|
"aria-hidden": "true",
|
|
179
176
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAoGrD,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAsGH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,IAAI,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAuHD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,eAAuB,EACvB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CAuMzB;yBA9Ne,MAAM"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -23,7 +23,6 @@ import "../theme/tokens.stylex.js";
|
|
|
23
23
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
24
24
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
|
-
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
26
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
28
27
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
29
28
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
@@ -414,7 +413,10 @@ export function Button({
|
|
|
414
413
|
},
|
|
415
414
|
children: endContent
|
|
416
415
|
})]
|
|
417
|
-
}), /*#__PURE__*/_jsx(
|
|
416
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
417
|
+
...{
|
|
418
|
+
className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
|
|
419
|
+
},
|
|
418
420
|
role: "status",
|
|
419
421
|
"aria-live": "polite",
|
|
420
422
|
children: isLoadingState ? 'Loading' : ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAI5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}
|
|
@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
23
23
|
import { useGridFocus } from "../hooks/index.js";
|
|
24
|
-
import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
|
|
24
|
+
import { useCalendarDays, useCalendarConstraints, useCalendarRovingTabindex } from "./hooks/index.js";
|
|
25
25
|
import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
|
|
26
26
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -350,30 +350,16 @@ function MonthGrid({
|
|
|
350
350
|
}
|
|
351
351
|
return null;
|
|
352
352
|
}, [mode, value]);
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
return plainDateToISO(selectedDateForTabindex);
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
const isTodayInMonth = today.year === year && today.month === month.month;
|
|
367
|
-
if (isTodayInMonth && !isDateDisabled(today)) {
|
|
368
|
-
return plainDateToISO(today);
|
|
369
|
-
}
|
|
370
|
-
for (const day of days) {
|
|
371
|
-
if (!day.isOutside && !isDateDisabled(day.date)) {
|
|
372
|
-
return day.iso;
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
return null;
|
|
376
|
-
}, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
|
|
353
|
+
const {
|
|
354
|
+
isTabbable
|
|
355
|
+
} = useCalendarRovingTabindex({
|
|
356
|
+
days,
|
|
357
|
+
today,
|
|
358
|
+
year,
|
|
359
|
+
month: month.month,
|
|
360
|
+
isDateDisabled,
|
|
361
|
+
selectedDate: selectedDateForTabindex
|
|
362
|
+
});
|
|
377
363
|
|
|
378
364
|
// Helper to get the focused date from the currently focused element.
|
|
379
365
|
// Reads the machine-readable `data-date` (ISO) attribute rather than parsing
|
|
@@ -433,14 +419,12 @@ function MonthGrid({
|
|
|
433
419
|
// the next enabled cell.
|
|
434
420
|
const {
|
|
435
421
|
gridRef,
|
|
436
|
-
handleKeyDown: handleGridKeyDown
|
|
437
|
-
handleFocus: handleGridFocus
|
|
422
|
+
handleKeyDown: handleGridKeyDown
|
|
438
423
|
} = useGridFocus({
|
|
439
424
|
columns: 7,
|
|
440
425
|
cellSelector: '[role="gridcell"]',
|
|
441
426
|
isCellFocusable: cell => cell.querySelector('button:not([disabled])') !== null,
|
|
442
427
|
getFocusTarget: cell => cell.querySelector('button'),
|
|
443
|
-
hasRovingTabIndex: true,
|
|
444
428
|
onNavigateBefore: handleNavigatePrevious,
|
|
445
429
|
onNavigateAfter: handleNavigateNext,
|
|
446
430
|
onPageUp: handlePageUp,
|
|
@@ -515,7 +499,6 @@ function MonthGrid({
|
|
|
515
499
|
role: "grid",
|
|
516
500
|
"aria-label": monthLabel,
|
|
517
501
|
onKeyDown: handleGridKeyDown,
|
|
518
|
-
onFocus: handleGridFocus,
|
|
519
502
|
...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
|
|
520
503
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
521
504
|
role: "row",
|
|
@@ -549,7 +532,7 @@ function MonthGrid({
|
|
|
549
532
|
today: today,
|
|
550
533
|
hasOutsideDays: hasOutsideDays,
|
|
551
534
|
isDisabled: isDateDisabled(day.date),
|
|
552
|
-
isTabbable: day.iso
|
|
535
|
+
isTabbable: isTabbable(day.iso),
|
|
553
536
|
onDayClick: onDayClick,
|
|
554
537
|
onDayHover: onDayHover
|
|
555
538
|
}, day.iso))]
|
|
@@ -621,9 +604,7 @@ function DayCell({
|
|
|
621
604
|
"aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
|
|
622
605
|
"aria-selected": state.isSelected || state.isInRange || undefined,
|
|
623
606
|
"aria-disabled": state.effectivelyDisabled || undefined,
|
|
624
|
-
disabled: isDisabled
|
|
625
|
-
// Initial roving tab-stop seed; useGridFocus owns it after mount.
|
|
626
|
-
,
|
|
607
|
+
disabled: isDisabled,
|
|
627
608
|
tabIndex: isTabbableDay ? 0 : -1,
|
|
628
609
|
onClick: () => !state.effectivelyDisabled && onDayClick(date),
|
|
629
610
|
onMouseEnter: () => !state.effectivelyDisabled && onDayHover(date),
|
|
@@ -12,4 +12,6 @@ export { useCalendarConstraints } from './useCalendarConstraints';
|
|
|
12
12
|
export type { UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, } from './useCalendarConstraints';
|
|
13
13
|
export { useCalendarNavigation } from './useCalendarNavigation';
|
|
14
14
|
export type { UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './useCalendarNavigation';
|
|
15
|
+
export { useCalendarRovingTabindex } from './useCalendarRovingTabindex';
|
|
16
|
+
export type { UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './useCalendarRovingTabindex';
|
|
15
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,YAAY,EACV,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,6BAA6B,CAAC"}
|
|
@@ -11,4 +11,5 @@
|
|
|
11
11
|
|
|
12
12
|
export { useCalendarDays } from "./useCalendarDays.js";
|
|
13
13
|
export { useCalendarConstraints } from "./useCalendarConstraints.js";
|
|
14
|
-
export { useCalendarNavigation } from "./useCalendarNavigation.js";
|
|
14
|
+
export { useCalendarNavigation } from "./useCalendarNavigation.js";
|
|
15
|
+
export { useCalendarRovingTabindex } from "./useCalendarRovingTabindex.js";
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ISODateString } from '../../utils/dateTypes';
|
|
2
|
+
import { type PlainDate } from '../../utils/plainDate';
|
|
3
|
+
import type { CalendarDay } from './useCalendarDays';
|
|
4
|
+
/**
|
|
5
|
+
* Configuration for calendar roving tabindex
|
|
6
|
+
*/
|
|
7
|
+
export interface UseCalendarRovingTabindexOptions {
|
|
8
|
+
/** All days in the grid */
|
|
9
|
+
days: CalendarDay[];
|
|
10
|
+
/** Today's date as a PlainDate */
|
|
11
|
+
today: PlainDate;
|
|
12
|
+
/** The year being displayed */
|
|
13
|
+
year: number;
|
|
14
|
+
/** The month being displayed (1-based: 1 = January, 12 = December) */
|
|
15
|
+
month: number;
|
|
16
|
+
/** Function to check if a date is disabled */
|
|
17
|
+
isDateDisabled: (date: PlainDate) => boolean;
|
|
18
|
+
/** Currently selected date (if any) */
|
|
19
|
+
selectedDate?: PlainDate | null;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Return type for useCalendarRovingTabindex hook
|
|
23
|
+
*/
|
|
24
|
+
export interface UseCalendarRovingTabindexReturn {
|
|
25
|
+
/** The ISO date string of the tabbable element, or null */
|
|
26
|
+
tabbableDate: ISODateString | null;
|
|
27
|
+
/** Check if a specific date is the tabbable one */
|
|
28
|
+
isTabbable: (iso: ISODateString) => boolean;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Hook for managing roving tabindex in calendar grids.
|
|
32
|
+
*
|
|
33
|
+
* Implements the WAI-ARIA roving tabindex pattern where only one element
|
|
34
|
+
* in a group has tabindex="0" while others have tabindex="-1".
|
|
35
|
+
*
|
|
36
|
+
* Priority for tabbable element:
|
|
37
|
+
* 1. Today if visible in the current month and enabled
|
|
38
|
+
* 2. First enabled day in the month
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```
|
|
42
|
+
* const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
|
|
43
|
+
* days,
|
|
44
|
+
* today: {year: 2026, month: 1, day: 20},
|
|
45
|
+
* year: 2026,
|
|
46
|
+
* month: 1, // January (1-based)
|
|
47
|
+
* isDateDisabled,
|
|
48
|
+
* });
|
|
49
|
+
*
|
|
50
|
+
* // In day rendering:
|
|
51
|
+
* <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
|
|
52
|
+
* {day.dayNumber}
|
|
53
|
+
* </button>
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare function useCalendarRovingTabindex(options: UseCalendarRovingTabindexOptions): UseCalendarRovingTabindexReturn;
|
|
57
|
+
//# sourceMappingURL=useCalendarRovingTabindex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCalendarRovingTabindex.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarRovingTabindex.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,2BAA2B;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,2DAA2D;IAC3D,YAAY,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gCAAgC,GACxC,+BAA+B,CA0CjC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useCalendarRovingTabindex.ts
|
|
7
|
+
* @input Uses React useMemo, PlainDate utilities
|
|
8
|
+
* @output Exports useCalendarRovingTabindex hook for accessible grid navigation
|
|
9
|
+
* @position Calendar-specific hook; used by Calendar
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update:
|
|
12
|
+
* - /packages/core/src/Calendar/hooks/index.ts
|
|
13
|
+
*/
|
|
14
|
+
import { useMemo } from 'react';
|
|
15
|
+
import { plainDateToISO } from "../../utils/plainDate.js";
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Configuration for calendar roving tabindex
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Return type for useCalendarRovingTabindex hook
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Hook for managing roving tabindex in calendar grids.
|
|
27
|
+
*
|
|
28
|
+
* Implements the WAI-ARIA roving tabindex pattern where only one element
|
|
29
|
+
* in a group has tabindex="0" while others have tabindex="-1".
|
|
30
|
+
*
|
|
31
|
+
* Priority for tabbable element:
|
|
32
|
+
* 1. Today if visible in the current month and enabled
|
|
33
|
+
* 2. First enabled day in the month
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```
|
|
37
|
+
* const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
|
|
38
|
+
* days,
|
|
39
|
+
* today: {year: 2026, month: 1, day: 20},
|
|
40
|
+
* year: 2026,
|
|
41
|
+
* month: 1, // January (1-based)
|
|
42
|
+
* isDateDisabled,
|
|
43
|
+
* });
|
|
44
|
+
*
|
|
45
|
+
* // In day rendering:
|
|
46
|
+
* <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
|
|
47
|
+
* {day.dayNumber}
|
|
48
|
+
* </button>
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
export function useCalendarRovingTabindex(options) {
|
|
52
|
+
const {
|
|
53
|
+
days,
|
|
54
|
+
today,
|
|
55
|
+
year,
|
|
56
|
+
month,
|
|
57
|
+
isDateDisabled,
|
|
58
|
+
selectedDate
|
|
59
|
+
} = options;
|
|
60
|
+
|
|
61
|
+
// Determine which day should be tabbable
|
|
62
|
+
const tabbableDate = useMemo(() => {
|
|
63
|
+
// Priority 1: Selected date if visible in this month and enabled
|
|
64
|
+
if (selectedDate) {
|
|
65
|
+
const isSelectedInMonth = selectedDate.year === year && selectedDate.month === month;
|
|
66
|
+
if (isSelectedInMonth && !isDateDisabled(selectedDate)) {
|
|
67
|
+
return plainDateToISO(selectedDate);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Priority 2: Today if visible in this month and enabled
|
|
72
|
+
const isTodayInMonth = today.year === year && today.month === month;
|
|
73
|
+
if (isTodayInMonth && !isDateDisabled(today)) {
|
|
74
|
+
return plainDateToISO(today);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Priority 3: First enabled day in this month
|
|
78
|
+
for (const day of days) {
|
|
79
|
+
if (!day.isOutside && !isDateDisabled(day.date)) {
|
|
80
|
+
return day.iso;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return null;
|
|
84
|
+
}, [days, today, year, month, isDateDisabled, selectedDate]);
|
|
85
|
+
|
|
86
|
+
// Check if a specific date is tabbable
|
|
87
|
+
const isTabbable = useMemo(() => {
|
|
88
|
+
return iso => {
|
|
89
|
+
return tabbableDate !== null && iso === tabbableDate;
|
|
90
|
+
};
|
|
91
|
+
}, [tabbableDate]);
|
|
92
|
+
return {
|
|
93
|
+
tabbableDate,
|
|
94
|
+
isTabbable
|
|
95
|
+
};
|
|
96
|
+
}
|
package/dist/Calendar/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export { Calendar } from './Calendar';
|
|
10
10
|
export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from './Calendar';
|
|
11
|
-
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, } from './hooks';
|
|
12
|
-
export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './hooks';
|
|
11
|
+
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex, } from './hooks';
|
|
12
|
+
export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './hooks';
|
|
13
13
|
export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate, } from './utils';
|
|
14
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
|
package/dist/Calendar/index.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
export { Calendar } from "./Calendar.js";
|
|
14
14
|
// Re-export hooks for advanced usage
|
|
15
|
-
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation } from "./hooks/index.js";
|
|
15
|
+
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex } from "./hooks/index.js";
|
|
16
16
|
// Re-export calendar-specific utilities for advanced usage
|
|
17
17
|
export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate } from "./utils.js";
|
|
18
18
|
|
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';
|