@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd
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/CHANGELOG.md +134 -0
- package/dist/Avatar/Avatar.d.ts +10 -5
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +139 -30
- package/dist/Avatar/AvatarStatusDot.d.ts +2 -1
- package/dist/Avatar/AvatarStatusDot.d.ts.map +1 -1
- package/dist/Avatar/AvatarStatusDot.js +30 -4
- package/dist/Avatar/AvatarStatusLabelContext.d.ts +39 -0
- package/dist/Avatar/AvatarStatusLabelContext.d.ts.map +1 -0
- package/dist/Avatar/AvatarStatusLabelContext.js +41 -0
- package/dist/AvatarGroup/AvatarGroup.d.ts +3 -1
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +15 -9
- package/dist/Blockquote/Blockquote.d.ts +4 -3
- package/dist/Blockquote/Blockquote.d.ts.map +1 -1
- package/dist/Blockquote/Blockquote.js +9 -10
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +21 -5
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +47 -34
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +7 -7
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +21 -12
- package/dist/Calendar/hooks/useCalendarNavigation.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarNavigation.js +8 -4
- package/dist/Calendar/styles.d.ts +2 -2
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +5 -5
- package/dist/Center/Center.d.ts +23 -1
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +12 -6
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +3 -3
- package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
- package/dist/Chat/ChatComposerDrawer.js +2 -2
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +2 -2
- package/dist/Chat/useChatDictation.d.ts +1 -1
- package/dist/Chat/useChatDictation.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.d.ts +1 -1
- package/dist/Chat/useSpeechRecognition.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.js +4 -3
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +2 -2
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -2
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +5 -5
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +4 -4
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +1 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +2 -2
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +3 -3
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +6 -6
- package/dist/DateInput/DateInput.d.ts +31 -2
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +90 -22
- package/dist/DateInput/MonthScroller.d.ts +35 -0
- package/dist/DateInput/MonthScroller.d.ts.map +1 -0
- package/dist/DateInput/MonthScroller.js +658 -0
- package/dist/DateInput/MonthYearWheels.d.ts +24 -0
- package/dist/DateInput/MonthYearWheels.d.ts.map +1 -0
- package/dist/DateInput/MonthYearWheels.js +114 -0
- package/dist/DateInput/TouchDateField.d.ts +10 -0
- package/dist/DateInput/TouchDateField.d.ts.map +1 -0
- package/dist/DateInput/TouchDateField.js +810 -0
- package/dist/DateInput/Wheel.d.ts +41 -0
- package/dist/DateInput/Wheel.d.ts.map +1 -0
- package/dist/DateInput/Wheel.js +315 -0
- package/dist/DateInput/monthGeometry.d.ts +65 -0
- package/dist/DateInput/monthGeometry.d.ts.map +1 -0
- package/dist/DateInput/monthGeometry.js +98 -0
- package/dist/DateInput/tokens.stylex.d.ts +63 -0
- package/dist/DateInput/tokens.stylex.d.ts.map +1 -0
- package/dist/DateInput/tokens.stylex.js +74 -0
- package/dist/DateInput/useOwnScrollGesture.d.ts +41 -0
- package/dist/DateInput/useOwnScrollGesture.d.ts.map +1 -0
- package/dist/DateInput/useOwnScrollGesture.js +202 -0
- package/dist/DateInput/usePointerDragScroll.d.ts +15 -0
- package/dist/DateInput/usePointerDragScroll.d.ts.map +1 -0
- package/dist/DateInput/usePointerDragScroll.js +216 -0
- package/dist/DateInput/useScrollSettle.d.ts +26 -0
- package/dist/DateInput/useScrollSettle.d.ts.map +1 -0
- package/dist/DateInput/useScrollSettle.js +149 -0
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +17 -14
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +17 -14
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -3
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +2 -2
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +2 -2
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +2 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +2 -2
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +4 -4
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -0
- package/dist/Field/inputStyles.stylex.d.ts +1 -1
- package/dist/Field/inputStyles.stylex.d.ts.map +1 -1
- package/dist/Field/inputStyles.stylex.js +5 -5
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +6 -6
- package/dist/HoverCard/HoverCard.d.ts +13 -3
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -0
- package/dist/HoverCard/index.d.ts +1 -1
- package/dist/HoverCard/index.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.d.ts +17 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +78 -9
- package/dist/InputGroup/InputGroup.js +1 -1
- package/dist/Item/Item.d.ts +9 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +52 -14
- package/dist/Layer/index.d.ts +4 -2
- package/dist/Layer/index.d.ts.map +1 -1
- package/dist/Layer/index.js +2 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +3 -2
- package/dist/Layer/useTouchTrigger.d.ts +113 -0
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -0
- package/dist/Layer/useTouchTrigger.js +241 -0
- package/dist/Layout/container.stylex.d.ts +4 -2
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +19 -11
- package/dist/Layout/index.d.ts +1 -0
- package/dist/Layout/index.d.ts.map +1 -1
- package/dist/Layout/index.js +4 -0
- package/dist/Layout/padding.stylex.d.ts +315 -12
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +389 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +5 -4
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +6 -6
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +1 -1
- package/dist/MobileNav/MobileNav.d.ts +1 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +24 -6
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +8 -8
- package/dist/NavItem/navItemStyles.stylex.d.ts +4 -4
- package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
- package/dist/NavItem/navItemStyles.stylex.js +4 -4
- package/dist/NavMenu/NavHeadingMenuItem.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.js +3 -3
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +36 -8
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +3 -3
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +2 -2
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +11 -12
- package/dist/PowerSearch/PowerSearchToken.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchToken.js +3 -1
- package/dist/PowerSearch/formatFilterValue.d.ts +11 -2
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +23 -8
- package/dist/RadioList/RadioListItem.d.ts +2 -2
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +70 -40
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +7 -7
- package/dist/Section/Section.d.ts +36 -1
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +12 -2
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +7 -2
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +3 -3
- package/dist/Selector/Selector.d.ts +26 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +93 -20
- package/dist/Selector/SelectorOption.d.ts +14 -1
- package/dist/Selector/SelectorOption.d.ts.map +1 -1
- package/dist/Selector/SelectorOption.js +6 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts +8 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts.map +1 -0
- package/dist/Selector/SelectorRowLayoutContext.js +27 -0
- package/dist/Selector/types.d.ts +1 -0
- package/dist/Selector/types.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +4 -4
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +3 -3
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +7 -7
- package/dist/Stack/Stack.d.ts +23 -1
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +12 -6
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +2 -2
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +1 -1
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +3 -3
- package/dist/Table/TableRow.js +4 -4
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +1 -1
- package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map +1 -1
- package/dist/Table/plugins/filtering/useTableFiltering.js +2 -2
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +2 -2
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +2 -2
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +1 -1
- package/dist/Table/plugins/sortable/useTableSortableState.d.ts +5 -3
- package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortableState.js +12 -9
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -1
- package/dist/Table/plugins/tree/useTableTreeData.js +3 -3
- package/dist/TextArea/TextArea.js +1 -1
- package/dist/TextInput/TextInput.js +1 -1
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +3 -3
- package/dist/TimeInput/TimeInput.js +2 -2
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +6 -4
- package/dist/Timestamp/formatInstant.d.ts +3 -2
- package/dist/Timestamp/formatInstant.d.ts.map +1 -1
- package/dist/Timestamp/formatInstant.js +8 -8
- package/dist/Timestamp/tooltipEntries.d.ts +2 -1
- package/dist/Timestamp/tooltipEntries.d.ts.map +1 -1
- package/dist/Timestamp/tooltipEntries.js +5 -3
- package/dist/Toast/Toast.d.ts +4 -3
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +10 -7
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +6 -6
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +1 -1
- package/dist/Tooltip/Tooltip.d.ts +16 -3
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +2 -0
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +21 -2
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +71 -13
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +4 -4
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +3 -3
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +2 -2
- package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +2 -2
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +4 -4
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +7 -7
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +2 -2
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +1 -1
- package/dist/astryx.css +124 -62
- package/dist/hooks/containerReveal.stylex.d.ts.map +1 -1
- package/dist/hooks/containerReveal.stylex.js +18 -18
- package/dist/hooks/scrollbarGutter.d.ts +28 -0
- package/dist/hooks/scrollbarGutter.d.ts.map +1 -0
- package/dist/hooks/scrollbarGutter.js +103 -0
- package/dist/hooks/useAutoMediaMode.d.ts +31 -0
- package/dist/hooks/useAutoMediaMode.d.ts.map +1 -0
- package/dist/hooks/useAutoMediaMode.js +201 -0
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +1 -1
- package/dist/hooks/useListFocus.d.ts +5 -2
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +12 -6
- package/dist/hooks/useScrollLock.d.ts +4 -0
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +13 -1
- package/dist/i18n/InternationalizationContext.d.ts.map +1 -1
- package/dist/i18n/InternationalizationContext.js +2 -0
- package/dist/i18n/index.d.ts +6 -0
- package/dist/i18n/index.d.ts.map +1 -1
- package/dist/i18n/index.js +6 -0
- package/dist/i18n/useCollator.d.ts +12 -0
- package/dist/i18n/useCollator.d.ts.map +1 -0
- package/dist/i18n/useCollator.js +40 -0
- package/dist/i18n/useLocale.d.ts +3 -0
- package/dist/i18n/useLocale.d.ts.map +1 -0
- package/dist/i18n/useLocale.js +31 -0
- package/dist/theme/MediaTheme.d.ts +25 -5
- package/dist/theme/MediaTheme.d.ts.map +1 -1
- package/dist/theme/MediaTheme.js +31 -6
- package/dist/theme/defineTheme.d.ts +5 -0
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +5 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +7 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +66 -5
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/syntax/index.d.ts +6 -0
- package/dist/theme/syntax/index.d.ts.map +1 -1
- package/dist/theme/syntax/index.js +7 -2
- package/dist/utils/dateParser.d.ts +4 -3
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +8 -8
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -1
- package/dist/utils/plainDate.d.ts +5 -2
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +20 -4
- package/locales/en.json +28 -0
- package/locales/pseudo.json +21 -0
- package/package.json +3 -3
- package/src/Avatar/Avatar.doc.mjs +10 -6
- package/src/Avatar/Avatar.test.tsx +219 -1
- package/src/Avatar/Avatar.tsx +179 -37
- package/src/Avatar/AvatarStatusDot.tsx +30 -4
- package/src/Avatar/AvatarStatusLabelContext.ts +47 -0
- package/src/AvatarGroup/AvatarGroup.doc.mjs +10 -6
- package/src/AvatarGroup/AvatarGroup.test.tsx +62 -0
- package/src/AvatarGroup/AvatarGroup.tsx +3 -1
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +31 -8
- package/src/Banner/Banner.doc.mjs +2 -0
- package/src/Blockquote/Blockquote.doc.mjs +30 -7
- package/src/Blockquote/Blockquote.test.tsx +34 -3
- package/src/Blockquote/Blockquote.tsx +11 -9
- package/src/BottomSheet/BottomSheet.doc.mjs +3 -3
- package/src/BottomSheet/BottomSheet.test.tsx +24 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +91 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +58 -3
- package/src/Breadcrumbs/BreadcrumbItem.tsx +36 -23
- package/src/Breadcrumbs/Breadcrumbs.doc.mjs +26 -2
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +31 -0
- package/src/Button/Button.tsx +12 -9
- package/src/Calendar/Calendar.tsx +15 -9
- package/src/Calendar/hooks/useCalendarNavigation.ts +6 -4
- package/src/Calendar/styles.ts +8 -5
- package/src/Center/Center.doc.mjs +48 -0
- package/src/Center/Center.test.tsx +158 -0
- package/src/Center/Center.tsx +50 -9
- package/src/Chat/ChatComposer.tsx +11 -5
- package/src/Chat/ChatComposerDrawer.tsx +4 -1
- package/src/Chat/ChatToolCalls.tsx +13 -4
- package/src/Chat/{useChatDictation.test.ts → useChatDictation.test.tsx} +29 -14
- package/src/Chat/useChatDictation.ts +1 -1
- package/src/Chat/useSpeechRecognition.ts +5 -3
- package/src/Chat/useTriggerMenu.tsx +4 -1
- package/src/CheckboxInput/CheckboxInput.tsx +5 -2
- package/src/Citation/Citation.test.tsx +6 -1
- package/src/Citation/Citation.tsx +11 -5
- package/src/ClickableCard/ClickableCard.tsx +7 -4
- package/src/CodeBlock/CodeBlock.tsx +4 -1
- package/src/Collapsible/Collapsible.tsx +5 -2
- package/src/CommandPalette/CommandPaletteItem.tsx +6 -3
- package/src/ComplexSelector/ComplexSelector.doc.mjs +10 -0
- package/src/ComplexSelector/ComplexSelector.tsx +14 -7
- package/src/DateInput/DateInput.test.tsx +17 -1
- package/src/DateInput/DateInput.tsx +93 -21
- package/src/DateInput/DateInputTouch.test.tsx +2582 -0
- package/src/DateInput/MonthScroller.tsx +878 -0
- package/src/DateInput/MonthYearWheels.tsx +147 -0
- package/src/DateInput/TouchDateField.tsx +1223 -0
- package/src/DateInput/Wheel.tsx +473 -0
- package/src/DateInput/monthGeometry.ts +118 -0
- package/src/DateInput/tokens.stylex.ts +99 -0
- package/src/DateInput/useOwnScrollGesture.ts +227 -0
- package/src/DateInput/usePointerDragScroll.ts +220 -0
- package/src/DateInput/useScrollSettle.ts +164 -0
- package/src/DateRangeInput/DateRangeInput.doc.mjs +1 -1
- package/src/DateRangeInput/DateRangeInput.tsx +31 -13
- package/src/DateTimeInput/DateTimeInput.tsx +25 -9
- package/src/Dialog/Dialog.test.tsx +24 -0
- package/src/Dialog/Dialog.tsx +3 -0
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +5 -2
- package/src/DropdownMenu/DropdownMenuItem.tsx +5 -2
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +5 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +5 -2
- package/src/Field/Field.doc.mjs +2 -0
- package/src/Field/FieldLabel.tsx +9 -3
- package/src/Field/InputClearButton.test.tsx +110 -3
- package/src/Field/InputClearButton.tsx +38 -0
- package/src/Field/inputStyles.stylex.ts +17 -13
- package/src/FileInput/FileInput.tsx +15 -8
- package/src/FormLayout/FormLayout.doc.mjs +1 -1
- package/src/HoverCard/HoverCard.doc.mjs +18 -0
- package/src/HoverCard/HoverCard.test.tsx +189 -0
- package/src/HoverCard/HoverCard.tsx +22 -2
- package/src/HoverCard/index.ts +1 -0
- package/src/HoverCard/useHoverCard.doc.mjs +2 -0
- package/src/HoverCard/useHoverCard.tsx +103 -7
- package/src/InputGroup/InputGroup.tsx +1 -1
- package/src/Item/Item.doc.mjs +1 -0
- package/src/Item/Item.test.tsx +50 -0
- package/src/Item/Item.tsx +54 -6
- package/src/Layer/index.ts +10 -0
- package/src/Layer/useLayer.tsx +13 -2
- package/src/Layer/useTouchTrigger.test.ts +70 -0
- package/src/Layer/useTouchTrigger.ts +366 -0
- package/src/Layout/Layout.doc.mjs +18 -0
- package/src/Layout/container.stylex.ts +11 -3
- package/src/Layout/index.ts +4 -0
- package/src/Layout/overlayPaddingReset.test.tsx +222 -0
- package/src/Layout/padding.stylex.ts +192 -12
- package/src/Lightbox/Lightbox.tsx +11 -3
- package/src/Link/Link.tsx +9 -6
- package/src/MetadataList/MetadataList.tsx +4 -1
- package/src/MobileNav/MobileNav.tsx +61 -5
- package/src/MobileNav/MobileNavEntryAnimation.test.tsx +212 -0
- package/src/MobileNav/MobileNavScrollbarGutter.test.tsx +109 -0
- package/src/MultiSelector/MultiSelector.test.tsx +1 -1
- package/src/MultiSelector/MultiSelector.tsx +26 -10
- package/src/NavItem/navItemStyles.stylex.ts +7 -4
- package/src/NavMenu/NavHeadingMenuItem.tsx +6 -3
- package/src/NumberInput/NumberInput.doc.mjs +24 -0
- package/src/NumberInput/NumberInput.test.tsx +138 -0
- package/src/NumberInput/NumberInput.tsx +47 -8
- package/src/Outline/Outline.tsx +5 -2
- package/src/Pagination/Pagination.tsx +5 -2
- package/src/Popover/Popover.test.tsx +27 -1
- package/src/PowerSearch/PowerSearch.tsx +17 -8
- package/src/PowerSearch/PowerSearchToken.tsx +3 -0
- package/src/PowerSearch/formatFilterValue.test.ts +22 -2
- package/src/PowerSearch/formatFilterValue.ts +31 -6
- package/src/RadioList/RadioList.doc.mjs +1 -1
- package/src/RadioList/RadioList.test.tsx +170 -2
- package/src/RadioList/RadioListItem.tsx +88 -53
- package/src/Resizable/ResizeHandle.test.tsx +22 -0
- package/src/Resizable/ResizeHandle.tsx +25 -7
- package/src/Section/Section.doc.mjs +55 -0
- package/src/Section/Section.test.tsx +201 -4
- package/src/Section/Section.tsx +69 -0
- package/src/SegmentedControl/SegmentedControl.test.tsx +31 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +15 -3
- package/src/SelectableCard/SelectableCard.tsx +6 -3
- package/src/Selector/Selector.doc.mjs +16 -2
- package/src/Selector/Selector.test.tsx +525 -1
- package/src/Selector/Selector.tsx +180 -25
- package/src/Selector/SelectorOption.doc.mjs +7 -0
- package/src/Selector/SelectorOption.tsx +21 -0
- package/src/Selector/SelectorRowLayoutContext.ts +32 -0
- package/src/Selector/types.ts +4 -4
- package/src/SideNav/SideNavHeading.tsx +14 -5
- package/src/SideNav/SideNavItem.tsx +9 -3
- package/src/Slider/Slider.tsx +25 -6
- package/src/Stack/Stack.doc.mjs +72 -0
- package/src/Stack/Stack.test.tsx +156 -0
- package/src/Stack/Stack.tsx +50 -8
- package/src/Switch/Switch.tsx +5 -2
- package/src/TabList/Tab.tsx +4 -1
- package/src/TabList/TabMenu.tsx +9 -3
- package/src/Table/TableRow.tsx +4 -4
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +6 -2
- package/src/Table/plugins/filtering/useTableFiltering.tsx +4 -1
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +10 -3
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +6 -3
- package/src/Table/plugins/sortable/useTableSortable.tsx +4 -1
- package/src/Table/plugins/sortable/useTableSortableState.test.tsx +34 -0
- package/src/Table/plugins/sortable/useTableSortableState.tsx +26 -23
- package/src/Table/plugins/tree/useTableTreeData.tsx +10 -4
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextArea/TextArea.tsx +1 -1
- package/src/TextInput/TextInput.tsx +1 -1
- package/src/Thumbnail/Thumbnail.tsx +9 -3
- package/src/TimeInput/TimeInput.tsx +1 -1
- package/src/Timestamp/Timestamp.test.tsx +27 -7
- package/src/Timestamp/Timestamp.tsx +8 -4
- package/src/Timestamp/formatInstant.ts +9 -7
- package/src/Timestamp/tooltipEntries.test.ts +11 -6
- package/src/Timestamp/tooltipEntries.ts +6 -2
- package/src/Toast/Toast.tsx +9 -7
- package/src/Token/Token.tsx +14 -5
- package/src/Tokenizer/Tokenizer.tsx +4 -1
- package/src/Tooltip/Tooltip.doc.mjs +18 -0
- package/src/Tooltip/Tooltip.test.tsx +254 -1
- package/src/Tooltip/Tooltip.tsx +22 -2
- package/src/Tooltip/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +2 -0
- package/src/Tooltip/useTooltip.tsx +99 -21
- package/src/TopNav/TopNavHeading.tsx +13 -4
- package/src/TopNav/TopNavItem.tsx +6 -3
- package/src/TopNav/TopNavMegaMenu.tsx +5 -2
- package/src/TopNav/TopNavMegaMenuItem.tsx +5 -2
- package/src/TopNav/TopNavMenu.tsx +10 -4
- package/src/TreeList/TreeListItem.tsx +22 -7
- package/src/Typeahead/BaseTypeahead.tsx +5 -2
- package/src/Typeahead/Typeahead.tsx +4 -1
- package/src/hooks/containerReveal.stylex.ts +54 -18
- package/src/hooks/scrollbarGutter.test.ts +167 -0
- package/src/hooks/scrollbarGutter.ts +121 -0
- package/src/hooks/useAutoMediaMode.test.ts +109 -0
- package/src/hooks/useAutoMediaMode.ts +233 -0
- package/src/hooks/useInputStatusIcon.tsx +4 -1
- package/src/hooks/useListFocus.doc.mjs +2 -2
- package/src/hooks/useListFocus.test.tsx +65 -3
- package/src/hooks/useListFocus.ts +15 -7
- package/src/hooks/useScrollLock.doc.mjs +4 -4
- package/src/hooks/useScrollLock.test.ts +73 -0
- package/src/hooks/useScrollLock.ts +14 -0
- package/src/i18n/InternationalizationContext.ts +2 -0
- package/src/i18n/__tests__/e2e-powersearch.test.tsx +37 -1
- package/src/i18n/__tests__/useCollator.test.tsx +115 -0
- package/src/i18n/__tests__/useLocale.test.tsx +52 -0
- package/src/i18n/index.ts +6 -0
- package/src/i18n/useCollator.doc.mjs +84 -0
- package/src/i18n/useCollator.ts +44 -0
- package/src/i18n/useLocale.doc.mjs +70 -0
- package/src/i18n/useLocale.ts +34 -0
- package/src/i18n/useTranslator.doc.mjs +1 -1
- package/src/reset.css +9 -2
- package/src/reset.test.ts +22 -0
- package/src/theme/MediaTheme.doc.mjs +23 -4
- package/src/theme/MediaTheme.dom.test.tsx +97 -0
- package/src/theme/MediaTheme.tsx +42 -7
- package/src/theme/defineTheme.test.ts +9 -3
- package/src/theme/defineTheme.ts +5 -0
- package/src/theme/derivedVarRegistry.test.ts +19 -5
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/generateThemeRules.test.ts +118 -0
- package/src/theme/generateThemeRules.ts +83 -5
- package/src/theme/index.ts +1 -1
- package/src/theme/syntax/index.ts +6 -2
- package/src/theme/syntax/serverSafeSyntax.test.ts +68 -0
- package/src/utils/dateParser.test.ts +20 -0
- package/src/utils/dateParser.ts +14 -7
- package/src/utils/index.ts +2 -0
- package/src/utils/plainDate.test.ts +6 -0
- package/src/utils/plainDate.ts +21 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,EACxB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC"}
|
package/dist/utils/index.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
export { parseDateInput, dateToISO, parseISO, isLocaleDayFirst } from "./dateParser.js";
|
|
11
|
-
export { plainDateCreate, plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, getDaysInMonth, plainDateDayOfWeek, plainDateAddMonths, plainDateAddDays, plainDateToInstant, plainDateFromInstant, plainDateIsBefore, plainDateIsAfter, plainDateIsEqual, plainDateMax, plainDateMin, plainDateIsInRange, plainDateSetFirstOfMonth, plainDateSetStartOfWeek, plainDateSetEndOfWeekExclusive, plainDateGetWeekNumber, plainDateFormat, formatSharedDate, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_SHORT_WITH_WEEKDAY, DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR, SHARED_DATE_FORMAT_OPTIONS } from "./plainDate.js";
|
|
11
|
+
export { plainDateCreate, plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, getDaysInMonth, plainDateDayOfWeek, plainDateAddMonths, plainDateAddDays, plainDateToInstant, plainDateFromInstant, plainDateIsBefore, plainDateIsAfter, plainDateIsEqual, plainDateMax, plainDateMin, plainDateIsInRange, plainDateSetFirstOfMonth, plainDateSetStartOfWeek, plainDateSetEndOfWeekExclusive, plainDateGetWeekNumber, plainDateFormat, formatSharedDate, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_SHORT_WITH_WEEKDAY, DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_MONTH_ONLY, DATE_FORMAT_WEEKDAY_ONLY, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR, SHARED_DATE_FORMAT_OPTIONS } from "./plainDate.js";
|
|
12
12
|
export { parseISOTime, formatISOTime, formatDisplayTime12h, formatDisplayTime24h, parseTimeInput, compareTime, isTimeInRange, clampTime, adjustTime, createISOTimeString } from "./timeParser.js";
|
|
13
13
|
export { parseStyleKey } from "./parseStyleKey.js";
|
|
14
14
|
export { getKey } from "./getKey.js";
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* @position Shared utility; replaces scattered Date usage across Calendar hooks
|
|
6
6
|
*/
|
|
7
7
|
import type { ISODateString, PlainDate } from './dateTypes';
|
|
8
|
+
import type { Locale } from '../i18n/types';
|
|
8
9
|
export type { PlainDate } from './dateTypes';
|
|
9
10
|
export declare function plainDateCreate(year: number, month: number, day: number): PlainDate;
|
|
10
11
|
export declare function plainDateFromISO(str: ISODateString): PlainDate;
|
|
@@ -55,9 +56,11 @@ export declare const DATE_FORMAT_WITH_WEEKDAY: Intl.DateTimeFormatOptions;
|
|
|
55
56
|
export declare const DATE_FORMAT_SHORT_WITH_WEEKDAY: Intl.DateTimeFormatOptions;
|
|
56
57
|
export declare const DATE_FORMAT_LONG: Intl.DateTimeFormatOptions;
|
|
57
58
|
export declare const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions;
|
|
59
|
+
export declare const DATE_FORMAT_WEEKDAY_ONLY: Intl.DateTimeFormatOptions;
|
|
60
|
+
export declare const DATE_FORMAT_MONTH_ONLY: Intl.DateTimeFormatOptions;
|
|
58
61
|
export declare const DATE_FORMAT_SHORT: Intl.DateTimeFormatOptions;
|
|
59
62
|
export declare const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions;
|
|
60
|
-
export declare function plainDateFormat(pd: PlainDate, options: Intl.DateTimeFormatOptions): string;
|
|
63
|
+
export declare function plainDateFormat(pd: PlainDate, options: Intl.DateTimeFormatOptions, locale?: Locale): string;
|
|
61
64
|
/**
|
|
62
65
|
* The date-only members of Timestamp's `format` vocabulary that a
|
|
63
66
|
* calendar-date field (no time-of-day) can render. Both Timestamp and
|
|
@@ -86,5 +89,5 @@ export declare const SHARED_DATE_FORMAT_OPTIONS: Record<Exclude<SharedDateFormat
|
|
|
86
89
|
* Timestamp maps the same members onto {@link SHARED_DATE_FORMAT_OPTIONS} in
|
|
87
90
|
* its own `formatTimestamp` switch (its input is a `Date`, not a `PlainDate`).
|
|
88
91
|
*/
|
|
89
|
-
export declare function formatSharedDate(pd: PlainDate, format: SharedDateFormat): string;
|
|
92
|
+
export declare function formatSharedDate(pd: PlainDate, format: SharedDateFormat, locale?: Locale): string;
|
|
90
93
|
//# sourceMappingURL=plainDate.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plainDate.d.ts","sourceRoot":"","sources":["../../src/utils/plainDate.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"plainDate.d.ts","sourceRoot":"","sources":["../../src/utils/plainDate.ts"],"names":[],"mappings":"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"}
|
package/dist/utils/plainDate.js
CHANGED
|
@@ -214,6 +214,22 @@ export const DATE_FORMAT_MONTH_YEAR = {
|
|
|
214
214
|
month: 'long'
|
|
215
215
|
};
|
|
216
216
|
|
|
217
|
+
// e.g. "Sun" (locale-dependent) — the weekday on its own, abbreviated.
|
|
218
|
+
//
|
|
219
|
+
// This is CLDR's `abbreviated` width, which `Intl` reaches natively. Note
|
|
220
|
+
// that Calendar's 2-letter header ("Su") is CLDR's *short* width, a
|
|
221
|
+
// different thing that `Intl` cannot express at all — which is why that one
|
|
222
|
+
// needs the generated lookup table beside it and this one does not.
|
|
223
|
+
export const DATE_FORMAT_WEEKDAY_ONLY = {
|
|
224
|
+
weekday: 'short'
|
|
225
|
+
};
|
|
226
|
+
|
|
227
|
+
// e.g. "January" (locale-dependent) — the month on its own, for a control
|
|
228
|
+
// that shows a list of months and carries the year separately.
|
|
229
|
+
export const DATE_FORMAT_MONTH_ONLY = {
|
|
230
|
+
month: 'long'
|
|
231
|
+
};
|
|
232
|
+
|
|
217
233
|
// e.g. "Jan 25" (locale-dependent)
|
|
218
234
|
export const DATE_FORMAT_SHORT = {
|
|
219
235
|
month: 'short',
|
|
@@ -226,8 +242,8 @@ export const DATE_FORMAT_SHORT_WITH_YEAR = {
|
|
|
226
242
|
day: 'numeric',
|
|
227
243
|
year: 'numeric'
|
|
228
244
|
};
|
|
229
|
-
export function plainDateFormat(pd, options) {
|
|
230
|
-
return new Intl.DateTimeFormat(
|
|
245
|
+
export function plainDateFormat(pd, options, locale) {
|
|
246
|
+
return new Intl.DateTimeFormat(locale, options).format(plainDateToDate(pd));
|
|
231
247
|
}
|
|
232
248
|
|
|
233
249
|
// =============================================================================
|
|
@@ -267,9 +283,9 @@ export const SHARED_DATE_FORMAT_OPTIONS = {
|
|
|
267
283
|
* Timestamp maps the same members onto {@link SHARED_DATE_FORMAT_OPTIONS} in
|
|
268
284
|
* its own `formatTimestamp` switch (its input is a `Date`, not a `PlainDate`).
|
|
269
285
|
*/
|
|
270
|
-
export function formatSharedDate(pd, format) {
|
|
286
|
+
export function formatSharedDate(pd, format, locale) {
|
|
271
287
|
if (format === 'system_date') {
|
|
272
288
|
return plainDateToISO(pd);
|
|
273
289
|
}
|
|
274
|
-
return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format]);
|
|
290
|
+
return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format], locale);
|
|
275
291
|
}
|
package/locales/en.json
CHANGED
|
@@ -439,6 +439,10 @@
|
|
|
439
439
|
"defaultMessage": "Remove {itemName} {position, number}",
|
|
440
440
|
"description": "Accessible label and tooltip on the button that deletes one record from a lab ListInput. `{itemName}` is the consumer's singular noun for one record; `{position}` is its 1-based row number (e.g. \"Remove guest 2\")."
|
|
441
441
|
},
|
|
442
|
+
"@astryx.listInput.removeUnavailable": {
|
|
443
|
+
"defaultMessage": "Remove is unavailable while the list is disabled",
|
|
444
|
+
"description": "Tooltip shown on the Remove button when the ListInput is disabled or loading, explaining why the action cannot be performed."
|
|
445
|
+
},
|
|
442
446
|
"@astryx.listInput.reorderItem": {
|
|
443
447
|
"defaultMessage": "Reorder {itemName} {position, number}",
|
|
444
448
|
"description": "Accessible label on the drag-handle button that reorders one record in a lab ListInput. `{itemName}` is the consumer's singular noun for one record; `{position}` is its 1-based row number (e.g. \"Reorder guest 2\")."
|
|
@@ -707,6 +711,30 @@
|
|
|
707
711
|
"defaultMessage": "Invalid date",
|
|
708
712
|
"description": "Screen-reader-only live-region alert in DateInput / DateTimeInput when the typed date cannot be parsed. The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
|
|
709
713
|
},
|
|
714
|
+
"@astryx.dateInput.resetPicking": {
|
|
715
|
+
"defaultMessage": "Reset",
|
|
716
|
+
"description": "Secondary button in the mobile date picker's footer, beside Save. Removes the chosen date AND returns the calendar to the current month — it undoes the picking done so far and puts the picker back to how it opens, so prefer a word covering both, not one that only means emptying a field. Not cancel: the picker stays open afterwards and nothing is dismissed."
|
|
717
|
+
},
|
|
718
|
+
"@astryx.dateInput.savePicking": {
|
|
719
|
+
"defaultMessage": "Save",
|
|
720
|
+
"description": "Full-width primary button that closes the mobile date picker, on the calendar. The date is already committed by the tap that chose it, so this only dismisses — but it is worded as saving because that is how the action reads to someone finishing a form. Use the word your platform uses for accepting and closing a sheet."
|
|
721
|
+
},
|
|
722
|
+
"@astryx.dateInput.doneChoosingMonth": {
|
|
723
|
+
"defaultMessage": "Done",
|
|
724
|
+
"description": "Full-width button under the month and year wheels in the mobile date picker. It does NOT close the picker — it returns to the calendar, having set the month. Word it as finishing this step, not as finishing the whole task; the calendar's own button is the one that closes."
|
|
725
|
+
},
|
|
726
|
+
"@astryx.dateInput.chooseMonthYear": {
|
|
727
|
+
"defaultMessage": "{monthYear}, Choose month and year",
|
|
728
|
+
"description": "Accessible name for the mobile date picker's header button, which swaps the calendar for month and year wheels. {monthYear} is the currently shown month and year, already localized (e.g. \"March 2026\"). The whole label is one string so the separator and word order can change per locale."
|
|
729
|
+
},
|
|
730
|
+
"@astryx.dateInput.monthWheel": {
|
|
731
|
+
"defaultMessage": "Month",
|
|
732
|
+
"description": "Accessible name for the scrollable month column in the mobile date picker. Single word; a calendar month, not a duration."
|
|
733
|
+
},
|
|
734
|
+
"@astryx.dateInput.yearWheel": {
|
|
735
|
+
"defaultMessage": "Year",
|
|
736
|
+
"description": "Accessible name for the scrollable year column in the mobile date picker. Single word; a calendar year, not a duration."
|
|
737
|
+
},
|
|
710
738
|
"@astryx.dateTimeInput.timeHint12h": {
|
|
711
739
|
"defaultMessage": "e.g., 2:30 PM",
|
|
712
740
|
"description": "Placeholder hint shown in the DateTimeInput time field when focused and empty with 12-hour format. Gives an example of expected input format."
|
package/locales/pseudo.json
CHANGED
|
@@ -329,6 +329,9 @@
|
|
|
329
329
|
"@astryx.listInput.removeItem": {
|
|
330
330
|
"defaultMessage": "⟦Řéɱóṽé {itemName} {position, number}⟧"
|
|
331
331
|
},
|
|
332
|
+
"@astryx.listInput.removeUnavailable": {
|
|
333
|
+
"defaultMessage": "⟦Řéɱóṽé íš úñàṽàíłàƀłé ŵĥíłé ţĥé łíšţ íš ðíšàƀłéð⟧"
|
|
334
|
+
},
|
|
332
335
|
"@astryx.listInput.reorderItem": {
|
|
333
336
|
"defaultMessage": "⟦Řéóřðéř {itemName} {position, number}⟧"
|
|
334
337
|
},
|
|
@@ -530,6 +533,24 @@
|
|
|
530
533
|
"@astryx.dateInput.invalidDate": {
|
|
531
534
|
"defaultMessage": "⟦Íñṽàłíð ðàţé⟧"
|
|
532
535
|
},
|
|
536
|
+
"@astryx.dateInput.resetPicking": {
|
|
537
|
+
"defaultMessage": "⟦Řéšéţ⟧"
|
|
538
|
+
},
|
|
539
|
+
"@astryx.dateInput.savePicking": {
|
|
540
|
+
"defaultMessage": "⟦Šàṽé⟧"
|
|
541
|
+
},
|
|
542
|
+
"@astryx.dateInput.doneChoosingMonth": {
|
|
543
|
+
"defaultMessage": "⟦Ðóñé⟧"
|
|
544
|
+
},
|
|
545
|
+
"@astryx.dateInput.chooseMonthYear": {
|
|
546
|
+
"defaultMessage": "⟦{monthYear}, Çĥóóšé ɱóñţĥ àñð ýéàř⟧"
|
|
547
|
+
},
|
|
548
|
+
"@astryx.dateInput.monthWheel": {
|
|
549
|
+
"defaultMessage": "⟦Ṁóñţĥ⟧"
|
|
550
|
+
},
|
|
551
|
+
"@astryx.dateInput.yearWheel": {
|
|
552
|
+
"defaultMessage": "⟦Ýéàř⟧"
|
|
553
|
+
},
|
|
533
554
|
"@astryx.dateTimeInput.timeHint12h": {
|
|
534
555
|
"defaultMessage": "⟦é.ĝ., 2:30 ÞṀ⟧"
|
|
535
556
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6-canary.cea9ecd",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -656,6 +656,7 @@
|
|
|
656
656
|
"react-dom": ">=19.0.0"
|
|
657
657
|
},
|
|
658
658
|
"devDependencies": {
|
|
659
|
+
"@astryxdesign/cli": "0.4.6-canary.cea9ecd",
|
|
659
660
|
"@babel/cli": "^8.0.4",
|
|
660
661
|
"@babel/core": "^7.29.7",
|
|
661
662
|
"@babel/preset-react": "^8.0.1",
|
|
@@ -664,8 +665,7 @@
|
|
|
664
665
|
"@testing-library/dom": "^10.0.0",
|
|
665
666
|
"@testing-library/jest-dom": "^6.6.0",
|
|
666
667
|
"@testing-library/react": "^16.3.2",
|
|
667
|
-
"rimraf": "^6.0.1"
|
|
668
|
-
"@astryxdesign/cli": "0.4.5"
|
|
668
|
+
"rimraf": "^6.0.1"
|
|
669
669
|
},
|
|
670
670
|
"dependencies": {
|
|
671
671
|
"intl-messageformat": "^11.2.9"
|
|
@@ -16,6 +16,8 @@ export const docs = {
|
|
|
16
16
|
{guidance: true, description: 'Pick a size that matches the context: xsm or sm for inline mentions, md or lg for lists and cards, xl for profile headers.'},
|
|
17
17
|
{guidance: true, description: 'Add a status dot when knowing someone\'s availability matters, like in chat or team views.'},
|
|
18
18
|
{guidance: true, description: 'When wrapping an Avatar in your own Tooltip or HoverCard, set tooltip={false} so the built-in name tooltip does not overlap yours.'},
|
|
19
|
+
{guidance: true, description: 'Give every interactive avatar (href or onClick) a name or alt. It is the control\'s accessible name, and it warns in development when it is missing.'},
|
|
20
|
+
{guidance: false, description: 'Rely on a status label to name an interactive avatar. "Online" says nothing about where the link goes.'},
|
|
19
21
|
{guidance: false, description: 'Use Avatar for logos, product images, or anything that isn\'t a person or team. Use an image or icon instead.'},
|
|
20
22
|
{guidance: false, description: 'Force a square or custom shape. Avatars are always circular to stay consistent across the system.'},
|
|
21
23
|
],
|
|
@@ -68,7 +70,7 @@ export const docs = {
|
|
|
68
70
|
{
|
|
69
71
|
name: 'status',
|
|
70
72
|
type: 'ReactNode',
|
|
71
|
-
description: 'Corner content for status indicators.
|
|
73
|
+
description: 'Corner content for status indicators. AvatarStatusDot reports its `label` to the avatar, which composes it into the accessible name (e.g. "Jane Doe, Online") so screen readers announce the status. Reporting goes through context, so it still works when the dot sits inside a wrapper component of your own.',
|
|
72
74
|
slotElements: [
|
|
73
75
|
{
|
|
74
76
|
__element: 'AvatarStatusDot',
|
|
@@ -90,7 +92,7 @@ export const docs = {
|
|
|
90
92
|
name: 'href',
|
|
91
93
|
type: 'string',
|
|
92
94
|
description:
|
|
93
|
-
'When set, the avatar renders as an interactive link (`<a>` or a custom link component) pointing here. This follows the same element-swap rule as Button. Requires a meaningful accessible name via `alt` or `name
|
|
95
|
+
'When set, the avatar renders as an interactive link (`<a>` or a custom link component) pointing here. This follows the same element-swap rule as Button. Requires a meaningful accessible name via `alt` or `name`: an interactive avatar without one warns in development. Inside an AvatarGroup, interactive avatars share a single Tab stop and are reached with arrow keys.',
|
|
94
96
|
},
|
|
95
97
|
{
|
|
96
98
|
name: 'as',
|
|
@@ -112,7 +114,7 @@ export const docs = {
|
|
|
112
114
|
name: 'onClick',
|
|
113
115
|
type: '(e: MouseEvent) => void',
|
|
114
116
|
description:
|
|
115
|
-
'Click handler. When set without `href`, the avatar renders as a focusable `<button type="button">`. Requires a meaningful accessible name via `alt` or `name
|
|
117
|
+
'Click handler. When set without `href`, the avatar renders as a focusable `<button type="button">`. Requires a meaningful accessible name via `alt` or `name`: an interactive avatar without one warns in development.',
|
|
116
118
|
},
|
|
117
119
|
],
|
|
118
120
|
components: [
|
|
@@ -128,6 +130,7 @@ export const docsZh = {
|
|
|
128
130
|
bestPractices: [
|
|
129
131
|
{guidance: true, description: 'Always provide a name prop so the component can generate meaningful initials and alt text when the image fails to load.'},
|
|
130
132
|
{guidance: true, description: 'Use the status slot with AvatarStatusDot to indicate online presence or availability when relevant to the context.'},
|
|
133
|
+
{guidance: true, description: 'Give every interactive avatar (href or onClick) a name or alt. It is the control\'s accessible name, and it warns in development when it is missing.'},
|
|
131
134
|
{guidance: false, description: 'Use Avatar for decorative images or logos that aren\'t representing a person or entity. Use an image or icon component instead.'},
|
|
132
135
|
{guidance: false, description: 'Override the circular shape. Avatars are always round to maintain visual consistency across the system.'},
|
|
133
136
|
],
|
|
@@ -145,6 +148,7 @@ export const docsDense = {
|
|
|
145
148
|
{guidance: true, description: 'Match size to context: xsm/sm inline, md/lg in lists, xl for profiles.'},
|
|
146
149
|
{guidance: true, description: 'Add a status dot in chat or team views where availability matters.'},
|
|
147
150
|
{guidance: true, description: 'When wrapping Avatar in your own Tooltip or HoverCard, set tooltip={false} so the built-in name tooltip does not overlap yours.'},
|
|
151
|
+
{guidance: true, description: 'Interactive avatars (href/onClick) need name or alt; without one they warn in development. A status label is not a name.'},
|
|
148
152
|
{guidance: false, description: 'Use for logos or product images. Use an image or icon instead.'},
|
|
149
153
|
{guidance: false, description: 'Force a square or custom shape. Avatars are always circular.'},
|
|
150
154
|
],
|
|
@@ -156,14 +160,14 @@ export const docsDense = {
|
|
|
156
160
|
alt: 'alt text; falls back to name',
|
|
157
161
|
size: "avatar size. Named ('xsm' 20px, 'sm' 24px, 'md' 36px, 'lg' 48px, 'xl' 128px) or numeric px. An AvatarGroup's size overrides it.",
|
|
158
162
|
status:
|
|
159
|
-
'corner content for status indicators; its `label
|
|
163
|
+
'corner content for status indicators; AvatarStatusDot reports its `label`, composed into the avatar accessible name ("Jane Doe, Online"), at any nesting depth',
|
|
160
164
|
tooltip:
|
|
161
165
|
"hover/focus tooltip. true/omitted → name; string → that text; false → none. Owns its tooltip; set false when wrapping in your own Tooltip/HoverCard. Default true.",
|
|
162
|
-
href: 'renders avatar as a link (<a>/custom). Needs alt/name. Button-style element swap.',
|
|
166
|
+
href: 'renders avatar as a link (<a>/custom). Needs alt/name for an accessible name; warns in development without one. Button-style element swap.',
|
|
163
167
|
as: 'custom link component for href (e.g. Next Link). Only with href.',
|
|
164
168
|
target: 'link target. Only with href.',
|
|
165
169
|
rel: 'link rel. Only with href.',
|
|
166
|
-
onClick: 'click handler → renders <button> when no href. Needs alt/name.',
|
|
170
|
+
onClick: 'click handler → renders <button> when no href. Needs alt/name; warns in development without one.',
|
|
167
171
|
},
|
|
168
172
|
components: [
|
|
169
173
|
{name: 'AvatarStatusDot', description: 'size-aware status indicator rendered in the Avatar corner'},
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
+
import {Profiler, useState} from 'react';
|
|
3
4
|
import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
|
|
4
|
-
import {render, screen, fireEvent} from '@testing-library/react';
|
|
5
|
+
import {act, render, screen, fireEvent} from '@testing-library/react';
|
|
5
6
|
import userEvent from '@testing-library/user-event';
|
|
6
7
|
import {Avatar} from './Avatar';
|
|
7
8
|
import {AvatarStatusDot} from './AvatarStatusDot';
|
|
@@ -210,6 +211,167 @@ describe('Avatar', () => {
|
|
|
210
211
|
});
|
|
211
212
|
});
|
|
212
213
|
|
|
214
|
+
describe('status label through a consumer wrapper (P14)', () => {
|
|
215
|
+
// A consumer's own component around AvatarStatusDot. Its prop is
|
|
216
|
+
// deliberately not called `label`, so `status.props.label` introspection
|
|
217
|
+
// has nothing to read; the dot's own report through context reaches it.
|
|
218
|
+
function PresenceDot({presence = 'Online'}: {presence?: string}) {
|
|
219
|
+
return <AvatarStatusDot variant="success" label={presence} />;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
it('composes a label reported from inside a wrapper component', () => {
|
|
223
|
+
render(<Avatar name="Ada Lovelace" status={<PresenceDot />} />);
|
|
224
|
+
expect(
|
|
225
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
226
|
+
).toBeInTheDocument();
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
it('composes a label reported at any nesting depth', () => {
|
|
230
|
+
function Outer() {
|
|
231
|
+
return (
|
|
232
|
+
<span>
|
|
233
|
+
<PresenceDot presence="Away" />
|
|
234
|
+
</span>
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
render(<Avatar name="Ada Lovelace" status={<Outer />} />);
|
|
238
|
+
expect(
|
|
239
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Away'}),
|
|
240
|
+
).toBeInTheDocument();
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
it('follows a label that changes after mount', () => {
|
|
244
|
+
const {rerender} = render(
|
|
245
|
+
<Avatar
|
|
246
|
+
name="Ada Lovelace"
|
|
247
|
+
status={<PresenceDot presence="Online" />}
|
|
248
|
+
/>,
|
|
249
|
+
);
|
|
250
|
+
expect(
|
|
251
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
252
|
+
).toBeInTheDocument();
|
|
253
|
+
|
|
254
|
+
rerender(
|
|
255
|
+
<Avatar name="Ada Lovelace" status={<PresenceDot presence="Busy" />} />,
|
|
256
|
+
);
|
|
257
|
+
expect(
|
|
258
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Busy'}),
|
|
259
|
+
).toBeInTheDocument();
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
it('drops the label when the status element unmounts', () => {
|
|
263
|
+
const {rerender} = render(
|
|
264
|
+
<Avatar name="Ada Lovelace" status={<PresenceDot />} data-testid="a" />,
|
|
265
|
+
);
|
|
266
|
+
expect(
|
|
267
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
268
|
+
).toBeInTheDocument();
|
|
269
|
+
|
|
270
|
+
rerender(<Avatar name="Ada Lovelace" data-testid="a" />);
|
|
271
|
+
expect(screen.getByTestId('a')).toHaveAttribute(
|
|
272
|
+
'aria-label',
|
|
273
|
+
'Ada Lovelace',
|
|
274
|
+
);
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
it('announces a wrapped status on an otherwise decorative avatar', () => {
|
|
278
|
+
render(<Avatar data-testid="a" status={<PresenceDot />} />);
|
|
279
|
+
const el = screen.getByTestId('a');
|
|
280
|
+
expect(el).toHaveAttribute('role', 'img');
|
|
281
|
+
expect(el).toHaveAttribute('aria-label', 'Online');
|
|
282
|
+
expect(el).not.toHaveAttribute('aria-hidden');
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
it('lets a reported label win over introspection', () => {
|
|
286
|
+
// The wrapper's own `label` prop is not the string the dot renders with,
|
|
287
|
+
// so introspection and the dot's report disagree here.
|
|
288
|
+
function TranslatedDot({label}: {label: string}) {
|
|
289
|
+
return <AvatarStatusDot label={label === 'busy' ? 'Busy' : label} />;
|
|
290
|
+
}
|
|
291
|
+
render(
|
|
292
|
+
<Avatar name="Ada Lovelace" status={<TranslatedDot label="busy" />} />,
|
|
293
|
+
);
|
|
294
|
+
expect(
|
|
295
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Busy'}),
|
|
296
|
+
).toBeInTheDocument();
|
|
297
|
+
});
|
|
298
|
+
|
|
299
|
+
it('costs no extra render and does not loop', () => {
|
|
300
|
+
// The label arrives in the commit phase, after this render composed the
|
|
301
|
+
// name. It lands on the root element directly, so a wrapped status is
|
|
302
|
+
// named without a second render. `tooltip={false}` keeps the tooltip's
|
|
303
|
+
// own mount commit out of the count.
|
|
304
|
+
const commits: number[] = [];
|
|
305
|
+
render(
|
|
306
|
+
<Profiler id="avatar" onRender={() => commits.push(1)}>
|
|
307
|
+
<Avatar
|
|
308
|
+
name="Ada Lovelace"
|
|
309
|
+
tooltip={false}
|
|
310
|
+
status={<PresenceDot />}
|
|
311
|
+
/>
|
|
312
|
+
</Profiler>,
|
|
313
|
+
);
|
|
314
|
+
expect(
|
|
315
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
316
|
+
).toBeInTheDocument();
|
|
317
|
+
expect(commits).toHaveLength(1);
|
|
318
|
+
});
|
|
319
|
+
|
|
320
|
+
it('names a directly-passed dot on the first render, before any report', () => {
|
|
321
|
+
// Introspection answers render one; the dot's report then lands on the
|
|
322
|
+
// same name, still without a second render.
|
|
323
|
+
const commits: number[] = [];
|
|
324
|
+
render(
|
|
325
|
+
<Profiler id="avatar" onRender={() => commits.push(1)}>
|
|
326
|
+
<Avatar
|
|
327
|
+
name="Ada Lovelace"
|
|
328
|
+
tooltip={false}
|
|
329
|
+
status={<AvatarStatusDot label="Online" />}
|
|
330
|
+
/>
|
|
331
|
+
</Profiler>,
|
|
332
|
+
);
|
|
333
|
+
expect(
|
|
334
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
335
|
+
).toBeInTheDocument();
|
|
336
|
+
expect(commits).toHaveLength(1);
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
it('follows a label that changes without re-rendering the avatar', () => {
|
|
340
|
+
// State inside the consumer's wrapper: the dot re-renders alone, so the
|
|
341
|
+
// avatar never gets the chance to recompose during render.
|
|
342
|
+
let setPresence: (presence: string) => void = () => {};
|
|
343
|
+
function SelfUpdatingDot() {
|
|
344
|
+
const [presence, setter] = useState('Online');
|
|
345
|
+
setPresence = setter;
|
|
346
|
+
return <AvatarStatusDot label={presence} />;
|
|
347
|
+
}
|
|
348
|
+
render(<Avatar name="Ada Lovelace" status={<SelfUpdatingDot />} />);
|
|
349
|
+
expect(
|
|
350
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
|
|
351
|
+
).toBeInTheDocument();
|
|
352
|
+
|
|
353
|
+
act(() => setPresence('Busy'));
|
|
354
|
+
expect(
|
|
355
|
+
screen.getByRole('img', {name: 'Ada Lovelace, Busy'}),
|
|
356
|
+
).toBeInTheDocument();
|
|
357
|
+
});
|
|
358
|
+
|
|
359
|
+
it('leaves a consumer aria-label alone when a wrapped status reports', () => {
|
|
360
|
+
render(
|
|
361
|
+
<Avatar
|
|
362
|
+
name="Ada Lovelace"
|
|
363
|
+
aria-label="Ada Lovelace, first programmer"
|
|
364
|
+
data-testid="a"
|
|
365
|
+
status={<PresenceDot />}
|
|
366
|
+
/>,
|
|
367
|
+
);
|
|
368
|
+
expect(screen.getByTestId('a')).toHaveAttribute(
|
|
369
|
+
'aria-label',
|
|
370
|
+
'Ada Lovelace, first programmer',
|
|
371
|
+
);
|
|
372
|
+
});
|
|
373
|
+
});
|
|
374
|
+
|
|
213
375
|
describe('a whitespace-only name carries no identity', () => {
|
|
214
376
|
it('falls through to the default icon instead of an empty plate', () => {
|
|
215
377
|
render(<Avatar name=" " data-testid="a" />);
|
|
@@ -519,4 +681,60 @@ describe('Avatar — interactivity (Button trichotomy)', () => {
|
|
|
519
681
|
render(<Avatar data-testid="a" />);
|
|
520
682
|
expect(warn).not.toHaveBeenCalled();
|
|
521
683
|
});
|
|
684
|
+
|
|
685
|
+
it('warns when the only accessible name is a status label', () => {
|
|
686
|
+
// A status is not an identity: "Online" alone is a worse control name than
|
|
687
|
+
// none, because it reads as a legitimate one.
|
|
688
|
+
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
689
|
+
render(
|
|
690
|
+
<Avatar
|
|
691
|
+
href="/somewhere"
|
|
692
|
+
src="https://example.com/ada.jpg"
|
|
693
|
+
status={<AvatarStatusDot label="Online" />}
|
|
694
|
+
/>,
|
|
695
|
+
);
|
|
696
|
+
expect(warn).toHaveBeenCalledWith(
|
|
697
|
+
expect.stringContaining('interactive avatar'),
|
|
698
|
+
);
|
|
699
|
+
});
|
|
700
|
+
|
|
701
|
+
it('warns when interactive with an empty-string name and alt', () => {
|
|
702
|
+
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
703
|
+
render(<Avatar href="/ada" name="" alt="" />);
|
|
704
|
+
expect(warn).toHaveBeenCalledWith(
|
|
705
|
+
expect.stringContaining('interactive avatar'),
|
|
706
|
+
);
|
|
707
|
+
});
|
|
708
|
+
|
|
709
|
+
it('does not warn when the consumer names the control with aria-label', () => {
|
|
710
|
+
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
711
|
+
render(<Avatar href="/ada" aria-label="Ada Lovelace" />);
|
|
712
|
+
expect(warn).not.toHaveBeenCalled();
|
|
713
|
+
});
|
|
714
|
+
});
|
|
715
|
+
|
|
716
|
+
describe('Avatar — consumer ARIA overrides win (Icon labelling pattern)', () => {
|
|
717
|
+
it('lets a consumer aria-label override the derived name on the static root', () => {
|
|
718
|
+
render(<Avatar name="Ada" aria-label="Ada Lovelace, on leave" />);
|
|
719
|
+
expect(
|
|
720
|
+
screen.getByRole('img', {name: 'Ada Lovelace, on leave'}),
|
|
721
|
+
).toBeInTheDocument();
|
|
722
|
+
});
|
|
723
|
+
|
|
724
|
+
it('lets a consumer role override the derived role', () => {
|
|
725
|
+
render(<Avatar name="Ada" role="presentation" data-testid="a" />);
|
|
726
|
+
expect(screen.getByTestId('a')).toHaveAttribute('role', 'presentation');
|
|
727
|
+
});
|
|
728
|
+
|
|
729
|
+
it('lets a consumer hide a named avatar with aria-hidden', () => {
|
|
730
|
+
render(<Avatar name="Ada" aria-hidden="true" data-testid="a" />);
|
|
731
|
+
expect(screen.getByTestId('a')).toHaveAttribute('aria-hidden', 'true');
|
|
732
|
+
});
|
|
733
|
+
|
|
734
|
+
it('lets a consumer aria-label override the derived name on an interactive root', () => {
|
|
735
|
+
render(<Avatar name="Ada" href="/ada" aria-label="Ada Lovelace profile" />);
|
|
736
|
+
expect(
|
|
737
|
+
screen.getByRole('link', {name: 'Ada Lovelace profile'}),
|
|
738
|
+
).toBeInTheDocument();
|
|
739
|
+
});
|
|
522
740
|
});
|