@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -1,125 +1,105 @@
-import { jsxs as c, jsx as s, Fragment as b } from "react/jsx-runtime";
-import { forwardRef as h, useContext as x, useRef as v } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { mergeProps as P } from "react-aria/mergeProps";
-import { useFocusRing as L } from "react-aria/useFocusRing";
-import { useRadio as I } from "react-aria/useRadioGroup";
-import { VisuallyHidden as N } from "react-aria/VisuallyHidden";
-import { useIntl as V } from "react-intl";
-import { Icon as F } from "../../icon/Icon.js";
-import { Spinner as R } from "../../spinner/Spinner.js";
-import { SegmentedButtonGroupContext as S } from "../SegmentedButtonGroups.context.js";
-const B = w({
-  slots: {
-    base: [
-      "uy:group uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25 uy:h-400",
-      "uy:active:gb-surface-neutral-pressed"
-    ],
-    wrapper: [
-      "uy:flex uy:gap-50 uy:items-center uy:typography-action",
-      "uy:active:text-content-neutral-pressed"
-    ]
-  },
-  variants: {
-    isSelected: {
-      true: { base: "uy:bg-surface-neutral-enabled uy:shadow-raising" }
-    },
-    isLoading: {
-      true: {
-        base: "uy:bg-surface-neutral-disabled uy:cursor-not-allowed",
-        wrapper: "uy:text-content-inverted-disabled"
-      }
-    },
-    isFocusVisible: {
-      true: {
-        base: "uy:outline-none uy:ring-2 uy:ring-ring uy:ring-offset-2 uy:ring-utility-focus-ring"
-      }
-    },
-    hasPrefixIcon: { true: "", false: "" }
-  },
-  compoundVariants: [
-    {
-      isLoading: !1,
-      isSelected: !1,
-      className: {
-        base: "uy:hover:bg-surface-neutral-hover",
-        wrapper: "uy:text-content-neutral-enabled uy:group-hover:text-content-neutral-hover"
-      }
-    },
-    {
-      isLoading: !0,
-      hasPrefixIcon: !1,
-      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
-    },
-    {
-      isLoading: !0,
-      hasPrefixIcon: !0,
-      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
-    },
-    {
-      isLoading: !1,
-      hasPrefixIcon: !1,
-      className: { base: "uy:pl-150 uy:cursor-pointer" }
-    },
-    {
-      isLoading: !1,
-      hasPrefixIcon: !0,
-      className: { base: "uy:pl-50 uy:cursor-pointer" }
-    }
-  ],
-  defaultVariants: {
-    isSelected: !1,
-    isLoading: !1,
-    hasPrefixIcon: !1
-  }
-}), C = ({
-  intl: t,
-  children: a,
-  isLoading: n,
-  prefixIcon: e,
-  isSelected: r
-}) => n ? /* @__PURE__ */ s(
-  R,
-  {
-    label: t.formatMessage({
-      id: "unity:component:common:loading:label",
-      defaultMessage: "Loading..."
-    }),
-    color: "inherit",
-    size: "small"
-  }
-) : /* @__PURE__ */ c(b, { children: [
-  e ? /* @__PURE__ */ s(
-    F,
-    {
-      src: r ? `${e}Filled` : `${e}Outlined`,
-      color: r ? "content.neutral" : "content.neutral.low",
-      role: "presentation"
-    }
-  ) : null,
-  a
-] }), T = h(
-  (t, a) => {
-    const { children: n, value: e, prefixIcon: r, isLoading: o } = t, { state: u } = x(S), i = v(null), { inputProps: d } = I(t, u, i), { focusProps: p, isFocusVisible: f } = L(), y = V(), l = u.selectedValue === e, { base: m, wrapper: g } = B({
-      isSelected: l,
-      hasPrefixIcon: !!r,
-      isLoading: o,
-      isFocusVisible: f
-    });
-    return /* @__PURE__ */ c("label", { ref: a, className: m(), "aria-disabled": o, children: [
-      /* @__PURE__ */ s(N, { children: /* @__PURE__ */ s(
-        "input",
-        {
-          ...P(d, p),
-          ref: i,
-          disabled: o
-        }
-      ) }),
-      /* @__PURE__ */ s("span", { className: g(), children: C({ intl: y, children: n, isLoading: o, isSelected: l, prefixIcon: r }) })
-    ] });
-  }
-);
-T.displayName = "ToggleButton";
-export {
-  T as ToggleButton
-};
+import { Icon as e } from "../../icon/Icon.js";
+import { Spinner as t } from "../../spinner/Spinner.js";
+import { SegmentedButtonGroupContext as n } from "../SegmentedButtonGroups.context.js";
+import { forwardRef as r, useContext as i, useRef as a } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import { mergeProps as d } from "react-aria/mergeProps";
+import { useRadio as f } from "react-aria/useRadioGroup";
+import { useFocusRing as p } from "react-aria/useFocusRing";
+import { VisuallyHidden as m } from "react-aria/VisuallyHidden";
+//#region src/components/segmented-button-group/parts/ToggleButton.tsx
+var h = o({
+	slots: {
+		base: ["uy:group uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25 uy:h-400", "uy:active:gb-surface-neutral-pressed"],
+		wrapper: ["uy:flex uy:gap-50 uy:items-center uy:typography-action", "uy:active:text-content-neutral-pressed"]
+	},
+	variants: {
+		isSelected: { true: { base: "uy:bg-surface-neutral-enabled uy:shadow-raising" } },
+		isLoading: { true: {
+			base: "uy:bg-surface-neutral-disabled uy:cursor-not-allowed",
+			wrapper: "uy:text-content-inverted-disabled"
+		} },
+		isFocusVisible: { true: { base: "uy:outline-none uy:ring-2 uy:ring-ring uy:ring-offset-2 uy:ring-utility-focus-ring" } },
+		hasPrefixIcon: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			isLoading: !1,
+			isSelected: !1,
+			className: {
+				base: "uy:hover:bg-surface-neutral-hover",
+				wrapper: "uy:text-content-neutral-enabled uy:group-hover:text-content-neutral-hover"
+			}
+		},
+		{
+			isLoading: !0,
+			hasPrefixIcon: !1,
+			className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+		},
+		{
+			isLoading: !0,
+			hasPrefixIcon: !0,
+			className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+		},
+		{
+			isLoading: !1,
+			hasPrefixIcon: !1,
+			className: { base: "uy:pl-150 uy:cursor-pointer" }
+		},
+		{
+			isLoading: !1,
+			hasPrefixIcon: !0,
+			className: { base: "uy:pl-50 uy:cursor-pointer" }
+		}
+	],
+	defaultVariants: {
+		isSelected: !1,
+		isLoading: !1,
+		hasPrefixIcon: !1
+	}
+}), g = ({ intl: n, children: r, isLoading: i, prefixIcon: a, isSelected: o }) => i ? /* @__PURE__ */ c(t, {
+	label: n.formatMessage({
+		id: "unity:component:common:loading:label",
+		defaultMessage: "Loading..."
+	}),
+	color: "inherit",
+	size: "small"
+}) : /* @__PURE__ */ l(s, { children: [a ? /* @__PURE__ */ c(e, {
+	src: o ? `${a}Filled` : `${a}Outlined`,
+	color: o ? "content.neutral" : "content.neutral.low",
+	role: "presentation"
+}) : null, r] }), _ = r((e, t) => {
+	let { children: r, value: o, prefixIcon: s, isLoading: _ } = e, { state: v } = i(n), y = a(null), { inputProps: b } = f(e, v, y), { focusProps: x, isFocusVisible: S } = p(), C = u(), w = v.selectedValue === o, { base: T, wrapper: E } = h({
+		isSelected: w,
+		hasPrefixIcon: !!s,
+		isLoading: _,
+		isFocusVisible: S
+	});
+	return /* @__PURE__ */ l("label", {
+		ref: t,
+		className: T(),
+		"aria-disabled": _,
+		children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c("input", {
+			...d(b, x),
+			ref: y,
+			disabled: _
+		}) }), /* @__PURE__ */ c("span", {
+			className: E(),
+			children: g({
+				intl: C,
+				children: r,
+				isLoading: _,
+				isSelected: w,
+				prefixIcon: s
+			})
+		})]
+	});
+});
+_.displayName = "ToggleButton";
+//#endregion
+export { _ as ToggleButton };

