reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Container/tests/Container.stories.js

@@ -1,81 +1,75 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.flex = exports.size = exports.padding = void 0;
-const test_1 = require("storybook/test");
-const Container_1 = __importDefault(require("../../../components/Container"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Container from "../../../components/Container/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Container",
-    component: Container_1.default,
+    component: Container,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/container",
         },
     },
 };
-exports.padding = {
+export const padding = {
     name: "padding",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="padding: default">
-				<Container_1.default>
-					<storybook_1.Placeholder />
-				</Container_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: 0">
-				<Container_1.default padding={0}>
-					<storybook_1.Placeholder />
-				</Container_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="padding: default">
+				<Container>
+					<Placeholder />
+				</Container>
+			</Example.Item>
+			<Example.Item title="padding: 0">
+				<Container padding={0}>
+					<Placeholder />
+				</Container>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "width, height, maxHeight",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="width: 200px, height: 200px">
-				<Container_1.default width="200px" height="200px">
-					<storybook_1.Placeholder h="100%"/>
-				</Container_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: 200px, height: 200px, maxHeight: 100px">
-				<Container_1.default width="200px" height="200px" maxHeight="100px">
-					<storybook_1.Placeholder h="100%"/>
-				</Container_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width, height: [s] 100px, [m+] 200px">
-				<Container_1.default width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}>
-					<storybook_1.Placeholder h="100%"/>
-				</Container_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px">
-				<Container_1.default width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }} maxHeight={{ s: "50px", m: "100px" }}>
-					<storybook_1.Placeholder h="100%"/>
-				</Container_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="width: 200px, height: 200px">
+				<Container width="200px" height="200px">
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width: 200px, height: 200px, maxHeight: 100px">
+				<Container width="200px" height="200px" maxHeight="100px">
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width, height: [s] 100px, [m+] 200px">
+				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}>
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px">
+				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }} maxHeight={{ s: "50px", m: "100px" }}>
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+		</Example>),
 };
