@stihl-design-system/components/chunks/Popover.D7McfVaH.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as m, jsxs as O, Fragment as q } from "react/jsx-runtime";
import { d as H } from "./index.D-sRdssb.js";
import { useState as J, useRef as K, useMemo as Q, createContext as X, forwardRef as I, isValidElement as Y, cloneElement as Z, useContext as ee } from "react";
import { u as oe, o as te, j as re, s as se, k as ne, a as ae, b as ce, c as ie, d as le, e as pe, f as j, g as de, l as ue, F as he, i as ve } from "./floating-ui.react.COTL3jH5.js";
import { c as k } from "./index.DL9mof6u.js";
import { g as b, c as M } from "./helpers.CexwVao7.js";
import { D as fe } from "./Button.Cn5yg7dG.js";
import '../assets/Popover.CXyUaXiO.css';const me = "ds-popover_popover_xg81f_5", ge = "ds-popover_popover--no-arrow_xg81f_64", we = "ds-popover_popover--variant-grey_xg81f_67", Pe = "ds-popover_arrow_xg81f_71", De = "ds-popover_arrow--variant-grey_xg81f_90", Se = "ds-popover_default-anchor_xg81f_107", _ = {
  popover: me,
  popoverNoArrow: ge,
  popoverVariantGrey: we,
  arrow: Pe,
  arrowVariantGrey: De,
  defaultAnchor: Se
}, Ae = ({
  initialOpen: t = !1,
  placement: o = "bottom",
  isOpen: e,
  popoverOffset: r = 6,
  showArrow: a = !0,
  variant: l = "default",
  defaultAnchorButtonProps: p,
  onOpenChange: d
} = {}) => {
  const [s, h] = J(t), c = e ?? s, n = d ?? h, i = K(null), u = oe({
    placement: o,
    open: c,
    strategy: "fixed",
    onOpenChange: n,
    whileElementsMounted: ae,
    middleware: [te(r + (a ? 7 : 0)), re({
      // default configuration taken from https://floating-ui.com/docs/flip
      crossAxis: o.includes("-"),
      fallbackAxisSideDirection: "end",
      padding: r
    }), se({
      padding: r
    }), ...a ? [ne({
      element: i
    })] : []]
  }), v = u.context, C = ce(v, {
    enabled: !0
  }), w = ie(v), E = le(v), P = pe([C, w, E]);
  return Q(() => ({
    open: c,
    popoverOffset: r,
    setOpen: n,
    arrowRef: i,
    showArrow: a,
    defaultAnchorButtonProps: p,
    variant: l,
    ...P,
    ...u
  }), [c, r, n, i, a, p, l, P, u]);
}, xe = ({
  children: t,
  hasContent: o,
  hasAnchor: e
}) => {
  if (!t)
    throw new Error(b("DSPopover", "A DSPopover must have children."));
  if (!o && e)
    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Content> is missing! Please add it to the children of DSPopover."));
  if (!e && o)
    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Anchor> is missing! Please add it to the children of DSPopover."));
}, ye = ({
  showArrow: t,
  variant: o
}) => {
  o === "grey" && t === !1 && console.warn(b("DSPopover", "The 'grey' variant is only available when 'showArrow' is true. To use the 'grey' variant, please ensure that 'showArrow' is set to true."));
}, B = X(null), U = () => {
  const t = ee(B);
  if (t == null)
    throw new Error(b("DSPopover", "Components like DSPopover.Anchor or DSPopover.Content must be wrapped in <DSPopover />."));
  return t;
}, f = (t) => {
  const o = H.c(11), {
    children: e,
    ...r
  } = t, a = Ae({
    ...r
  }), l = M(e, f.Content), p = M(e, f.Anchor);
  process.env.NODE_ENV !== "production" && (xe({
    children: e,
    hasContent: l,
    hasAnchor: p
  }), ye({
    showArrow: r.showArrow,
    variant: r.variant
  }));
  const d = !l && !p && e !== null;
  let s;
  o[0] !== e || o[1] !== d ? (s = d ? /* @__PURE__ */ O(q, { children: [
    /* @__PURE__ */ m(f.Anchor, {}),
    /* @__PURE__ */ m(f.Content, { children: e })
  ] }) : e, o[0] = e, o[1] = d, o[2] = s) : s = o[2];
  const h = s, c = l || d, n = p || d;
  let i;
  o[3] !== a || o[4] !== c || o[5] !== n ? (i = {
    ...a,
    hasContent: c,
    hasAnchor: n
  }, o[3] = a, o[4] = c, o[5] = n, o[6] = i) : i = o[6];
  const g = i;
  let u;
  return o[7] !== h || o[8] !== g || o[9] !== r ? (u = /* @__PURE__ */ m(B.Provider, { value: g, ...r, children: h }), o[7] = h, o[8] = g, o[9] = r, o[10] = u) : u = o[10], u;
}, W = I(({
  children: t,
  ...o
}, e) => {
  const {
    context: r,
    defaultAnchorButtonProps: a,
    refs: l,
    hasAnchor: p,
    getReferenceProps: d
  } = U(), {
    label: s = "Toggle popover",
    ...h
  } = a || {}, c = t ? t?.ref : null, n = j([l.setReference, e, c]);
  return p && t && Y(t) ? Z(t, d({
    ref: n,
    ...o,
    ...t.props,
    "data-state": r.open ? "open" : "closed"
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  })) : /* @__PURE__ */ m(
    fe,
    {
      ...h,
      ref: n,
      type: "button",
      "data-state": r.open ? "open" : "closed",
      ...d(o),
      size: "small",
      hideLabel: !0,
      iconName: "circle-info-inverted",
      variant: "ghost",
      className: _.defaultAnchor,
      children: t ?? s
    }
  );
});
W.displayName = "DSPopover.Anchor";
const $ = I((t, o) => {
  const e = H.c(33), {
    style: r,
    className: a,
    classNameArrow: l,
    children: p,
    ...d
  } = t, {
    context: s,
    refs: h,
    floatingStyles: c,
    showArrow: n,
    variant: i,
    getFloatingProps: g,
    arrowRef: u
  } = U();
  let v;
  e[0] !== o || e[1] !== h.setFloating ? (v = [h.setFloating, o], e[0] = o, e[1] = h.setFloating, e[2] = v) : v = e[2];
  const C = j(v);
  let w;
  e[3] === Symbol.for("react.memo_cache_sentinel") ? (w = {
    duration: {
      open: 250,
      close: 250
    }
  }, e[3] = w) : w = e[3];
  const {
    isMounted: E,
    status: P
  } = de(s, w);
  if (!E)
    return null;
  const R = ve, F = he, L = !1;
  let D;
  e[4] !== c || e[5] !== r ? (D = {
    ...c,
    ...r
  }, e[4] = c, e[5] = r, e[6] = D) : D = e[6];
  const V = !n, G = i === "grey" && n;
  let S;
  e[7] !== a || e[8] !== V || e[9] !== G ? (S = k(_.popover, a, {
    [_.popoverNoArrow]: V,
    [_.popoverVariantGrey]: G
  }), e[7] = a, e[8] = V, e[9] = G, e[10] = S) : S = e[10];
  const z = s.placement, T = g(d);
  let A;
  e[11] !== u || e[12] !== l || e[13] !== s || e[14] !== n || e[15] !== i ? (A = n && /* @__PURE__ */ m(ue, { ref: u, context: s, className: k(_.arrow, l, {
    [_.arrowVariantGrey]: i === "grey" && n
  }), strokeWidth: 1, tipRadius: 1, width: 16, height: 7 }), e[11] = u, e[12] = l, e[13] = s, e[14] = n, e[15] = i, e[16] = A) : A = e[16];
  let x;
  e[17] !== p || e[18] !== s.placement || e[19] !== C || e[20] !== P || e[21] !== A || e[22] !== D || e[23] !== S || e[24] !== T ? (x = /* @__PURE__ */ O("div", { ref: C, style: D, className: S, "data-placement": z, "data-status": P, ...T, children: [
    A,
    p
  ] }), e[17] = p, e[18] = s.placement, e[19] = C, e[20] = P, e[21] = A, e[22] = D, e[23] = S, e[24] = T, e[25] = x) : x = e[25];
  let y;
  e[26] !== F || e[27] !== s || e[28] !== x ? (y = /* @__PURE__ */ m(F, { context: s, modal: L, children: x }), e[26] = F, e[27] = s, e[28] = x, e[29] = y) : y = e[29];
  let N;
  return e[30] !== R || e[31] !== y ? (N = /* @__PURE__ */ m(R, { children: y }), e[30] = R, e[31] = y, e[32] = N) : N = e[32], N;
});
$.displayName = "DSPopover.Content";
f.Anchor = W;
f.Content = $;
f.displayName = "DSPopover";
export {
  f as D,
  ye as a,
  Ae as u,
  xe as v
};