@payfit/unity-components 3.1.14 → 3.1.16

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

@@ -0,0 +1,86 @@
+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 { ListLayout as f, Virtualizer as p } from "react-aria-components/Virtualizer";
+import { ListBox as m, Popover as h, Select as g } from "react-aria-components/Select";
+//#region src/core/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(g, {
+		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(h, {
+			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(p, {
+						layout: f,
+						layoutOptions: { padding: 8 },
+						children: /* @__PURE__ */ o(m, {
+							items: a,
+							className: z(),
+							renderEmptyState: V,
+							children: n
+						})
+					})
+				]
+			}) : /* @__PURE__ */ o(p, {
+				layout: f,
+				layoutOptions: { padding: 8 },
+				children: /* @__PURE__ */ o(m, {
+					items: a,
+					className: z(),
+					renderEmptyState: V,
+					children: n
+				})
+			})
+		})]
+	});
+}, y = n(function(e, t) {
+	return v(e, t);
+});
+y.displayName = "Select";
+//#endregion
+export { y as Select };

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

@@ -0,0 +1,80 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
+import { Button as a } from "react-aria-components/Button";
+import { SelectValue as o } from "react-aria-components/Select";
+//#region src/core/components/select/parts/SelectButton.tsx
+var s = t({
+	slots: {
+		base: "uy:flex uy:flex-row uy:items-center 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:min-w-0 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"],
+		iconWrapper: "uy:flex uy:shrink-0 uy:gap-50",
+		icon: ""
+	},
+	variants: {
+		isDisabled: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			selectValue: "uy:text-content-form-disabled",
+			icon: "uy:text-content-neutral-lowest-disabled"
+		} },
+		isInvalid: { true: { base: "uy:border-border-form-error uy:bg-surface-form-error" } },
+		isReadOnly: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			selectValue: "uy:text-content-form-readonly",
+			icon: "uy:text-content-neutral-lowest-disabled"
+		} }
+	},
+	compoundVariants: [{
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
+			selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover",
+			icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover"
+		}
+	}],
+	defaultVariants: {
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1
+	}
+}), c = ({ isDisabled: t, isInvalid: c, isReadOnly: l, isOpen: u, renderValue: d }) => {
+	let f = i(), { base: p, selectValue: m, iconWrapper: h, icon: g } = s({
+		isDisabled: t,
+		isInvalid: c,
+		isReadOnly: l
+	});
+	return /* @__PURE__ */ r(a, {
+		"data-dd-privacy": "mask",
+		className: p(),
+		isDisabled: t,
+		"data-unity-slot": "select-button",
+		children: [d ? /* @__PURE__ */ n(o, {
+			className: m(),
+			translate: "no",
+			children: ({ state: e }) => e.selectedItems[0] ? d(e.selectedItems[0]) : null
+		}) : /* @__PURE__ */ n(o, {
+			className: m(),
+			translate: "no"
+		}), /* @__PURE__ */ r("div", {
+			className: h(),
+			children: [c && /* @__PURE__ */ n(e, {
+				src: "WarningCircleOutlined",
+				color: "content.form.invalid",
+				alt: f.formatMessage({
+					id: "unity:component:form-field:form-input:error:alt",
+					defaultMessage: "Error"
+				})
+			}), /* @__PURE__ */ n(e, {
+				className: g(),
+				"aria-hidden": "true",
+				src: u ? "CaretUpOutlined" : "CaretDownOutlined"
+			})]
+		})]
+	});
+};
+c.displayName = "SelectButton";
+//#endregion
+export { c as SelectButton };

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

@@ -0,0 +1,17 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/select/parts/SelectOption.context.tsx
+var r = e({ isDisabled: void 0 });
+function i({ children: e, isDisabled: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { isDisabled: t },
+		children: e
+	});
+}
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useSelectOptionContext must be used within an SelectOptionProvider");
+	return e;
+}
+//#endregion
+export { r as SelectOptionContext, i as SelectOptionProvider, a as useSelectOptionContext };

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