-exports.flex = {
+export const flex = {
     name: "align, justify",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="align: center, justify: center">
-				<Container_1.default align="center" justify="center" height="200px">
-					<storybook_1.Placeholder />
-				</Container_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="align: center, justify: center">
+				<Container align="center" justify="center" height="200px">
+					<Placeholder />
+				</Container>
+			</Example.Item>
+		</Example>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Container_1.default className="test-classname" attributes={{ id: "test-id" }}>
-				<storybook_1.Placeholder />
-			</Container_1.default>
+			<Container className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Container>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

package/dist/components/ContentToggle/ContentToggle.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./ContentToggle.types";
+import type * as T from "./ContentToggle.types.js";
 declare const ContentToggle: React.FC<T.Props>;
 export default ContentToggle;

package/dist/components/ContentToggle/ContentToggle.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Presence from "../../components/_private/Presence";
+import Presence from "../../components/_private/Presence/index.js";
 import s from "./ContentToggle.module.css";
 const ContentToggle = (props) => {
     const { children, id, direction = "end", className, attributes } = props;

package/dist/components/ContentToggle/ContentToggle.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type Direction = "start" | "end";
 export type Props = {
     /** Node for inserting the content */

package/dist/components/ContentToggle/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./ContentToggle";
-export type { Props as ContentToggleProps } from "./ContentToggle.types";
+export { default } from "./ContentToggle.js";
+export type { Props as ContentToggleProps } from "./ContentToggle.types.js";

package/dist/components/ContentToggle/index.js

@@ -1 +1 @@
-export { default } from "./ContentToggle";
+export { default } from "./ContentToggle.js";

package/dist/components/ContentToggle/tests/ContentToggle.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/ContentToggle").ContentToggleProps>;
+    component: React.FC<import("../../../components/ContentToggle/index.js").ContentToggleProps>;
 };
 export default _default;
 export declare const example: {

package/dist/components/ContentToggle/tests/ContentToggle.stories.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.example = void 0;
-const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const ContentToggle_1 = __importDefault(require("../../../components/ContentToggle"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const ChevronLeft_1 = __importDefault(require("../../../icons/ChevronLeft"));
-const ChevronRight_1 = __importDefault(require("../../../icons/ChevronRight"));
-exports.default = {
+import React from "react";
+import Button from "../../../components/Button/index.js";
+import ContentToggle from "../../../components/ContentToggle/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import IconChevronLeft from "../../../icons/ChevronLeft.js";
+import IconChevronRight from "../../../icons/ChevronRight.js";
+export default {
     title: "Utility components/ContentToggle",
-    component: ContentToggle_1.default,
+    component: ContentToggle,
 };
 const chapters = [
     {
@@ -36,40 +30,40 @@ const chapters = [
         ],
     },
 ];
-exports.example = {
+export const example = {
     name: "example",
     render: () => {
-        const [index, setIndex] = react_1.default.useState(0);
+        const [index, setIndex] = React.useState(0);
         // The content follows the direction it moves in: going forward slides it to the start
-        const [direction, setDirection] = react_1.default.useState("start");
+        const [direction, setDirection] = React.useState("start");
         const chapter = chapters[index];
         const handleChange = (nextIndex) => {
             setDirection(nextIndex > index ? "start" : "end");
             setIndex(nextIndex);
         };
-        return (<View_1.default width="480px">
-				<View_1.default gap={3}>
-					<View_1.default direction="row" align="center" gap={2}>
-						<View_1.default.Item grow>
-							<Text_1.default variant="body-2" weight="medium">
+        return (<View width="480px">
+				<View gap={3}>
+					<View direction="row" align="center" gap={2}>
+						<View.Item grow>
+							<Text variant="body-2" weight="medium">
 								Layers of the atmosphere
-							</Text_1.default>
-						</View_1.default.Item>
+							</Text>
+						</View.Item>
 
-						<View_1.default direction="row" gap={1}>
-							<Button_1.default variant="ghost" size="small" icon={ChevronLeft_1.default} disabled={index === 0} onClick={() => handleChange(index - 1)} attributes={{ "aria-label": "Previous chapter" }}/>
-							<Button_1.default size="small" variant="ghost" icon={ChevronRight_1.default} disabled={index === chapters.length - 1} onClick={() => handleChange(index + 1)} attributes={{ "aria-label": "Next chapter" }}/>
-						</View_1.default>
-					</View_1.default>
+						<View direction="row" gap={1}>
+							<Button variant="ghost" size="small" icon={IconChevronLeft} disabled={index === 0} onClick={() => handleChange(index - 1)} attributes={{ "aria-label": "Previous chapter" }}/>
+							<Button size="small" variant="ghost" icon={IconChevronRight} disabled={index === chapters.length - 1} onClick={() => handleChange(index + 1)} attributes={{ "aria-label": "Next chapter" }}/>
+						</View>
+					</View>
 
-					<ContentToggle_1.default id={index} direction={direction}>
-						<View_1.default gap={3}>
-							{chapter.paragraphs.map((paragraph) => (<Text_1.default key={paragraph} variant="body-3" color="neutral-faded">
+					<ContentToggle id={index} direction={direction}>
+						<View gap={3}>
+							{chapter.paragraphs.map((paragraph) => (<Text key={paragraph} variant="body-3" color="neutral-faded">
 									{paragraph}
-								</Text_1.default>))}
-						</View_1.default>
-					</ContentToggle_1.default>
-				</View_1.default>
-			</View_1.default>);
+								</Text>))}
+						</View>
+					</ContentToggle>
+				</View>
+			</View>);
     },
 };

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./ContextMenu.types";
+import type * as T from "./ContextMenu.types.js";
 declare const ContextMenu: React.FC<T.Props>;
 export default ContextMenu;

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import DropdownMenu from "../../components/DropdownMenu";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useScrollLock from "../../hooks/useScrollLock";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
 const ContextMenu = (props) => {
-    const { position = "end-top", onOpen, onClose, triggerRef, ...dropdownMenuProps } = props;
+    const { position = "end-top", disableHideAnimation = true, onOpen, onClose, triggerRef, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();
     const internalOriginRef = React.useRef(null);
     const originRef = triggerRef || internalOriginRef;
@@ -20,7 +20,7 @@ const ContextMenu = (props) => {
             e.preventDefault();
             setCoordinates({ x: e.clientX, y: e.clientY });
             lockScroll();
-            onOpenRef.current?.();
+            onOpenRef.current?.({ event: e });
         };
         originEl.addEventListener("contextmenu", handleContextMenu);
         return () => originEl.removeEventListener("contextmenu", handleContextMenu);
@@ -28,7 +28,7 @@ const ContextMenu = (props) => {
     React.useEffect(() => {
         return () => unlockScroll();
     }, [unlockScroll]);
-    return (_jsx("div", { className: s.root, ref: internalOriginRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
+    return (_jsx("div", { className: s.root, ref: internalOriginRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, disableHideAnimation: disableHideAnimation, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
                 setCoordinates(undefined);
                 unlockScroll();
                 onClose?.(args);

package/dist/components/ContextMenu/ContextMenu.types.d.ts

@@ -1,7 +1,15 @@
 import type React from "react";
-import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu";
+import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu/index.js";
 export type Instance = DropdownMenuInstance;
-export type Props = Omit<DropdownMenuProps, "active" | "defaultActive"> & {
+export type Props = Omit<DropdownMenuProps, "active" | "defaultActive" | "onOpen" | "disableHideAnimation"> & {
+    /** Disable the menu hide animation, matching the native context menu behavior
+     * @default true
+     */
+    disableHideAnimation?: boolean;
     /** Element that opens the menu on right click, used when it's rendered outside of the ContextMenu */
     triggerRef?: React.RefObject<HTMLElement | null>;
+    /** Callback when the menu is opened, receives the contextmenu event that opened it */
+    onOpen?: (args: {
+        event: MouseEvent;
+    }) => void;
 };

package/dist/components/ContextMenu/index.d.ts

@@ -1,5 +1,5 @@
-import DropdownMenu from "../../components/DropdownMenu";
-import ContextMenu from "./ContextMenu";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
+import ContextMenu from "./ContextMenu.js";
 declare const ContextMenuRoot: typeof ContextMenu & {
     Content: typeof DropdownMenu.Content;
     Item: typeof DropdownMenu.Item;
@@ -8,4 +8,4 @@ declare const ContextMenuRoot: typeof ContextMenu & {
     SubTrigger: typeof DropdownMenu.SubTrigger;
 };
 export default ContextMenuRoot;
-export type { Instance as ContextMenuInstance, Props as ContextMenuProps, } from "./ContextMenu.types";
+export type { Instance as ContextMenuInstance, Props as ContextMenuProps, } from "./ContextMenu.types.js";

package/dist/components/ContextMenu/index.js

@@ -1,5 +1,5 @@
-import DropdownMenu from "../../components/DropdownMenu";
-import ContextMenu from "./ContextMenu";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
+import ContextMenu from "./ContextMenu.js";
 const ContextMenuRoot = ContextMenu;
 ContextMenuRoot.Content = DropdownMenu.Content;
 ContextMenuRoot.Item = DropdownMenu.Item;

package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts

@@ -3,12 +3,12 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/ContextMenu").ContextMenuProps> & {
-        Content: React.FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
-        Item: React.FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
-        Section: React.FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
-        SubMenu: React.FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
-        SubTrigger: React.FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
+    component: React.FC<import("../../../components/ContextMenu/index.js").ContextMenuProps> & {
+        Content: React.FC<import("../../DropdownMenu/DropdownMenu.types.js").ContentProps>;
+        Item: React.FC<import("../../DropdownMenu/DropdownMenu.types.js").ItemProps>;
+        Section: React.FC<import("../../DropdownMenu/DropdownMenu.types.js").SectionProps>;
+        SubMenu: React.FC<import("../../DropdownMenu/DropdownMenu.types.js").SubMenuProps>;
+        SubTrigger: React.FC<import("../../DropdownMenu/DropdownMenu.types.js").SubTriggerProps>;
     };
     parameters: {
         iframe: {
@@ -28,4 +28,11 @@ export declare const handlers: StoryObj<{
 export declare const triggerRef: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
 }>;
+export declare const sameMenuRightClick: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const insideFlyoutRightClick: StoryObj<{
+    handlePopoverClose: ReturnType<typeof fn>;
+}>;
 export declare const menu: StoryObj;