@simplybusiness/mobius 10.2.0 → 10.3.0

package/dist/cjs/components/Modal/Header.js

@@ -33,6 +33,7 @@ __export(Header_exports, {
   Header: () => Header
 });
 module.exports = __toCommonJS(Header_exports);
+var import_react4 = require("react");
 var import_icons3 = require("@simplybusiness/icons");
 
 // src/components/Button/Button.tsx
@@ -245,36 +246,52 @@ var import_react2 = require("react");
 var ModalContext = (0, import_react2.createContext)({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  titleId: void 0,
+  setTitleId: () => {
+  }
 });
 
 // src/components/Modal/useModal.ts
 var useModal = () => {
-  const { onClose, closeLabel } = (0, import_react3.useContext)(ModalContext);
-  return { onClose, closeLabel };
+  const { onClose, closeLabel, titleId, setTitleId } = (0, import_react3.useContext)(ModalContext);
+  return { onClose, closeLabel, titleId, setTitleId };
 };
 
 // src/components/Modal/Header.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Header = ({ ref, children, ...otherProps }) => {
-  const { onClose, closeLabel } = useModal();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      Button,
-      {
-        "aria-label": "Close",
-        variant: "basic",
-        onPress: onClose,
-        className: "mobius-modal__close",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: import_icons3.cross }),
-          " ",
-          closeLabel
-        ]
-      }
-    )
-  ] });
+  const { onClose, closeLabel, setTitleId } = useModal();
+  const titleId = (0, import_react4.useId)();
+  (0, import_react4.useEffect)(() => {
+    setTitleId(titleId);
+  }, [titleId, setTitleId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "header",
+    {
+      ref,
+      ...otherProps,
+      className: "mobius-modal__header",
+      id: titleId,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          Button,
+          {
+            "aria-label": "Close",
+            variant: "basic",
+            onPress: onClose,
+            className: "mobius-modal__close",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: import_icons3.cross }),
+              " ",
+              closeLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 Header.displayName = "Header";
 //# sourceMappingURL=Header.js.map

package/dist/cjs/components/Modal/Header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Modal/Header.tsx", "../../../../src/components/Button/Button.tsx", "../../../../src/components/Button/Loading.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx", "../../../../src/hooks/useButton/useButton.tsx", "../../../../src/components/Button/Success.tsx", "../../../../src/components/Modal/useModal.ts", "../../../../src/components/Modal/ModalContext.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren, RefAttributes } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useModal } from \"./useModal\";\n\nexport type HeaderElementType = HTMLDivElement;\n\nexport interface HeaderProps\n  extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {}\n\nconst Header = ({ ref, children, ...otherProps }: HeaderProps) => {\n  const { onClose, closeLabel } = useModal();\n\n  return (\n    <header ref={ref} {...otherProps} className=\"mobius-modal__header\">\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius-modal__close\"\n      >\n        <Icon icon={cross} /> {closeLabel}\n      </Button>\n    </header>\n  );\n};\n\nHeader.displayName = \"Header\";\nexport { Header };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n  /** The name of the button when submitted in a form */\n  name?: string | undefined;\n  /** The value of the button when submitted in a form */\n  value?: string | undefined;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n  const {\n    children,\n    elementType: Component = \"button\" as React.ElementType,\n    isDisabled,\n    isLoading,\n    isSuccess,\n    variant = \"primary\",\n    size = \"md\",\n\n    onPress,\n\n    onClick,\n    ...otherProps\n  } = props;\n  const { buttonProps } = useButton(props);\n\n  // Reshape class name and apply to outer element\n  otherProps.className = classNames(\n    \"mobius\",\n    \"mobius-button\",\n    `--variant-${variant}`,\n    `--size-${size}`,\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-loading\": isLoading,\n      \"--is-success\": isSuccess && !isLoading,\n    },\n    otherProps.className,\n  );\n\n  return (\n    <Component ref={ref} {...buttonProps} {...otherProps}>\n      {isLoading ? <Loading>{children}</Loading> : children}\n      {isSuccess && !isLoading && <Success />}\n    </Component>\n  );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n  children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n  const { children } = props;\n\n  return (\n    <>\n      <div className=\"mobius-button__icon-wrapper\">\n        <Icon icon={loading} spin size=\"md\" />\n      </div>\n      <VisuallyHidden className=\"mobius-button__loading-text\">\n        Loading\n      </VisuallyHidden>\n      {children}\n    </>\n  );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\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 type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n  elementType?:\n    | \"button\"\n    | \"a\"\n    | \"span\"\n    | \"input\"\n    | JSXElementConstructor<unknown>\n    | undefined;\n  type?: \"button\" | \"submit\" | \"reset\";\n  isDisabled?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  href?: string;\n  target?: string;\n  rel?: string;\n  role?: string;\n  name?: string | undefined;\n  value?: string | undefined;\n}\n\nexport function useButton({\n  elementType = \"button\",\n  type = \"button\",\n  isDisabled = false,\n  href,\n  target,\n  rel,\n  role,\n  name,\n  value,\n  onClick,\n  onPress,\n}: UseButtonProps) {\n  const realOnClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      onClick?.(event);\n      onPress?.(event);\n    },\n    [isDisabled, onClick, onPress],\n  );\n\n  function getRole() {\n    if (role) {\n      return role;\n    }\n\n    if (elementType === \"a\") {\n      return undefined;\n    }\n\n    return \"button\";\n  }\n\n  const extraProps =\n    elementType === \"button\"\n      ? { type }\n      : {\n          role: getRole(),\n        };\n\n  return {\n    buttonProps: {\n      href: elementType === \"a\" ? href : undefined,\n      target: elementType === \"a\" ? target : undefined,\n      rel: elementType === \"a\" ? rel : undefined,\n      tabIndex: isDisabled ? -1 : 0,\n      disabled: isDisabled || undefined,\n      \"aria-disabled\": isDisabled || undefined,\n      name:\n        elementType === \"input\" || elementType === \"button\" ? name : undefined,\n      value:\n        elementType === \"input\" || elementType === \"button\" ? value : undefined,\n      ...extraProps,\n      onClick: realOnClick,\n    },\n  };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius-button__icon-wrapper\">\n      <Icon icon={tick} size=\"md\" />\n    </div>\n    <VisuallyHidden className=\"mobius-button__success-text\">\n      Success\n    </VisuallyHidden>\n  </>\n);\n\nexport { Success };\n", "import { useContext } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\n\nexport const useModal = () => {\n  const { onClose, closeLabel } = useContext(ModalContext);\n\n  return { onClose, closeLabel };\n};\n", "import { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n});\n"],
-  "mappings": "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",
-  "names": ["import_icons", "import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "import_icons", "import_jsx_runtime", "import_jsx_runtime", "classNames", "import_react", "import_react", "import_jsx_runtime"]
+  "sourcesContent": ["import type { PropsWithChildren, RefAttributes } from \"react\";\nimport { useEffect, useId } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useModal } from \"./useModal\";\n\nexport type HeaderElementType = HTMLDivElement;\n\nexport interface HeaderProps\n  extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {}\n\nconst Header = ({ ref, children, ...otherProps }: HeaderProps) => {\n  const { onClose, closeLabel, setTitleId } = useModal();\n  const titleId = useId();\n\n  useEffect(() => {\n    setTitleId(titleId);\n  }, [titleId, setTitleId]);\n\n  return (\n    <header\n      ref={ref}\n      {...otherProps}\n      className=\"mobius-modal__header\"\n      id={titleId}\n    >\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius-modal__close\"\n      >\n        <Icon icon={cross} /> {closeLabel}\n      </Button>\n    </header>\n  );\n};\n\nHeader.displayName = \"Header\";\nexport { Header };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n  /** The name of the button when submitted in a form */\n  name?: string | undefined;\n  /** The value of the button when submitted in a form */\n  value?: string | undefined;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n  const {\n    children,\n    elementType: Component = \"button\" as React.ElementType,\n    isDisabled,\n    isLoading,\n    isSuccess,\n    variant = \"primary\",\n    size = \"md\",\n\n    onPress,\n\n    onClick,\n    ...otherProps\n  } = props;\n  const { buttonProps } = useButton(props);\n\n  // Reshape class name and apply to outer element\n  otherProps.className = classNames(\n    \"mobius\",\n    \"mobius-button\",\n    `--variant-${variant}`,\n    `--size-${size}`,\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-loading\": isLoading,\n      \"--is-success\": isSuccess && !isLoading,\n    },\n    otherProps.className,\n  );\n\n  return (\n    <Component ref={ref} {...buttonProps} {...otherProps}>\n      {isLoading ? <Loading>{children}</Loading> : children}\n      {isSuccess && !isLoading && <Success />}\n    </Component>\n  );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n  children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n  const { children } = props;\n\n  return (\n    <>\n      <div className=\"mobius-button__icon-wrapper\">\n        <Icon icon={loading} spin size=\"md\" />\n      </div>\n      <VisuallyHidden className=\"mobius-button__loading-text\">\n        Loading\n      </VisuallyHidden>\n      {children}\n    </>\n  );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\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 type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n  elementType?:\n    | \"button\"\n    | \"a\"\n    | \"span\"\n    | \"input\"\n    | JSXElementConstructor<unknown>\n    | undefined;\n  type?: \"button\" | \"submit\" | \"reset\";\n  isDisabled?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  href?: string;\n  target?: string;\n  rel?: string;\n  role?: string;\n  name?: string | undefined;\n  value?: string | undefined;\n}\n\nexport function useButton({\n  elementType = \"button\",\n  type = \"button\",\n  isDisabled = false,\n  href,\n  target,\n  rel,\n  role,\n  name,\n  value,\n  onClick,\n  onPress,\n}: UseButtonProps) {\n  const realOnClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      onClick?.(event);\n      onPress?.(event);\n    },\n    [isDisabled, onClick, onPress],\n  );\n\n  function getRole() {\n    if (role) {\n      return role;\n    }\n\n    if (elementType === \"a\") {\n      return undefined;\n    }\n\n    return \"button\";\n  }\n\n  const extraProps =\n    elementType === \"button\"\n      ? { type }\n      : {\n          role: getRole(),\n        };\n\n  return {\n    buttonProps: {\n      href: elementType === \"a\" ? href : undefined,\n      target: elementType === \"a\" ? target : undefined,\n      rel: elementType === \"a\" ? rel : undefined,\n      tabIndex: isDisabled ? -1 : 0,\n      disabled: isDisabled || undefined,\n      \"aria-disabled\": isDisabled || undefined,\n      name:\n        elementType === \"input\" || elementType === \"button\" ? name : undefined,\n      value:\n        elementType === \"input\" || elementType === \"button\" ? value : undefined,\n      ...extraProps,\n      onClick: realOnClick,\n    },\n  };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius-button__icon-wrapper\">\n      <Icon icon={tick} size=\"md\" />\n    </div>\n    <VisuallyHidden className=\"mobius-button__success-text\">\n      Success\n    </VisuallyHidden>\n  </>\n);\n\nexport { Success };\n", "import { useContext } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\n\nexport const useModal = () => {\n  const { onClose, closeLabel, titleId, setTitleId } = useContext(ModalContext);\n\n  return { onClose, closeLabel, titleId, setTitleId };\n};\n", "import { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n  titleId: undefined,\n  setTitleId: () => {},\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAiC;AAEjC,IAAAC,gBAAsB;;;ACAtB,IAAAC,iBAAuB;;;ACFvB,mBAAwB;;;ACDxB,oBAAuB;AAEvB,kBAAO;AA2CH;AAzCJ,IAAM,cAAc;AAEpB,IAAM,wBAAwB,CAAC,QAC7B,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAEpC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,UAAU,IAAI;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,GAAG,WAAW,KAAK,GAAG;AAAA,MACvB,CAAC,GAAG,WAAW,OAAO,GAAG,QAAQ;AAAA,MACjC,CAAC,GAAG,WAAW,eAAe,GAAG;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,OAAO,QAAQ,YAAY,IAAI;AACjD,QAAM,oBAAoB,SAAS,MAAM,GAAG,EAAE,KAAK,GAAG;AAEtD,QAAM,eAAe,GAAG,sBAAsB,iBAAiB,CAAC;AAChE,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,oDAAC,WAAO,qBAAU;AAAA,QAClB,4CAAC,UAAK,MAAK,gBAAe,GAAG,aAAa;AAAA;AAAA;AAAA,EAC5C;AAEJ;;;ACnCI,IAAAC,sBAAA;AATG,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa,YAAY;AAAA,IACzB,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AF/BI,IAAAC,sBAAA;AAJJ,IAAM,UAAU,CAAC,UAAwB;AACvC,QAAM,EAAE,SAAS,IAAI;AAErB,SACE,8EACE;AAAA,iDAAC,SAAI,WAAU,+BACb,uDAAC,QAAK,MAAM,sBAAS,MAAI,MAAC,MAAK,MAAK,GACtC;AAAA,IACA,6CAAC,kBAAe,WAAU,+BAA8B,qBAExD;AAAA,IACC;AAAA,KACH;AAEJ;;;AGtBA,mBAA4B;AAsBrB,SAAS,UAAU;AAAA,EACxB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,kBAAc;AAAA,IAClB,CAAC,UAA+C;AAC9C,UAAI,YAAY;AACd;AAAA,MACF;AAEA,gBAAU,KAAK;AACf,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,CAAC,YAAY,SAAS,OAAO;AAAA,EAC/B;AAEA,WAAS,UAAU;AACjB,QAAI,MAAM;AACR,aAAO;AAAA,IACT;AAEA,QAAI,gBAAgB,KAAK;AACvB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,aACJ,gBAAgB,WACZ,EAAE,KAAK,IACP;AAAA,IACE,MAAM,QAAQ;AAAA,EAChB;AAEN,SAAO;AAAA,IACL,aAAa;AAAA,MACX,MAAM,gBAAgB,MAAM,OAAO;AAAA,MACnC,QAAQ,gBAAgB,MAAM,SAAS;AAAA,MACvC,KAAK,gBAAgB,MAAM,MAAM;AAAA,MACjC,UAAU,aAAa,KAAK;AAAA,MAC5B,UAAU,cAAc;AAAA,MACxB,iBAAiB,cAAc;AAAA,MAC/B,MACE,gBAAgB,WAAW,gBAAgB,WAAW,OAAO;AAAA,MAC/D,OACE,gBAAgB,WAAW,gBAAgB,WAAW,QAAQ;AAAA,MAChE,GAAG;AAAA,MACH,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;ACnFA,IAAAC,gBAAqB;AAKnB,IAAAC,sBAAA;AADF,IAAM,UAAU,MACd,8EACE;AAAA,+CAAC,SAAI,WAAU,+BACb,uDAAC,QAAK,MAAM,oBAAM,MAAK,MAAK,GAC9B;AAAA,EACA,6CAAC,kBAAe,WAAU,+BAA8B,qBAExD;AAAA,GACF;;;ALHF,oBAAO;AA2DH,IAAAC,sBAAA;AAhCJ,IAAM,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA,aAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IAEP;AAAA,IAEA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,IAAI,UAAU,KAAK;AAGvC,aAAW,gBAAY,eAAAC;AAAA,IACrB;AAAA,IACA;AAAA,IACA,aAAa,OAAO;AAAA,IACpB,UAAU,IAAI;AAAA,IACd;AAAA,MACE,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,gBAAgB,aAAa,CAAC;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,EACb;AAEA,SACE,8CAAC,aAAU,KAAW,GAAG,aAAc,GAAG,YACvC;AAAA,gBAAY,6CAAC,WAAS,UAAS,IAAa;AAAA,IAC5C,aAAa,CAAC,aAAa,6CAAC,WAAQ;AAAA,KACvC;AAEJ;AAEA,OAAO,cAAc;;;AM3ErB,IAAAC,gBAA2B;;;ACA3B,IAAAC,gBAA8B;AAGvB,IAAM,mBAAe,6BAAiC;AAAA,EAC3D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY,MAAM;AAAA,EAAC;AACrB,CAAC;;;ADLM,IAAM,WAAW,MAAM;AAC5B,QAAM,EAAE,SAAS,YAAY,SAAS,WAAW,QAAI,0BAAW,YAAY;AAE5E,SAAO,EAAE,SAAS,YAAY,SAAS,WAAW;AACpD;;;APuBM,IAAAC,sBAAA;AAhBN,IAAM,SAAS,CAAC,EAAE,KAAK,UAAU,GAAG,WAAW,MAAmB;AAChE,QAAM,EAAE,SAAS,YAAY,WAAW,IAAI,SAAS;AACrD,QAAM,cAAU,qBAAM;AAEtB,+BAAU,MAAM;AACd,eAAW,OAAO;AAAA,EACpB,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,IAAI;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAU;AAAA,YAEV;AAAA,2DAAC,QAAK,MAAM,qBAAO;AAAA,cAAE;AAAA,cAAE;AAAA;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;",
+  "names": ["import_react", "import_icons", "import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "import_icons", "import_jsx_runtime", "import_jsx_runtime", "classNames", "import_react", "import_react", "import_jsx_runtime"]
 }

package/dist/cjs/components/Modal/Modal.js

@@ -148,7 +148,10 @@ var import_react3 = require("react");
 var ModalContext = (0, import_react3.createContext)({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  titleId: void 0,
+  setTitleId: () => {
+  }
 });
 
 // src/components/Modal/Modal.tsx
@@ -195,12 +198,18 @@ var Modal = ({ ref, ...props }) => {
     },
     className
   );
+  const [titleId, setTitleId] = (0, import_react4.useState)(void 0);
+  const handleSetTitleId = (0, import_react4.useCallback)((id) => {
+    setTitleId(id);
+  }, []);
   const contextValue = (0, import_react4.useMemo)(
     () => ({
       onClose: close,
-      closeLabel
+      closeLabel,
+      titleId,
+      setTitleId: handleSetTitleId
     }),
-    [close, closeLabel]
+    [close, closeLabel, titleId, handleSetTitleId]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "dialog",
@@ -208,6 +217,7 @@ var Modal = ({ ref, ...props }) => {
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: modalClasses,
+      "aria-labelledby": titleId,
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: contextValue, children })
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Modal/Modal.tsx", "../../../../src/hooks/useDialog/useDialog.ts", "../../../../src/utils/mergeRefs.ts", "../../../../src/utils/polyfill-tests.ts", "../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts", "../../../../src/components/Modal/ModalContext.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport type { ModalProps } from \"./types\";\nimport \"./Modal.css\";\n\nexport type ModalElementType = HTMLDialogElement;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = ({ ref, ...props }: ModalProps) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius-modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n};\n\nModal.displayName = \"Modal\";\nexport { Modal };\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 { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport type { ModalProps } from \"./types\";\nimport \"./Modal.css\";\n\nexport type ModalElementType = HTMLDialogElement;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = ({ ref, ...props }: ModalProps) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius-modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const [titleId, setTitleId] = useState<string | undefined>(undefined);\n\n  const handleSetTitleId = useCallback((id: string) => {\n    setTitleId(id);\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n      titleId,\n      setTitleId: handleSetTitleId,\n    }),\n    [close, closeLabel, titleId, handleSetTitleId],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      aria-labelledby={titleId}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n};\n\nModal.displayName = \"Modal\";\nexport { Modal };\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 { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n  titleId: undefined,\n  setTitleId: () => {},\n});\n"],
+  "mappings": "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",
   "names": ["import_react", "import_react", "import_react", "classNames"]
 }

