reshaped 3.8.8 → 3.9.0-canary.1

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.
Files changed (191) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.js +11 -11
  3. package/dist/components/Button/Button.module.css +1 -1
  4. package/dist/components/Card/Card.d.ts +1 -1
  5. package/dist/components/Divider/Divider.js +3 -3
  6. package/dist/components/Divider/Divider.module.css +1 -1
  7. package/dist/components/Divider/Divider.types.d.ts +6 -0
  8. package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
  9. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +1 -1
  10. package/dist/components/Flyout/Flyout.constants.d.ts +1 -3
  11. package/dist/components/Flyout/Flyout.constants.js +1 -3
  12. package/dist/components/Flyout/Flyout.types.d.ts +2 -0
  13. package/dist/components/Flyout/FlyoutControlled.js +10 -11
  14. package/dist/components/Flyout/utilities/cooldown.js +1 -2
  15. package/dist/components/Icon/Icon.module.css +1 -1
  16. package/dist/components/Popover/Popover.types.d.ts +1 -1
  17. package/dist/components/Progress/Progress.module.css +1 -1
  18. package/dist/components/Select/Select.module.css +1 -1
  19. package/dist/components/Select/Select.types.d.ts +16 -11
  20. package/dist/components/Select/SelectCustomControlled.js +27 -10
  21. package/dist/components/Select/SelectGroup.d.ts +4 -0
  22. package/dist/components/Select/SelectGroup.js +10 -0
  23. package/dist/components/Select/SelectTrigger.js +1 -1
  24. package/dist/components/Select/index.d.ts +3 -2
  25. package/dist/components/Select/index.js +3 -2
  26. package/dist/components/Tabs/TabsContext.d.ts +1 -1
  27. package/dist/components/TextArea/TextArea.module.css +1 -1
  28. package/dist/components/TextArea/TextArea.types.d.ts +1 -1
  29. package/dist/components/TextField/TextField.module.css +1 -1
  30. package/dist/components/TextField/TextField.types.d.ts +1 -1
  31. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  32. package/dist/config/tailwind.d.ts +1 -1
  33. package/package.json +31 -30
  34. package/dist/components/Accordion/tests/Accordion.stories.d.ts +0 -44
  35. package/dist/components/Accordion/tests/Accordion.stories.js +0 -204
  36. package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +0 -40
  37. package/dist/components/ActionBar/tests/ActionBar.stories.js +0 -223
  38. package/dist/components/Actionable/tests/Actionable.stories.d.ts +0 -41
  39. package/dist/components/Actionable/tests/Actionable.stories.js +0 -220
  40. package/dist/components/Alert/tests/Alert.stories.d.ts +0 -24
  41. package/dist/components/Alert/tests/Alert.stories.js +0 -78
  42. package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +0 -32
  43. package/dist/components/Autocomplete/tests/Autocomplete.stories.js +0 -246
  44. package/dist/components/Avatar/tests/Avatar.stories.d.ts +0 -31
  45. package/dist/components/Avatar/tests/Avatar.stories.js +0 -176
  46. package/dist/components/Badge/tests/Badge.stories.d.ts +0 -55
  47. package/dist/components/Badge/tests/Badge.stories.js +0 -328
  48. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +0 -40
  49. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +0 -187
  50. package/dist/components/Button/tests/Button.stories.d.ts +0 -79
  51. package/dist/components/Button/tests/Button.stories.js +0 -789
  52. package/dist/components/Calendar/tests/Calendar.stories.d.ts +0 -29
  53. package/dist/components/Calendar/tests/Calendar.stories.js +0 -255
  54. package/dist/components/Card/tests/Card.stories.d.ts +0 -52
  55. package/dist/components/Card/tests/Card.stories.js +0 -125
  56. package/dist/components/Carousel/tests/Carousel.stories.d.ts +0 -34
  57. package/dist/components/Carousel/tests/Carousel.stories.js +0 -224
  58. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +0 -30
  59. package/dist/components/Checkbox/tests/Checkbox.stories.js +0 -171
  60. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +0 -19
  61. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +0 -83
  62. package/dist/components/Container/tests/Container.stories.d.ts +0 -24
  63. package/dist/components/Container/tests/Container.stories.js +0 -75
  64. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +0 -26
  65. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +0 -70
  66. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +0 -25
  67. package/dist/components/Dismissible/tests/Dismissible.stories.js +0 -97
  68. package/dist/components/Divider/tests/Divider.stories.d.ts +0 -18
  69. package/dist/components/Divider/tests/Divider.stories.js +0 -94
  70. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +0 -53
  71. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +0 -278
  72. package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +0 -31
  73. package/dist/components/FileUpload/tests/FileUpload.stories.js +0 -140
  74. package/dist/components/Flyout/tests/Flyout.stories.d.ts +0 -102
  75. package/dist/components/Flyout/tests/Flyout.stories.js +0 -708
  76. package/dist/components/FormControl/tests/FormControl.stories.d.ts +0 -31
  77. package/dist/components/FormControl/tests/FormControl.stories.js +0 -143
  78. package/dist/components/Grid/tests/Grid.stories.d.ts +0 -38
  79. package/dist/components/Grid/tests/Grid.stories.js +0 -245
  80. package/dist/components/Hidden/tests/Hidden.stories.d.ts +0 -16
  81. package/dist/components/Hidden/tests/Hidden.stories.js +0 -48
  82. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +0 -16
  83. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +0 -28
  84. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +0 -13
  85. package/dist/components/Hotkey/tests/Hotkey.stories.js +0 -53
  86. package/dist/components/Icon/tests/Icon.stories.d.ts +0 -25
  87. package/dist/components/Icon/tests/Icon.stories.js +0 -113
  88. package/dist/components/Image/tests/Image.stories.d.ts +0 -41
  89. package/dist/components/Image/tests/Image.stories.js +0 -196
  90. package/dist/components/Link/tests/Link.stories.d.ts +0 -42
  91. package/dist/components/Link/tests/Link.stories.js +0 -155
  92. package/dist/components/Loader/tests/Loader.stories.d.ts +0 -21
  93. package/dist/components/Loader/tests/Loader.stories.js +0 -68
  94. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +0 -59
  95. package/dist/components/MenuItem/tests/MenuItem.stories.js +0 -236
  96. package/dist/components/Modal/tests/Modal.stories.d.ts +0 -64
  97. package/dist/components/Modal/tests/Modal.stories.js +0 -410
  98. package/dist/components/NumberField/tests/NumberField.stories.d.ts +0 -28
  99. package/dist/components/NumberField/tests/NumberField.stories.js +0 -258
  100. package/dist/components/Overlay/tests/Overlay.stories.d.ts +0 -28
  101. package/dist/components/Overlay/tests/Overlay.stories.js +0 -202
  102. package/dist/components/Pagination/tests/Pagination.stories.d.ts +0 -24
  103. package/dist/components/Pagination/tests/Pagination.stories.js +0 -105
  104. package/dist/components/PinField/tests/PinField.stories.d.ts +0 -34
  105. package/dist/components/PinField/tests/PinField.stories.js +0 -209
  106. package/dist/components/Popover/tests/Popover.stories.d.ts +0 -69
  107. package/dist/components/Popover/tests/Popover.stories.js +0 -340
  108. package/dist/components/Progress/tests/Progress.stories.d.ts +0 -30
  109. package/dist/components/Progress/tests/Progress.stories.js +0 -102
  110. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.d.ts +0 -19
  111. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +0 -92
  112. package/dist/components/Radio/tests/Radio.stories.d.ts +0 -35
  113. package/dist/components/Radio/tests/Radio.stories.js +0 -162
  114. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +0 -19
  115. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +0 -77
  116. package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +0 -34
  117. package/dist/components/Reshaped/tests/Reshaped.stories.js +0 -108
  118. package/dist/components/Resizable/tests/Resizable.stories.d.ts +0 -38
  119. package/dist/components/Resizable/tests/Resizable.stories.js +0 -185
  120. package/dist/components/Scrim/tests/Scrim.stories.d.ts +0 -20
  121. package/dist/components/Scrim/tests/Scrim.stories.js +0 -67
  122. package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +0 -37
  123. package/dist/components/ScrollArea/tests/ScrollArea.stories.js +0 -244
  124. package/dist/components/Select/SelectOptionGroup.d.ts +0 -4
  125. package/dist/components/Select/SelectOptionGroup.js +0 -9
  126. package/dist/components/Select/tests/Select.stories.d.ts +0 -47
  127. package/dist/components/Select/tests/Select.stories.js +0 -520
  128. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +0 -20
  129. package/dist/components/Skeleton/tests/Skeleton.stories.js +0 -63
  130. package/dist/components/Slider/tests/Slider.stories.d.ts +0 -47
  131. package/dist/components/Slider/tests/Slider.stories.js +0 -279
  132. package/dist/components/Stepper/tests/Stepper.stories.d.ts +0 -31
  133. package/dist/components/Stepper/tests/Stepper.stories.js +0 -135
  134. package/dist/components/Switch/tests/Switch.stories.d.ts +0 -22
  135. package/dist/components/Switch/tests/Switch.stories.js +0 -137
  136. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -13
  137. package/dist/components/Switch/tests/Switch.test.stories.js +0 -11
  138. package/dist/components/Table/tests/Table.stories.d.ts +0 -42
  139. package/dist/components/Table/tests/Table.stories.js +0 -348
  140. package/dist/components/Tabs/tests/Tabs.stories.d.ts +0 -62
  141. package/dist/components/Tabs/tests/Tabs.stories.js +0 -539
  142. package/dist/components/Text/tests/Text.stories.d.ts +0 -48
  143. package/dist/components/Text/tests/Text.stories.js +0 -201
  144. package/dist/components/TextArea/tests/TextArea.stories.d.ts +0 -53
  145. package/dist/components/TextArea/tests/TextArea.stories.js +0 -200
  146. package/dist/components/TextField/tests/TextField.stories.d.ts +0 -53
  147. package/dist/components/TextField/tests/TextField.stories.js +0 -237
  148. package/dist/components/Theme/tests/Theme.stories.d.ts +0 -25
  149. package/dist/components/Theme/tests/Theme.stories.js +0 -171
  150. package/dist/components/Timeline/tests/Timeline.stories.d.ts +0 -22
  151. package/dist/components/Timeline/tests/Timeline.stories.js +0 -86
  152. package/dist/components/Toast/tests/Toast.stories.d.ts +0 -41
  153. package/dist/components/Toast/tests/Toast.stories.js +0 -432
  154. package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +0 -27
  155. package/dist/components/ToggleButton/tests/ToggleButton.stories.js +0 -97
  156. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +0 -27
  157. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +0 -169
  158. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +0 -28
  159. package/dist/components/Tooltip/tests/Tooltip.stories.js +0 -182
  160. package/dist/components/View/tests/View.stories.d.ts +0 -141
  161. package/dist/components/View/tests/View.stories.js +0 -1329
  162. package/dist/components/_private/Portal/tests/Portal.stories.d.ts +0 -6
  163. package/dist/components/_private/Portal/tests/Portal.stories.js +0 -17
  164. package/dist/hooks/tests/useDrag.stories.d.ts +0 -31
  165. package/dist/hooks/tests/useDrag.stories.js +0 -147
  166. package/dist/hooks/tests/useElementId.stories.d.ts +0 -11
  167. package/dist/hooks/tests/useElementId.stories.js +0 -23
  168. package/dist/hooks/tests/useHandlerRef.stories.d.ts +0 -14
  169. package/dist/hooks/tests/useHandlerRef.stories.js +0 -44
  170. package/dist/hooks/tests/useHotkeys.stories.d.ts +0 -43
  171. package/dist/hooks/tests/useHotkeys.stories.js +0 -158
  172. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts +0 -15
  173. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +0 -128
  174. package/dist/hooks/tests/useKeyboardMode.stories.d.ts +0 -11
  175. package/dist/hooks/tests/useKeyboardMode.stories.js +0 -42
  176. package/dist/hooks/tests/useOnClickOutside.stories.d.ts +0 -23
  177. package/dist/hooks/tests/useOnClickOutside.stories.js +0 -111
  178. package/dist/hooks/tests/useRTL.stories.d.ts +0 -11
  179. package/dist/hooks/tests/useRTL.stories.js +0 -23
  180. package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts +0 -18
  181. package/dist/hooks/tests/useResponsiveClientValue.stories.js +0 -30
  182. package/dist/hooks/tests/useScrollLock.stories.d.ts +0 -14
  183. package/dist/hooks/tests/useScrollLock.stories.js +0 -97
  184. package/dist/hooks/tests/useToggle.stories.d.ts +0 -13
  185. package/dist/hooks/tests/useToggle.stories.js +0 -59
  186. package/dist/tests/ShadowDOM.stories.d.ts +0 -6
  187. package/dist/tests/ShadowDOM.stories.js +0 -110
  188. package/dist/tests/themes.stories.d.ts +0 -16
  189. package/dist/tests/themes.stories.js +0 -327
  190. package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts +0 -14
  191. package/dist/utilities/a11y/tests/TrapFocus.stories.js +0 -615
