@simplybusiness/mobius 9.1.2 → 9.3.0

package/dist/cjs/components/DateField/validation.js

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DateField/validation.ts
+var validation_exports = {};
+__export(validation_exports, {
+  convertToDateFormat: () => convertToDateFormat,
+  isValidDate: () => isValidDate
+});
+module.exports = __toCommonJS(validation_exports);
+var convertToDateFormat = (date, format) => {
+  const dateParts = date.split(/[-/]/);
+  const formatParts = format ? format.split(/[-/]/) : ["yyyy", "mm", "dd"];
+  const dateObj = {};
+  const formattedDate = [];
+  for (let i = 0; i < formatParts.length; i++) {
+    dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;
+  }
+  formattedDate.push(dateObj["yyyy"]?.toString() || "0000");
+  formattedDate.push(
+    (dateObj["mm"] < 10 ? "0" : "") + (dateObj["mm"]?.toString() || "00")
+  );
+  formattedDate.push(
+    (dateObj["dd"] < 10 ? "0" : "") + (dateObj["dd"]?.toString() || "00")
+  );
+  return formattedDate.join("-");
+};
+var isValidDate = (date, format = "yyyy-mm-dd") => {
+  if (!date) return true;
+  const standardDate = convertToDateFormat(date, format);
+  const [yearStr, monthStr, dayStr] = standardDate.split("-");
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return day > 0 && day <= daysInMonth;
+};
+//# sourceMappingURL=validation.js.map