@@ -0,0 +1,54 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { SelectOptionProvider as t } from "./SelectOption.context.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ListBoxItem as s } from "react-aria-components/ListBox";
+//#region src/core/components/select/parts/SelectOption.tsx
+var c = r({
+	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" },
+		isHovered: { true: "uy:bg-surface-neutral-hover uy:text-content-neutral" },
+		isPressed: { true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed" },
+		isSelected: { true: "uy:bg-surface-neutral-active uy:text-content-neutral-active" },
+		isDisabled: { true: "uy:text-content-neutral-disabled" }
+	},
+	compoundVariants: [{
+		isFocusVisible: !1,
+		isHovered: !1,
+		isPressed: !1,
+		isSelected: !1,
+		isDisabled: !1,
+		class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
+	}]
+}), l = n((n, r) => {
+	let { children: l, isDisabled: u, textValue: d } = n;
+	return /* @__PURE__ */ a(s, {
+		...n,
+		ref: r,
+		translate: "no",
+		"data-dd-privacy": "mask",
+		textValue: d,
+		className: ({ isHovered: e, isPressed: t, isFocusVisible: n, isSelected: r }) => c({
+			isHovered: e,
+			isPressed: t,
+			isFocusVisible: n,
+			isSelected: r,
+			isDisabled: u
+		}),
+		children: ({ isSelected: n }) => /* @__PURE__ */ a(t, {
+			isDisabled: u,
+			children: n ? /* @__PURE__ */ o("div", {
+				className: "uy:flex uy:justify-between",
+				children: [/* @__PURE__ */ a("div", {
+					className: "uy:flex uy:flex-col",
+					children: /* @__PURE__ */ a(i, { children: l })
+				}), /* @__PURE__ */ a(e, { src: "CheckOutlined" })]
+			}) : /* @__PURE__ */ a(i, { children: l })
+		})
+	});
+});
+l.displayName = "SelectOption";
+//#endregion
+export { l as SelectOption };

package/dist/esm/core/components/select/parts/SelectOptionGroup.js

@@ -0,0 +1,37 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Header as a } from "react-aria-components/Header";
+import { Separator as o } from "react-aria-components/Separator";
+import { ListBoxSection as s } from "react-aria-components/ListBox";
+import { Collection as c } from "react-aria-components/Collection";
+//#region src/core/components/select/parts/SelectOptionGroup.tsx
+var l = t({ slots: {
+	base: "",
+	header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
+	separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:last:hidden"
+} }), u = ({ label: e, children: t, items: u }, d) => {
+	let { base: f, header: p, separator: m } = l();
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(s, {
+		ref: d,
+		className: f(),
+		id: e,
+		items: u,
+		translate: "no",
+		children: [/* @__PURE__ */ r(a, {
+			className: p(),
+			children: e
+		}), u ? /* @__PURE__ */ r(c, {
+			items: u,
+			children: t
+		}) : /* @__PURE__ */ r(n, { children: t })]
+	}), /* @__PURE__ */ r(o, {
+		orientation: "horizontal",
+		className: m()
+	})] });
+}, d = e(function(e, t) {
+	return u(e, t);
+});
+d.displayName = "SelectOptionGroup";
+//#endregion
+export { d as SelectOptionGroup };

package/dist/esm/core/components/select/parts/SelectOptionHelper.js

@@ -0,0 +1,24 @@
+import { useSelectOptionContext as e } from "./SelectOption.context.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/select/parts/SelectOptionHelper.tsx
+var i = n({
+	base: "uy:typography-body",
+	variants: { isDisabled: {
+		true: "uy:text-content-neutral-disabled",
+		false: "uy:text-content-neutral-low"
+	} }
+}), a = t(({ children: t }, n) => {
+	let { isDisabled: a } = e();
+	return /* @__PURE__ */ r("span", {
+		className: i({ isDisabled: a }),
+		ref: n,
+		"data-dd-privacy": "mask",
+		translate: "no",
+		children: t
+	});
+});
+a.displayName = "SelectOptionHelper";
+//#endregion
+export { a as SelectOptionHelper };

package/dist/esm/core/components/select-field/test-utils.js