@@ -1,70 +0,0 @@
1
- import { Example } from "../../../utilities/storybook/index.js";
2
- import ContextMenu from "../index.js";
3
- import View from "../../View/index.js";
4
- import { expect, fn, userEvent, waitFor, within } from "storybook/test";
5
- import { sleep } from "../../../utilities/helpers.js";
6
- export default {
7
- title: "Components/ContextMenu",
8
- component: ContextMenu,
9
- parameters: {
10
- iframe: {
11
- url: "https://reshaped.so/docs/components/context-menu",
12
- },
13
- },
14
- };
15
- export const base = {
16
- name: "base",
17
- render: () => (<Example>
18
- <Example.Item title="base">
19
- <div style={{ height: 200, overflow: "auto" }}>
20
- <ContextMenu>
21
- <View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
22
-
23
- <ContextMenu.Content>
24
- <ContextMenu.Item>Item 1</ContextMenu.Item>
25
- <ContextMenu.Item>Item 2</ContextMenu.Item>
26
- </ContextMenu.Content>
27
- </ContextMenu>
28
- </div>
29
- </Example.Item>
30
- </Example>),
31
- };
32
- export const handlers = {
33
- name: "handleOpen, handleClose",
34
- args: {
35
- handleOpen: fn(),
36
- handleClose: fn(),
37
- },
38
- render: (args) => (<div style={{ height: 200, overflow: "auto" }} data-testid="scroll">
39
- <ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
40
- <View height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
41
-
42
- <ContextMenu.Content>
43
- <ContextMenu.Item>Item</ContextMenu.Item>
44
- </ContextMenu.Content>
45
- </ContextMenu>
46
- </div>),
47
- play: async ({ canvasElement, args }) => {
48
- const canvas = within(canvasElement.ownerDocument.body);
49
- const root = canvas.getByTestId("root");
50
- const scroll = canvas.getByTestId("scroll");
51
- await userEvent.pointer({ keys: "[MouseRight>]", target: root });
52
- expect(args.handleOpen).toHaveBeenCalledTimes(1);
53
- expect(args.handleOpen).toHaveBeenCalledWith();
54
- const item = canvas.getByText("Item");
55
- expect(item).toBeInTheDocument();
56
- // Context menu locks the scroll of the closest scrollable parent
57
- expect(scroll).toHaveStyle("overflow: hidden");
58
- // Wait for the open animation to finish
59
- await sleep(500);
60
- await userEvent.click(root);
61
- expect(args.handleClose).toHaveBeenCalledTimes(1);
62
- expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
63
- await waitFor(() => {
64
- expect(item).not.toBeInTheDocument();
65
- expect(scroll).not.toHaveStyle("overflow: hidden");
66
- }, {
67
- timeout: 1000,
68
- });
69
- },
70
- };
@@ -1,25 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- import { fn } from "storybook/test";
3
- declare const _default: {
4
- title: string;
5
- components: import("react").FC<import("./..").DismissibleProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- };
11
- };
12
- export default _default;
13
- export declare const variant: {
14
- name: string;
15
- render: () => import("react").JSX.Element;
16
- };
17
- export declare const align: {
18
- name: string;
19
- render: () => import("react").JSX.Element;
20
- };
21
- export declare const hideCloseButton: StoryObj;
22
- export declare const closeAriaLabel: StoryObj<{
23
- handleClose: ReturnType<typeof fn>;
24
- }>;
25
- export declare const className: StoryObj;
@@ -1,97 +0,0 @@
1
- import { within, expect, userEvent, fn } from "storybook/test";
2
- import { Example, Placeholder } from "../../../utilities/storybook/index.js";
3
- import Dismissible from "../index.js";
4
- import Image from "../../Image/index.js";
5
- import View from "../../View/index.js";
6
- export default {
7
- title: "Utility components/Dismissible",
8
- components: Dismissible,
9
- parameters: {
10
- iframe: {
11
- url: "https://reshaped.so/docs/utilities/dismissible",
12
- },
13
- },
14
- };
15
- export const variant = {
16
- name: "variant",
17
- render: () => (<Example>
18
- <Example.Item title="variant: default">
19
- <Dismissible closeAriaLabel="Close banner" onClose={() => { }}>
20
- <Placeholder />
21
- </Dismissible>
22
- </Example.Item>
23
- <Example.Item title="variant: media">
24
- <View width="300px">
25
- <Dismissible variant="media" closeAriaLabel="Close banner" onClose={() => { }}>
26
- <View aspectRatio={16 / 9}>
27
- <Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
28
- </View>
29
- </Dismissible>
30
- </View>
31
- </Example.Item>
32
- </Example>),
33
- };
34
- export const align = {
35
- name: "align",
36
- render: () => (<Example>
37
- <Example.Item title="align: center">
38
- <Dismissible align="center" closeAriaLabel="Close" onClose={() => { }}>
39
- <Placeholder />
40
- </Dismissible>
41
- </Example.Item>
42
-
43
- <Example.Item title="align: center, variant: media">
44
- <Dismissible align="center" closeAriaLabel="Close" variant="media" onClose={() => { }}>
45
- <View aspectRatio={16 / 9}>
46
- <Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
47
- </View>
48
- </Dismissible>
49
- </Example.Item>
50
- </Example>),
51
- };
52
- export const hideCloseButton = {
53
- name: "hideCloseButton",
54
- render: () => (<Example>
55
- <Example.Item title="hide close button">
56
- <div id="root">
57
- <Dismissible hideCloseButton>
58
- <Placeholder />
59
- </Dismissible>
60
- </div>
61
- </Example.Item>
62
- </Example>),
63
- play: ({ canvasElement }) => {
64
- const root = within(canvasElement.querySelector("#root"));
65
- const button = root.queryByRole("button");
66
- expect(button).not.toBeInTheDocument();
67
- },
68
- };
69
- export const closeAriaLabel = {
70
- args: {
71
- handleClose: fn(),
72
- },
73
- name: "onClose, closeAriaLabel",
74
- render: (args) => (<Dismissible closeAriaLabel="Close" onClose={args.handleClose}>
75
- <Placeholder />
76
- </Dismissible>),
77
- play: async ({ canvas, args }) => {
78
- const button = canvas.getAllByRole("button")[0];
79
- await userEvent.click(button);
80
- expect(button).toHaveAttribute("aria-label", "Close");
81
- expect(args.handleClose).toHaveBeenCalledTimes(1);
82
- expect(args.handleClose).toHaveBeenCalledWith();
83
- },
84
- };
85
- export const className = {
86
- name: "className, attributes",
87
- render: () => (<div data-testid="root">
88
- <Dismissible closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
89
- <Placeholder />
90
- </Dismissible>
91
- </div>),
92
- play: async ({ canvas }) => {
93
- const root = canvas.getByTestId("root").firstChild;
94
- expect(root).toHaveClass("test-classname");
95
- expect(root).toHaveAttribute("id", "test-id");
96
- },
97
- };
@@ -1,18 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- component: import("react").FC<import("./..").DividerProps>;
5
- parameters: {
6
- iframe: {
7
- url: string;
8
- };
9
- };
10
- };
11
- export default _default;
12
- export declare const rendering: StoryObj;
13
- export declare const vertical: StoryObj;
14
- export declare const label: {
15
- name: string;
16
- render: () => import("react").JSX.Element;
17
- };
18
- export declare const className: StoryObj;
@@ -1,94 +0,0 @@
1
- import { Example, Placeholder } from "../../../utilities/storybook/index.js";
2
- import View from "../../View/index.js";
3
- import Divider from "../index.js";
4
- import { expect } from "storybook/test";
5
- export default {
6
- title: "Components/Divider",
7
- component: Divider,
8
- parameters: {
9
- iframe: {
10
- url: "https://reshaped.so/docs/components/divider",
11
- },
12
- },
13
- };
14
- export const rendering = {
15
- name: "base",
16
- render: () => (<Example>
17
- <Example.Item title="default rendering">
18
- <Divider />
19
- </Example.Item>
20
-
21
- <Example.Item title={["blank rendering", "box should overlap with divider"]}>
22
- <View width="40px" height="10px" backgroundColor="primary"/>
23
- <Divider blank/>
24
- </Example.Item>
25
- </Example>),
26
- play: async ({ canvas }) => {
27
- const [el] = canvas.getAllByRole("separator");
28
- expect(el).toHaveAttribute("aria-orientation", "horizontal");
29
- },
30
- };
31
- export const vertical = {
32
- name: "vertical",
33
- render: () => (<Example>
34
- <Example.Item title="vertical">
35
- <View gap={3} direction="row" align="stretch">
36
- <Placeholder />
37
- <View.Item>
38
- <Divider vertical/>
39
- </View.Item>
40
- <Placeholder />
41
- </View>
42
- </Example.Item>
43
-
44
- <Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
45
- <View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
46
- <Placeholder />
47
- <View.Item>
48
- <Divider vertical={{ s: true, m: false }}/>
49
- </View.Item>
50
- <Placeholder />
51
- </View>
52
- </Example.Item>
53
- </Example>),
54
- play: async ({ canvas }) => {
55
- const [el, elResponsive] = canvas.getAllByRole("separator");
56
- expect(el).toHaveAttribute("aria-orientation", "vertical");
57
- expect(elResponsive).not.toHaveAttribute("aria-orientation");
58
- },
59
- };
60
- export const label = {
61
- name: "children, contentPosition",
62
- render: () => {
63
- return (<Example>
64
- <Example.Item title="alignment">
65
- <View gap={4}>
66
- <Divider>Centered label</Divider>
67
- <Divider contentPosition="start">Start label</Divider>
68
- <Divider contentPosition="end">End label</Divider>
69
- </View>
70
- </Example.Item>
71
-
72
- <Example.Item title="responsive">
73
- <View gap={3} direction={{ s: "column", m: "row" }} align="stretch">
74
- <Placeholder />
75
- <View.Item>
76
- <Divider vertical={{ s: false, m: true }}>or pick second option</Divider>
77
- </View.Item>
78
- <Placeholder />
79
- </View>
80
- </Example.Item>
81
- </Example>);
82
- },
83
- };
84
- export const className = {
85
- name: "className, attributes",
86
- render: () => (<div data-testid="root">
87
- <Divider className="test-classname" attributes={{ id: "test-id" }}/>
88
- </div>),
89
- play: async ({ canvas }) => {
90
- const root = canvas.getByTestId("root").firstChild;
91
- expect(root).toHaveClass("test-classname");
92
- expect(root).toHaveAttribute("id", "test-id");
93
- },
94
- };
@@ -1,53 +0,0 @@
1
- import { fn } from "storybook/test";
2
- import { StoryObj } from "@storybook/react-vite";
3
- declare const _default: {
4
- title: string;
5
- component: import("react").FC<import("./..").DropdownMenuProps> & {
6
- Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
7
- Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
8
- Content: typeof import("../DropdownMenu").DropdownMenuContent;
9
- Section: typeof import("../DropdownMenu").DropdownMenuSection;
10
- Item: typeof import("../DropdownMenu").DropdownMenuItem;
11
- SubMenu: typeof import("../DropdownMenu").DropdownMenuSubMenu;
12
- SubTrigger: typeof import("../DropdownMenu").DropdownMenuSubTrigger;
13
- };
14
- parameters: {
15
- iframe: {
16
- url: string;
17
- };
18
- };
19
- };
20
- export default _default;
21
- export declare const position: {
22
- name: string;
23
- render: () => import("react").JSX.Element;
24
- };
25
- export declare const sections: {
26
- name: string;
27
- render: () => import("react").JSX.Element;
28
- };
29
- export declare const submenu: {
30
- name: string;
31
- render: () => import("react").JSX.Element;
32
- };
33
- export declare const defaultActive: StoryObj<{
34
- handleOpen: ReturnType<typeof fn>;
35
- handleClose: ReturnType<typeof fn>;
36
- }>;
37
- export declare const active: StoryObj<{
38
- handleOpen: ReturnType<typeof fn>;
39
- handleClose: ReturnType<typeof fn>;
40
- }>;
41
- export declare const activeFalse: StoryObj<{
42
- handleOpen: ReturnType<typeof fn>;
43
- handleClose: ReturnType<typeof fn>;
44
- }>;
45
- export declare const className: StoryObj;
46
- export declare const testScroll: {
47
- name: string;
48
- render: () => import("react").JSX.Element;
49
- };
50
- export declare const testTheme: {
51
- name: string;
52
- render: () => import("react").JSX.Element;
53
- };
@@ -1,278 +0,0 @@
1
- import { Example } from "../../../utilities/storybook/index.js";
2
- import Button from "../../Button/index.js";
3
- import DropdownMenu from "../index.js";
4
- import View from "../../View/index.js";
5
- import { useTheme } from "../../Theme/useTheme.js";
6
- import IconCheckmark from "../../../icons/Checkmark.js";
7
- import { expect, fn, userEvent, waitFor, within } from "storybook/test";
8
- import { sleep } from "../../../utilities/helpers.js";
9
- import Theme from "../../Theme/index.js";
10
- export default {
11
- title: "Components/DropdownMenu",
12
- component: DropdownMenu,
13
- parameters: {
14
- iframe: {
15
- url: "https://reshaped.so/docs/components/dropdown-menu",
16
- },
17
- },
18
- };
19
- export const position = {
20
- name: "position",
21
- render: () => (<Example>
22
- <Example.Item title="position: default">
23
- <DropdownMenu>
24
- <DropdownMenu.Trigger>
25
- {(attributes) => <Button attributes={attributes}>Open</Button>}
26
- </DropdownMenu.Trigger>
27
- <DropdownMenu.Content>
28
- <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
29
- <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
30
- </DropdownMenu.Content>
31
- </DropdownMenu>
32
- </Example.Item>
33
-
34
- <Example.Item title="position: end">
35
- <DropdownMenu position="end">
36
- <DropdownMenu.Trigger>
37
- {(attributes) => <Button attributes={attributes}>Open</Button>}
38
- </DropdownMenu.Trigger>
39
- <DropdownMenu.Content>
40
- <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
41
- <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
42
- </DropdownMenu.Content>
43
- </DropdownMenu>
44
- </Example.Item>
45
-
46
- <Example.Item title={["position: top-start", "should change to top-start to fit viewport"]}>
47
- <DropdownMenu position="top-end">
48
- <DropdownMenu.Trigger>
49
- {(attributes) => <Button attributes={attributes}>Open</Button>}
50
- </DropdownMenu.Trigger>
51
- <DropdownMenu.Content>
52
- <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
53
- <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
54
- </DropdownMenu.Content>
55
- </DropdownMenu>
56
- </Example.Item>
57
- <div style={{ height: 2000 }}/>
58
- </Example>),
59
- };
60
- export const sections = {
61
- name: "sections",
62
- render: () => (<Example>
63
- <Example.Item title="2 sections">
64
- <DropdownMenu>
65
- <DropdownMenu.Trigger>
66
- {(attributes) => <Button attributes={attributes}>Open</Button>}
67
- </DropdownMenu.Trigger>
68
- <DropdownMenu.Content>
69
- <DropdownMenu.Section>
70
- <DropdownMenu.Item>Item 1</DropdownMenu.Item>
71
- <DropdownMenu.Item>Item 2</DropdownMenu.Item>
72
- </DropdownMenu.Section>
73
-
74
- <DropdownMenu.Section>
75
- <DropdownMenu.Item>Item 3</DropdownMenu.Item>
76
- <DropdownMenu.Item>Item 4</DropdownMenu.Item>
77
- </DropdownMenu.Section>
78
- </DropdownMenu.Content>
79
- </DropdownMenu>
80
- </Example.Item>
81
- </Example>),
82
- };
83
- export const submenu = {
84
- name: "submenu",
85
- render: () => (<Example>
86
- <Example.Item title="submenu">
87
- <DropdownMenu>
88
- <DropdownMenu.Trigger>
89
- {(attributes) => <Button attributes={attributes}>Open</Button>}
90
- </DropdownMenu.Trigger>
91
- <DropdownMenu.Content>
92
- <DropdownMenu.Item onClick={() => { }}>Item 1</DropdownMenu.Item>
93
- <DropdownMenu.SubMenu>
94
- <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
95
- <DropdownMenu.Content>
96
- <DropdownMenu.Item onClick={() => { }}>SubItem 1</DropdownMenu.Item>
97
- <DropdownMenu.Item onClick={() => { }}>SubItem 2</DropdownMenu.Item>
98
- </DropdownMenu.Content>
99
- </DropdownMenu.SubMenu>
100
- <DropdownMenu.SubMenu>
101
- <DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>
102
- <DropdownMenu.Content>
103
- <DropdownMenu.Item onClick={() => { }}>SubItem 2-1</DropdownMenu.Item>
104
- <DropdownMenu.Item onClick={() => { }}>SubItem 2-2</DropdownMenu.Item>
105
- </DropdownMenu.Content>
106
- </DropdownMenu.SubMenu>
107
-
108
- <DropdownMenu.SubMenu>
109
- <DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>
110
- <DropdownMenu.Content>
111
- <DropdownMenu.Item onClick={() => { }}>SubItem 3-1</DropdownMenu.Item>
112
- <DropdownMenu.Item onClick={() => { }}>SubItem 3-2</DropdownMenu.Item>
113
- </DropdownMenu.Content>
114
- </DropdownMenu.SubMenu>
115
- </DropdownMenu.Content>
116
- </DropdownMenu>
117
- </Example.Item>
118
- </Example>),
119
- };
120
- export const defaultActive = {
121
- name: "defaultActive, uncontrolled",
122
- args: {
123
- handleOpen: fn(),
124
- handleClose: fn(),
125
- },
126
- render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
127
- <DropdownMenu.Trigger>
128
- {(attributes) => <Button attributes={attributes}>Open</Button>}
129
- </DropdownMenu.Trigger>
130
- <DropdownMenu.Content>
131
- <DropdownMenu.Item>Item</DropdownMenu.Item>
132
- </DropdownMenu.Content>
133
- </DropdownMenu>),
134
- play: async ({ canvasElement, args }) => {
135
- const canvas = within(canvasElement.ownerDocument.body);
136
- const trigger = canvas.getAllByRole("button")[0];
137
- let item = canvas.getByText("Item");
138
- await sleep(500);
139
- await userEvent.click(document.body);
140
- await waitFor(() => {
141
- expect(args.handleClose).toHaveBeenCalledTimes(1);
142
- expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
143
- expect(item).not.toBeInTheDocument();
144
- });
145
- await userEvent.click(trigger);
146
- item = canvas.getByText("Item");
147
- await waitFor(() => {
148
- expect(args.handleOpen).toHaveBeenCalledTimes(1);
149
- expect(args.handleOpen).toHaveBeenCalledWith();
150
- expect(item).toBeInTheDocument();
151
- });
152
- },
153
- };
154
- export const active = {
155
- name: "active, controlled",
156
- args: {
157
- handleOpen: fn(),
158
- handleClose: fn(),
159
- },
160
- render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active>
161
- <DropdownMenu.Trigger>
162
- {(attributes) => <Button attributes={attributes}>Open</Button>}
163
- </DropdownMenu.Trigger>
164
- <DropdownMenu.Content>
165
- <DropdownMenu.Item>Item</DropdownMenu.Item>
166
- </DropdownMenu.Content>
167
- </DropdownMenu>),
168
- play: async ({ canvasElement, args }) => {
169
- const canvas = within(canvasElement.ownerDocument.body);
170
- const item = canvas.getByText("Item");
171
- await userEvent.click(document.body);
172
- await waitFor(() => {
173
- expect(args.handleClose).toHaveBeenCalledTimes(1);
174
- expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
175
- });
176
- expect(item).toBeInTheDocument();
177
- },
178
- };
179
- export const activeFalse = {
180
- name: "active false, controlled",
181
- args: {
182
- handleOpen: fn(),
183
- handleClose: fn(),
184
- },
185
- render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
186
- <DropdownMenu.Trigger>
187
- {(attributes) => <Button attributes={attributes}>Open</Button>}
188
- </DropdownMenu.Trigger>
189
- <DropdownMenu.Content>
190
- <DropdownMenu.Item>Item</DropdownMenu.Item>
191
- </DropdownMenu.Content>
192
- </DropdownMenu>),
193
- play: async ({ canvasElement, args }) => {
194
- const canvas = within(canvasElement.ownerDocument.body);
195
- const trigger = canvas.getAllByRole("button")[0];
196
- await userEvent.click(trigger);
197
- await waitFor(() => {
198
- expect(args.handleOpen).toHaveBeenCalledTimes(1);
199
- expect(args.handleOpen).toHaveBeenCalledWith();
200
- });
201
- const item = canvas.queryByText("Item");
202
- expect(item).not.toBeInTheDocument();
203
- },
204
- };
205
- export const className = {
206
- name: "className, attributes",
207
- render: () => (<div data-testid="root">
208
- <DropdownMenu active>
209
- <DropdownMenu.Trigger>
210
- {(attributes) => <Button attributes={attributes}>Open</Button>}
211
- </DropdownMenu.Trigger>
212
- <DropdownMenu.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
213
- <DropdownMenu.Item>Item</DropdownMenu.Item>
214
- </DropdownMenu.Content>
215
- </DropdownMenu>
216
- </div>),
217
- play: async ({ canvasElement }) => {
218
- const canvas = within(canvasElement.ownerDocument.body);
219
- const menu = await canvas.findByTestId("test-id");
220
- expect(menu).toHaveClass("test-classname");
221
- },
222
- };
223
- export const testScroll = {
224
- name: "test: scroll",
225
- render: () => (<Example>
226
- <Example.Item title="Scrolls on page mount to the dropdown">
227
- <div style={{ height: 1000 }}/>
228
- <DropdownMenu position="end" key="scroll" defaultActive>
229
- <DropdownMenu.Trigger>
230
- {(attributes) => <Button attributes={attributes}>Open</Button>}
231
- </DropdownMenu.Trigger>
232
- <DropdownMenu.Content>
233
- <DropdownMenu.Item>Item 1</DropdownMenu.Item>
234
- <DropdownMenu.Item>Item 2</DropdownMenu.Item>
235
- </DropdownMenu.Content>
236
- </DropdownMenu>
237
- </Example.Item>
238
- </Example>),
239
- };
240
- const ThemeSwitching = () => {
241
- const { invertColorMode } = useTheme();
242
- return (<View gap={3} direction="row">
243
- <DropdownMenu>
244
- <DropdownMenu.Trigger>
245
- {(attributes) => <Button attributes={attributes}>Open</Button>}
246
- </DropdownMenu.Trigger>
247
- <DropdownMenu.Content>
248
- <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
249
- <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
250
- </DropdownMenu.Content>
251
- </DropdownMenu>
252
- <Button onClick={() => invertColorMode()}>Switch color mode</Button>
253
- </View>);
254
- };
255
- const ThemeMultiple = () => {
256
- return (<Theme name={["reshaped", "figma"]}>
257
- <DropdownMenu>
258
- <DropdownMenu.Trigger>
259
- {(attributes) => <Button attributes={attributes}>Open</Button>}
260
- </DropdownMenu.Trigger>
261
- <DropdownMenu.Content>
262
- <DropdownMenu.Item>Item 1</DropdownMenu.Item>
263
- <DropdownMenu.Item>Item 2</DropdownMenu.Item>
264
- </DropdownMenu.Content>
265
- </DropdownMenu>
266
- </Theme>);
267
- };
268
- export const testTheme = {
269
- name: "test: theme",
270
- render: () => (<Example>
271
- <Example.Item title="switch color mode while dropdown is active and check that it still works">
272
- <ThemeSwitching />
273
- </Example.Item>
274
- <Example.Item title="dropdown inherits multiple themes">
275
- <ThemeMultiple />
276
- </Example.Item>
277
- </Example>),
278
- };
@@ -1,31 +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("./..").FileUploadProps> & {
7
- Trigger: typeof import("../FileUpload").FileUploadTrigger;
8
- };
9
- parameters: {
10
- iframe: {
11
- url: string;
12
- };
13
- };
14
- };
15
- export default _default;
16
- export declare const base: {
17
- name: string;
18
- render: () => React.JSX.Element;
19
- };
20
- export declare const inline: {
21
- name: string;
22
- render: () => React.JSX.Element;
23
- };
24
- export declare const height: {
25
- name: string;
26
- render: () => React.JSX.Element;
27
- };
28
- export declare const onChange: StoryObj<{
29
- handleChange: ReturnType<typeof fn>;
30
- }>;
31
- export declare const className: StoryObj;