@payfit/unity-components 1.2.0 → 2.1.4

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

@@ -1,78 +1,104 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { forwardRef as P, useState as j } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useFilter as F, Select as K, Popover as O, Autocomplete as A, ListBox as i } from "react-aria-components";
-import { SearchInput as I } from "./parts/SearchInput.js";
-import { SelectButton as L } from "./parts/SelectButton.js";
-const T = B({
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as B, useState as C } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFilter as I, Select as M, Popover as z, Autocomplete as A, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
+import { useIntl as T } from "react-intl";
+import { SearchInput as U } from "./parts/SearchInput.js";
+import { SelectButton as V } from "./parts/SelectButton.js";
+const $ = F({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-    popover: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
-    listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100 uy:pl-100 uy:pr-100"
+    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",
+    listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
   }
-}), U = ({
+}), k = ({
   children: t,
   items: o,
   placeholder: r,
-  name: d,
-  isDisabled: l,
-  isInvalid: s,
-  isReadOnly: c,
-  value: n,
-  defaultValue: y,
-  onChange: u,
+  isDisabled: s,
+  isInvalid: l,
+  isReadOnly: n,
+  value: a,
+  defaultValue: m,
+  onChange: i,
   isSearchable: f = !1,
-  onBlur: m,
-  placement: S,
-  ...b
-}, x) => {
-  const [v, h] = j(!1), { contains: g } = F({ sensitivity: "base" }), { base: w, popover: N, listbox: a } = T(), C = n !== void 0 || u !== void 0 ? {
-    selectedKey: n,
-    onSelectionChange: u
-  } : { defaultSelectedKey: y };
-  return /* @__PURE__ */ p(
-    K,
+  onBlur: b,
+  placement: h,
+  searchInputAriaLabel: x,
+  ...S
+}, g) => {
+  const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = a !== void 0 || i !== void 0 ? {
+    value: a,
+    onChange: i
+  } : { defaultValue: m };
+  return /* @__PURE__ */ c(
+    M,
     {
-      onOpenChange: h,
-      ...b,
-      ref: x,
-      className: w(),
-      name: d,
-      placeholder: l ? void 0 : r,
-      isDisabled: l || c,
-      isInvalid: s,
-      onBlur: m,
-      ...C,
+      onOpenChange: N,
+      ...S,
+      ref: g,
+      className: L(),
+      placeholder: s ? void 0 : r,
+      isDisabled: s || n,
+      isInvalid: l,
+      onBlur: b,
+      ...j,
       children: [
         /* @__PURE__ */ e(
-          L,
+          V,
           {
-            isDisabled: l,
-            isInvalid: s,
-            isReadOnly: c,
-            isOpen: v
+            isDisabled: s,
+            isInvalid: l,
+            isReadOnly: n,
+            isOpen: w
           }
         ),
         /* @__PURE__ */ e(
-          O,
+          z,
           {
             offset: 1,
             containerPadding: 8,
-            className: N(),
-            placement: S,
-            children: f ? /* @__PURE__ */ p(A, { filter: g, children: [
-              /* @__PURE__ */ e(I, {}),
-              /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
-            ] }) : /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
+            className: P(),
+            placement: h,
+            children: f ? /* @__PURE__ */ c(A, { filter: O, children: [
+              /* @__PURE__ */ e(
+                U,
+                {
+                  "aria-label": x ?? v.formatMessage({
+                    id: "unity:component:select:search:label",
+                    defaultMessage: "Search options"
+                  })
+                }
+              ),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  layout: d,
+                  layoutOptions: {
+                    padding: 8
+                  },
+                  children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
+                }
+              )
+            ] }) : /* @__PURE__ */ e(
+              p,
+              {
+                layout: d,
+                layoutOptions: {
+                  padding: 8
+                },
+                children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
+              }
+            )
           }
         )
       ]
     }
   );
