@astryxdesign/core 0.1.2-canary.eb7243a → 0.1.2-canary.f03e2cc
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/README.md +12 -12
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +5 -11
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -24
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +28 -43
- package/dist/Calendar/styles.d.ts +9 -3
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +11 -3
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +3 -17
- package/dist/Chat/ChatMessageList.d.ts +1 -14
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +0 -2
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +1 -4
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -4
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +4 -12
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +37 -49
- package/dist/ContextMenu/ContextMenu.d.ts +5 -4
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +11 -93
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +2 -17
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +4 -9
- package/dist/DateTimeInput/DateTimeInput.d.ts +1 -7
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +3 -15
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +0 -12
- package/dist/DropdownMenu/DropdownMenu.d.ts +8 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +14 -42
- package/dist/Field/Field.d.ts +2 -19
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +0 -4
- package/dist/Field/FieldLabel.d.ts +2 -21
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +26 -41
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +6 -27
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +1 -4
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +1 -33
- package/dist/Layer/layerAnimations.stylex.d.ts +0 -4
- package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
- package/dist/Layer/layerAnimations.stylex.js +4 -8
- package/dist/Layer/useLayer.d.ts +0 -10
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +6 -41
- package/dist/Layout/padding.stylex.d.ts +0 -51
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +0 -63
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -4
- package/dist/Link/Link.d.ts +1 -7
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +7 -15
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +0 -5
- package/dist/MoreMenu/MoreMenu.d.ts +7 -1
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/MoreMenu/MoreMenu.js +2 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +17 -73
- package/dist/MultiSelector/hooks.d.ts +1 -12
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +1 -14
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +3 -34
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +1 -7
- package/dist/Pagination/Pagination.d.ts +1 -1
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +1 -15
- package/dist/Popover/usePopover.d.ts +2 -25
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +6 -18
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +1 -4
- package/dist/ProgressBar/ProgressBar.js +1 -1
- package/dist/RadioList/RadioList.d.ts +1 -1
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +3 -76
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +0 -22
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -6
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +18 -54
- package/dist/Selector/hooks.d.ts +1 -8
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +1 -14
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +1 -1
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +2 -8
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +1 -1
- package/dist/Stack/Stack.d.ts +1 -28
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +1 -17
- package/dist/Stack/StackItem.d.ts +1 -12
- package/dist/Stack/StackItem.d.ts.map +1 -1
- package/dist/Stack/StackItem.js +1 -8
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +0 -6
- package/dist/TabList/TabList.d.ts +4 -15
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +4 -58
- package/dist/TabList/TabListContext.d.ts +0 -5
- package/dist/TabList/TabListContext.d.ts.map +1 -1
- package/dist/TabList/TabListContext.js +0 -5
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -6
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +1 -7
- package/dist/Table/plugins/pagination/paginateData.d.ts +1 -2
- package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/paginateData.js +3 -8
- package/dist/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/useTablePagination.js +1 -6
- package/dist/Table/tableContextMenu.d.ts.map +1 -1
- package/dist/Table/tableContextMenu.js +3 -0
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +0 -14
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +3 -132
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +3 -7
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +9 -56
- package/dist/TreeList/TreeList.d.ts +1 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +2 -78
- package/dist/TreeList/TreeListItem.d.ts +1 -10
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +12 -51
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +4 -58
- package/dist/astryx.css +0 -7
- package/dist/astryx.umd.js +48 -48
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +2 -10
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -6
- package/dist/hooks/useClickableContainer.d.ts +1 -16
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +4 -16
- package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
- package/dist/hooks/useEntryAnimation.js +4 -4
- package/dist/hooks/useFocusTrap.d.ts +0 -18
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +3 -87
- package/dist/hooks/useGridFocus.d.ts +1 -32
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +58 -143
- package/dist/hooks/useListFocus.d.ts +7 -78
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +52 -305
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +0 -1
- package/package.json +5 -11
- package/src/Avatar/Avatar.tsx +5 -10
- package/src/Breadcrumbs/BreadcrumbItem.tsx +7 -25
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +10 -31
- package/src/Calendar/Calendar.doc.mjs +1 -1
- package/src/Calendar/Calendar.test.tsx +4 -147
- package/src/Calendar/Calendar.tsx +43 -52
- package/src/Calendar/styles.ts +9 -4
- package/src/Carousel/Carousel.test.tsx +0 -20
- package/src/Carousel/Carousel.tsx +1 -16
- package/src/Chat/ChatMessageList.doc.mjs +0 -8
- package/src/Chat/ChatMessageList.test.tsx +0 -18
- package/src/Chat/ChatMessageList.tsx +0 -16
- package/src/Chat/useTriggerMenu.tsx +0 -3
- package/src/CheckboxInput/CheckboxInput.test.tsx +25 -14
- package/src/CheckboxInput/CheckboxInput.tsx +2 -4
- package/src/CheckboxList/CheckboxList.test.tsx +14 -30
- package/src/CheckboxList/CheckboxList.tsx +3 -18
- package/src/CodeBlock/CodeBlock.tsx +33 -61
- package/src/ContextMenu/ContextMenu.doc.mjs +4 -4
- package/src/ContextMenu/ContextMenu.test.tsx +1 -155
- package/src/ContextMenu/ContextMenu.tsx +16 -113
- package/src/DateInput/DateInput.test.tsx +0 -59
- package/src/DateInput/DateInput.tsx +7 -24
- package/src/DateRangeInput/DateRangeInput.test.tsx +18 -69
- package/src/DateRangeInput/DateRangeInput.tsx +3 -7
- package/src/DateTimeInput/DateTimeInput.doc.mjs +0 -7
- package/src/DateTimeInput/DateTimeInput.test.tsx +6 -99
- package/src/DateTimeInput/DateTimeInput.tsx +3 -32
- package/src/Dialog/Dialog.tsx +0 -12
- package/src/DropdownMenu/DropdownMenu.doc.mjs +8 -1
- package/src/DropdownMenu/DropdownMenu.test.tsx +42 -56
- package/src/DropdownMenu/DropdownMenu.tsx +18 -52
- package/src/Field/Field.test.tsx +0 -32
- package/src/Field/Field.tsx +5 -23
- package/src/Field/FieldLabel.tsx +17 -55
- package/src/FileInput/FileInput.test.tsx +49 -104
- package/src/FileInput/FileInput.tsx +3 -27
- package/src/InputGroup/InputGroup.test.tsx +63 -21
- package/src/InputGroup/InputGroup.tsx +1 -4
- package/src/Kbd/Kbd.test.tsx +4 -22
- package/src/Kbd/Kbd.tsx +3 -35
- package/src/Layer/layerAnimations.stylex.ts +4 -20
- package/src/Layer/useLayer.doc.mjs +0 -5
- package/src/Layer/useLayer.tsx +6 -67
- package/src/Layout/padding.stylex.ts +0 -52
- package/src/Lightbox/Lightbox.test.tsx +5 -53
- package/src/Lightbox/Lightbox.tsx +4 -9
- package/src/Link/Link.doc.mjs +0 -14
- package/src/Link/Link.test.tsx +0 -32
- package/src/Link/Link.tsx +4 -41
- package/src/Markdown/Markdown.test.tsx +0 -11
- package/src/Markdown/Markdown.tsx +0 -5
- package/src/MetadataList/MetadataListItem.doc.mjs +0 -4
- package/src/MoreMenu/MoreMenu.doc.mjs +17 -2
- package/src/MoreMenu/MoreMenu.tsx +9 -0
- package/src/MultiSelector/MultiSelector.test.tsx +8 -226
- package/src/MultiSelector/MultiSelector.tsx +19 -91
- package/src/MultiSelector/hooks.ts +0 -27
- package/src/NavMenu/NavHeadingMenu.test.tsx +1 -77
- package/src/NavMenu/NavHeadingMenu.tsx +3 -50
- package/src/NumberInput/NumberInput.test.tsx +38 -72
- package/src/NumberInput/NumberInput.tsx +1 -12
- package/src/Pagination/Pagination.doc.mjs +3 -3
- package/src/Pagination/Pagination.test.tsx +5 -117
- package/src/Pagination/Pagination.tsx +1 -21
- package/src/Popover/usePopover.doc.mjs +3 -7
- package/src/Popover/usePopover.tsx +6 -49
- package/src/PowerSearch/PowerSearch.tsx +0 -3
- package/src/ProgressBar/ProgressBar.test.tsx +26 -34
- package/src/ProgressBar/ProgressBar.tsx +1 -1
- package/src/RadioList/RadioList.test.tsx +14 -129
- package/src/RadioList/RadioList.tsx +8 -103
- package/src/SegmentedControl/SegmentedControl.test.tsx +40 -84
- package/src/SegmentedControl/SegmentedControl.tsx +0 -26
- package/src/SegmentedControl/SegmentedControlItem.tsx +1 -4
- package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
- package/src/Selector/Selector.test.tsx +14 -199
- package/src/Selector/Selector.tsx +38 -74
- package/src/Selector/hooks.ts +0 -23
- package/src/SideNav/SideNav.test.tsx +0 -16
- package/src/SideNav/SideNavItem.tsx +4 -2
- package/src/Skeleton/Skeleton.tsx +1 -11
- package/src/Spinner/Spinner.tsx +1 -7
- package/src/Stack/Stack.doc.mjs +0 -57
- package/src/Stack/Stack.test.tsx +5 -55
- package/src/Stack/Stack.tsx +1 -53
- package/src/Stack/StackItem.test.tsx +0 -23
- package/src/Stack/StackItem.tsx +0 -20
- package/src/TabList/Tab.tsx +0 -6
- package/src/TabList/TabList.doc.mjs +0 -6
- package/src/TabList/TabList.test.tsx +0 -167
- package/src/TabList/TabList.tsx +9 -72
- package/src/TabList/TabListContext.ts +3 -7
- package/src/TabList/TabMenu.tsx +3 -6
- package/src/Table/Table.test.tsx +0 -10
- package/src/Table/Table.tsx +0 -5
- package/src/Table/plugins/pagination/paginateData.ts +3 -10
- package/src/Table/plugins/pagination/useTablePagination.test.tsx +0 -16
- package/src/Table/plugins/pagination/useTablePagination.tsx +1 -8
- package/src/Table/tableContextMenu.tsx +5 -1
- package/src/Toast/Toast.tsx +0 -14
- package/src/Toast/ToastViewport.tsx +21 -167
- package/src/Toolbar/Toolbar.test.tsx +0 -45
- package/src/Toolbar/Toolbar.tsx +2 -5
- package/src/Tooltip/Tooltip.test.tsx +0 -68
- package/src/Tooltip/useTooltip.tsx +8 -55
- package/src/TreeList/TreeList.test.tsx +6 -295
- package/src/TreeList/TreeList.tsx +1 -84
- package/src/TreeList/TreeListItem.tsx +5 -50
- package/src/Typeahead/BaseTypeahead.tsx +8 -69
- package/src/Typeahead/Typeahead.test.tsx +0 -160
- package/src/hooks/index.ts +2 -21
- package/src/hooks/useClickableContainer.ts +4 -16
- package/src/hooks/useEntryAnimation.ts +4 -16
- package/src/hooks/useFocusTrap.ts +4 -98
- package/src/hooks/useGridFocus.ts +64 -184
- package/src/hooks/useListFocus.doc.mjs +10 -49
- package/src/hooks/useListFocus.ts +57 -395
- package/src/index.ts +0 -1
- package/src/utils/index.ts +0 -7
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +0 -16
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +0 -1
- package/dist/TreeList/treeListItem.markers.stylex.js +0 -22
- package/dist/VisuallyHidden/VisuallyHidden.d.ts +0 -61
- package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +0 -1
- package/dist/VisuallyHidden/VisuallyHidden.js +0 -65
- package/dist/VisuallyHidden/index.d.ts +0 -11
- package/dist/VisuallyHidden/index.d.ts.map +0 -1
- package/dist/VisuallyHidden/index.js +0 -13
- package/dist/hooks/focusableSelector.d.ts +0 -22
- package/dist/hooks/focusableSelector.d.ts.map +0 -1
- package/dist/hooks/focusableSelector.js +0 -24
- package/dist/hooks/useAnnounce.d.ts +0 -40
- package/dist/hooks/useAnnounce.d.ts.map +0 -1
- package/dist/hooks/useAnnounce.js +0 -142
- package/dist/hooks/useLongPress.d.ts +0 -21
- package/dist/hooks/useLongPress.d.ts.map +0 -1
- package/dist/hooks/useLongPress.js +0 -89
- package/dist/hooks/useTreeFocus.d.ts +0 -133
- package/dist/hooks/useTreeFocus.d.ts.map +0 -1
- package/dist/hooks/useTreeFocus.js +0 -274
- package/dist/hooks/useTypeahead.d.ts +0 -63
- package/dist/hooks/useTypeahead.d.ts.map +0 -1
- package/dist/hooks/useTypeahead.js +0 -117
- package/src/Avatar/Avatar.test.tsx +0 -37
- package/src/CodeBlock/CodeBlock.test.tsx +0 -115
- package/src/Skeleton/Skeleton.test.tsx +0 -25
- package/src/Toast/ToastViewport.test.tsx +0 -204
- package/src/TreeList/treeListItem.markers.stylex.ts +0 -20
- package/src/VisuallyHidden/VisuallyHidden.doc.mjs +0 -80
- package/src/VisuallyHidden/VisuallyHidden.test.tsx +0 -76
- package/src/VisuallyHidden/VisuallyHidden.tsx +0 -113
- package/src/VisuallyHidden/index.ts +0 -15
- package/src/hooks/focusableSelector.ts +0 -25
- package/src/hooks/useAnnounce.test.tsx +0 -101
- package/src/hooks/useAnnounce.ts +0 -168
- package/src/hooks/useFocusTrap.test.tsx +0 -132
- package/src/hooks/useListFocus.test.tsx +0 -375
- package/src/hooks/useLongPress.test.tsx +0 -134
- package/src/hooks/useLongPress.ts +0 -119
- package/src/hooks/useTreeFocus.doc.mjs +0 -126
- package/src/hooks/useTreeFocus.test.tsx +0 -214
- package/src/hooks/useTreeFocus.ts +0 -464
- package/src/hooks/useTypeahead.test.tsx +0 -109
- package/src/hooks/useTypeahead.ts +0 -183
|
@@ -51,6 +51,13 @@ interface DropdownMenuBaseProps extends BaseProps {
|
|
|
51
51
|
* @default 'below'
|
|
52
52
|
*/
|
|
53
53
|
placement?: LayerPlacement;
|
|
54
|
+
/**
|
|
55
|
+
* Whether to auto-focus the first menu item when the menu opens.
|
|
56
|
+
* Set to `false` for inline showcases or documentation previews
|
|
57
|
+
* where stealing focus is undesirable.
|
|
58
|
+
* @default true
|
|
59
|
+
*/
|
|
60
|
+
hasAutoFocus?: boolean;
|
|
54
61
|
'data-testid'?: string;
|
|
55
62
|
}
|
|
56
63
|
interface DropdownMenuDataProps extends DropdownMenuBaseProps {
|
|
@@ -62,7 +69,7 @@ interface DropdownMenuCompoundProps extends DropdownMenuBaseProps {
|
|
|
62
69
|
children: ReactNode;
|
|
63
70
|
}
|
|
64
71
|
export type DropdownMenuProps = DropdownMenuDataProps | DropdownMenuCompoundProps;
|
|
65
|
-
export declare function DropdownMenu({ button, isMenuOpen: controlledIsOpen, onOpenChange, menuWidth, onClick, hasChevron, placement, className, style, xstyle, 'data-testid': testId, ...props }: DropdownMenuProps): React.JSX.Element;
|
|
72
|
+
export declare function DropdownMenu({ button, isMenuOpen: controlledIsOpen, onOpenChange, menuWidth, onClick, hasChevron, placement, hasAutoFocus, className, style, xstyle, 'data-testid': testId, ...props }: DropdownMenuProps): React.JSX.Element;
|
|
66
73
|
export declare namespace DropdownMenu {
|
|
67
74
|
var displayName: string;
|
|
68
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC1B,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,CAAC;AAMxB,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GACzB,qBAAqB,GACrB,yBAAyB,CAAC;AA4B9B,wBAAgB,YAAY,CAAC,EAC3B,MAAuB,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA4NnB;yBA1Oe,YAAY"}
|
|
@@ -29,7 +29,6 @@ import { Icon } from "../Icon/index.js";
|
|
|
29
29
|
import { renderDropdownItems } from "./renderDropdownItems.js";
|
|
30
30
|
import { DropdownMenuContext } from "./DropdownMenuContext.js";
|
|
31
31
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
32
|
-
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
33
32
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
34
33
|
import "../theme/tokens.stylex.js";
|
|
35
34
|
import { spacingVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -119,6 +118,7 @@ export function DropdownMenu({
|
|
|
119
118
|
onClick,
|
|
120
119
|
hasChevron = true,
|
|
121
120
|
placement = 'below',
|
|
121
|
+
hasAutoFocus = true,
|
|
122
122
|
className,
|
|
123
123
|
style,
|
|
124
124
|
xstyle,
|
|
@@ -171,10 +171,7 @@ export function DropdownMenu({
|
|
|
171
171
|
onShow: handleLayerShow,
|
|
172
172
|
hasLightDismiss: true,
|
|
173
173
|
hasCloseButton: false,
|
|
174
|
-
hasAutoFocus: false
|
|
175
|
-
// The popup's own role="menu" is the exposed semantics; wrapping it in a
|
|
176
|
-
// modal dialog would announce an unnamed dialog around the menu.
|
|
177
|
-
role: 'none'
|
|
174
|
+
hasAutoFocus: false
|
|
178
175
|
});
|
|
179
176
|
const closeMenu = useCallback(() => {
|
|
180
177
|
popover.hide();
|
|
@@ -184,36 +181,28 @@ export function DropdownMenu({
|
|
|
184
181
|
const {
|
|
185
182
|
listRef,
|
|
186
183
|
handleKeyDown: listNavKeyDown,
|
|
187
|
-
focusFirst
|
|
188
|
-
focusItem
|
|
184
|
+
focusFirst
|
|
189
185
|
} = useListFocus({
|
|
190
186
|
itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
|
|
191
187
|
wrap: false,
|
|
192
188
|
onEscape: closeMenu
|
|
193
189
|
});
|
|
194
190
|
|
|
195
|
-
// First-character typeahead over the (enabled) menu items — jump to the next
|
|
196
|
-
// item whose label starts with the typed text (menus-11).
|
|
197
|
-
const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], [listRef]);
|
|
198
|
-
const typeahead = useTypeahead({
|
|
199
|
-
getItemLabels: () => getMenuItems().map(el => el.textContent),
|
|
200
|
-
onMatch: focusItem,
|
|
201
|
-
getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
|
|
202
|
-
});
|
|
203
|
-
|
|
204
191
|
// Sync controlled open state → popover, and focus first item on open
|
|
205
192
|
useEffect(() => {
|
|
206
193
|
if (isControlled) {
|
|
207
194
|
if (controlledIsOpen && !popover.isOpen) {
|
|
208
195
|
popover.show();
|
|
209
|
-
|
|
196
|
+
if (hasAutoFocus) {
|
|
197
|
+
requestAnimationFrame(() => focusFirst());
|
|
198
|
+
}
|
|
210
199
|
} else if (!controlledIsOpen && popover.isOpen) {
|
|
211
200
|
popover.hide();
|
|
212
201
|
}
|
|
213
202
|
}
|
|
214
|
-
}, [controlledIsOpen, isControlled, popover, focusFirst]);
|
|
203
|
+
}, [controlledIsOpen, isControlled, popover, hasAutoFocus, focusFirst]);
|
|
215
204
|
|
|
216
|
-
// Extend useListFocus with Enter/Space activation
|
|
205
|
+
// Extend useListFocus with Enter/Space activation
|
|
217
206
|
const listKeyDown = useCallback(e => {
|
|
218
207
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
219
208
|
e.preventDefault();
|
|
@@ -223,26 +212,14 @@ export function DropdownMenu({
|
|
|
223
212
|
}
|
|
224
213
|
return;
|
|
225
214
|
}
|
|
226
|
-
// APG menu-button pattern: Tab closes the menu. Menu items are
|
|
227
|
-
// tabIndex={-1} so the focus trap has nothing trappable and Tab would
|
|
228
|
-
// otherwise leak into the page while the menu stayed open (menus-5).
|
|
229
|
-
// Do NOT preventDefault — closing restores focus to the trigger, and the
|
|
230
|
-
// browser's default Tab then continues from there to the next element.
|
|
231
|
-
if (e.key === 'Tab') {
|
|
232
|
-
closeMenu();
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
// Type-to-focus next; if it consumed a printable key, stop here.
|
|
236
|
-
if (typeahead.onKeyDown(e)) {
|
|
237
|
-
e.preventDefault();
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
215
|
listNavKeyDown(e);
|
|
241
|
-
}, [listNavKeyDown
|
|
216
|
+
}, [listNavKeyDown]);
|
|
242
217
|
const openAndFocus = useCallback(() => {
|
|
243
218
|
popover.show();
|
|
244
|
-
|
|
245
|
-
|
|
219
|
+
if (hasAutoFocus) {
|
|
220
|
+
requestAnimationFrame(() => focusFirst());
|
|
221
|
+
}
|
|
222
|
+
}, [popover, hasAutoFocus, focusFirst]);
|
|
246
223
|
const handleButtonClick = useCallback(() => {
|
|
247
224
|
// If the menu was just closed by light dismiss (e.g. iOS Safari fires
|
|
248
225
|
// pointerdown → hide before the trigger's click), the click would
|
|
@@ -315,12 +292,7 @@ export function DropdownMenu({
|
|
|
315
292
|
}), popover.render(/*#__PURE__*/_jsx("div", {
|
|
316
293
|
ref: listRef,
|
|
317
294
|
id: menuId,
|
|
318
|
-
role: "menu"
|
|
319
|
-
// Give the menu an accessible name from its trigger's label, so
|
|
320
|
-
// screen readers announce e.g. "Actions menu" rather than an unnamed
|
|
321
|
-
// menu (menus-13).
|
|
322
|
-
,
|
|
323
|
-
"aria-label": button.label,
|
|
295
|
+
role: "menu",
|
|
324
296
|
onKeyDown: listKeyDown,
|
|
325
297
|
...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, xstyle), className, style),
|
|
326
298
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
package/dist/Field/Field.d.ts
CHANGED
|
@@ -49,26 +49,9 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
|
|
|
49
49
|
*/
|
|
50
50
|
description?: string;
|
|
51
51
|
/**
|
|
52
|
-
* ID
|
|
53
|
-
* `htmlFor`). This is the id of the *control*, not of the label element —
|
|
54
|
-
* see `labelID` for the latter.
|
|
52
|
+
* ID for the input element (used for label's htmlFor attribute).
|
|
55
53
|
*/
|
|
56
54
|
inputID: string;
|
|
57
|
-
/**
|
|
58
|
-
* The `id` applied TO the label element itself (distinct from `inputID`,
|
|
59
|
-
* which is the control the label points at). A grouping control
|
|
60
|
-
* (radiogroup, checkbox group) references this via `aria-labelledby` to take
|
|
61
|
-
* the label as its accessible name. Pair with `isGroupLabel`.
|
|
62
|
-
*/
|
|
63
|
-
labelID?: string;
|
|
64
|
-
/**
|
|
65
|
-
* When the field wraps a group of controls rather than a single input, set
|
|
66
|
-
* this so the label renders as a non-`<label>` element (a `<span>`): a
|
|
67
|
-
* `<label>` semantically names one control and can't be associated with a
|
|
68
|
-
* group. Pair with `labelID` + `aria-labelledby` on the group.
|
|
69
|
-
* @default false
|
|
70
|
-
*/
|
|
71
|
-
isGroupLabel?: boolean;
|
|
72
55
|
/**
|
|
73
56
|
* ID for the description element (use for aria-describedby on the input).
|
|
74
57
|
*/
|
|
@@ -133,7 +116,7 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
|
|
|
133
116
|
* </Field>
|
|
134
117
|
* ```
|
|
135
118
|
*/
|
|
136
|
-
export declare function Field({ label, isLabelHidden, description, inputID,
|
|
119
|
+
export declare function Field({ label, isLabelHidden, description, inputID, descriptionID, isOptional, isRequired, isDisabled, labelIcon, status, labelTooltip, statusVariant, width, xstyle, children, className, style, ref, ...props }: FieldProps): import("react").JSX.Element;
|
|
137
120
|
export declare namespace Field {
|
|
138
121
|
var displayName: string;
|
|
139
122
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACxC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAsGZ;yBA1He,KAAK"}
|
package/dist/Field/Field.js
CHANGED
|
@@ -69,8 +69,6 @@ export function Field({
|
|
|
69
69
|
isLabelHidden = false,
|
|
70
70
|
description,
|
|
71
71
|
inputID,
|
|
72
|
-
labelID,
|
|
73
|
-
isGroupLabel = false,
|
|
74
72
|
descriptionID,
|
|
75
73
|
isOptional = false,
|
|
76
74
|
isRequired = false,
|
|
@@ -99,8 +97,6 @@ export function Field({
|
|
|
99
97
|
const labelNode = /*#__PURE__*/_jsx(FieldLabel, {
|
|
100
98
|
label: label,
|
|
101
99
|
inputID: inputID,
|
|
102
|
-
labelID: labelID,
|
|
103
|
-
isGroupLabel: isGroupLabel,
|
|
104
100
|
isLabelHidden: isLabelHidden,
|
|
105
101
|
isDisabled: isDisabled,
|
|
106
102
|
isOptional: isOptional,
|
|
@@ -20,28 +20,9 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
|
|
|
20
20
|
*/
|
|
21
21
|
label: string;
|
|
22
22
|
/**
|
|
23
|
-
* ID of the input element this label
|
|
24
|
-
* label). This is *not* the id of the label element itself — see
|
|
25
|
-
* `labelID` for that.
|
|
23
|
+
* ID of the input element this label is for.
|
|
26
24
|
*/
|
|
27
25
|
inputID: string;
|
|
28
|
-
/**
|
|
29
|
-
* The `id` applied TO the label element itself (not the element it points
|
|
30
|
-
* at — that's `inputID`). A grouping control (e.g. `role="radiogroup"`) can
|
|
31
|
-
* reference this via `aria-labelledby` to take the label as its accessible
|
|
32
|
-
* name.
|
|
33
|
-
*/
|
|
34
|
-
labelID?: string;
|
|
35
|
-
/**
|
|
36
|
-
* When true, the field wraps a *group* of controls (e.g. a radiogroup)
|
|
37
|
-
* rather than a single input. In that case the label is rendered as a
|
|
38
|
-
* `<span>` instead of a `<label>` — a `<label>` semantically names one form
|
|
39
|
-
* control and can't be associated with a group, so it must not be a literal
|
|
40
|
-
* label element. The group takes the label as its name via
|
|
41
|
-
* `labelID` + `aria-labelledby`.
|
|
42
|
-
* @default false
|
|
43
|
-
*/
|
|
44
|
-
isGroupLabel?: boolean;
|
|
45
26
|
/**
|
|
46
27
|
* Whether to visually hide the label and description (still accessible
|
|
47
28
|
* to screen readers). When hidden, the entire label group is rendered
|
|
@@ -95,7 +76,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
|
|
|
95
76
|
* <FieldLabel label="Search" inputID={inputId} isLabelHidden />
|
|
96
77
|
* ```
|
|
97
78
|
*/
|
|
98
|
-
export declare function FieldLabel({ label, inputID,
|
|
79
|
+
export declare function FieldLabel({ label, inputID, isLabelHidden, isDisabled, isOptional, isRequired, labelIcon, labelTooltip, description, descriptionID, ref, }: FieldLabelProps): import("react").JSX.Element;
|
|
99
80
|
export declare namespace FieldLabel {
|
|
100
81
|
var displayName: string;
|
|
101
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,GAAG,GACJ,EAAE,eAAe,+BAuCjB;yBAnDe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -36,8 +36,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
36
36
|
export function FieldLabel({
|
|
37
37
|
label,
|
|
38
38
|
inputID,
|
|
39
|
-
labelID,
|
|
40
|
-
isGroupLabel = false,
|
|
41
39
|
isLabelHidden = false,
|
|
42
40
|
isDisabled = false,
|
|
43
41
|
isOptional = false,
|
|
@@ -49,57 +47,44 @@ export function FieldLabel({
|
|
|
49
47
|
ref
|
|
50
48
|
}) {
|
|
51
49
|
const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
|
|
52
|
-
|
|
53
|
-
// A group label (e.g. for a radiogroup) must not be a literal `<label>`
|
|
54
|
-
// element: a `<label>` semantically names a single form control and can't be
|
|
55
|
-
// associated with a group. Render it as a `<span>` instead, keeping all the
|
|
56
|
-
// label styling and slots. The group references it via `aria-labelledby`.
|
|
57
|
-
const LabelElement = isGroupLabel ? 'span' : 'label';
|
|
58
|
-
const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
59
|
-
children: [labelIcon && renderIconSlot(labelIcon, {
|
|
60
|
-
size: 'sm',
|
|
61
|
-
color: 'inherit'
|
|
62
|
-
}), label, statusText && /*#__PURE__*/_jsxs("span", {
|
|
63
|
-
...{
|
|
64
|
-
className: "x1sodnla x141an7d x1ltkj2j xv1l7n4"
|
|
65
|
-
},
|
|
66
|
-
children: [/*#__PURE__*/_jsx("span", {
|
|
67
|
-
"aria-hidden": "true",
|
|
68
|
-
children: " \u2219 "
|
|
69
|
-
}), statusText]
|
|
70
|
-
}), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
|
|
71
|
-
content: labelTooltip,
|
|
72
|
-
placement: "above",
|
|
73
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
74
|
-
icon: "info",
|
|
75
|
-
size: "sm",
|
|
76
|
-
color: "inherit"
|
|
77
|
-
})
|
|
78
|
-
})]
|
|
79
|
-
});
|
|
80
50
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
81
|
-
children: [/*#__PURE__*/
|
|
51
|
+
children: [/*#__PURE__*/_jsxs("label", {
|
|
82
52
|
ref: ref,
|
|
83
|
-
|
|
84
|
-
// `htmlFor` only applies to a real `<label>` associating with a single
|
|
85
|
-
// control; a group label (span) has no `htmlFor`.
|
|
86
|
-
,
|
|
87
|
-
htmlFor: isGroupLabel ? undefined : inputID,
|
|
53
|
+
htmlFor: inputID,
|
|
88
54
|
...mergeProps(themeProps('field-label'), {
|
|
89
55
|
0: {
|
|
90
|
-
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib
|
|
56
|
+
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xv1l7n4 x1ypdohk"
|
|
91
57
|
},
|
|
92
58
|
2: {
|
|
93
|
-
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib
|
|
59
|
+
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xnbbluu x1h6gzvc"
|
|
94
60
|
},
|
|
95
61
|
1: {
|
|
96
|
-
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib
|
|
62
|
+
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xv1l7n4 x1ypdohk xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
|
|
97
63
|
},
|
|
98
64
|
3: {
|
|
99
|
-
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib
|
|
65
|
+
className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xnbbluu x1h6gzvc xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
|
|
100
66
|
}
|
|
101
67
|
}[!!isDisabled << 1 | !!isLabelHidden << 0]),
|
|
102
|
-
children:
|
|
68
|
+
children: [labelIcon && renderIconSlot(labelIcon, {
|
|
69
|
+
size: 'sm',
|
|
70
|
+
color: 'inherit'
|
|
71
|
+
}), label, statusText && /*#__PURE__*/_jsxs("span", {
|
|
72
|
+
...{
|
|
73
|
+
className: "x1sodnla x141an7d xv1l7n4"
|
|
74
|
+
},
|
|
75
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
76
|
+
"aria-hidden": "true",
|
|
77
|
+
children: " \u2219 "
|
|
78
|
+
}), statusText]
|
|
79
|
+
}), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
|
|
80
|
+
content: labelTooltip,
|
|
81
|
+
placement: "above",
|
|
82
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
83
|
+
icon: "info",
|
|
84
|
+
size: "sm",
|
|
85
|
+
color: "inherit"
|
|
86
|
+
})
|
|
87
|
+
})]
|
|
103
88
|
}), description && /*#__PURE__*/_jsx("span", {
|
|
104
89
|
id: descriptionID,
|
|
105
90
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAIlB,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;AAyN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,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,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA4ThB;yBArVe,SAAS"}
|
|
@@ -22,7 +22,6 @@ import { colorVars, sizeVars, spacingVars, radiusVars, typographyVars, typeScale
|
|
|
22
22
|
import { Field, InputClearButton } from "../Field/index.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
|
-
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
26
25
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
28
27
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -199,11 +198,6 @@ export function FileInput({
|
|
|
199
198
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
200
199
|
const [validationError, setValidationError] = useState(null);
|
|
201
200
|
const [, startTransition] = useTransition();
|
|
202
|
-
|
|
203
|
-
// Announce successful file selection to screen readers via a persistent
|
|
204
|
-
// live region (forms-17). The component's own role="status" region only
|
|
205
|
-
// carries validation errors, so a successful attach was previously silent.
|
|
206
|
-
const announce = useAnnounce();
|
|
207
201
|
const status = statusProp ?? (validationError ? {
|
|
208
202
|
type: 'error',
|
|
209
203
|
message: validationError
|
|
@@ -240,19 +234,12 @@ export function FileInput({
|
|
|
240
234
|
}
|
|
241
235
|
const result = isMultiple ? valid : valid[0];
|
|
242
236
|
onChange(result);
|
|
243
|
-
|
|
244
|
-
// Announce the successful selection politely. Validation errors are
|
|
245
|
-
// handled by the role="status" region below, so only announce the
|
|
246
|
-
// attach here (do not double-announce errors).
|
|
247
|
-
if (errors.length === 0) {
|
|
248
|
-
announce(valid.length === 1 ? `1 file selected: ${valid[0].name}` : `${valid.length} files selected`);
|
|
249
|
-
}
|
|
250
237
|
if (changeAction) {
|
|
251
238
|
startTransition(async () => {
|
|
252
239
|
await changeAction(result);
|
|
253
240
|
});
|
|
254
241
|
}
|
|
255
|
-
}, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition
|
|
242
|
+
}, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition]);
|
|
256
243
|
const handleInputChange = useCallback(e => {
|
|
257
244
|
const fileList = Array.from(e.target.files ?? []);
|
|
258
245
|
handleFiles(fileList);
|
|
@@ -410,14 +397,7 @@ export function FileInput({
|
|
|
410
397
|
onClick: handleClick,
|
|
411
398
|
onKeyDown: handleKeyDown,
|
|
412
399
|
"aria-label": label,
|
|
413
|
-
"aria-busy": isLoading || undefined
|
|
414
|
-
// These describe the operable control, so they belong on the focusable
|
|
415
|
-
// role="button" wrapper — not the hidden tabIndex={-1} file input the
|
|
416
|
-
// user never focuses (forms-6).
|
|
417
|
-
,
|
|
418
|
-
"aria-describedby": ariaDescribedBy,
|
|
419
|
-
"aria-required": isRequired ? 'true' : undefined,
|
|
420
|
-
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
400
|
+
"aria-busy": isLoading || undefined,
|
|
421
401
|
...dragDropProps,
|
|
422
402
|
...mergeProps(themeProps('file-input', {
|
|
423
403
|
mode,
|
|
@@ -431,11 +411,10 @@ export function FileInput({
|
|
|
431
411
|
accept: accept,
|
|
432
412
|
multiple: isMultiple,
|
|
433
413
|
disabled: isDisabled,
|
|
434
|
-
onChange: handleInputChange
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
,
|
|
438
|
-
"aria-hidden": "true",
|
|
414
|
+
onChange: handleInputChange,
|
|
415
|
+
"aria-describedby": ariaDescribedBy,
|
|
416
|
+
"aria-required": isRequired ? 'true' : undefined,
|
|
417
|
+
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
439
418
|
tabIndex: -1,
|
|
440
419
|
...{
|
|
441
420
|
className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;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;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;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;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAuDjB;yBAxEe,UAAU"}
|
|
@@ -88,7 +88,6 @@ export function InputGroup({
|
|
|
88
88
|
}) {
|
|
89
89
|
const size = useSize(sizeProp, 'md');
|
|
90
90
|
const inputId = useId();
|
|
91
|
-
const labelID = useId();
|
|
92
91
|
const statusMessageId = useId();
|
|
93
92
|
const contextValue = useMemo(() => ({
|
|
94
93
|
isInGroup: true
|
|
@@ -102,8 +101,6 @@ export function InputGroup({
|
|
|
102
101
|
isLabelHidden: isLabelHidden,
|
|
103
102
|
description: description,
|
|
104
103
|
inputID: inputId,
|
|
105
|
-
labelID: labelID,
|
|
106
|
-
isGroupLabel: true,
|
|
107
104
|
isOptional: isOptional,
|
|
108
105
|
isRequired: isRequired,
|
|
109
106
|
isDisabled: isDisabled,
|
|
@@ -117,7 +114,7 @@ export function InputGroup({
|
|
|
117
114
|
children: /*#__PURE__*/_jsx("div", {
|
|
118
115
|
ref: ref,
|
|
119
116
|
role: "group",
|
|
120
|
-
"aria-
|
|
117
|
+
"aria-label": label,
|
|
121
118
|
"data-testid": testId,
|
|
122
119
|
...rest,
|
|
123
120
|
...mergeProps(themeProps('input-group', {
|
package/dist/Kbd/Kbd.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiG5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBA2B3E;yBA3Be,GAAG"}
|
package/dist/Kbd/Kbd.js
CHANGED
|
@@ -66,32 +66,6 @@ function getKeyDisplay(key, isMac) {
|
|
|
66
66
|
}
|
|
67
67
|
return KEY_DISPLAY[key] ?? key.toUpperCase();
|
|
68
68
|
}
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* Spoken-word labels for screen readers. The visual `KEY_DISPLAY` uses glyphs
|
|
72
|
-
* (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
|
|
73
|
-
* accessible name for the shortcut is built from these words instead.
|
|
74
|
-
*/
|
|
75
|
-
const KEY_LABEL = {
|
|
76
|
-
ctrl: 'Control',
|
|
77
|
-
alt: 'Alt',
|
|
78
|
-
shift: 'Shift',
|
|
79
|
-
enter: 'Enter',
|
|
80
|
-
backspace: 'Backspace',
|
|
81
|
-
escape: 'Escape',
|
|
82
|
-
tab: 'Tab',
|
|
83
|
-
up: 'Up arrow',
|
|
84
|
-
down: 'Down arrow',
|
|
85
|
-
left: 'Left arrow',
|
|
86
|
-
right: 'Right arrow',
|
|
87
|
-
plus: 'Plus'
|
|
88
|
-
};
|
|
89
|
-
function getKeyLabel(key, isMac) {
|
|
90
|
-
if (key === 'mod') {
|
|
91
|
-
return isMac ? 'Command' : 'Control';
|
|
92
|
-
}
|
|
93
|
-
return KEY_LABEL[key] ?? key.toUpperCase();
|
|
94
|
-
}
|
|
95
69
|
function subscribeToPlatformChanges() {
|
|
96
70
|
return () => {};
|
|
97
71
|
}
|
|
@@ -141,18 +115,12 @@ export function Kbd({
|
|
|
141
115
|
}) {
|
|
142
116
|
const isMac = useSyncExternalStore(subscribeToPlatformChanges, detectMac, getServerPlatformSnapshot);
|
|
143
117
|
const parts = keys.split('+').map(key => key.trim().toLowerCase());
|
|
144
|
-
|
|
145
|
-
// Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
|
|
146
|
-
// the visual glyphs below are announced meaninglessly by assistive tech.
|
|
147
|
-
const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
|
|
148
118
|
return /*#__PURE__*/_jsx("span", {
|
|
149
119
|
ref: ref,
|
|
150
|
-
role: "img",
|
|
151
|
-
"aria-label": accessibleName,
|
|
152
120
|
...rest,
|
|
153
121
|
...mergeProps(themeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
|
|
122
|
+
"aria-hidden": "true",
|
|
154
123
|
children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
|
|
155
|
-
"aria-hidden": "true",
|
|
156
124
|
...{
|
|
157
125
|
className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
|
|
158
126
|
},
|
|
@@ -29,10 +29,6 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
29
29
|
*
|
|
30
30
|
* Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
|
|
31
31
|
* for easy lookup: `layerAnimations[placement]`.
|
|
32
|
-
*
|
|
33
|
-
* Each entry disables its keyframe animation under
|
|
34
|
-
* `prefers-reduced-motion: reduce` so the layer appears instantly instead of
|
|
35
|
-
* translating/scaling in (infra-6).
|
|
36
32
|
*/
|
|
37
33
|
export declare const layerAnimations: Readonly<{
|
|
38
34
|
readonly below: Readonly<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAyC3C
|
|
1
|
+
{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAyC3C;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EAiB1B,CAAC"}
|
|
@@ -44,35 +44,31 @@ const animationBase = {
|
|
|
44
44
|
*
|
|
45
45
|
* Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
|
|
46
46
|
* for easy lookup: `layerAnimations[placement]`.
|
|
47
|
-
*
|
|
48
|
-
* Each entry disables its keyframe animation under
|
|
49
|
-
* `prefers-reduced-motion: reduce` so the layer appears instantly instead of
|
|
50
|
-
* translating/scaling in (infra-6).
|
|
51
47
|
*/
|
|
52
48
|
export const layerAnimations = {
|
|
53
49
|
below: {
|
|
54
|
-
kKVMdj: "xl1vlw0
|
|
50
|
+
kKVMdj: "xl1vlw0",
|
|
55
51
|
k44tkh: "x9uej1z",
|
|
56
52
|
kyAemX: "x128ha8g",
|
|
57
53
|
kWV6AL: "xskzprw",
|
|
58
54
|
$$css: true
|
|
59
55
|
},
|
|
60
56
|
above: {
|
|
61
|
-
kKVMdj: "x3psbcj
|
|
57
|
+
kKVMdj: "x3psbcj",
|
|
62
58
|
k44tkh: "x9uej1z",
|
|
63
59
|
kyAemX: "x128ha8g",
|
|
64
60
|
kWV6AL: "xskzprw",
|
|
65
61
|
$$css: true
|
|
66
62
|
},
|
|
67
63
|
end: {
|
|
68
|
-
kKVMdj: "x1i331go
|
|
64
|
+
kKVMdj: "x1i331go",
|
|
69
65
|
k44tkh: "x9uej1z",
|
|
70
66
|
kyAemX: "x128ha8g",
|
|
71
67
|
kWV6AL: "xskzprw",
|
|
72
68
|
$$css: true
|
|
73
69
|
},
|
|
74
70
|
start: {
|
|
75
|
-
kKVMdj: "xck01x9
|
|
71
|
+
kKVMdj: "xck01x9",
|
|
76
72
|
k44tkh: "x9uej1z",
|
|
77
73
|
kyAemX: "x128ha8g",
|
|
78
74
|
kWV6AL: "xskzprw",
|
package/dist/Layer/useLayer.d.ts
CHANGED
|
@@ -57,16 +57,6 @@ export interface ContextRenderProps {
|
|
|
57
57
|
* @default 'div'
|
|
58
58
|
*/
|
|
59
59
|
as?: 'div' | 'span';
|
|
60
|
-
/**
|
|
61
|
-
* Pointer-enter handler attached to the popover container itself. Lets a
|
|
62
|
-
* consumer keep a hover-driven layer open while the pointer is over the
|
|
63
|
-
* surface (e.g. Tooltip/HoverCard "hoverable" behavior — WCAG 1.4.13).
|
|
64
|
-
*/
|
|
65
|
-
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
|
|
66
|
-
/**
|
|
67
|
-
* Pointer-leave handler attached to the popover container itself.
|
|
68
|
-
*/
|
|
69
|
-
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
|
|
70
60
|
}
|
|
71
61
|
/**
|
|
72
62
|
* Render props for fixed mode (manual coordinates)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA4BnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACrE;AAuCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;AAC3E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC"}
|