@simplybusiness/mobius 4.3.0 → 4.3.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

@@ -62,11 +62,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const TRANSITION_CLASS_NAME = "--transition";
 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 dialog = modalRef.current;
+    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
     // Fire onOpen once
     if (onOpen && !hasOpened.current) {
         onOpen();
@@ -75,43 +76,51 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
-    // Add close handler, to enable closing animations
+    // Add close handler, to enable closing transitions
     const handleClose = (0, _react.useCallback)((event)=>{
         if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
         const doClose = ()=>{
-            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         };
-        // Delay close to allow exit animation
-        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add("close");
-        dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("animationend", ()=>{
-            dialog.classList.remove("close");
+        // 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", ()=>{
+                doClose();
+            }, {
+                once: true
+            });
+        } else {
             doClose();
-        }, {
-            once: true
-        });
+        }
     }, [
         onClose,
-        dialog
+        hasDialogSupport
     ]);
-    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className);
+    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;
-            if (!(0, _polyfilltests.supportsDialog)() && typeof window !== "undefined") {
+            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")));
                 dialogPolyfill.registerDialog(modalRef.current);
             }
-            if (isOpen) {
-                var _modalRef_current1;
-                (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
+            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 ((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open) {
+            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
                 handleClose();
             }
         }
@@ -119,7 +128,8 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     }, [
         isOpen,
         onOpen,
-        handleClose
+        handleClose,
+        hasDialogSupport
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([

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  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\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\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\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);\n  const dialog = modalRef.current as HTMLDialogElement;\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 animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit animation\n      dialog?.classList.add(\"close\");\n      dialog?.addEventListener(\n        \"animationend\",\n        () => {\n          dialog.classList.remove(\"close\");\n          doClose();\n        },\n        { once: true },\n      );\n    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\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      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","dialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","useEffect","toggleModal","supportsDialog","window","default","dialogPolyfill","registerDialog","showModal","open","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA6HSA;;;eAAAA;;;;+DA3Hc;uBAWhB;mCAC2B;+BACH;gCACA;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMA,uBAASC,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,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,WAAWD,IAAAA,aAAM,EAAoB;IAC3C,MAAME,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIP,UAAU,CAACG,UAAUI,OAAO,EAAE;QAChCP;QACAG,UAAUI,OAAO,GAAG;IACtB;IAEAC,IAAAA,oCAAiB,EAAC;QAAEC,SAASd;IAAO;IAEpC,kDAAkD;IAClD,MAAMe,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdT,mBAAAA,6BAAAA,OAAQU,KAAK;YACbf,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCK,mBAAAA,6BAAAA,OAAQW,SAAS,CAACC,GAAG,CAAC;QACtBZ,mBAAAA,6BAAAA,OAAQa,gBAAgB,CACtB,gBACA;YACEb,OAAOW,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACpB;QAASK;KAAO;IAGnB,MAAMgB,eAAeC,IAAAA,eAAU,EAC7B,UACA,iBACA,CAAC,EAAE,EAAEzB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/C4B,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAUFpB;YATX,IAAI,CAACqB,IAAAA,6BAAc,OAAM,OAAOC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAACzB,SAASE,OAAO;YAChD;YAEA,IAAIZ,QAAQ;oBACVU;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkB0B,SAAS;gBAC3B/B,mBAAAA,6BAAAA;YACF,OAAO,KAAIK,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkB2B,IAAI,EAAE;gBACjCtB;YACF;QACF;QAEAe;IACF,GAAG;QAAC9B;QAAQK;QAAQU;KAAY;IAEhC,qBACE,sBAACJ;QACCZ,KAAKuC,IAAAA,gBAAS,EAAC;YAAC5B;YAAUX;SAAI;QAC9BwC,UAAUxB;QACVd,WAAW0B;QACXa,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvC;;;YAEnCwC,eAAQ,CAACC,GAAG,CAACtC,UAAUuC,CAAAA;gBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;oBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;wBACzBxC,SAASS;wBACTb;oBACF;gBACF;gBAEA,OAAO4C;YACT;;;AAGN;AAEAlD,OAAOqD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\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\";\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      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\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(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\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        dialogPolyfill.registerDialog(modalRef.current);\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  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      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\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","doClose","close","classList","remove","addEventListener","once","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","open","showModal","add","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}

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":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.test.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DrawerContext", {
+    enumerable: true,
+    get: function() {
+        return DrawerContext;
+    }
+});
+const _react = require("react");
+const DrawerContext = /*#__PURE__*/ (0, _react.createContext)({
+    closeDrawer: ()=>{},
+    closeLabel: ""
+});
+
+//# sourceMappingURL=DrawerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Drawer/DrawerContext.tsx"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\nimport { DrawerProps } from \"./types\";\n\nexport interface DrawerContextProps extends Pick<DrawerProps, \"closeLabel\"> {\n  closeDrawer: (event?: SyntheticEvent<HTMLElement, Event>) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  closeDrawer: () => {},\n  closeLabel: \"\",\n});\n"],"names":["DrawerContext","createContext","closeDrawer","closeLabel"],"mappings":";;;;+BAOaA;;;eAAAA;;;uBAPiC;AAOvC,MAAMA,8BAAgBC,IAAAA,oBAAa,EAAqB;IAC7DC,aAAa,KAAO;IACpBC,YAAY;AACd"}

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

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

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

@@ -0,0 +1,12 @@
+import { DivElementType as DrawerContentDivElementType, ContentProps as DrawerContentProps } from "./Content";
+import { DrawerProps } from "./Drawer";
+import { HeaderElementType as DrawerHeaderElementType, HeaderProps as DrawerHeaderProps } from "./Header";
+declare const Drawer: {
+    ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: import("react").ForwardRefExoticComponent<Omit<DrawerHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Drawer };
+export type { DrawerContentDivElementType, DrawerContentProps, DrawerHeaderElementType, DrawerHeaderProps, DrawerProps, };