package/dist/cjs/components/Modal/ModalContext.js

@@ -27,6 +27,9 @@ var import_react = require("react");
 var ModalContext = (0, import_react.createContext)({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  titleId: void 0,
+  setTitleId: () => {
+  }
 });
 //# sourceMappingURL=ModalContext.js.map

package/dist/cjs/components/Modal/ModalContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Modal/ModalContext.tsx"],
-  "sourcesContent": ["import { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAGvB,IAAM,mBAAe,4BAAiC;AAAA,EAC3D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,YAAY;AACd,CAAC;",
+  "sourcesContent": ["import { createContext } from \"react\";\nimport type { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n  titleId: undefined,\n  setTitleId: () => {},\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAGvB,IAAM,mBAAe,4BAAiC;AAAA,EAC3D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY,MAAM;AAAA,EAAC;AACrB,CAAC;",
   "names": []
 }

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

@@ -41,6 +41,7 @@ var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_j
 Content.displayName = "Content";
 
 // src/components/Modal/Header.tsx
+var import_react4 = require("react");
 var import_icons3 = require("@simplybusiness/icons");
 
 // src/components/Button/Button.tsx
@@ -253,45 +254,61 @@ var import_react2 = require("react");
 var ModalContext = (0, import_react2.createContext)({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  titleId: void 0,
+  setTitleId: () => {
+  }
 });
 
 // src/components/Modal/useModal.ts
 var useModal = () => {
-  const { onClose, closeLabel } = (0, import_react3.useContext)(ModalContext);
-  return { onClose, closeLabel };
+  const { onClose, closeLabel, titleId, setTitleId } = (0, import_react3.useContext)(ModalContext);
+  return { onClose, closeLabel, titleId, setTitleId };
 };
 
 // src/components/Modal/Header.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Header = ({ ref, children, ...otherProps }) => {
-  const { onClose, closeLabel } = useModal();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      Button,
-      {
-        "aria-label": "Close",
-        variant: "basic",
-        onPress: onClose,
-        className: "mobius-modal__close",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon: import_icons3.cross }),
-          " ",
-          closeLabel
-        ]
-      }
-    )
-  ] });
+  const { onClose, closeLabel, setTitleId } = useModal();
+  const titleId = (0, import_react4.useId)();
+  (0, import_react4.useEffect)(() => {
+    setTitleId(titleId);
+  }, [titleId, setTitleId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "header",
+    {
+      ref,
+      ...otherProps,
+      className: "mobius-modal__header",
+      id: titleId,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Button,
+          {
+            "aria-label": "Close",
+            variant: "basic",
+            onPress: onClose,
+            className: "mobius-modal__close",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon: import_icons3.cross }),
+              " ",
+              closeLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 Header.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
 var import_dedupe3 = __toESM(require("classnames/dedupe"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/useDialog/useDialog.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/utils/mergeRefs.ts
 function mergeRefs(refs) {
@@ -313,11 +330,11 @@ var supportsDialog = () => typeof HTMLDialogElement === "function";
 var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
 
 // src/hooks/useDialogPolyfill/useDialogPolyfill.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var useDialogPolyfill = () => {
-  const [hasDialogSupport, setHasDialogSupport] = (0, import_react4.useState)(false);
-  const hasAlreadyLoaded = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react5.useState)(false);
+  const hasAlreadyLoaded = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     setHasDialogSupport(supportsDialog());
   }, []);
   const polyfillDialog = async (ref) => {
@@ -343,25 +360,25 @@ 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_react5.useState)(false);
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react6.useState)(false);
   const shouldTransition = hasDialogSupport && transition.isEnabled;
   const { polyfillDialog } = useDialogPolyfill();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.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_react5.useCallback)(() => {
+  const open = (0, import_react6.useCallback)(() => {
     ref.current?.showModal();
     onOpen?.();
   }, [onOpen, ref]);
-  const close = (0, import_react5.useCallback)(() => {
+  const close = (0, import_react6.useCallback)(() => {
     ref.current?.close();
     onClose?.();
   }, [onClose, ref]);
-  const handleClose = (0, import_react5.useCallback)(
+  const handleClose = (0, import_react6.useCallback)(
     (event) => {
       if (event) {
         event.preventDefault();
@@ -376,7 +393,7 @@ var useDialog = (props) => {
     },
     [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     async function toggleDialog() {
       if (isOpen && !ref.current?.open) {
         await polyfillDialog(ref);
@@ -412,11 +429,11 @@ var Modal = ({ ref, ...props }) => {
     animation,
     ...rest
   } = props;
-  const [shouldTransition, setShouldTransition] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [shouldTransition, setShouldTransition] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const dialogRef = (0, import_react6.useRef)(null);
+  const dialogRef = (0, import_react7.useRef)(null);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -440,12 +457,18 @@ var Modal = ({ ref, ...props }) => {
     },
     className
   );
-  const contextValue = (0, import_react6.useMemo)(
+  const [titleId, setTitleId] = (0, import_react7.useState)(void 0);
+  const handleSetTitleId = (0, import_react7.useCallback)((id) => {
+    setTitleId(id);
+  }, []);
+  const contextValue = (0, import_react7.useMemo)(
     () => ({
       onClose: close,
-      closeLabel
+      closeLabel,
+      titleId,
+      setTitleId: handleSetTitleId
     }),
-    [close, closeLabel]
+    [close, closeLabel, titleId, handleSetTitleId]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "dialog",
@@ -453,6 +476,7 @@ var Modal = ({ ref, ...props }) => {
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: modalClasses,
+      "aria-labelledby": titleId,
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalContext.Provider, { value: contextValue, children })
     }