@simplybusiness/mobius 4.4.5 → 4.4.6

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

@@ -78,6 +78,9 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     });
     // Add close handler, to enable closing transitions
     const handleClose = (0, _react.useCallback)((event)=>{
+        // `transitionend` may be called from another component but `event` may be undefined.
+        // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both
+        if (!event) return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();

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 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  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","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BAyJSA;;;eAAAA;;;;+DAvJc;uBAWhB;mCAC2B;+BACH;gCACA;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMC,wBAAwB;AAE9B,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,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,WAAWD,IAAAA,aAAM,EAA2B;IAClD,MAAME,mBAAmBC,IAAAA,6BAAc;IAEvC,mBAAmB;IACnB,IAAIP,UAAU,CAACG,UAAUK,OAAO,EAAE;QAChCR;QACAG,UAAUK,OAAO,GAAG;IACtB;IAEAC,IAAAA,oCAAiB,EAAC;QAAEC,SAASf;IAAO;IAEpC,mDAAmD;IACnD,MAAMgB,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,sEAAsE;QACtE,MAAMC,qBAAqB,CAACC;YAC1B,+DAA+D;YAC/D,oEAAoE;YACpE,IAAIA,EAAEC,MAAM,KAAKb,SAASG,OAAO,EAAE;gBACjC,mEAAmE;gBACnEW;YACF;QACF;QAEA,MAAMA,UAAU;gBACdd,mBAEAA;aAFAA,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBe,KAAK;YACvBnB,oBAAAA,8BAAAA;aACAI,qBAAAA,SAASG,OAAO,cAAhBH,yCAAAA,mBAAkBgB,mBAAmB,CACnC,iBACAL;QAEJ;QAEA,gDAAgD;QAChD,IAAIV,kBAAkB;gBACpBD,mBACAA;aADAA,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBiB,SAAS,CAACC,MAAM,CAAChC;aACnCc,qBAAAA,SAASG,OAAO,cAAhBH,yCAAAA,mBAAkBmB,gBAAgB,CAAC,iBAAiBR;QACtD,OAAO;YACLG;QACF;IACF,GACA;QAAClB;QAASK;KAAiB;IAG7B,MAAMmB,eAAeC,IAAAA,eAAU,EAC7B,UACA,iBACA,CAAC,EAAE,EAAE5B,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBU;IACzB;IAGF,+CAA+C;IAC/CqB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAkBEvB,mBAIOA;YArBtB,IACE,CAACC,oBACD,OAAOuB,WAAW,eAClBxB,SAASG,OAAO,KAAK,MACrB;gBACA,6DAA6D;gBAC7D,MAAM,EAAEsB,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjD,IAAI;oBACFA,eAAeC,cAAc,CAAC3B,SAASG,OAAO;gBAChD,EAAE,OAAOyB,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;YAEA,IAAItC,UAAU,GAACU,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkB8B,IAAI,GAAE;oBACrC9B,oBACAA;iBADAA,qBAAAA,SAASG,OAAO,cAAhBH,yCAAAA,mBAAkB+B,SAAS;iBAC3B/B,qBAAAA,SAASG,OAAO,cAAhBH,yCAAAA,mBAAkBiB,SAAS,CAACe,GAAG,CAAC9C;gBAChCS,mBAAAA,6BAAAA;YACF,OAAO,IAAI,CAACL,YAAUU,qBAAAA,SAASG,OAAO,cAAhBH,yCAAAA,mBAAkB8B,IAAI,GAAE;gBAC5CxB;YACF;QACF;QAEAiB;IACF,GAAG;QAACjC;QAAQK;QAAQW;QAAaL;KAAiB;IAElD,qBACE,sBAACgC;QACC5C,KAAK6C,IAAAA,gBAAS,EAAC;YAAClC;YAAUX;SAAI;QAC9B8C,UAAU7B;QACVf,WAAW6B;QACXgB,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0B7C;;;YAEnC8C,eAAQ,CAACC,GAAG,CAAC5C,UAAU6C,CAAAA;gBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;oBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;wBACzB9C,SAASU;wBACTd;oBACF;gBACF;gBAEA,OAAOkD;YACT;;;AAGN;AAEAzD,OAAO4D,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      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both\n      if (!event) return;\n\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  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","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","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":";;;;;;AAAA,kDAAwD;AACxD,6EAAoD;AACpD,iCAAiC;AACjC,wBAA2B;AAC3B,+EAA4E;AAE5E,IAAA,+CAAsB,GAAE,CAAC;AAEzB,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC1C,MAAM,uBAAuB,GAAG,oBAAoB,CAAC;AAErD,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC1C,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE;QAC1C,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,IAAI;QAClB,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC5C,OAAO;YACP,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;YACtB,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE;YACzB,gBAAgB,EAAE,IAAI,CAAC,EAAE,EAAE;YAC3B,mBAAmB,EAAE,IAAI,CAAC,EAAE,EAAE;YAC9B,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;SACzB,CAAC,CAAC;KACJ,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,UAAU,CAAC,GAAG,EAAE;QACd,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,uBAAC,SAAM,IAAC,MAAM,QAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CACvD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,IAAA,cAAM,EACJ,uBAAC,SAAM,IAAC,MAAM,QAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,YAChD,uBAAC,SAAM,CAAC,MAAM,KAAG,GACV,CACV,CAAC;QAEF,MAAM,MAAM,GAAG,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,cAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEnD,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAC9C,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,IAAA,cAAM,EACJ,uBAAC,SAAM,IACL,SAAS,EAAC,OAAO,EACjB,SAAS,EAAC,eAAe,EACzB,MAAM,QACN,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,YAEjB,uBAAC,SAAM,CAAC,MAAM,KAAG,GACV,CACV,CAAC;QAEF,MAAM,MAAM,GAAG,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,cAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEnD,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;QAC/C,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;YAC3D,IAAA,cAAM,EAAC,uBAAC,SAAM,IAAC,MAAM,QAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,SAAS,EAAC,OAAO,GAAG,CAAC,CAAC;YAE/D,MAAM,MAAM,GAAG,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC1C,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE;YAC5D,IAAA,cAAM,EAAC,uBAAC,SAAM,IAAC,MAAM,QAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,SAAS,EAAC,QAAQ,GAAG,CAAC,CAAC;YAEhE,MAAM,MAAM,GAAG,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC1C,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC7B,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;YACtD,IAAA,cAAM,EAAC,uBAAC,SAAM,IAAC,MAAM,QAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,SAAS,EAAC,OAAO,GAAG,CAAC,CAAC;YAE/D,MAAM,OAAO,GAAG,cAAM,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC;YAC5D,MAAM,CAAC,OAAO,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;YAC7D,IAAA,cAAM,EACJ,uBAAC,SAAM,IACL,MAAM,QACN,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EACjB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAC,oBAAoB,GAC7B,CACH,CAAC;YAEF,MAAM,OAAO,GAAG,cAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;YACvD,MAAM,CAAC,OAAO,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACtC,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;YACtC,MAAM,GAAG,GAAG,GAAG,EAAE;gBACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,CAAC;gBAEpD,OAAO,CACL,wBAAC,SAAM,IACL,SAAS,EAAC,OAAO,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,aAE/B,uBAAC,SAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,SAAM,CAAC,OAAO,iCAAgC,IACxC,CACV,CAAC;YACJ,CAAC,CAAC;YAEF,IAAA,cAAM,EAAC,uBAAC,GAAG,KAAG,CAAC,CAAC;YAEhB,MAAM,YAAY,GAAG,cAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;YACxD,MAAM,CAAC,YAAY,CAAC,CAAC,iBAAiB,EAAE,CAAC;YACzC,MAAM,WAAW,GAAG,cAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YACnD,MAAM,oBAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAC/B,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;YACjC,MAAM,UAAU,GAAG,OAAO,CAAC;YAE3B,IAAA,cAAM,EACJ,wBAAC,SAAM,IACL,SAAS,EAAC,OAAO,EACjB,MAAM,QACN,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EACjB,UAAU,EAAE,UAAU,aAEtB,uBAAC,SAAM,CAAC,MAAM,KAAG,sBAEV,CACV,CAAC;YAEF,MAAM,WAAW,GAAG,cAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;YACjD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,IAAA,cAAM,EACJ,uBAAC,SAAM,IAAC,MAAM,QAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,YAChD,uBAAC,SAAM,CAAC,MAAM,KAAG,GACV,CACV,CAAC;QAEF,MAAM,WAAW,GAAG,cAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAEzB,MAAM,GAAG,GAAG,GAAG,EAAE;YACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;YAErD,OAAO,CACL,6DACE,iDACa,YAAY,EACvB,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,2BAGvB,EAET,wBAAC,SAAM,IACL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAC,OAAO,EACjB,MAAM,EAAE,MAAM,aAEd,uBAAC,SAAM,CAAC,MAAM,yBAAuB,sBAE9B,IACR,CACJ,CAAC;QACJ,CAAC,CAAC;QAEF,IAAA,cAAM,EAAC,uBAAC,GAAG,KAAG,CAAC,CAAC;QAEhB,MAAM,OAAO,GAAG,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QAE/C,MAAM,CAAC,OAAO,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACpC,MAAM,oBAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC/B,MAAM,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IACnD,iDAAiD;IACjD,EAAE,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC"}

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, };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport const useDrawer = () => {\n  const { closeDrawer, closeLabel } = useContext(DrawerContext);\n\n  return {\n    closeDrawer,\n    closeLabel,\n  };\n};\n"],"names":["useDrawer","closeDrawer","closeLabel","useContext","DrawerContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHc;+BACG;AAEvB,MAAMA,YAAY;IACvB,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGC,IAAAA,iBAAU,EAACC,4BAAa;IAE5D,OAAO;QACLH;QACAC;IACF;AACF"}

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

@@ -0,0 +1,15 @@
+import { Ref, RefAttributes, ReactNode, ReactElement } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+export type DropdownMenuElementType = HTMLElement;
+export interface DropdownMenuProps extends DOMProps, RefAttributes<DropdownMenuElementType> {
+    children?: ReactNode;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    elementType?: string | React.ElementType;
+    label?: string;
+    trigger?: ReactElement;
+}
+export type DropdownMenuRef = Ref<DropdownMenuElementType>;
+declare const DropdownMenu: ForwardedRefComponent<DropdownMenuProps, DropdownMenuElementType>;
+export { DropdownMenu };

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

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