@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
231 lines (230 loc) • 8.16 kB
JavaScript
"use client";
import { jsx as P, jsxs as U, Fragment as te } from "react/jsx-runtime";
import { d as W } from "./index.cKLI89Eg.js";
import { useState as $, useRef as re, useMemo as ne, createContext as se, forwardRef as z, isValidElement as ae, cloneElement as ce, useContext as le } from "react";
import { u as ie, a as pe, o as de, j as ve, s as fe, k as ue, b as he, c as me, d as ge, e as we, f as q, g as De, l as Pe, F as ye, i as Se } from "./floating-ui.react.Chmq0RmI.js";
import { c as j } from "./index.DQOqod3i.js";
import { D as Ae } from "./Button.CCol--xy.js";
import { g as E, c as B } from "./helpers.CexwVao7.js";
import { u as _e } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import '../assets/Popover.58Tb0dOt.css';const ke = "ds-popover_popover_y9vkf_5", Ce = "ds-popover_popover--no-arrow_y9vkf_65", xe = "ds-popover_popover--variant-grey_y9vkf_68", Ee = "ds-popover_popover--dark_y9vkf_71", be = "ds-popover_arrow_y9vkf_109", Ne = "ds-popover_arrow--variant-grey_y9vkf_128", Re = "ds-popover_arrow--dark_y9vkf_139", Fe = "ds-popover_default-anchor_y9vkf_185", m = {
popover: ke,
popoverNoArrow: Ce,
popoverVariantGrey: xe,
popoverDark: Ee,
arrow: be,
arrowVariantGrey: Ne,
arrowDark: Re,
defaultAnchor: Fe
}, Te = ({
initialOpen: r = !1,
placement: o = "bottom",
isOpen: e,
popoverOffset: n = 6,
showArrow: c = !0,
theme: i = "light",
variant: p = "default",
defaultAnchorButtonProps: d,
onOpenChange: t
} = {}) => {
const [s, f] = $(r), a = e ?? s, l = t ?? f, v = re(null), w = ie({
placement: o,
open: a,
strategy: "fixed",
onOpenChange: l,
whileElementsMounted: pe,
middleware: [de(n + (c ? 7 : 0)), ve({
// default configuration taken from https://floating-ui.com/docs/flip
crossAxis: o.includes("-"),
fallbackAxisSideDirection: "end",
padding: n
}), fe({
padding: n
}), ...c ? [ue({
element: v
})] : []]
}), u = w.context, x = he(u, {
enabled: !0
}), h = me(u), y = ge(u), b = we([x, h, y]);
return ne(() => ({
open: a,
popoverOffset: n,
setOpen: l,
arrowRef: v,
showArrow: c,
defaultAnchorButtonProps: d,
theme: i,
variant: p,
...b,
...w
}), [a, n, l, v, c, d, i, p, b, w]);
}, Ve = ({
children: r,
hasContent: o,
hasAnchor: e
}) => {
if (!r)
throw new Error(E("DSPopover", "A DSPopover must have children."));
if (!o && e)
throw new Error(E("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(E("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."));
}, Ge = ({
showArrow: r,
variant: o
}) => {
o === "grey" && r === !1 && console.warn(E("DSPopover", "The 'grey' variant is only available when 'showArrow' is true. To use the 'grey' variant, please ensure that 'showArrow' is set to true."));
}, J = se(null), K = () => {
const r = le(J);
if (r == null)
throw new Error(E("DSPopover", "Components like DSPopover.Anchor or DSPopover.Content must be wrapped in <DSPopover />."));
return r;
}, D = (r) => {
const o = W.c(11), {
children: e,
...n
} = r, c = Te({
...n
}), i = B(e, D.Content), p = B(e, D.Anchor);
process.env.NODE_ENV !== "production" && (Ve({
children: e,
hasContent: i,
hasAnchor: p
}), Ge({
showArrow: n.showArrow,
variant: n.variant
}));
const d = !i && !p && e !== null;
let t;
o[0] !== e || o[1] !== d ? (t = d ? /* @__PURE__ */ U(te, { children: [
/* @__PURE__ */ P(D.Anchor, {}),
/* @__PURE__ */ P(D.Content, { children: e })
] }) : e, o[0] = e, o[1] = d, o[2] = t) : t = o[2];
const s = t, f = i || d, a = p || d;
let l;
o[3] !== c || o[4] !== f || o[5] !== a ? (l = {
...c,
hasContent: f,
hasAnchor: a
}, o[3] = c, o[4] = f, o[5] = a, o[6] = l) : l = o[6];
const v = l;
let g;
return o[7] !== s || o[8] !== v || o[9] !== n ? (g = /* @__PURE__ */ P(J.Provider, { value: v, ...n, children: s }), o[7] = s, o[8] = v, o[9] = n, o[10] = g) : g = o[10], g;
}, Q = z(({
children: r,
...o
}, e) => {
const {
context: n,
defaultAnchorButtonProps: c,
refs: i,
hasAnchor: p,
theme: d,
getReferenceProps: t
} = K(), {
label: s = "Toggle popover",
...f
} = c || {}, a = r ? r?.ref : null, l = q([i.setReference, e, a]);
return p && r && ae(r) ? ce(r, t({
ref: l,
...o,
...r.props,
"data-state": n.open ? "open" : "closed"
// eslint-disable-next-line @typescript-eslint/no-explicit-any
})) : /* @__PURE__ */ P(
Ae,
{
...f,
ref: l,
type: "button",
"data-state": n.open ? "open" : "closed",
...t(o),
size: "small",
hideLabel: !0,
iconName: "circle-info-inverted",
variant: "ghost",
theme: d,
className: m.defaultAnchor,
children: r ?? s
}
);
});
Q.displayName = "DSPopover.Anchor";
const X = z((r, o) => {
const e = W.c(41), {
style: n,
className: c,
classNameArrow: i,
children: p,
...d
} = r, {
context: t,
refs: s,
floatingStyles: f,
showArrow: a,
theme: l,
variant: v,
getFloatingProps: g,
arrowRef: w
} = K();
let u;
e[0] !== o || e[1] !== s.setFloating ? (u = [s.setFloating, o], e[0] = o, e[1] = s.setFloating, e[2] = u) : u = e[2];
const x = q(u), h = l === "dark";
let y;
e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = {
duration: {
open: 250,
close: 250
}
}, e[3] = y) : y = e[3];
const {
isMounted: b,
status: T
} = De(t, y), [Y, Z] = $(null);
let N;
e[4] !== s.reference.current ? (N = () => {
const L = s.reference.current?.closest("dialog");
Z(L instanceof HTMLDialogElement ? L : null);
}, e[4] = s.reference.current, e[5] = N) : N = e[5];
let R;
if (e[6] !== t.open || e[7] !== s.reference ? (R = [s.reference, t.open], e[6] = t.open, e[7] = s.reference, e[8] = R) : R = e[8], _e(N, R), !b)
return null;
const V = Se, G = Y ?? void 0, M = ye, ee = !1;
let S;
e[9] !== f || e[10] !== n ? (S = {
...f,
...n
}, e[9] = f, e[10] = n, e[11] = S) : S = e[11];
const H = !a, I = v === "grey" && a;
let A;
e[12] !== c || e[13] !== h || e[14] !== H || e[15] !== I ? (A = j(m.popover, c, {
[m.popoverDark]: h,
[m.popoverNoArrow]: H,
[m.popoverVariantGrey]: I
}), e[12] = c, e[13] = h, e[14] = H, e[15] = I, e[16] = A) : A = e[16];
const oe = t.placement, O = g(d);
let _;
e[17] !== w || e[18] !== i || e[19] !== t || e[20] !== h || e[21] !== a || e[22] !== v ? (_ = a && /* @__PURE__ */ P(Pe, { ref: w, context: t, className: j(m.arrow, i, {
[m.arrowDark]: h,
[m.arrowVariantGrey]: v === "grey" && a
}), strokeWidth: 1, tipRadius: 1, width: 16, height: 7 }), e[17] = w, e[18] = i, e[19] = t, e[20] = h, e[21] = a, e[22] = v, e[23] = _) : _ = e[23];
let k;
e[24] !== p || e[25] !== t.placement || e[26] !== x || e[27] !== T || e[28] !== A || e[29] !== O || e[30] !== _ || e[31] !== S ? (k = /* @__PURE__ */ U("div", { ref: x, style: S, className: A, "data-placement": oe, "data-status": T, ...O, children: [
_,
p
] }), e[24] = p, e[25] = t.placement, e[26] = x, e[27] = T, e[28] = A, e[29] = O, e[30] = _, e[31] = S, e[32] = k) : k = e[32];
let C;
e[33] !== M || e[34] !== t || e[35] !== k ? (C = /* @__PURE__ */ P(M, { context: t, modal: ee, children: k }), e[33] = M, e[34] = t, e[35] = k, e[36] = C) : C = e[36];
let F;
return e[37] !== V || e[38] !== C || e[39] !== G ? (F = /* @__PURE__ */ P(V, { root: G, children: C }), e[37] = V, e[38] = C, e[39] = G, e[40] = F) : F = e[40], F;
});
X.displayName = "DSPopover.Content";
D.Anchor = Q;
D.Content = X;
D.displayName = "DSPopover";
export {
D,
Ge as a,
Te as u,
Ve as v
};