reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,228 +1,224 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testPortal = exports.className = exports.containerRefNotContained = exports.containerRef = exports.disableCloseOnClick = exports.handlers = exports.renderProps = exports.blurred = exports.transparent = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Overlay_1 = __importDefault(require("../../../components/Overlay"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import ReactDOM from "react-dom";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Overlay from "../../../components/Overlay/index.js";
+import View from "../../../components/View/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Overlay",
-    component: Overlay_1.default,
+    component: Overlay,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/overlay",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const overlayToggle = (0, useToggle_1.default)(false);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="base">
-					<Button_1.default onClick={overlayToggle.activate}>Open overlay</Button_1.default>
-					<Overlay_1.default active={overlayToggle.active} onClose={overlayToggle.deactivate}>
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>
 						Overlay content
-					</Overlay_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</Overlay>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvas }) => {
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
     },
 };
-exports.transparent = {
+export const transparent = {
     name: "transparent",
     render: () => {
-        const overlayToggle = (0, useToggle_1.default)(false);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="base">
-					<Button_1.default onClick={overlayToggle.activate}>Open overlay</Button_1.default>
-					<Overlay_1.default active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>
 						Overlay content
-					</Overlay_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</Overlay>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvas }) => {
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
     },
 };
-exports.blurred = {
+export const blurred = {
     name: "blurred",
     render: () => {
-        const overlayToggle = (0, useToggle_1.default)(false);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="base">
-					<Button_1.default onClick={overlayToggle.activate}>Open overlay</Button_1.default>
-					<Overlay_1.default active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>
 						Overlay content
-					</Overlay_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</Overlay>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvas }) => {
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
     },
 };
-exports.renderProps = {
+export const renderProps = {
     name: "children, render props",
-    render: () => (<Overlay_1.default active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
 			{(args) => (args.active ? "Opened" : "Closed")}
-		</Overlay_1.default>),
+		</Overlay>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const root = canvas.getByText("Opened");
-        (0, test_1.expect)(root).toBeInTheDocument();
+        expect(root).toBeInTheDocument();
     },
 };
-exports.handlers = {
+export const handlers = {
     name: "onClose, onAfterOpen, onAfterClose",
     args: {
-        handleClose: (0, test_1.fn)(),
-        handleAfterClose: (0, test_1.fn)(),
-        handleAfterOpen: (0, test_1.fn)(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
     },
     render: (args) => {
-        const overlayToggle = (0, useToggle_1.default)();
+        const overlayToggle = useToggle();
         return (<>
-				<Button_1.default onClick={() => overlayToggle.toggle()}>Open overlay</Button_1.default>
-				<Overlay_1.default active={overlayToggle.active} onClose={(closeArgs) => {
+				<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
+				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
                 overlayToggle.deactivate();
                 args.handleClose(closeArgs);
             }} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
 					Content
-				</Overlay_1.default>
+				</Overlay>
 			</>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         // Wait for transition
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
         });
         // Close by changing the state after the trigger click
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         // Changing state doesn't trigger onClose
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(0);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
         // Wait for transition
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
         });
         // Open
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         const overlay = canvas.getByText("Content").parentElement;
         // TODO: Fails CLI tests in Storybook without a timeout
-        await (0, helpers_1.sleep)(100);
+        await sleep(100);
         // Close by clicking on the overlay
-        await test_1.userEvent.click(overlay);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(2);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
         });
         // Open
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         // TODO: Fails CLI tests in Storybook without a timeout
-        await (0, helpers_1.sleep)(100);
+        await sleep(100);
         // Close by pressing Escape
-        await test_1.userEvent.keyboard("{Escape}");
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(3);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        await userEvent.keyboard("{Escape}");
+        expect(args.handleClose).toHaveBeenCalledTimes(2);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
         });
     },
 };
-exports.disableCloseOnClick = {
+export const disableCloseOnClick = {
     name: "disableCloseOnClick",
     args: {
-        handleClose: (0, test_1.fn)(),
+        handleClose: fn(),
     },
-    render: (args) => (<Overlay_1.default active disableCloseOnClick onClose={(closeArgs) => {
+    render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
             args.handleClose(closeArgs);
         }}>
 			Content
-		</Overlay_1.default>),
+		</Overlay>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const overlay = canvas.getByText("Content");
-        await test_1.userEvent.click(overlay);
+        await userEvent.click(overlay);
         // TODO: Fails CLI tests in Storybook without a timeout
-        await (0, helpers_1.sleep)(100);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(0);
-        await test_1.userEvent.keyboard("{Escape}");
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
+        await sleep(100);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("{Escape}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
     },
 };
-exports.containerRef = {
+export const containerRef = {
     name: "containerRef",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
+        const containerRef = React.useRef(null);
         return (<>
 				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
-				<Overlay_1.default active containerRef={containerRef}>
+				<Overlay active containerRef={containerRef}>
 					Content
-				</Overlay_1.default>
+				</Overlay>
 			</>);
     },
     play: ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const container = canvas.getByTestId("test-id");
         const overlay = canvas.getByText("Content");
-        (0, test_1.expect)(container).toContainElement(overlay);
+        expect(container).toContainElement(overlay);
     },
 };
