@astryxdesign/core 0.7.5-canary.c85932b → 0.7.5-canary.cdd75ae
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/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +4 -2
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +13 -23
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +10 -4
- package/dist/Dialog/Dialog.d.ts +4 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +12 -5
- package/dist/DropdownMenu/useMenuDrillIn.d.ts.map +1 -1
- package/dist/DropdownMenu/useMenuDrillIn.js +7 -5
- package/dist/EmptyState/EmptyState.d.ts +4 -2
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +6 -4
- package/dist/InputGroup/InputGroup.d.ts +1 -1
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +46 -36
- package/dist/InputGroup/InputGroupInternalContext.d.ts +4 -0
- package/dist/InputGroup/InputGroupInternalContext.d.ts.map +1 -0
- package/dist/InputGroup/InputGroupInternalContext.js +15 -0
- package/dist/Layer/layerAnimations.stylex.d.ts +9 -5
- package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
- package/dist/Layer/layerAnimations.stylex.js +23 -10
- package/dist/Layer/layerSlideRules.d.ts +62 -2
- package/dist/Layer/layerSlideRules.d.ts.map +1 -1
- package/dist/Layer/layerSlideRules.js +124 -3
- package/dist/Layer/layerStack.d.ts +12 -9
- package/dist/Layer/layerStack.d.ts.map +1 -1
- package/dist/Layer/layerStack.js +116 -53
- package/dist/Layer/preserveAnimations.d.ts +11 -0
- package/dist/Layer/preserveAnimations.d.ts.map +1 -0
- package/dist/Layer/preserveAnimations.js +245 -0
- package/dist/Layer/useLayer.d.ts +19 -2
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +408 -10
- package/dist/Layer/useLayerDismissal.d.ts +10 -7
- package/dist/Layer/useLayerDismissal.d.ts.map +1 -1
- package/dist/Layer/useLayerDismissal.js +8 -8
- package/dist/Layout/Layout.d.ts.map +1 -1
- package/dist/Layout/Layout.js +4 -0
- package/dist/Layout/LayoutContent.d.ts.map +1 -1
- package/dist/Layout/LayoutContent.js +2 -2
- package/dist/Layout/LayoutFooter.d.ts.map +1 -1
- package/dist/Layout/LayoutFooter.js +2 -1
- package/dist/Layout/LayoutHeader.d.ts.map +1 -1
- package/dist/Layout/LayoutHeader.js +2 -1
- package/dist/Layout/layoutEdges.stylex.d.ts +20 -0
- package/dist/Layout/layoutEdges.stylex.d.ts.map +1 -0
- package/dist/Layout/layoutEdges.stylex.js +28 -0
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +4 -1
- package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.js +1 -0
- package/dist/Markdown/Markdown.fr23.bench.js +3 -1
- package/dist/Markdown/Markdown.fr23.sampling.d.ts +16 -0
- package/dist/Markdown/Markdown.fr23.sampling.d.ts.map +1 -1
- package/dist/Markdown/Markdown.fr23.sampling.js +13 -4
- package/dist/Markdown/MarkdownTable.a11y.chromium.spec.js +1 -0
- package/dist/MobileNav/MobileNav.d.ts +2 -1
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +9 -5
- package/dist/MobileNav/MobileNavPinchZoom.a11y.chromium.spec.js +1 -0
- package/dist/MultiSelector/CreateRow.a11y.chromium.spec.js +1 -0
- package/dist/MultiSelector/MultiSelector.d.ts +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.js +1 -0
- package/dist/MultiSelector/MultiSelector.js +6 -3
- package/dist/MultiSelector/OptionActions.a11y.chromium.spec.js +1 -0
- package/dist/NumberInput/NumberInput.d.ts +1 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +5 -2
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +3 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +10 -2
- package/dist/ScrollableArea/ScrollableArea.d.ts.map +1 -1
- package/dist/ScrollableArea/ScrollableArea.js +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts +5 -5
- package/dist/SelectableCard/SelectableCard.js +5 -5
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +6 -3
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -5
- package/dist/Switch/switch.markers.stylex.d.ts +7 -2
- package/dist/Switch/switch.markers.stylex.d.ts.map +1 -1
- package/dist/Switch/switch.markers.stylex.js +8 -3
- package/dist/TextInput/TextInput.d.ts +1 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -3
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +10 -3
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +13 -14
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +9 -3
- package/dist/Typeahead/Typeahead.d.ts +1 -1
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +5 -2
- package/dist/astryx.css +18 -6
- package/dist/hooks/AnnounceRenderedText.d.ts +17 -0
- package/dist/hooks/AnnounceRenderedText.d.ts.map +1 -0
- package/dist/hooks/AnnounceRenderedText.js +32 -0
- package/dist/hooks/useAdaptivePresentation.d.ts +1 -1
- package/dist/hooks/useAdaptivePresentation.d.ts.map +1 -1
- package/dist/hooks/useAdaptivePresentation.js +9 -6
- package/dist/hooks/useAnnounceRenderedText.d.ts +19 -2
- package/dist/hooks/useAnnounceRenderedText.d.ts.map +1 -1
- package/dist/hooks/useAnnounceRenderedText.js +52 -11
- package/dist/hooks/useFocusTrap.d.ts +1 -1
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +44 -20
- package/dist/hooks/useMenuPress.d.ts +2 -1
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +46 -30
- package/dist/hooks/useScrollableArea.d.ts.map +1 -1
- package/dist/hooks/useScrollableArea.js +37 -5
- package/dist/reset.a11y.chromium.spec.js +1 -0
- package/dist/reset.until-found.a11y.browser.spec.js +1 -0
- package/dist/utils/edgeAutoscroll.d.ts +53 -0
- package/dist/utils/edgeAutoscroll.d.ts.map +1 -0
- package/dist/utils/edgeAutoscroll.js +81 -0
- package/dist/utils/touchPresentation.d.ts +48 -0
- package/dist/utils/touchPresentation.d.ts.map +1 -0
- package/dist/utils/touchPresentation.js +133 -0
- package/package.json +4 -4
- package/src/AlertDialog/__tests__/AlertDialog.a11y.chromium.spec.ts +1 -0
- package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +1 -0
- package/src/Avatar/Avatar.spec.md +253 -0
- package/src/Avatar/AvatarStatusDot.spec.md +96 -79
- package/src/Badge/Badge.spec.md +10 -10
- package/src/BottomSheet/BottomSheet.spec.md +21 -4
- package/src/BottomSheet/__tests__/BottomSheetDrag.a11y.chromium.spec.ts +1 -0
- package/src/BottomSheet/__tests__/BottomSheetFocusReturn.a11y.browser.spec.ts +1 -0
- package/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts +1 -0
- package/src/BottomSheet/__tests__/BottomSheetNativeModal.a11y.browser.spec.ts +1 -0
- package/src/BottomSheet/__tests__/BottomSheetPinchZoom.a11y.chromium.spec.ts +1 -0
- package/src/BottomSheet/__tests__/BottomSheetToastOutlet.a11y.chromium.spec.ts +1 -0
- package/src/Breadcrumbs/__tests__/Breadcrumbs.a11y.chromium.spec.ts +1 -0
- package/src/Button/Button.spec.md +320 -0
- package/src/Button/Button.tsx +5 -1
- package/src/Button/__tests__/Button.a11y.chromium.spec.ts +1 -0
- package/src/ButtonGroup/ButtonGroup.spec.md +218 -0
- package/src/Calendar/__tests__/Calendar.a11y.chromium.spec.ts +1 -0
- package/src/Carousel/__tests__/Carousel.a11y.chromium.spec.ts +1 -0
- package/src/Chat/ChatComposer.test.tsx +22 -0
- package/src/Chat/ChatComposer.tsx +17 -23
- package/src/Chat/__tests__/ChatLayoutScrollButton.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatLayoutScrollButtonSurface.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatMessageList.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatSendButton.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatSystemMessage.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/ChatTokenizedText.a11y.chromium.spec.ts +1 -0
- package/src/Chat/__tests__/useChatStreamScroll.a11y.chromium.spec.ts +1 -0
- package/src/CheckboxInput/__tests__/Checkbox.a11y.chromium.spec.ts +1 -0
- package/src/CheckboxList/__tests__/CheckboxList.a11y.chromium.spec.ts +1 -0
- package/src/CodeBlock/CodeBlock.spec.md +35 -23
- package/src/CodeBlock/__tests__/CodeBlockCopyClearance.a11y.chromium.spec.ts +1 -0
- package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts +1 -0
- package/src/CodeBlock/__tests__/DiffRowPaint.a11y.chromium.spec.ts +1 -0
- package/src/Collapsible/__tests__/Collapsible.a11y.chromium.spec.ts +1 -0
- package/src/Collapsible/__tests__/CollapsibleGroup.a11y.chromium.spec.ts +1 -0
- package/src/Collapsible/__tests__/CollapsibleGroupAccordion.a11y.chromium.spec.ts +1 -0
- package/src/CommandPalette/__tests__/CommandPalette.a11y.chromium.spec.ts +1 -0
- package/src/CommandPalette/__tests__/CommandPaletteFooter.a11y.chromium.spec.ts +1 -0
- package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +1 -0
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +1 -0
- package/src/ComplexSelector/__tests__/ComplexSelector.a11y.chromium.spec.ts +1 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +1 -1
- package/src/ContextMenu/ContextMenu.spec.md +19 -15
- package/src/ContextMenu/ContextMenu.test.tsx +2 -1
- package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +1 -0
- package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts +1 -0
- package/src/DateInput/DateInput.tsx +7 -3
- package/src/DateInput/__tests__/DateInputAudit.a11y.chromium.spec.ts +1 -0
- package/src/DateInput/__tests__/WheelPinchZoom.a11y.chromium.spec.ts +18 -5
- package/src/Dialog/Dialog.doc.mjs +201 -47
- package/src/Dialog/Dialog.tsx +31 -7
- package/src/Dialog/__tests__/Dialog.a11y.browser.spec.ts +1 -0
- package/src/Dialog/__tests__/Dialog.a11y.chromium.spec.ts +1 -0
- package/src/Dialog/__tests__/Dialog.reduced-motion.a11y.browser.spec.ts +191 -0
- package/src/Drawer/__tests__/DrawerAudit.a11y.chromium.spec.ts +1 -0
- package/src/Drawer/__tests__/DrawerHeaderAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/DropdownMenu.spec.md +12 -6
- package/src/DropdownMenu/DropdownMenu.test.tsx +2 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +57 -0
- package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuDrillIn.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuFocusReturn.a11y.browser.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuGroupAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuItemAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuRadioGroupAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuRadioItemAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/DropdownMenuSubMenuAudit.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/MenuHoverFocus.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/MenuPinchZoom.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/MenuPress.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/__tests__/SubMenuHeaderFooter.a11y.chromium.spec.ts +1 -0
- package/src/DropdownMenu/modules/useMenuPress.spec.md +62 -57
- package/src/DropdownMenu/useMenuDrillIn.tsx +7 -5
- package/src/EmptyState/EmptyState.announce.test.tsx +227 -0
- package/src/EmptyState/EmptyState.doc.mjs +1 -1
- package/src/EmptyState/EmptyState.spec.md +22 -14
- package/src/EmptyState/EmptyState.test.tsx +8 -8
- package/src/EmptyState/EmptyState.tsx +7 -5
- package/src/Field/__tests__/FieldLabelAudit.a11y.chromium.spec.ts +1 -0
- package/src/FieldStatus/__tests__/StatusMessage.a11y.chromium.spec.ts +1 -0
- package/src/IconButton/IconButton.spec.md +197 -0
- package/src/InputGroup/InputGroup.test.tsx +120 -0
- package/src/InputGroup/InputGroup.tsx +59 -52
- package/src/InputGroup/InputGroupInternalContext.ts +15 -0
- package/src/Item/__tests__/ItemSwipeActions.a11y.chromium.spec.ts +1 -0
- package/src/Item/__tests__/ItemSwipePinchZoom.a11y.chromium.spec.ts +1 -0
- package/src/Layer/__tests__/LayerReducedMotion.a11y.chromium.spec.ts +176 -0
- package/src/Layer/__tests__/TouchTrigger.a11y.chromium.spec.ts +1 -0
- package/src/Layer/layerAnimations.stylex.ts +22 -2
- package/src/Layer/layerSlideRules.ts +141 -8
- package/src/Layer/layerStack.ts +129 -62
- package/src/Layer/preserveAnimations.ts +304 -0
- package/src/Layer/useLayer.test.tsx +635 -0
- package/src/Layer/useLayer.tsx +485 -15
- package/src/Layer/useLayerDismissal.test.tsx +85 -2
- package/src/Layer/useLayerDismissal.ts +12 -9
- package/src/Layout/Layout.tsx +18 -0
- package/src/Layout/LayoutContent.tsx +5 -14
- package/src/Layout/LayoutFooter.tsx +2 -0
- package/src/Layout/LayoutHeader.tsx +2 -0
- package/src/Layout/__tests__/Layout.a11y.chromium.spec.ts +1 -0
- package/src/Layout/layoutEdges.stylex.ts +25 -0
- package/src/Lightbox/Lightbox.tsx +3 -0
- package/src/Lightbox/LightboxKeyboard.a11y.browser.spec.ts +1 -0
- package/src/Link/__tests__/Link.a11y.chromium.spec.ts +1 -0
- package/src/Link/__tests__/Link.navigation.a11y.chromium.spec.ts +1 -0
- package/src/Markdown/Markdown.fr23.bench.ts +3 -1
- package/src/Markdown/Markdown.fr23.perf.test.ts +45 -3
- package/src/Markdown/Markdown.fr23.sampling.ts +13 -4
- package/src/Markdown/MarkdownTable.a11y.chromium.spec.ts +1 -0
- package/src/Markdown/__tests__/MarkdownNesting.a11y.chromium.spec.ts +1 -0
- package/src/MobileNav/MobileNav.test.tsx +27 -10
- package/src/MobileNav/MobileNav.tsx +10 -3
- package/src/MobileNav/MobileNavPinchZoom.a11y.chromium.spec.ts +1 -0
- package/src/MobileNav/__tests__/MobileNavWidth.a11y.chromium.spec.ts +103 -0
- package/src/MoreMenu/MoreMenu.doc.mjs +2 -2
- package/src/MultiSelector/CreateRow.a11y.chromium.spec.ts +1 -0
- package/src/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.ts +1 -0
- package/src/MultiSelector/MultiSelector.test.tsx +3 -2
- package/src/MultiSelector/MultiSelector.tsx +6 -2
- package/src/MultiSelector/OptionActions.a11y.chromium.spec.ts +1 -0
- package/src/MultiSelector/__tests__/MultiSelector.a11y.chromium.spec.ts +1 -0
- package/src/NumberInput/NumberInput.tsx +5 -1
- package/src/NumberInput/__tests__/NumberInput.a11y.chromium.spec.ts +1 -0
- package/src/Popover/Popover.spec.md +19 -0
- package/src/Popover/Popover.test.tsx +197 -2
- package/src/Popover/__tests__/PopoverSecondDocument.a11y.chromium.spec.ts +205 -0
- package/src/Popover/usePopover.tsx +3 -1
- package/src/ProgressBar/__tests__/ProgressBar.a11y.chromium.spec.ts +1 -0
- package/src/RadioList/RadioList.test.tsx +34 -7
- package/src/RadioList/RadioListItem.press.source-build.test.mjs +80 -0
- package/src/RadioList/RadioListItem.tsx +26 -12
- package/src/RadioList/__tests__/RadioGroup.a11y.chromium.spec.ts +1 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts +1 -0
- package/src/ScrollableArea/ScrollableArea.spec.md +6 -5
- package/src/ScrollableArea/ScrollableArea.test.tsx +5 -0
- package/src/ScrollableArea/ScrollableArea.tsx +4 -0
- package/src/SelectableCard/SelectableCard.doc.mjs +6 -4
- package/src/SelectableCard/SelectableCard.tsx +5 -5
- package/src/Selector/Selector.spec.md +3 -2
- package/src/Selector/Selector.test.tsx +3 -2
- package/src/Selector/Selector.tsx +6 -2
- package/src/Selector/__tests__/EmptyStateAnnouncement.a11y.chromium.spec.ts +1 -0
- package/src/Selector/__tests__/Listbox.a11y.chromium.spec.ts +1 -0
- package/src/Selector/__tests__/Selector.a11y.chromium.spec.ts +1 -0
- package/src/Selector/__tests__/Selector.combobox.a11y.chromium.spec.ts +1 -0
- package/src/Skeleton/Skeleton.spec.md +99 -42
- package/src/Slider/__tests__/Slider.a11y.chromium.spec.ts +1 -0
- package/src/Spinner/Spinner.spec.md +231 -0
- package/src/StatusDot/StatusDot.spec.md +143 -51
- package/src/Switch/Switch.focusRing.source-build.test.mjs +81 -0
- package/src/Switch/Switch.tsx +11 -9
- package/src/Switch/__tests__/Switch.a11y.chromium.spec.ts +1 -0
- package/src/Switch/switch.markers.stylex.ts +7 -2
- package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts +1 -0
- package/src/Table/__tests__/Table.a11y.chromium.spec.ts +1 -0
- package/src/Table/__tests__/TableMinWidth.a11y.chromium.spec.ts +1 -0
- package/src/Table/__tests__/TableScroll.a11y.chromium.spec.ts +1 -0
- package/src/TextInput/TextInput.tsx +6 -2
- package/src/TextInput/__tests__/TextInput.a11y.chromium.spec.ts +1 -0
- package/src/TimeInput/TimeInput.tsx +10 -3
- package/src/ToggleButton/__tests__/ToggleButton.a11y.chromium.spec.ts +1 -0
- package/src/Token/Token.spec.md +1 -1
- package/src/Token/__tests__/TokenRemoveTarget.a11y.chromium.spec.ts +1 -0
- package/src/Tokenizer/Tokenizer.test.tsx +44 -8
- package/src/Tokenizer/Tokenizer.tsx +14 -17
- package/src/Tokenizer/__tests__/TokenizerEndLane.a11y.chromium.spec.ts +1 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.chromium.spec.ts +1 -0
- package/src/Tooltip/Tooltip.test.tsx +23 -0
- package/src/Tooltip/__tests__/Tooltip.a11y.chromium.spec.ts +1 -0
- package/src/Tooltip/__tests__/TooltipFocusReturn.a11y.chromium.spec.ts +1 -0
- package/src/Tooltip/__tests__/TooltipHoverBridge.a11y.chromium.spec.ts +1 -0
- package/src/Tooltip/__tests__/TooltipTallContent.a11y.browser.spec.ts +646 -0
- package/src/Tooltip/__tests__/TooltipTallContentTracking.a11y.browser.spec.ts +1162 -0
- package/src/Tooltip/useTooltip.tsx +7 -2
- package/src/TopNav/TopNav.spec.md +190 -0
- package/src/TopNav/TopNavHeading.spec.md +204 -0
- package/src/TopNav/TopNavItem.spec.md +181 -0
- package/src/TopNav/TopNavMegaMenu.spec.md +190 -0
- package/src/TopNav/TopNavMegaMenuFeaturedCard.spec.md +150 -0
- package/src/TopNav/TopNavMegaMenuItem.spec.md +155 -0
- package/src/TopNav/TopNavMenu.spec.md +195 -0
- package/src/TopNav/__tests__/TopNavMobileLongHeading.a11y.chromium.spec.ts +1 -0
- package/src/TreeList/__tests__/TreeList.a11y.chromium.spec.ts +1 -0
- package/src/TreeList/__tests__/TreeListRowNames.a11y.chromium.spec.ts +1 -0
- package/src/Typeahead/Typeahead.tsx +5 -1
- package/src/__tests__/CardPress.a11y.chromium.spec.ts +1 -0
- package/src/__tests__/DisabledTriggerFocus.a11y.chromium.spec.ts +1 -0
- package/src/__tests__/PressedState.a11y.chromium.spec.ts +1 -0
- package/src/hooks/AnnounceRenderedText.tsx +27 -0
- package/src/hooks/__tests__/MenuPressShadowRoot.a11y.chromium.spec.ts +1 -0
- package/src/hooks/useAdaptivePresentation.ts +14 -7
- package/src/hooks/useAnnounceRenderedText.adopters.test.tsx +204 -0
- package/src/hooks/useAnnounceRenderedText.ts +81 -11
- package/src/hooks/useFocusTrap.test.tsx +71 -2
- package/src/hooks/useFocusTrap.ts +46 -21
- package/src/hooks/useMenuPress.ts +60 -34
- package/src/hooks/useScrollableArea.test.tsx +159 -0
- package/src/hooks/useScrollableArea.ts +39 -5
- package/src/reset.a11y.chromium.spec.ts +1 -0
- package/src/reset.until-found.a11y.browser.spec.ts +1 -0
- package/src/serverSafeComponents.test.ts +10 -0
- package/src/theme/__tests__/SpacingRootFontSize.a11y.chromium.spec.ts +1 -0
- package/src/theme/derivedVarRegistry.test.ts +5 -0
- package/src/utils/edgeAutoscroll.test.ts +192 -0
- package/src/utils/edgeAutoscroll.ts +111 -0
- package/src/utils/touchPresentation.test.ts +323 -0
- package/src/utils/touchPresentation.ts +153 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA6B3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAgI9C,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AA2CH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAQjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAuJD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,eAAuB,EACvB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,KAAK,EACL,SAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CA+SzB;yBAxUe,MAAM"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
*
|
|
18
18
|
* Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
|
|
19
19
|
*/
|
|
20
|
-
import { useEffect, useRef, useState, useTransition } from 'react';
|
|
20
|
+
import { use, useEffect, useRef, useState, useTransition } from 'react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
@@ -30,6 +30,7 @@ import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
|
30
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
31
31
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
32
32
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
33
|
+
import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
|
|
33
34
|
import { groupStyles as inputGroupStyles } from "../InputGroup/groupStyles.js";
|
|
34
35
|
import { mergeProps } from "../utils/index.js";
|
|
35
36
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
@@ -377,7 +378,8 @@ export function Button({
|
|
|
377
378
|
// the consumer is deliberately showing it.
|
|
378
379
|
const delaySpinner = isPending || isInterruptible;
|
|
379
380
|
const groupDisabled = buttonGroup?.isDisabled ?? false;
|
|
380
|
-
const
|
|
381
|
+
const inputGroupState = use(InputGroupInternalContext);
|
|
382
|
+
const isTrueDisabled = isDisabled || groupDisabled || inputGroupState.isDisabled;
|
|
381
383
|
// Busy-only: the button can't fire again purely because an action is in
|
|
382
384
|
// flight, not because it's genuinely isDisabled/group-disabled. Per the API
|
|
383
385
|
// Conventions "Disabled vs Busy" rule, busy is visual-only (aria-busy +
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgC5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AAkND;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAmOpD;yBAnOe,YAAY"}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
* - /apps/storybook/stories/ChatComposer.stories.tsx
|
|
23
23
|
* - /packages/cli/assets/templates/blocks/components/ChatComposer/ (block examples)
|
|
24
24
|
*/
|
|
25
|
-
import React, { useState, useCallback,
|
|
25
|
+
import React, { useState, useCallback, useRef, useMemo } from 'react';
|
|
26
26
|
import * as stylex from '@stylexjs/stylex';
|
|
27
27
|
import "../theme/tokens.stylex.js";
|
|
28
28
|
import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, borderVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
@@ -33,7 +33,7 @@ import { ChatComposerContext } from "./ChatContext.js";
|
|
|
33
33
|
import { ChatSendButton } from "./ChatSendButton.js";
|
|
34
34
|
import { themeProps } from "../utils/themeProps.js";
|
|
35
35
|
import { useTranslator } from "../i18n/index.js";
|
|
36
|
-
import {
|
|
36
|
+
import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
|
|
37
37
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
38
38
|
import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
39
39
|
|
|
@@ -194,28 +194,18 @@ export function ChatComposer(props) {
|
|
|
194
194
|
}, []);
|
|
195
195
|
|
|
196
196
|
// The status bar mounts together with its message, and a live region born
|
|
197
|
-
// holding its text is not reliably announced, so the
|
|
198
|
-
// the
|
|
199
|
-
//
|
|
200
|
-
//
|
|
201
|
-
//
|
|
202
|
-
const
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
if (!statusMessage) {
|
|
208
|
-
announcedStatusRef.current = null;
|
|
209
|
-
return;
|
|
210
|
-
}
|
|
211
|
-
const occasion = `${statusType}\u0000${statusMessage}`;
|
|
212
|
-
if (announcedStatusRef.current === occasion) {
|
|
213
|
-
return;
|
|
214
|
-
}
|
|
215
|
-
announcedStatusRef.current = occasion;
|
|
216
|
-
announce(statusMessage, statusType === 'error' ? 'assertive' : 'polite');
|
|
217
|
-
}, [announce, statusType, statusMessage]);
|
|
197
|
+
// holding its text is not reliably announced, so the shared own-content
|
|
198
|
+
// module announces what the bar renders: errors assertively, warnings
|
|
199
|
+
// politely, once per occasion, silent for a status already shown when the
|
|
200
|
+
// page loads (spec:AST-086 FR2, FR5, FR6, FR11; react-component-runtime
|
|
201
|
+
// INV10). Changing the status type is a new occasion; clearing it re-arms.
|
|
202
|
+
const statusRef = useRef(null);
|
|
203
|
+
useAnnounceRenderedText(statusRef, Boolean(status?.message), status?.type ?? '', {
|
|
204
|
+
skipFirstRender: true,
|
|
205
|
+
politeness: status?.type === 'error' ? 'assertive' : 'polite'
|
|
206
|
+
});
|
|
218
207
|
const statusEl = status ? /*#__PURE__*/_jsxs("div", {
|
|
208
|
+
ref: statusRef,
|
|
219
209
|
...{
|
|
220
210
|
0: {
|
|
221
211
|
className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf xkvxy4d x6k0y1c"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/DateInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { use, useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -23,6 +23,7 @@ import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, i
|
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
25
25
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
26
|
+
import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
|
|
26
27
|
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
27
28
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
28
29
|
import { Spinner } from "../Spinner/index.js";
|
|
@@ -628,6 +629,8 @@ PointerDateField.displayName = 'PointerDateField';
|
|
|
628
629
|
* ```
|
|
629
630
|
*/
|
|
630
631
|
export function DateInput(props) {
|
|
632
|
+
const inputGroupState = use(InputGroupInternalContext);
|
|
633
|
+
const isDisabled = props.isDisabled || inputGroupState.isDisabled;
|
|
631
634
|
const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
|
|
632
635
|
useDevWarning('DateInput', '`nativePicker` is deprecated; use `presentation` instead (`touch` → `adaptive-native`, `always` → `native`, `never` → `adaptive-bottom-sheet`). `presentation` wins when both are set.', props.nativePicker !== undefined);
|
|
633
636
|
const surface = resolvePickerPresentation(effectivePickerPresentation(props.presentation, props.nativePicker), isTouch);
|
|
@@ -639,15 +642,18 @@ export function DateInput(props) {
|
|
|
639
642
|
switch (surface) {
|
|
640
643
|
case 'native':
|
|
641
644
|
return /*#__PURE__*/_jsx(NativeDateField, {
|
|
642
|
-
...rest
|
|
645
|
+
...rest,
|
|
646
|
+
isDisabled: isDisabled
|
|
643
647
|
});
|
|
644
648
|
case 'sheet':
|
|
645
649
|
return /*#__PURE__*/_jsx(TouchDateField, {
|
|
646
|
-
...rest
|
|
650
|
+
...rest,
|
|
651
|
+
isDisabled: isDisabled
|
|
647
652
|
});
|
|
648
653
|
case 'desktop':
|
|
649
654
|
return /*#__PURE__*/_jsx(PointerDateField, {
|
|
650
|
-
...rest
|
|
655
|
+
...rest,
|
|
656
|
+
isDisabled: isDisabled
|
|
651
657
|
});
|
|
652
658
|
}
|
|
653
659
|
}
|
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
* while preserving explicit prop/theme padding overrides, and fade in without
|
|
13
13
|
* the centered-dialog translate/scale motion.
|
|
14
14
|
*
|
|
15
|
+
* Under reduced motion the entrance never travels or scales
|
|
16
|
+
* (docs/design/reduced-motion.md): on a touch screen the dialog fades in
|
|
17
|
+
* where it lands, in 200 ms or less; with a mouse it appears at once.
|
|
18
|
+
*
|
|
15
19
|
* Initial focus and the focus returned on close follow the last input
|
|
16
20
|
* (docs/architecture/interaction-modality.md INV1): the shared focus indicator
|
|
17
21
|
* is hidden after a pointer press and shown after a key press.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAqKX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA+Vb;yBA/We,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
* while preserving explicit prop/theme padding overrides, and fade in without
|
|
17
17
|
* the centered-dialog translate/scale motion.
|
|
18
18
|
*
|
|
19
|
+
* Under reduced motion the entrance never travels or scales
|
|
20
|
+
* (docs/design/reduced-motion.md): on a touch screen the dialog fades in
|
|
21
|
+
* where it lands, in 200 ms or less; with a mouse it appears at once.
|
|
22
|
+
*
|
|
19
23
|
* Initial focus and the focus returned on close follow the last input
|
|
20
24
|
* (docs/architecture/interaction-modality.md INV1): the shared focus indicator
|
|
21
25
|
* is hidden after a pointer press and shown after a key press.
|
|
@@ -133,15 +137,15 @@ const styles = {
|
|
|
133
137
|
kZKoxP: "xg7h5cd",
|
|
134
138
|
kZeWKH: "xish69e",
|
|
135
139
|
kSiTet: "xg01cxk",
|
|
136
|
-
k44tkh: "xqgcaz",
|
|
137
|
-
kyAemX: "x128ha8g",
|
|
140
|
+
k44tkh: "xqgcaz x1jq6yc9",
|
|
141
|
+
kyAemX: "x128ha8g xr5m3f0",
|
|
138
142
|
kWV6AL: "xskzprw",
|
|
139
143
|
$$css: true
|
|
140
144
|
},
|
|
141
145
|
open: {
|
|
142
146
|
k1xSpc: "x78zum5",
|
|
143
147
|
kSiTet: "x1hc1fzr",
|
|
144
|
-
kKVMdj: "x1ewfqum
|
|
148
|
+
kKVMdj: "x1ewfqum x6mpr79 xtuz6mp",
|
|
145
149
|
$$css: true
|
|
146
150
|
},
|
|
147
151
|
backdrop: {
|
|
@@ -160,7 +164,7 @@ const styles = {
|
|
|
160
164
|
$$css: true
|
|
161
165
|
},
|
|
162
166
|
fullscreenOpen: {
|
|
163
|
-
kKVMdj: "xqcmdr3
|
|
167
|
+
kKVMdj: "xqcmdr3 x6mpr79 xtuz6mp",
|
|
164
168
|
$$css: true
|
|
165
169
|
},
|
|
166
170
|
fullscreenSafeArea: {
|
|
@@ -441,7 +445,10 @@ export function Dialog({
|
|
|
441
445
|
escapeBehavior: allowEscape ? 'close' : 'block',
|
|
442
446
|
onDismiss: () => {
|
|
443
447
|
onOpenChange(false);
|
|
444
|
-
}
|
|
448
|
+
},
|
|
449
|
+
// The dialog's document is this layer's: rendered into an iframe or a
|
|
450
|
+
// Picture-in-Picture window, it ranks with the layers opened inside it.
|
|
451
|
+
getContainer: () => dialogRef.current
|
|
445
452
|
});
|
|
446
453
|
|
|
447
454
|
// Dev-time guardrail: an open modal should always have an accessible name.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuDrillIn.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuDrillIn.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"useMenuDrillIn.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuDrillIn.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AA8B/D,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,OAAO,EAAE,mBAAmB,CAAC;IAC7B,2DAA2D;IAC3D,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;CAChD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,oBAAoB,CAyDpE"}
|
|
@@ -21,18 +21,19 @@
|
|
|
21
21
|
*/
|
|
22
22
|
import { useCallback, useMemo, useState } from 'react';
|
|
23
23
|
import * as stylex from '@stylexjs/stylex';
|
|
24
|
-
import {
|
|
24
|
+
import { useCompactDefinition } from "../utils/touchPresentation.js";
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
|
-
* The same
|
|
27
|
+
* The same compact-touch condition the root presentation uses to decide the
|
|
28
|
+
* bottom sheet (the active theme's, spec:AST-012 FR9), so
|
|
28
29
|
* one component carries one meaning of "adaptive". A bare `(pointer: coarse)`
|
|
29
30
|
* would disagree with it on a large touch tablet: the menu would stay an
|
|
30
31
|
* anchored popover while its sub-menus replaced rows in place, a combination
|
|
31
32
|
* nobody designed.
|
|
32
33
|
*/
|
|
33
34
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
|
-
function matchesCompactTouch() {
|
|
35
|
-
return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(
|
|
35
|
+
function matchesCompactTouch(query) {
|
|
36
|
+
return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(query).matches;
|
|
36
37
|
}
|
|
37
38
|
/**
|
|
38
39
|
* The drill-in view stack for a menu root.
|
|
@@ -41,6 +42,7 @@ function matchesCompactTouch() {
|
|
|
41
42
|
* opens and the stack empties when it closes.
|
|
42
43
|
*/
|
|
43
44
|
export function useMenuDrillIn(isOpen) {
|
|
45
|
+
const compactTouchQuery = useCompactDefinition().coarsePointerQuery;
|
|
44
46
|
const [isCompactTouch, setIsCompactTouch] = useState(false);
|
|
45
47
|
const [viewStack, setViewStack] = useState([]);
|
|
46
48
|
const [host, setHost] = useState(null);
|
|
@@ -52,7 +54,7 @@ export function useMenuDrillIn(isOpen) {
|
|
|
52
54
|
if (wasOpen !== isOpen) {
|
|
53
55
|
setWasOpen(isOpen);
|
|
54
56
|
if (isOpen) {
|
|
55
|
-
setIsCompactTouch(matchesCompactTouch());
|
|
57
|
+
setIsCompactTouch(matchesCompactTouch(compactTouchQuery));
|
|
56
58
|
} else if (viewStack.length > 0) {
|
|
57
59
|
setViewStack([]);
|
|
58
60
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file EmptyState.tsx
|
|
3
|
-
* @input Uses React, HTMLAttributes
|
|
3
|
+
* @input Uses React, HTMLAttributes, AnnounceRenderedText
|
|
4
4
|
* @output Exports EmptyState component, EmptyStateProps type
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -53,7 +53,9 @@ export interface EmptyStateProps extends BaseProps<HTMLDivElement> {
|
|
|
53
53
|
* An empty state placeholder for content areas with no data.
|
|
54
54
|
* Displays an icon or illustration, title, optional description, and action buttons.
|
|
55
55
|
*
|
|
56
|
-
*
|
|
56
|
+
* Not a live region. Its title and description are announced once when they
|
|
57
|
+
* appear or change after the page loaded, never when the page first renders
|
|
58
|
+
* with them (`spec:AST-086` FR2).
|
|
57
59
|
* Styles use Astryx theme tokens via StyleX. Wrap your app in <Theme> to apply a theme.
|
|
58
60
|
*
|
|
59
61
|
* @example
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAmDjB;yBA/De,UAAU"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file EmptyState.tsx
|
|
5
|
-
* @input Uses React, HTMLAttributes
|
|
5
|
+
* @input Uses React, HTMLAttributes, AnnounceRenderedText
|
|
6
6
|
* @output Exports EmptyState component, EmptyStateProps type
|
|
7
7
|
* @position Core implementation; consumed by index.ts
|
|
8
8
|
*
|
|
@@ -18,6 +18,7 @@ import { createElement } from 'react';
|
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
21
|
+
import { AnnounceRenderedText } from "../hooks/AnnounceRenderedText.js";
|
|
21
22
|
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
22
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
24
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -44,7 +45,9 @@ const styles = {
|
|
|
44
45
|
* An empty state placeholder for content areas with no data.
|
|
45
46
|
* Displays an icon or illustration, title, optional description, and action buttons.
|
|
46
47
|
*
|
|
47
|
-
*
|
|
48
|
+
* Not a live region. Its title and description are announced once when they
|
|
49
|
+
* appear or change after the page loaded, never when the page first renders
|
|
50
|
+
* with them (`spec:AST-086` FR2).
|
|
48
51
|
* Styles use Astryx theme tokens via StyleX. Wrap your app in <Theme> to apply a theme.
|
|
49
52
|
*
|
|
50
53
|
* @example
|
|
@@ -78,14 +81,13 @@ export function EmptyState({
|
|
|
78
81
|
return /*#__PURE__*/_jsxs("div", {
|
|
79
82
|
ref: ref,
|
|
80
83
|
...props,
|
|
81
|
-
role: "status",
|
|
82
84
|
...mergeProps(themeProps('empty-state', {
|
|
83
85
|
variant: isCompact ? 'compact' : null
|
|
84
86
|
}), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
|
|
85
87
|
children: [isRenderable(icon) && /*#__PURE__*/_jsx("div", {
|
|
86
88
|
"aria-hidden": "true",
|
|
87
89
|
children: icon
|
|
88
|
-
}), /*#__PURE__*/_jsxs(
|
|
90
|
+
}), /*#__PURE__*/_jsxs(AnnounceRenderedText, {
|
|
89
91
|
...{
|
|
90
92
|
className: "x78zum5 xdt5ytf x6s0dn4 xxc7z9f"
|
|
91
93
|
},
|
|
@@ -83,7 +83,7 @@ export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'childr
|
|
|
83
83
|
* </InputGroup>
|
|
84
84
|
* ```
|
|
85
85
|
*/
|
|
86
|
-
export declare function InputGroup({ children, label, isLabelHidden, description, isDisabled, isOptional, isRequired, size: sizeProp, status, labelTooltip, xstyle, className, style, ref, 'data-testid': testId, ...rest }: InputGroupProps): import("react").JSX.Element;
|
|
86
|
+
export declare function InputGroup({ children, label, isLabelHidden, description, isDisabled: isDisabledProp, isOptional, isRequired, size: sizeProp, status, labelTooltip, xstyle, className, style, ref, 'data-testid': testId, ...rest }: InputGroupProps): import("react").JSX.Element;
|
|
87
87
|
export declare namespace InputGroup {
|
|
88
88
|
var displayName: string;
|
|
89
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BA8EjB;yBA/Fe,UAAU"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* - /apps/storybook/stories/InputGroup.stories.tsx
|
|
19
19
|
* - /packages/cli/assets/templates/blocks/components/InputGroup/
|
|
20
20
|
*/
|
|
21
|
-
import { useId, useMemo } from 'react';
|
|
21
|
+
import { use, useId, useMemo } from 'react';
|
|
22
22
|
import * as stylex from '@stylexjs/stylex';
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
24
|
import { sizeVars } from "../theme/tokens.stylex.js";
|
|
@@ -26,6 +26,7 @@ import { Field } from "../Field/index.js";
|
|
|
26
26
|
import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
28
28
|
import { InputGroupContext } from "./InputGroupContext.js";
|
|
29
|
+
import { InputGroupInternalContext } from "./InputGroupInternalContext.js";
|
|
29
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
31
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
31
32
|
const styles = {
|
|
@@ -72,7 +73,7 @@ export function InputGroup({
|
|
|
72
73
|
label,
|
|
73
74
|
isLabelHidden = false,
|
|
74
75
|
description,
|
|
75
|
-
isDisabled = false,
|
|
76
|
+
isDisabled: isDisabledProp = false,
|
|
76
77
|
isOptional = false,
|
|
77
78
|
isRequired = false,
|
|
78
79
|
size: sizeProp,
|
|
@@ -85,6 +86,8 @@ export function InputGroup({
|
|
|
85
86
|
'data-testid': testId,
|
|
86
87
|
...rest
|
|
87
88
|
}) {
|
|
89
|
+
const parentGroup = use(InputGroupInternalContext);
|
|
90
|
+
const isDisabled = isDisabledProp || parentGroup.isDisabled;
|
|
88
91
|
const size = useSize(sizeProp, 'md');
|
|
89
92
|
const inputId = useId();
|
|
90
93
|
const labelID = useId();
|
|
@@ -96,40 +99,47 @@ export function InputGroup({
|
|
|
96
99
|
labelID,
|
|
97
100
|
describedByIDs
|
|
98
101
|
}), [labelID, describedByIDs]);
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
102
|
+
const internalContextValue = useMemo(() => ({
|
|
103
|
+
isDisabled
|
|
104
|
+
}), [isDisabled]);
|
|
105
|
+
return /*#__PURE__*/_jsx(InputGroupInternalContext, {
|
|
106
|
+
value: internalContextValue,
|
|
107
|
+
children: /*#__PURE__*/_jsx(InputGroupContext, {
|
|
108
|
+
value: contextValue,
|
|
109
|
+
children: /*#__PURE__*/_jsx(SizeProvider, {
|
|
110
|
+
value: size,
|
|
111
|
+
children: /*#__PURE__*/_jsx(Field, {
|
|
112
|
+
label: label,
|
|
113
|
+
isLabelHidden: isLabelHidden,
|
|
114
|
+
description: description,
|
|
115
|
+
inputID: inputId,
|
|
116
|
+
labelID: labelID,
|
|
117
|
+
descriptionID: description ? descriptionID : undefined,
|
|
118
|
+
isGroupLabel: true,
|
|
119
|
+
isOptional: isOptional,
|
|
120
|
+
isRequired: isRequired,
|
|
121
|
+
isDisabled: isDisabled,
|
|
122
|
+
status: status ? {
|
|
123
|
+
type: status.type,
|
|
124
|
+
message: status.message,
|
|
125
|
+
messageID: status.message ? statusMessageId : undefined
|
|
126
|
+
} : undefined,
|
|
127
|
+
statusVariant: "detached",
|
|
128
|
+
labelTooltip: labelTooltip,
|
|
129
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
130
|
+
ref: ref,
|
|
131
|
+
"data-testid": testId,
|
|
132
|
+
...rest,
|
|
133
|
+
role: "group",
|
|
134
|
+
"aria-disabled": isDisabled || undefined,
|
|
135
|
+
"aria-labelledby": labelID,
|
|
136
|
+
"aria-describedby": describedByIDs,
|
|
137
|
+
...mergeProps(themeProps('input-group', {
|
|
138
|
+
size,
|
|
139
|
+
status: status?.type ?? null
|
|
140
|
+
}), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
|
|
141
|
+
children: children
|
|
142
|
+
})
|
|
133
143
|
})
|
|
134
144
|
})
|
|
135
145
|
})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputGroupInternalContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupInternalContext.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,yBAAyB;;EAAqC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file InputGroupInternalContext.ts
|
|
7
|
+
* @input Layer-scoped React context
|
|
8
|
+
* @output Package-private InputGroup state context
|
|
9
|
+
* @position Internal group state; not re-exported by index.ts
|
|
10
|
+
*/
|
|
11
|
+
import { createLayerScopedContext as createContext } from "../Layer/layerScopedContext.js";
|
|
12
|
+
export const InputGroupInternalContext = createContext({
|
|
13
|
+
isDisabled: false
|
|
14
|
+
});
|
|
15
|
+
InputGroupInternalContext.displayName = 'InputGroupInternalContext';
|
|
@@ -32,29 +32,33 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
32
32
|
*
|
|
33
33
|
* Each entry disables its keyframe animation under
|
|
34
34
|
* `prefers-reduced-motion: reduce` so the layer appears instantly instead of
|
|
35
|
-
* translating/scaling in (infra-6).
|
|
35
|
+
* translating/scaling in (infra-6). Under a finger (the primary pointer is
|
|
36
|
+
* coarse) it fades in instead, opacity only and in 200 ms or less: on a touch
|
|
37
|
+
* screen Reduce Motion replaces motion with a cross-fade rather than a jump
|
|
38
|
+
* (design:reduced-motion DR2, DR3), as iOS does for its menus, popovers and
|
|
39
|
+
* tips.
|
|
36
40
|
*/
|
|
37
41
|
export declare const layerAnimations: Readonly<{
|
|
38
42
|
readonly below: Readonly<{
|
|
39
|
-
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration",
|
|
43
|
+
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
|
|
40
44
|
readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
41
45
|
readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
|
|
42
46
|
readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
|
|
43
47
|
}>;
|
|
44
48
|
readonly above: Readonly<{
|
|
45
|
-
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration",
|
|
49
|
+
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
|
|
46
50
|
readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
47
51
|
readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
|
|
48
52
|
readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
|
|
49
53
|
}>;
|
|
50
54
|
readonly end: Readonly<{
|
|
51
|
-
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration",
|
|
55
|
+
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
|
|
52
56
|
readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
53
57
|
readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
|
|
54
58
|
readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
|
|
55
59
|
}>;
|
|
56
60
|
readonly start: Readonly<{
|
|
57
|
-
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration",
|
|
61
|
+
readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
|
|
58
62
|
readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
59
63
|
readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
|
|
60
64
|
readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA0E3C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EAmC1B,CAAC"}
|