@yamada-ui/modal/dist/chunk-XYURL3FF.mjs

Yamada UI modal component

"use client"
import {
  DrawerDragBar
} from "./chunk-5NLJNYIN.mjs";
import {
  DrawerCloseButton
} from "./chunk-PXCCIW5O.mjs";
import {
  useDrawer,
  useModal
} from "./chunk-64A25YOZ.mjs";

// src/drawer-content.tsx
import { ui } from "@yamada-ui/core";
import { motionForwardRef } from "@yamada-ui/motion";
import { Slide } from "@yamada-ui/transitions";
import { useValue } from "@yamada-ui/use-value";
import { cx, findChildren, getValidChildren, isArray } from "@yamada-ui/utils";
import { useCallback, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var DrawerContent = motionForwardRef(
  ({
    className,
    children,
    closeOnDrag,
    dragConstraints,
    dragElastic,
    dragOffset,
    dragVelocity,
    placement: _placement,
    withCloseButton,
    withDragBar,
    blankForDragProps,
    ...rest
  }, ref) => {
    var _a, _b;
    const { bodyRef, duration, headerRef, open, onClose } = useModal();
    const styles = useDrawer();
    const placement = useValue(_placement);
    const validChildren = getValidChildren(children);
    const [customDrawerCloseButton, ...cloneChildren] = findChildren(
      validChildren,
      DrawerCloseButton
    );
    const blankForDragBg = useMemo(() => {
      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
      const propBg = (_c = (_b2 = (_a2 = rest.backgroundColor) != null ? _a2 : rest.bgColor) != null ? _b2 : rest.background) != null ? _c : rest.bg;
      const styleBg = (_j = (_h = (_f = (_d = styles.container) == null ? void 0 : _d.backgroundColor) != null ? _f : (_e = styles.container) == null ? void 0 : _e.bgColor) != null ? _h : (_g = styles.container) == null ? void 0 : _g.background) != null ? _j : (_i = styles.container) == null ? void 0 : _i.bg;
      const computedBg = propBg != null ? propBg : styleBg;
      return isArray(computedBg) ? computedBg : [computedBg];
    }, [rest, styles]);
    const blankForDrag = useMemo(() => {
      let position = {};
      switch (placement) {
        case "top":
          position = { left: 0, right: 0, top: "calc(-100dvh + 1px)" };
          break;
        case "bottom":
          position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
          break;
        case "left":
          position = { bottom: 0, left: "calc(-100% + 1px)", top: 0 };
          break;
        case "right":
          position = { bottom: 0, right: "calc(-100% + 1px)", top: 0 };
          break;
      }
      const [lightBg, darkBg] = blankForDragBg;
      return {
        _after: {
          bg: lightBg,
          content: '""',
          display: "block",
          h: "100dvh",
          position: "absolute",
          w: "100%",
          ...position,
          ...blankForDragProps
        },
        _dark: {
          _after: {
            bg: darkBg
          }
        }
      };
    }, [placement, blankForDragBg, blankForDragProps]);
    const css = useMemo(
      () => ({
        display: "flex",
        flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
        outline: 0,
        ...closeOnDrag ? blankForDrag : {},
        ...styles.container
      }),
      [blankForDrag, closeOnDrag, placement, styles]
    );
    const getDragDirectionRestriction = useCallback(
      (value) => {
        switch (placement) {
          case "top":
            return { bottom: value };
          case "bottom":
            return { top: value };
          case "left":
            return { right: value };
          case "right":
            return { left: value };
        }
      },
      [placement]
    );
    const getDragDirection = useCallback(() => {
      switch (placement) {
        case "top":
        case "bottom":
          return "y";
        case "left":
        case "right":
          return "x";
      }
    }, [placement]);
    const isCloseByDragInfo = useCallback(
      (info) => {
        switch (placement) {
          case "top":
            return info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1;
          case "bottom":
            return info.velocity.y >= dragVelocity || info.offset.y >= dragOffset;
          case "left":
            return info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1;
          case "right":
            return info.velocity.x >= dragVelocity || info.offset.x >= dragOffset;
        }
      },
      [placement, dragVelocity, dragOffset]
    );
    return /* @__PURE__ */ jsxs(
      Slide,
      {
        ref,
        className: cx("ui-drawer", className),
        "aria-describedby": (_a = bodyRef.current) == null ? void 0 : _a.id,
        "aria-labelledby": (_b = headerRef.current) == null ? void 0 : _b.id,
        "aria-modal": "true",
        drag: closeOnDrag ? getDragDirection() : false,
        dragConstraints: getDragDirectionRestriction(dragConstraints),
        dragElastic: getDragDirectionRestriction(dragElastic),
        dragMomentum: false,
        dragSnapToOrigin: true,
        duration,
        isOpen: open,
        placement,
        role: "dialog",
        tabIndex: -1,
        onDragEnd: (_, info) => {
          if (isCloseByDragInfo(info)) onClose == null ? void 0 : onClose();
        },
        __css: css,
        ...rest,
        children: [
          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx(DrawerCloseButton, {}) : null,
          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ jsx(DrawerDragBar, {}) : null,
          /* @__PURE__ */ jsx(
            ui.div,
            {
              className: "ui-drawer__inner",
              __css: {
                display: "flex",
                flexDirection: "column",
                w: "100%",
                ...styles.inner
              },
              children: cloneChildren
            }
          ),
          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ jsx(DrawerDragBar, {}) : null
        ]
      }
    );
  }
);
DrawerContent.displayName = "DrawerContent";
DrawerContent.__ui__ = "DrawerContent";

export {
  DrawerContent
};
//# sourceMappingURL=chunk-XYURL3FF.mjs.map