@pallasoft/ps-input-components 3.2.0 → 3.3.1

package/dist/components/ps-grouped-switcher.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import type { PsGroupedSwitcherAllOption } from '../interfaces/ps-grouped-switcher-all-option';
+import type { PsGroupedSwitcherGroup } from '../interfaces/ps-grouped-switcher-group';
+export interface PsGroupedSwitcherProps<T> {
+    allOption?: PsGroupedSwitcherAllOption;
+    ariaLabel: string;
+    className?: string;
+    emptyText: string;
+    getItemKey: (item: T) => string;
+    getItemSearchText: (item: T) => string;
+    groups: PsGroupedSwitcherGroup<T>[];
+    onSelect: (key: string) => void;
+    onTogglePin?: (key: string) => void;
+    pinLabel?: string;
+    pinnedKeys?: string[];
+    pinnedLabel?: string;
+    recentKeys?: string[];
+    recentLabel?: string;
+    renderItem: (item: T) => ReactNode;
+    renderSectionLabel?: (key: string, label: string) => ReactNode;
+    renderSelected: (item: T | null) => ReactNode;
+    searchPlaceholder: string;
+    selectedKey: string;
+    unpinLabel?: string;
+}
+export declare const PsGroupedSwitcher: <T>({ allOption, ariaLabel, className, emptyText, getItemKey, getItemSearchText, groups, onSelect, onTogglePin, pinLabel, pinnedKeys, pinnedLabel, recentKeys, recentLabel, renderItem, renderSectionLabel, renderSelected, searchPlaceholder, selectedKey, unpinLabel, }: PsGroupedSwitcherProps<T>) => import("react").JSX.Element;

package/dist/components/ps-grouped-switcher.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsGroupedSwitcher = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
+const ps_grouped_switcher_config_1 = require("../constants/ps-grouped-switcher-config");
+const ps_grouped_switcher_service_1 = require("../services/ps-grouped-switcher-service");
+const PsGroupedSwitcher = ({ allOption, ariaLabel, className, emptyText, getItemKey, getItemSearchText, groups, onSelect, onTogglePin, pinLabel = 'Pin', pinnedKeys = [], pinnedLabel = 'Pinned', recentKeys = [], recentLabel = 'Recent', renderItem, renderSectionLabel, renderSelected, searchPlaceholder, selectedKey, unpinLabel = 'Unpin', }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const items = groups.flatMap((group) => group.items);
+    const selected = items.find((item) => getItemKey(item) === selectedKey);
+    const sections = ps_grouped_switcher_service_1.PsGroupedSwitcherService.sections({
+        getItemKey,
+        getItemSearchText,
+        groups,
+        pinnedKeys,
+        pinnedLabel,
+        query,
+        recentKeys,
+        recentLabel,
+    });
+    const showAll = allOption !== undefined && query.trim() === '';
+    const isAllSelected = selectedKey === '' || selected === undefined;
+    const choose = (key) => {
+        onSelect(key);
+        setIsOpen(false);
+        setQuery('');
+    };
+    const onSelectionChange = (selection) => {
+        const ids = selection === 'all' ? [] : Array.from(selection);
+        if (ids.length === 0) {
+            choose(selectedKey);
+            return;
+        }
+        const text = String(ids[0]);
+        choose(text === ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.allKey ? '' : ps_grouped_switcher_service_1.PsGroupedSwitcherService.itemKey(text));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: (next) => {
+            setIsOpen(next);
+            if (!next)
+                setQuery('');
+        }, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": ariaLabel, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search })] }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => ((0, jsx_runtime_1.jsx)("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
+                                    isAllSelected
+                                        ? ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.allKey
+                                        : ps_grouped_switcher_service_1.PsGroupedSwitcherService.selectedOptionId(sections, selectedKey, getItemKey),
+                                ], selectionMode: 'single', children: [showAll ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxSection, { children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-floating-option min-h-12 text-ink', id: ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.allKey, textValue: 'all', children: allOption.content }) })) : null, sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBoxSection, { id: section.key, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: 'px-3 pb-1 pt-3 text-xs font-semibold tracking-wide text-ink/50 uppercase', children: renderSectionLabel === undefined
+                                                    ? section.label
+                                                    : renderSectionLabel(section.key, section.label) }), section.items.map((item) => {
+                                                const key = getItemKey(item);
+                                                const isPinned = pinnedKeys.includes(key);
+                                                return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBoxItem, { className: 'ps-floating-option group min-h-14 text-ink', id: ps_grouped_switcher_service_1.PsGroupedSwitcherService.optionId(section.key, key), textValue: getItemSearchText(item), children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1', children: renderItem(item) }), onTogglePin === undefined ? null : ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { "aria-label": isPinned ? unpinLabel : pinLabel, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-ps-control text-ink/35 transition-opacity hover:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100', isPinned ? 'opacity-100' : 'opacity-0'), onPress: () => onTogglePin(key), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('h-4 w-4', isPinned ? 'text-primary' : ''), iconKey: ps_icons_1.PsIconKey.Star }) }))] }, key));
+                                            })] }, section.key)))] })] }) }) })] }));
+};
+exports.PsGroupedSwitcher = PsGroupedSwitcher;

