@mantine/core/cjs/components/Modal/Modal.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Modal.cjs","names":["getDefaultZIndex","factory","useProps","ModalStackContext","ModalRoot","ModalOverlay","ModalContent","ModalHeader","ModalTitle","ModalCloseButton","ModalBody","classes","ModalStack"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { ModalBody, type ModalBodyProps } from './ModalBody';\nimport { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';\nimport { ModalContent, type ModalContentProps } from './ModalContent';\nimport { ModalHeader, type ModalHeaderProps } from './ModalHeader';\nimport { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';\nimport {\n  ModalRoot,\n  ModalRootCssVariables,\n  ModalRootProps,\n  ModalRootStylesNames,\n} from './ModalRoot';\nimport { ModalStack, ModalStackContext, type ModalStackProps } from './ModalStack';\nimport { ModalTitle, type ModalTitleProps } from './ModalTitle';\nimport classes from './Modal.module.css';\nexport type ModalStylesNames = ModalRootStylesNames;\nexport type ModalCssVariables = ModalRootCssVariables;\n\nexport interface ModalProps extends ModalRootProps {\n  __staticSelector?: string;\n\n  /** Modal title */\n  title?: React.ReactNode;\n\n  /** If set, the overlay is rendered @default true */\n  withOverlay?: boolean;\n\n  /** Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties */\n  overlayProps?: ModalBaseOverlayProps;\n\n  /** Modal content */\n  children?: React.ReactNode;\n\n  /** If set, the close button is rendered @default true */\n  withCloseButton?: boolean;\n\n  /** Props passed down to the close button */\n  closeButtonProps?: ModalBaseCloseButtonProps;\n\n  /** Id of the modal in the `Modal.Stack` */\n  stackId?: string;\n}\n\nexport type ModalFactory = Factory<{\n  props: ModalProps;\n  ref: HTMLDivElement;\n  stylesNames: ModalStylesNames;\n  vars: ModalCssVariables;\n  staticComponents: {\n    Root: typeof ModalRoot;\n    Overlay: typeof ModalOverlay;\n    Content: typeof ModalContent;\n    Body: typeof ModalBody;\n    Header: typeof ModalHeader;\n    Title: typeof ModalTitle;\n    CloseButton: typeof ModalCloseButton;\n    Stack: typeof ModalStack;\n  };\n}>;\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  transitionProps: { duration: 200, transition: 'fade-down' },\n  withOverlay: true,\n  withCloseButton: true,\n} satisfies Partial<ModalProps>;\n\nexport const Modal = factory<ModalFactory>((_props) => {\n  const {\n    title,\n    withOverlay,\n    overlayProps,\n    withCloseButton,\n    closeButtonProps,\n    children,\n    radius,\n    opened,\n    stackId,\n    zIndex,\n    ...others\n  } = useProps('Modal', defaultProps, _props);\n  const ctx = use(ModalStackContext);\n  const hasHeader = !!title || withCloseButton;\n  const stackProps =\n    ctx && stackId\n      ? {\n          closeOnEscape: ctx.currentId === stackId,\n          trapFocus: ctx.currentId === stackId,\n          zIndex: ctx.getZIndex(stackId),\n        }\n      : {};\n\n  const overlayVisible =\n    withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n  useEffect(() => {\n    if (ctx && stackId) {\n      opened\n        ? ctx.addModal(stackId, zIndex || getDefaultZIndex('modal'))\n        : ctx.removeModal(stackId);\n    }\n  }, [opened, stackId, zIndex]);\n\n  return (\n    <ModalRoot\n      radius={radius}\n      opened={opened}\n      zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n      {...others}\n      {...stackProps}\n    >\n      {withOverlay && (\n        <ModalOverlay\n          visible={overlayVisible}\n          transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n          {...overlayProps}\n        />\n      )}\n      <ModalContent\n        radius={radius}\n        __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}\n      >\n        {hasHeader && (\n          <ModalHeader>\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {withCloseButton && <ModalCloseButton {...closeButtonProps} />}\n          </ModalHeader>\n        )}\n\n        <ModalBody>{children}</ModalBody>\n      </ModalContent>\n    </ModalRoot>\n  );\n});\n\nModal.classes = classes;\nModal.displayName = '@mantine/core/Modal';\nModal.Root = ModalRoot;\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.CloseButton = ModalCloseButton;\nModal.Stack = ModalStack;\n\nexport namespace Modal {\n  export type Props = ModalProps;\n  export type StylesNames = ModalStylesNames;\n  export type CssVariables = ModalCssVariables;\n  export type Factory = ModalFactory;\n\n  export namespace Root {\n    export type Props = ModalRootProps;\n  }\n\n  export namespace Body {\n    export type Props = ModalBodyProps;\n  }\n\n  export namespace CloseButton {\n    export type Props = ModalCloseButtonProps;\n  }\n\n  export namespace Content {\n    export type Props = ModalContentProps;\n  }\n\n  export namespace Header {\n    export type Props = ModalHeaderProps;\n  }\n\n  export namespace Overlay {\n    export type Props = ModalOverlayProps;\n  }\n\n  export namespace Title {\n    export type Props = ModalTitleProps;\n  }\n\n  export namespace Stack {\n    export type Props = ModalStackProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA8DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,QACA,SACA,QACA,GAAG,WACDC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CAC1C,MAAM,OAAA,GAAA,MAAA,KAAUC,mBAAAA,iBAAiB;CACjC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;CAC/B,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAUH,4BAAAA,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,MAACI,kBAAAA,WAAD;EACU;EACA;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;YALN,CAOG,eACC,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,iBAAA,GAAA,kBAAA,MAACC,qBAAAA,cAAD;GACU;GACR,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;aAFnE,CAIG,aACC,iBAAA,GAAA,kBAAA,MAACC,oBAAAA,aAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD,EAAA,UAAa,MAAkB,CAAA,GACxC,mBAAmB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGf,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAY,SAAoB,CAAA,CACpB;IACL;;AAEf,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,cAAc;AACpB,MAAM,OAAOP,kBAAAA;AACb,MAAM,UAAUC,qBAAAA;AAChB,MAAM,UAAUC,qBAAAA;AAChB,MAAM,OAAOI,kBAAAA;AACb,MAAM,SAASH,oBAAAA;AACf,MAAM,QAAQC,mBAAAA;AACd,MAAM,cAAcC,yBAAAA;AACpB,MAAM,QAAQG,mBAAAA"}