@payfit/unity-components 3.22.15 → 3.22.17

package/dist/esm/core/components/select-list/SelectList.d.ts

@@ -32,6 +32,12 @@ export interface SelectListProps<TType extends object = object> extends Omit<Ari
      * Does not replace the translated accessible search label.
      */
     searchPlaceholder?: string;
+    /**
+     * Focus the search input when it mounts so users can start typing immediately.
+     * Applies only when search is visible and takes precedence over list `autoFocus`.
+     * @default false
+     */
+    searchAutoFocus?: boolean;
     /**
      * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
      */

package/dist/esm/core/components/select-list/SelectList.js

@@ -20,48 +20,52 @@ var v = c({ slots: {
 	list: "uy:overflow-y-auto uy:mt-100 uy:max-h-[300px]",
 	selectedListBox: "uy:bg-surface-neutral uy:border-b uy:border-border-neutral uy:py-100 uy:data-[empty=true]:border-0 uy:data-[is-last=true]:border-0 uy:data-[is-last=true]:py-0"
 } });
-function y({ items: o, children: c, value: y, onChange: b, className: x, showSearch: S = !1, searchPlaceholder: C, sortSelectedFirst: w = !1, selectedSectionLabel: T = "Selected", ...E }, D) {
-	let { contains: O } = g({ sensitivity: "base" }), { wrapper: k, inputContainer: A, list: j, separator: M, selectedListBox: N } = v(), [P, F] = t(y, b), I = s(() => (Array.isArray(o) ? o.length : Array.from(o).length) >= 10 || S, [o, S]), L = n(o, P, w), R = s(() => L.remainingItems ? !L.remainingItems[Symbol.iterator]().next().done : !1, [L.remainingItems]), z = /* @__PURE__ */ u(r, {
-		items: L.selectedItems,
-		selectedKeys: P,
-		onSelectionChange: F,
-		selectionMode: E.selectionMode,
-		selectionBehavior: E.selectionBehavior,
-		label: T,
-		className: N(),
-		"data-is-last": !R
-	}), B = /* @__PURE__ */ u(m, {
-		...E,
-		className: j({ className: x }),
-		items: L.remainingItems,
-		selectedKeys: P,
-		onSelectionChange: F,
+function y({ items: o, children: c, value: y, onChange: b, className: x, showSearch: S = !1, searchPlaceholder: C, searchAutoFocus: w = !1, sortSelectedFirst: T = !1, selectedSectionLabel: E = "Selected", ...D }, O) {
+	let { contains: k } = g({ sensitivity: "base" }), { wrapper: A, inputContainer: j, list: M, separator: N, selectedListBox: P } = v(), [F, I] = t(y, b), L = s(() => (Array.isArray(o) ? o.length : Array.from(o).length) >= 10 || S, [o, S]), R = n(o, F, T), z = s(() => R.remainingItems ? !R.remainingItems[Symbol.iterator]().next().done : !1, [R.remainingItems]), B = /* @__PURE__ */ u(r, {
+		items: R.selectedItems,
+		selectedKeys: F,
+		onSelectionChange: I,
+		selectionMode: D.selectionMode,
+		selectionBehavior: D.selectionBehavior,
+		label: E,
+		className: P(),
+		"data-is-last": !z
+	}), V = /* @__PURE__ */ u(m, {
+		...D,
+		autoFocus: L && w ? !1 : D.autoFocus,
+		className: M({ className: x }),
+		items: R.remainingItems,
+		selectedKeys: F,
+		onSelectionChange: I,
 		renderEmptyState: i,
 		children: /* @__PURE__ */ u(p, {
-			items: L.remainingItems,
+			items: R.remainingItems,
 			children: c
 		})
 	});
 	return /* @__PURE__ */ u("div", {
-		ref: D,
-		className: k(),
-		children: I ? /* @__PURE__ */ d(h, {
-			filter: O,
+		ref: O,
+		className: A(),
+		children: L ? /* @__PURE__ */ d(h, {
+			filter: k,
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: A(),
+					className: j(),
 					"data-dd-privacy": "mask",
-					children: [/* @__PURE__ */ u(a, { placeholder: C }), /* @__PURE__ */ u(f, { className: M() })]
+					children: [/* @__PURE__ */ u(a, {
+						placeholder: C,
+						autoFocus: w
+					}), /* @__PURE__ */ u(f, { className: N() })]
 				}),
-				z,
-				R && /* @__PURE__ */ u(_, {
+				B,
+				z && /* @__PURE__ */ u(_, {
 					...e,
-					children: B
+					children: V
 				})
 			]
-		}) : /* @__PURE__ */ d(l, { children: [z, R && /* @__PURE__ */ u(_, {
+		}) : /* @__PURE__ */ d(l, { children: [B, z && /* @__PURE__ */ u(_, {
 			...e,
-			children: B
+			children: V
 		})] })
 	});
 }

package/dist/esm/core/components/select-list/parts/SelectListSearchInput.d.ts

@@ -1,5 +1,6 @@
 type SelectListSearchInputProps = {
     placeholder?: string;
+    autoFocus?: boolean;
 };
 declare const SelectListSearchInput: import('react').ForwardRefExoticComponent<SelectListSearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SelectListSearchInput };

package/dist/esm/core/components/select-list/parts/SelectListSearchInput.js

@@ -10,11 +10,12 @@ import { SearchField as c } from "react-aria-components/SearchField";
 var l = r({ slots: {
 	base: "uy:flex uy:gap-100 uy:items-center 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:focus-within:outline-utility-focus-ring uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:text-content-form-active uy:typography-body",
 	input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden"
-} }), u = n(({ placeholder: n }, r) => {
-	let u = o(), { base: d, input: f } = l();
+} }), u = n(({ placeholder: n, autoFocus: r }, u) => {
+	let d = o(), { base: f, input: p } = l();
 	return /* @__PURE__ */ a(c, {
-		className: d(),
-		ref: r,
+		className: f(),
+		ref: u,
+		autoFocus: r,
 		"data-dd-privacy": "mask",
 		children: [
 			/* @__PURE__ */ i(e, {
@@ -24,14 +25,14 @@ var l = r({ slots: {
 			}),
 			/* @__PURE__ */ i(s, {
 				placeholder: n,
-				"aria-label": u.formatMessage({
+				"aria-label": d.formatMessage({
 					id: "unity:component:common:search:label",
 					defaultMessage: "Search"
 				}),
-				className: f()
+				className: p()
 			}),
 			/* @__PURE__ */ i(t, {
-				title: u.formatMessage({
+				title: d.formatMessage({
 					id: "unity:component:common:clear:title",
 					defaultMessage: "Clear"
 				}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.22.15",
+  "version": "3.22.17",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.22.15",
+    "@payfit/unity-illustrations": "3.22.17",
     "@radix-ui/react-avatar": "1.2.7",
     "@radix-ui/react-slot": "1.4.0",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.7"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.22.15",
-    "@payfit/unity-themes": "3.22.15",
+    "@payfit/unity-icons": "3.22.17",
+    "@payfit/unity-themes": "3.22.17",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -156,8 +156,8 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.22.15",
-    "@payfit/unity-themes": "3.22.15",
+    "@payfit/unity-icons": "3.22.17",
+    "@payfit/unity-themes": "3.22.17",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.1",
     "@storybook/addon-designs": "11.1.4",