package/dist/constants/ps-grouped-switcher-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsGroupedSwitcherConfig: {
+    readonly allKey: "all";
+    readonly maxRecent: 3;
+    readonly pinnedSection: "pinned";
+    readonly recentSection: "recent";
+};

package/dist/constants/ps-grouped-switcher-config.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsGroupedSwitcherConfig = void 0;
+exports.PsGroupedSwitcherConfig = {
+    allKey: 'all',
+    maxRecent: 3,
+    pinnedSection: 'pinned',
+    recentSection: 'recent',
+};

package/dist/esm/components/ps-grouped-switcher.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { Autocomplete, Button, Dialog, DialogTrigger, Header, Input, ListBox, ListBoxItem, ListBoxSection, Popover, SearchField, } from 'react-aria-components';
+import { PsGroupedSwitcherConfig } from '../constants/ps-grouped-switcher-config';
+import { PsGroupedSwitcherService } from '../services/ps-grouped-switcher-service';
+export const PsGroupedSwitcher = ({ allOption, ariaLabel, className, emptyText, getItemKey, getItemSearchText, groups, onSelect, onTogglePin, pinLabel = 'Pin', pinnedKeys = [], pinnedLabel = 'Pinned', recentKeys = [], recentLabel = 'Recent', renderItem, renderSectionLabel, renderSelected, searchPlaceholder, selectedKey, unpinLabel = 'Unpin', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const items = groups.flatMap((group) => group.items);
+    const selected = items.find((item) => getItemKey(item) === selectedKey);
+    const sections = PsGroupedSwitcherService.sections({
+        getItemKey,
+        getItemSearchText,
+        groups,
+        pinnedKeys,
+        pinnedLabel,
+        query,
+        recentKeys,
+        recentLabel,
+    });
+    const showAll = allOption !== undefined && query.trim() === '';
+    const isAllSelected = selectedKey === '' || selected === undefined;
+    const choose = (key) => {
+        onSelect(key);
+        setIsOpen(false);
+        setQuery('');
+    };
+    const onSelectionChange = (selection) => {
+        const ids = selection === 'all' ? [] : Array.from(selection);
+        if (ids.length === 0) {
+            choose(selectedKey);
+            return;
+        }
+        const text = String(ids[0]);
+        choose(text === PsGroupedSwitcherConfig.allKey ? '' : PsGroupedSwitcherService.itemKey(text));
+    };
+    return (_jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: (next) => {
+            setIsOpen(next);
+            if (!next)
+                setQuery('');
+        }, children: [_jsxs(Button, { "aria-label": ariaLabel, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: _jsxs(Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [_jsxs(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [_jsx(Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search })] }), _jsxs(ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => (_jsx("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
+                                    isAllSelected
+                                        ? PsGroupedSwitcherConfig.allKey
+                                        : PsGroupedSwitcherService.selectedOptionId(sections, selectedKey, getItemKey),
+                                ], selectionMode: 'single', children: [showAll ? (_jsx(ListBoxSection, { children: _jsx(ListBoxItem, { className: 'ps-floating-option min-h-12 text-ink', id: PsGroupedSwitcherConfig.allKey, textValue: 'all', children: allOption.content }) })) : null, sections.map((section) => (_jsxs(ListBoxSection, { id: section.key, children: [_jsx(Header, { className: 'px-3 pb-1 pt-3 text-xs font-semibold tracking-wide text-ink/50 uppercase', children: renderSectionLabel === undefined
+                                                    ? section.label
+                                                    : renderSectionLabel(section.key, section.label) }), section.items.map((item) => {
+                                                const key = getItemKey(item);
+                                                const isPinned = pinnedKeys.includes(key);
+                                                return (_jsxs(ListBoxItem, { className: 'ps-floating-option group min-h-14 text-ink', id: PsGroupedSwitcherService.optionId(section.key, key), textValue: getItemSearchText(item), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderItem(item) }), onTogglePin === undefined ? null : (_jsx(Button, { "aria-label": isPinned ? unpinLabel : pinLabel, className: PallasoftClassNameService.merge('ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-ps-control text-ink/35 transition-opacity hover:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100', isPinned ? 'opacity-100' : 'opacity-0'), onPress: () => onTogglePin(key), children: _jsx(PsIcon, { "aria-hidden": 'true', className: PallasoftClassNameService.merge('h-4 w-4', isPinned ? 'text-primary' : ''), iconKey: PsIconKey.Star }) }))] }, key));
+                                            })] }, section.key)))] })] }) }) })] }));
+};

