@stihl-design-system/components/chunks/Popover.BRR8YZ-P.js

Welcome to the STIHL Design System react component library.

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