@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/filter/Filter.js

@@ -1,147 +1,102 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { forwardRef as A, useCallback as D } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-import { DialogTrigger as E } from "react-aria-components/Dialog";
-import { useIntl as G } from "react-intl";
-import { CircularIconButton as H } from "../icon-button/CircularIconButton.js";
-import { selectListFilter as J, selectListLabel as K } from "./Filter.controls.js";
-import { useFilterIds as Q } from "./hooks/useFilterIds.js";
-import { useFilterState as U } from "./hooks/useFilterState.js";
-import { useFilterValue as V } from "./hooks/useFilterValue.js";
-import { FilterButton as W } from "./parts/FilterButton.js";
-import { FilterLabel as X } from "./parts/FilterLabel.js";
-import { FilterPopover as Y } from "./parts/FilterPopover.js";
-import { defaultRenderLabel as Z } from "./utils/value-formatters.js";
-const _ = c({
-  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'
-  ]
-}), $ = c({
-  base: [
-    "uy:rounded-r-sm uy:leading-0",
-    "uy:pl-0.25 uy:py-1 uy:pr-1 uy:h-full"
-  ]
-});
-function ee({
-  id: y,
-  label: p,
-  prefixIcon: b,
-  onDismiss: h,
-  renderControl: g,
-  value: t,
-  onChange: v,
-  isDismissable: F = !0,
-  isDisabled: r = !1,
-  isActive: I = !1,
-  renderLabel: w = Z,
-  maxVisibleValues: i = 3,
-  shouldCloseOnConfirm: C = !0,
-  onClearSelection: L,
-  shouldCloseOnClear: x = !0,
-  onConfirmSelection: B,
-  onFilterOpen: s,
-  onFilterClose: a,
-  isDefaultOpen: O = !1,
-  ...N
-}, R) {
-  const j = G(), { rootId: l, labelId: o, valueId: d, dismissButtonId: M } = Q(y), { isOpen: u, setIsOpen: n, confirm: P, clear: S } = U({
-    initialIsOpen: O,
-    shouldCloseOnConfirm: C,
-    shouldCloseOnClear: x,
-    onConfirmSelection: B,
-    onClearSelection: L
-  }), T = D(
-    (m) => {
-      n(m), m ? s?.() : a?.();
-    },
-    [n, s, a]
-  ), { valuesCount: k, shouldShowBadge: q, formattedValue: z } = V(
-    t,
-    i,
-    w
-  );
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      ref: R,
-      role: "group",
-      id: l,
-      className: _(),
-      "aria-labelledby": o,
-      "aria-describedby": d,
-      "aria-disabled": r,
-      "data-dd-privacy": "allow",
-      "data-status": I || u ? "active" : "idle",
-      "data-unity-component": "Filter",
-      ...N,
-      children: [
-        /* @__PURE__ */ f(E, { isOpen: u, onOpenChange: T, children: [
-          /* @__PURE__ */ e(
-            W,
-            {
-              labelId: o,
-              prefixIcon: b,
-              isDisabled: r,
-              children: /* @__PURE__ */ e(
-                X,
-                {
-                  labelId: o,
-                  valueId: d,
-                  label: p,
-                  value: t,
-                  valuesCount: k,
-                  shouldShowBadge: q,
-                  formattedValue: z,
-                  maxVisibleValues: i,
-                  isDisabled: r
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ e(Y, { onConfirm: P, onClear: S, children: g(t, v) })
-        ] }),
-        F && /* @__PURE__ */ e("div", { "data-unity-slot": "dismiss", className: $(), children: /* @__PURE__ */ e(
-          H,
-          {
-            icon: "CloseOutlined",
-            color: "content.neutral.lowest",
-            title: j.formatMessage({
-              id: "unity:component:filter:dismiss:title",
-              defaultMessage: "Remove filter"
-            }),
-            onPress: h,
-            id: M,
-            "aria-controls": l,
-            isDisabled: r
-          }
-        ) })
-      ]
-    }
-  );
+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
+			})
+		})]
+	});
 }
-const re = A(ee);
-re.displayName = "Filter";
-const be = {
-  selectList: J
-}, he = {
-  selectList: K
-};
-export {
-  re as Filter,
-  be as FilterControls,
-  he as FilterLabels,
-  _ as filterContainer,
-  $ as filterDismissButton
-};
+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 };

package/dist/esm/components/filter/hooks/useFilterIds.js