@@ -0,0 +1,11 @@
+import { screen as e, userEvent as t, within as n } from "storybook/test";
+//#region src/core/components/select-field/test-utils.ts
+var r = (r) => ({ selectOption: async ({ labelText: i, optionName: a, container: o = r.canvasElement }) => {
+	await r.step(`Select option "${a}" in "${i}"`, async () => {
+		let r = n(o).getByLabelText(i, { exact: !1 });
+		if (!r) throw Error(`Select not found for label ${i}`);
+		await t.click(r, { delay: 100 }), await t.click(e.getByRole("option", { name: a }), { delay: 100 }), await t.tab({ delay: 100 });
+	});
+} });
+//#endregion
+export { r as getTestingUtilsSelect };

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

@@ -0,0 +1,95 @@
+import { JSX, Ref } from 'react';
+import { ListBoxProps as AriaListBoxProps } from 'react-aria-components/ListBox';
+/**
+ * Props for the SelectList component.
+ * @template TType - The type of items in the list
+ */
+export interface SelectListProps<TType extends object = object> extends Omit<AriaListBoxProps<TType>, 'className' | 'style' | 'selectedKeys' | 'onSelectionChange' | 'children'> {
+    /**
+     * An iterable data structure containing items to render in the list.
+     */
+    items: Iterable<TType>;
+    /**
+     * Render function for each item. Receives an item and should generally returns a `SelectListOption` component.
+     */
+    children: (item: TType) => React.ReactElement;
+    /**
+     * The current selected keys of the list. Pass a `Set` of keys to control the selection state.
+     */
+    value: AriaListBoxProps<TType>['selectedKeys'];
+    /**
+     * Callback function invoked when the user selection changes. Use this to update the controlled `value` prop.
+     * @param keys - The new selection as a `Selection` type (Set of keys or "all")
+     */
+    onChange: AriaListBoxProps<TType>['onSelectionChange'];
+    /**
+     * Controls whether to display a search input at the top of the list. Set to `true` to always show the search bar, or `false` to never show it. When undefined, the search bar appears automatically when there are 10 or more items.
+     * @default undefined - Auto-shows when items >= 10
+     */
+    showSearch?: boolean;
+    /**
+     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
+     */
+    className?: string;
+    /**
+     * Enables selected-first sorting, which moves selected items into a dedicated section at the top of the list. Selected items can be deselected directly from this section.
+     * @default false
+     */
+    sortSelectedFirst?: boolean;
+    /**
+     * Accessible label for the selected items section. This label is screen-reader only and provides context for the separated selected items.
+     * @default "Selected"
+     */
+    selectedSectionLabel?: string;
+    /**
+     *
+     */
+    isLoading?: boolean;
+}
+type SelectListComponent = {
+    <TType extends object>(props: SelectListProps<TType> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * Provides a high-performance, accessible list for selecting items with built-in virtualization, search, and sorting capabilities.
+ * Use this component to allow users to select one or multiple items from a list of options. The component automatically handles large datasets through virtualization, provides built-in search functionality when needed, and can optionally organize selected items into a dedicated section at the top for better visibility.
+ * @param {SelectListProps} props - Regular props from React Aria's ListBox, plus selection, search, and sorting configuration
+ * @example
+ * ```tsx
+ * import { SelectList, SelectListOption } from '@payfit/unity-components'
+ *
+ * function FruitSelector() {
+ *   const [selected, setSelected] = useState(new Set())
+ *   const fruits = [
+ *     { id: 'apple', label: 'Apple' },
+ *     { id: 'banana', label: 'Banana' }
+ *   ]
+ *
+ *   return (
+ *     <SelectList
+ *       items={fruits}
+ *       value={selected}
+ *       onChange={setSelected}
+ *       selectionMode="multiple"
+ *     >
+ *       {item => <SelectListOption id={item.id}>{item.label}</SelectListOption>}
+ *     </SelectList>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - List items are automatically virtualized for optimal performance with large datasets (hundreds or thousands of items)
+ * - Search bar appears automatically when the list contains 10 or more items, or can be controlled via the `showSearch` prop
+ * - Set `sortSelectedFirst` to `true` to move selected items into a dedicated section at the top of the list
+ * - The component requires the dynamic API pattern: provide both `items` array and a render function as `children`
+ * - Selection state is fully controlled via the `value` and `onChange` props following React's controlled component pattern
+ * - Supports both flat item lists and grouped sections using `SelectListOptGroup`
+ * @see {@link SelectListProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/select-list GitHub}
+ * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-selectlist unity-components.payfit.io}
+ */
+declare const SelectList: SelectListComponent;
+export { SelectList };

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

@@ -0,0 +1,71 @@
+import { VIRTUALIZATION_CONFIG as e } from "./constants.js";
+import { useControlledSelection as t } from "./hooks/useControlledSelection.js";
+import { useSelectedFirstSorting as n } from "./hooks/useSelectedFirstSorting.js";
+import { SelectedItemsSection as r } from "./parts/SelectedItemsSection.js";
+import { SelectListEmptyState as i } from "./parts/SelectListEmptyState.js";
+import { SelectListSearchInput as a } from "./parts/SelectListSearchInput.js";
+import { forwardRef as o, useMemo as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Separator as f } from "react-aria-components/Separator";
+import { Collection as p, ListBox as m } from "react-aria-components/ListBox";
+import { Autocomplete as h, useFilter as g } from "react-aria-components/Autocomplete";
+import { Virtualizer as _ } from "react-aria-components/Virtualizer";
+//#region src/core/components/select-list/SelectList.tsx
+var v = c({ slots: {
+	wrapper: "uy:bg-surface-neutral uy:p-100 uy:overscroll-contain",
+	base: "uy:flex uy:w-full uy:gap-100 uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+	inputContainer: "uy:sticky uy:top-0 uy:bg-surface-neutral",
+	separator: "uy:h-[1px] uy:border-border-neutral uy:w-full uy:mt-100",
+	list: "uy:overflow-y-auto uy:mt-100 uy: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, sortSelectedFirst: C = !1, selectedSectionLabel: w = "Selected", ...T }, E) {
+	let { contains: D } = g({ sensitivity: "base" }), { wrapper: O, inputContainer: k, list: A, separator: j, selectedListBox: M } = v(), [N, P] = t(y, b), F = s(() => (Array.isArray(o) ? o.length : Array.from(o).length) >= 10 || S, [o, S]), I = n(o, N, C), L = s(() => I.remainingItems ? !I.remainingItems[Symbol.iterator]().next().done : !1, [I.remainingItems]), R = /* @__PURE__ */ u(r, {
+		items: I.selectedItems,
+		selectedKeys: N,
+		onSelectionChange: P,
+		selectionMode: T.selectionMode,
+		selectionBehavior: T.selectionBehavior,
+		label: w,
+		className: M(),
+		"data-is-last": !L
+	}), z = /* @__PURE__ */ u(m, {
+		...T,
+		className: A({ className: x }),
+		items: I.remainingItems,
+		selectedKeys: N,
+		onSelectionChange: P,
+		renderEmptyState: i,
+		children: /* @__PURE__ */ u(p, {
+			items: I.remainingItems,
+			children: c
+		})
+	});
+	return /* @__PURE__ */ u("div", {
+		ref: E,
+		className: O(),
+		children: F ? /* @__PURE__ */ d(h, {
+			filter: D,
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: k(),
+					"data-dd-privacy": "mask",
+					children: [/* @__PURE__ */ u(a, {}), /* @__PURE__ */ u(f, { className: j() })]
+				}),
+				R,
+				L && /* @__PURE__ */ u(_, {
+					...e,
+					children: z
+				})
+			]
+		}) : /* @__PURE__ */ d(l, { children: [R, L && /* @__PURE__ */ u(_, {
+			...e,
+			children: z
+		})] })
+	});
+}
+var b = o(y);
+b.displayName = "SelectList";
+//#endregion
+export { b as SelectList };

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

@@ -0,0 +1,14 @@
+import * as e from "@payfit/unity-themes/tokens/common/spacings.json";
+import { ListLayout as t } from "react-aria-components/Virtualizer";
+//#region src/core/components/select-list/constants.ts
+var n = (e) => parseInt(e.replace("px", "").trim(), 10), r = {
+	layout: t,
+	layoutOptions: {
+		estimatedRowHeight: n(e.spacing[500].$value),
+		estimatedHeadingHeight: n(e.spacing[400].$value),
+		gap: 0,
+		padding: 0
+	}
+};
+//#endregion
+export { r as VIRTUALIZATION_CONFIG };

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

@@ -0,0 +1,42 @@
+import { partition as e } from "./utils/partition.js";
+//#region src/core/components/select-list/helpers.ts
+function t(e) {
+	return typeof e == "object" && !!e && "children" in e && Array.isArray(e.children);
+}
+function n(e) {
+	let n = e[Symbol.iterator]().next();
+	return !n.done && t(n.value);
+}
+function r(t, n) {
+	let [r, i] = e(Array.from(t), (e) => n.has(e.id));
+	return {
+		selectedItems: r,
+		remainingItems: i
+	};
+}
+function i(e) {
+	let n = [];
+	return Array.from(e).forEach((e) => {
+		t(e) && e.children.forEach((e) => {
+			n.push(e);
+		});
+	}), { allItems: n };
+}
+function a(e, n) {
+	let { allItems: r } = i(e);
+	return {
+		selectedItems: r.filter((e) => n.has(e.id)),
+		remainingSections: Array.from(e).map((e) => {
+			if (t(e)) {
+				let t = e.children.filter((e) => !n.has(e.id));
+				return {
+					...e,
+					children: t
+				};
+			}
+			return e;
+		}).filter((e) => t(e) && e.children.length > 0)
+	};
+}
+//#endregion
+export { i as extractAllSelectableItems, t as hasSectionChildren, n as isNestedStructure, r as processSelectedItemsForFlatDynamicItems, a as processSelectedItemsForNestedDynamicItems };

package/dist/esm/core/components/select-list/hooks/useControlledSelection.js

@@ -0,0 +1,14 @@
+import { useCallback as e, useMemo as t, useState as n } from "react";
+//#region src/core/components/select-list/hooks/useControlledSelection.ts
+function r(r, i) {
+	let [a, o] = n(/* @__PURE__ */ new Set()), s = r !== void 0;
+	return [t(() => s ? r === "all" ? "all" : r instanceof Set ? r : new Set(r) : a, [
+		s,
+		r,
+		a
+	]), e((e) => {
+		s || o(e === "all" ? /* @__PURE__ */ new Set() : e), i?.(e);
+	}, [s, i])];
+}
+//#endregion
+export { r as useControlledSelection };

package/dist/esm/core/components/select-list/hooks/useSelectedFirstSorting.js

@@ -0,0 +1,31 @@
+import { isNestedStructure as e, processSelectedItemsForFlatDynamicItems as t, processSelectedItemsForNestedDynamicItems as n } from "../helpers.js";
+import { useMemo as r } from "react";
+//#region src/core/components/select-list/hooks/useSelectedFirstSorting.ts
+function i(i, a, o) {
+	let s = r(() => a === "all" ? /* @__PURE__ */ new Set() : a, [a]);
+	return r(() => {
+		if (!o || !i || s.size === 0) return {
+			selectedItems: [],
+			remainingItems: i
+		};
+		if (e(i)) {
+			let e = n(i, s);
+			return {
+				selectedItems: e.selectedItems,
+				remainingItems: e.remainingSections
+			};
+		} else {
+			let e = t(i, s);
+			return {
+				selectedItems: e.selectedItems,
+				remainingItems: e.remainingItems
+			};
+		}
+	}, [
+		i,
+		s,
+		o
+	]);
+}
+//#endregion
+export { i as useSelectedFirstSorting };

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

@@ -0,0 +1,25 @@
+import { Text as e } from "../../text/Text.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { FormattedMessage as r } from "react-intl";
+import { Icon as i } from "@payfit/unity-icons";
+//#region src/core/components/select-list/parts/SelectListEmptyState.tsx
+var a = () => /* @__PURE__ */ n("div", {
+	className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-full uy:py-600",
+	children: [/* @__PURE__ */ t(e, {
+		variant: "body",
+		className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+		children: /* @__PURE__ */ t(i, {
+			size: 24,
+			src: "MagnifyingGlassOutlined"
+		})
+	}), /* @__PURE__ */ t(e, {
+		variant: "bodyLarge",
+		children: /* @__PURE__ */ t(r, {
+			id: "unity:component:autocomplete:panel:empty:label",
+			defaultMessage: "No results found"
+		})
+	})]
+});
+a.displayName = "SelectListEmptyState";
+//#endregion
+export { a as SelectListEmptyState };