package/dist/esm/components/select/Select.js

@@ -1,131 +1,86 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { forwardRef as C, useState as F, useMemo as k } from "react";
-import { uyTv as A } from "@payfit/unity-themes";
-import { useFilter as I, Autocomplete as T } from "react-aria-components/Autocomplete";
-import { Select as U, Popover as V, ListBox as m } from "react-aria-components/Select";
-import { Separator as $ } from "react-aria-components/Separator";
-import { Virtualizer as y, ListLayout as f } from "react-aria-components/Virtualizer";
-import { useIntl as q } from "react-intl";
-import { Search as G } from "../search/Search.js";
-import { SelectButton as H } from "./parts/SelectButton.js";
-const J = A({
-  slots: {
-    base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-    popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
-    listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
-  }
-}), K = ({
-  children: r,
-  items: t,
-  placeholder: s,
-  isDisabled: l,
-  isInvalid: a,
-  isReadOnly: i,
-  value: n,
-  defaultValue: b,
-  onChange: u,
-  isSearchable: h = !1,
-  onBlur: v,
-  placement: x,
-  searchInputAriaLabel: S,
-  renderEmptyState: e,
-  renderValue: g,
-  ...N
-}, w) => {
-  const O = q(), [L, M] = F(!1), { contains: P } = I({ sensitivity: "base" }), { base: j, popover: z, listbox: c } = J(), B = n !== void 0 || u !== void 0 ? {
-    value: n,
-    onChange: u
-  } : { defaultValue: b }, d = k(() => {
-    if (e !== void 0)
-      return typeof e == "function" ? e : () => e;
-  }, [e]);
-  return /* @__PURE__ */ p(
-    U,
-    {
-      onOpenChange: M,
-      ...N,
-      ref: w,
-      className: j(),
-      placeholder: l ? void 0 : s,
-      isDisabled: l || i,
-      isInvalid: a,
-      onBlur: v,
-      ...B,
-      children: [
-        /* @__PURE__ */ o(
-          H,
-          {
-            isDisabled: l,
-            isInvalid: a,
-            isReadOnly: i,
-            isOpen: L,
-            renderValue: g
-          }
-        ),
-        /* @__PURE__ */ o(
-          V,
-          {
-            offset: 1,
-            containerPadding: 8,
-            className: z(),
-            placement: x,
-            children: h ? /* @__PURE__ */ p(T, { filter: P, children: [
-              /* @__PURE__ */ o("div", { className: "uy:m-100", children: /* @__PURE__ */ o(
-                G,
-                {
-                  label: S ?? O.formatMessage({
-                    id: "unity:component:select:search:label",
-                    defaultMessage: "Search options"
-                  }),
-                  "data-dd-privacy": "mask"
-                }
-              ) }),
-              /* @__PURE__ */ o($, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
-              /* @__PURE__ */ o(
-                y,
-                {
-                  layout: f,
-                  layoutOptions: {
-                    padding: 8
-                  },
-                  children: /* @__PURE__ */ o(
-                    m,
-                    {
-                      items: t,
-                      className: c(),
-                      renderEmptyState: d,
-                      children: r
-                    }
-                  )
-                }
-              )
-            ] }) : /* @__PURE__ */ o(
-              y,
-              {
-                layout: f,
-                layoutOptions: {
-                  padding: 8
-                },
-                children: /* @__PURE__ */ o(
-                  m,
-                  {
-                    items: t,
-                    className: c(),
-                    renderEmptyState: d,
-                    children: r
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, Q = C(function(t, s) {
-  return K(t, s);
+import { Search as e } from "../search/Search.js";
+import { SelectButton as t } from "./parts/SelectButton.js";
+import { forwardRef as n, useMemo as r, useState as i } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useIntl as c } from "react-intl";
+import { Separator as l } from "react-aria-components/Separator";
+import { Autocomplete as u, useFilter as d } from "react-aria-components/Autocomplete";
+import { ListBox as f, Popover as p, Select as m } from "react-aria-components/Select";
+import { ListLayout as h, Virtualizer as g } from "react-aria-components/Virtualizer";
+//#region src/components/select/Select.tsx
+var _ = a({ slots: {
+	base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
+	popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
+	listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
+} }), v = ({ children: n, items: a, placeholder: v, isDisabled: y, isInvalid: b, isReadOnly: x, value: S, defaultValue: C, onChange: w, isSearchable: T = !1, onBlur: E, placement: D, searchInputAriaLabel: O, renderEmptyState: k, renderValue: A, ...j }, M) => {
+	let N = c(), [P, F] = i(!1), { contains: I } = d({ sensitivity: "base" }), { base: L, popover: R, listbox: z } = _(), B = S !== void 0 || w !== void 0 ? {
+		value: S,
+		onChange: w
+	} : { defaultValue: C }, V = r(() => {
+		if (k !== void 0) return typeof k == "function" ? k : () => k;
+	}, [k]);
+	return /* @__PURE__ */ s(m, {
+		onOpenChange: F,
+		...j,
+		ref: M,
+		className: L(),
+		placeholder: y ? void 0 : v,
+		isDisabled: y || x,
+		isInvalid: b,
+		onBlur: E,
+		...B,
+		children: [/* @__PURE__ */ o(t, {
+			isDisabled: y,
+			isInvalid: b,
+			isReadOnly: x,
+			isOpen: P,
+			renderValue: A
+		}), /* @__PURE__ */ o(p, {
+			offset: 1,
+			containerPadding: 8,
+			className: R(),
+			placement: D,
+			children: T ? /* @__PURE__ */ s(u, {
+				filter: I,
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "uy:m-100",
+						children: /* @__PURE__ */ o(e, {
+							label: O ?? N.formatMessage({
+								id: "unity:component:select:search:label",
+								defaultMessage: "Search options"
+							}),
+							"data-dd-privacy": "mask"
+						})
+					}),
+					/* @__PURE__ */ o(l, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
+					/* @__PURE__ */ o(g, {
+						layout: h,
+						layoutOptions: { padding: 8 },
+						children: /* @__PURE__ */ o(f, {
+							items: a,
+							className: z(),
+							renderEmptyState: V,
+							children: n
+						})
+					})
+				]
+			}) : /* @__PURE__ */ o(g, {
+				layout: h,
+				layoutOptions: { padding: 8 },
+				children: /* @__PURE__ */ o(f, {
+					items: a,
+					className: z(),
+					renderEmptyState: V,
+					children: n
+				})
+			})
+		})]
+	});
+}, y = n(function(e, t) {
+	return v(e, t);
 });
-Q.displayName = "Select";
-export {
-  Q as Select
-};
+y.displayName = "Select";
+//#endregion
+export { y as Select };

package/dist/esm/components/select/TanstackSelect.js

@@ -1,41 +1,32 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { useFieldContext as u } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
-import { Select as b } from "./Select.js";
-const h = ({
-  onBlur: o,
-  isReadOnly: a,
-  isDisabled: l,
-  renderValue: r,
-  ...s
-}, c) => {
-  const e = u(), t = p(), d = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-  return /* @__PURE__ */ m(
-    b,
-    {
-      ...s,
-      ref: c,
-      value: e.state.value ?? "",
-      onChange: (n) => {
-        e.handleChange(n);
-      },
-      onBlur: (n) => {
-        e.handleBlur(), o?.(n);
-      },
-      isReadOnly: a,
-      isDisabled: l,
-      isInvalid: d,
-      "aria-labelledby": t.labelId,
-      "aria-describedby": i.length > 0 ? i : void 0,
-      "aria-details": t.contextualLinkId,
-      renderValue: r
-    }
-  );
-}, x = f(function(a, l) {
-  return h(a, l);
+import { Select as e } from "./Select.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/select/TanstackSelect.tsx
+var a = ({ onBlur: r, isReadOnly: a, isDisabled: o, renderValue: s, ...c }, l) => {
+	let u = t(), d = n(), f = u.state.meta.isTouched && !u.state.meta.isValid, p = [d.helperTextId, d.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...c,
+		ref: l,
+		value: u.state.value ?? "",
+		onChange: (e) => {
+			u.handleChange(e);
+		},
+		onBlur: (e) => {
+			u.handleBlur(), r?.(e);
+		},
+		isReadOnly: a,
+		isDisabled: o,
+		isInvalid: f,
+		"aria-labelledby": d.labelId,
+		"aria-describedby": p.length > 0 ? p : void 0,
+		"aria-details": d.contextualLinkId,
+		renderValue: s
+	});
+}, o = r(function(e, t) {
+	return a(e, t);
 });
-x.displayName = "TanstackSelect";
-export {
-  x as TanstackSelect
-};
+o.displayName = "TanstackSelect";
+//#endregion
+export { o as TanstackSelect };