@payfit/unity-components
Version:
103 lines (102 loc) • 4.06 kB
JavaScript
import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
import { selectListFilter as t, selectListLabel as n } from "./Filter.controls.js";
import { useFilterIds as r } from "./hooks/useFilterIds.js";
import { useFilterState as i } from "./hooks/useFilterState.js";
import { defaultRenderLabel as a } from "./utils/value-formatters.js";
import { useFilterValue as o } from "./hooks/useFilterValue.js";
import { FilterButton as s } from "./parts/FilterButton.js";
import { FilterLabel as c } from "./parts/FilterLabel.js";
import { FilterPopover as l } from "./parts/FilterPopover.js";
import { forwardRef as u, useCallback as d } from "react";
import { uyTv as f } from "@payfit/unity-themes";
import { jsx as p, jsxs as m } from "react/jsx-runtime";
import { useIntl as h } from "react-intl";
import { DialogTrigger as g } from "react-aria-components/Dialog";
//#region src/components/filter/Filter.tsx
var _ = f({ base: [
"uy:group uy:transition-colors",
"uy:flex uy:items-center",
"uy:rounded-md uy:sm:rounded-sm",
"uy:border uy:border-solid",
"uy:cursor-pointer uy:aria-[disabled=true]:cursor-not-allowed",
"uy:w-fit",
"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
"uy:has-data-[hovered]:border-border-form-hover uy:has-data-[hovered]:bg-surface-form-hover",
"uy:has-data-[pressed]:border-border-form-pressed uy:has-data-[pressed]:bg-surface-form-pressed",
"uy:aria-[disabled=true]:border-border-form-disabled uy:aria-[disabled=true]:bg-surface-form-disabled uy:aria-[disabled=true]:text-content-form-disabled",
"uy:data-[status=active]:text-content-form-selected",
"uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring",
"uy:[&:not(:has([data-unity-slot=\"dismiss\"]))]:pr-1.5"
] }), v = f({ base: ["uy:rounded-r-sm uy:leading-0", "uy:pl-0.25 uy:py-1 uy:pr-1 uy:h-full"] });
function y({ id: t, label: n, prefixIcon: u, onDismiss: f, renderControl: y, value: b, onChange: x, isDismissable: S = !0, isDisabled: C = !1, isActive: w = !1, renderLabel: T = a, maxVisibleValues: E = 3, shouldCloseOnConfirm: D = !0, onClearSelection: O, shouldCloseOnClear: k = !0, onConfirmSelection: A, onFilterOpen: j, onFilterClose: M, isDefaultOpen: N = !1, ...P }, F) {
let I = h(), { rootId: L, labelId: R, valueId: z, dismissButtonId: B } = r(t), { isOpen: V, setIsOpen: H, confirm: U, clear: W } = i({
initialIsOpen: N,
shouldCloseOnConfirm: D,
shouldCloseOnClear: k,
onConfirmSelection: A,
onClearSelection: O
}), G = d((e) => {
H(e), e ? j?.() : M?.();
}, [
H,
j,
M
]), { valuesCount: K, shouldShowBadge: q, formattedValue: J } = o(b, E, T);
return /* @__PURE__ */ m("div", {
ref: F,
role: "group",
id: L,
className: _(),
"aria-labelledby": R,
"aria-describedby": z,
"aria-disabled": C,
"data-dd-privacy": "allow",
"data-status": w || V ? "active" : "idle",
"data-unity-component": "Filter",
...P,
children: [/* @__PURE__ */ m(g, {
isOpen: V,
onOpenChange: G,
children: [/* @__PURE__ */ p(s, {
labelId: R,
prefixIcon: u,
isDisabled: C,
children: /* @__PURE__ */ p(c, {
labelId: R,
valueId: z,
label: n,
value: b,
valuesCount: K,
shouldShowBadge: q,
formattedValue: J,
maxVisibleValues: E,
isDisabled: C
})
}), /* @__PURE__ */ p(l, {
onConfirm: U,
onClear: W,
children: y(b, x)
})]
}), S && /* @__PURE__ */ p("div", {
"data-unity-slot": "dismiss",
className: v(),
children: /* @__PURE__ */ p(e, {
icon: "CloseOutlined",
color: "content.neutral.lowest",
title: I.formatMessage({
id: "unity:component:filter:dismiss:title",
defaultMessage: "Remove filter"
}),
onPress: f,
id: B,
"aria-controls": L,
isDisabled: C
})
})]
});
}
var b = u(y);
b.displayName = "Filter";
var x = { selectList: t }, S = { selectList: n };
//#endregion
export { b as Filter, x as FilterControls, S as FilterLabels, _ as filterContainer, v as filterDismissButton };