@frontify/fondue
Version:
Design system of Frontify
122 lines (121 loc) • 4.41 kB
JavaScript
import { jsxs as u, jsx as t } from "react/jsx-runtime";
import { IconCross as v, IconTrashBin as F, IconCaretDown as C, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
import { useFocusRing as b } from "@react-aria/focus";
import { FOCUS_STYLE as w, FOCUS_VISIBLE_STYLE as D } from "../../utilities/focusStyle.es.js";
import { merge as e } from "../../utilities/merge.es.js";
import { Validation as a, validationClassMap as I } from "../../utilities/validation.es.js";
var y = /* @__PURE__ */ ((r) => (r.Default = "Default", r.Weak = "Weak", r))(y || {});
const S = (r, s, i, l, o) => e([
"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]",
r && w,
s ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : e([
"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" : I[o]
])
]), T = ({
buttonProps: r,
onClear: s,
onDelete: i,
children: l,
disabled: o = !1,
isOpen: c = !1,
isFocusVisible: d = !1,
size: m = "Small",
showClear: x = !1,
validation: n = a.Default,
emphasis: g = "Default"
/* Default */
}) => {
const { focusProps: f, isFocusVisible: p } = b(), { focusProps: k, isFocusVisible: h } = b();
return /* @__PURE__ */ u(
"div",
{
"data-test-id": "trigger",
className: S(d, o, c, g, n),
children: [
l,
/* @__PURE__ */ u(
"div",
{
className: e([
"tw-flex-none tw-flex tw-items-center tw-absolute",
m === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
]),
children: [
x && /* @__PURE__ */ t(
"button",
{
...f,
"data-test-id": "dropdown-clear-button",
"aria-label": "Clear selection",
type: "button",
className: e([
p && w,
o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
]),
onClick: () => !!s && s(),
children: /* @__PURE__ */ t(v, { size: 12 })
}
),
!!i && /* @__PURE__ */ t(
"button",
{
...k,
"data-test-id": "dropdown-delete-button",
"aria-label": "Delete selection",
type: "button",
className: e([
"tw-rounded",
h && w,
o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
]),
onClick: i,
children: /* @__PURE__ */ t(F, { size: 12 })
}
),
/* @__PURE__ */ t(
"button",
{
...r,
type: "button",
tabIndex: -1,
disabled: o,
"aria-hidden": !0,
className: e([
"tw-rounded",
o ? "tw-pointer-events-none tw-text-black-40" : e([
"group-hover:tw-text-black ",
c ? "tw-text-black-100" : "tw-text-black-80",
D
])
]),
children: /* @__PURE__ */ t("div", { className: e(["tw-transition-transform", c && "tw-rotate-180"]), children: /* @__PURE__ */ t(C, { size: 16 }) })
}
),
(n === a.Error || n === a.Warning) && /* @__PURE__ */ t(
"span",
{
className: e([
"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__ */ t(N, {})
}
)
]
}
)
]
}
);
};
T.displayName = "FondueTrigger";
export {
T as Trigger,
y as TriggerEmphasis
};
//# sourceMappingURL=Trigger.es.js.map