@@ -1,13 +1,13 @@
-import { useId as i } from "react-aria/useId";
-function d(e) {
-  const r = i(), t = e ?? r;
-  return {
-    rootId: `filter-${t}`,
-    labelId: `filter-${t}__label`,
-    valueId: `filter-${t}__value`,
-    dismissButtonId: `filter-${t}__dismiss-button`
-  };
+import { useId as e } from "react-aria/useId";
+//#region src/components/filter/hooks/useFilterIds.ts
+function t(t) {
+	let n = e(), r = t ?? n;
+	return {
+		rootId: `filter-${r}`,
+		labelId: `filter-${r}__label`,
+		valueId: `filter-${r}__value`,
+		dismissButtonId: `filter-${r}__dismiss-button`
+	};
 }
-export {
-  d as useFilterIds
-};
+//#endregion
+export { t as useFilterIds };

package/dist/esm/components/filter/hooks/useFilterState.js

@@ -1,23 +1,17 @@
-import { useState as u, useCallback as l } from "react";
-function m(i = {}) {
-  const {
-    initialIsOpen: r = !1,
-    shouldCloseOnConfirm: n = !0,
-    shouldCloseOnClear: o = !0,
-    onConfirmSelection: t,
-    onClearSelection: s
-  } = i, [a, e] = u(r), c = l(() => {
-    n && e(!1), t?.();
-  }, [n, t]), f = l(() => {
-    o && e(!1), s?.();
-  }, [o, s]);
-  return {
-    isOpen: a,
-    setIsOpen: e,
-    confirm: c,
-    clear: f
-  };
+import { useCallback as e, useState as t } from "react";
+//#region src/components/filter/hooks/useFilterState.ts
+function n(n = {}) {
+	let { initialIsOpen: r = !1, shouldCloseOnConfirm: i = !0, shouldCloseOnClear: a = !0, onConfirmSelection: o, onClearSelection: s } = n, [c, l] = t(r);
+	return {
+		isOpen: c,
+		setIsOpen: l,
+		confirm: e(() => {
+			i && l(!1), o?.();
+		}, [i, o]),
+		clear: e(() => {
+			a && l(!1), s?.();
+		}, [a, s])
+	};
 }
-export {
-  m as useFilterState
-};
+//#endregion
+export { n as useFilterState };

package/dist/esm/components/filter/hooks/useFilterValue.js

@@ -1,31 +1,32 @@
-import { useMemo as l } from "react";
-import { isIterable as s } from "../utils/value-formatters.js";
-function d(t, e, r) {
-  return l(() => {
-    if (t == null || t === "")
-      return {
-        valuesCount: 0,
-        shouldShowBadge: !1,
-        formattedValue: null
-      };
-    let o;
-    if (s(t)) {
-      if (o = Array.from(t).length, o === 0)
-        return {
-          valuesCount: 0,
-          shouldShowBadge: !1,
-          formattedValue: null
-        };
-    } else
-      o = 1;
-    const u = !isNaN(e) && o > e, n = u ? null : r(t);
-    return {
-      valuesCount: o,
-      shouldShowBadge: u,
-      formattedValue: n
-    };
-  }, [t, e, r]);
+import { isIterable as e } from "../utils/value-formatters.js";
+import { useMemo as t } from "react";
+//#region src/components/filter/hooks/useFilterValue.ts
+function n(n, r, i) {
+	return t(() => {
+		if (n == null || n === "") return {
+			valuesCount: 0,
+			shouldShowBadge: !1,
+			formattedValue: null
+		};
+		let t;
+		if (e(n)) {
+			if (t = Array.from(n).length, t === 0) return {
+				valuesCount: 0,
+				shouldShowBadge: !1,
+				formattedValue: null
+			};
+		} else t = 1;
+		let a = !isNaN(r) && t > r, o = a ? null : i(n);
+		return {
+			valuesCount: t,
+			shouldShowBadge: a,
+			formattedValue: o
+		};
+	}, [
+		n,
+		r,
+		i
+	]);
 }
-export {
-  d as useFilterValue
-};
+//#endregion
+export { n as useFilterValue };

package/dist/esm/components/filter/parts/FilterButton.js

@@ -1,55 +1,41 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { Icon as l } from "@payfit/unity-icons";
-import { uyTv as s } from "@payfit/unity-themes";
-import { Actionable as p } from "../../actionable/Actionable.js";
-const c = s({
-  slots: {
-    button: [
-      "uy:flex uy:gap-0.5 uy:items-center",
-      "uy:focus-visible:outline-none",
-      // spacing based on children
-      "uy:py-1",
-      "uy:pl-1.5 uy:has-data-[unity-slot=prefix]:pl-1",
-      "uy:pr-0"
-    ],
-    prefix: [
-      "uy:p-0.25",
-      "uy:text-content-neutral-low",
-      "uy:group-data-[status=active]:text-content-form-selected",
-      "uy:group-aria-[disabled=true]:text-content-neutral-disabled"
-    ]
-  }
-});
-function x({
-  labelId: o,
-  prefixIcon: t,
-  isDisabled: r,
-  children: a
-}) {
-  const { button: i, prefix: n } = c();
-  return /* @__PURE__ */ u(
-    p,
-    {
-      className: i(),
-      "aria-labelledby": o,
-      isDisabled: r,
-      "aria-haspopup": "dialog",
-      children: [
-        t && /* @__PURE__ */ e("span", { "data-unity-slot": "prefix", className: n(), children: /* @__PURE__ */ e(
-          l,
-          {
-            src: t,
-            size: 20,
-            role: "presentation",
-            color: "inherit"
-          }
-        ) }),
-        a
-      ]
-    }
-  );
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@payfit/unity-icons";
+//#region src/components/filter/parts/FilterButton.tsx
+var a = t({ slots: {
+	button: [
+		"uy:flex uy:gap-0.5 uy:items-center",
+		"uy:focus-visible:outline-none",
+		"uy:py-1",
+		"uy:pl-1.5 uy:has-data-[unity-slot=prefix]:pl-1",
+		"uy:pr-0"
+	],
+	prefix: [
+		"uy:p-0.25",
+		"uy:text-content-neutral-low",
+		"uy:group-data-[status=active]:text-content-form-selected",
+		"uy:group-aria-[disabled=true]:text-content-neutral-disabled"
+	]
+} });
+function o({ labelId: t, prefixIcon: o, isDisabled: s, children: c }) {
+	let { button: l, prefix: u } = a();
+	return /* @__PURE__ */ r(e, {
+		className: l(),
+		"aria-labelledby": t,
+		isDisabled: s,
+		"aria-haspopup": "dialog",
+		children: [o && /* @__PURE__ */ n("span", {
+			"data-unity-slot": "prefix",
+			className: u(),
+			children: /* @__PURE__ */ n(i, {
+				src: o,
+				size: 20,
+				role: "presentation",
+				color: "inherit"
+			})
+		}), c]
+	});
 }
-export {
-  x as FilterButton,
-  c as filterButton
-};
+//#endregion
+export { o as FilterButton };

package/dist/esm/components/filter/parts/FilterLabel.js

@@ -1,57 +1,39 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { uyTv as p } from "@payfit/unity-themes";
-import { FormattedMessage as y } from "react-intl";
-import { Badge as m } from "../../badge/Badge.js";
-const h = p({
-  slots: {
-    container: [
-      "uy:typography-action",
-      "uy:flex uy:gap-0.25 uy:items-baseline"
-    ],
-    value: [
-      "uy:whitespace-nowrap uy:overflow-hidden uy:max-w-[20ch] uy:text-ellipsis"
-    ]
-  }
-});
-function g({
-  labelId: n,
-  valueId: t,
-  label: o,
-  valuesCount: e,
-  formattedValue: l,
-  maxVisibleValues: r,
-  isDisabled: i
-}) {
-  const { container: c, value: d } = h(), u = e > 0 && e <= r && l;
-  return /* @__PURE__ */ a("div", { id: n, className: c(), children: [
-    /* @__PURE__ */ a("span", { "data-dd-privacy": "allow", children: [
-      o,
-      u && /* @__PURE__ */ a("span", { "data-dd-privacy": "mask", className: d(), id: t, children: [
-        ": ",
-        l
-      ] })
-    ] }),
-    !isNaN(r) && e > r && /* @__PURE__ */ a(
-      m,
-      {
-        variant: i ? "neutral" : "numeric",
-        className: "uy:h-300",
-        children: [
-          e,
-          /* @__PURE__ */ s("span", { className: "uy:sr-only", id: t, children: /* @__PURE__ */ s(
-            y,
-            {
-              id: "unity:component:filter:label:values-count",
-              defaultMessage: "{count, plural, =0 {no values} one {value} other {values}} selected",
-              values: { count: e }
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+import { Badge as e } from "../../badge/Badge.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormattedMessage as i } from "react-intl";
+//#region src/components/filter/parts/FilterLabel.tsx
+var a = t({ slots: {
+	container: ["uy:typography-action", "uy:flex uy:gap-0.25 uy:items-baseline"],
+	value: ["uy:whitespace-nowrap uy:overflow-hidden uy:max-w-[20ch] uy:text-ellipsis"]
+} });
+function o({ labelId: t, valueId: o, label: s, valuesCount: c, formattedValue: l, maxVisibleValues: u, isDisabled: d }) {
+	let { container: f, value: p } = a(), m = c > 0 && c <= u && l;
+	return /* @__PURE__ */ r("div", {
+		id: t,
+		className: f(),
+		children: [/* @__PURE__ */ r("span", {
+			"data-dd-privacy": "allow",
+			children: [s, m && /* @__PURE__ */ r("span", {
+				"data-dd-privacy": "mask",
+				className: p(),
+				id: o,
+				children: [":\xA0", l]
+			})]
+		}), !isNaN(u) && c > u && /* @__PURE__ */ r(e, {
+			variant: d ? "neutral" : "numeric",
+			className: "uy:h-300",
+			children: [c, /* @__PURE__ */ n("span", {
+				className: "uy:sr-only",
+				id: o,
+				children: /* @__PURE__ */ n(i, {
+					id: "unity:component:filter:label:values-count",
+					defaultMessage: "{count, plural, =0 {no values} one {value} other {values}} selected",
+					values: { count: c }
+				})
+			})]
+		})]
+	});
 }
-export {
-  g as FilterLabel,
-  h as filterLabel
-};
+//#endregion
+export { o as FilterLabel };