-}, $ = P(function(o, r) {
-  return U(o, r);
+}, q = B(function(o, r) {
+  return k(o, r);
 });
-$.displayName = "Select";
+q.displayName = "Select";
 export {
-  $ as Select
+  q as Select
 };

package/dist/esm/components/select/TanstackSelect.d.ts

@@ -0,0 +1,80 @@
+import { ForwardedRef, JSX } from 'react';
+import { SelectProps } from './Select.js';
+export type TanstackSelectProps<T extends object> = Omit<SelectProps<T>, 'value' | 'defaultValue' | 'onChange' | 'isInvalid' | 'name'>;
+type TanstackSelectComponent = (<TItems extends object>(props: TanstackSelectProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * `TanstackSelect` is a controlled select component wired to the TanStack Form field context.
+ * It is based on the Unity `Select` component.
+ *
+ * The component supports both static and dynamic options, search functionality, and grouping.
+ * It manages field state via the TanStack Form context, including validation and accessibility.
+ *
+ * Example (static options):
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * function ExampleField() {
+ *   const schema = z.object({
+ *     fruit: z.string().min(1, 'Please select a fruit'),
+ *   })
+ *
+ *   const form = useTanstackUnityForm({
+ *     validators: { onBlur: schema },
+ *     defaultValues: { fruit: '' }
+ *   })
+ *
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruit">
+ *         {() => (
+ *           <TanstackSelect placeholder="Choose a fruit">
+ *             <SelectOption id="Apple">Apple</SelectOption>
+ *             <SelectOption id="Banana">Banana</SelectOption>
+ *             <SelectOption id="Orange">Orange</SelectOption>
+ *           </TanstackSelect>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ *
+ * Example (dynamic items):
+ * ```tsx
+ * function ExampleWithDynamicItems() {
+ *   const items = [
+ *     { id: 'Apple', name: 'Apple' },
+ *     { id: 'Banana', name: 'Banana' },
+ *     { id: 'Orange', name: 'Orange' },
+ *   ]
+ *
+ *   const form = useTanstackUnityForm({
+ *     validators: {},
+ *     defaultValues: { fruit: '' }
+ *   })
+ *
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruit">
+ *         {() => (
+ *           <form.Select items={items}>
+ *             {item => <SelectOption id={item.id}>{item.name}</SelectOption>}
+ *           </form.Select>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `Select` (non-TanStack):
+ * - Do not pass `value`, `defaultValue`, `onChange`, or `name` props: these are managed by the TanStack form context.
+ * - `isInvalid` is automatically derived from the field's validation state.
+ * - Use within `<form.AppField name="...">` to connect to the form state.
+ */
+declare const TanstackSelect: TanstackSelectComponent;
+export { TanstackSelect };

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

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

package/dist/esm/components/select/parts/SearchInput.d.ts

@@ -1,2 +1,5 @@
-declare const SearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export interface SearchInputProps {
+    'aria-label': string;
+}
+declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SearchInput };

package/dist/esm/components/select/parts/SearchInput.js

@@ -1,40 +1,58 @@
-import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
+import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import { uyTv as m } from "@payfit/unity-themes";
-import { SearchField as y, Input as c } from "react-aria-components";
-import { useIntl as d } from "react-intl";
-import { CircularIconButton as p } from "../../icon-button/CircularIconButton.js";
-import { Icon as f } from "../../icon/Icon.js";
-const b = m({
+import { SearchField as y, Input as d } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { CircularIconButton as f } from "../../icon-button/CircularIconButton.js";
+import { Icon as b } from "../../icon/Icon.js";
+const h = m({
   slots: {
-    base: "uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-active uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body",
-    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+    base: "uy:flex uy:gap-100 uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body uy:focus-within:border uy:focus-within:border-solid uy:focus-within:border-border-form-active",
+    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden uy:min-h-300",
     button: "uy:text-content-neutral-enabled",
     separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100"
   }
-}), h = l((g, r) => {
-  const o = d(), { base: u, input: a, button: n, separator: s } = b();
-  return /* @__PURE__ */ e(i, { children: [
-    /* @__PURE__ */ e(y, { className: u(), ref: r, "data-dd-privacy": "mask", children: [
-      /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ t(c, { className: a() }),
-      /* @__PURE__ */ t(
-        p,
+}), g = c(
+  ({ "aria-label": r }, o) => {
+    const a = p(), { base: u, input: n, button: i, separator: s } = h();
+    return /* @__PURE__ */ e(l, { children: [
+      /* @__PURE__ */ e(
+        y,
         {
-          title: o.formatMessage({
-            id: "unity:component:common:clear:title",
-            defaultMessage: "Clear"
-          }),
-          className: n(),
-          icon: "CloseOutlined",
-          asElement: "button"
+          className: u(),
+          ref: o,
+          "data-dd-privacy": "mask",
+          "aria-label": r,
+          children: [
+            /* @__PURE__ */ t(
+              b,
+              {
+                src: "MagnifyingGlassOutlined",
+                "aria-hidden": "true",
+                color: "content.neutral.lowest"
+              }
+            ),
+            /* @__PURE__ */ t(d, { className: n() }),
+            /* @__PURE__ */ t(
+              f,
+              {
+                title: a.formatMessage({
+                  id: "unity:component:common:clear:title",
+                  defaultMessage: "Clear"
+                }),
+                className: i(),
+                icon: "CloseOutlined",
+                asElement: "button"
+              }
+            )
+          ]
         }
-      )
-    ] }),
-    /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
-  ] });
-});
-h.displayName = "SearchInput";
+      ),
+      /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
+    ] });
+  }
+);
+g.displayName = "SearchInput";
 export {
-  h as SearchInput
+  g as SearchInput
 };

package/dist/esm/components/select/parts/SelectButton.js

@@ -1,12 +1,12 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { Button as m, SelectValue as p } from "react-aria-components";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Button as b, SelectValue as p } from "react-aria-components";
 import { useIntl as v } from "react-intl";
 import { Icon as a } from "../../icon/Icon.js";
-const x = b({
+const x = m({
   slots: {
-    base: "uy:flex uy:flex-row uy:gap-100 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
+    base: "uy:flex uy:flex-row uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
     selectValue: [
       "uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden",
       "uy:data-[placeholder]:text-content-neutral-lowest"
@@ -18,7 +18,8 @@ const x = b({
     isDisabled: {
       true: {
         base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        selectValue: "uy:text-content-form-disabled"
+        selectValue: "uy:text-content-form-disabled",
+        icon: "uy:text-content-form-disabled"
       }
     },
     isInvalid: {
@@ -28,7 +29,7 @@ const x = b({
     },
     isReadOnly: {
       true: {
-        base: "uy:border-border-form-disabled",
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
         selectValue: "uy:text-content-form-readonly",
         icon: "uy:text-content-primary-disabled"
       }
@@ -51,23 +52,24 @@ const x = b({
     isInvalid: !1,
     isReadOnly: !1
   }
-}), g = f(
-  ({ isDisabled: r, isInvalid: o, isReadOnly: l, isOpen: s }, u) => {
-    const n = v(), { base: i, selectValue: d, iconWrapper: c, icon: y } = x({
+}), h = f(
+  ({ isDisabled: r, isInvalid: o, isReadOnly: s, isOpen: u }, l) => {
+    const n = v(), { base: i, selectValue: d, iconWrapper: y, icon: c } = x({
       isDisabled: r,
       isInvalid: o,
-      isReadOnly: l
+      isReadOnly: s
     });
     return /* @__PURE__ */ t(
-      m,
+      b,
       {
         "data-dd-privacy": "mask",
         className: i(),
-        ref: u,
+        ref: l,
         isDisabled: r,
+        "data-unity-slot": "select-button",
         children: [
           /* @__PURE__ */ e(p, { className: d() }),
-          /* @__PURE__ */ t("div", { className: c(), children: [
+          /* @__PURE__ */ t("div", { className: y(), children: [
             o && /* @__PURE__ */ e(
               a,
               {
@@ -82,9 +84,9 @@ const x = b({
             /* @__PURE__ */ e(
               a,
               {
-                className: y(),
+                className: c(),
                 "aria-hidden": "true",
-                src: s ? "CaretUpOutlined" : "CaretDownOutlined"
+                src: u ? "CaretUpOutlined" : "CaretDownOutlined"
               }
             )
           ] })
@@ -93,7 +95,7 @@ const x = b({
     );
   }
 );
-g.displayName = "SelectButton";
+h.displayName = "SelectButton";
 export {
-  g as SelectButton
+  h as SelectButton
 };

package/dist/esm/components/select/parts/SelectOption.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as d, Fragment as i } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { jsx as e, jsxs as y, Fragment as i } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
 import { uyTv as f } from "@payfit/unity-themes";
-import { ListBoxItem as m } from "react-aria-components";
-import { Icon as p } from "../../icon/Icon.js";
+import { ListBoxItem as p } from "react-aria-components";
+import { Icon as m } from "../../icon/Icon.js";
 import { SelectOptionProvider as b } from "./SelectOption.context.js";
 const x = f({
-  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none",
+  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
   variants: {
     isFocusVisible: {
       true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring"
@@ -33,11 +33,11 @@ const x = f({
       class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
     }
   ]
-}), v = y(
+}), v = d(
   (s, l) => {
     const { children: u, isDisabled: r, textValue: n } = s;
     return /* @__PURE__ */ e(
-      m,
+      p,
       {
         ...s,
         ref: l,
@@ -50,9 +50,9 @@ const x = f({
           isSelected: c,
           isDisabled: r
         }),
-        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ d("div", { className: "uy:flex uy:justify-between", children: [
+        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ y("div", { className: "uy:flex uy:justify-between", children: [
           /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col", children: /* @__PURE__ */ e(i, { children: u }) }),
-          /* @__PURE__ */ e(p, { src: "CheckOutlined" })
+          /* @__PURE__ */ e(m, { src: "CheckOutlined" })
         ] }) : /* @__PURE__ */ e(i, { children: u }) })
       }
     );

package/dist/esm/components/select-field/SelectField.d.ts

@@ -45,6 +45,8 @@ type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(pro
  * }
  * ```
  * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const SelectField: SelectFieldComponent;
 export { SelectField };

package/dist/esm/components/select-field/SelectField.js

@@ -11,12 +11,12 @@ import { Select as k } from "../select/Select.js";
 const v = h({
   base: "uy:flex uy:flex-col uy:gap-100"
 }), w = ({
-  children: t,
+  children: m,
   feedbackText: e,
   helperText: r,
-  isRequired: l,
-  label: i,
-  name: m,
+  isRequired: t,
+  label: l,
+  name: i,
   requiredVariant: c,
   isDisabled: n,
   isInvalid: f,
@@ -26,7 +26,7 @@ const v = h({
   ...F
 }, a) => {
   const { control: u } = b(), x = {
-    isRequired: l,
+    isRequired: t,
     isInvalid: f,
     isDisabled: n,
     isReadOnly: p
@@ -35,21 +35,20 @@ const v = h({
     j,
     {
       control: u,
-      name: m,
+      name: i,
       className: v(),
       ...x,
       children: [
-        /* @__PURE__ */ o(g, { requiredVariant: c, children: i }),
+        /* @__PURE__ */ o(g, { requiredVariant: c, children: l }),
         r && /* @__PURE__ */ o(T, { children: r }),
         /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
           k,
           {
             ref: a,
-            name: m,
             placeholder: s,
             items: d,
             ...F,
-            children: t
+            children: m
           }
         ) }),
         /* @__PURE__ */ o(N, { children: e })