@simplybusiness/mobius 10.3.3 → 10.4.0

package/dist/types/components/Modal/types.d.ts

@@ -4,6 +4,7 @@ export interface ModalProps extends RefAttributes<ModalElementType> {
     isOpen: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    preventEscapeKey?: boolean;
     children?: ReactNode;
     className?: string;
     closeLabel?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.3.3",
+  "version": "10.4.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -98,7 +98,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "@loadable/component": "^5.16.7",
-    "@simplybusiness/icons": "^5.0.4",
+    "@simplybusiness/icons": "^5.1.0",
     "@simplybusiness/mobius-hooks": "^0.1.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",

package/src/components/Modal/Modal.tsx

@@ -17,6 +17,7 @@ const Modal = ({ ref, ...props }: ModalProps) => {
   const {
     isOpen,
     onClose,
+    preventEscapeKey = false,
     onOpen,
     children,
     className,
@@ -76,6 +77,11 @@ const Modal = ({ ref, ...props }: ModalProps) => {
     <dialog
       ref={mergeRefs([dialogRef, ref])}
       onCancel={close}
+      onKeyDown={event => {
+        if (preventEscapeKey && event.key === "Escape") {
+          event.preventDefault();
+        }
+      }}
       className={modalClasses}
       aria-labelledby={titleId}
       {...rest}

package/src/components/Modal/types.ts

@@ -5,6 +5,7 @@ export interface ModalProps extends RefAttributes<ModalElementType> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose?: () => void;
+  preventEscapeKey?: boolean;
   children?: ReactNode;
   className?: string;
   closeLabel?: string;

package/dist/esm/chunk-KXLTGNKF.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/Modal/Modal.tsx"],
-  "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"],
-  "mappings": ";;;;;;;;;;;;;;AAEA,OAAO,gBAAgB;AACvB,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AAMlE,OAAO;AAyED;AArEN,IAAM,0BAA0B;AAEhC,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,YAAU,MAAM;AACd,wBAAoB,eAAe,CAAC;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,OAAiC,IAAI;AACvD,QAAM,EAAE,MAAM,IAAI,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,MACV,WAAW,CAAC,CAAC;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACF,CAAC;AAED,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,MACE,uBAAuB,CAAC;AAAA;AAAA,MACxB,uBAAuB,oBAAoB;AAAA,MAC3C,cAAc,cAAc;AAAA,MAC5B,UAAU,cAAc;AAAA,MACxB,mBAAmB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAA6B,MAAS;AAEpE,QAAM,mBAAmB,YAAY,CAAC,OAAe;AACnD,eAAW,EAAE;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,YAAY,SAAS,gBAAgB;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,UAAU,CAAC,WAAW,GAAG,CAAC;AAAA,MAC/B,UAAU;AAAA,MACV,WAAW;AAAA,MACX,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ,8BAAC,aAAa,UAAb,EAAsB,OAAO,cAC3B,UACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc;",
-  "names": []
-}