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