reshaped 3.9.0-canary.0 → 3.9.0-canary.10
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/bundle.css +1 -1
- package/dist/bundle.js +2 -31
- package/dist/cli/theming/index.js +4 -4
- package/dist/cli/theming/reshaped.config.js +1 -1
- package/dist/components/Accordion/Accordion.types.d.ts +1 -1
- package/dist/components/Accordion/AccordionControlled.js +2 -2
- package/dist/components/Accordion/AccordionTrigger.js +2 -2
- package/dist/components/Accordion/index.d.ts +1 -1
- package/dist/components/Accordion/index.js +1 -1
- package/dist/components/ActionBar/ActionBar.js +1 -1
- package/dist/components/ActionBar/ActionBar.types.d.ts +1 -1
- package/dist/components/Actionable/Actionable.js +1 -1
- package/dist/components/Alert/Alert.js +1 -1
- package/dist/components/Alert/Alert.types.d.ts +1 -1
- package/dist/components/Autocomplete/Autocomplete.js +6 -6
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +3 -3
- package/dist/components/Avatar/Avatar.js +9 -26
- package/dist/components/Avatar/Avatar.module.css +1 -1
- package/dist/components/Badge/Badge.js +4 -4
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/Badge.types.d.ts +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +3 -3
- package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +1 -1
- package/dist/components/Breadcrumbs/BreadcrumbsItem.js +1 -1
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.types.d.ts +3 -3
- package/dist/components/Calendar/Calendar.types.d.ts +25 -6
- package/dist/components/Calendar/CalendarControlled.js +45 -10
- package/dist/components/Calendar/CalendarControls.js +11 -11
- package/dist/components/Calendar/CalendarDate.js +13 -11
- package/dist/components/Calendar/CalendarMonth.js +3 -3
- package/dist/components/Calendar/CalendarYear.js +1 -1
- package/dist/components/Calendar/useCalendarKeyboardNavigation.js +1 -1
- package/dist/components/Card/Card.js +2 -2
- package/dist/components/Card/Card.module.css +1 -1
- package/dist/components/Card/Card.types.d.ts +1 -1
- package/dist/components/Carousel/Carousel.js +4 -4
- package/dist/components/Carousel/Carousel.types.d.ts +1 -1
- package/dist/components/Carousel/CarouselControl.d.ts +1 -1
- package/dist/components/Carousel/CarouselControl.js +3 -3
- package/dist/components/Checkbox/Checkbox.js +5 -15
- package/dist/components/CheckboxGroup/CheckboxGroup.types.d.ts +1 -1
- package/dist/components/Container/Container.js +1 -1
- package/dist/components/Container/Container.types.d.ts +1 -1
- package/dist/components/ContextMenu/ContextMenu.js +1 -1
- package/dist/components/Dismissible/Dismissible.js +1 -1
- package/dist/components/Divider/Divider.d.ts +1 -1
- package/dist/components/Divider/Divider.js +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +6 -6
- package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +4 -4
- package/dist/components/FileUpload/FileUpload.js +9 -7
- package/dist/components/FileUpload/FileUpload.module.css +1 -1
- package/dist/components/FileUpload/FileUpload.types.d.ts +3 -1
- package/dist/components/Flyout/Flyout.constants.d.ts +3 -6
- package/dist/components/Flyout/Flyout.constants.js +1 -3
- package/dist/components/Flyout/Flyout.js +1 -1
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +6 -7
- package/dist/components/Flyout/FlyoutContent.js +7 -7
- package/dist/components/Flyout/FlyoutControlled.js +17 -14
- package/dist/components/Flyout/index.d.ts +1 -1
- package/dist/components/Flyout/index.js +1 -1
- package/dist/components/Flyout/useFlyout.d.ts +2 -2
- package/dist/components/Flyout/useFlyout.js +5 -18
- package/dist/components/Flyout/utilities/calculatePosition.d.ts +6 -6
- package/dist/components/Flyout/utilities/calculatePosition.js +6 -6
- package/dist/components/Flyout/utilities/cooldown.js +1 -2
- package/dist/components/Flyout/utilities/flyout.d.ts +1 -1
- package/dist/components/Flyout/utilities/flyout.js +5 -2
- package/dist/components/FormControl/FormControlCaption.js +1 -1
- package/dist/components/FormControl/FormControlLabel.js +1 -1
- package/dist/components/FormControl/index.d.ts +2 -2
- package/dist/components/FormControl/index.js +2 -2
- package/dist/components/Grid/Grid.js +1 -1
- package/dist/components/Grid/Grid.types.d.ts +2 -2
- package/dist/components/HiddenInput/HiddenInput.js +34 -0
- package/dist/components/HiddenInput/HiddenInput.types.d.ts +26 -0
- package/dist/components/Icon/Icon.js +1 -1
- package/dist/components/Icon/Icon.module.css +1 -1
- package/dist/components/Image/Image.js +14 -9
- package/dist/components/Image/Image.module.css +1 -1
- package/dist/components/Image/Image.types.d.ts +4 -2
- package/dist/components/Link/Link.js +1 -1
- package/dist/components/MenuItem/MenuItem.js +1 -1
- package/dist/components/MenuItem/MenuItem.types.d.ts +2 -2
- package/dist/components/Modal/Modal.js +8 -8
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Modal/Modal.types.d.ts +1 -1
- package/dist/components/NumberField/NumberFieldControlled.js +7 -7
- package/dist/components/Overlay/Overlay.js +8 -8
- package/dist/components/PinField/PinFieldControlled.js +4 -4
- package/dist/components/Popover/Popover.js +3 -3
- package/dist/components/Popover/Popover.module.css +1 -1
- package/dist/components/Popover/Popover.types.d.ts +2 -2
- package/dist/components/Progress/Progress.module.css +1 -1
- package/dist/components/Radio/Radio.js +5 -15
- package/dist/components/RadioGroup/RadioGroup.types.d.ts +1 -1
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Reshaped/Reshaped.js +4 -4
- package/dist/components/Reshaped/Reshaped.types.d.ts +1 -1
- package/dist/components/Resizable/Resizable.js +2 -2
- package/dist/components/Resizable/Resizable.types.d.ts +1 -1
- package/dist/components/Resizable/ResizableHandle.js +1 -1
- package/dist/components/Scrim/Scrim.js +4 -3
- package/dist/components/Scrim/Scrim.module.css +1 -1
- package/dist/components/Scrim/Scrim.types.d.ts +2 -1
- package/dist/components/ScrollArea/ScrollArea.js +5 -5
- package/dist/components/Select/Select.types.d.ts +3 -3
- package/dist/components/Select/SelectCustomControlled.js +6 -3
- package/dist/components/Select/SelectEndContent.js +1 -1
- package/dist/components/Select/SelectGroup.js +1 -1
- package/dist/components/Select/SelectNative.js +2 -2
- package/dist/components/Select/SelectRoot.js +1 -1
- package/dist/components/Select/SelectTrigger.js +1 -1
- package/dist/components/Select/index.d.ts +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/components/Skeleton/Skeleton.js +1 -1
- package/dist/components/Slider/SliderControlled.js +7 -7
- package/dist/components/Slider/SliderThumb.js +3 -3
- package/dist/components/Stepper/Stepper.js +4 -4
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Table/Table.js +2 -2
- package/dist/components/Tabs/Tabs.module.css +1 -1
- package/dist/components/Tabs/Tabs.types.d.ts +4 -2
- package/dist/components/Tabs/TabsContext.d.ts +1 -0
- package/dist/components/Tabs/TabsControlled.js +2 -1
- package/dist/components/Tabs/TabsItem.js +4 -4
- package/dist/components/Tabs/TabsList.js +17 -13
- package/dist/components/Tabs/TabsPanel.js +3 -3
- package/dist/components/Text/Text.js +3 -3
- package/dist/components/Text/Text.module.css +1 -1
- package/dist/components/Text/Text.types.d.ts +2 -0
- package/dist/components/TextArea/TextArea.js +1 -1
- package/dist/components/TextArea/TextArea.types.d.ts +1 -1
- package/dist/components/TextField/TextField.js +2 -2
- package/dist/components/TextField/TextField.types.d.ts +2 -2
- package/dist/components/Theme/GlobalColorMode.js +1 -1
- package/dist/components/Theme/Theme.js +2 -2
- package/dist/components/Theme/Theme.module.css +1 -1
- package/dist/components/Timeline/Timeline.js +1 -1
- package/dist/components/Toast/Toast.js +2 -2
- package/dist/components/Toast/Toast.types.d.ts +1 -1
- package/dist/components/Toast/ToastContainer.js +3 -3
- package/dist/components/Toast/ToastProvider.js +1 -1
- package/dist/components/Toast/ToastRegion.js +2 -2
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts +1 -1
- package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -1
- package/dist/components/Tooltip/Tooltip.js +5 -3
- package/dist/components/View/View.js +2 -2
- package/dist/components/View/View.types.d.ts +1 -1
- package/dist/components/_private/Expandable/Expandable.js +2 -2
- package/dist/components/_private/Portal/Portal.js +1 -1
- package/dist/config/tailwind.js +2 -2
- package/dist/hooks/_private/useDrag.js +4 -4
- package/dist/hooks/_private/useFadeSide.js +1 -1
- package/dist/hooks/useOnClickOutside.js +2 -4
- package/dist/hooks/useResponsiveClientValue.js +1 -1
- package/dist/styles/mixin.js +1 -1
- package/dist/tests/ThemesPlayground.js +16 -16
- package/dist/themes/_generator/definitions/slate.js +1 -1
- package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts +1 -1
- package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +1 -1
- package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.js +1 -1
- package/dist/themes/_generator/tokens/css.js +2 -2
- package/dist/themes/_generator/tokens/font/font.types.d.ts +2 -2
- package/dist/themes/_generator/tokens/transforms.js +1 -1
- package/dist/themes/_generator/tokens/types.d.ts +3 -3
- package/dist/themes/_generator/transform.d.ts +1 -1
- package/dist/themes/_generator/transform.js +3 -3
- package/dist/themes/figma/theme.css +1 -1
- package/dist/themes/fragments/twitter/theme.css +1 -1
- package/dist/themes/index.d.ts +1 -1
- package/dist/themes/reshaped/theme.css +1 -1
- package/dist/themes/slate/theme.css +1 -1
- package/dist/types/config.d.ts +1 -1
- package/dist/utilities/a11y/TrapFocus.js +4 -4
- package/dist/utilities/scroll/lock.js +1 -1
- package/dist/utilities/scroll/lockStandard.js +1 -1
- package/dist/utilities/storybook/Example.js +1 -1
- package/package.json +42 -35
- package/dist/components/Accordion/tests/Accordion.stories.d.ts +0 -44
- package/dist/components/Accordion/tests/Accordion.stories.js +0 -204
- package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +0 -40
- package/dist/components/ActionBar/tests/ActionBar.stories.js +0 -223
- package/dist/components/Actionable/tests/Actionable.stories.d.ts +0 -41
- package/dist/components/Actionable/tests/Actionable.stories.js +0 -220
- package/dist/components/Alert/tests/Alert.stories.d.ts +0 -24
- package/dist/components/Alert/tests/Alert.stories.js +0 -78
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +0 -32
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +0 -246
- package/dist/components/Avatar/tests/Avatar.stories.d.ts +0 -31
- package/dist/components/Avatar/tests/Avatar.stories.js +0 -176
- package/dist/components/Badge/tests/Badge.stories.d.ts +0 -55
- package/dist/components/Badge/tests/Badge.stories.js +0 -328
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +0 -40
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +0 -187
- package/dist/components/Button/tests/Button.stories.d.ts +0 -79
- package/dist/components/Button/tests/Button.stories.js +0 -789
- package/dist/components/Calendar/tests/Calendar.stories.d.ts +0 -29
- package/dist/components/Calendar/tests/Calendar.stories.js +0 -255
- package/dist/components/Card/tests/Card.stories.d.ts +0 -52
- package/dist/components/Card/tests/Card.stories.js +0 -125
- package/dist/components/Carousel/tests/Carousel.stories.d.ts +0 -34
- package/dist/components/Carousel/tests/Carousel.stories.js +0 -224
- package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +0 -30
- package/dist/components/Checkbox/tests/Checkbox.stories.js +0 -171
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +0 -19
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +0 -83
- package/dist/components/Container/tests/Container.stories.d.ts +0 -24
- package/dist/components/Container/tests/Container.stories.js +0 -75
- package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +0 -26
- package/dist/components/ContextMenu/tests/ContextMenu.stories.js +0 -70
- package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +0 -25
- package/dist/components/Dismissible/tests/Dismissible.stories.js +0 -97
- package/dist/components/Divider/tests/Divider.stories.d.ts +0 -20
- package/dist/components/Divider/tests/Divider.stories.js +0 -120
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +0 -53
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +0 -278
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +0 -31
- package/dist/components/FileUpload/tests/FileUpload.stories.js +0 -140
- package/dist/components/Flyout/tests/Flyout.stories.d.ts +0 -103
- package/dist/components/Flyout/tests/Flyout.stories.js +0 -738
- package/dist/components/FormControl/tests/FormControl.stories.d.ts +0 -31
- package/dist/components/FormControl/tests/FormControl.stories.js +0 -143
- package/dist/components/Grid/tests/Grid.stories.d.ts +0 -38
- package/dist/components/Grid/tests/Grid.stories.js +0 -245
- package/dist/components/Hidden/tests/Hidden.stories.d.ts +0 -16
- package/dist/components/Hidden/tests/Hidden.stories.js +0 -48
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +0 -16
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +0 -28
- package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +0 -13
- package/dist/components/Hotkey/tests/Hotkey.stories.js +0 -53
- package/dist/components/Icon/tests/Icon.stories.d.ts +0 -25
- package/dist/components/Icon/tests/Icon.stories.js +0 -113
- package/dist/components/Image/tests/Image.stories.d.ts +0 -41
- package/dist/components/Image/tests/Image.stories.js +0 -196
- package/dist/components/Link/tests/Link.stories.d.ts +0 -42
- package/dist/components/Link/tests/Link.stories.js +0 -155
- package/dist/components/Loader/tests/Loader.stories.d.ts +0 -21
- package/dist/components/Loader/tests/Loader.stories.js +0 -68
- package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +0 -59
- package/dist/components/MenuItem/tests/MenuItem.stories.js +0 -236
- package/dist/components/Modal/tests/Modal.stories.d.ts +0 -64
- package/dist/components/Modal/tests/Modal.stories.js +0 -410
- package/dist/components/NumberField/tests/NumberField.stories.d.ts +0 -28
- package/dist/components/NumberField/tests/NumberField.stories.js +0 -258
- package/dist/components/Overlay/tests/Overlay.stories.d.ts +0 -28
- package/dist/components/Overlay/tests/Overlay.stories.js +0 -202
- package/dist/components/Pagination/tests/Pagination.stories.d.ts +0 -24
- package/dist/components/Pagination/tests/Pagination.stories.js +0 -105
- package/dist/components/PinField/tests/PinField.stories.d.ts +0 -34
- package/dist/components/PinField/tests/PinField.stories.js +0 -209
- package/dist/components/Popover/tests/Popover.stories.d.ts +0 -69
- package/dist/components/Popover/tests/Popover.stories.js +0 -340
- package/dist/components/Progress/tests/Progress.stories.d.ts +0 -30
- package/dist/components/Progress/tests/Progress.stories.js +0 -102
- package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.d.ts +0 -19
- package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +0 -92
- package/dist/components/Radio/tests/Radio.stories.d.ts +0 -35
- package/dist/components/Radio/tests/Radio.stories.js +0 -162
- package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +0 -19
- package/dist/components/RadioGroup/tests/RadioGroup.stories.js +0 -77
- package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +0 -34
- package/dist/components/Reshaped/tests/Reshaped.stories.js +0 -108
- package/dist/components/Resizable/tests/Resizable.stories.d.ts +0 -38
- package/dist/components/Resizable/tests/Resizable.stories.js +0 -185
- package/dist/components/Scrim/tests/Scrim.stories.d.ts +0 -20
- package/dist/components/Scrim/tests/Scrim.stories.js +0 -67
- package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +0 -37
- package/dist/components/ScrollArea/tests/ScrollArea.stories.js +0 -244
- package/dist/components/Select/tests/Select.stories.d.ts +0 -53
- package/dist/components/Select/tests/Select.stories.js +0 -616
- package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +0 -20
- package/dist/components/Skeleton/tests/Skeleton.stories.js +0 -63
- package/dist/components/Slider/tests/Slider.stories.d.ts +0 -47
- package/dist/components/Slider/tests/Slider.stories.js +0 -279
- package/dist/components/Stepper/tests/Stepper.stories.d.ts +0 -31
- package/dist/components/Stepper/tests/Stepper.stories.js +0 -135
- package/dist/components/Switch/tests/Switch.stories.d.ts +0 -22
- package/dist/components/Switch/tests/Switch.stories.js +0 -137
- package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -13
- package/dist/components/Switch/tests/Switch.test.stories.js +0 -11
- package/dist/components/Table/tests/Table.stories.d.ts +0 -42
- package/dist/components/Table/tests/Table.stories.js +0 -348
- package/dist/components/Tabs/tests/Tabs.stories.d.ts +0 -62
- package/dist/components/Tabs/tests/Tabs.stories.js +0 -539
- package/dist/components/Text/tests/Text.stories.d.ts +0 -48
- package/dist/components/Text/tests/Text.stories.js +0 -201
- package/dist/components/TextArea/tests/TextArea.stories.d.ts +0 -53
- package/dist/components/TextArea/tests/TextArea.stories.js +0 -204
- package/dist/components/TextField/tests/TextField.stories.d.ts +0 -54
- package/dist/components/TextField/tests/TextField.stories.js +0 -252
- package/dist/components/Theme/tests/Theme.stories.d.ts +0 -25
- package/dist/components/Theme/tests/Theme.stories.js +0 -171
- package/dist/components/Timeline/tests/Timeline.stories.d.ts +0 -22
- package/dist/components/Timeline/tests/Timeline.stories.js +0 -86
- package/dist/components/Toast/tests/Toast.stories.d.ts +0 -41
- package/dist/components/Toast/tests/Toast.stories.js +0 -432
- package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +0 -27
- package/dist/components/ToggleButton/tests/ToggleButton.stories.js +0 -97
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +0 -27
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +0 -169
- package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +0 -28
- package/dist/components/Tooltip/tests/Tooltip.stories.js +0 -182
- package/dist/components/View/tests/View.stories.d.ts +0 -141
- package/dist/components/View/tests/View.stories.js +0 -1329
- package/dist/components/_private/HiddenInput/HiddenInput.js +0 -10
- package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts +0 -15
- package/dist/components/_private/Portal/tests/Portal.stories.d.ts +0 -6
- package/dist/components/_private/Portal/tests/Portal.stories.js +0 -17
- package/dist/hooks/tests/useDrag.stories.d.ts +0 -31
- package/dist/hooks/tests/useDrag.stories.js +0 -147
- package/dist/hooks/tests/useElementId.stories.d.ts +0 -11
- package/dist/hooks/tests/useElementId.stories.js +0 -23
- package/dist/hooks/tests/useHandlerRef.stories.d.ts +0 -14
- package/dist/hooks/tests/useHandlerRef.stories.js +0 -44
- package/dist/hooks/tests/useHotkeys.stories.d.ts +0 -43
- package/dist/hooks/tests/useHotkeys.stories.js +0 -158
- package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts +0 -15
- package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +0 -128
- package/dist/hooks/tests/useKeyboardMode.stories.d.ts +0 -11
- package/dist/hooks/tests/useKeyboardMode.stories.js +0 -42
- package/dist/hooks/tests/useOnClickOutside.stories.d.ts +0 -23
- package/dist/hooks/tests/useOnClickOutside.stories.js +0 -111
- package/dist/hooks/tests/useRTL.stories.d.ts +0 -11
- package/dist/hooks/tests/useRTL.stories.js +0 -23
- package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts +0 -18
- package/dist/hooks/tests/useResponsiveClientValue.stories.js +0 -30
- package/dist/hooks/tests/useScrollLock.stories.d.ts +0 -14
- package/dist/hooks/tests/useScrollLock.stories.js +0 -97
- package/dist/hooks/tests/useToggle.stories.d.ts +0 -13
- package/dist/hooks/tests/useToggle.stories.js +0 -59
- package/dist/tests/ShadowDOM.stories.d.ts +0 -6
- package/dist/tests/ShadowDOM.stories.js +0 -110
- package/dist/tests/themes.stories.d.ts +0 -16
- package/dist/tests/themes.stories.js +0 -327
- package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts +0 -14
- package/dist/utilities/a11y/tests/TrapFocus.stories.js +0 -615
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.d.ts +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.module.css +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.types.js +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/index.d.ts +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/index.js +0 -0
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import { type Mock } from "storybook/test";
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: import("react").FC<import("./..").CalendarProps>;
|
|
6
|
-
parameters: {
|
|
7
|
-
iframe: {
|
|
8
|
-
url: string;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export default _default;
|
|
13
|
-
export declare const defaultMonth: StoryObj;
|
|
14
|
-
export declare const uncontrolled: StoryObj<{
|
|
15
|
-
handleChange: Mock;
|
|
16
|
-
}>;
|
|
17
|
-
export declare const controlled: StoryObj<{
|
|
18
|
-
handleChange: Mock;
|
|
19
|
-
}>;
|
|
20
|
-
export declare const selectedDates: StoryObj;
|
|
21
|
-
export declare const minMax: StoryObj;
|
|
22
|
-
export declare const firstWeekDay: StoryObj;
|
|
23
|
-
export declare const translation: {
|
|
24
|
-
name: string;
|
|
25
|
-
render: () => import("react").JSX.Element;
|
|
26
|
-
};
|
|
27
|
-
export declare const ariaLabels: StoryObj;
|
|
28
|
-
export declare const monthSelection: StoryObj;
|
|
29
|
-
export declare const keyboardNavigation: StoryObj;
|
|
@@ -1,255 +0,0 @@
|
|
|
1
|
-
import { fn, expect, userEvent, within, waitFor } from "storybook/test";
|
|
2
|
-
import { Example } from "../../../utilities/storybook/index.js";
|
|
3
|
-
import Calendar from "../index.js";
|
|
4
|
-
export default {
|
|
5
|
-
title: "Components/Calendar",
|
|
6
|
-
component: Calendar,
|
|
7
|
-
parameters: {
|
|
8
|
-
iframe: {
|
|
9
|
-
url: "https://reshaped.so/docs/components/calendar",
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
};
|
|
13
|
-
export const defaultMonth = {
|
|
14
|
-
name: "defaultMonth",
|
|
15
|
-
render: () => (<Example>
|
|
16
|
-
<Example.Item title="defaultMonth: 2020 January">
|
|
17
|
-
<Calendar defaultMonth={new Date(2020, 0)} range/>
|
|
18
|
-
</Example.Item>
|
|
19
|
-
</Example>),
|
|
20
|
-
play: ({ canvas }) => {
|
|
21
|
-
const grid = canvas.getByRole("grid");
|
|
22
|
-
const gridCells = canvas.getAllByRole("gridcell");
|
|
23
|
-
const dates = canvas.getAllByRole("checkbox");
|
|
24
|
-
const [prevButton, monthButton, nextButton] = canvas.getAllByRole("button");
|
|
25
|
-
expect(grid).toBeInTheDocument();
|
|
26
|
-
expect(gridCells).toHaveLength(31);
|
|
27
|
-
expect(dates).toHaveLength(31);
|
|
28
|
-
const focusableDates = dates.filter((el) => {
|
|
29
|
-
return el.getAttribute("tabIndex") === "0";
|
|
30
|
-
});
|
|
31
|
-
// Defaults keyboard focus to the first day of the month
|
|
32
|
-
expect(focusableDates).toHaveLength(1);
|
|
33
|
-
expect(focusableDates[0]).toBe(dates[0]);
|
|
34
|
-
// Default Labels
|
|
35
|
-
expect(dates[0]).toHaveAccessibleName("Wednesday, January 1");
|
|
36
|
-
expect(prevButton).toHaveAccessibleName("Previous month");
|
|
37
|
-
expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
|
|
38
|
-
expect(nextButton).toHaveAccessibleName("Next month");
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
export const uncontrolled = {
|
|
42
|
-
name: "defaultValue, range",
|
|
43
|
-
args: {
|
|
44
|
-
handleChange: fn(),
|
|
45
|
-
},
|
|
46
|
-
render: (args) => (<Example>
|
|
47
|
-
<Example.Item title="defaultValue">
|
|
48
|
-
<Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
|
|
49
|
-
</Example.Item>
|
|
50
|
-
<Example.Item title="defaultValue, range">
|
|
51
|
-
<Calendar range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
|
|
52
|
-
</Example.Item>
|
|
53
|
-
</Example>),
|
|
54
|
-
play: async ({ canvas, args }) => {
|
|
55
|
-
const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
|
|
56
|
-
const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
|
|
57
|
-
const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
|
|
58
|
-
await userEvent.click(singleCalendarDates[7]);
|
|
59
|
-
expect(singleCalendarDates[7]).toBeChecked();
|
|
60
|
-
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
|
61
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
|
|
62
|
-
await userEvent.click(rangeCalendarDates[7]);
|
|
63
|
-
expect(rangeCalendarDates[7]).toBeChecked();
|
|
64
|
-
expect(args.handleChange).toHaveBeenCalledTimes(2);
|
|
65
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
66
|
-
value: { start: new Date(2020, 0, 8), end: null },
|
|
67
|
-
});
|
|
68
|
-
// While selecting end value, clicking on a date < start value should change the start value
|
|
69
|
-
await userEvent.click(rangeCalendarDates[6]);
|
|
70
|
-
expect(rangeCalendarDates[6]).toBeChecked();
|
|
71
|
-
expect(rangeCalendarDates[7]).not.toBeChecked();
|
|
72
|
-
expect(args.handleChange).toHaveBeenCalledTimes(3);
|
|
73
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
74
|
-
value: { start: new Date(2020, 0, 7), end: null },
|
|
75
|
-
});
|
|
76
|
-
await userEvent.click(rangeCalendarDates[10]);
|
|
77
|
-
expect(args.handleChange).toHaveBeenCalledTimes(4);
|
|
78
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
79
|
-
value: { start: new Date(2020, 0, 7), end: new Date(2020, 0, 11) },
|
|
80
|
-
});
|
|
81
|
-
for (let i = 6; i < 10; i++) {
|
|
82
|
-
expect(rangeCalendarDates[i]).toBeChecked();
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
};
|
|
86
|
-
export const controlled = {
|
|
87
|
-
name: "value, range",
|
|
88
|
-
args: {
|
|
89
|
-
handleChange: fn(),
|
|
90
|
-
},
|
|
91
|
-
render: (args) => (<Example>
|
|
92
|
-
<Example.Item title="value">
|
|
93
|
-
<Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
|
|
94
|
-
</Example.Item>
|
|
95
|
-
<Example.Item title="defaultValue, range">
|
|
96
|
-
<Calendar range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
|
|
97
|
-
</Example.Item>
|
|
98
|
-
</Example>),
|
|
99
|
-
play: async ({ canvas, args }) => {
|
|
100
|
-
const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
|
|
101
|
-
const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
|
|
102
|
-
const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
|
|
103
|
-
await userEvent.click(singleCalendarDates[7]);
|
|
104
|
-
expect(singleCalendarDates[7]).not.toBeChecked();
|
|
105
|
-
expect(singleCalendarDates[9]).toBeChecked();
|
|
106
|
-
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
|
107
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
|
|
108
|
-
await userEvent.click(rangeCalendarDates[7]);
|
|
109
|
-
expect(rangeCalendarDates[7]).not.toBeChecked();
|
|
110
|
-
expect(rangeCalendarDates[9]).toBeChecked();
|
|
111
|
-
expect(args.handleChange).toHaveBeenCalledTimes(2);
|
|
112
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
113
|
-
value: { start: new Date(2020, 0, 8), end: null },
|
|
114
|
-
});
|
|
115
|
-
// While selecting end value, clicking on a date < start value should change the start value
|
|
116
|
-
await userEvent.click(rangeCalendarDates[6]);
|
|
117
|
-
expect(rangeCalendarDates[6]).not.toBeChecked();
|
|
118
|
-
expect(rangeCalendarDates[9]).toBeChecked();
|
|
119
|
-
expect(args.handleChange).toHaveBeenCalledTimes(3);
|
|
120
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
121
|
-
value: { start: new Date(2020, 0, 7), end: null },
|
|
122
|
-
});
|
|
123
|
-
// In controlled mode, clicking on a date > startValue still changes startValue since we're not updating the state
|
|
124
|
-
await userEvent.click(rangeCalendarDates[10]);
|
|
125
|
-
expect(args.handleChange).toHaveBeenCalledTimes(4);
|
|
126
|
-
expect(args.handleChange).toHaveBeenLastCalledWith({
|
|
127
|
-
value: { start: new Date(2020, 0, 11), end: null },
|
|
128
|
-
});
|
|
129
|
-
expect(rangeCalendarDates[6]).not.toBeChecked();
|
|
130
|
-
expect(rangeCalendarDates[9]).toBeChecked();
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
export const selectedDates = {
|
|
134
|
-
name: "selectedDates",
|
|
135
|
-
render: () => (<Example>
|
|
136
|
-
<Example.Item title="selectedDates: [4,8]">
|
|
137
|
-
<Calendar defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
|
|
138
|
-
</Example.Item>
|
|
139
|
-
</Example>),
|
|
140
|
-
play: ({ canvas }) => {
|
|
141
|
-
const dates = canvas.getAllByRole("checkbox");
|
|
142
|
-
expect(dates[3]).toBeChecked();
|
|
143
|
-
expect(dates[7]).toBeChecked();
|
|
144
|
-
},
|
|
145
|
-
};
|
|
146
|
-
export const minMax = {
|
|
147
|
-
name: "min, max",
|
|
148
|
-
render: () => (<Example>
|
|
149
|
-
<Example.Item title="min: 4, max: 20">
|
|
150
|
-
<Calendar defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
|
|
151
|
-
</Example.Item>
|
|
152
|
-
</Example>),
|
|
153
|
-
play: ({ canvas }) => {
|
|
154
|
-
const dates = canvas.getAllByRole("checkbox");
|
|
155
|
-
expect(dates).toHaveLength(17);
|
|
156
|
-
},
|
|
157
|
-
};
|
|
158
|
-
export const firstWeekDay = {
|
|
159
|
-
name: "firstWeekDay",
|
|
160
|
-
render: () => (<Example>
|
|
161
|
-
<Example.Item title="firstWeekDay: 3 (Wed)">
|
|
162
|
-
<Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
|
|
163
|
-
</Example.Item>
|
|
164
|
-
</Example>),
|
|
165
|
-
};
|
|
166
|
-
export const translation = {
|
|
167
|
-
name: "render functions",
|
|
168
|
-
render: () => (<Example>
|
|
169
|
-
<Example.Item title="translated to NL">
|
|
170
|
-
<Calendar defaultMonth={new Date(2020, 0)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
|
|
171
|
-
</Example.Item>
|
|
172
|
-
</Example>),
|
|
173
|
-
};
|
|
174
|
-
export const ariaLabels = {
|
|
175
|
-
name: "aria labels",
|
|
176
|
-
render: () => (<Example>
|
|
177
|
-
<Example.Item title="aria labels">
|
|
178
|
-
<Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>
|
|
179
|
-
</Example.Item>
|
|
180
|
-
</Example>),
|
|
181
|
-
play: async ({ canvas }) => {
|
|
182
|
-
const buttonEls = canvas.getAllByRole("button");
|
|
183
|
-
const dateEls = canvas.getAllByRole("checkbox");
|
|
184
|
-
expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
|
|
185
|
-
expect(buttonEls[1]).toHaveTextContent("Test month selection");
|
|
186
|
-
expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
|
|
187
|
-
expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
|
|
188
|
-
await userEvent.click(buttonEls[1], { delay: null });
|
|
189
|
-
const yearButtonEls = canvas.getAllByRole("button");
|
|
190
|
-
expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
|
|
191
|
-
expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
|
|
192
|
-
expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
|
|
193
|
-
},
|
|
194
|
-
};
|
|
195
|
-
export const monthSelection = {
|
|
196
|
-
name: "test: month selection",
|
|
197
|
-
render: () => (<Example>
|
|
198
|
-
<Example.Item title="month selection">
|
|
199
|
-
<Calendar defaultMonth={new Date(2020, 1)}/>
|
|
200
|
-
</Example.Item>
|
|
201
|
-
</Example>),
|
|
202
|
-
play: async ({ canvas }) => {
|
|
203
|
-
let buttons = canvas.getAllByRole("button");
|
|
204
|
-
let monthButton = buttons[1];
|
|
205
|
-
expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
|
|
206
|
-
await userEvent.click(monthButton);
|
|
207
|
-
let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
|
|
208
|
-
expect(months).toHaveLength(12);
|
|
209
|
-
await userEvent.click(months[0]);
|
|
210
|
-
buttons = canvas.getAllByRole("button");
|
|
211
|
-
months = buttons.filter((el) => el.hasAttribute("data-rs-date"));
|
|
212
|
-
monthButton = buttons[1];
|
|
213
|
-
expect(months).toHaveLength(0);
|
|
214
|
-
expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
|
|
215
|
-
},
|
|
216
|
-
};
|
|
217
|
-
export const keyboardNavigation = {
|
|
218
|
-
name: "test: keyboard navigation",
|
|
219
|
-
render: () => (<Example>
|
|
220
|
-
<Example.Item title="keyboard navigation">
|
|
221
|
-
<Calendar defaultMonth={new Date(2020, 0)}/>
|
|
222
|
-
</Example.Item>
|
|
223
|
-
</Example>),
|
|
224
|
-
play: async ({ canvas }) => {
|
|
225
|
-
const buttons = canvas.getAllByRole("button");
|
|
226
|
-
buttons[2].focus();
|
|
227
|
-
await userEvent.keyboard("{Tab/}");
|
|
228
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
|
|
229
|
-
await userEvent.keyboard("{ArrowRight/}");
|
|
230
|
-
waitFor(() => {
|
|
231
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
|
|
232
|
-
});
|
|
233
|
-
await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
|
|
234
|
-
await userEvent.keyboard("{Tab/}");
|
|
235
|
-
waitFor(() => {
|
|
236
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
|
|
237
|
-
});
|
|
238
|
-
await userEvent.keyboard("{ArrowLeft/}");
|
|
239
|
-
waitFor(() => {
|
|
240
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
|
|
241
|
-
});
|
|
242
|
-
await userEvent.keyboard("{ArrowDown/}");
|
|
243
|
-
waitFor(() => {
|
|
244
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
|
|
245
|
-
});
|
|
246
|
-
await userEvent.keyboard("{ArrowUp/}");
|
|
247
|
-
waitFor(() => {
|
|
248
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
|
|
249
|
-
});
|
|
250
|
-
await userEvent.keyboard("{ArrowUp/}");
|
|
251
|
-
waitFor(() => {
|
|
252
|
-
expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
|
|
253
|
-
});
|
|
254
|
-
},
|
|
255
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StoryObj } from "@storybook/react-vite";
|
|
3
|
-
import { fn } from "storybook/test";
|
|
4
|
-
declare const _default: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: React.ForwardRefExoticComponent<{
|
|
7
|
-
padding?: import("../../../types/global").Responsive<number>;
|
|
8
|
-
bleed?: import("../../../types/global").Responsive<number>;
|
|
9
|
-
selected?: boolean;
|
|
10
|
-
elevated?: boolean;
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
onClick?: import("../../Actionable").ActionableProps["onClick"];
|
|
13
|
-
href?: string;
|
|
14
|
-
as?: keyof React.JSX.IntrinsicElements | undefined;
|
|
15
|
-
className?: import("../../../types/global").ClassName;
|
|
16
|
-
attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "className" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
|
17
|
-
ref?: import("../../Actionable/Actionable.types").AttributesRef;
|
|
18
|
-
}) | undefined)) | undefined;
|
|
19
|
-
} & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
|
20
|
-
parameters: {
|
|
21
|
-
iframe: {
|
|
22
|
-
url: string;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
export default _default;
|
|
27
|
-
export declare const padding: {
|
|
28
|
-
name: string;
|
|
29
|
-
render: () => React.JSX.Element;
|
|
30
|
-
};
|
|
31
|
-
export declare const selected: {
|
|
32
|
-
name: string;
|
|
33
|
-
render: () => React.JSX.Element;
|
|
34
|
-
};
|
|
35
|
-
export declare const elevated: {
|
|
36
|
-
name: string;
|
|
37
|
-
render: () => React.JSX.Element;
|
|
38
|
-
};
|
|
39
|
-
export declare const bleed: {
|
|
40
|
-
name: string;
|
|
41
|
-
render: () => React.JSX.Element;
|
|
42
|
-
};
|
|
43
|
-
export declare const height: {
|
|
44
|
-
name: string;
|
|
45
|
-
render: () => React.JSX.Element;
|
|
46
|
-
};
|
|
47
|
-
export declare const onClick: StoryObj<{
|
|
48
|
-
handleClick: ReturnType<typeof fn>;
|
|
49
|
-
}>;
|
|
50
|
-
export declare const href: StoryObj;
|
|
51
|
-
export declare const as: StoryObj;
|
|
52
|
-
export declare const className: StoryObj;
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Example, Placeholder } from "../../../utilities/storybook/index.js";
|
|
3
|
-
import Card from "../index.js";
|
|
4
|
-
import { expect, fn, userEvent } from "storybook/test";
|
|
5
|
-
export default {
|
|
6
|
-
title: "Components/Card",
|
|
7
|
-
component: Card,
|
|
8
|
-
parameters: {
|
|
9
|
-
iframe: {
|
|
10
|
-
url: "https://reshaped.so/docs/components/card",
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
};
|
|
14
|
-
export const padding = {
|
|
15
|
-
name: "padding",
|
|
16
|
-
render: () => (<Example>
|
|
17
|
-
<Example.Item title="padding: default">
|
|
18
|
-
<Card>
|
|
19
|
-
<Placeholder />
|
|
20
|
-
</Card>
|
|
21
|
-
</Example.Item>
|
|
22
|
-
|
|
23
|
-
<Example.Item title="padding: 2">
|
|
24
|
-
<Card padding={2}>
|
|
25
|
-
<Placeholder />
|
|
26
|
-
</Card>
|
|
27
|
-
</Example.Item>
|
|
28
|
-
|
|
29
|
-
<Example.Item title="padding: 0">
|
|
30
|
-
<Card padding={0}>
|
|
31
|
-
<Placeholder />
|
|
32
|
-
</Card>
|
|
33
|
-
</Example.Item>
|
|
34
|
-
|
|
35
|
-
<Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
|
|
36
|
-
<Card padding={{ s: 4, m: 8 }}>
|
|
37
|
-
<Placeholder />
|
|
38
|
-
</Card>
|
|
39
|
-
</Example.Item>
|
|
40
|
-
</Example>),
|
|
41
|
-
};
|
|
42
|
-
export const selected = {
|
|
43
|
-
name: "selected",
|
|
44
|
-
render: () => (<Example>
|
|
45
|
-
<Example.Item title="selected">
|
|
46
|
-
<Card selected>
|
|
47
|
-
<Placeholder />
|
|
48
|
-
</Card>
|
|
49
|
-
</Example.Item>
|
|
50
|
-
</Example>),
|
|
51
|
-
};
|
|
52
|
-
export const elevated = {
|
|
53
|
-
name: "elevated",
|
|
54
|
-
render: () => (<Example>
|
|
55
|
-
<Example.Item title="elevated">
|
|
56
|
-
<Card elevated>
|
|
57
|
-
<Placeholder />
|
|
58
|
-
</Card>
|
|
59
|
-
</Example.Item>
|
|
60
|
-
</Example>),
|
|
61
|
-
};
|
|
62
|
-
export const bleed = {
|
|
63
|
-
name: "bleed",
|
|
64
|
-
render: () => (<Example>
|
|
65
|
-
<Example.Item title="bleed: 4">
|
|
66
|
-
<Card bleed={4}>
|
|
67
|
-
<Placeholder />
|
|
68
|
-
</Card>
|
|
69
|
-
</Example.Item>
|
|
70
|
-
<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
|
|
71
|
-
<Card bleed={{ s: 4, m: 0 }}>
|
|
72
|
-
<Placeholder />
|
|
73
|
-
</Card>
|
|
74
|
-
</Example.Item>
|
|
75
|
-
</Example>),
|
|
76
|
-
};
|
|
77
|
-
export const height = {
|
|
78
|
-
name: "height",
|
|
79
|
-
render: () => (<Example>
|
|
80
|
-
<Example.Item title="height: 200px">
|
|
81
|
-
<Card height="200px"/>
|
|
82
|
-
</Example.Item>
|
|
83
|
-
</Example>),
|
|
84
|
-
};
|
|
85
|
-
export const onClick = {
|
|
86
|
-
name: "onClick",
|
|
87
|
-
args: {
|
|
88
|
-
handleClick: fn(),
|
|
89
|
-
},
|
|
90
|
-
render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
|
|
91
|
-
play: async ({ canvas, args }) => {
|
|
92
|
-
const { handleClick } = args;
|
|
93
|
-
const el = canvas.getAllByRole("button")[0];
|
|
94
|
-
await userEvent.click(el);
|
|
95
|
-
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
96
|
-
expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
export const href = {
|
|
100
|
-
name: "href",
|
|
101
|
-
render: () => <Card href="https://reshaped.so">Trigger</Card>,
|
|
102
|
-
play: async ({ canvas }) => {
|
|
103
|
-
const el = canvas.getByRole("link");
|
|
104
|
-
expect(el).toHaveAttribute("href", "https://reshaped.so");
|
|
105
|
-
},
|
|
106
|
-
};
|
|
107
|
-
export const as = {
|
|
108
|
-
name: "as",
|
|
109
|
-
render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
|
|
110
|
-
play: ({ canvas }) => {
|
|
111
|
-
const root = canvas.getByTestId("root");
|
|
112
|
-
expect(root.tagName).toBe("SPAN");
|
|
113
|
-
},
|
|
114
|
-
};
|
|
115
|
-
export const className = {
|
|
116
|
-
name: "className, attributes",
|
|
117
|
-
render: () => (<div data-testid="root">
|
|
118
|
-
<Card className="test-classname" attributes={{ id: "test-id" }}/>
|
|
119
|
-
</div>),
|
|
120
|
-
play: async ({ canvas }) => {
|
|
121
|
-
const root = canvas.getByTestId("root").firstChild;
|
|
122
|
-
expect(root).toHaveClass("test-classname");
|
|
123
|
-
expect(root).toHaveAttribute("id", "test-id");
|
|
124
|
-
},
|
|
125
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StoryObj } from "@storybook/react-vite";
|
|
3
|
-
import { fn } from "storybook/test";
|
|
4
|
-
declare const _default: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: React.FC<import("./..").CarouselProps>;
|
|
7
|
-
parameters: {
|
|
8
|
-
a11y: {
|
|
9
|
-
disable: boolean;
|
|
10
|
-
};
|
|
11
|
-
iframe: {
|
|
12
|
-
url: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
export default _default;
|
|
17
|
-
export declare const base: StoryObj;
|
|
18
|
-
export declare const visibleItems: {
|
|
19
|
-
name: string;
|
|
20
|
-
render: () => React.JSX.Element;
|
|
21
|
-
};
|
|
22
|
-
export declare const gap: {
|
|
23
|
-
name: string;
|
|
24
|
-
render: () => React.JSX.Element;
|
|
25
|
-
};
|
|
26
|
-
export declare const bleed: {
|
|
27
|
-
name: string;
|
|
28
|
-
render: () => React.JSX.Element;
|
|
29
|
-
};
|
|
30
|
-
export declare const navigationDisplay: StoryObj;
|
|
31
|
-
export declare const instanceRef: StoryObj<{
|
|
32
|
-
handleChange: ReturnType<typeof fn>;
|
|
33
|
-
}>;
|
|
34
|
-
export declare const className: StoryObj;
|