@frontify/fondue/dist/components/Flyout/Flyout.es.js

Design system of Frontify

import { jsx as e, jsxs as V, Fragment as Y } from "react/jsx-runtime";
import { watchModals as j } from "@react-aria/aria-modal-polyfill";
import { useButton as H } from "@react-aria/button";
import { useFocusRing as N, FocusScope as G } from "@react-aria/focus";
import { useOverlayTrigger as W, OverlayContainer as k } from "@react-aria/overlays";
import { mergeProps as q } from "@react-aria/utils";
import { useOverlayTriggerState as z } from "@react-stately/overlays";
import { useRef as i, useEffect as A } from "react";
import { FOCUS_STYLE as J } from "../../utilities/focusStyle.es.js";
import { merge as K } from "../../utilities/merge.es.js";
import { LegacyFlyoutFooter as Q } from "./FlyoutFooter.es.js";
import { Overlay as X } from "./Overlay.es.js";
import { useContainScroll as Z } from "./hooks/useContainScroll.es.js";
import { useOverlayPositionWithBottomMargin as $ } from "./hooks/useOverlayPositionWithBottomMargin.es.js";
const To = "#eaebeb", bo = "10px";
var oo = /* @__PURE__ */ ((o) => (o.Top = "top", o.Bottom = "bottom", o.TopLeft = "top left", o.BottomLeft = "bottom left", o.TopRight = "top right", o.BottomRight = "bottom right", o.Right = "right", o.Left = "left", o))(oo || {});
const to = ({
  trigger: o,
  isTriggerDisabled: p = !1,
  decorator: u,
  onConfirm: a,
  onCancel: c,
  children: g,
  onOpenChange: d,
  isOpen: t = !1,
  title: v = "",
  badges: T = [],
  hug: b = !0,
  fitContent: h = !1,
  fixedHeader: y,
  fixedFooter: R,
  contentMinHeight: F,
  legacyFooter: L = !0,
  placement: O = "bottom left",
  offset: w,
  updatePositionOnContentChange: x = !1
}) => {
  const n = z({ isOpen: t, onOpenChange: d }), { toggle: C, close: D } = n, r = i(null), s = i(null), f = i(null), { isFocusVisible: l, focusProps: B } = N(), { triggerProps: E, overlayProps: I } = W(
    { type: "dialog" },
    n,
    r
  ), { positionProps: P } = $({
    triggerRef: r,
    overlayRef: s,
    scrollRef: f,
    isOpen: t,
    placement: O,
    offset: w,
    updatePositionOnContentChange: x
  }), { buttonProps: S, isPressed: _ } = H(
    { onPress: () => C(), elementType: "div", isDisabled: p, preventFocusOnPress: !0 },
    r
  );
  A(() => {
    const U = j();
    return () => U();
  }, []), Z(s, { isDisabled: !t });
  const m = q(S, E, B, {
    "aria-label": "Toggle Flyout Menu"
  }), M = typeof o == "function" ? o(m, r, { isFocusVisible: l, isPressed: _ }) : /* @__PURE__ */ e(
    "div",
    {
      ...m,
      ref: r,
      className: K([
        "tw-outline-none tw-rounded",
        b ? "tw-mx-3" : "tw-w-full",
        l && J
      ]),
      "data-test-id": "flyout-trigger",
      children: o
    }
  );
  return /* @__PURE__ */ V(Y, { children: [
    M,
    t && /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(G, { restoreFocus: !0, contain: !0, children: /* @__PURE__ */ e(
      X,
      {
        title: v,
        badges: T,
        decorator: u,
        isOpen: t,
        onClose: D,
        overlayTriggerProps: I,
        positionProps: P,
        fixedHeader: y,
        fixedFooter: L ? /* @__PURE__ */ e(Q, { onConfirm: a, onCancel: c }) : R,
        ref: s,
        scrollRef: f,
        fitContent: h,
        contentMinHeight: F,
        children: g
      }
    ) }) })
  ] });
};
to.displayName = "FondueFlyout";
export {
  To as FLYOUT_DIVIDER_COLOR,
  bo as FLYOUT_DIVIDER_HEIGHT,
  to as Flyout,
  oo as FlyoutPlacement
};
//# sourceMappingURL=Flyout.es.js.map