package/dist/esm/constants/ps-grouped-switcher-config.js

@@ -0,0 +1,6 @@
+export const PsGroupedSwitcherConfig = {
+    allKey: 'all',
+    maxRecent: 3,
+    pinnedSection: 'pinned',
+    recentSection: 'recent',
+};

package/dist/esm/index.js

@@ -56,3 +56,10 @@ export * from './interfaces/ps-checkbox-matrix-row';
 export * from './services/ps-checkbox-matrix-service';
 export * from './components/ps-rating-input';
 export * from './constants/ps-rating-input-size';
+export * from './components/ps-grouped-switcher';
+export * from './constants/ps-grouped-switcher-config';
+export * from './interfaces/ps-grouped-switcher-all-option';
+export * from './interfaces/ps-grouped-switcher-group';
+export * from './interfaces/ps-grouped-switcher-section';
+export * from './interfaces/ps-grouped-switcher-sections-input';
+export * from './services/ps-grouped-switcher-service';

package/dist/esm/interfaces/ps-grouped-switcher-all-option.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-grouped-switcher-group.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-grouped-switcher-section.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-grouped-switcher-sections-input.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-grouped-switcher-service.js

@@ -0,0 +1,60 @@
+import { PsGroupedSwitcherConfig } from '../constants/ps-grouped-switcher-config';
+export class PsGroupedSwitcherService {
+    static optionId(sectionKey, itemKey) {
+        return `${sectionKey}:${itemKey}`;
+    }
+    static selectedOptionId(sections, selectedKey, getItemKey) {
+        const section = sections.find((candidate) => candidate.items.some((item) => getItemKey(item) === selectedKey));
+        return section === undefined ? '' : PsGroupedSwitcherService.optionId(section.key, selectedKey);
+    }
+    static itemKey(optionId) {
+        return optionId.slice(optionId.indexOf(':') + 1);
+    }
+    static sections(input) {
+        const needle = input.query.trim().toLowerCase();
+        const words = needle.split(/\s+/).filter(Boolean);
+        const all = input.groups.flatMap((group) => group.items);
+        const byKey = new Map(all.map((item) => [input.getItemKey(item), item]));
+        const pick = (keys) => keys.flatMap((key) => {
+            const item = byKey.get(key);
+            return item === undefined ? [] : [item];
+        });
+        const pinned = pick(input.pinnedKeys);
+        const recent = pick(input.recentKeys.filter((key) => !input.pinnedKeys.includes(key))).slice(0, PsGroupedSwitcherConfig.maxRecent);
+        const groups = input.groups
+            .map((group) => ({
+            items: needle === ''
+                ? group.items
+                : group.items.filter((item) => {
+                    const haystack = `${group.label} ${input.getItemSearchText(item)}`.toLowerCase();
+                    return words.every((word) => haystack.includes(word));
+                }),
+            key: group.key,
+            label: group.label,
+        }))
+            .filter((group) => group.items.length > 0);
+        if (needle !== '')
+            return groups;
+        return [
+            ...(pinned.length > 0
+                ? [
+                    {
+                        items: pinned,
+                        key: PsGroupedSwitcherConfig.pinnedSection,
+                        label: input.pinnedLabel,
+                    },
+                ]
+                : []),
+            ...(recent.length > 0
+                ? [
+                    {
+                        items: recent,
+                        key: PsGroupedSwitcherConfig.recentSection,
+                        label: input.recentLabel,
+                    },
+                ]
+                : []),
+            ...groups,
+        ];
+    }
+}

