{"version":3,"sources":["../src/modal.tsx"],"sourcesContent":["import { FocusLockProps } from \"@chakra-ui/focus-lock\"\nimport { Portal, PortalProps } from \"@chakra-ui/portal\"\nimport { createContext } from \"@chakra-ui/react-context\"\nimport {\n  SystemStyleObject,\n  ThemingProps,\n  useMultiStyleConfig,\n} from \"@chakra-ui/system\"\nimport { AnimatePresence } from \"framer-motion\"\nimport { useModal, UseModalProps, UseModalReturn } from \"./use-modal\"\n\ninterface FocusableElement {\n  focus(options?: FocusOptions): void\n}\n\nconst [ModalStylesProvider, useModalStyles] = createContext<\n  Record<string, SystemStyleObject>\n>({\n  name: `ModalStylesContext`,\n  errorMessage: `useModalStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<Modal />\" `,\n})\n\nexport { ModalContextProvider, useModalContext, useModalStyles }\n\ninterface ModalOptions extends Pick<FocusLockProps, \"lockFocusAcrossFrames\"> {\n  /**\n   * If `false`, focus lock will be disabled completely.\n   *\n   * This is useful in situations where you still need to interact with\n   * other surrounding elements.\n   *\n   * 🚨Warning: We don't recommend doing this because it hurts the\n   * accessibility of the modal, based on WAI-ARIA specifications.\n   *\n   * @default true\n   */\n  trapFocus?: boolean\n  /**\n   * If `true`, the modal will autofocus the first enabled and interactive\n   * element within the `ModalContent`\n   *\n   * @default true\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of element to receive focus when the modal opens.\n   */\n  initialFocusRef?: React.RefObject<FocusableElement>\n  /**\n   * The `ref` of element to receive focus when the modal closes.\n   */\n  finalFocusRef?: React.RefObject<FocusableElement>\n  /**\n   * If `true`, the modal will return focus to the element that triggered it when it closes.\n   * @default true\n   */\n  returnFocusOnClose?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, a `padding-right` will be applied to the body element\n   * that's equal to the width of the scrollbar.\n   *\n   * This can help prevent some unpleasant flickering effect\n   * and content adjustment when the modal opens\n   *\n   * @default true\n   */\n  preserveScrollBarGap?: boolean\n}\n\ntype ScrollBehavior = \"inside\" | \"outside\"\n\ntype MotionPreset =\n  | \"slideInBottom\"\n  | \"slideInRight\"\n  | \"slideInTop\"\n  | \"slideInLeft\"\n  | \"scale\"\n  | \"none\"\n\nexport interface ModalProps\n  extends UseModalProps,\n    ModalOptions,\n    ThemingProps<\"Modal\"> {\n  children: React.ReactNode\n  /**\n   *  If `true`, the modal will be centered on screen.\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Where scroll behavior should originate.\n   * - If set to `inside`, scroll only occurs within the `ModalBody`.\n   * - If set to `outside`, the entire `ModalContent` will scroll within the viewport.\n   *\n   * @default \"outside\"\n   */\n  scrollBehavior?: ScrollBehavior\n  /**\n   * Props to be forwarded to the portal component\n   */\n  portalProps?: Pick<PortalProps, \"appendToParentPortal\" | \"containerRef\">\n  /**\n   * The transition that should be used for the modal\n   * @default \"scale\"\n   */\n  motionPreset?: MotionPreset\n  /**\n   * Fires when all exiting nodes have completed animating out\n   */\n  onCloseComplete?: () => void\n}\n\ninterface ModalContext extends ModalOptions, UseModalReturn {\n  /**\n   * The transition that should be used for the modal\n   */\n  motionPreset?: MotionPreset\n}\n\nconst [ModalContextProvider, useModalContext] = createContext<ModalContext>({\n  strict: true,\n  name: \"ModalContext\",\n  errorMessage:\n    \"useModalContext: `context` is undefined. Seems you forgot to wrap modal components in `<Modal />`\",\n})\n\n/**\n * Modal provides context, theming, and accessibility properties\n * to all other modal components.\n *\n * It doesn't render any DOM node.\n *\n * @see Docs https://chakra-ui.com/docs/components/modal\n * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/\n */\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const modalProps: ModalProps = {\n    scrollBehavior: \"outside\",\n    autoFocus: true,\n    trapFocus: true,\n    returnFocusOnClose: true,\n    blockScrollOnMount: true,\n    allowPinchZoom: false,\n    motionPreset: \"scale\",\n    lockFocusAcrossFrames: true,\n    ...props,\n  }\n\n  const {\n    portalProps,\n    children,\n    autoFocus,\n    trapFocus,\n    initialFocusRef,\n    finalFocusRef,\n    returnFocusOnClose,\n    blockScrollOnMount,\n    allowPinchZoom,\n    preserveScrollBarGap,\n    motionPreset,\n    lockFocusAcrossFrames,\n    onCloseComplete,\n  } = modalProps\n\n  const styles = useMultiStyleConfig(\"Modal\", modalProps)\n  const modal = useModal(modalProps)\n\n  const context = {\n    ...modal,\n    autoFocus,\n    trapFocus,\n    initialFocusRef,\n    finalFocusRef,\n    returnFocusOnClose,\n    blockScrollOnMount,\n    allowPinchZoom,\n    preserveScrollBarGap,\n    motionPreset,\n    lockFocusAcrossFrames,\n  }\n\n  return (\n    <ModalContextProvider value={context}>\n      <ModalStylesProvider value={styles}>\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {context.isOpen && <Portal {...portalProps}>{children}</Portal>}\n        </AnimatePresence>\n      </ModalStylesProvider>\n    </ModalContextProvider>\n  )\n}\n\nModal.displayName = \"Modal\"\n"],"mappings":";;;;;;AACA,SAAS,cAA2B;AACpC,SAAS,qBAAqB;AAC9B;AAAA,EAGE;AAAA,OACK;AACP,SAAS,uBAAuB;AA2LH;AApL7B,IAAM,CAAC,qBAAqB,cAAc,IAAI,cAE5C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA6GD,IAAM,CAAC,sBAAsB,eAAe,IAAI,cAA4B;AAAA,EAC1E,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cACE;AACJ,CAAC;AAWM,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM,aAAyB;AAAA,IAC7B,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,GAAG;AAAA,EACL;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,oBAAoB,SAAS,UAAU;AACtD,QAAM,QAAQ,SAAS,UAAU;AAEjC,QAAM,UAAU;AAAA,IACd,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,wBAAqB,OAAO,SAC3B,8BAAC,uBAAoB,OAAO,QAC1B,8BAAC,mBAAgB,gBAAgB,iBAC9B,kBAAQ,UAAU,oBAAC,UAAQ,GAAG,aAAc,UAAS,GACxD,GACF,GACF;AAEJ;AAEA,MAAM,cAAc;","names":[]}