@frontify/fondue
Version:
Design system of Frontify
135 lines (134 loc) • 5.45 kB
JavaScript
import { jsx as o, jsxs as I } from "react/jsx-runtime";
import { useFocusRing as M } from "@react-aria/focus";
import { setInteractionModality as $ } from "@react-aria/interactions";
import { useRadioGroup as A, useRadio as L } from "@react-aria/radio";
import { VisuallyHidden as G } from "@react-aria/visually-hidden";
import { useRadioGroupState as T } from "@react-stately/radio";
import { motion as H } from "framer-motion";
import { useMemo as V, useRef as N, useState as O, forwardRef as U, useLayoutEffect as Y } from "react";
import { useMemoizedId as _ } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as q } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
const v = (w) => w.icon !== void 0, j = U((w, n) => {
const { id: u, item: e, disabled: l, radioGroupState: s, size: g } = w, d = N(null), x = e.id === s.selectedValue, { inputProps: m } = L(
{
value: e.id,
"aria-label": v(e) ? e.ariaLabel : e.value.toString(),
isDisabled: l,
id: x ? u : void 0
},
s,
d
), { isFocusVisible: b, focusProps: i } = M(), h = () => {
var f;
l || (s.setSelectedValue(e.id), (f = d.current) == null || f.focus(), $("pointer"));
}, S = () => {
switch (!0) {
case v(e):
return "fondue-segmented-controls-item-icon";
case typeof e.value == "string":
return "fondue-segmented-controls-item-text";
default:
return "fondue-segmented-controls-item-number";
}
};
return /* @__PURE__ */ I("div", { ref: n, className: p(["tw-relative", b && q]), children: [
/* @__PURE__ */ o(G, { children: /* @__PURE__ */ o("input", { ...m, ...i, "data-test-id": "fondue-segmented-controls-input", ref: d }) }),
/* @__PURE__ */ o(
"div",
{
onClick: h,
role: "none",
"data-test-id": S(),
className: p([
"tw-relative tw-w-full tw-py-1.5 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
g === "small" ? "tw-px-2" : "tw-px-4",
x && !l ? "tw-transition tw-ease-in-out tw-delay-300 tw-text-text tw-bg-base" : "tw-text-text-weak",
l ? "tw-text-box-disabled-inverse tw-bg-box-disabled tw-h-[2.15rem] tw-rounded hover:tw-cursor-not-allowed tw-border-line-x-strong" : "hover:tw-text-text hover:tw-cursor-pointer"
]),
children: /* @__PURE__ */ I("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex tw-items-center", children: [
v(e) && /* @__PURE__ */ o("span", { className: "tw-leading-3", children: e.icon }),
e.value && /* @__PURE__ */ o("span", { className: v(e) ? "tw-ml-2" : "", children: e.value.toString() })
] })
}
)
] }, e.id);
});
j.displayName = "SegmentedControlsItem";
const z = ({
id: w,
items: n,
activeItemId: u,
onChange: e,
ariaLabel: l = "SegmentedControls",
disabled: s = !1,
hugWidth: g = !1,
size: d
}) => {
const x = V(() => n.some((t) => !t.disabled), [n]), m = _(w), b = { onChange: e, value: u, label: l, isDisabled: s }, i = T(b), { radioGroupProps: h, labelProps: S } = A(b, i), f = N([]), R = N(null), [P, k] = O(null), B = V(() => n.map((t, r) => /* @__PURE__ */ o(
j,
{
id: m,
item: t,
disabled: t.disabled ?? s,
radioGroupState: i,
ref: (a) => f.current[r] = a,
size: d
},
`fondue-segmented-controls-${m}-item-${t.id}`
)), [n, m, s, i, d]), y = x ? n.findIndex((t, r) => {
const a = t.id === i.selectedValue;
if (t.disabled && a)
if (r > 0) {
const c = r - 1;
i.setSelectedValue(n[c].id);
} else {
const c = r + 1;
i.setSelectedValue(n[c].id);
}
return a;
}) : -1, D = g ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly";
return Y(() => {
const t = f.current[y];
if (t && R.current) {
const r = R.current.getBoundingClientRect(), a = t.getBoundingClientRect();
let c = a.left - r.left, C = a.width;
y === 0 ? (c -= 1, C += 2) : C += 1;
const E = C / r.width * 100, F = c / r.width * 100;
k({ width: `${E}%`, left: `${F}%` });
}
}, [u, y, d]), /* @__PURE__ */ I("div", { className: p([g ? "tw-inline-flex" : "tw-flex", "tw-relative"]), children: [
/* @__PURE__ */ o(
"fieldset",
{
...h,
"data-test-id": "fondue-segmented-controls",
className: p([
"tw-relative tw-divide-x tw-divide-line-strong tw-w-full tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-sm tw-select-none",
D
]),
ref: R,
children: B
}
),
/* @__PURE__ */ o(G, { children: /* @__PURE__ */ o("span", { ...S, children: l }) }),
u && P && /* @__PURE__ */ o(
H.div,
{
"aria-hidden": "true",
animate: P,
initial: !1,
transition: { type: "tween", duration: 0.3 },
className: p([
"tw-absolute tw-h-9 tw-box-border tw-border tw-rounded tw-pointer-events-none tw-top-0",
s ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-transparent"
])
}
)
] });
};
z.displayName = "FondueSegmentedControls";
export {
z as SegmentedControls
};
//# sourceMappingURL=SegmentedControls.es.js.map