reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,126 +1,120 @@
-"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.label = exports.offset = exports.vertical = exports.color = exports.rendering = void 0;
-const test_1 = require("storybook/test");
-const Divider_1 = __importDefault(require("../../../components/Divider"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Divider from "../../../components/Divider/index.js";
+import View from "../../../components/View/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Divider",
-    component: Divider_1.default,
+    component: Divider,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/divider",
         },
     },
 };
-exports.rendering = {
+export const rendering = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default rendering">
-				<Divider_1.default />
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="default rendering">
+				<Divider />
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["blank rendering", "box should overlap with divider"]}>
-				<View_1.default width="40px" height="10px" backgroundColor="primary"/>
-				<Divider_1.default blank/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["blank rendering", "box should overlap with divider"]}>
+				<View width="40px" height="10px" backgroundColor="primary"/>
+				<Divider blank/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const [el] = canvas.getAllByRole("separator");
-        (0, test_1.expect)(el).toHaveAttribute("aria-orientation", "horizontal");
+        expect(el).toHaveAttribute("aria-orientation", "horizontal");
     },
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="neutral-faded">
-				<Divider_1.default color="neutral-faded"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="neutral">
-				<Divider_1.default color="neutral"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="neutral-faded">
+				<Divider color="neutral-faded"/>
+			</Example.Item>
+			<Example.Item title="neutral">
+				<Divider color="neutral"/>
+			</Example.Item>
+		</Example>),
 };
-exports.vertical = {
+export const vertical = {
     name: "vertical",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="vertical">
-				<View_1.default gap={3} direction="row" align="stretch">
-					<storybook_1.Placeholder />
-					<View_1.default.Item>
-						<Divider_1.default vertical/>
-					</View_1.default.Item>
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="vertical">
+				<View gap={3} direction="row" align="stretch">
+					<Placeholder />
+					<View.Item>
+						<Divider vertical/>
+					</View.Item>
+					<Placeholder />
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
-				<View_1.default gap={3} direction={{ s: "row", m: "column" }} align="stretch">
-					<storybook_1.Placeholder />
-					<View_1.default.Item>
-						<Divider_1.default vertical={{ s: true, m: false }}/>
-					</View_1.default.Item>
-					<storybook_1.Placeholder />
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
+				<View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
+					<Placeholder />
+					<View.Item>
+						<Divider vertical={{ s: true, m: false }}/>
+					</View.Item>
+					<Placeholder />
+				</View>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const [el, elResponsive] = canvas.getAllByRole("separator");
-        (0, test_1.expect)(el).toHaveAttribute("aria-orientation", "vertical");
-        (0, test_1.expect)(elResponsive).not.toHaveAttribute("aria-orientation");
+        expect(el).toHaveAttribute("aria-orientation", "vertical");
+        expect(elResponsive).not.toHaveAttribute("aria-orientation");
     },
 };
