reshaped 3.6.0-canary.2 → 3.6.0-canary.3
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/CHANGELOG.md +4 -0
- package/dist/bundle.js +8 -8
- package/dist/components/Accordion/AccordionControlled.js +4 -4
- package/dist/components/Accordion/tests/Accordion.stories.d.ts +6 -6
- package/dist/components/Accordion/tests/Accordion.stories.js +1 -1
- package/dist/components/ActionBar/tests/ActionBar.test.stories.d.ts +1 -1
- package/dist/components/ActionBar/tests/ActionBar.test.stories.js +1 -1
- package/dist/components/Actionable/tests/Actionable.stories.d.ts +1 -1
- package/dist/components/Actionable/tests/Actionable.stories.js +1 -1
- package/dist/components/Actionable/tests/Actionable.test.stories.d.ts +2 -2
- package/dist/components/Actionable/tests/Actionable.test.stories.js +1 -1
- package/dist/components/Alert/tests/Alert.test.stories.d.ts +1 -1
- package/dist/components/Alert/tests/Alert.test.stories.js +1 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +2 -2
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +8 -7
- package/dist/components/Avatar/tests/Avatar.stories.d.ts +2 -2
- package/dist/components/Avatar/tests/Avatar.stories.js +1 -1
- package/dist/components/Badge/tests/Badge.stories.d.ts +2 -2
- package/dist/components/Badge/tests/Badge.stories.js +1 -1
- package/dist/components/Badge/tests/Badge.test.stories.d.ts +2 -2
- package/dist/components/Badge/tests/Badge.test.stories.js +1 -1
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +2 -2
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +1 -1
- package/dist/components/Button/tests/Button.test.stories.d.ts +2 -2
- package/dist/components/Button/tests/Button.test.stories.js +1 -1
- package/dist/components/Calendar/tests/Calendar.stories.d.ts +2 -2
- package/dist/components/Calendar/tests/Calendar.stories.js +1 -1
- package/dist/components/Card/tests/Card.test.stories.d.ts +2 -2
- package/dist/components/Card/tests/Card.test.stories.js +1 -1
- package/dist/components/Carousel/tests/Carousel.stories.d.ts +2 -2
- package/dist/components/Carousel/tests/Carousel.stories.js +1 -1
- package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +2 -2
- package/dist/components/Checkbox/tests/Checkbox.test.stories.js +1 -1
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +2 -2
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +1 -1
- package/dist/components/Container/tests/Container.test.stories.d.ts +1 -1
- package/dist/components/Container/tests/Container.test.stories.js +1 -1
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +2 -2
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +1 -1
- package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +1 -1
- package/dist/components/Dismissible/tests/Dismissible.stories.js +1 -1
- package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +2 -2
- package/dist/components/Dismissible/tests/Dismissible.test.stories.js +1 -1
- package/dist/components/Divider/tests/Divider.test.stories.d.ts +1 -1
- package/dist/components/Divider/tests/Divider.test.stories.js +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +13 -2
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +2 -2
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +1 -1
- package/dist/components/FileUpload/tests/FileUpload.test.stories.d.ts +2 -2
- package/dist/components/FileUpload/tests/FileUpload.test.stories.js +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +1 -1
- package/dist/components/Flyout/FlyoutContent.js +0 -2
- package/dist/components/Flyout/FlyoutControlled.js +4 -1
- package/dist/components/Flyout/tests/Flyout.stories.d.ts +2 -2
- package/dist/components/Flyout/tests/Flyout.stories.js +4 -1
- package/dist/components/FormControl/tests/FormControl.stories.d.ts +1 -1
- package/dist/components/FormControl/tests/FormControl.stories.js +1 -1
- package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +1 -1
- package/dist/components/FormControl/tests/FormControl.test.stories.js +1 -1
- package/dist/components/Grid/tests/Grid.test.stories.d.ts +1 -1
- package/dist/components/Grid/tests/Grid.test.stories.js +1 -1
- package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +1 -1
- package/dist/components/Hidden/tests/Hidden.test.stories.js +1 -1
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +1 -1
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +1 -1
- package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +1 -1
- package/dist/components/Hotkey/tests/Hotkey.test.stories.js +1 -1
- package/dist/components/Icon/tests/Icon.test.stories.d.ts +1 -1
- package/dist/components/Icon/tests/Icon.test.stories.js +1 -1
- package/dist/components/Image/tests/Image.stories.d.ts +2 -2
- package/dist/components/Image/tests/Image.stories.js +1 -1
- package/dist/components/Link/tests/Link.test.stories.d.ts +2 -2
- package/dist/components/Link/tests/Link.test.stories.js +1 -1
- package/dist/components/Loader/tests/Loader.test.stories.d.ts +1 -1
- package/dist/components/Loader/tests/Loader.test.stories.js +1 -1
- package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +2 -2
- package/dist/components/MenuItem/tests/MenuItem.test.stories.js +1 -1
- package/dist/components/Modal/tests/Modal.test.stories.d.ts +2 -2
- package/dist/components/Modal/tests/Modal.test.stories.js +1 -1
- package/dist/components/NumberField/tests/NumberField.stories.d.ts +2 -2
- package/dist/components/NumberField/tests/NumberField.stories.js +1 -1
- package/dist/components/Overlay/tests/Overlay.stories.d.ts +1 -1
- package/dist/components/Overlay/tests/Overlay.stories.js +1 -1
- package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +2 -2
- package/dist/components/Overlay/tests/Overlay.test.stories.js +1 -1
- package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +2 -2
- package/dist/components/Pagination/tests/Pagination.test.stories.js +1 -1
- package/dist/components/PinField/tests/PinField.test.stories.d.ts +2 -2
- package/dist/components/PinField/tests/PinField.test.stories.js +1 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +6 -2
- package/dist/components/Popover/tests/Popover.stories.js +44 -1
- package/dist/components/Progress/tests/Progress.test.stories.d.ts +1 -1
- package/dist/components/Progress/tests/Progress.test.stories.js +1 -1
- package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.d.ts +1 -1
- package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +1 -1
- package/dist/components/Radio/tests/Radio.test.stories.d.ts +2 -2
- package/dist/components/Radio/tests/Radio.test.stories.js +1 -1
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +2 -2
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +1 -1
- package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +1 -1
- package/dist/components/Reshaped/tests/Reshaped.stories.js +1 -1
- package/dist/components/Resizable/tests/Resizable.test.stories.d.ts +1 -1
- package/dist/components/Resizable/tests/Resizable.test.stories.js +1 -1
- package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +1 -1
- package/dist/components/Scrim/tests/Scrim.test.stories.js +1 -1
- package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +2 -2
- package/dist/components/ScrollArea/tests/ScrollArea.stories.js +1 -1
- package/dist/components/Select/tests/Select.test.stories.d.ts +2 -2
- package/dist/components/Select/tests/Select.test.stories.js +1 -1
- package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +1 -1
- package/dist/components/Skeleton/tests/Skeleton.test.stories.js +1 -1
- package/dist/components/Slider/tests/Slider.stories.d.ts +2 -2
- package/dist/components/Slider/tests/Slider.stories.js +1 -1
- package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +1 -1
- package/dist/components/Stepper/tests/Stepper.test.stories.js +1 -1
- package/dist/components/Switch/tests/Switch.test.stories.d.ts +2 -2
- package/dist/components/Switch/tests/Switch.test.stories.js +1 -1
- package/dist/components/Table/tests/Table.test.stories.d.ts +1 -1
- package/dist/components/Table/tests/Table.test.stories.js +1 -1
- package/dist/components/Tabs/tests/Tabs.test.stories.d.ts +2 -2
- package/dist/components/Tabs/tests/Tabs.test.stories.js +1 -1
- package/dist/components/Text/tests/Text.test.stories.d.ts +1 -1
- package/dist/components/Text/tests/Text.test.stories.js +1 -1
- package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +2 -2
- package/dist/components/TextArea/tests/TextArea.test.stories.js +1 -1
- package/dist/components/TextField/tests/TextField.test.stories.d.ts +2 -2
- package/dist/components/TextField/tests/TextField.test.stories.js +1 -1
- package/dist/components/Theme/tests/Theme.test.stories.d.ts +1 -1
- package/dist/components/Theme/tests/Theme.test.stories.js +1 -1
- package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +1 -1
- package/dist/components/Timeline/tests/Timeline.test.stories.js +1 -1
- package/dist/components/Toast/tests/Toast.test.stories.d.ts +1 -1
- package/dist/components/Toast/tests/Toast.test.stories.js +1 -1
- package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +2 -2
- package/dist/components/Tooltip/tests/Tooltip.test.stories.js +1 -1
- package/dist/components/View/tests/View.test.stories.d.ts +1 -1
- package/dist/components/View/tests/View.test.stories.js +1 -1
- package/dist/hooks/tests/useDrag.stories.d.ts +2 -2
- package/dist/hooks/tests/useDrag.stories.js +1 -1
- package/dist/hooks/tests/useElementId.stories.d.ts +1 -1
- package/dist/hooks/tests/useElementId.stories.js +1 -1
- package/dist/hooks/tests/useHandlerRef.stories.d.ts +2 -2
- package/dist/hooks/tests/useHandlerRef.stories.js +1 -1
- package/dist/hooks/tests/useHotkeys.stories.d.ts +2 -2
- package/dist/hooks/tests/useHotkeys.stories.js +1 -1
- package/dist/hooks/tests/useKeyboardMode.stories.d.ts +1 -1
- package/dist/hooks/tests/useKeyboardMode.stories.js +1 -1
- package/dist/hooks/tests/useOnClickOutside.stories.d.ts +2 -2
- package/dist/hooks/tests/useOnClickOutside.stories.js +1 -1
- package/dist/hooks/tests/useRTL.stories.d.ts +1 -1
- package/dist/hooks/tests/useRTL.stories.js +1 -1
- package/dist/hooks/tests/useScrollLock.stories.d.ts +1 -1
- package/dist/hooks/tests/useScrollLock.stories.js +1 -1
- package/dist/hooks/tests/useToggle.stories.d.ts +1 -1
- package/dist/hooks/tests/useToggle.stories.js +1 -1
- package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts +1 -1
- package/dist/utilities/a11y/tests/TrapFocus.stories.js +1 -1
- package/package.json +19 -23
@@ -4,20 +4,20 @@ import React from "react";
|
|
4
4
|
import { classNames } from "../../utilities/props.js";
|
5
5
|
import useElementId from "../../hooks/useElementId.js";
|
6
6
|
import AccordionContext from "./Accordion.context.js";
|
7
|
+
import useHandlerRef from "../../hooks/useHandlerRef.js";
|
7
8
|
const AccordionControlled = (props) => {
|
8
9
|
const { children, onToggle, active, iconPosition, iconSize, className, attributes } = props;
|
9
10
|
const rootClassNames = classNames(className);
|
10
11
|
const id = useElementId();
|
12
|
+
const onToggleRef = useHandlerRef(onToggle);
|
11
13
|
const value = React.useMemo(() => ({
|
12
14
|
triggerId: `${id}-trigger`,
|
13
15
|
contentId: `${id}-content`,
|
14
16
|
active,
|
15
|
-
onToggle,
|
17
|
+
onToggle: onToggleRef.current,
|
16
18
|
iconPosition,
|
17
19
|
iconSize,
|
18
|
-
}),
|
19
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
20
|
-
[active]);
|
20
|
+
}), [active, iconPosition, iconSize, id, onToggleRef]);
|
21
21
|
return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
|
22
22
|
};
|
23
23
|
AccordionControlled.displayName = "AccordionControlled";
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import {
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { Mock } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").AccordionProps> & {
|
@@ -26,15 +26,15 @@ export declare const iconPosition: {
|
|
26
26
|
render: () => import("react").JSX.Element;
|
27
27
|
};
|
28
28
|
export declare const onToggle: StoryObj<{
|
29
|
-
handleToggle:
|
29
|
+
handleToggle: Mock;
|
30
30
|
}>;
|
31
31
|
export declare const active: StoryObj<{
|
32
|
-
handleToggle:
|
32
|
+
handleToggle: Mock;
|
33
33
|
}>;
|
34
34
|
export declare const defaultActive: StoryObj<{
|
35
|
-
handleToggle:
|
35
|
+
handleToggle: Mock;
|
36
36
|
}>;
|
37
37
|
export declare const renderProps: StoryObj<{
|
38
|
-
handleToggle:
|
38
|
+
handleToggle: Mock;
|
39
39
|
}>;
|
40
40
|
export declare const className: StoryObj;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
2
|
declare const _default: {
|
3
3
|
title: string;
|
4
4
|
component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react";
|
3
|
-
import { Mock } from "
|
2
|
+
import { StoryObj } from "@storybook/react-vite";
|
3
|
+
import { Mock } from "storybook/test";
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
6
|
component: React.FC<import("./..").AutocompleteProps> & {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { fn, expect, within, waitFor, userEvent, fireEvent } from "
|
2
|
+
import { fn, expect, within, waitFor, userEvent, fireEvent } from "storybook/test";
|
3
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
4
4
|
import Autocomplete from "../index.js";
|
5
5
|
import View from "../../View/index.js";
|
@@ -56,12 +56,13 @@ export const active = {
|
|
56
56
|
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
57
57
|
expect(args.handleClose).toHaveBeenLastCalledWith();
|
58
58
|
});
|
59
|
-
|
60
|
-
await
|
61
|
-
await
|
62
|
-
|
63
|
-
|
64
|
-
|
59
|
+
// TODO: Flaky behavior in node env tests, works in the browser
|
60
|
+
// await sleep(500);
|
61
|
+
// await userEvent.click(input);
|
62
|
+
// await waitFor(() => {
|
63
|
+
// expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
64
|
+
// expect(args.handleOpen).toHaveBeenLastCalledWith();
|
65
|
+
// });
|
65
66
|
},
|
66
67
|
};
|
67
68
|
export const base = {
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { Mock } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { Mock } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").AvatarProps>;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { useState } from "react";
|
2
|
-
import { expect, fn, waitFor } from "
|
2
|
+
import { expect, fn, waitFor } from "storybook/test";
|
3
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
4
4
|
import Avatar from "../index.js";
|
5
5
|
import View from "../../View/index.js";
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react";
|
3
|
-
import { fn } from "
|
2
|
+
import { StoryObj } from "@storybook/react-vite";
|
3
|
+
import { fn } from "storybook/test";
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
6
|
component: import("../Badge.types").Export;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { expect, fn } from "
|
2
|
+
import { expect, fn } from "storybook/test";
|
3
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
4
4
|
import Avatar from "../../Avatar/index.js";
|
5
5
|
import View from "../../View/index.js";
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").BreadcrumbsProps> & {
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { type Mock } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { type Mock } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").CalendarProps>;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { fn, expect, userEvent, within, waitFor } from "
|
1
|
+
import { fn, expect, userEvent, within, waitFor } from "storybook/test";
|
2
2
|
import { Example } from "../../../utilities/storybook/index.js";
|
3
3
|
import Calendar from "../index.js";
|
4
4
|
export default {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react";
|
3
|
-
import { fn } from "
|
2
|
+
import { StoryObj } from "@storybook/react-vite";
|
3
|
+
import { fn } from "storybook/test";
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
6
|
component: React.ForwardRefExoticComponent<{
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react";
|
3
|
-
import { fn } from "
|
2
|
+
import { StoryObj } from "@storybook/react-vite";
|
3
|
+
import { fn } from "storybook/test";
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
6
|
component: React.FC<import("./..").CarouselProps>;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { expect, fn, userEvent, waitFor } from "
|
2
|
+
import { expect, fn, userEvent, waitFor } from "storybook/test";
|
3
3
|
import { Example, Placeholder } from "../../../utilities/storybook/index.js";
|
4
4
|
import Carousel from "../index.js";
|
5
5
|
import Button from "../../Button/index.js";
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").CheckboxProps>;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").CheckboxGroupProps>;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").ContextMenuProps> & {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { expect, fn, userEvent, waitFor, within } from "
|
1
|
+
import { expect, fn, userEvent, waitFor, within } from "storybook/test";
|
2
2
|
import ContextMenu from "../index.js";
|
3
3
|
import View from "../../View/index.js";
|
4
4
|
import { sleep } from "../../../utilities/helpers.js";
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").DismissibleProps>;
|
@@ -12,6 +12,7 @@ import { classNames } from "../../utilities/props.js";
|
|
12
12
|
import * as keys from "../../constants/keys.js";
|
13
13
|
import s from "./DropdownMenu.module.css";
|
14
14
|
const DropdownMenuSubContext = React.createContext(null);
|
15
|
+
const DropdownMenuSubTriggerContext = React.createContext(false);
|
15
16
|
const DropdownMenu = (props) => {
|
16
17
|
const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", ...popoverProps } = props;
|
17
18
|
return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }));
|
@@ -39,14 +40,19 @@ const DropdownMenuSection = (props) => {
|
|
39
40
|
const DropdownMenuItem = (props) => {
|
40
41
|
const { onClick } = props;
|
41
42
|
const { handleClose } = useFlyoutContext();
|
43
|
+
const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
|
42
44
|
const handleClick = (e) => {
|
43
45
|
/**
|
44
46
|
* Stop event propagation to make sure outside click doesn't get triggered
|
45
47
|
* after the content is closed
|
46
48
|
*/
|
47
49
|
e.stopPropagation();
|
48
|
-
|
50
|
+
/**
|
51
|
+
* Don't close the menu when clicking on a trigger of a submenu
|
52
|
+
*/
|
53
|
+
if (handleClose && !subTriggerContext) {
|
49
54
|
handleClose({ closeParents: true, reason: "item-selection" });
|
55
|
+
}
|
50
56
|
if (onClick)
|
51
57
|
onClick(e);
|
52
58
|
};
|
@@ -70,7 +76,12 @@ const DropdownMenuSubTriggerItem = (props) => {
|
|
70
76
|
};
|
71
77
|
const DropdownMenuSubTrigger = (props) => {
|
72
78
|
const { attributes, ...menuItemProps } = props;
|
73
|
-
return (_jsx(
|
79
|
+
return (_jsx(DropdownMenuSubTriggerContext.Provider, { value: true, children: _jsx(DropdownMenu.Trigger, { children: (triggerAttributes) => {
|
80
|
+
return (_jsx(DropdownMenuSubTriggerItem, { ...menuItemProps, attributes: {
|
81
|
+
...attributes,
|
82
|
+
...triggerAttributes,
|
83
|
+
} }));
|
84
|
+
} }) }));
|
74
85
|
};
|
75
86
|
DropdownMenu.Dismissible = Popover.Dismissible;
|
76
87
|
DropdownMenu.Trigger = Popover.Trigger;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").DropdownMenuProps> & {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { expect, fn, userEvent, waitFor, within } from "
|
1
|
+
import { expect, fn, userEvent, waitFor, within } from "storybook/test";
|
2
2
|
import Button from "../../Button/index.js";
|
3
3
|
import DropdownMenu from "../index.js";
|
4
4
|
import { sleep } from "../../../utilities/helpers.js";
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react";
|
2
|
-
import { fn } from "
|
1
|
+
import { StoryObj } from "@storybook/react-vite";
|
2
|
+
import { fn } from "storybook/test";
|
3
3
|
declare const _default: {
|
4
4
|
title: string;
|
5
5
|
component: import("react").FC<import("./..").FileUploadProps> & {
|
@@ -45,8 +45,6 @@ const FlyoutContent = (props) => {
|
|
45
45
|
React.useEffect(() => {
|
46
46
|
if (status !== "visible")
|
47
47
|
return;
|
48
|
-
console.log(closestScrollableContainer);
|
49
|
-
// if (closestScrollableContainer === document.body) return;
|
50
48
|
if (!closestScrollableContainer)
|
51
49
|
return;
|
52
50
|
const triggerEl = triggerElRef?.current;
|
@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
|
|
15
15
|
import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
|
16
16
|
import useHandlerRef from "../../hooks/useHandlerRef.js";
|
17
17
|
const FlyoutControlled = (props) => {
|
18
|
-
const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
|
18
|
+
const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
|
19
19
|
const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
|
20
20
|
const onOpenRef = useHandlerRef(onOpen);
|
21
21
|
const onCloseRef = useHandlerRef(onClose);
|
@@ -72,6 +72,7 @@ const FlyoutControlled = (props) => {
|
|
72
72
|
active: isRendered && triggerType !== "hover",
|
73
73
|
contentRef: flyoutElRef,
|
74
74
|
triggerRef: triggerElRef,
|
75
|
+
blocking: trapFocusMode === "dialog",
|
75
76
|
});
|
76
77
|
const clearTimer = React.useCallback(() => {
|
77
78
|
if (timerRef.current)
|
@@ -231,6 +232,8 @@ const FlyoutControlled = (props) => {
|
|
231
232
|
return;
|
232
233
|
if (trapFocusRef.current?.trapped)
|
233
234
|
return;
|
235
|
+
if (trapFocusMode === false)
|
236
|
+
return;
|
234
237
|
trapFocusRef.current = new TrapFocus();
|
235
238
|
trapFocusRef.current.trap(flyoutElRef.current, {
|
236
239
|
mode: trapFocusMode,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { createRoot } from "react-dom/client";
|
3
|
-
import { userEvent, waitFor, within, expect, fn } from "
|
3
|
+
import { userEvent, waitFor, within, expect, fn } from "storybook/test";
|
4
4
|
import { Example } from "../../../utilities/storybook/index.js";
|
5
5
|
import Reshaped from "../../Reshaped/index.js";
|
6
6
|
import View from "../../View/index.js";
|
@@ -175,6 +175,9 @@ export const modes = {
|
|
175
175
|
<Demo position="bottom-start" trapFocusMode="content-menu" text="content-menu">
|
176
176
|
{modeContent}
|
177
177
|
</Demo>
|
178
|
+
<Demo position="bottom-start" trapFocusMode={false} text="false">
|
179
|
+
{modeContent}
|
180
|
+
</Demo>
|
178
181
|
</View>
|
179
182
|
</Example.Item>
|
180
183
|
|