@yamada-ui/modal/dist/chunk-SA5RYCAR.mjs.map

Yamada UI modal component

{"version":3,"sources":["../src/modal.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport type { FocusLockProps } from \"@yamada-ui/focus-lock\"\nimport type { MotionTransitionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { KeyboardEvent } from \"react\"\nimport type { ModalContentProps } from \"./modal-content\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { FocusLock } from \"@yamada-ui/focus-lock\"\nimport { AnimatePresence, motionForwardRef } from \"@yamada-ui/motion\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { findChild, findChildren, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement, useCallback, useRef } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { DialogOverlay } from \"./dialog-overlay\"\nimport { DrawerContent } from \"./drawer-content\"\nimport { DrawerOverlay } from \"./drawer-overlay\"\nimport { ModalContent } from \"./modal-content\"\nimport { ModalProvider } from \"./modal-context\"\nimport { ModalOverlay } from \"./modal-overlay\"\n\nexport interface ModalOptions\n  extends Pick<\n    FocusLockProps,\n    | \"autoFocus\"\n    | \"finalFocusRef\"\n    | \"initialFocusRef\"\n    | \"lockFocusAcrossFrames\"\n    | \"restoreFocus\"\n  > {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * The animation of the tooltip.\n   *\n   * @default 'scale'\n   */\n  animation?: \"bottom\" | \"left\" | \"none\" | \"right\" | \"scale\" | \"top\"\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * If `true`, the modal will close when the `Esc` key is pressed.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the modal will close when the overlay is clicked.\n   *\n   * @default true\n   */\n  closeOnOverlay?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * If `true`, the open will be opened.\n   *\n   * @deprecated Use `open` instead.\n   */\n  isOpen?: boolean\n  /**\n   * If `true`, the open will be opened.\n   */\n  open?: boolean\n  /**\n   * The CSS `padding` property.\n   */\n  outside?: CSSUIProps[\"p\"]\n  /**\n   * The placement of the modal.\n   *\n   * @default 'center'\n   */\n  placement?: Token<\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"center\"\n    | \"left\"\n    | \"right\"\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n  >\n  /**\n   * Where scroll behavior should originate.\n   *\n   * - `inside`: scroll only occurs within the `ModalBody`.\n   * - `outside`: the entire `ModalContent` will scroll within the viewport.\n   *\n   * @default 'inside'\n   */\n  scrollBehavior?: \"inside\" | \"outside\"\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props for modal container element.\n   */\n  containerProps?: HTMLUIProps\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback invoked to close the modal.\n   */\n  onClose?: () => void\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n  /**\n   * Callback fired when the escape key is pressed and focus is within modal.\n   */\n  onEsc?(): void\n  /**\n   * Callback fired when the overlay is clicked.\n   */\n  onOverlayClick?: () => void\n}\n\nexport interface ModalProps\n  extends ModalContentProps,\n    ThemeProps<\"Modal\">,\n    ModalOptions {}\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/modal\n */\nexport const Modal = motionForwardRef<ModalProps, \"section\">(\n  ({ size, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Modal\", {\n      size,\n      ...props,\n    })\n    const {\n      className,\n      allowPinchZoom = false,\n      animation = \"scale\",\n      autoFocus,\n      blockScrollOnMount = true,\n      children,\n      closeOnEsc = true,\n      closeOnOverlay = true,\n      duration,\n      finalFocusRef,\n      initialFocusRef,\n      isOpen,\n      lockFocusAcrossFrames = true,\n      open = isOpen,\n      outside = \"fallback(4, 1rem)\",\n      placement: _placement = \"center\",\n      restoreFocus,\n      scrollBehavior = \"inside\",\n      withCloseButton = true,\n      withOverlay = true,\n      containerProps,\n      portalProps,\n      onClose,\n      onCloseComplete,\n      onEsc,\n      onOverlayClick,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const headerRef = useRef<HTMLElement>(null)\n    const bodyRef = useRef<HTMLElement>(null)\n    const placement = useValue(_placement)\n    const validChildren = getValidChildren(children)\n    const [customModalOverlay, ...cloneChildren] = findChildren(\n      validChildren,\n      ModalOverlay,\n      DialogOverlay,\n      DrawerOverlay,\n    )\n    const css: CSSUIObject = {\n      alignItems: placement.includes(\"top\")\n        ? \"flex-start\"\n        : placement.includes(\"bottom\")\n          ? \"flex-end\"\n          : \"center\",\n      display: \"flex\",\n      h: \"100dvh\",\n      justifyContent: placement.includes(\"left\")\n        ? \"flex-start\"\n        : placement.includes(\"right\")\n          ? \"flex-end\"\n          : \"center\",\n      left: 0,\n      p: size !== \"full\" ? outside : undefined,\n      position: \"fixed\",\n      top: 0,\n      w: \"100vw\",\n      zIndex: \"fallback(jeice, 110)\",\n    }\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent) => {\n        if (ev.key !== \"Escape\") return\n\n        ev.stopPropagation()\n\n        if (closeOnEsc) onClose?.()\n\n        onEsc?.()\n      },\n      [closeOnEsc, onClose, onEsc],\n    )\n\n    let drawerContent = findChild(validChildren, DrawerContent)\n\n    if (drawerContent)\n      drawerContent = cloneElement(drawerContent, { onKeyDown })\n\n    return (\n      <ModalProvider\n        value={{\n          animation,\n          bodyRef,\n          closeOnOverlay,\n          duration,\n          headerRef,\n          open,\n          scrollBehavior,\n          styles,\n          withCloseButton,\n          onClose,\n          onOverlayClick,\n        }}\n      >\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <ui.div __css={css} {...containerProps}>\n                    {customModalOverlay ??\n                      (withOverlay && size !== \"full\" ? (\n                        <ModalOverlay />\n                      ) : null)}\n\n                    {drawerContent ?? (\n                      <ModalContent\n                        ref={ref}\n                        className={className}\n                        onKeyDown={onKeyDown}\n                        {...rest}\n                      >\n                        {cloneChildren}\n                      </ModalContent>\n                    )}\n                  </ui.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ModalProvider>\n    )\n  },\n)\n"],"mappings":"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","names":[]}