package/dist/index.d.ts

@@ -56,3 +56,10 @@ export * from './interfaces/ps-checkbox-matrix-row';
 export * from './services/ps-checkbox-matrix-service';
 export * from './components/ps-rating-input';
 export * from './constants/ps-rating-input-size';
+export * from './components/ps-grouped-switcher';
+export * from './constants/ps-grouped-switcher-config';
+export * from './interfaces/ps-grouped-switcher-all-option';
+export * from './interfaces/ps-grouped-switcher-group';
+export * from './interfaces/ps-grouped-switcher-section';
+export * from './interfaces/ps-grouped-switcher-sections-input';
+export * from './services/ps-grouped-switcher-service';

package/dist/index.js

@@ -72,3 +72,10 @@ __exportStar(require("./interfaces/ps-checkbox-matrix-row"), exports);
 __exportStar(require("./services/ps-checkbox-matrix-service"), exports);
 __exportStar(require("./components/ps-rating-input"), exports);
 __exportStar(require("./constants/ps-rating-input-size"), exports);
+__exportStar(require("./components/ps-grouped-switcher"), exports);
+__exportStar(require("./constants/ps-grouped-switcher-config"), exports);
+__exportStar(require("./interfaces/ps-grouped-switcher-all-option"), exports);
+__exportStar(require("./interfaces/ps-grouped-switcher-group"), exports);
+__exportStar(require("./interfaces/ps-grouped-switcher-section"), exports);
+__exportStar(require("./interfaces/ps-grouped-switcher-sections-input"), exports);
+__exportStar(require("./services/ps-grouped-switcher-service"), exports);

package/dist/interfaces/ps-grouped-switcher-all-option.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export interface PsGroupedSwitcherAllOption {
+    content: ReactNode;
+}

package/dist/interfaces/ps-grouped-switcher-all-option.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-grouped-switcher-group.d.ts

@@ -0,0 +1,5 @@
+export interface PsGroupedSwitcherGroup<T> {
+    items: T[];
+    key: string;
+    label: string;
+}

package/dist/interfaces/ps-grouped-switcher-group.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-grouped-switcher-section.d.ts

@@ -0,0 +1,5 @@
+export interface PsGroupedSwitcherSection<T> {
+    items: T[];
+    key: string;
+    label: string;
+}

