@dxos/react-ui 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5
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/lib/browser/chunk-OCVRIJCH.mjs +848 -0
- package/dist/lib/browser/chunk-OCVRIJCH.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +4115 -60
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +112 -60
- package/dist/lib/browser/testing/index.mjs.map +4 -4
- package/dist/lib/node-esm/chunk-QUD5P3RU.mjs +850 -0
- package/dist/lib/node-esm/chunk-QUD5P3RU.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +4115 -60
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/testing/index.mjs +112 -60
- package/dist/lib/node-esm/testing/index.mjs.map +4 -4
- package/dist/types/src/components/Avatars/Avatar.d.ts +1 -1
- package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts +5 -31
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts +5 -11
- package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts.map +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts +8 -20
- package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
- package/dist/types/src/components/{Buttons → Button}/Button.d.ts +4 -4
- package/dist/types/src/components/Button/Button.d.ts.map +1 -0
- package/dist/types/src/components/Button/Button.stories.d.ts +17 -0
- package/dist/types/src/components/Button/Button.stories.d.ts.map +1 -0
- package/dist/types/src/components/{Buttons → Button}/IconButton.d.ts +3 -3
- package/dist/types/src/components/Button/IconButton.d.ts.map +1 -0
- package/dist/types/src/components/Button/IconButton.stories.d.ts +16 -0
- package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -0
- package/dist/types/src/components/{Buttons → Button}/Toggle.d.ts +2 -2
- package/dist/types/src/components/Button/Toggle.d.ts.map +1 -0
- package/dist/types/src/components/Button/Toggle.stories.d.ts +16 -0
- package/dist/types/src/components/Button/Toggle.stories.d.ts.map +1 -0
- package/dist/types/src/components/Button/ToggleGroup.d.ts +27 -0
- package/dist/types/src/components/Button/ToggleGroup.d.ts.map +1 -0
- package/dist/types/src/components/Button/ToggleGroup.stories.d.ts +27 -0
- package/dist/types/src/components/Button/ToggleGroup.stories.d.ts.map +1 -0
- package/dist/types/src/components/Button/index.d.ts.map +1 -0
- package/dist/types/src/components/Card/Card.d.ts +120 -0
- package/dist/types/src/components/Card/Card.d.ts.map +1 -0
- package/dist/types/src/components/Card/Card.stories.d.ts +21 -0
- package/dist/types/src/components/Card/Card.stories.d.ts.map +1 -0
- package/dist/types/src/components/Card/index.d.ts +2 -0
- package/dist/types/src/components/Card/index.d.ts.map +1 -0
- package/dist/types/src/components/Clipboard/CopyButton.d.ts +1 -1
- package/dist/types/src/components/Clipboard/CopyButton.d.ts.map +1 -1
- package/dist/types/src/components/Clipboard/index.d.ts +10 -1
- package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
- package/dist/types/src/components/DensityProvider/DensityProvider.d.ts +1 -1
- package/dist/types/src/components/DensityProvider/DensityProvider.d.ts.map +1 -1
- package/dist/types/src/components/Dialog/AlertDialog.d.ts +51 -0
- package/dist/types/src/components/Dialog/AlertDialog.d.ts.map +1 -0
- package/dist/types/src/components/Dialog/AlertDialog.stories.d.ts +11 -0
- package/dist/types/src/components/Dialog/AlertDialog.stories.d.ts.map +1 -0
- package/dist/types/src/components/Dialog/Dialog.d.ts +64 -0
- package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/types/src/components/Dialog/Dialog.stories.d.ts +25 -0
- package/dist/types/src/components/Dialog/Dialog.stories.d.ts.map +1 -0
- package/dist/types/src/components/Dialog/index.d.ts.map +1 -0
- package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts +1 -1
- package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts.map +1 -1
- package/dist/types/src/components/ErrorFallback/ErrorFallback.d.ts +11 -0
- package/dist/types/src/components/ErrorFallback/ErrorFallback.d.ts.map +1 -0
- package/dist/types/src/components/ErrorFallback/ErrorFallback.stories.d.ts +7 -0
- package/dist/types/src/components/ErrorFallback/ErrorFallback.stories.d.ts.map +1 -0
- package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts +19 -0
- package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts.map +1 -0
- package/dist/types/src/components/ErrorFallback/ThrowError.d.ts +9 -0
- package/dist/types/src/components/ErrorFallback/ThrowError.d.ts.map +1 -0
- package/dist/types/src/components/ErrorFallback/index.d.ts +5 -0
- package/dist/types/src/components/ErrorFallback/index.d.ts.map +1 -0
- package/dist/types/src/components/Focus/Focus.d.ts +36 -0
- package/dist/types/src/components/Focus/Focus.d.ts.map +1 -0
- package/dist/types/src/components/Focus/Focus.stories.d.ts +9 -0
- package/dist/types/src/components/Focus/Focus.stories.d.ts.map +1 -0
- package/dist/types/src/components/Focus/index.d.ts +2 -0
- package/dist/types/src/components/Focus/index.d.ts.map +1 -0
- package/dist/types/src/components/Icon/Icon.d.ts +5 -2
- package/dist/types/src/components/Icon/Icon.d.ts.map +1 -1
- package/dist/types/src/components/Icon/Icon.stories.d.ts +25 -0
- package/dist/types/src/components/Icon/Icon.stories.d.ts.map +1 -0
- package/dist/types/src/components/Image/Image.d.ts +14 -0
- package/dist/types/src/components/Image/Image.d.ts.map +1 -0
- package/dist/types/src/components/Image/Image.stories.d.ts +33 -0
- package/dist/types/src/components/Image/Image.stories.d.ts.map +1 -0
- package/dist/types/src/components/Image/index.d.ts +2 -0
- package/dist/types/src/components/Image/index.d.ts.map +1 -0
- package/dist/types/src/components/Input/Input.d.ts +7 -9
- package/dist/types/src/components/Input/Input.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.stories.d.ts +16 -17
- package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
- package/dist/types/src/components/Link/Link.stories.d.ts +8 -8
- package/dist/types/src/components/Link/Link.stories.d.ts.map +1 -1
- package/dist/types/src/components/{Lists → List}/List.d.ts +6 -4
- package/dist/types/src/components/List/List.d.ts.map +1 -0
- package/dist/types/src/components/List/List.stories.d.ts +16 -0
- package/dist/types/src/components/List/List.stories.d.ts.map +1 -0
- package/dist/types/src/components/List/ListDropIndicator.d.ts.map +1 -0
- package/dist/types/src/components/List/Tree.d.ts.map +1 -0
- package/dist/types/src/components/List/Tree.stories.d.ts +15 -0
- package/dist/types/src/components/List/Tree.stories.d.ts.map +1 -0
- package/dist/types/src/components/List/TreeDropIndicator.d.ts.map +1 -0
- package/dist/types/src/components/{Lists → List}/Treegrid.d.ts +5 -9
- package/dist/types/src/components/List/Treegrid.d.ts.map +1 -0
- package/dist/types/src/components/List/Treegrid.stories.d.ts +12 -0
- package/dist/types/src/components/List/Treegrid.stories.d.ts.map +1 -0
- package/dist/types/src/components/List/index.d.ts.map +1 -0
- package/dist/types/src/components/Main/Main.d.ts +17 -27
- package/dist/types/src/components/Main/Main.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.stories.d.ts +6 -10
- package/dist/types/src/components/Main/Main.stories.d.ts.map +1 -1
- package/dist/types/src/components/{Menus → Menu}/ContextMenu.d.ts +6 -6
- package/dist/types/src/components/Menu/ContextMenu.d.ts.map +1 -0
- package/dist/types/src/components/Menu/ContextMenu.stories.d.ts +12 -0
- package/dist/types/src/components/Menu/ContextMenu.stories.d.ts.map +1 -0
- package/dist/types/src/components/Menu/DropdownMenu.d.ts +113 -0
- package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -0
- package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts +28 -0
- package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -0
- package/dist/types/src/components/Menu/index.d.ts.map +1 -0
- package/dist/types/src/components/Message/Message.d.ts +1 -1
- package/dist/types/src/components/Message/Message.d.ts.map +1 -1
- package/dist/types/src/components/Message/Message.stories.d.ts +12 -22
- package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
- package/dist/types/src/components/Popover/Popover.d.ts +34 -25
- package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
- package/dist/types/src/components/Popover/Popover.stories.d.ts +6 -34
- package/dist/types/src/components/Popover/Popover.stories.d.ts.map +1 -1
- package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +27 -27
- package/dist/types/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +50 -27
- package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts.map +1 -1
- package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +60 -0
- package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -0
- package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts +23 -0
- package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts.map +1 -0
- package/dist/types/src/components/ScrollContainer/index.d.ts +2 -0
- package/dist/types/src/components/ScrollContainer/index.d.ts.map +1 -0
- package/dist/types/src/components/Select/Select.d.ts +10 -10
- package/dist/types/src/components/Select/Select.d.ts.map +1 -1
- package/dist/types/src/components/Select/Select.stories.d.ts +6 -11
- package/dist/types/src/components/Select/Select.stories.d.ts.map +1 -1
- package/dist/types/src/components/Separator/Separator.d.ts +4 -4
- package/dist/types/src/components/Separator/Separator.d.ts.map +1 -1
- package/dist/types/src/components/Skeleton/Skeleton.d.ts +12 -0
- package/dist/types/src/components/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/types/src/components/Skeleton/Skeleton.stories.d.ts +17 -0
- package/dist/types/src/components/Skeleton/Skeleton.stories.d.ts.map +1 -0
- package/dist/types/src/components/Skeleton/index.d.ts +2 -0
- package/dist/types/src/components/Skeleton/index.d.ts.map +1 -0
- package/dist/types/src/components/Splitter/Splitter.d.ts +34 -0
- package/dist/types/src/components/Splitter/Splitter.d.ts.map +1 -0
- package/dist/types/src/components/Splitter/Splitter.stories.d.ts +7 -0
- package/dist/types/src/components/Splitter/Splitter.stories.d.ts.map +1 -0
- package/dist/types/src/components/Splitter/index.d.ts +2 -0
- package/dist/types/src/components/Splitter/index.d.ts.map +1 -0
- package/dist/types/src/components/Status/Status.d.ts +3 -4
- package/dist/types/src/components/Status/Status.d.ts.map +1 -1
- package/dist/types/src/components/Status/Status.stories.d.ts +6 -10
- package/dist/types/src/components/Status/Status.stories.d.ts.map +1 -1
- package/dist/types/src/components/Tag/Tag.d.ts +1 -1
- package/dist/types/src/components/Tag/Tag.d.ts.map +1 -1
- package/dist/types/src/components/Tag/Tag.stories.d.ts +8 -13
- package/dist/types/src/components/Tag/Tag.stories.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts +3 -3
- package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/ThemeProvider.stories.d.ts +12 -0
- package/dist/types/src/components/ThemeProvider/ThemeProvider.stories.d.ts.map +1 -0
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +1 -8
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/index.d.ts +2 -1
- package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
- package/dist/types/src/components/Toast/Toast.d.ts +19 -19
- package/dist/types/src/components/Toast/Toast.d.ts.map +1 -1
- package/dist/types/src/components/Toast/Toast.stories.d.ts +6 -44
- package/dist/types/src/components/Toast/Toast.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.d.ts +40 -22
- package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +6 -50
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/Tooltip.d.ts +10 -12
- package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts +10 -63
- package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +14 -8
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/exemplars/generics.stories.d.ts +19 -0
- package/dist/types/src/exemplars/generics.stories.d.ts.map +1 -0
- package/dist/types/src/exemplars/slot.stories.d.ts +15 -0
- package/dist/types/src/exemplars/slot.stories.d.ts.map +1 -0
- package/dist/types/src/exemplars/tabster.stories.d.ts +8 -0
- package/dist/types/src/exemplars/tabster.stories.d.ts.map +1 -0
- package/dist/types/src/exemplars/virtualizer.stories.d.ts +11 -0
- package/dist/types/src/exemplars/virtualizer.stories.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +1 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useDensityContext.d.ts +2 -2
- package/dist/types/src/hooks/useDensityContext.d.ts.map +1 -1
- package/dist/types/src/hooks/useElevationContext.d.ts +1 -1
- package/dist/types/src/hooks/useElevationContext.d.ts.map +1 -1
- package/dist/types/src/hooks/useSafeArea.d.ts.map +1 -1
- package/dist/types/src/hooks/useVisualViewport.d.ts +2 -2
- package/dist/types/src/hooks/useVisualViewport.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/playground/Controls.stories.d.ts +5 -9
- package/dist/types/src/playground/Controls.stories.d.ts.map +1 -1
- package/dist/types/src/playground/Custom.stories.d.ts +12 -4
- package/dist/types/src/playground/Custom.stories.d.ts.map +1 -1
- package/dist/types/src/playground/Typography.stories.d.ts +5 -11
- package/dist/types/src/playground/Typography.stories.d.ts.map +1 -1
- package/dist/types/src/primitives/Column/Column.d.ts +33 -0
- package/dist/types/src/primitives/Column/Column.d.ts.map +1 -0
- package/dist/types/src/primitives/Column/Column.stories.d.ts +25 -0
- package/dist/types/src/primitives/Column/Column.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Column/index.d.ts +2 -0
- package/dist/types/src/primitives/Column/index.d.ts.map +1 -0
- package/dist/types/src/primitives/Container/Container.d.ts +7 -0
- package/dist/types/src/primitives/Container/Container.d.ts.map +1 -0
- package/dist/types/src/primitives/Container/Container.stories.d.ts +6 -0
- package/dist/types/src/primitives/Container/Container.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Container/index.d.ts +2 -0
- package/dist/types/src/primitives/Container/index.d.ts.map +1 -0
- package/dist/types/src/primitives/Flex/Flex.d.ts +11 -0
- package/dist/types/src/primitives/Flex/Flex.d.ts.map +1 -0
- package/dist/types/src/primitives/Flex/Flex.stories.d.ts +8 -0
- package/dist/types/src/primitives/Flex/Flex.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Flex/index.d.ts +2 -0
- package/dist/types/src/primitives/Flex/index.d.ts.map +1 -0
- package/dist/types/src/primitives/Grid/Grid.d.ts +10 -0
- package/dist/types/src/primitives/Grid/Grid.d.ts.map +1 -0
- package/dist/types/src/primitives/Grid/Grid.stories.d.ts +8 -0
- package/dist/types/src/primitives/Grid/Grid.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Grid/index.d.ts +2 -0
- package/dist/types/src/primitives/Grid/index.d.ts.map +1 -0
- package/dist/types/src/primitives/Panel/Panel.d.ts +35 -0
- package/dist/types/src/primitives/Panel/Panel.d.ts.map +1 -0
- package/dist/types/src/primitives/Panel/Panel.stories.d.ts +6 -0
- package/dist/types/src/primitives/Panel/Panel.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Panel/index.d.ts +2 -0
- package/dist/types/src/primitives/Panel/index.d.ts.map +1 -0
- package/dist/types/src/primitives/index.d.ts +6 -0
- package/dist/types/src/primitives/index.d.ts.map +1 -0
- package/dist/types/src/testing/Loading.d.ts +9 -0
- package/dist/types/src/testing/Loading.d.ts.map +1 -0
- package/dist/types/src/testing/decorators/index.d.ts +2 -1
- package/dist/types/src/testing/decorators/index.d.ts.map +1 -1
- package/dist/types/src/testing/decorators/withLayout.d.ts +15 -0
- package/dist/types/src/testing/decorators/withLayout.d.ts.map +1 -0
- package/dist/types/src/testing/decorators/withLayoutVariants.d.ts +12 -0
- package/dist/types/src/testing/decorators/withLayoutVariants.d.ts.map +1 -0
- package/dist/types/src/testing/decorators/withTheme.d.ts +5 -1
- package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
- package/dist/types/src/testing/index.d.ts +1 -0
- package/dist/types/src/testing/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +11 -0
- package/dist/types/src/translations.d.ts.map +1 -0
- package/dist/types/src/util/index.d.ts +2 -1
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/usePx.d.ts +8 -0
- package/dist/types/src/util/usePx.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +43 -32
- package/src/components/Avatars/Avatar.stories.tsx +22 -16
- package/src/components/Avatars/Avatar.tsx +7 -15
- package/src/components/Avatars/AvatarGroup.stories.tsx +10 -8
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +19 -16
- package/src/components/Breadcrumb/Breadcrumb.tsx +11 -37
- package/src/components/{Buttons → Button}/Button.stories.tsx +7 -10
- package/src/components/{Buttons → Button}/Button.tsx +12 -26
- package/src/components/{Buttons → Button}/IconButton.stories.tsx +17 -13
- package/src/components/{Buttons → Button}/IconButton.tsx +20 -16
- package/src/components/Button/Toggle.stories.tsx +36 -0
- package/src/components/{Buttons → Button}/Toggle.tsx +4 -4
- package/src/components/{Buttons → Button}/ToggleGroup.stories.tsx +10 -9
- package/src/components/Button/ToggleGroup.tsx +50 -0
- package/src/components/Card/Card.stories.tsx +151 -0
- package/src/components/Card/Card.tsx +493 -0
- package/src/components/Card/index.ts +5 -0
- package/src/components/Clipboard/CopyButton.tsx +8 -9
- package/src/components/DensityProvider/DensityProvider.tsx +1 -1
- package/src/components/Dialog/AlertDialog.stories.tsx +68 -0
- package/src/components/{Dialogs → Dialog}/AlertDialog.tsx +123 -82
- package/src/components/Dialog/Dialog.stories.tsx +177 -0
- package/src/components/Dialog/Dialog.tsx +285 -0
- package/src/components/ElevationProvider/ElevationProvider.tsx +1 -1
- package/src/components/ErrorFallback/ErrorFallback.stories.tsx +45 -0
- package/src/components/ErrorFallback/ErrorFallback.tsx +70 -0
- package/src/components/ErrorFallback/ErrorStack.tsx +114 -0
- package/src/components/ErrorFallback/ThrowError.tsx +37 -0
- package/src/components/ErrorFallback/index.ts +9 -0
- package/src/components/Focus/AUDIT.md +43 -0
- package/src/components/Focus/Focus.stories.tsx +230 -0
- package/src/components/Focus/Focus.tsx +201 -0
- package/src/components/Focus/index.ts +5 -0
- package/src/components/Icon/Icon.stories.tsx +143 -0
- package/src/components/Icon/Icon.tsx +6 -2
- package/src/components/Image/Image.stories.tsx +86 -0
- package/src/components/Image/Image.tsx +223 -0
- package/src/components/Image/index.ts +5 -0
- package/src/components/Input/Input.stories.tsx +25 -48
- package/src/components/Input/Input.tsx +40 -76
- package/src/components/Link/Link.stories.tsx +10 -8
- package/src/components/Link/Link.tsx +2 -2
- package/src/components/{Lists → List}/List.stories.tsx +41 -44
- package/src/components/{Lists → List}/List.tsx +21 -22
- package/src/components/{Lists → List}/ListDropIndicator.tsx +7 -7
- package/src/components/{Lists → List}/Tree.stories.tsx +14 -13
- package/src/components/{Lists → List}/Tree.tsx +0 -1
- package/src/components/{Lists → List}/TreeDropIndicator.tsx +6 -6
- package/src/components/{Lists → List}/Treegrid.stories.tsx +39 -35
- package/src/components/List/Treegrid.tsx +188 -0
- package/src/components/Main/Main.stories.tsx +52 -28
- package/src/components/Main/Main.tsx +170 -100
- package/src/components/{Menus → Menu}/ContextMenu.stories.tsx +11 -10
- package/src/components/{Menus → Menu}/ContextMenu.tsx +10 -33
- package/src/components/{Menus → Menu}/DropdownMenu.stories.tsx +12 -11
- package/src/components/{Menus → Menu}/DropdownMenu.tsx +151 -114
- package/src/components/Message/Message.stories.tsx +35 -18
- package/src/components/Message/Message.tsx +43 -34
- package/src/components/Popover/Popover.stories.tsx +17 -16
- package/src/components/Popover/Popover.tsx +118 -96
- package/src/components/ScrollArea/ScrollArea.stories.tsx +223 -32
- package/src/components/ScrollArea/ScrollArea.tsx +97 -79
- package/src/components/ScrollArea/index.ts +1 -1
- package/src/components/ScrollContainer/ScrollContainer.stories.tsx +91 -0
- package/src/components/ScrollContainer/ScrollContainer.tsx +347 -0
- package/src/components/ScrollContainer/index.ts +5 -0
- package/src/components/Select/Select.stories.tsx +19 -18
- package/src/components/Select/Select.tsx +16 -31
- package/src/components/Separator/Separator.tsx +5 -8
- package/src/components/Skeleton/Skeleton.stories.tsx +51 -0
- package/src/components/Skeleton/Skeleton.tsx +26 -0
- package/src/components/Skeleton/index.ts +5 -0
- package/src/components/Splitter/Splitter.stories.tsx +83 -0
- package/src/components/Splitter/Splitter.tsx +127 -0
- package/src/components/Splitter/index.ts +5 -0
- package/src/components/Status/Status.stories.tsx +28 -23
- package/src/components/Status/Status.tsx +10 -7
- package/src/components/Tag/Tag.stories.tsx +16 -14
- package/src/components/Tag/Tag.tsx +3 -8
- package/src/components/ThemeProvider/ThemeProvider.stories.tsx +31 -0
- package/src/components/ThemeProvider/ThemeProvider.tsx +10 -10
- package/src/components/ThemeProvider/TranslationsProvider.tsx +1 -16
- package/src/components/ThemeProvider/index.ts +3 -3
- package/src/components/Toast/Toast.stories.tsx +12 -11
- package/src/components/Toast/Toast.tsx +22 -41
- package/src/components/Toolbar/Toolbar.stories.tsx +14 -14
- package/src/components/Toolbar/Toolbar.tsx +185 -11
- package/src/components/Tooltip/Tooltip.stories.tsx +34 -30
- package/src/components/Tooltip/Tooltip.tsx +42 -39
- package/src/components/index.ts +15 -9
- package/src/exemplars/generics.stories.tsx +41 -0
- package/src/exemplars/slot.stories.tsx +117 -0
- package/src/exemplars/tabster.stories.tsx +127 -0
- package/src/exemplars/virtualizer.stories.tsx +137 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useDensityContext.ts +3 -3
- package/src/hooks/useElevationContext.ts +1 -1
- package/src/hooks/useSafeArea.ts +3 -2
- package/src/hooks/useVisualViewport.ts +4 -4
- package/src/index.ts +2 -1
- package/src/playground/Controls.stories.tsx +12 -15
- package/src/playground/Custom.stories.tsx +18 -32
- package/src/playground/Typography.stories.tsx +11 -9
- package/src/primitives/Column/AUDIT.md +148 -0
- package/src/primitives/Column/Column.stories.tsx +181 -0
- package/src/primitives/Column/Column.tsx +165 -0
- package/src/primitives/Column/index.ts +5 -0
- package/src/primitives/Container/Container.stories.tsx +29 -0
- package/src/primitives/Container/Container.tsx +19 -0
- package/src/primitives/Container/index.ts +5 -0
- package/src/primitives/Flex/Flex.stories.tsx +57 -0
- package/src/primitives/Flex/Flex.tsx +27 -0
- package/src/primitives/Flex/index.ts +5 -0
- package/src/primitives/Grid/Grid.stories.tsx +56 -0
- package/src/primitives/Grid/Grid.tsx +30 -0
- package/src/primitives/Grid/index.ts +5 -0
- package/src/primitives/Panel/Panel.stories.tsx +68 -0
- package/src/primitives/Panel/Panel.tsx +120 -0
- package/src/primitives/Panel/index.ts +5 -0
- package/src/primitives/index.ts +9 -0
- package/src/testing/Loading.tsx +47 -0
- package/src/testing/decorators/index.ts +2 -1
- package/src/testing/decorators/withLayout.tsx +77 -0
- package/src/testing/decorators/withLayoutVariants.tsx +48 -0
- package/src/testing/decorators/withTheme.tsx +37 -0
- package/src/testing/index.ts +2 -0
- package/src/translations.ts +19 -0
- package/src/util/index.ts +3 -1
- package/src/util/usePx.ts +62 -0
- package/dist/lib/browser/chunk-BKNGMGOK.mjs +0 -4373
- package/dist/lib/browser/chunk-BKNGMGOK.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-D2HZS6F4.mjs +0 -4375
- package/dist/lib/node-esm/chunk-D2HZS6F4.mjs.map +0 -7
- package/dist/types/src/components/AnchoredOverflow/AnchoredOverflow.d.ts +0 -15
- package/dist/types/src/components/AnchoredOverflow/AnchoredOverflow.d.ts.map +0 -1
- package/dist/types/src/components/AnchoredOverflow/index.d.ts +0 -2
- package/dist/types/src/components/AnchoredOverflow/index.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/Button.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/Button.stories.d.ts +0 -12
- package/dist/types/src/components/Buttons/Button.stories.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/IconButton.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/IconButton.stories.d.ts +0 -22
- package/dist/types/src/components/Buttons/IconButton.stories.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/Toggle.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/Toggle.stories.d.ts +0 -19
- package/dist/types/src/components/Buttons/Toggle.stories.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/ToggleGroup.d.ts +0 -28
- package/dist/types/src/components/Buttons/ToggleGroup.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/ToggleGroup.stories.d.ts +0 -39
- package/dist/types/src/components/Buttons/ToggleGroup.stories.d.ts.map +0 -1
- package/dist/types/src/components/Buttons/index.d.ts.map +0 -1
- package/dist/types/src/components/Dialogs/AlertDialog.d.ts +0 -31
- package/dist/types/src/components/Dialogs/AlertDialog.d.ts.map +0 -1
- package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts +0 -43
- package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts.map +0 -1
- package/dist/types/src/components/Dialogs/Dialog.d.ts +0 -31
- package/dist/types/src/components/Dialogs/Dialog.d.ts.map +0 -1
- package/dist/types/src/components/Dialogs/Dialog.stories.d.ts +0 -48
- package/dist/types/src/components/Dialogs/Dialog.stories.d.ts.map +0 -1
- package/dist/types/src/components/Dialogs/index.d.ts.map +0 -1
- package/dist/types/src/components/Lists/List.d.ts.map +0 -1
- package/dist/types/src/components/Lists/List.stories.d.ts +0 -37
- package/dist/types/src/components/Lists/List.stories.d.ts.map +0 -1
- package/dist/types/src/components/Lists/ListDropIndicator.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Tree.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Tree.stories.d.ts +0 -41
- package/dist/types/src/components/Lists/Tree.stories.d.ts.map +0 -1
- package/dist/types/src/components/Lists/TreeDropIndicator.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Treegrid.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Treegrid.stories.d.ts +0 -10
- package/dist/types/src/components/Lists/Treegrid.stories.d.ts.map +0 -1
- package/dist/types/src/components/Lists/index.d.ts.map +0 -1
- package/dist/types/src/components/Menus/ContextMenu.d.ts.map +0 -1
- package/dist/types/src/components/Menus/ContextMenu.stories.d.ts +0 -50
- package/dist/types/src/components/Menus/ContextMenu.stories.d.ts.map +0 -1
- package/dist/types/src/components/Menus/DropdownMenu.d.ts +0 -112
- package/dist/types/src/components/Menus/DropdownMenu.d.ts.map +0 -1
- package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts +0 -50
- package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts.map +0 -1
- package/dist/types/src/components/Menus/index.d.ts.map +0 -1
- package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts +0 -12
- package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts.map +0 -1
- package/dist/types/src/util/ThemedClassName.d.ts +0 -5
- package/dist/types/src/util/ThemedClassName.d.ts.map +0 -1
- package/src/components/AnchoredOverflow/AnchoredOverflow.tsx +0 -59
- package/src/components/AnchoredOverflow/index.ts +0 -5
- package/src/components/Buttons/Toggle.stories.tsx +0 -34
- package/src/components/Buttons/ToggleGroup.tsx +0 -41
- package/src/components/Dialogs/AlertDialog.stories.tsx +0 -67
- package/src/components/Dialogs/Dialog.stories.tsx +0 -66
- package/src/components/Dialogs/Dialog.tsx +0 -159
- package/src/components/Lists/Treegrid.tsx +0 -152
- package/src/testing/decorators/withSurfaceVariantsLayout.tsx +0 -51
- package/src/testing/decorators/withTheme.ts +0 -25
- package/src/util/ThemedClassName.ts +0 -7
- /package/dist/types/src/components/{Buttons → Button}/index.d.ts +0 -0
- /package/dist/types/src/components/{Dialogs → Dialog}/index.d.ts +0 -0
- /package/dist/types/src/components/{Lists → List}/ListDropIndicator.d.ts +0 -0
- /package/dist/types/src/components/{Lists → List}/Tree.d.ts +0 -0
- /package/dist/types/src/components/{Lists → List}/TreeDropIndicator.d.ts +0 -0
- /package/dist/types/src/components/{Lists → List}/index.d.ts +0 -0
- /package/dist/types/src/components/{Menus → Menu}/index.d.ts +0 -0
- /package/src/components/{Buttons → Button}/index.ts +0 -0
- /package/src/components/{Dialogs → Dialog}/index.ts +0 -0
- /package/src/components/{Lists → List}/index.ts +0 -0
- /package/src/components/{Menus → Menu}/index.ts +0 -0
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import type { Scope } from '@radix-ui/react-context';
|
|
2
|
-
import * as MenuPrimitive from '@radix-ui/react-menu';
|
|
3
|
-
import { Primitive } from '@radix-ui/react-primitive';
|
|
4
|
-
import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementRef, type MutableRefObject, type ReactNode, type RefObject } from 'react';
|
|
5
|
-
import { type ThemedClassName } from '../../util';
|
|
6
|
-
type Direction = 'ltr' | 'rtl';
|
|
7
|
-
type ScopedProps<P> = P & {
|
|
8
|
-
__scopeDropdownMenu?: Scope;
|
|
9
|
-
};
|
|
10
|
-
declare const createDropdownMenuScope: import("@radix-ui/react-context").CreateScope;
|
|
11
|
-
type DropdownMenuContextValue = {
|
|
12
|
-
triggerId: string;
|
|
13
|
-
triggerRef: MutableRefObject<HTMLButtonElement | null>;
|
|
14
|
-
contentId: string;
|
|
15
|
-
open: boolean;
|
|
16
|
-
onOpenChange(open: boolean): void;
|
|
17
|
-
onOpenToggle(): void;
|
|
18
|
-
modal: boolean;
|
|
19
|
-
};
|
|
20
|
-
declare const useDropdownMenuContext: (consumerName: string, scope: Scope<DropdownMenuContextValue | undefined>) => DropdownMenuContextValue;
|
|
21
|
-
interface DropdownMenuRootProps {
|
|
22
|
-
children?: ReactNode;
|
|
23
|
-
dir?: Direction;
|
|
24
|
-
open?: boolean;
|
|
25
|
-
defaultOpen?: boolean;
|
|
26
|
-
onOpenChange?(open: boolean): void;
|
|
27
|
-
modal?: boolean;
|
|
28
|
-
}
|
|
29
|
-
type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
|
|
30
|
-
type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
|
|
31
|
-
interface DropdownMenuTriggerProps extends PrimitiveButtonProps {
|
|
32
|
-
}
|
|
33
|
-
interface DropdownMenuVirtualTriggerProps {
|
|
34
|
-
virtualRef: RefObject<DropdownMenuTriggerElement>;
|
|
35
|
-
}
|
|
36
|
-
type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
|
|
37
|
-
interface DropdownMenuPortalProps extends MenuPortalProps {
|
|
38
|
-
}
|
|
39
|
-
type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
|
|
40
|
-
asChild?: boolean;
|
|
41
|
-
};
|
|
42
|
-
type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
|
|
43
|
-
interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {
|
|
44
|
-
}
|
|
45
|
-
type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
|
|
46
|
-
interface DropdownMenuGroupProps extends MenuGroupProps {
|
|
47
|
-
}
|
|
48
|
-
type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
|
|
49
|
-
interface DropdownMenuLabelProps extends MenuLabelProps {
|
|
50
|
-
}
|
|
51
|
-
type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
|
|
52
|
-
interface DropdownMenuItemProps extends MenuItemProps {
|
|
53
|
-
}
|
|
54
|
-
type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
|
|
55
|
-
interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {
|
|
56
|
-
}
|
|
57
|
-
type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
|
|
58
|
-
interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {
|
|
59
|
-
}
|
|
60
|
-
type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
|
|
61
|
-
interface DropdownMenuRadioItemProps extends MenuRadioItemProps {
|
|
62
|
-
}
|
|
63
|
-
type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
|
|
64
|
-
interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {
|
|
65
|
-
}
|
|
66
|
-
type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
|
|
67
|
-
interface DropdownMenuSeparatorProps extends MenuSeparatorProps {
|
|
68
|
-
}
|
|
69
|
-
type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
|
|
70
|
-
interface DropdownMenuArrowProps extends MenuArrowProps {
|
|
71
|
-
}
|
|
72
|
-
interface DropdownMenuSubProps {
|
|
73
|
-
children?: ReactNode;
|
|
74
|
-
open?: boolean;
|
|
75
|
-
defaultOpen?: boolean;
|
|
76
|
-
onOpenChange?(open: boolean): void;
|
|
77
|
-
}
|
|
78
|
-
type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
|
|
79
|
-
interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {
|
|
80
|
-
}
|
|
81
|
-
type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
|
|
82
|
-
interface DropdownMenuSubContentProps extends MenuSubContentProps {
|
|
83
|
-
}
|
|
84
|
-
export declare const DropdownMenu: {
|
|
85
|
-
Root: React.FC<DropdownMenuRootProps>;
|
|
86
|
-
Trigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
87
|
-
VirtualTrigger: {
|
|
88
|
-
(props: ScopedProps<DropdownMenuVirtualTriggerProps>): React.JSX.Element;
|
|
89
|
-
displayName: string;
|
|
90
|
-
};
|
|
91
|
-
Portal: React.FC<DropdownMenuPortalProps>;
|
|
92
|
-
Content: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
-
Viewport: React.ForwardRefExoticComponent<Omit<DropdownMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
94
|
-
Group: React.ForwardRefExoticComponent<DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
95
|
-
GroupLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
96
|
-
Item: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
97
|
-
CheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
98
|
-
RadioGroup: React.ForwardRefExoticComponent<DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
99
|
-
RadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
100
|
-
ItemIndicator: React.ForwardRefExoticComponent<DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
|
|
101
|
-
Separator: React.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
102
|
-
Arrow: React.ForwardRefExoticComponent<DropdownMenuArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
103
|
-
Sub: React.FC<DropdownMenuSubProps>;
|
|
104
|
-
SubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
|
|
105
|
-
SubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
106
|
-
};
|
|
107
|
-
declare const useDropdownMenuMenuScope: (scope: Scope) => {
|
|
108
|
-
[__scopeProp: string]: Scope;
|
|
109
|
-
};
|
|
110
|
-
export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
|
|
111
|
-
export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuVirtualTriggerProps, DropdownMenuPortalProps, DropdownMenuContentProps, DropdownMenuViewportProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuItemIndicatorProps, DropdownMenuSeparatorProps, DropdownMenuArrowProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, };
|
|
112
|
-
//# sourceMappingURL=DropdownMenu.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import '@dxos-theme';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: {
|
|
6
|
-
Root: React.FC<import("./DropdownMenu").DropdownMenuRootProps>;
|
|
7
|
-
Trigger: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
8
|
-
VirtualTrigger: {
|
|
9
|
-
(props: import("./DropdownMenu").DropdownMenuVirtualTriggerProps & {
|
|
10
|
-
__scopeDropdownMenu?: import("@radix-ui/react-context").Scope;
|
|
11
|
-
}): React.JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
Portal: React.FC<import("./DropdownMenu").DropdownMenuPortalProps>;
|
|
15
|
-
Content: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
-
Viewport: React.ForwardRefExoticComponent<Omit<import("./DropdownMenu").DropdownMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
-
Group: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
-
GroupLabel: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
-
Item: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
-
CheckboxItem: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
RadioGroup: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
-
RadioItem: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
-
ItemIndicator: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
|
|
24
|
-
Separator: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
-
Arrow: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
26
|
-
Sub: React.FC<import("./DropdownMenu").DropdownMenuSubProps>;
|
|
27
|
-
SubTrigger: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
-
SubContent: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
};
|
|
30
|
-
render: () => React.JSX.Element;
|
|
31
|
-
decorators: import("@storybook/react").Decorator[];
|
|
32
|
-
parameters: {
|
|
33
|
-
chromatic: {
|
|
34
|
-
disableSnapshot: boolean;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
export default _default;
|
|
39
|
-
export declare const Default: {
|
|
40
|
-
args: {};
|
|
41
|
-
parameters: {
|
|
42
|
-
chromatic: {
|
|
43
|
-
delay: number;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export declare const VirtualTrigger: {
|
|
48
|
-
render: () => React.JSX.Element;
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=DropdownMenu.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA2B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFhD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,cAAc;;CAqC1B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { type Decorator } from '@storybook/react';
|
|
2
|
-
import { type Density, type Elevation } from '@dxos/react-ui-types';
|
|
3
|
-
type Config = {
|
|
4
|
-
elevations?: {
|
|
5
|
-
elevation: Elevation;
|
|
6
|
-
surface?: string;
|
|
7
|
-
}[];
|
|
8
|
-
densities?: Density[];
|
|
9
|
-
};
|
|
10
|
-
export declare const withSurfaceVariantsLayout: ({ elevations, densities, }?: Config) => Decorator;
|
|
11
|
-
export {};
|
|
12
|
-
//# sourceMappingURL=withSurfaceVariantsLayout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"withSurfaceVariantsLayout.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withSurfaceVariantsLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAuBF,eAAO,MAAM,yBAAyB,GAAI,6BAOvC,MAAW,KAAG,SAOhB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2022 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Primitive } from '@radix-ui/react-primitive';
|
|
6
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
7
|
-
import React, { type ComponentPropsWithRef, forwardRef } from 'react';
|
|
8
|
-
|
|
9
|
-
import { useThemeContext } from '../../hooks';
|
|
10
|
-
import { type ThemedClassName } from '../../util';
|
|
11
|
-
|
|
12
|
-
type AnchoredOverflowRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
|
|
13
|
-
asChild?: boolean;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
const AnchoredOverflowRoot = forwardRef<HTMLDivElement, AnchoredOverflowRootProps>(
|
|
17
|
-
({ asChild, classNames, children, ...props }, forwardedRef) => {
|
|
18
|
-
const { tx } = useThemeContext();
|
|
19
|
-
const Root = asChild ? Slot : Primitive.div;
|
|
20
|
-
return (
|
|
21
|
-
<Root
|
|
22
|
-
role='none'
|
|
23
|
-
{...props}
|
|
24
|
-
className={tx('anchoredOverflow.root', 'overflow-anchored', {}, classNames)}
|
|
25
|
-
ref={forwardedRef}
|
|
26
|
-
>
|
|
27
|
-
{children}
|
|
28
|
-
</Root>
|
|
29
|
-
);
|
|
30
|
-
},
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
type AnchoredOverflowAnchorProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
|
|
34
|
-
asChild?: boolean;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const AnchoredOverflowAnchor = forwardRef<HTMLDivElement, AnchoredOverflowAnchorProps>(
|
|
38
|
-
({ asChild, classNames, children, ...props }, forwardedRef) => {
|
|
39
|
-
const { tx } = useThemeContext();
|
|
40
|
-
const Root = asChild ? Slot : Primitive.div;
|
|
41
|
-
return (
|
|
42
|
-
<Root
|
|
43
|
-
role='none'
|
|
44
|
-
{...props}
|
|
45
|
-
className={tx('anchoredOverflow.anchor', 'overflow-anchor', {}, classNames)}
|
|
46
|
-
ref={forwardedRef}
|
|
47
|
-
>
|
|
48
|
-
{children}
|
|
49
|
-
</Root>
|
|
50
|
-
);
|
|
51
|
-
},
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
export const AnchoredOverflow = {
|
|
55
|
-
Root: AnchoredOverflowRoot,
|
|
56
|
-
Anchor: AnchoredOverflowAnchor,
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export type { AnchoredOverflowRootProps, AnchoredOverflowAnchorProps };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
import { withTheme } from '../../testing';
|
|
10
|
-
import { Icon } from '../Icon';
|
|
11
|
-
|
|
12
|
-
import { Toggle } from './Toggle';
|
|
13
|
-
|
|
14
|
-
type StorybookToggleProps = {};
|
|
15
|
-
|
|
16
|
-
const DefaultStory = (props: StorybookToggleProps) => {
|
|
17
|
-
return (
|
|
18
|
-
<Toggle {...props}>
|
|
19
|
-
<Icon icon='ph--text-b--regular' />
|
|
20
|
-
</Toggle>
|
|
21
|
-
);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default {
|
|
25
|
-
title: 'ui/react-ui-core/Toggle',
|
|
26
|
-
component: Toggle,
|
|
27
|
-
render: DefaultStory,
|
|
28
|
-
decorators: [withTheme],
|
|
29
|
-
parameters: { chromatic: { disableSnapshot: false } },
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export const Default = {
|
|
33
|
-
args: {},
|
|
34
|
-
};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
ToggleGroupItem as ToggleGroupItemPrimitive,
|
|
7
|
-
type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
|
|
8
|
-
type ToggleGroupMultipleProps,
|
|
9
|
-
ToggleGroup as ToggleGroupPrimitive,
|
|
10
|
-
type ToggleGroupSingleProps,
|
|
11
|
-
} from '@radix-ui/react-toggle-group';
|
|
12
|
-
import React, { forwardRef } from 'react';
|
|
13
|
-
|
|
14
|
-
import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
|
|
15
|
-
|
|
16
|
-
type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
|
|
17
|
-
|
|
18
|
-
const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
|
|
19
|
-
({ classNames, children, ...props }, forwardedRef) => {
|
|
20
|
-
return (
|
|
21
|
-
<ToggleGroupPrimitive {...props} asChild>
|
|
22
|
-
<ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
|
|
23
|
-
</ToggleGroupPrimitive>
|
|
24
|
-
);
|
|
25
|
-
},
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
type ToggleGroupItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & ButtonProps;
|
|
29
|
-
|
|
30
|
-
const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
|
|
31
|
-
({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
|
|
32
|
-
return (
|
|
33
|
-
<ToggleGroupItemPrimitive {...props} asChild>
|
|
34
|
-
<Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
|
|
35
|
-
</ToggleGroupItemPrimitive>
|
|
36
|
-
);
|
|
37
|
-
},
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
export { ToggleGroup, ToggleGroupItem };
|
|
41
|
-
export type { ToggleGroupProps, ToggleGroupItemProps };
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2022 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
import { withTheme } from '../../testing';
|
|
10
|
-
import { Button } from '../Buttons';
|
|
11
|
-
import { Toolbar } from '../Toolbar';
|
|
12
|
-
|
|
13
|
-
import { AlertDialog } from './AlertDialog';
|
|
14
|
-
|
|
15
|
-
type StoryProps = Partial<{
|
|
16
|
-
title: string;
|
|
17
|
-
description: string;
|
|
18
|
-
body: string;
|
|
19
|
-
cancelTrigger: string;
|
|
20
|
-
actionTrigger: string;
|
|
21
|
-
openTrigger: string;
|
|
22
|
-
}>;
|
|
23
|
-
|
|
24
|
-
const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => {
|
|
25
|
-
return (
|
|
26
|
-
<AlertDialog.Root defaultOpen>
|
|
27
|
-
<AlertDialog.Trigger asChild>
|
|
28
|
-
<Button>{openTrigger}</Button>
|
|
29
|
-
</AlertDialog.Trigger>
|
|
30
|
-
<AlertDialog.Overlay>
|
|
31
|
-
<AlertDialog.Content>
|
|
32
|
-
<AlertDialog.Title>{title}</AlertDialog.Title>
|
|
33
|
-
<AlertDialog.Description>{description}</AlertDialog.Description>
|
|
34
|
-
<p className='mbs-2 mbe-8'>{body}</p>
|
|
35
|
-
<Toolbar.Root>
|
|
36
|
-
<div className='grow' />
|
|
37
|
-
<AlertDialog.Cancel asChild>
|
|
38
|
-
<Toolbar.Button>{cancelTrigger}</Toolbar.Button>
|
|
39
|
-
</AlertDialog.Cancel>
|
|
40
|
-
<AlertDialog.Action asChild>
|
|
41
|
-
<Toolbar.Button variant='primary'>{actionTrigger}</Toolbar.Button>
|
|
42
|
-
</AlertDialog.Action>
|
|
43
|
-
</Toolbar.Root>
|
|
44
|
-
</AlertDialog.Content>
|
|
45
|
-
</AlertDialog.Overlay>
|
|
46
|
-
</AlertDialog.Root>
|
|
47
|
-
);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export default {
|
|
51
|
-
title: 'ui/react-ui-core/AlertDialog',
|
|
52
|
-
component: AlertDialog,
|
|
53
|
-
render: DefaultStory,
|
|
54
|
-
decorators: [withTheme],
|
|
55
|
-
parameters: { chromatic: { disableSnapshot: false } },
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const Default = {
|
|
59
|
-
args: {
|
|
60
|
-
title: 'AlertDialog title',
|
|
61
|
-
openTrigger: 'Open AlertDialog',
|
|
62
|
-
description: 'AlertDialog description',
|
|
63
|
-
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
|
64
|
-
cancelTrigger: 'Cancel',
|
|
65
|
-
actionTrigger: 'Action',
|
|
66
|
-
},
|
|
67
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2022 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
import { withTheme } from '../../testing';
|
|
10
|
-
import { Button } from '../Buttons';
|
|
11
|
-
|
|
12
|
-
import { Dialog } from './Dialog';
|
|
13
|
-
|
|
14
|
-
type StoryProps = Partial<{
|
|
15
|
-
title: string;
|
|
16
|
-
description: string;
|
|
17
|
-
body: string;
|
|
18
|
-
closeTrigger: string;
|
|
19
|
-
openTrigger: string;
|
|
20
|
-
blockAlign: 'center' | 'start';
|
|
21
|
-
}>;
|
|
22
|
-
|
|
23
|
-
const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
|
|
24
|
-
return (
|
|
25
|
-
<Dialog.Root defaultOpen>
|
|
26
|
-
<Dialog.Trigger asChild>
|
|
27
|
-
<Button>{openTrigger}</Button>
|
|
28
|
-
</Dialog.Trigger>
|
|
29
|
-
<Dialog.Overlay blockAlign={blockAlign}>
|
|
30
|
-
<Dialog.Content>
|
|
31
|
-
<Dialog.Title>{title}</Dialog.Title>
|
|
32
|
-
<Dialog.Description>{description}</Dialog.Description>
|
|
33
|
-
<p className='mbs-2 mbe-4'>{body}</p>
|
|
34
|
-
<Dialog.Close asChild>
|
|
35
|
-
<Button variant='primary'>{closeTrigger}</Button>
|
|
36
|
-
</Dialog.Close>
|
|
37
|
-
</Dialog.Content>
|
|
38
|
-
</Dialog.Overlay>
|
|
39
|
-
</Dialog.Root>
|
|
40
|
-
);
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
export default {
|
|
44
|
-
title: 'ui/react-ui-core/Dialog',
|
|
45
|
-
component: Dialog,
|
|
46
|
-
render: DefaultStory,
|
|
47
|
-
decorators: [withTheme],
|
|
48
|
-
parameters: { chromatic: { disableSnapshot: false } },
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export const Default = {
|
|
52
|
-
args: {
|
|
53
|
-
title: 'Dialog title',
|
|
54
|
-
openTrigger: 'Open Dialog',
|
|
55
|
-
description: 'Dialog description',
|
|
56
|
-
body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
|
57
|
-
closeTrigger: 'Close trigger',
|
|
58
|
-
blockAlign: 'center',
|
|
59
|
-
},
|
|
60
|
-
argTypes: {
|
|
61
|
-
blockAlign: {
|
|
62
|
-
type: 'select',
|
|
63
|
-
options: ['center', 'start', 'end'],
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
|
-
};
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { createContext } from '@radix-ui/react-context';
|
|
6
|
-
import {
|
|
7
|
-
DialogClose as DialogClosePrimitive,
|
|
8
|
-
type DialogCloseProps as DialogClosePrimitiveProps,
|
|
9
|
-
DialogContent as DialogContentPrimitive,
|
|
10
|
-
type DialogContentProps as DialogContentPrimitiveProps,
|
|
11
|
-
DialogDescription as DialogDescriptionPrimitive,
|
|
12
|
-
type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
|
|
13
|
-
DialogOverlay as DialogOverlayPrimitive,
|
|
14
|
-
type DialogOverlayProps as DialogOverlayPrimitiveProps,
|
|
15
|
-
DialogPortal as DialogPortalPrimitive,
|
|
16
|
-
type DialogPortalProps as DialogPortalPrimitiveProps,
|
|
17
|
-
Root as DialogRootPrimitive,
|
|
18
|
-
type DialogProps as DialogRootPrimitiveProps,
|
|
19
|
-
DialogTitle as DialogTitlePrimitive,
|
|
20
|
-
type DialogTitleProps as DialogTitlePrimitiveProps,
|
|
21
|
-
DialogTrigger as DialogTriggerPrimitive,
|
|
22
|
-
type DialogTriggerProps as DialogTriggerPrimitiveProps,
|
|
23
|
-
} from '@radix-ui/react-dialog';
|
|
24
|
-
import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
|
|
25
|
-
|
|
26
|
-
import { useThemeContext } from '../../hooks';
|
|
27
|
-
import { type ThemedClassName } from '../../util';
|
|
28
|
-
import { ElevationProvider } from '../ElevationProvider';
|
|
29
|
-
|
|
30
|
-
type DialogRootProps = DialogRootPrimitiveProps;
|
|
31
|
-
|
|
32
|
-
const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
|
|
33
|
-
<ElevationProvider elevation='dialog'>
|
|
34
|
-
<DialogRootPrimitive {...props} />
|
|
35
|
-
</ElevationProvider>
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
type DialogTriggerProps = DialogTriggerPrimitiveProps;
|
|
39
|
-
|
|
40
|
-
const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
|
|
41
|
-
|
|
42
|
-
type DialogPortalProps = DialogPortalPrimitiveProps;
|
|
43
|
-
|
|
44
|
-
const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
|
|
45
|
-
|
|
46
|
-
type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
|
|
47
|
-
|
|
48
|
-
const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
|
|
49
|
-
({ classNames, srOnly, ...props }, forwardedRef) => {
|
|
50
|
-
const { tx } = useThemeContext();
|
|
51
|
-
return (
|
|
52
|
-
<DialogTitlePrimitive
|
|
53
|
-
{...props}
|
|
54
|
-
className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
|
|
55
|
-
ref={forwardedRef}
|
|
56
|
-
/>
|
|
57
|
-
);
|
|
58
|
-
},
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
|
|
62
|
-
|
|
63
|
-
const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
|
|
64
|
-
HTMLParagraphElement,
|
|
65
|
-
DialogDescriptionProps
|
|
66
|
-
>(({ classNames, srOnly, ...props }, forwardedRef) => {
|
|
67
|
-
const { tx } = useThemeContext();
|
|
68
|
-
return (
|
|
69
|
-
<DialogDescriptionPrimitive
|
|
70
|
-
{...props}
|
|
71
|
-
className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
|
|
72
|
-
ref={forwardedRef}
|
|
73
|
-
/>
|
|
74
|
-
);
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
type DialogCloseProps = DialogClosePrimitiveProps;
|
|
78
|
-
|
|
79
|
-
const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
|
|
80
|
-
|
|
81
|
-
type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
|
|
82
|
-
const DIALOG_OVERLAY_NAME = 'DialogOverlay';
|
|
83
|
-
const DIALOG_CONTENT_NAME = 'DialogContent';
|
|
84
|
-
const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
|
|
85
|
-
DIALOG_OVERLAY_NAME,
|
|
86
|
-
{},
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
|
|
90
|
-
|
|
91
|
-
const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
|
|
92
|
-
({ classNames, children, blockAlign, ...props }, forwardedRef) => {
|
|
93
|
-
const { tx } = useThemeContext();
|
|
94
|
-
|
|
95
|
-
return (
|
|
96
|
-
<DialogOverlayPrimitive
|
|
97
|
-
{...props}
|
|
98
|
-
className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
|
|
99
|
-
ref={forwardedRef}
|
|
100
|
-
data-block-align={blockAlign}
|
|
101
|
-
>
|
|
102
|
-
<OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
|
|
103
|
-
</DialogOverlayPrimitive>
|
|
104
|
-
);
|
|
105
|
-
},
|
|
106
|
-
);
|
|
107
|
-
|
|
108
|
-
DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
|
|
109
|
-
|
|
110
|
-
type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
|
|
111
|
-
|
|
112
|
-
const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
|
|
113
|
-
({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
|
|
114
|
-
const { tx } = useThemeContext();
|
|
115
|
-
const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
|
|
116
|
-
|
|
117
|
-
return (
|
|
118
|
-
<DialogContentPrimitive
|
|
119
|
-
// NOTE: Radix warning unless set to undefined.
|
|
120
|
-
// https://www.radix-ui.com/primitives/docs/components/dialog#description
|
|
121
|
-
aria-describedby={undefined}
|
|
122
|
-
{...props}
|
|
123
|
-
className={tx(
|
|
124
|
-
'dialog.content',
|
|
125
|
-
'dialog',
|
|
126
|
-
{ inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
|
|
127
|
-
classNames,
|
|
128
|
-
)}
|
|
129
|
-
ref={forwardedRef}
|
|
130
|
-
>
|
|
131
|
-
{children}
|
|
132
|
-
</DialogContentPrimitive>
|
|
133
|
-
);
|
|
134
|
-
},
|
|
135
|
-
);
|
|
136
|
-
|
|
137
|
-
DialogContent.displayName = DIALOG_CONTENT_NAME;
|
|
138
|
-
|
|
139
|
-
export const Dialog = {
|
|
140
|
-
Root: DialogRoot,
|
|
141
|
-
Trigger: DialogTrigger,
|
|
142
|
-
Portal: DialogPortal,
|
|
143
|
-
Overlay: DialogOverlay,
|
|
144
|
-
Content: DialogContent,
|
|
145
|
-
Title: DialogTitle,
|
|
146
|
-
Description: DialogDescription,
|
|
147
|
-
Close: DialogClose,
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
export type {
|
|
151
|
-
DialogRootProps,
|
|
152
|
-
DialogTriggerProps,
|
|
153
|
-
DialogPortalProps,
|
|
154
|
-
DialogOverlayProps,
|
|
155
|
-
DialogContentProps,
|
|
156
|
-
DialogTitleProps,
|
|
157
|
-
DialogDescriptionProps,
|
|
158
|
-
DialogCloseProps,
|
|
159
|
-
};
|