@frontify/fondue
Version:
Design system of Frontify
171 lines (170 loc) • 6.68 kB
JavaScript
import { jsx as r, jsxs as p } from "react/jsx-runtime";
import { useCheckbox as Q } from "@react-aria/checkbox";
import { useFocusRing as V } from "@react-aria/focus";
import { mergeProps as Z } from "@react-aria/utils";
import { useToggleState as q } from "@react-stately/toggle";
import { forwardRef as R, useState as k, useRef as F, useEffect as O, useCallback as T } from "react";
import { InputLabel as ee } from "../InputLabel/InputLabel.es.js";
import te from "../../foundation/Icon/Generated/IconCheckMark.es.js";
import re from "../../foundation/Icon/Generated/IconMinus.es.js";
import { IconSize as y } from "../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as oe } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as ne } from "../../utilities/focusStyle.es.js";
import { merge as s } from "../../utilities/merge.es.js";
import { useForwardedRef as se } from "../../utilities/useForwardedRef.es.js";
var ie = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(ie || {}), le = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e.Strong = "Strong", e))(le || {}), ae = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e.XLarge = "XLarge", e))(ae || {});
const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover", we = {
Weak: "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
Default: E,
Strong: E
}, de = {
Default: "tw-h-4 tw-w-4",
Large: "tw-h-5 tw-w-5",
XLarge: "tw-h-8 tw-w-8"
}, ue = ({
id: e,
emphasis: C = "Default",
size: L = "Default",
disabled: i,
required: b,
label: n,
hideLabel: v,
tooltip: W,
helperText: l,
"aria-label": M,
value: z,
groupInputProps: $,
onChange: U,
state: a = "Unchecked",
"data-test-id": c = "checkbox"
}, I) => {
const h = oe(e), t = se(I), { focusProps: X } = V(), j = q({
onChange: i ? void 0 : U,
isSelected: a === "Checked"
/* Checked */
}), [P, D] = k(), w = F(null), d = F(null), [H, Y] = k(!1), [_, A] = k(!1), N = (o) => {
o.key === "Tab" && D(!0);
}, S = () => {
D(!1);
};
O(() => {
var o, f;
return (o = t == null ? void 0 : t.current) == null || o.addEventListener("keyup", N), (f = t == null ? void 0 : t.current) == null || f.addEventListener("blur", S), () => {
var m, x;
(m = t == null ? void 0 : t.current) == null || m.removeEventListener("keyup", N), (x = t == null ? void 0 : t.current) == null || x.removeEventListener("blur", S);
};
}, []);
const { inputProps: B } = Q(
{
isDisabled: i,
isRequired: b,
isIndeterminate: a === "Mixed",
"aria-label": M,
value: z
},
j,
t
), G = {
Checked: /* @__PURE__ */ r(te, { size: L === "XLarge" ? y.Size24 : y.Size16 }),
Mixed: /* @__PURE__ */ r(re, {}),
Unchecked: null
}, g = ce(a), J = s([
"tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong",
g && "tw-text-box-disabled-inverse tw-border-line-strong"
]), K = g ? we[C] : s([
"tw-bg-base hover:tw-bg-box-neutral",
C === "Strong" ? "tw-border-2 tw-border-box-selected-strong" : "tw-border tw-border-line-xx-strong"
]), u = T(() => {
var o, f, m, x;
w.current && Y(((o = w.current) == null ? void 0 : o.scrollWidth) > ((f = w.current) == null ? void 0 : f.clientWidth)), d.current && A(
((m = d.current) == null ? void 0 : m.scrollWidth) > ((x = d.current) == null ? void 0 : x.clientWidth)
);
}, [w, d]);
return O(() => {
if (!(!n && !l || v))
return u(), window.removeEventListener("resize", u), window.addEventListener("resize", u), () => {
window.removeEventListener("resize", u);
};
}, [n, l, v, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": c, children: /* @__PURE__ */ r("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", P ? ne : ""]), children: /* @__PURE__ */ r(
ee,
{
id: `${h}-label`,
disabled: i,
clickable: !0,
htmlFor: h,
tooltip: W,
required: b,
bold: g,
children: /* @__PURE__ */ p("span", { className: "tw-flex tw-items-center tw-whitespace-nowrap", children: [
/* @__PURE__ */ p("span", { className: "tw-inline-flex", children: [
/* @__PURE__ */ r(
"input",
{
...Z($ || B, X),
id: h,
ref: t,
className: "tw-sr-only",
"data-test-id": `${c}-input`,
role: "checkbox",
"aria-checked": a === "Checked",
required: b,
"aria-label": M,
"aria-labelledby": n ? `${h}-label` : void 0
}
),
/* @__PURE__ */ r(
"span",
{
"data-test-id": `${c}-icon-box`,
"aria-hidden": "true",
className: s([
"tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
de[L],
i ? J : K
]),
children: G[a]
}
)
] }),
!v && /* @__PURE__ */ p("span", { className: "tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5", children: [
n && /* @__PURE__ */ r(
"span",
{
ref: w,
"data-test-id": `${c}-label`,
className: s([
"tw-text-ellipsis tw-overflow-hidden",
"tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
g && "tw-font-medium"
]),
title: H ? n : void 0,
children: n
}
),
l && /* @__PURE__ */ r(
"span",
{
ref: d,
"data-test-id": `${c}-helper-text`,
className: s([
"tw-text-ellipsis tw-overflow-hidden",
"tw-font-sans tw-text-xs tw-font-normal",
i ? "text-disabled" : "tw-text-text-weak"
]),
title: _ ? l : void 0,
children: l
}
)
] })
] })
}
) }) });
}, fe = R(ue);
fe.displayName = "FondueCheckbox";
export {
fe as Checkbox,
le as CheckboxEmphasis,
ae as CheckboxSize,
ie as CheckboxState
};
//# sourceMappingURL=Checkbox.es.js.map