package/dist/cjs/components/DateField/validation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DateField/validation.ts"],
+  "sourcesContent": ["// Convert a custom format date string to the format \"yyyy-mm-dd\".\nexport const convertToDateFormat = (date: string, format?: string): string => {\n  const dateParts = date.split(/[-/]/);\n  const formatParts = format ? format.split(/[-/]/) : [\"yyyy\", \"mm\", \"dd\"];\n  const dateObj: { [key: string]: number } = {};\n  const formattedDate: string[] = [];\n\n  for (let i = 0; i < formatParts.length; i++) {\n    dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;\n  }\n\n  formattedDate.push(dateObj[\"yyyy\"]?.toString() || \"0000\");\n  formattedDate.push(\n    (dateObj[\"mm\"] < 10 ? \"0\" : \"\") + (dateObj[\"mm\"]?.toString() || \"00\"),\n  );\n  formattedDate.push(\n    (dateObj[\"dd\"] < 10 ? \"0\" : \"\") + (dateObj[\"dd\"]?.toString() || \"00\"),\n  );\n\n  return formattedDate.join(\"-\");\n};\n\nexport const isValidDate = (date?: string, format = \"yyyy-mm-dd\"): boolean => {\n  if (!date) return true;\n\n  // Convert date to standard format\n  const standardDate = convertToDateFormat(date, format);\n\n  // Parse the standardized date\n  const [yearStr, monthStr, dayStr] = standardDate.split(\"-\");\n  const year = parseInt(yearStr, 10);\n  const month = parseInt(monthStr, 10);\n  const day = parseInt(dayStr, 10);\n\n  // Validate month range\n  if (month < 1 || month > 12) {\n    return false;\n  }\n\n  // Check if day is valid for the month\n  const daysInMonth = new Date(year, month, 0).getDate();\n  return day > 0 && day <= daysInMonth;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,IAAM,sBAAsB,CAAC,MAAc,WAA4B;AAC5E,QAAM,YAAY,KAAK,MAAM,MAAM;AACnC,QAAM,cAAc,SAAS,OAAO,MAAM,MAAM,IAAI,CAAC,QAAQ,MAAM,IAAI;AACvE,QAAM,UAAqC,CAAC;AAC5C,QAAM,gBAA0B,CAAC;AAEjC,WAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,YAAQ,YAAY,CAAC,CAAC,IAAI,UAAU,CAAC,IAAI,SAAS,UAAU,CAAC,GAAG,EAAE,IAAI;AAAA,EACxE;AAEA,gBAAc,KAAK,QAAQ,MAAM,GAAG,SAAS,KAAK,MAAM;AACxD,gBAAc;AAAA,KACX,QAAQ,IAAI,IAAI,KAAK,MAAM,OAAO,QAAQ,IAAI,GAAG,SAAS,KAAK;AAAA,EAClE;AACA,gBAAc;AAAA,KACX,QAAQ,IAAI,IAAI,KAAK,MAAM,OAAO,QAAQ,IAAI,GAAG,SAAS,KAAK;AAAA,EAClE;AAEA,SAAO,cAAc,KAAK,GAAG;AAC/B;AAEO,IAAM,cAAc,CAAC,MAAe,SAAS,iBAA0B;AAC5E,MAAI,CAAC,KAAM,QAAO;AAGlB,QAAM,eAAe,oBAAoB,MAAM,MAAM;AAGrD,QAAM,CAAC,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,GAAG;AAC1D,QAAM,OAAO,SAAS,SAAS,EAAE;AACjC,QAAM,QAAQ,SAAS,UAAU,EAAE;AACnC,QAAM,MAAM,SAAS,QAAQ,EAAE;AAG/B,MAAI,QAAQ,KAAK,QAAQ,IAAI;AAC3B,WAAO;AAAA,EACT;AAGA,QAAM,cAAc,IAAI,KAAK,MAAM,OAAO,CAAC,EAAE,QAAQ;AACrD,SAAO,MAAM,KAAK,OAAO;AAC3B;",
+  "names": []
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Divider/Divider.tsx
+var Divider_exports = {};
+__export(Divider_exports, {
+  Divider: () => Divider
+});
+module.exports = __toCommonJS(Divider_exports);
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Divider = require("@simplybusiness/mobius/src/components/Divider/Divider.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = (0, import_dedupe.default)("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobius-divider__inner" })
+    }
+  );
+};
+Divider.displayName = "Divider";
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Divider/Divider.tsx"],
+  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { AriaAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Divider.css\";\n\nexport interface DividerProps extends DOMProps {\n  className?: string;\n  \"aria-orientation\"?: AriaAttributes[\"aria-orientation\"];\n}\n\nconst Divider = ({\n  \"aria-orientation\": ariaOrientation = \"horizontal\",\n  className,\n  ...rest\n}: DividerProps) => {\n  const classes = classNames(\"mobius\", \"mobius-divider\", className);\n\n  return (\n    <div\n      className={classes}\n      role=\"separator\"\n      aria-orientation={ariaOrientation}\n      {...rest}\n    >\n      <div className=\"mobius-divider__inner\" />\n    </div>\n  );\n};\n\nDivider.displayName = \"Divider\";\nexport { Divider };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AAGvB,qBAAO;AAqBD;AAdN,IAAM,UAAU,CAAC;AAAA,EACf,oBAAoB,kBAAkB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAU,cAAAA,SAAW,UAAU,kBAAkB,SAAS;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,sDAAC,SAAI,WAAU,yBAAwB;AAAA;AAAA,EACzC;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": ["classNames"]
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Divider/index.tsx
+var Divider_exports = {};
+__export(Divider_exports, {
+  Divider: () => Divider
+});
+module.exports = __toCommonJS(Divider_exports);
+
+// src/components/Divider/Divider.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Divider = require("@simplybusiness/mobius/src/components/Divider/Divider.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = (0, import_dedupe.default)("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobius-divider__inner" })
+    }
+  );
+};
+Divider.displayName = "Divider";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Divider/index.tsx", "../../../../src/components/Divider/Divider.tsx"],
+  "sourcesContent": ["export * from \"./Divider\";\n", "import classNames from \"classnames/dedupe\";\nimport type { AriaAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Divider.css\";\n\nexport interface DividerProps extends DOMProps {\n  className?: string;\n  \"aria-orientation\"?: AriaAttributes[\"aria-orientation\"];\n}\n\nconst Divider = ({\n  \"aria-orientation\": ariaOrientation = \"horizontal\",\n  className,\n  ...rest\n}: DividerProps) => {\n  const classes = classNames(\"mobius\", \"mobius-divider\", className);\n\n  return (\n    <div\n      className={classes}\n      role=\"separator\"\n      aria-orientation={ariaOrientation}\n      {...rest}\n    >\n      <div className=\"mobius-divider__inner\" />\n    </div>\n  );\n};\n\nDivider.displayName = \"Divider\";\nexport { Divider };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAAuB;AAGvB,qBAAO;AAqBD;AAdN,IAAM,UAAU,CAAC;AAAA,EACf,oBAAoB,kBAAkB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAU,cAAAA,SAAW,UAAU,kBAAkB,SAAS;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,sDAAC,SAAI,WAAU,yBAAwB;AAAA;AAAA,EACzC;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": ["classNames"]
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Drawer/Content.tsx
+var Content_exports = {};
+__export(Content_exports, {
+  Content: () => Content
+});
+module.exports = __toCommonJS(Content_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
+Content.displayName = "Content";
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Drawer/Content.tsx"],
+  "sourcesContent": ["import type { PropsWithChildren, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps, RefAttributes<DivElementType>, PropsWithChildren {}\n\nconst Content = ({ ref, children, ...otherProps }: ContentProps) => (\n  <div ref={ref} {...otherProps} className=\"mobius-drawer__content\">\n    {children}\n  </div>\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AADF,IAAM,UAAU,CAAC,EAAE,KAAK,UAAU,GAAG,WAAW,MAC9C,4CAAC,SAAI,KAAW,GAAG,YAAY,WAAU,0BACtC,UACH;AAGF,QAAQ,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,252 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Drawer/Drawer.tsx
+var Drawer_exports = {};
+__export(Drawer_exports, {
+  Drawer: () => Drawer
+});
+module.exports = __toCommonJS(Drawer_exports);
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_react4 = require("react");
+
+// src/hooks/useDialog/useDialog.ts
+var import_react2 = require("react");
+
+// src/utils/mergeRefs.ts
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+// src/utils/polyfill-tests.ts
+var supportsDialog = () => typeof HTMLDialogElement === "function";
+
+// src/hooks/useDialog/useDialog.ts
+var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
+
+// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
+var import_react = require("react");
+var useDialogPolyfill = () => {
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react.useState)(false);
+  const hasAlreadyLoaded = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    setHasDialogSupport(supportsDialog());
+  }, []);
+  const polyfillDialog = async (ref) => {
+    if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+      const { default: dialogPolyfill } = await import("dialog-polyfill");
+      hasAlreadyLoaded.current = true;
+      try {
+        if (ref.current) {
+          dialogPolyfill.registerDialog(ref.current);
+        }
+      } catch (error) {
+        console.error("Failed to load dialog-polyfill", error);
+      }
+    }
+  };
+  return {
+    polyfillDialog
+  };
+};
+
+// src/hooks/useDialog/useDialog.ts
+var TRANSITION_CLASS_NAME = "--transition";
+var FALLBACK_TRANSITION_DURATION = 0;
+var useDialog = (props) => {
+  const { ref, isOpen, transition, onOpen, onClose } = props;
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react2.useState)(false);
+  const shouldTransition = hasDialogSupport && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
+  (0, import_react2.useEffect)(() => {
+    setHasDialogSupport(supportsDialog());
+  }, []);
+  const TRANSITION_DURATION_IN_MS = ref.current && Number(
+    getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")
+  ) || FALLBACK_TRANSITION_DURATION;
+  (0, import_mobius_hooks.useBodyScrollLock)({ enabled: isOpen });
+  const open = (0, import_react2.useCallback)(() => {
+    ref.current?.showModal();
+    onOpen?.();
+  }, [onOpen, ref]);
+  const close = (0, import_react2.useCallback)(() => {
+    ref.current?.close();
+    onClose?.();
+  }, [onClose, ref]);
+  const handleClose = (0, import_react2.useCallback)(
+    (event) => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (shouldTransition) {
+        ref.current?.classList.remove(TRANSITION_CLASS_NAME);
+        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);
+      } else {
+        close();
+      }
+    },
+    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition]
+  );
+  (0, import_react2.useEffect)(() => {
+    async function toggleDialog() {
+      if (isOpen && !ref.current?.open) {
+        await polyfillDialog(ref);
+        open();
+        setTimeout(() => {
+          ref.current?.classList.add(TRANSITION_CLASS_NAME);
+        }, 0);
+      } else if (!isOpen && ref.current?.open) {
+        handleClose();
+      }
+    }
+    void toggleDialog();
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
+  return {
+    open,
+    close: handleClose
+  };
+};
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className,
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap"
+      },
+      ...otherProps,
+      children
+    }
+  );
+}
+
+// src/components/Drawer/DrawerContext.tsx
+var import_react3 = require("react");
+var DrawerContext = (0, import_react3.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0,
+  headerId: void 0
+});
+
+// src/components/Drawer/Drawer.tsx
+var import_Drawer = require("@simplybusiness/mobius/src/components/Drawer/Drawer.css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
+var Drawer = ({ ref, ...props }) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children
+  } = props;
+  const dialogRef = (0, import_react4.useRef)(null);
+  const [shouldTransition, setShouldTransition] = (0, import_react4.useState)(false);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE
+    }
+  });
+  const hiddenId = `dialog-screen-reader-announce-${(0, import_react4.useId)()}`;
+  const headerId = `dialog-header-${(0, import_react4.useId)()}`;
+  const dialogClasses = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-drawer",
+    `--${direction}`,
+    className,
+    {
+      "--should-transition": shouldTransition
+    }
+  );
+  (0, import_react4.useEffect)(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const contextValue = (0, import_react4.useMemo)(
+    () => ({
+      onClose: close,
+      closeLabel,
+      headerId
+    }),
+    [close, closeLabel, headerId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "dialog",
+    {
+      id: (0, import_react4.useId)(),
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: dialogClasses,
+      "aria-describedby": hiddenId,
+      "aria-labelledby": headerId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+};
+Drawer.displayName = "Drawer";
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Drawer/Drawer.tsx", "../../../../src/hooks/useDialog/useDialog.ts", "../../../../src/utils/mergeRefs.ts", "../../../../src/utils/polyfill-tests.ts", "../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx", "../../../../src/components/Drawer/DrawerContext.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport type { DrawerProps } from \"./types\";\nimport \"./Drawer.css\";\n\nexport type DialogElementType = HTMLDialogElement;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\n\nconst Drawer = ({ ref, ...props }: DrawerProps) => {\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 dialogRef = useRef<HTMLDialogElement | null>(null);\n  const [shouldTransition, setShouldTransition] = useState(false);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n  const hiddenId = `dialog-screen-reader-announce-${useId()}`;\n  const headerId = `dialog-header-${useId()}`;\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius-drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n      headerId,\n    }),\n    [close, closeLabel, headerId],\n  );\n\n  return (\n    <dialog\n      id={useId()}\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby={hiddenId}\n      aria-labelledby={headerId}\n    >\n      <VisuallyHidden>\n        <div id={hiddenId}>{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n};\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n", "import type { MutableRefObject, SyntheticEvent } from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { supportsDialog } from \"../../utils\";\nimport { useBodyScrollLock } from \"@simplybusiness/mobius-hooks\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const [hasDialogSupport, setHasDialogSupport] = useState(false);\n  const shouldTransition = hasDialogSupport && transition.isEnabled;\n  const { polyfillDialog } = useDialogPolyfill();\n\n  useEffect(() => {\n    setHasDialogSupport(supportsDialog());\n  }, []);\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        await polyfillDialog(ref);\n\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    void toggleDialog();\n  }, [handleClose, isOpen, open, ref, polyfillDialog]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n", "// Ref: https://github.com/gregberge/react-merge-refs/blob/812fefa4390884a4a2d1bc489d869bd088df8ff5/src/index.tsx\nimport type { MutableRefObject, LegacyRef, RefCallback } from \"react\";\n\nexport function mergeRefs<T = unknown>(\n  refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>,\n): RefCallback<T> {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref != null) {\n        (ref as MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n}\n", "// Browser support HTML Dialog element\nexport const supportsDialog = () => typeof HTMLDialogElement === \"function\";\n", "import type { MutableRefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n  const [hasDialogSupport, setHasDialogSupport] = useState(false);\n  const hasAlreadyLoaded = useRef(false);\n\n  useEffect(() => {\n    setHasDialogSupport(supportsDialog());\n  }, []);\n\n  const polyfillDialog = async (\n    ref: MutableRefObject<HTMLDialogElement | null>,\n  ) => {\n    if (\n      !hasAlreadyLoaded.current &&\n      !hasDialogSupport &&\n      typeof window !== \"undefined\" &&\n      ref.current !== null\n    ) {\n      const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n      hasAlreadyLoaded.current = true;\n      try {\n        if (ref.current) {\n          dialogPolyfill.registerDialog(ref.current);\n        }\n      } catch (error) {\n        console.error(\"Failed to load dialog-polyfill\", error);\n      }\n    }\n  };\n\n  return {\n    polyfillDialog,\n  };\n};\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n  /** The content to visually hide. */\n  children?: ReactNode;\n  id?: string;\n  role?: AriaRole;\n\n  className?: string;\n\n  /**\n   * The element type for the container. Defaults to 'div'\n   */\n  elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const {\n    className,\n    children,\n    elementType: Component = \"div\",\n    ...otherProps\n  } = props;\n\n  return (\n    <Component\n      className={className}\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Component>\n  );\n}\n", "import { createContext } from \"react\";\nimport type { DrawerContextProps } from \"./types\";\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n  headerId: undefined,\n});\n"],
+  "mappings": "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",
+  "names": ["import_react", "import_react", "import_react", "import_jsx_runtime", "classNames"]
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Drawer/DrawerContext.tsx
+var DrawerContext_exports = {};
+__export(DrawerContext_exports, {
+  DrawerContext: () => DrawerContext
+});
+module.exports = __toCommonJS(DrawerContext_exports);
+var import_react = require("react");
+var DrawerContext = (0, import_react.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0,
+  headerId: void 0
+});
+//# sourceMappingURL=DrawerContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Drawer/DrawerContext.tsx"],
+  "sourcesContent": ["import { createContext } from \"react\";\nimport type { DrawerContextProps } from \"./types\";\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n  headerId: undefined,\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAGvB,IAAM,oBAAgB,4BAAkC;AAAA,EAC7D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AACZ,CAAC;",
+  "names": []
+}