@yamada-ui/react/dist/cjs/components/drawer/drawer.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"drawer.cjs","names":["createSlotComponent","drawerStyle","useValue","useSplitChildren","useDrawer","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","motion","fadeVariants","Slide","ShorthandDrawerContent: FC<ShorthandDrawerContentProps>","wrapOrPassProps","Button"],"sources":["../../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n  extends Omit<UseDrawerReturn, \"getRootProps\">,\n    Pick<\n      DrawerRootProps,\n      \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n    > {}\n\nexport interface DrawerRootProps\n  extends ThemeProps<DrawerStyle>,\n    Omit<UseDrawerProps, \"placement\" | \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    ShorthandDrawerContentProps {\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   * If `true`, scrolling will be disabled on the `body` when the drawer opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the drawer close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the drag bar when `closeOnDrag` is `true`.\n   *\n   * @default true\n   */\n  withDragBar?: boolean\n  /**\n   * If `true`, display the drawer overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the drawer has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DrawerPropsContext,\n  useComponentContext,\n  usePropsContext: useDrawerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n  \"drawer\",\n  drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/docs/components/drawer\n */\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n  ({\n    allowPinchZoom = false,\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    closeOnDrag,\n    dragConstraints,\n    dragElastic,\n    dragOffset,\n    dragVelocity,\n    duration = { enter: 0.4, exit: 0.3 },\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    placement: placementProp,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = !closeOnDrag,\n    withDragBar = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const placement = useValue(placementProp)\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      DrawerOpenTrigger,\n      DrawerOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useDrawer({\n      closeOnDrag,\n      dragConstraints,\n      dragElastic,\n      dragOffset,\n      dragVelocity,\n      placement,\n      ...props,\n    })\n    const customOpenTrigger = trigger ? (\n      <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n    ) : null\n\n    const context = useMemo(\n      () => ({\n        duration,\n        open,\n        placement,\n        withCloseButton,\n        withDragBar,\n        ...rest,\n      }),\n      [duration, open, withDragBar, placement, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\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                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <DrawerOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandDrawerContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n  \"button\",\n  DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  undefined,\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getCloseTriggerProps(props) }\n  },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n  const { duration, getOverlayProps } = useComponentContext()\n\n  return (\n    <motion.div\n      animate=\"enter\"\n      custom={{ duration }}\n      exit=\"exit\"\n      initial=\"exit\"\n      variants={fadeVariants}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">,\n    PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      closeOnDrag,\n      duration,\n      open,\n      placement,\n      withCloseButton,\n      withDragBar,\n      getContentProps,\n    } = useComponentContext()\n    const [omittedChildren, customCloseButton, customDragBar] =\n      useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n    return (\n      <Slide\n        as=\"section\"\n        duration={duration}\n        open={open}\n        placement={placement}\n        {...(getContentProps(rest) as SlideProps)}\n      >\n        {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n        {customDragBar ??\n          (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n        {omittedChildren}\n      </Slide>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n  /**\n   * The drawer body to use.\n   */\n  body?: DrawerBodyProps | ReactNode\n  /**\n   * The drawer cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The drawer footer to use.\n   */\n  footer?: DrawerFooterProps | ReactNode\n  /**\n   * The drawer header to use.\n   */\n  header?: DrawerHeaderProps | ReactNode\n  /**\n   * The drawer middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The drawer success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The drawer title to use.\n   */\n  title?: DrawerTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(DrawerHeader, header)\n  const customTitle = wrapOrPassProps(DrawerTitle, title)\n  const customBody = wrapOrPassProps(DrawerBody, body)\n  const customFooter = wrapOrPassProps(DrawerFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <DrawerContent>\n      {customHeader ??\n        (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <DrawerFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </DrawerFooter>\n        ) : null)}\n    </DrawerContent>\n  )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n  \"div\",\n  \"dragBar\",\n)(undefined, (props) => {\n  const { getDragBarProps } = useComponentContext()\n\n  return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}