@payfit/unity-components 2.6.0 → 2.7.0

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

@@ -1,3 +1,4 @@
+import { Node } from '@react-types/shared';
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
 export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> {
@@ -17,7 +18,10 @@ export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>,
     isSearchable?: boolean;
     /** The placement of the popover */
     placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
+    /** The aria-label for the search input when isSearchable is true */
     searchInputAriaLabel?: string;
+    /** Custom render function to format the selected value display */
+    renderValue?: (value: Node<T>) => ReactNode;
 }
 type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
     ref?: ForwardedRef<HTMLDivElement>;

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

@@ -1,17 +1,17 @@
 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({
+import { forwardRef as C, useState as F } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFilter as M, Select as z, Popover as A, Autocomplete as T, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
+import { useIntl as U } from "react-intl";
+import { SearchInput as V } from "./parts/SearchInput.js";
+import { SelectButton as $ } from "./parts/SelectButton.js";
+const k = I({
   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 = ({
+}), q = ({
   children: t,
   items: o,
   placeholder: r,
@@ -25,46 +25,48 @@ const $ = F({
   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 = n !== void 0 || i !== void 0 ? {
+  renderValue: S,
+  ...g
+}, v) => {
+  const w = U(), [N, O] = F(!1), { contains: L } = M({ sensitivity: "base" }), { base: P, popover: j, listbox: u } = k(), B = n !== void 0 || i !== void 0 ? {
     value: n,
     onChange: i
   } : { defaultValue: m };
   return /* @__PURE__ */ c(
-    M,
+    z,
     {
-      onOpenChange: N,
-      ...S,
-      ref: g,
-      className: L(),
+      onOpenChange: O,
+      ...g,
+      ref: v,
+      className: P(),
       placeholder: s ? void 0 : r,
       isDisabled: s || a,
       isInvalid: l,
       onBlur: b,
-      ...j,
+      ...B,
       children: [
         /* @__PURE__ */ e(
-          V,
+          $,
           {
             isDisabled: s,
             isInvalid: l,
             isReadOnly: a,
-            isOpen: w
+            isOpen: N,
+            renderValue: S
           }
         ),
         /* @__PURE__ */ e(
-          z,
+          A,
           {
             offset: 1,
             containerPadding: 8,
-            className: P(),
+            className: j(),
             placement: h,
-            children: f ? /* @__PURE__ */ c(A, { filter: O, children: [
+            children: f ? /* @__PURE__ */ c(T, { filter: L, children: [
               /* @__PURE__ */ e(
-                U,
+                V,
                 {
-                  "aria-label": x ?? v.formatMessage({
+                  "aria-label": x ?? w.formatMessage({
                     id: "unity:component:select:search:label",
                     defaultMessage: "Search options"
                   })
@@ -95,10 +97,10 @@ const $ = F({
       ]
     }
   );
-}, q = B(function(o, r) {
-  return k(o, r);
+}, E = C(function(o, r) {
+  return q(o, r);
 });
-q.displayName = "Select";
+E.displayName = "Select";
 export {
-  q as Select
+  E as Select
 };

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

@@ -1,15 +1,21 @@
-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,
+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,
     {
-      ...r,
-      ref: s,
+      ...s,
+      ref: c,
       value: e.state.value ?? "",
       onChange: (n) => {
         e.handleChange(n);
@@ -19,16 +25,17 @@ const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
       },
       isReadOnly: a,
       isDisabled: l,
-      isInvalid: c,
+      isInvalid: d,
       "aria-labelledby": t.labelId,
       "aria-describedby": i.length > 0 ? i : void 0,
-      "aria-details": t.contextualLinkId
+      "aria-details": t.contextualLinkId,
+      renderValue: r
     }
   );
-}, h = m(function(a, l) {
-  return b(a, l);
+}, x = f(function(a, l) {
+  return h(a, l);
 });
-h.displayName = "TanstackSelect";
+x.displayName = "TanstackSelect";
 export {
-  h as TanstackSelect
+  x as TanstackSelect
 };

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

@@ -1,8 +1,19 @@
-export interface SelectButtonProps {
+import { Node } from '@react-types/shared';
+import { ReactNode } from 'react';
+export interface SelectButtonProps<T extends object> {
+    /** Whether the button is disabled */
     isDisabled?: boolean;
+    /** Whether the button is in an invalid state */
     isInvalid?: boolean;
+    /** Whether the button is read-only */
     isReadOnly?: boolean;
+    /** Whether the select popover is currently open */
     isOpen: boolean;
+    /** Custom render function to format the selected value display */
+    renderValue?: (selectedItem: Node<T>) => ReactNode;
 }
-declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SelectButton: {
+    <T extends object>({ isDisabled, isInvalid, isReadOnly, isOpen, renderValue, }: SelectButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { SelectButton };

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

@@ -1,10 +1,9 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { Button as b, SelectValue as p } from "react-aria-components";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Button as p, SelectValue as n } from "react-aria-components";
 import { useIntl as v } from "react-intl";
-import { Icon as a } from "../../icon/Icon.js";
-const x = m({
+import { Icon as u } from "../../icon/Icon.js";
+const x = b({
   slots: {
     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: [
@@ -52,49 +51,52 @@ const x = m({
     isInvalid: !1,
     isReadOnly: !1
   }
-}), h = f(
-  ({ isDisabled: r, isInvalid: t, isReadOnly: s, isOpen: u }, l) => {
-    const n = v(), { base: i, selectValue: d, iconWrapper: y, icon: c } = x({
+}), h = ({
+  isDisabled: r,
+  isInvalid: t,
+  isReadOnly: i,
+  isOpen: d,
+  renderValue: o
+}) => {
+  const c = v(), { base: y, selectValue: a, iconWrapper: f, icon: m } = x({
+    isDisabled: r,
+    isInvalid: t,
+    isReadOnly: i
+  });
+  return /* @__PURE__ */ l(
+    p,
+    {
+      "data-dd-privacy": "mask",
+      className: y(),
       isDisabled: r,
-      isInvalid: t,
-      isReadOnly: s
-    });
-    return /* @__PURE__ */ o(
-      b,
-      {
-        "data-dd-privacy": "mask",
-        className: i(),
-        ref: l,
-        isDisabled: r,
-        "data-unity-slot": "select-button",
-        children: [
-          /* @__PURE__ */ e(p, { className: d(), translate: "no" }),
-          /* @__PURE__ */ o("div", { className: y(), children: [
-            t && /* @__PURE__ */ e(
-              a,
-              {
-                src: "WarningCircleOutlined",
-                color: "content.form.invalid",
-                alt: n.formatMessage({
-                  id: "unity:component:form-field:form-input:error:alt",
-                  defaultMessage: "Error"
-                })
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                className: c(),
-                "aria-hidden": "true",
-                src: u ? "CaretUpOutlined" : "CaretDownOutlined"
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
+      "data-unity-slot": "select-button",
+      children: [
+        o ? /* @__PURE__ */ e(n, { className: a(), translate: "no", children: ({ state: s }) => s.selectedItems[0] ? o(s.selectedItems[0]) : null }) : /* @__PURE__ */ e(n, { className: a(), translate: "no" }),
+        /* @__PURE__ */ l("div", { className: f(), children: [
+          t && /* @__PURE__ */ e(
+            u,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: c.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          /* @__PURE__ */ e(
+            u,
+            {
+              className: m(),
+              "aria-hidden": "true",
+              src: d ? "CaretUpOutlined" : "CaretDownOutlined"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 h.displayName = "SelectButton";
 export {
   h as SelectButton

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

@@ -1,11 +1,11 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { TanstackFormFeedbackText as f } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as k } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as p } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as F } from "../form-field/TanstackFormField.js";
-import { TanstackSelect as T } from "../select/TanstackSelect.js";
-const S = ({
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { TanstackFormFeedbackText as k } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as F } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as T } from "../form-field/TanstackFormField.js";
+import { TanstackSelect as S } from "../select/TanstackSelect.js";
+const x = ({
   label: a,
   helperText: t,
   contextualLink: e,
@@ -13,32 +13,34 @@ const S = ({
   isDisabled: c,
   isReadOnly: m,
   requiredVariant: n,
-  ...i
-}, l) => /* @__PURE__ */ s(F, { children: [
+  renderValue: i,
+  ...l
+}, s) => /* @__PURE__ */ d(T, { children: [
   /* @__PURE__ */ r(
-    p,
+    F,
     {
       requiredVariant: n,
       isRequired: o,
       children: a
     }
   ),
-  t && /* @__PURE__ */ r(k, { children: t }),
+  t && /* @__PURE__ */ r(p, { children: t }),
   /* @__PURE__ */ r(
-    T,
+    S,
     {
-      ref: l,
+      ref: s,
       isDisabled: c,
       isReadOnly: m,
-      ...i
+      renderValue: i,
+      ...l
     }
   ),
-  /* @__PURE__ */ r(f, {}),
+  /* @__PURE__ */ r(k, {}),
   e
-] }), x = d(function(t, e) {
-  return S(t, e);
+] }), u = f(function(t, e) {
+  return x(t, e);
 });
-x.displayName = "TanstackSelectField";
+u.displayName = "TanstackSelectField";
 export {
-  x as TanstackSelectField
+  u as TanstackSelectField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.11.0",
-    "@payfit/unity-illustrations": "2.6.0",
+    "@payfit/unity-illustrations": "2.7.0",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.27.0",
@@ -71,8 +71,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.6.0",
-    "@payfit/unity-themes": "2.6.0",
+    "@payfit/unity-icons": "2.7.0",
+    "@payfit/unity-themes": "2.7.0",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -91,9 +91,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.6.0",
-    "@payfit/unity-illustrations": "2.6.0",
-    "@payfit/unity-themes": "2.6.0",
+    "@payfit/unity-icons": "2.7.0",
+    "@payfit/unity-illustrations": "2.7.0",
+    "@payfit/unity-themes": "2.7.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.7",
     "@storybook/addon-docs": "10.2.7",