import {
  DrawerContext
} from "./chunk-26JGSX7J.js";
import {
  VisuallyHidden
} from "./chunk-PRZRE6A5.js";
import {
  useDialog
} from "./chunk-7LSDEZNB.js";
import {
  mergeRefs
} from "./chunk-QGGILW3D.js";
import {
  supportsDialog
} from "./chunk-74GPBJTH.js";

// src/components/Drawer/Drawer.tsx
import classNames from "classnames/dedupe";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import "@simplybusiness/mobius/src/components/Drawer/Drawer.css";
import { jsx, jsxs } from "react/jsx-runtime";
var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
var Drawer = ({ ref, ...props }) => {
  const {
    isOpen,
    className,
    closeLabel,
    direction,
    announce = "Drawer opened on screen",
    onOpen,
    onClose,
    children
  } = props;
  const dialogRef = useRef(null);
  const [shouldTransition, setShouldTransition] = useState(false);
  const { close } = useDialog({
    ref: dialogRef,
    isOpen,
    onOpen,
    onClose,
    transition: {
      isEnabled: true,
      CSSVariable: TRANSITION_CSS_VARIABLE
    }
  });
  const hiddenId = `dialog-screen-reader-announce-${useId()}`;
  const headerId = `dialog-header-${useId()}`;
  const dialogClasses = classNames(
    "mobius",
    "mobius-drawer",
    `--${direction}`,
    className,
    {
      "--should-transition": shouldTransition
    }
  );
  useEffect(() => {
    setShouldTransition(supportsDialog());
  }, []);
  const contextValue = useMemo(
    () => ({
      onClose: close,
      closeLabel,
      headerId
    }),
    [close, closeLabel, headerId]
  );
  return /* @__PURE__ */ jsxs(
    "dialog",
    {
      id: useId(),
      ref: mergeRefs([dialogRef, ref]),
      onCancel: close,
      className: dialogClasses,
      "aria-describedby": hiddenId,
      "aria-labelledby": headerId,
      children: [
        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("div", { id: hiddenId, children: announce }) }),
        /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children })
      ]
    }
  );
};
Drawer.displayName = "Drawer";

export {
  Drawer
};
//# sourceMappingURL=chunk-VYQRTISC.js.map