-exports.containerRefNotContained = {
+export const containerRefNotContained = {
     name: "containerRef with contained={false}",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
+        const containerRef = React.useRef(null);
         return (<>
 				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
-				<Overlay_1.default active containerRef={containerRef} contained={false}>
+				<Overlay active containerRef={containerRef} contained={false}>
 					Content
-				</Overlay_1.default>
+				</Overlay>
 			</>);
     },
     play: ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const container = canvas.getByTestId("test-id");
         const overlay = canvas.getByText("Content");
-        (0, test_1.expect)(container).toContainElement(overlay);
+        expect(container).toContainElement(overlay);
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
-    render: () => (<Overlay_1.default active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
 			Content
-		</Overlay_1.default>),
+		</Overlay>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const root = canvas.getByTestId("test-id");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
+        expect(root).toHaveClass("test-classname");
+        // Backdrop click is a pointer shortcut, it shouldn't be announced as a button
+        expect(root).toHaveAttribute("role", "presentation");
     },
 };
-exports.testPortal = {
+export const testPortal = {
     name: "test: second portal",
     args: {
-        handleClose: (0, test_1.fn)(),
+        handleClose: fn(),
     },
     parameters: {
         docs: {
@@ -233,31 +229,31 @@ exports.testPortal = {
         },
     },
     render: (args) => {
-        const overlayToggle = (0, useToggle_1.default)(false);
+        const overlayToggle = useToggle(false);
         const handleClose = () => {
             args.handleClose();
             overlayToggle.deactivate();
         };
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="base">
-					<Button_1.default onClick={overlayToggle.activate}>Open overlay</Button_1.default>
-					<Overlay_1.default active={overlayToggle.active} onClose={handleClose}>
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={handleClose}>
 						Overlay content
-						{react_dom_1.default.createPortal(<View_1.default position="absolute" insetTop={4} insetStart={4} width={30} height={30} backgroundColor="neutral" zIndex={9999} padding={4} borderRadius="small" align="center" justify="center" attributes={{ "data-testid": "portal" }}>
+						{ReactDOM.createPortal(<View position="absolute" insetTop={4} insetStart={4} width={30} height={30} backgroundColor="neutral" zIndex={9999} padding={4} borderRadius="small" align="center" justify="center" attributes={{ "data-testid": "portal" }}>
 								Portal
-							</View_1.default>, document.body)}
-					</Overlay_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+							</View>, document.body)}
+					</Overlay>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
-        await (0, helpers_1.sleep)(300);
+        await userEvent.click(trigger);
+        await sleep(300);
         const portal = canvas.getByTestId("portal");
-        (0, test_1.expect)(portal).toBeInTheDocument();
-        await test_1.userEvent.click(portal);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(0);
+        expect(portal).toBeInTheDocument();
+        await userEvent.click(portal);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
     },
 };

package/dist/components/Pagination/Pagination.d.ts

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

package/dist/components/Pagination/Pagination.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PaginationControlled from "./PaginationControlled";
-import PaginationUncontrolled from "./PaginationUncontrolled";
+import PaginationControlled from "./PaginationControlled.js";
+import PaginationUncontrolled from "./PaginationUncontrolled.js";
 const Pagination = (props) => {
     const { page } = props;
     if (page !== undefined)

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type BaseProps = {
     /** Total number of pages available */
     total: number;

package/dist/components/Pagination/PaginationControlled.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Pagination.types";
+import type * as T from "./Pagination.types.js";
 declare const PaginationControlled: React.FC<T.ControlledProps>;
 export default PaginationControlled;

package/dist/components/Pagination/PaginationControlled.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from "../../components/Button";
-import View from "../../components/View";
-import { range } from "../../utilities/helpers";
-import IconChevronLeft from "../../icons/ChevronLeft";
-import IconChevronRight from "../../icons/ChevronRight";
+import Button from "../../components/Button/index.js";
+import View from "../../components/View/index.js";
+import { range } from "../../utilities/helpers.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import s from "./Pagination.module.css";
 const PaginationControlled = (props) => {
     const { total, page: selectedPage = 1, onChange, pageAriaLabel, previousAriaLabel, nextAriaLabel, className, attributes, } = props;

package/dist/components/Pagination/PaginationUncontrolled.d.ts

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

package/dist/components/Pagination/PaginationUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import PaginationControlled from "./PaginationControlled";
+import PaginationControlled from "./PaginationControlled.js";
 const PaginationUncontrolled = (props) => {
     const { defaultPage = 1, onChange, ...controlledProps } = props;
     const [page, setPage] = React.useState(defaultPage || 1);

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

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

package/dist/components/Pagination/index.js

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

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Pagination").PaginationProps>;
+    component: import("react").FC<import("../../../components/Pagination/index.js").PaginationProps>;
     parameters: {
         iframe: {
             url: string;