package/dist/interfaces/ps-grouped-switcher-section.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-grouped-switcher-sections-input.d.ts

@@ -0,0 +1,11 @@
+import type { PsGroupedSwitcherGroup } from './ps-grouped-switcher-group';
+export interface PsGroupedSwitcherSectionsInput<T> {
+    getItemKey: (item: T) => string;
+    getItemSearchText: (item: T) => string;
+    groups: PsGroupedSwitcherGroup<T>[];
+    pinnedKeys: string[];
+    pinnedLabel: string;
+    query: string;
+    recentKeys: string[];
+    recentLabel: string;
+}

package/dist/interfaces/ps-grouped-switcher-sections-input.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-grouped-switcher-service.d.ts

@@ -0,0 +1,8 @@
+import type { PsGroupedSwitcherSection } from '../interfaces/ps-grouped-switcher-section';
+import type { PsGroupedSwitcherSectionsInput } from '../interfaces/ps-grouped-switcher-sections-input';
+export declare class PsGroupedSwitcherService {
+    static optionId(sectionKey: string, itemKey: string): string;
+    static selectedOptionId<T>(sections: PsGroupedSwitcherSection<T>[], selectedKey: string, getItemKey: (item: T) => string): string;
+    static itemKey(optionId: string): string;
+    static sections<T>(input: PsGroupedSwitcherSectionsInput<T>): PsGroupedSwitcherSection<T>[];
+}

package/dist/services/ps-grouped-switcher-service.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsGroupedSwitcherService = void 0;
+const ps_grouped_switcher_config_1 = require("../constants/ps-grouped-switcher-config");
+class PsGroupedSwitcherService {
+    static optionId(sectionKey, itemKey) {
+        return `${sectionKey}:${itemKey}`;
+    }
+    static selectedOptionId(sections, selectedKey, getItemKey) {
+        const section = sections.find((candidate) => candidate.items.some((item) => getItemKey(item) === selectedKey));
+        return section === undefined ? '' : PsGroupedSwitcherService.optionId(section.key, selectedKey);
+    }
+    static itemKey(optionId) {
+        return optionId.slice(optionId.indexOf(':') + 1);
+    }
+    static sections(input) {
+        const needle = input.query.trim().toLowerCase();
+        const words = needle.split(/\s+/).filter(Boolean);
+        const all = input.groups.flatMap((group) => group.items);
+        const byKey = new Map(all.map((item) => [input.getItemKey(item), item]));
+        const pick = (keys) => keys.flatMap((key) => {
+            const item = byKey.get(key);
+            return item === undefined ? [] : [item];
+        });
+        const pinned = pick(input.pinnedKeys);
+        const recent = pick(input.recentKeys.filter((key) => !input.pinnedKeys.includes(key))).slice(0, ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.maxRecent);
+        const groups = input.groups
+            .map((group) => ({
+            items: needle === ''
+                ? group.items
+                : group.items.filter((item) => {
+                    const haystack = `${group.label} ${input.getItemSearchText(item)}`.toLowerCase();
+                    return words.every((word) => haystack.includes(word));
+                }),
+            key: group.key,
+            label: group.label,
+        }))
+            .filter((group) => group.items.length > 0);
+        if (needle !== '')
+            return groups;
+        return [
+            ...(pinned.length > 0
+                ? [
+                    {
+                        items: pinned,
+                        key: ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.pinnedSection,
+                        label: input.pinnedLabel,
+                    },
+                ]
+                : []),
+            ...(recent.length > 0
+                ? [
+                    {
+                        items: recent,
+                        key: ps_grouped_switcher_config_1.PsGroupedSwitcherConfig.recentSection,
+                        label: input.recentLabel,
+                    },
+                ]
+                : []),
+            ...groups,
+        ];
+    }
+}
+exports.PsGroupedSwitcherService = PsGroupedSwitcherService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "3.2.0",
+	"version": "3.3.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",