@frontify/fondue
Version:
Design system of Frontify
127 lines (126 loc) • 4.75 kB
JavaScript
import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { useFocusRing as b } from "@react-aria/focus";
import S from "../../foundation/Icon/Generated/IconCaretDown.es.js";
import F from "../../foundation/Icon/Generated/IconCross.es.js";
import C from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
import N from "../../foundation/Icon/Generated/IconTrashBin.es.js";
import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as m, FOCUS_VISIBLE_STYLE as I } from "../../utilities/focusStyle.es.js";
import { merge as r } from "../../utilities/merge.es.js";
import { Validation as a, validationClassMap as D } from "../../utilities/validation.es.js";
var y = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(y || {}), z = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Weak = "Weak", t))(z || {});
const L = (t, s, i, l, o) => r([
"tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]",
t && m,
s ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : r([
"hover:tw-border-line-xx-strong",
l === "Weak" ? "" : "tw-bg-base",
i ? "tw-border-line-xx-strong" : "tw-border-line",
l === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : D[o]
])
]), V = ({
buttonProps: t,
onClear: s,
onDelete: i,
children: l,
disabled: o = !1,
isOpen: c = !1,
isFocusVisible: d = !1,
size: f = "Small",
showClear: p = !1,
validation: n = a.Default,
emphasis: x = "Default"
/* Default */
}) => {
const { focusProps: g, isFocusVisible: k } = b(), { focusProps: h, isFocusVisible: v } = b();
return /* @__PURE__ */ u(
"div",
{
"data-test-id": "trigger",
className: L(d, o, c, x, n),
children: [
l,
/* @__PURE__ */ u(
"div",
{
className: r([
"tw-flex-none tw-flex tw-items-center tw-absolute",
f === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
]),
children: [
p && /* @__PURE__ */ e(
"button",
{
...g,
"data-test-id": "dropdown-clear-button",
"aria-label": "Clear selection",
type: "button",
className: r([
k && m,
o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
]),
onClick: () => !!s && s(),
children: /* @__PURE__ */ e(F, { size: w.Size12 })
}
),
!!i && /* @__PURE__ */ e(
"button",
{
...h,
"data-test-id": "dropdown-delete-button",
"aria-label": "Delete selection",
type: "button",
className: r([
"tw-rounded",
v && m,
o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
]),
onClick: i,
children: /* @__PURE__ */ e(N, { size: w.Size12 })
}
),
/* @__PURE__ */ e(
"button",
{
...t,
type: "button",
tabIndex: -1,
disabled: o,
"aria-hidden": !0,
className: r([
"tw-rounded",
o ? "tw-pointer-events-none tw-text-black-40" : r([
"group-hover:tw-text-black ",
c ? "tw-text-black-100" : "tw-text-black-80",
I
])
]),
children: /* @__PURE__ */ e("div", { className: r(["tw-transition-transform", c && "tw-rotate-180"]), children: /* @__PURE__ */ e(S, { size: w.Size16 }) })
}
),
(n === a.Error || n === a.Warning) && /* @__PURE__ */ e(
"span",
{
className: r([
"tw-flex tw-items-center tw-justify-center",
n === a.Error && "tw-text-text-negative",
n === a.Warning && "tw-text-text-warning"
]),
"data-test-id": "error-state-exclamation-mark-icon",
children: /* @__PURE__ */ e(C, {})
}
)
]
}
)
]
}
);
};
V.displayName = "FondueTrigger";
export {
V as Trigger,
z as TriggerEmphasis,
y as TriggerSize
};
//# sourceMappingURL=Trigger.es.js.map