@teamsparta/stack-bottom-sheet/dist/chunk-VPUGL3D3.mjs

stack bottom sheet

"use client";

import {
  BottomSheetCloseButton
} from "./chunk-VLYYAF6D.mjs";
import {
  BottomSheetGrabber
} from "./chunk-NETR47IK.mjs";
import {
  BottomSheetOverlay
} from "./chunk-D3TZNQFD.mjs";
import {
  useBottomSheet
} from "./chunk-VI637IBA.mjs";
import {
  contentCss,
  contentWrapperCss
} from "./chunk-CJOZ64D5.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/compounds/BottomSheetContent.tsx
import { usePreserveCallback } from "@teamsparta/react";
import {
  forwardRef,
  useCallback
} from "react";
import { Drawer } from "vaul";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var noop = () => {
};
var BottomSheetContent = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      children,
      onInteractOutside,
      style,
      overlay = /* @__PURE__ */ jsx(BottomSheetOverlay, {})
    } = _b, restProps = __objRest(_b, [
      "children",
      "onInteractOutside",
      "style",
      "overlay"
    ]);
    const {
      closeOnInteractOutside: closeOnInteractOutsideFromContext,
      theme,
      dismissible,
      hideCloseButton
    } = useBottomSheet("BottomSheetContent");
    const onInteractOutsideCallbackRef = usePreserveCallback(
      onInteractOutside != null ? onInteractOutside : noop
    );
    const hasOverlay = overlay !== null;
    const closeOnInteractOutside = hasOverlay && dismissible ? closeOnInteractOutsideFromContext : false;
    const handleInteractOutside = useCallback(
      (e) => {
        const { target } = e.detail.originalEvent;
        if (target instanceof Element && target.closest("[data-stack-toast]")) {
          e.preventDefault();
          onInteractOutsideCallbackRef(e);
          return;
        }
        if (!closeOnInteractOutside) {
          e.preventDefault();
        }
        onInteractOutsideCallbackRef(e);
      },
      [onInteractOutsideCallbackRef, closeOnInteractOutside]
    );
    return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
      overlay,
      /* @__PURE__ */ jsx(
        Drawer.Content,
        __spreadProps(__spreadValues({
          "data-stack-color-theme": theme,
          ref,
          asChild: false,
          css: contentWrapperCss,
          style,
          onOpenAutoFocus: (e) => e.preventDefault(),
          onInteractOutside: handleInteractOutside
        }, restProps), {
          children: /* @__PURE__ */ jsxs("div", { "data-stack-dismissible": Boolean(dismissible), css: contentCss, children: [
            !hideCloseButton && dismissible && /* @__PURE__ */ jsx(BottomSheetCloseButton, {}),
            dismissible && /* @__PURE__ */ jsx(BottomSheetGrabber, {}),
            children
          ] })
        })
      )
    ] });
  }
);
BottomSheetContent.displayName = "BottomSheetContent";

export {
  BottomSheetContent
};