-exports.offset = {
+export const offset = {
     name: "offset",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="offset: 10px">
-				<View_1.default width="100px" backgroundColor="neutral" paddingBlock={4}>
-					<Divider_1.default inset={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="offset: 10px, vertical">
-				<View_1.default height="100px" backgroundColor="neutral" paddingInline={4} width="33px">
-					<Divider_1.default vertical inset={10}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="offset: 10px">
+				<View width="100px" backgroundColor="neutral" paddingBlock={4}>
+					<Divider inset={10}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="offset: 10px, vertical">
+				<View height="100px" backgroundColor="neutral" paddingInline={4} width="33px">
+					<Divider vertical inset={10}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.label = {
+export const label = {
     name: "children, contentPosition",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="alignment">
-					<View_1.default gap={4}>
-						<Divider_1.default>Centered label</Divider_1.default>
-						<Divider_1.default contentPosition="start">Start label</Divider_1.default>
-						<Divider_1.default contentPosition="end">End label</Divider_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
+        return (<Example>
+				<Example.Item title="alignment">
+					<View gap={4}>
+						<Divider>Centered label</Divider>
+						<Divider contentPosition="start">Start label</Divider>
+						<Divider contentPosition="end">End label</Divider>
+					</View>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="responsive">
-					<View_1.default gap={3} direction={{ s: "column", m: "row" }} align="stretch">
-						<storybook_1.Placeholder />
-						<View_1.default.Item>
-							<Divider_1.default vertical={{ s: false, m: true }}>or pick second option</Divider_1.default>
-						</View_1.default.Item>
-						<storybook_1.Placeholder />
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+				<Example.Item title="responsive">
+					<View gap={3} direction={{ s: "column", m: "row" }} align="stretch">
+						<Placeholder />
+						<View.Item>
+							<Divider vertical={{ s: false, m: true }}>or pick second option</Divider>
+						</View.Item>
+						<Placeholder />
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Divider_1.default className="test-classname" attributes={{ id: "test-id" }}/>
+			<Divider className="test-classname" attributes={{ id: "test-id" }}/>
 		</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/DropdownMenu/DropdownMenu.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./DropdownMenu.types";
+import type * as T from "./DropdownMenu.types.js";
 declare const DropdownMenuContext: React.Context<T.Context>;
 export declare const useDropdownMenu: () => T.Context;
 /**

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
-import type * as T from "./DropdownMenu.types";
+import type * as T from "./DropdownMenu.types.js";
+/**
+ * Keeps the menu open after selecting an item, used by components built on top of DropdownMenu
+ * For example, Select with multiple selection
+ */
+export declare const DropdownMenuKeepOpenContext: React.Context<boolean>;
 declare const DropdownMenu: React.FC<T.Props>;
 export declare const DropdownMenuContent: React.FC<T.ContentProps>;
 export declare const DropdownMenuSection: React.FC<T.SectionProps>;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,21 +1,26 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { useFlyoutContext } from "../../components/Flyout";
-import Icon from "../../components/Icon";
-import MenuItem from "../../components/MenuItem";
-import Popover from "../../components/Popover";
-import useHotkeys from "../../hooks/useHotkeys";
-import useRTL from "../../hooks/useRTL";
-import * as keys from "../../constants/keys";
-import IconChevronRight from "../../icons/ChevronRight";
-import { DropdownMenuProvider, useDropdownMenu } from "./DropdownMenu.context";
+import { useFlyoutContext } from "../../components/Flyout/index.js";
+import Icon from "../../components/Icon/index.js";
+import MenuItem from "../../components/MenuItem/index.js";
+import Popover from "../../components/Popover/index.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useRTL from "../../hooks/useRTL.js";
+import * as keys from "../../constants/keys.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { DropdownMenuProvider, useDropdownMenu } from "./DropdownMenu.context.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
+/**
+ * Keeps the menu open after selecting an item, used by components built on top of DropdownMenu
+ * For example, Select with multiple selection
+ */
+export const DropdownMenuKeepOpenContext = React.createContext(false);
 const DropdownMenu = (props) => {
     const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", size, ...popoverProps } = props;
-    return (_jsx(DropdownMenuProvider, { size: size, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, disableHideAnimation: triggerType !== "hover", children: children }) }));
+    return (_jsx(DropdownMenuProvider, { size: size, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }) }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
@@ -49,17 +54,18 @@ export const DropdownMenuItem = (props) => {
     const { handleClose } = useFlyoutContext();
     const { size: menuSize } = useDropdownMenu();
     const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
+    const keepOpen = React.useContext(DropdownMenuKeepOpenContext);
     const handleClick = (e) => {
         /**
          * Don't close the menu when clicking on a trigger of a submenu
          */
-        if (handleClose && !subTriggerContext) {
+        if (handleClose && !subTriggerContext && !keepOpen) {
             handleClose({ closeParents: true, reason: "item-selection" });
         }
         if (onClick)
             onClick(e);
     };
-    return (_jsx(MenuItem, { ...props, size: size ?? menuSize, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
+    return (_jsx(MenuItem, { ...props, size: size ?? menuSize, focusIndicator: "highlight", roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 export const DropdownMenuSubMenu = (props) => {
     const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;

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

@@ -1,7 +1,7 @@
 import type React from "react";
-import type { FlyoutContentProps } from "../../components/Flyout";
-import type { MenuItemProps } from "../../components/MenuItem";
-import type { PopoverInstance, PopoverProps } from "../../components/Popover";
+import type { FlyoutContentProps } from "../../components/Flyout/index.js";
+import type { MenuItemProps } from "../../components/MenuItem/index.js";
+import type { PopoverInstance, PopoverProps } from "../../components/Popover/index.js";
 export type Instance = PopoverInstance;
 export type Context = {
     size?: MenuItemProps["size"];
@@ -17,7 +17,7 @@ export type Props = Pick<PopoverProps, "children" | "position" | "fallbackPositi
     size?: MenuItemProps["size"];
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
-export type ItemProps = Omit<MenuItemProps, "roundedCorners">;
+export type ItemProps = Omit<MenuItemProps, "roundedCorners" | "focusIndicator">;
 export type SectionProps = {
     /** Node for inserting children */
     children: React.ReactNode;
@@ -26,4 +26,4 @@ export type SubMenuProps = {
     /** Node for inserting children */
     children: React.ReactNode;
 } & Pick<PopoverProps, "position" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "width" | "containerRef">;
-export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;
+export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners" | "focusIndicator">;

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

@@ -1,5 +1,5 @@
-import Popover from "../../components/Popover";
-import DropdownMenu, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger } from "./DropdownMenu";
+import Popover from "../../components/Popover/index.js";
+import DropdownMenu, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger } from "./DropdownMenu.js";
 declare const DropdownMenuRoot: typeof DropdownMenu & {
     Dismissible: typeof Popover.Dismissible;
     Trigger: typeof Popover.Trigger;
@@ -10,4 +10,4 @@ declare const DropdownMenuRoot: typeof DropdownMenu & {
     SubTrigger: typeof DropdownMenuSubTrigger;
 };
 export default DropdownMenuRoot;
-export type { Instance as DropdownMenuInstance, Props as DropdownMenuProps, } from "./DropdownMenu.types";
+export type { Instance as DropdownMenuInstance, Props as DropdownMenuProps, } from "./DropdownMenu.types.js";

package/dist/components/DropdownMenu/index.js

@@ -1,5 +1,5 @@
-import Popover from "../../components/Popover";
-import DropdownMenu, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger, } from "./DropdownMenu";
+import Popover from "../../components/Popover/index.js";
+import DropdownMenu, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger, } from "./DropdownMenu.js";
 const DropdownMenuRoot = DropdownMenu;
 DropdownMenuRoot.Dismissible = Popover.Dismissible;
 DropdownMenuRoot.Trigger = Popover.Trigger;

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

@@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/DropdownMenu").DropdownMenuProps> & {
-        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
-        Content: typeof import("../DropdownMenu").DropdownMenuContent;
-        Section: typeof import("../DropdownMenu").DropdownMenuSection;
-        Item: typeof import("../DropdownMenu").DropdownMenuItem;
-        SubMenu: typeof import("../DropdownMenu").DropdownMenuSubMenu;
-        SubTrigger: typeof import("../DropdownMenu").DropdownMenuSubTrigger;
+    component: import("react").FC<import("../../../components/DropdownMenu/index.js").DropdownMenuProps> & {
+        Dismissible: import("react").FC<import("../../Dismissible/index.js").DismissibleProps>;
+        Trigger: import("react").FC<import("../../Flyout/index.js").FlyoutTriggerProps>;
+        Content: typeof import("../DropdownMenu.js").DropdownMenuContent;
+        Section: typeof import("../DropdownMenu.js").DropdownMenuSection;
+        Item: typeof import("../DropdownMenu.js").DropdownMenuItem;
+        SubMenu: typeof import("../DropdownMenu.js").DropdownMenuSubMenu;
+        SubTrigger: typeof import("../DropdownMenu.js").DropdownMenuSubTrigger;
     };
     parameters: {
         iframe: {