@payfit/unity-components 2.7.0 → 2.7.1

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

@@ -20,6 +20,23 @@ export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>,
     placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
     /** The aria-label for the search input when isSearchable is true */
     searchInputAriaLabel?: string;
+    /**
+     * Custom content to render when the listbox has no options to display.
+     * This can occur when `items` is empty or when search filtering returns no results.
+     * If not provided, the listbox will appear empty.
+     * @example
+     * ```tsx
+     * <Select
+     *   items={[]}
+     *   renderEmptyState={
+     *     <EmptyStateNoSearchResults description="No options available" />
+     *   }
+     * >
+     *   {item => <SelectOption>{item.name}</SelectOption>}
+     * </Select>
+     * ```
+     */
+    renderEmptyState?: ReactNode | (() => ReactNode);
     /** Custom render function to format the selected value display */
     renderValue?: (value: Node<T>) => ReactNode;
 }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "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.7.0",
+    "@payfit/unity-illustrations": "2.7.1",
     "@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.7.0",
-    "@payfit/unity-themes": "2.7.0",
+    "@payfit/unity-icons": "2.7.1",
+    "@payfit/unity-themes": "2.7.1",
     "@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.7.0",
-    "@payfit/unity-illustrations": "2.7.0",
-    "@payfit/unity-themes": "2.7.0",
+    "@payfit/unity-icons": "2.7.1",
+    "@payfit/unity-illustrations": "2.7.1",
+    "@payfit/unity-themes": "2.7.1",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.7",
     "@storybook/addon-docs": "10.2.7",