@simplybusiness/mobius 4.5.0 → 4.5.1

package/dist/cjs/components/Container/Container.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "./Container";
+type StoryType = StoryObj<typeof Container>;
+declare const meta: Meta<typeof Container>;
+export declare const Normal: StoryType;
+export default meta;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Container_1 = require("./Container");
+const meta = {
+    title: "Layout/Container",
+    component: Container_1.Container,
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({}, args, { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto, expedita ex maxime eum. Reiciendis, natus? Voluptatibus error beatae praesentium molestias saepe dolorem molestiae rem. Rem, eveniet beatae." }))),
+};
+exports.default = meta;
+//# sourceMappingURL=Container.stories.js.map

package/dist/cjs/components/Container/Container.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.js","sourceRoot":"","sources":["../../../../src/components/Container/Container.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAAwD;AAIxD,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,qBAAS;CACrB,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,qBAAS,oBAAK,IAAI,iQAKP,CACb;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Container/Container.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Container/Container.test.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/Container";
+describe("Container", () => {
+    it("should render without errors", () => {
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { children: "test" }));
+        expect(component).toBeTruthy();
+    });
+    it("should use the provided elementType", () => {
+        var _a;
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { elementType: "span", children: "test" }));
+        expect((_a = component.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName).toBe("SPAN");
+    });
+    describe("given elementType", () => {
+        it("is not applied as element attribute", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { elementType: "span" }));
+            expect(container.firstChild).not.toHaveAttribute("elementtype", "span");
+        });
+    });
+    describe("uses correct class names", () => {
+        it("uses Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { "data-testid": "test", children: "Sample text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { "data-testid": "test", children: "Sample text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Container, { className: "my-class", "data-testid": "test", children: "Sample Text" }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("my-class");
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=Container.test.js.map

package/dist/cjs/components/Container/Container.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.test.js","sourceRoot":"","sources":["../../../../src/components/Container/Container.test.tsx"],"names":[],"mappings":";;;AACA,kDAAwD;AACxD,wBAA8B;AAE9B,MAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,uBAAiB,CAAC,CAAC;QACtD,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;;QAC7C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,CAAC,CAAC;QACzE,MAAM,CAAC,MAAA,SAAS,CAAC,SAAS,CAAC,iBAAiB,0CAAE,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,YAAS,IAAC,WAAW,EAAC,MAAM,GAAG,CAAC,CAAC;YAC/D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC3B,IAAA,cAAM,EAAC,uBAAC,YAAS,mBAAa,MAAM,4BAAwB,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,IAAA,cAAM,EAAC,uBAAC,YAAS,mBAAa,MAAM,4BAAwB,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,IAAA,cAAM,EACJ,uBAAC,YAAS,IAAC,SAAS,EAAC,UAAU,iBAAa,MAAM,4BAEtC,CACb,CAAC;YACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC3D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Container/index.d.ts

@@ -0,0 +1 @@
+export * from "./Container";

package/dist/cjs/components/Divider/Divider.d.ts

@@ -0,0 +1,11 @@
+import { AriaAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export interface DividerProps extends DOMProps {
+    className?: string;
+    "aria-orientation"?: AriaAttributes["aria-orientation"];
+}
+declare const Divider: {
+    ({ "aria-orientation": ariaOrientation, className, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Divider };

package/dist/cjs/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Divider } from "./Divider";
+type StoryType = StoryObj<typeof Divider>;
+declare const meta: Meta<typeof Divider>;
+export declare const Normal: StoryType;
+export default meta;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Divider_1 = require("./Divider");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Components/Divider",
+    component: Divider_1.Divider,
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Divider_1.Divider, Object.assign({}, args)),
+};
+exports.default = meta;
+//# sourceMappingURL=Divider.stories.js.map

package/dist/cjs/components/Divider/Divider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.js","sourceRoot":"","sources":["../../../../src/components/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAAkD;AAClD,uCAA6C;AAI7C,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,iBAAO;IAClB,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,uBAAC,iBAAO,oBAAK,IAAI,EAAI;CACtD,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Divider/Divider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Divider/Divider.test.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/Divider";
+describe("Divider", () => {
+    it("should render without errors", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+    });
+    it("renders as a hr element by default", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+        expect(react_1.screen.getByRole("separator")).toBeInTheDocument();
+    });
+    describe("uses correct class names", () => {
+        it("uses mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+            expect(react_1.screen.getByRole("separator")).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, {}));
+            expect(react_1.screen.getByRole("separator")).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Divider, { className: "my-class" }));
+            expect(react_1.screen.getByRole("separator")).toHaveClass("my-class");
+            expect(react_1.screen.getByRole("separator")).toHaveClass(CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=Divider.test.js.map

package/dist/cjs/components/Divider/Divider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.test.js","sourceRoot":"","sources":["../../../../src/components/Divider/Divider.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AACxD,wBAA4B;AAE5B,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;QACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC3B,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;YACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,IAAA,cAAM,EAAC,uBAAC,UAAO,KAAG,CAAC,CAAC;YACpB,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,IAAA,cAAM,EAAC,uBAAC,UAAO,IAAC,SAAS,EAAC,UAAU,GAAG,CAAC,CAAC;YACzC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC9D,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Divider";

package/dist/cjs/components/Drawer/Content.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export type DivRef = Ref<HTMLDivElement>;
+export type DivElementType = HTMLDivElement;
+export interface ContentProps extends DOMProps, RefAttributes<DivElementType> {
+    children?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+declare const Content: import("react").ForwardRefExoticComponent<Omit<ContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export { Content };

package/dist/cjs/components/Drawer/Drawer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface DrawerProps {
+    isOpen: boolean;
+    /**
+     * Direction that drawer will open from
+     */
+    direction: "top" | "bottom" | "left" | "right";
+    className?: string;
+    closeLabel?: string;
+    /**
+     * Announce text for screen readers when drawer opens
+     */
+    announce?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+declare const Drawer: {
+    ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Drawer };

package/dist/cjs/components/Drawer/Drawer.js

@@ -12,153 +12,47 @@ Object.defineProperty(exports, "Drawer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
-const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
-const _polyfilltests = require("../../utils/polyfill-tests");
 const _VisuallyHidden = require("../VisuallyHidden");
 const _utils = require("../../utils");
 const _DrawerContext = require("./DrawerContext");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const TRANSITION_CLASS_NAME = "--transition";
+const TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
 const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
-    const hasOpened = (0, _react.useRef)(false);
-    const modalRef = (0, _react.useRef)(null);
-    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
-    // Fire onOpen once
-    if (onOpen && !hasOpened.current) {
-        onOpen();
-        hasOpened.current = true;
-    }
-    (0, _useBodyScrollLock.useBodyScrollLock)({
-        enabled: isOpen
-    });
-    // Add close handler, to enable closing transitions
-    const handleClose = (0, _react.useCallback)((event)=>{
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        // Name the callback function, so we can add and remove event listener
-        const transitionCallback = (e)=>{
-            // Close drawer only if the transition is on the dialog element
-            // As it can be on a child element (ie `<Button>` inside the drawer)
-            if (e.target === modalRef.current) {
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                doClose();
-            }
-        };
-        const doClose = ()=>{
-            var _modalRef_current, _modalRef_current1;
-            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
-        };
-        // Delay close to allow backdrop exit transition
-        if (hasDialogSupport) {
-            var _modalRef_current, _modalRef_current1;
-            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
-        } else {
-            doClose();
-        }
-    }, [
-        onClose,
-        hasDialogSupport
-    ]);
-    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
-        "--should-transition": hasDialogSupport
-    });
-    // Add polyfill for HTML Dialog in old browsers
-    (0, _react.useEffect)(()=>{
-        async function toggleModal() {
-            var _modalRef_current, _modalRef_current1;
-            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
-                // eslint-disable-next-line import/no-extraneous-dependencies
-                const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                try {
-                    dialogPolyfill.registerDialog(modalRef.current);
-                } catch (error) {
-                    // In iOS 15 <= 15.2 this intermittently fails with
-                    // TypeError: null is not an object (evaluating 'element.showModal')
-                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-                    console.error("Failed to load dialog-polyfill", error);
-                }
-            }
-            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
-                var _modalRef_current2, _modalRef_current3;
-                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
-                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
-                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
-                handleClose();
-            }
-        }
-        toggleModal();
-    }, [
+    const shouldTransition = (0, _utils.supportsDialog)();
+    const dialogRef = (0, _react.useRef)(null);
+    const { close } = (0, _hooks.useDialog)({
+        ref: dialogRef,
         isOpen,
         onOpen,
-        handleClose,
-        hasDialogSupport
-    ]);
+        onClose,
+        transition: {
+            isEnabled: true,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
+    const dialogClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": shouldTransition
+    });
     const contextValue = (0, _react.useMemo)(()=>({
-            onClose: handleClose,
+            onClose: close,
             closeLabel
         }), [
-        handleClose,
+        close,
         closeLabel
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
-        className: modalClasses,
+        onCancel: close,
+        className: dialogClasses,
         "aria-describedby": "screen-reader-announce",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {

package/dist/cjs/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: handleClose,\n      closeLabel,\n    }),\n    [handleClose, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","hasDialogSupport","supportsDialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","Provider","value","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { useDialog } from \"../../hooks\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","shouldTransition","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","dialogClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BA2ESA;;;eAAAA;;;;+DAzEc;uBAC0B;gCAClB;uBAEW;+BACZ;uBACJ;;;;;;AAK1B,MAAMC,0BAA0B;AAEhC,MAAMD,uBAASE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,mBAAmBC,IAAAA,qBAAc;IACvC,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1Bd,KAAKW;QACLV;QACAK;QACAC;QACAQ,YAAY;YACVC,WAAW;YACXC,aAAapB;QACf;IACF;IAEA,MAAMqB,gBAAgBC,IAAAA,eAAU,EAC9B,UACA,iBACA,CAAC,EAAE,EAAEf,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBO;IACzB;IAGF,MAAMW,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLd,SAASM;YACTV;QACF,CAAA,GACA;QAACU;QAAOV;KAAW;IAGrB,qBACE,sBAACmB;QACCtB,KAAKuB,IAAAA,gBAAS,EAAC;YAACZ;YAAWX;SAAI;QAC/BwB,UAAUX;QACVX,WAAWgB;QACXO,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvB;;;0BAEpC,qBAACwB,4BAAa,CAACC,QAAQ;gBAACC,OAAOX;0BAC5BZ;;;;AAIT;AAEAZ,OAAOoC,WAAW,GAAG"}

package/dist/cjs/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Drawer } from ".";
+type StoryType = StoryObj<typeof Drawer>;
+declare const meta: Meta<typeof Drawer>;
+export declare const Normal: StoryType;
+export declare const WithLogoHeader: StoryType;
+export declare const WithLongContent: StoryType;
+export default meta;

package/dist/cjs/components/Drawer/Drawer.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLongContent = exports.WithLogoHeader = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const meta = {
+    title: "Components/Drawer",
+    component: _1.Drawer,
+    argTypes: Object.assign({ direction: {
+            options: ["top", "bottom", "left", "right"],
+            control: { type: "radio" },
+        } }, (0, utils_1.excludeControls)("isOpen")),
+};
+const Demo = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "The Latin Drawer" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }));
+};
+const LogoHeader = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: (0, jsx_runtime_1.jsx)("img", { src: "https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance-1a46ba508f3dfcc89aa2498e7680ed15bd1704ccb01c614eb5335bd7b25e0537.png", alt: "Provider logo" }) }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Content." })] })] }));
+};
+const WithLongContentDemo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Int" }), (0, jsx_runtime_1.jsxs)(_1.Drawer.Content, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }))] }));
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Demo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLogoHeader = {
+    render: (args) => (0, jsx_runtime_1.jsx)(LogoHeader, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLongContent = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithLongContentDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/cjs/components/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,wBAAwC;AACxC,uCAA8C;AAC9C,sCAAmC;AACnC,kCAA+B;AAI/B,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,SAAM;IACjB,QAAQ,kBACN,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;YAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,IACE,IAAA,uBAAe,EAAC,QAAQ,CAAC,CAC7B;CACF,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAe,EAAE,EAAE;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,IACL,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAEtB,uBAAC,SAAM,CAAC,MAAM,mCAAiC,EAC/C,uBAAC,SAAM,CAAC,OAAO,qaAOE,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAe,EAAE,EAAE;IAC5D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,IACL,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAEtB,uBAAC,SAAM,CAAC,MAAM,cACZ,gCACE,GAAG,EAAC,iJAAiJ,EACrJ,GAAG,EAAC,eAAe,GACnB,GACY,EAChB,uBAAC,SAAM,CAAC,OAAO,2BAA0B,IAClC,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,oBAAK,KAAK,IAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,aAC5D,uBAAC,SAAM,CAAC,MAAM,6IAGE,EAChB,wBAAC,SAAM,CAAC,OAAO,eACb,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,IACQ,KACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,IAAI,oBAAK,IAAI,EAAI;IACjD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,OAAO;KACpB;CACF,CAAC;AAEW,QAAA,cAAc,GAAc;IACvC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,UAAU,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,OAAO;KACpB;CACF,CAAC;AAEW,QAAA,eAAe,GAAc;IACxC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,mBAAmB,oBAAK,IAAI,EAAI;IAChE,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Drawer/Drawer.test.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
+const _1 = require(".");
+const jestHTMLDialogPolyfill_1 = require("../../utils/jestHTMLDialogPolyfill");
+(0, jestHTMLDialogPolyfill_1.jestHTMLDialogPolyfill)();
+const DRAWER_CLASS_NAME = "mobius/Drawer";
+const DRAWER_CLOSE_CLASS_NAME = "mobius/DrawerClose";
+const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+describe("Drawer", () => {
+    beforeEach(() => {
+        mockMatchMedia(true);
+    });
+    afterAll(() => {
+        jest.resetAllMocks();
+    });
+    it("should render without errors", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { } }));
+        expect(container).toBeTruthy();
+    });
+    it("should render with default class names", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    it("should render with custom class name", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { direction: "right", className: "my-test-modal", isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(dialog).toHaveClass("my-test-modal");
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    describe("given the direction prop is set", () => {
+        it("should render with appropriate class name (right)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--right");
+        });
+        it("should render with appropriate class name (bottom)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "bottom" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--bottom");
+        });
+    });
+    describe("screen reader", () => {
+        it("should announce a default message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const message = react_1.screen.getByText("Drawer opened on screen");
+            expect(message).toBeInTheDocument();
+        });
+        it("should respect a custom announce message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right", announce: "Quote details page" }));
+            const message = react_1.screen.getByText("Quote details page");
+            expect(message).toBeInTheDocument();
+        });
+    });
+    xdescribe("pressing close button", () => {
+        it("should close the modal", async () => {
+            const App = () => {
+                const [isOpen, setIsOpen] = (0, react_2.useState)(true);
+                return ((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: isOpen, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Sample content" })] }));
+            };
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+            const modalContent = react_1.screen.getByText("Sample content");
+            expect(modalContent).toBeInTheDocument();
+            const closeButton = react_1.screen.getByLabelText("Close");
+            await user_event_1.default.click(closeButton);
+        });
+    });
+    describe("closeLabel prop", () => {
+        it("should render the label", () => {
+            const closeLabel = "Leave";
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: true, onClose: () => { }, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}), "Sample content"] }));
+            const closeButton = react_1.screen.getByText(closeLabel);
+            expect(closeButton).toBeInTheDocument();
+        });
+    });
+    it("should render the default close button", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(closeButton).toBeInTheDocument();
+    });
+    it("should fire onOpen callback if supplied", async () => {
+        const onOpen = jest.fn();
+        const App = () => {
+            const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": "Show modal", id: "btn", type: "button", onClick: () => setIsOpen(true), children: "Show modal" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), direction: "right", onOpen: onOpen, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), "Sample content"] })] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+        const showBtn = react_1.screen.getByText("Show modal");
+        expect(showBtn).toBeInTheDocument();
+        await user_event_1.default.click(showBtn);
+        expect(onOpen).toHaveBeenCalled();
+    });
+    it.todo("Drawer closes when Escape key is presed");
+    // JSDom does not support HTMLDialog click events
+    it.todo("Drawer closes when backdrop is clicked");
+});
+//# sourceMappingURL=Drawer.test.js.map