@astryxdesign/core 0.1.8-canary.ede1ea1 → 0.1.8-canary.f04cdf1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +6 -2
- package/dist/AppShell/AppShellMobileContext.d.ts +8 -0
- package/dist/AppShell/AppShellMobileContext.d.ts.map +1 -1
- package/dist/Avatar/Avatar.d.ts +18 -2
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +63 -7
- package/dist/Avatar/AvatarStatusDot.d.ts +33 -5
- package/dist/Avatar/AvatarStatusDot.d.ts.map +1 -1
- package/dist/Avatar/AvatarStatusDot.js +144 -19
- package/dist/Banner/Banner.d.ts +9 -1
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +31 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts +31 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +208 -6
- package/dist/Breadcrumbs/index.d.ts +5 -0
- package/dist/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/Breadcrumbs/index.js +9 -1
- package/dist/Button/Button.d.ts +8 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +31 -2
- package/dist/ButtonGroup/ButtonGroup.d.ts +9 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +30 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +30 -2
- package/dist/Card/Card.d.ts +8 -2
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +28 -2
- package/dist/Carousel/Carousel.d.ts +4 -1
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +24 -4
- package/dist/Chat/ChatComposer.d.ts +8 -0
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +46 -7
- package/dist/Chat/ChatComposerDrawer.d.ts +2 -0
- package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
- package/dist/Chat/ChatComposerDrawer.js +11 -1
- package/dist/Chat/ChatComposerInput.d.ts +20 -3
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +35 -3
- package/dist/Chat/ChatContext.d.ts +33 -0
- package/dist/Chat/ChatContext.d.ts.map +1 -1
- package/dist/Chat/ChatContext.js +16 -2
- package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
- package/dist/Chat/ChatDictationButton.js +1 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +4 -4
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.js +7 -1
- package/dist/Chat/ChatToolCalls.d.ts +5 -1
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +18 -9
- package/dist/Chat/index.d.ts +2 -1
- package/dist/Chat/index.d.ts.map +1 -1
- package/dist/Chat/index.js +1 -1
- package/dist/Chat/useChatStreamScroll.d.ts +2 -1
- package/dist/Chat/useChatStreamScroll.d.ts.map +1 -1
- package/dist/Chat/useChatStreamScroll.js +22 -8
- package/dist/Chat/useSpeechRecognition.d.ts +0 -1
- package/dist/Chat/useSpeechRecognition.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.js +1 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts +20 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +11 -1
- package/dist/ClickableCard/ClickableCard.d.ts +9 -2
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +5 -2
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +8 -1
- package/dist/CommandPalette/CommandPalette.d.ts +1 -1
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +3 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts +7 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +6 -1
- package/dist/DateInput/DateInput.d.ts +47 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +26 -2
- package/dist/DateInput/index.d.ts +1 -1
- package/dist/DateInput/index.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +10 -1
- package/dist/Dialog/Dialog.d.ts +3 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +57 -6
- package/dist/Dialog/DialogContext.d.ts +7 -0
- package/dist/Dialog/DialogContext.d.ts.map +1 -1
- package/dist/Dialog/DialogContext.js +2 -2
- package/dist/Dialog/DialogHeader.d.ts +5 -2
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +6 -1
- package/dist/Divider/Divider.js +1 -1
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +2 -3
- package/dist/Field/FieldLabel.d.ts +1 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +42 -15
- package/dist/FieldStatus/FieldStatus.d.ts +8 -0
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +22 -4
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +10 -2
- package/dist/HoverCard/HoverCard.d.ts +9 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -0
- package/dist/HoverCard/useHoverCard.d.ts +8 -0
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +7 -2
- package/dist/Icon/Icon.d.ts +7 -2
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Item/Item.d.ts +6 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +22 -1
- package/dist/Layer/useLayer.d.ts +6 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +2 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +6 -1
- package/dist/MobileNav/MobileNavToggle.d.ts.map +1 -1
- package/dist/MobileNav/MobileNavToggle.js +4 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +39 -12
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +16 -0
- package/dist/OverflowList/OverflowList.d.ts +20 -3
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +29 -4
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +3 -2
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +3 -9
- package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts +9 -2
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +16 -13
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +4 -2
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +16 -0
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +21 -8
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +15 -1
- package/dist/Stack/stack.stylex.d.ts +9 -9
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +3 -2
- package/dist/Table/plugins/selection/useTableSelection.d.ts +13 -0
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +4 -1
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +5 -3
- package/dist/Thumbnail/Thumbnail.d.ts +26 -5
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +97 -54
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +9 -0
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +1 -0
- package/dist/Thumbnail/thumbnail.markers.stylex.js +14 -0
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +15 -4
- package/dist/Timestamp/Timestamp.d.ts +3 -1
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +8 -6
- package/dist/Toast/useToast.d.ts.map +1 -1
- package/dist/Toast/useToast.js +2 -5
- package/dist/ToggleButton/ToggleButtonGroup.d.ts +0 -1
- package/dist/ToggleButton/ToggleButtonGroup.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButtonGroup.js +1 -1
- package/dist/Tokenizer/Tokenizer.d.ts +1 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +16 -4
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +18 -8
- package/dist/TopNav/TopNavMegaMenu.js +10 -4
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +9 -1
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +8 -1
- package/dist/TopNav/TopNavMenu.d.ts +2 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +68 -6
- package/dist/TreeList/TreeListBranches.d.ts +5 -0
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +10 -4
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +25 -6
- package/dist/astryx.css +26 -18
- package/dist/astryx.umd.js +51 -51
- package/dist/astryx.umd.js.map +4 -4
- package/dist/docs-types.d.ts +8 -0
- package/dist/docs-types.d.ts.map +1 -1
- package/dist/hooks/computeOverflow.d.ts +47 -0
- package/dist/hooks/computeOverflow.d.ts.map +1 -0
- package/dist/hooks/computeOverflow.js +213 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useDevWarning.d.ts +18 -0
- package/dist/hooks/useDevWarning.d.ts.map +1 -0
- package/dist/hooks/useDevWarning.js +49 -0
- package/dist/hooks/useOverflow.d.ts +19 -0
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +36 -25
- package/dist/i18n/resolve.d.ts.map +1 -1
- package/dist/i18n/resolve.js +7 -18
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +2 -7
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +51 -0
- package/dist/theme/hct.d.ts +0 -1
- package/dist/theme/hct.d.ts.map +1 -1
- package/dist/theme/hct.js +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +2 -1
- package/dist/utils/devWarning.d.ts +42 -0
- package/dist/utils/devWarning.d.ts.map +1 -0
- package/dist/utils/devWarning.js +88 -0
- package/dist/utils/index.d.ts +3 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +3 -2
- package/dist/utils/plainDate.d.ts +30 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +53 -0
- package/dist/utils/types.d.ts +13 -0
- package/dist/utils/types.d.ts.map +1 -1
- package/locales/en.json +16 -0
- package/locales/fr-FR.json +14 -0
- package/locales/pseudo.json +12 -0
- package/package.json +1 -1
- package/src/AppShell/AppShell.tsx +6 -0
- package/src/AppShell/AppShellMobileContext.tsx +8 -0
- package/src/AppShell/useAppShellMobile.doc.mjs +8 -0
- package/src/Avatar/Avatar.doc.mjs +15 -3
- package/src/Avatar/Avatar.test.tsx +156 -1
- package/src/Avatar/Avatar.tsx +96 -4
- package/src/Avatar/AvatarStatusDot.doc.mjs +23 -12
- package/src/Avatar/AvatarStatusDot.test.tsx +284 -0
- package/src/Avatar/AvatarStatusDot.tsx +178 -21
- package/src/Banner/Banner.doc.mjs +9 -0
- package/src/Banner/Banner.test.tsx +30 -0
- package/src/Banner/Banner.tsx +37 -1
- package/src/Breadcrumbs/BreadcrumbItem.doc.mjs +26 -0
- package/src/Breadcrumbs/BreadcrumbItem.tsx +333 -14
- package/src/Breadcrumbs/Breadcrumbs.doc.mjs +2 -0
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +284 -2
- package/src/Breadcrumbs/index.ts +27 -0
- package/src/Button/Button.doc.mjs +9 -0
- package/src/Button/Button.test.tsx +49 -0
- package/src/Button/Button.tsx +25 -1
- package/src/ButtonGroup/ButtonGroup.doc.mjs +3 -0
- package/src/ButtonGroup/ButtonGroup.test.tsx +37 -0
- package/src/ButtonGroup/ButtonGroup.tsx +32 -0
- package/src/Calendar/Calendar.doc.mjs +12 -1
- package/src/Calendar/Calendar.test.tsx +193 -0
- package/src/Calendar/Calendar.tsx +38 -16
- package/src/Card/Card.doc.mjs +9 -0
- package/src/Card/Card.test.tsx +21 -3
- package/src/Card/Card.tsx +35 -2
- package/src/Carousel/Carousel.doc.mjs +1 -0
- package/src/Carousel/Carousel.test.tsx +53 -0
- package/src/Carousel/Carousel.tsx +34 -4
- package/src/Chat/ChatComposer.doc.mjs +12 -3
- package/src/Chat/ChatComposer.test.tsx +115 -0
- package/src/Chat/ChatComposer.tsx +73 -9
- package/src/Chat/ChatComposerDrawer.test.tsx +61 -0
- package/src/Chat/ChatComposerDrawer.tsx +11 -1
- package/src/Chat/ChatComposerInput.doc.mjs +7 -0
- package/src/Chat/ChatComposerInput.test.tsx +103 -0
- package/src/Chat/ChatComposerInput.tsx +49 -3
- package/src/Chat/ChatContext.tsx +37 -10
- package/src/Chat/ChatDictationButton.tsx +4 -1
- package/src/Chat/ChatLayoutScrollButton.tsx +4 -1
- package/src/Chat/ChatSendButton.tsx +6 -0
- package/src/Chat/ChatToolCalls.test.tsx +64 -0
- package/src/Chat/ChatToolCalls.tsx +25 -4
- package/src/Chat/index.ts +5 -1
- package/src/Chat/useChatStreamScroll.test.tsx +49 -0
- package/src/Chat/useChatStreamScroll.ts +27 -10
- package/src/Chat/useSpeechRecognition.ts +1 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +32 -1
- package/src/CheckboxList/CheckboxList.test.tsx +81 -3
- package/src/CheckboxList/CheckboxListItem.doc.mjs +33 -5
- package/src/CheckboxList/CheckboxListItem.tsx +41 -5
- package/src/ClickableCard/ClickableCard.doc.mjs +2 -0
- package/src/ClickableCard/ClickableCard.test.tsx +34 -0
- package/src/ClickableCard/ClickableCard.tsx +13 -3
- package/src/CodeBlock/CodeBlock.test.tsx +56 -0
- package/src/CodeBlock/CodeBlock.tsx +6 -0
- package/src/CommandPalette/CommandPalette.tsx +3 -1
- package/src/CommandPalette/CommandPaletteInput.doc.mjs +26 -9
- package/src/CommandPalette/CommandPaletteInput.test.tsx +34 -0
- package/src/CommandPalette/CommandPaletteInput.tsx +11 -0
- package/src/ContextMenu/ContextMenu.test.tsx +193 -0
- package/src/DateInput/DateInput.doc.mjs +16 -0
- package/src/DateInput/DateInput.test.tsx +108 -0
- package/src/DateInput/DateInput.tsx +68 -3
- package/src/DateInput/index.ts +1 -0
- package/src/DateTimeInput/DateTimeInput.test.tsx +35 -0
- package/src/DateTimeInput/DateTimeInput.tsx +11 -1
- package/src/Dialog/Dialog.doc.mjs +2 -2
- package/src/Dialog/Dialog.test.tsx +77 -4
- package/src/Dialog/Dialog.tsx +89 -5
- package/src/Dialog/DialogContext.ts +9 -2
- package/src/Dialog/DialogHeader.doc.mjs +2 -2
- package/src/Dialog/DialogHeader.tsx +9 -2
- package/src/Divider/Divider.tsx +2 -2
- package/src/DropdownMenu/DropdownMenu.test.tsx +169 -0
- package/src/Field/Field.test.tsx +57 -12
- package/src/Field/Field.tsx +6 -5
- package/src/Field/FieldLabel.tsx +8 -0
- package/src/FieldStatus/FieldStatus.doc.mjs +17 -5
- package/src/FieldStatus/FieldStatus.test.tsx +78 -40
- package/src/FieldStatus/FieldStatus.tsx +22 -4
- package/src/FileInput/FileInput.test.tsx +52 -3
- package/src/FileInput/FileInput.tsx +9 -1
- package/src/HoverCard/HoverCard.doc.mjs +13 -0
- package/src/HoverCard/HoverCard.test.tsx +21 -2
- package/src/HoverCard/HoverCard.tsx +11 -0
- package/src/HoverCard/useHoverCard.doc.mjs +2 -0
- package/src/HoverCard/useHoverCard.tsx +24 -2
- package/src/Icon/Icon.doc.mjs +3 -2
- package/src/Icon/Icon.tsx +7 -2
- package/src/IconButton/IconButton.doc.mjs +8 -0
- package/src/IconButton/IconButton.test.tsx +15 -18
- package/src/Item/Item.test.tsx +40 -18
- package/src/Item/Item.tsx +38 -2
- package/src/Layer/useLayer.tsx +8 -0
- package/src/List/List.test.tsx +9 -8
- package/src/MobileNav/MobileNav.tsx +6 -0
- package/src/MobileNav/MobileNavToggle.test.tsx +116 -0
- package/src/MobileNav/MobileNavToggle.tsx +9 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +4 -2
- package/src/MultiSelector/MultiSelector.test.tsx +162 -1
- package/src/MultiSelector/MultiSelector.tsx +55 -12
- package/src/MultiSelector/hooks.ts +17 -0
- package/src/NumberInput/NumberInput.test.tsx +11 -7
- package/src/OverflowList/OverflowList.doc.mjs +39 -6
- package/src/OverflowList/OverflowList.test.tsx +111 -0
- package/src/OverflowList/OverflowList.tsx +48 -8
- package/src/Popover/Popover.tsx +7 -4
- package/src/Popover/usePopover.tsx +9 -13
- package/src/PowerSearch/PowerSearch.doc.mjs +14 -0
- package/src/PowerSearch/PowerSearch.test.tsx +20 -0
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +67 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
- package/src/SelectableCard/SelectableCard.doc.mjs +2 -0
- package/src/SelectableCard/SelectableCard.test.tsx +46 -4
- package/src/SelectableCard/SelectableCard.tsx +29 -16
- package/src/Selector/Selector.test.tsx +69 -0
- package/src/Selector/Selector.tsx +5 -1
- package/src/Selector/hooks.ts +17 -0
- package/src/SideNav/SideNav.test.tsx +119 -3
- package/src/SideNav/SideNavHeading.tsx +24 -8
- package/src/Slider/Slider.test.tsx +62 -2
- package/src/Slider/Slider.tsx +15 -1
- package/src/Switch/Switch.test.tsx +32 -1
- package/src/Table/BaseTable.tsx +3 -5
- package/src/Table/plugins/selection/useTableSelection.test.tsx +16 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +19 -1
- package/src/Table/useBaseTablePlugins.ts +10 -6
- package/src/Table/useTableSelection.doc.mjs +65 -14
- package/src/TextArea/TextArea.test.tsx +9 -1
- package/src/Thumbnail/Thumbnail.doc.mjs +19 -10
- package/src/Thumbnail/Thumbnail.test.tsx +98 -7
- package/src/Thumbnail/Thumbnail.tsx +141 -41
- package/src/Thumbnail/thumbnail.markers.stylex.ts +12 -0
- package/src/TimeInput/TimeInput.test.tsx +76 -1
- package/src/TimeInput/TimeInput.tsx +19 -6
- package/src/Timestamp/Timestamp.doc.mjs +4 -4
- package/src/Timestamp/Timestamp.test.tsx +32 -0
- package/src/Timestamp/Timestamp.tsx +28 -8
- package/src/Toast/useToast.tsx +7 -8
- package/src/ToggleButton/ToggleButtonGroup.tsx +1 -1
- package/src/Tokenizer/Tokenizer.doc.mjs +15 -1
- package/src/Tokenizer/Tokenizer.test.tsx +183 -2
- package/src/Tokenizer/Tokenizer.tsx +16 -4
- package/src/TopNav/TopNav.test.tsx +125 -1
- package/src/TopNav/TopNavHeading.tsx +24 -8
- package/src/TopNav/TopNavMegaMenu.test.tsx +149 -1
- package/src/TopNav/TopNavMegaMenu.tsx +10 -4
- package/src/TopNav/TopNavMegaMenuFeaturedCard.doc.mjs +3 -3
- package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +19 -2
- package/src/TopNav/TopNavMenu.test.tsx +118 -4
- package/src/TopNav/TopNavMenu.tsx +83 -5
- package/src/TreeList/TreeList.doc.mjs +6 -0
- package/src/TreeList/TreeList.test.tsx +169 -0
- package/src/TreeList/TreeListBranches.tsx +16 -2
- package/src/TreeList/TreeListItem.tsx +34 -3
- package/src/docs-types.ts +5 -0
- package/src/hooks/computeOverflow.test.ts +422 -0
- package/src/hooks/computeOverflow.ts +290 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useDevWarning.test.tsx +45 -0
- package/src/hooks/useDevWarning.ts +54 -0
- package/src/hooks/useOverflow.test.ts +96 -4
- package/src/hooks/useOverflow.ts +74 -33
- package/src/i18n/InternationalizationProvider.doc.mjs +77 -2
- package/src/i18n/resolve.ts +9 -21
- package/src/theme/Theme.tsx +11 -14
- package/src/theme/generateThemeRules.test.ts +65 -0
- package/src/theme/generateThemeRules.ts +56 -0
- package/src/theme/hct.ts +1 -1
- package/src/theme/syntax/defineSyntaxTheme.ts +5 -6
- package/src/utils/devWarning.test.ts +56 -0
- package/src/utils/devWarning.ts +102 -0
- package/src/utils/index.ts +6 -0
- package/src/utils/plainDate.test.ts +22 -0
- package/src/utils/plainDate.ts +61 -0
- package/src/utils/types.ts +14 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAsXf;yBArYe,QAAQ"}
|
|
@@ -20,7 +20,7 @@ import React from 'react';
|
|
|
20
20
|
* - /packages/cli/templates/blocks/components/AppShell/ (showcase blocks)
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
-
import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
23
|
+
import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
25
|
import "../theme/tokens.stylex.js";
|
|
26
26
|
import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -307,15 +307,19 @@ export function AppShell({
|
|
|
307
307
|
// =========================================================================
|
|
308
308
|
// Mobile context — shared with MobileNavToggle and future TopNav mobile
|
|
309
309
|
// =========================================================================
|
|
310
|
+
// Stable id shared by the drawer (applied as its `id`) and the toggle
|
|
311
|
+
// (referenced via `aria-controls`) so screen readers know what it controls.
|
|
312
|
+
const mobileNavId = useId();
|
|
310
313
|
const mobileContextValue = useMemo(() => ({
|
|
311
314
|
isMobile: isBelowBreakpoint,
|
|
312
315
|
isMobileNavOpen,
|
|
316
|
+
mobileNavId,
|
|
313
317
|
toggleMobileNav: () => mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
|
|
314
318
|
openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
|
|
315
319
|
closeMobileNav: () => setMobileNavOpen(false),
|
|
316
320
|
isMobileNavEnabled: mobileNavEnabled,
|
|
317
321
|
hasAutoToggle: mobileNavHasToggle
|
|
318
|
-
}), [isBelowBreakpoint, isMobileNavOpen, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
|
|
322
|
+
}), [isBelowBreakpoint, isMobileNavOpen, mobileNavId, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
|
|
319
323
|
|
|
320
324
|
// =========================================================================
|
|
321
325
|
// Build header content (topNav + banner)
|
|
@@ -3,6 +3,14 @@ export interface AppShellMobileContextValue {
|
|
|
3
3
|
isMobile: boolean;
|
|
4
4
|
/** Whether the mobile nav drawer is currently open */
|
|
5
5
|
isMobileNavOpen: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* DOM id of the mobile nav drawer. `AppShell` sets this so the toggle can
|
|
8
|
+
* point its `aria-controls` at the drawer and the drawer can apply it as its
|
|
9
|
+
* `id`. Optional: callers that construct this context by hand may omit it, in
|
|
10
|
+
* which case `MobileNav` falls back to a locally generated id and the toggle
|
|
11
|
+
* simply drops `aria-controls`.
|
|
12
|
+
*/
|
|
13
|
+
mobileNavId?: string;
|
|
6
14
|
/** Toggle the mobile nav drawer open/closed */
|
|
7
15
|
toggleMobileNav: () => void;
|
|
8
16
|
/** Open the mobile nav drawer */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}
|
|
1
|
+
{"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}
|
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Avatar.tsx
|
|
3
|
-
* @input Uses React, HTMLAttributes, ReactNode, useState
|
|
3
|
+
* @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
|
|
4
|
+
* (Tooltip hook) for the optional name-on-hover tooltip
|
|
4
5
|
* @output Exports Avatar component, AvatarProps, AvatarSize types
|
|
5
6
|
* @position Core implementation; consumed by index.ts
|
|
6
7
|
*
|
|
@@ -70,6 +71,19 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
70
71
|
* Typically used for status indicators or badges.
|
|
71
72
|
*/
|
|
72
73
|
status?: ReactNode;
|
|
74
|
+
/**
|
|
75
|
+
* Tooltip shown on hover (and keyboard focus).
|
|
76
|
+
* - omitted / `true`: show the avatar's `name`
|
|
77
|
+
* - a string: show that text instead
|
|
78
|
+
* - `false`: no tooltip
|
|
79
|
+
*
|
|
80
|
+
* The avatar owns this tooltip. It is NOT auto-disabled when wrapped in your
|
|
81
|
+
* own Tooltip/HoverCard — set `tooltip={false}` if you provide your own
|
|
82
|
+
* overlay. No tooltip is shown if `tooltip` is `true`/omitted and there is
|
|
83
|
+
* no (non-whitespace) `name`.
|
|
84
|
+
* @default true
|
|
85
|
+
*/
|
|
86
|
+
tooltip?: string | boolean;
|
|
73
87
|
}
|
|
74
88
|
/**
|
|
75
89
|
* Avatar component for displaying user profile pictures.
|
|
@@ -82,9 +96,11 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
|
|
|
82
96
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
83
97
|
* <Avatar name="Jane Smith" size="xl" />
|
|
84
98
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
99
|
+
* <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
|
|
100
|
+
* <Avatar name="Jane" tooltip={false} />
|
|
85
101
|
* ```
|
|
86
102
|
*/
|
|
87
|
-
export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
|
|
103
|
+
export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, tooltip, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
|
|
88
104
|
export declare namespace Avatar {
|
|
89
105
|
var displayName: string;
|
|
90
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAkGD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAsCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAqJb;yBAnKe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Avatar.tsx
|
|
7
|
-
* @input Uses React, HTMLAttributes, ReactNode, useState
|
|
7
|
+
* @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
|
|
8
|
+
* (Tooltip hook) for the optional name-on-hover tooltip
|
|
8
9
|
* @output Exports Avatar component, AvatarProps, AvatarSize types
|
|
9
10
|
* @position Core implementation; consumed by index.ts
|
|
10
11
|
*
|
|
@@ -20,8 +21,9 @@ import "../theme/tokens.stylex.js";
|
|
|
20
21
|
import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
21
22
|
import { AvatarSizeContext } from "./AvatarSizeContext.js";
|
|
22
23
|
import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
|
|
23
|
-
import { mergeProps } from "../utils/index.js";
|
|
24
|
+
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
24
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
|
+
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
25
27
|
|
|
26
28
|
/**
|
|
27
29
|
* The offset ratio for positioning elements on a circle's edge at 45°.
|
|
@@ -35,7 +37,7 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
35
37
|
*
|
|
36
38
|
* This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
|
|
37
39
|
*/
|
|
38
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
40
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
39
41
|
const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
|
|
40
42
|
|
|
41
43
|
/**
|
|
@@ -122,6 +124,11 @@ const styles = {
|
|
|
122
124
|
status: {
|
|
123
125
|
kVAEAm: "x10l6tqk",
|
|
124
126
|
$$css: true
|
|
127
|
+
},
|
|
128
|
+
focusable: {
|
|
129
|
+
kI3sdo: "x17nn4n9",
|
|
130
|
+
kInvED: "x1wfwxd8 x7s97pk",
|
|
131
|
+
$$css: true
|
|
125
132
|
}
|
|
126
133
|
};
|
|
127
134
|
|
|
@@ -229,6 +236,8 @@ function DefaultIcon({
|
|
|
229
236
|
* <Avatar src="/user.jpg" name="John Doe" />
|
|
230
237
|
* <Avatar name="Jane Smith" size="xl" />
|
|
231
238
|
* <Avatar src="/user.jpg" status={<OnlineIndicator />} />
|
|
239
|
+
* <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
|
|
240
|
+
* <Avatar name="Jane" tooltip={false} />
|
|
232
241
|
* ```
|
|
233
242
|
*/
|
|
234
243
|
export function Avatar({
|
|
@@ -239,6 +248,7 @@ export function Avatar({
|
|
|
239
248
|
size = 'md',
|
|
240
249
|
src,
|
|
241
250
|
status,
|
|
251
|
+
tooltip = true,
|
|
242
252
|
xstyle,
|
|
243
253
|
className,
|
|
244
254
|
style,
|
|
@@ -262,18 +272,54 @@ export function Avatar({
|
|
|
262
272
|
const avatarGroup = useAvatarGroup();
|
|
263
273
|
const resolvedSize = avatarGroup?.size ?? size;
|
|
264
274
|
const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
|
|
265
|
-
|
|
275
|
+
|
|
276
|
+
// Resolve the tooltip content:
|
|
277
|
+
// - `false` → no tooltip
|
|
278
|
+
// - a string → that string
|
|
279
|
+
// - `true` / omitted → the `name` (a whitespace-only name yields nothing)
|
|
280
|
+
// Note: the *visible* tooltip prefers `name` (not `alt`); the *accessible
|
|
281
|
+
// name* on the root still uses `alt || name` above, independent of this.
|
|
282
|
+
const tooltipContent = tooltip === false ? undefined : typeof tooltip === 'string' ? tooltip : name;
|
|
283
|
+
const trimmedTooltip = tooltipContent?.trim();
|
|
284
|
+
const showTooltip = trimmedTooltip != null && trimmedTooltip !== '';
|
|
285
|
+
// Whether the tooltip text is a consumer-authored override (a custom string)
|
|
286
|
+
// rather than the default name. A custom description is worth wiring to
|
|
287
|
+
// `aria-describedby` (it adds information, matching Button); the default name
|
|
288
|
+
// tooltip is visual-only — its text duplicates the root `aria-label`, so
|
|
289
|
+
// describing it too would double-announce the same name (OQ-4).
|
|
290
|
+
const isCustomTooltip = typeof tooltip === 'string';
|
|
291
|
+
|
|
292
|
+
// Own the name tooltip via the Tooltip hook (the Button pattern), which
|
|
293
|
+
// returns `describedBy` as a value we choose whether to apply — the only way
|
|
294
|
+
// to satisfy the per-case aria-describedby rule (default name: none; custom
|
|
295
|
+
// string: describe) without editing Tooltip. `focusTrigger: 'auto'` shows the
|
|
296
|
+
// tooltip on keyboard focus once the root is made focusable (below).
|
|
297
|
+
const tooltipHook = useTooltip({
|
|
298
|
+
placement: 'above',
|
|
299
|
+
isEnabled: showTooltip
|
|
300
|
+
});
|
|
301
|
+
const rootRef = mergeRefs(ref, showTooltip ? tooltipHook.ref : undefined);
|
|
302
|
+
const describedByProp = showTooltip && isCustomTooltip ? {
|
|
303
|
+
'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
|
|
304
|
+
} : null;
|
|
305
|
+
const avatarElement = /*#__PURE__*/_jsx(AvatarSizeContext, {
|
|
266
306
|
value: numericSize,
|
|
267
307
|
children: /*#__PURE__*/_jsxs("div", {
|
|
268
308
|
...props,
|
|
269
|
-
ref:
|
|
309
|
+
ref: rootRef,
|
|
270
310
|
role: isDecorative ? 'presentation' : 'img',
|
|
271
311
|
"aria-label": isDecorative ? undefined : accessibleName,
|
|
272
|
-
"aria-hidden": isDecorative || undefined
|
|
312
|
+
"aria-hidden": isDecorative || undefined
|
|
313
|
+
// The root is a div[role="img"], not natively focusable. When a name
|
|
314
|
+
// tooltip is active, add a tab stop so keyboard users can reveal it
|
|
315
|
+
// (WCAG 1.4.13 / 2.1.1) — matching Timestamp/Button. Only while active.
|
|
316
|
+
,
|
|
317
|
+
tabIndex: showTooltip ? 0 : undefined,
|
|
273
318
|
"data-testid": testId,
|
|
319
|
+
...describedByProp,
|
|
274
320
|
...mergeProps(themeProps('avatar', {
|
|
275
321
|
size: resolvedSize
|
|
276
|
-
}), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
|
|
322
|
+
}), stylex.props(styles.wrapper, showTooltip && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
|
|
277
323
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
278
324
|
...stylex.props(styles.content, dynamicStyles.size(numericSize)),
|
|
279
325
|
children: [showImage && /*#__PURE__*/_jsx("img", {
|
|
@@ -307,5 +353,15 @@ export function Avatar({
|
|
|
307
353
|
})]
|
|
308
354
|
})
|
|
309
355
|
});
|
|
356
|
+
if (!showTooltip) {
|
|
357
|
+
return avatarElement;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
// Render the tooltip as a sibling (no wrapper DOM) — the hook's ref is already
|
|
361
|
+
// attached to the root via `rootRef` above. `trimmedTooltip` is guaranteed
|
|
362
|
+
// non-empty here.
|
|
363
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
364
|
+
children: [avatarElement, tooltipHook.renderTooltip(trimmedTooltip)]
|
|
365
|
+
});
|
|
310
366
|
}
|
|
311
367
|
Avatar.displayName = 'Avatar';
|
|
@@ -24,6 +24,13 @@ import type { BaseProps } from '../BaseProps';
|
|
|
24
24
|
* }
|
|
25
25
|
* }
|
|
26
26
|
* ```
|
|
27
|
+
*
|
|
28
|
+
* Custom variants render no background fill, no ink colour, and no built-in
|
|
29
|
+
* shape glyph — the theme must supply the fill and, if it passes an `icon`,
|
|
30
|
+
* a `color` for it to paint with. It should also supply a non-colour mark
|
|
31
|
+
* so the status is not distinguishable by colour alone (a WCAG 1.4.1
|
|
32
|
+
* failure): pass `icon`, or theme a glyph onto the dot via
|
|
33
|
+
* `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
|
|
27
34
|
*/
|
|
28
35
|
export interface AvatarStatusDotVariantMap {
|
|
29
36
|
success: true;
|
|
@@ -37,12 +44,14 @@ export type AvatarStatusDotVariant = keyof AvatarStatusDotVariantMap;
|
|
|
37
44
|
export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
|
|
38
45
|
ref?: React.Ref<HTMLDivElement>;
|
|
39
46
|
/**
|
|
40
|
-
* The semantic
|
|
41
|
-
* -
|
|
42
|
-
*
|
|
43
|
-
* - `
|
|
47
|
+
* The semantic variant of the dot. Each variant pairs a colour with a
|
|
48
|
+
* distinct built-in shape so status is never conveyed by colour alone
|
|
49
|
+
* (WCAG 2.1 SC 1.4.1):
|
|
50
|
+
* - `success` — filled green dot (e.g. online, accepted)
|
|
51
|
+
* - `neutral` — grey ring (e.g. away, offline, pending)
|
|
52
|
+
* - `error` — red dot with a minus bar (e.g. busy, do not disturb)
|
|
44
53
|
*
|
|
45
|
-
* Matches the `variant` convention from `StatusDot`.
|
|
54
|
+
* Matches the `variant` naming convention from `StatusDot`.
|
|
46
55
|
* @default 'success'
|
|
47
56
|
*/
|
|
48
57
|
variant?: AvatarStatusDotVariant;
|
|
@@ -50,6 +59,11 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
|
|
|
50
59
|
* Accessible label for the status dot.
|
|
51
60
|
* Describes the meaning of the indicator for screen readers
|
|
52
61
|
* (e.g. "Online", "Accepted", "John Doe is busy").
|
|
62
|
+
*
|
|
63
|
+
* Note: inside an Avatar the label is currently not announced — the
|
|
64
|
+
* Avatar root is `role="img"`, which prunes descendant semantics.
|
|
65
|
+
* Pass it anyway; composing status into the avatar's accessible name
|
|
66
|
+
* is a planned Avatar-level fix.
|
|
53
67
|
*/
|
|
54
68
|
label?: string;
|
|
55
69
|
/**
|
|
@@ -58,6 +72,14 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
|
|
|
58
72
|
* The icon is automatically sized to fit the dot and hidden
|
|
59
73
|
* at the smallest avatar sizes where there isn't enough room.
|
|
60
74
|
*
|
|
75
|
+
* A rendered icon replaces the variant's built-in shape glyph, so use a
|
|
76
|
+
* different icon per status — the same icon on every variant leaves the
|
|
77
|
+
* statuses distinguishable by colour alone (WCAG 1.4.1). At the smallest
|
|
78
|
+
* avatar sizes the built-in glyph still shows instead of the icon.
|
|
79
|
+
* Booleans and empty strings are ignored (safe for `cond && <Icon />`),
|
|
80
|
+
* but a component that renders nothing still counts as an icon and
|
|
81
|
+
* suppresses the glyph.
|
|
82
|
+
*
|
|
61
83
|
* @example
|
|
62
84
|
* ```
|
|
63
85
|
* <AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />
|
|
@@ -69,6 +91,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
|
|
|
69
91
|
* A status indicator dot that automatically scales to match the parent
|
|
70
92
|
* Avatar's size.
|
|
71
93
|
*
|
|
94
|
+
* Each variant pairs a colour with a distinct built-in shape (filled dot,
|
|
95
|
+
* ring, minus bar) so status stays distinguishable without colour
|
|
96
|
+
* perception (WCAG 2.1 SC 1.4.1). Themes can target the shape glyph via
|
|
97
|
+
* the `astryx-avatar-status-dot-glyph` class and its `data-shape`
|
|
98
|
+
* attribute.
|
|
99
|
+
*
|
|
72
100
|
* Must be used inside an Avatar's `status` prop so it can read
|
|
73
101
|
* the avatar size from context.
|
|
74
102
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyCtB;yBAlDe,eAAe"}
|
|
@@ -19,45 +19,57 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
21
21
|
import { AvatarSizeContext } from "./AvatarSizeContext.js";
|
|
22
|
-
import { mergeProps } from "../utils/index.js";
|
|
22
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
27
|
-
*
|
|
26
|
+
* Discrete size tier of the status dot, derived from the avatar size.
|
|
27
|
+
* Keys the built-in shape glyph's stroke weight — see `GLYPH_STROKE_WIDTH`.
|
|
28
|
+
*/
|
|
29
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
|
+
/**
|
|
31
|
+
* Resolves the status dot size, border width, icon size, and size tier
|
|
32
|
+
* based on the avatar size.
|
|
28
33
|
*
|
|
29
34
|
* Uses discrete size tiers rather than a continuous ratio so the dot
|
|
30
35
|
* looks intentional at every avatar size:
|
|
31
36
|
*
|
|
32
|
-
* | Avatar size | Dot | Border | Icon |
|
|
33
|
-
*
|
|
34
|
-
* | ≤ 36px | 10px | 1px | — |
|
|
35
|
-
* | 40–72px | 20px | 2px | 12px |
|
|
36
|
-
* | ≥ 96px | 32px | 4px | 18px |
|
|
37
|
+
* | Avatar size | Tier | Dot | Border | Icon | Field | Glyph stroke |
|
|
38
|
+
* |--------------|--------|------|--------|------|-------|--------------|
|
|
39
|
+
* | ≤ 36px | small | 10px | 1px | — | 8px | 1px |
|
|
40
|
+
* | 40–72px | medium | 20px | 2px | 12px | 16px | 1.5px |
|
|
41
|
+
* | ≥ 96px | large | 32px | 4px | 18px | 24px | 2px |
|
|
42
|
+
*
|
|
43
|
+
* "Field" is the dot's inner field — the dot minus both borders — that the
|
|
44
|
+
* shape glyph is drawn into; see `GLYPH_STROKE_WIDTH` for the stroke ladder.
|
|
37
45
|
*
|
|
38
46
|
* Icons are not rendered at the smallest tier — there isn't enough
|
|
39
|
-
* room for them to be legible.
|
|
47
|
+
* room for them to be legible. The built-in shape glyphs (see
|
|
48
|
+
* `glyphShapeMap`) do render there, so status stays distinguishable
|
|
49
|
+
* without colour at every size.
|
|
40
50
|
*/
|
|
41
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
42
51
|
function resolveStatusDotSize(avatarSize) {
|
|
43
52
|
if (avatarSize <= 36) {
|
|
44
53
|
return {
|
|
45
54
|
dotSize: 10,
|
|
46
55
|
borderWidth: 1,
|
|
47
|
-
iconSize: 0
|
|
56
|
+
iconSize: 0,
|
|
57
|
+
tier: 'small'
|
|
48
58
|
};
|
|
49
59
|
}
|
|
50
60
|
if (avatarSize <= 72) {
|
|
51
61
|
return {
|
|
52
62
|
dotSize: 20,
|
|
53
63
|
borderWidth: 2,
|
|
54
|
-
iconSize: 12
|
|
64
|
+
iconSize: 12,
|
|
65
|
+
tier: 'medium'
|
|
55
66
|
};
|
|
56
67
|
}
|
|
57
68
|
return {
|
|
58
69
|
dotSize: 32,
|
|
59
70
|
borderWidth: 4,
|
|
60
|
-
iconSize: 18
|
|
71
|
+
iconSize: 18,
|
|
72
|
+
tier: 'large'
|
|
61
73
|
};
|
|
62
74
|
}
|
|
63
75
|
|
|
@@ -73,6 +85,13 @@ function resolveStatusDotSize(avatarSize) {
|
|
|
73
85
|
* }
|
|
74
86
|
* }
|
|
75
87
|
* ```
|
|
88
|
+
*
|
|
89
|
+
* Custom variants render no background fill, no ink colour, and no built-in
|
|
90
|
+
* shape glyph — the theme must supply the fill and, if it passes an `icon`,
|
|
91
|
+
* a `color` for it to paint with. It should also supply a non-colour mark
|
|
92
|
+
* so the status is not distinguishable by colour alone (a WCAG 1.4.1
|
|
93
|
+
* failure): pass `icon`, or theme a glyph onto the dot via
|
|
94
|
+
* `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
|
|
76
95
|
*/
|
|
77
96
|
|
|
78
97
|
/**
|
|
@@ -92,21 +111,23 @@ const styles = {
|
|
|
92
111
|
},
|
|
93
112
|
success: {
|
|
94
113
|
kWkggS: "xdsz4j9",
|
|
114
|
+
kMwMTN: "xrkvqaz",
|
|
95
115
|
$$css: true
|
|
96
116
|
},
|
|
97
117
|
neutral: {
|
|
98
|
-
kWkggS: "
|
|
118
|
+
kWkggS: "x10xzikg",
|
|
119
|
+
kMwMTN: "xv1l7n4",
|
|
99
120
|
$$css: true
|
|
100
121
|
},
|
|
101
122
|
error: {
|
|
102
123
|
kWkggS: "x1pjz0fi",
|
|
124
|
+
kMwMTN: "xrkvqaz",
|
|
103
125
|
$$css: true
|
|
104
126
|
},
|
|
105
127
|
icon: {
|
|
106
128
|
k1xSpc: "x78zum5",
|
|
107
129
|
kGNEyG: "x6s0dn4",
|
|
108
130
|
kjj79g: "xl56j7k",
|
|
109
|
-
kMwMTN: "xrkvqaz",
|
|
110
131
|
kLWn49: "x14ju556",
|
|
111
132
|
$$css: true
|
|
112
133
|
}
|
|
@@ -137,10 +158,105 @@ const variantStyleMap = {
|
|
|
137
158
|
error: styles.error
|
|
138
159
|
};
|
|
139
160
|
|
|
161
|
+
/**
|
|
162
|
+
* Built-in shape glyph per variant, so each status differs by shape and not
|
|
163
|
+
* only by colour (WCAG 2.1 SC 1.4.1). The glyph is a stroked inline SVG
|
|
164
|
+
* painted in `currentColor`:
|
|
165
|
+
* - `ring` — a stroked circle on a surface plate; the dot reads as hollow
|
|
166
|
+
* (away/offline).
|
|
167
|
+
* - `minus` — a round-capped bar across the filled dot; the dot reads as
|
|
168
|
+
* "do not disturb" (busy).
|
|
169
|
+
*
|
|
170
|
+
* `success` stays the plain filled dot — filled, hollow, and barred are the
|
|
171
|
+
* three distinct fill topologies. Custom augmented variants have no entry
|
|
172
|
+
* and render no glyph; see the `AvatarStatusDotVariantMap` docs.
|
|
173
|
+
*/
|
|
174
|
+
|
|
175
|
+
const glyphShapeMap = {
|
|
176
|
+
neutral: 'ring',
|
|
177
|
+
error: 'minus'
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Glyph stroke weight per tier, in px of the dot's inner field.
|
|
182
|
+
*
|
|
183
|
+
* Roughly `field / 12`, floored at 1px so the smallest tier stays visible.
|
|
184
|
+
* That lands on the 1 / 1.5 / 2 ladder the rest of the system draws with —
|
|
185
|
+
* `Icon`'s default set strokes at 1.5 in a 24 viewBox, as does the
|
|
186
|
+
* `CheckboxInput` checkmark — rather than the 25% band a CSS box cutout
|
|
187
|
+
* produced, which was several times heavier than any other glyph we ship.
|
|
188
|
+
*/
|
|
189
|
+
const GLYPH_STROKE_WIDTH = {
|
|
190
|
+
small: 1,
|
|
191
|
+
medium: 1.5,
|
|
192
|
+
large: 2
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
/** Fraction of the inner field the minus bar spans, cap to cap. */
|
|
196
|
+
const MINUS_BAR_SPAN = 0.75;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* The built-in shape glyph, drawn as a stroked inline SVG in `currentColor`.
|
|
200
|
+
*
|
|
201
|
+
* Stroking (rather than a CSS box) is what buys sub-pixel control and round
|
|
202
|
+
* line caps, so the mark stays intentional at every tier — including the
|
|
203
|
+
* 10px dot, where a box cutout can only land on whole pixels.
|
|
204
|
+
*
|
|
205
|
+
* `viewBox` is one user unit per px of the inner field, so every value here
|
|
206
|
+
* is literal px.
|
|
207
|
+
*/
|
|
208
|
+
function StatusDotGlyph({
|
|
209
|
+
shape,
|
|
210
|
+
field,
|
|
211
|
+
stroke
|
|
212
|
+
}) {
|
|
213
|
+
const center = field / 2;
|
|
214
|
+
return /*#__PURE__*/_jsx("svg", {
|
|
215
|
+
"aria-hidden": "true",
|
|
216
|
+
viewBox: `0 0 ${field} ${field}`,
|
|
217
|
+
width: field,
|
|
218
|
+
height: field,
|
|
219
|
+
fill: "none",
|
|
220
|
+
...themeProps('avatar-status-dot-glyph', {
|
|
221
|
+
shape
|
|
222
|
+
}),
|
|
223
|
+
children: shape === 'ring' ?
|
|
224
|
+
/*#__PURE__*/
|
|
225
|
+
// Radius is to the stroke centreline, so the ring's outer edge lands
|
|
226
|
+
// exactly on the inner field and never clips against the border.
|
|
227
|
+
_jsx("circle", {
|
|
228
|
+
cx: center,
|
|
229
|
+
cy: center,
|
|
230
|
+
r: (field - stroke) / 2,
|
|
231
|
+
fill: "none",
|
|
232
|
+
stroke: "currentColor",
|
|
233
|
+
strokeWidth: stroke
|
|
234
|
+
}) :
|
|
235
|
+
/*#__PURE__*/
|
|
236
|
+
// Ends inset by half the stroke so the round caps land inside the
|
|
237
|
+
// span rather than overhanging it.
|
|
238
|
+
_jsx("line", {
|
|
239
|
+
x1: field * (1 - MINUS_BAR_SPAN) / 2 + stroke / 2,
|
|
240
|
+
y1: center,
|
|
241
|
+
x2: field * (1 + MINUS_BAR_SPAN) / 2 - stroke / 2,
|
|
242
|
+
y2: center,
|
|
243
|
+
stroke: "currentColor",
|
|
244
|
+
strokeWidth: stroke,
|
|
245
|
+
strokeLinecap: "round"
|
|
246
|
+
})
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
|
|
140
250
|
/**
|
|
141
251
|
* A status indicator dot that automatically scales to match the parent
|
|
142
252
|
* Avatar's size.
|
|
143
253
|
*
|
|
254
|
+
* Each variant pairs a colour with a distinct built-in shape (filled dot,
|
|
255
|
+
* ring, minus bar) so status stays distinguishable without colour
|
|
256
|
+
* perception (WCAG 2.1 SC 1.4.1). Themes can target the shape glyph via
|
|
257
|
+
* the `astryx-avatar-status-dot-glyph` class and its `data-shape`
|
|
258
|
+
* attribute.
|
|
259
|
+
*
|
|
144
260
|
* Must be used inside an Avatar's `status` prop so it can read
|
|
145
261
|
* the avatar size from context.
|
|
146
262
|
*
|
|
@@ -172,9 +288,14 @@ export function AvatarStatusDot({
|
|
|
172
288
|
const {
|
|
173
289
|
dotSize,
|
|
174
290
|
borderWidth,
|
|
175
|
-
iconSize
|
|
291
|
+
iconSize,
|
|
292
|
+
tier
|
|
176
293
|
} = resolveStatusDotSize(avatarSize);
|
|
177
|
-
|
|
294
|
+
const showsIcon = isRenderable(icon) && iconSize > 0;
|
|
295
|
+
// A rendered icon is itself a non-colour mark; overlaying both cutouts in
|
|
296
|
+
// the dot's small inner field would make each illegible.
|
|
297
|
+
const glyphShape = showsIcon ? undefined : glyphShapeMap[variant];
|
|
298
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
178
299
|
...props,
|
|
179
300
|
ref: ref,
|
|
180
301
|
...(label ? {
|
|
@@ -184,11 +305,15 @@ export function AvatarStatusDot({
|
|
|
184
305
|
...mergeProps(themeProps('avatar-status-dot', {
|
|
185
306
|
variant
|
|
186
307
|
}), stylex.props(styles.dot, variantStyleMap[variant], dynamicStyles.size(dotSize, borderWidth), xstyle), className, style),
|
|
187
|
-
children:
|
|
308
|
+
children: [showsIcon && /*#__PURE__*/_jsx("span", {
|
|
188
309
|
"aria-hidden": "true",
|
|
189
310
|
...stylex.props(styles.icon, dynamicStyles.iconSize(iconSize)),
|
|
190
311
|
children: icon
|
|
191
|
-
})
|
|
312
|
+
}), glyphShape && /*#__PURE__*/_jsx(StatusDotGlyph, {
|
|
313
|
+
shape: glyphShape,
|
|
314
|
+
field: dotSize - borderWidth * 2,
|
|
315
|
+
stroke: GLYPH_STROKE_WIDTH[tier]
|
|
316
|
+
})]
|
|
192
317
|
});
|
|
193
318
|
}
|
|
194
319
|
AvatarStatusDot.displayName = 'AvatarStatusDot';
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
*/
|
|
29
29
|
import { type ReactNode } from 'react';
|
|
30
30
|
import type { BaseProps } from '../BaseProps';
|
|
31
|
+
import type { Elevation } from '../utils/types';
|
|
31
32
|
/**
|
|
32
33
|
* Extensible status map for Banner.
|
|
33
34
|
*
|
|
@@ -125,6 +126,13 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
125
126
|
* @default 'card'
|
|
126
127
|
*/
|
|
127
128
|
container?: BannerContainer;
|
|
129
|
+
/**
|
|
130
|
+
* Resting elevation — the shadow depth the banner sits at. Use for a
|
|
131
|
+
* floating banner that hovers above content. `none` is the default inline
|
|
132
|
+
* banner.
|
|
133
|
+
* @default 'none'
|
|
134
|
+
*/
|
|
135
|
+
elevation?: Elevation;
|
|
128
136
|
/**
|
|
129
137
|
* Whether the content area (children) starts expanded.
|
|
130
138
|
* Only relevant when children are provided.
|
|
@@ -183,7 +191,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
183
191
|
* </Banner>
|
|
184
192
|
* ```
|
|
185
193
|
*/
|
|
186
|
-
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
194
|
+
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
187
195
|
export declare namespace Banner {
|
|
188
196
|
var displayName: string;
|
|
189
197
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAS9C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAmJb;yBApKe,MAAM"}
|