@yamada-ui/modal/dist/drawer-content.js

Yamada UI modal component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/drawer-content.tsx
var drawer_content_exports = {};
__export(drawer_content_exports, {
  DrawerContent: () => DrawerContent
});
module.exports = __toCommonJS(drawer_content_exports);
var import_core4 = require("@yamada-ui/core");
var import_motion = require("@yamada-ui/motion");
var import_transitions = require("@yamada-ui/transitions");
var import_use_value = require("@yamada-ui/use-value");
var import_utils5 = require("@yamada-ui/utils");
var import_react = require("react");

// src/drawer-close-button.tsx
var import_core2 = require("@yamada-ui/core");
var import_utils3 = require("@yamada-ui/utils");

// src/modal-close-button.tsx
var import_close_button = require("@yamada-ui/close-button");
var import_core = require("@yamada-ui/core");
var import_utils2 = require("@yamada-ui/utils");

// src/modal-context.ts
var import_utils = require("@yamada-ui/utils");
var [ModalProvider, useModal] = (0, import_utils.createContext)({
  name: `ModalContext`,
  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
});
var [DialogProvider, useDialog] = (0, import_utils.createContext)({
  name: `DialogContext`,
  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
});
var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
  name: `DrawerContext`,
  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
});

// src/modal-close-button.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var ModalCloseButton = (0, import_core.forwardRef)(
  ({ onClick, __css, ...rest }, ref) => {
    const { styles, onClose } = useModal();
    const css = {
      position: "absolute",
      ...__css ? __css : styles.closeButton
    };
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_close_button.CloseButton,
      {
        ref,
        className: (0, import_utils2.cx)("ui-modal__close-button"),
        "aria-label": "Close modal",
        onClick: (0, import_utils2.handlerAll)(onClick, (ev) => {
          ev.stopPropagation();
          onClose == null ? void 0 : onClose();
        }),
        __css: css,
        ...rest
      }
    );
  }
);
ModalCloseButton.displayName = "ModalCloseButton";
ModalCloseButton.__ui__ = "ModalCloseButton";

// src/drawer-close-button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var DrawerCloseButton = (0, import_core2.forwardRef)(
  ({ className, ...rest }, ref) => {
    const styles = useDrawer();
    const css = { ...styles.closeButton };
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      ModalCloseButton,
      {
        ref,
        className: (0, import_utils3.cx)("ui-drawer__close-button", className),
        __css: css,
        ...rest
      }
    );
  }
);
DrawerCloseButton.displayName = "DrawerCloseButton";
DrawerCloseButton.__ui__ = "DrawerCloseButton";

// src/drawer-drag-bar.tsx
var import_core3 = require("@yamada-ui/core");
var import_utils4 = require("@yamada-ui/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var DrawerDragBar = (0, import_core3.forwardRef)(
  ({ className, __css, ...rest }, ref) => {
    const styles = useDrawer();
    const css = { ...styles.dragBar };
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      import_core3.ui.div,
      {
        ref,
        className: (0, import_utils4.cx)("ui-drawer__drag-bar", className),
        __css: css,
        ...rest
      }
    );
  }
);
DrawerDragBar.displayName = "DrawerDragBar";
DrawerDragBar.__ui__ = "DrawerDragBar";

// src/drawer-content.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var DrawerContent = (0, import_motion.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 = (0, import_use_value.useValue)(_placement);
    const validChildren = (0, import_utils5.getValidChildren)(children);
    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils5.findChildren)(
      validChildren,
      DrawerCloseButton
    );
    const blankForDragBg = (0, import_react.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 (0, import_utils5.isArray)(computedBg) ? computedBg : [computedBg];
    }, [rest, styles]);
    const blankForDrag = (0, import_react.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 = (0, import_react.useMemo)(
      () => ({
        display: "flex",
        flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
        outline: 0,
        ...closeOnDrag ? blankForDrag : {},
        ...styles.container
      }),
      [blankForDrag, closeOnDrag, placement, styles]
    );
    const getDragDirectionRestriction = (0, import_react.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 = (0, import_react.useCallback)(() => {
      switch (placement) {
        case "top":
        case "bottom":
          return "y";
        case "left":
        case "right":
          return "x";
      }
    }, [placement]);
    const isCloseByDragInfo = (0, import_react.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__ */ (0, import_jsx_runtime4.jsxs)(
      import_transitions.Slide,
      {
        ref,
        className: (0, import_utils5.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__ */ (0, import_jsx_runtime4.jsx)(DrawerCloseButton, {}) : null,
          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDragBar, {}) : null,
          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            import_core4.ui.div,
            {
              className: "ui-drawer__inner",
              __css: {
                display: "flex",
                flexDirection: "column",
                w: "100%",
                ...styles.inner
              },
              children: cloneChildren
            }
          ),
          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDragBar, {}) : null
        ]
      }
    );
  }
);
DrawerContent.displayName = "DrawerContent";
DrawerContent.__ui__ = "DrawerContent";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  DrawerContent
});
//# sourceMappingURL=drawer-content.js.map