@hh.ru/magritte-ui-new-select 1.0.1 → 1.1.1

package/internal/SelectStateContext.js

@@ -1,20 +1,51 @@
+import './../index.css';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
-import { useSelectState as useSelectState$1 } from './useSelectState.js';
-import { assertSelectContext } from './utils.js';
-import './ConfigContext.js';
-import './VisibilityContext.js';
+import { createContext, useContext, useSyncExternalStore, useState, useRef, useEffect } from 'react';
+import { useSelectConfig } from './ConfigContext.js';
+import { SelectStore } from './SelectStore.js';
+import { assertSelectContext, value2Array } from './utils.js';
 import '@hh.ru/magritte-common-keyboard';
 
 const SelectStateContext = createContext(null);
-const useSelectState = () => {
-    return assertSelectContext(useContext(SelectStateContext), 'useSelectState');
+// возвращает ссылку на стор
+const useSelectStore = () => {
+    return assertSelectContext(useContext(SelectStateContext), 'useSelectStore');
 };
-// выбранные значения и операции над ними
-const SelectStateProvider = ({ children, onChange, onSelectOption, value, }) => {
-    const contextValue = useSelectState$1((value || []), onChange, onSelectOption);
-    return (jsx(SelectStateContext.Provider, { value: contextValue, children: children }));
+// возвращает реактивное состояние стора
+const useSelected = (store) => {
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+};
+// выбранные значения, операции над ними и эмит внешнего onChange
+const SelectStateProvider = ({ children, onChange, value: valueOrValuesExternal, }) => {
+    const [store] = useState(() => new SelectStore(value2Array(valueOrValuesExternal)));
+    const { multiple } = useSelectConfig();
+    // во время реакции на внешнее обновление value
+    // - эмитить внешний onChange НЕ нужно
+    // - но обновить дерево селекта нужно
+    const suppressOnChangeRef = useRef(false);
+    // эмит внешнего onChange для потребителей
+    useEffect(() => {
+        const storeUnsubscribe = store.subscribe(() => {
+            if (suppressOnChangeRef.current) {
+                return;
+            }
+            const selected = store.getSnapshot();
+            onChange?.((multiple ? [...selected] : selected[0]));
+        });
+        return storeUnsubscribe;
+    }, [store, multiple, onChange]);
+    // синк стора с внешним свойством
+    useEffect(() => {
+        suppressOnChangeRef.current = true;
+        try {
+            store.replace(value2Array(valueOrValuesExternal));
+        }
+        finally {
+            suppressOnChangeRef.current = false;
+        }
+    }, [store, valueOrValuesExternal]);
+    return jsx(SelectStateContext.Provider, { value: store, children: children });
 };
 
-export { SelectStateProvider, useSelectState };
+export { SelectStateProvider, useSelectStore, useSelected };
 //# sourceMappingURL=SelectStateContext.js.map

package/internal/SelectStateContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStateContext.js","sources":["src/internal/SelectStateContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode, type ReactElement } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport {\n    useSelectState as useSelectStateInternal,\n    UseSelectState,\n} from '@hh.ru/magritte-ui-new-select/internal/useSelectState';\nimport { assertSelectContext } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';\n\nconst SelectStateContext = createContext<UseSelectState<boolean, StaticDataFetcherItem> | null>(null);\n\nexport const useSelectState = <\n    MultipleType extends boolean = boolean,\n    DataType extends StaticDataFetcherItem = StaticDataFetcherItem,\n>(): UseSelectState<MultipleType, DataType> => {\n    return assertSelectContext(useContext(SelectStateContext), 'useSelectState') as unknown as UseSelectState<\n        MultipleType,\n        DataType\n    >;\n};\n\ninterface SelectStateProviderProps<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {\n    children: ReactNode;\n    onChange?: (value: ValueTypeHelper<MultipleType, DataType>) => void;\n    onSelectOption?: (values: DataType[]) => void;\n    value?: ValueTypeHelper<MultipleType, DataType>;\n}\n\n// выбранные значения и операции над ними\nexport const SelectStateProvider = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    children,\n    onChange,\n    onSelectOption,\n    value,\n}: SelectStateProviderProps<MultipleType, DataType>): ReactElement => {\n    const contextValue = useSelectStateInternal<DataType, MultipleType>(\n        (value || []) as DataType[] | DataType,\n        onChange,\n        onSelectOption\n    );\n\n    return (\n        <SelectStateContext.Provider value={contextValue as unknown as UseSelectState<boolean, StaticDataFetcherItem>}>\n            {children}\n        </SelectStateContext.Provider>\n    );\n};\n"],"names":["useSelectStateInternal","_jsx"],"mappings":";;;;;;;;AAUA,MAAM,kBAAkB,GAAG,aAAa,CAAwD,IAAI,CAAC,CAAC;AAE/F,MAAM,cAAc,GAAG,MAGgB;IAC1C,OAAO,mBAAmB,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE,gBAAgB,CAG1E,CAAC;AACN,EAAE;AASF;AACO,MAAM,mBAAmB,GAAG,CAAuE,EACtG,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,KAAK,GAC0C,KAAkB;AACjE,IAAA,MAAM,YAAY,GAAGA,gBAAsB,EACtC,KAAK,IAAI,EAAE,GACZ,QAAQ,EACR,cAAc,CACjB,CAAC;AAEF,IAAA,QACIC,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAyE,EAAA,QAAA,EACxG,QAAQ,EAAA,CACiB,EAChC;AACN;;;;"}
+{"version":3,"file":"SelectStateContext.js","sources":["src/internal/SelectStateContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type ReactNode,\n    type ReactElement,\n    useState,\n    useSyncExternalStore,\n    useEffect,\n    useRef,\n} from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useSelectConfig } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport { SelectStore } from '@hh.ru/magritte-ui-new-select/internal/SelectStore';\nimport { assertSelectContext, value2Array } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';\n\nconst SelectStateContext = createContext<SelectStore<StaticDataFetcherItem> | null>(null);\n\n// возвращает ссылку на стор\nexport const useSelectStore = <DataType extends StaticDataFetcherItem>(): SelectStore<DataType> => {\n    return assertSelectContext(useContext(SelectStateContext), 'useSelectStore') as SelectStore<DataType>;\n};\n\n// возвращает реактивное состояние стора\nexport const useSelected = <DataType extends StaticDataFetcherItem>(\n    store: SelectStore<DataType>\n): readonly DataType[] => {\n    return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n};\n\ninterface SelectStateProviderNewProps<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {\n    children: ReactNode;\n    onChange?: (value: ValueTypeHelper<MultipleType, DataType>) => void;\n    value?: ValueTypeHelper<MultipleType, DataType>;\n}\n\n// выбранные значения, операции над ними и эмит внешнего onChange\nexport const SelectStateProvider = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    children,\n    onChange,\n    value: valueOrValuesExternal,\n}: SelectStateProviderNewProps<MultipleType, DataType>): ReactElement => {\n    const [store] = useState(() => new SelectStore(value2Array<MultipleType, DataType>(valueOrValuesExternal)));\n    const { multiple } = useSelectConfig();\n\n    // во время реакции на внешнее обновление value\n    // - эмитить внешний onChange НЕ нужно\n    // - но обновить дерево селекта нужно\n    const suppressOnChangeRef = useRef(false);\n\n    // эмит внешнего onChange для потребителей\n    useEffect(() => {\n        const storeUnsubscribe = store.subscribe(() => {\n            if (suppressOnChangeRef.current) {\n                return;\n            }\n            const selected = store.getSnapshot();\n            onChange?.((multiple ? [...selected] : selected[0]) as ValueTypeHelper<MultipleType, DataType>);\n        });\n        return storeUnsubscribe;\n    }, [store, multiple, onChange]);\n\n    // синк стора с внешним свойством\n    useEffect(() => {\n        suppressOnChangeRef.current = true;\n        try {\n            store.replace(value2Array<MultipleType, DataType>(valueOrValuesExternal));\n        } finally {\n            suppressOnChangeRef.current = false;\n        }\n    }, [store, valueOrValuesExternal]);\n\n    return <SelectStateContext.Provider value={store}>{children}</SelectStateContext.Provider>;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAiBA,MAAM,kBAAkB,GAAG,aAAa,CAA4C,IAAI,CAAC,CAAC;AAE1F;AACO,MAAM,cAAc,GAAG,MAAoE;IAC9F,OAAO,mBAAmB,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE,gBAAgB,CAA0B,CAAC;AAC1G,EAAE;AAEF;AACa,MAAA,WAAW,GAAG,CACvB,KAA4B,KACP;AACrB,IAAA,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AACvF,EAAE;AAQF;AACO,MAAM,mBAAmB,GAAG,CAAuE,EACtG,QAAQ,EACR,QAAQ,EACR,KAAK,EAAE,qBAAqB,GACsB,KAAkB;AACpE,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,WAAW,CAAC,WAAW,CAAyB,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAC5G,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;;;;AAKvC,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;IAG1C,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,MAAK;AAC1C,YAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;gBAC7B,OAAO;aACV;AACD,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;YACrC,QAAQ,IAAI,QAAQ,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAA6C,CAAC;AACpG,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,gBAAgB,CAAC;KAC3B,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;;IAGhC,SAAS,CAAC,MAAK;AACX,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACnC,QAAA,IAAI;YACA,KAAK,CAAC,OAAO,CAAC,WAAW,CAAyB,qBAAqB,CAAC,CAAC,CAAC;SAC7E;gBAAS;AACN,YAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;SACvC;AACL,KAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnC,OAAOA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAA+B,CAAC;AAC/F;;;;"}

package/internal/SelectStore.d.ts

@@ -0,0 +1,16 @@
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+type Listener = () => void;
+type Value = StaticDataFetcherItem['value'];
+export declare class SelectStore<DataType extends StaticDataFetcherItem> {
+    private values;
+    private readonly listeners;
+    constructor(initial?: readonly DataType[]);
+    getSnapshot: () => readonly DataType[];
+    subscribe: (listener: Listener) => VoidFunction;
+    replace(source: readonly DataType[]): void;
+    add(value: DataType): void;
+    remove(id: Value): void;
+    clear(): void;
+    private emit;
+}
+export {};

package/internal/SelectStore.js

@@ -0,0 +1,60 @@
+import './../index.css';
+import { isArraysEquals, extractValues } from './utils.js';
+import 'react';
+import '@hh.ru/magritte-common-keyboard';
+
+// стор хранит выбранные объекты, а не ids
+// внешний onChange должен получать DataType | DataType[]
+// массив опций меняется дата провайдером => нужно место, где хранить обьекты DataType
+class SelectStore {
+    values;
+    listeners = new Set();
+    constructor(initial = []) {
+        this.values = [...initial];
+    }
+    getSnapshot = () => {
+        return this.values;
+    };
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    replace(source) {
+        // идентичность выбранных элементов определяется через поле value
+        // так как value единственное поле которое StaticDataFetcherItem гарантирует
+        if (isArraysEquals(extractValues(this.values), extractValues(source))) {
+            return;
+        }
+        this.values = [...source];
+        this.emit();
+    }
+    add(value) {
+        if (this.values.some((item) => item.value === value.value)) {
+            return;
+        }
+        this.values = [...this.values, value];
+        this.emit();
+    }
+    remove(id) {
+        if (!this.values.some((item) => item.value === id)) {
+            return;
+        }
+        this.values = this.values.filter((item) => item.value !== id);
+        this.emit();
+    }
+    clear() {
+        if (this.values.length === 0) {
+            return;
+        }
+        this.values = [];
+        this.emit();
+    }
+    emit() {
+        this.listeners.forEach((listener) => listener());
+    }
+}
+
+export { SelectStore };
+//# sourceMappingURL=SelectStore.js.map

package/internal/SelectStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStore.js","sources":["src/internal/SelectStore.ts"],"sourcesContent":["import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { extractValues, isArraysEquals } from '@hh.ru/magritte-ui-new-select/internal/utils';\n\ntype Listener = () => void;\ntype Value = StaticDataFetcherItem['value'];\n\n// стор хранит выбранные объекты, а не ids\n// внешний onChange должен получать DataType | DataType[]\n// массив опций меняется дата провайдером => нужно место, где хранить обьекты DataType\nexport class SelectStore<DataType extends StaticDataFetcherItem> {\n    private values: readonly DataType[];\n    private readonly listeners = new Set<Listener>();\n\n    public constructor(initial: readonly DataType[] = []) {\n        this.values = [...initial];\n    }\n\n    public getSnapshot = (): readonly DataType[] => {\n        return this.values;\n    };\n\n    public subscribe = (listener: Listener): VoidFunction => {\n        this.listeners.add(listener);\n        return () => {\n            this.listeners.delete(listener);\n        };\n    };\n\n    public replace(source: readonly DataType[]): void {\n        // идентичность выбранных элементов определяется через поле value\n        // так как value единственное поле которое StaticDataFetcherItem гарантирует\n        if (isArraysEquals(extractValues<DataType>(this.values), extractValues<DataType>(source))) {\n            return;\n        }\n        this.values = [...source];\n        this.emit();\n    }\n\n    public add(value: DataType): void {\n        if (this.values.some((item) => item.value === value.value)) {\n            return;\n        }\n        this.values = [...this.values, value];\n        this.emit();\n    }\n\n    public remove(id: Value): void {\n        if (!this.values.some((item) => item.value === id)) {\n            return;\n        }\n        this.values = this.values.filter((item) => item.value !== id);\n        this.emit();\n    }\n\n    public clear(): void {\n        if (this.values.length === 0) {\n            return;\n        }\n        this.values = [];\n        this.emit();\n    }\n\n    private emit(): void {\n        this.listeners.forEach((listener) => listener());\n    }\n}\n"],"names":[],"mappings":";;;;AAMA;AACA;AACA;MACa,WAAW,CAAA;AACZ,IAAA,MAAM,CAAsB;AACnB,IAAA,SAAS,GAAG,IAAI,GAAG,EAAY,CAAC;AAEjD,IAAA,WAAA,CAAmB,UAA+B,EAAE,EAAA;AAChD,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;KAC9B;IAEM,WAAW,GAAG,MAA0B;QAC3C,OAAO,IAAI,CAAC,MAAM,CAAC;AACvB,KAAC,CAAC;AAEK,IAAA,SAAS,GAAG,CAAC,QAAkB,KAAkB;AACpD,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACpC,SAAC,CAAC;AACN,KAAC,CAAC;AAEK,IAAA,OAAO,CAAC,MAA2B,EAAA;;;AAGtC,QAAA,IAAI,cAAc,CAAC,aAAa,CAAW,IAAI,CAAC,MAAM,CAAC,EAAE,aAAa,CAAW,MAAM,CAAC,CAAC,EAAE;YACvF,OAAO;SACV;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;AAEM,IAAA,GAAG,CAAC,KAAe,EAAA;QACtB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE;YACxD,OAAO;SACV;QACD,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;AAEM,IAAA,MAAM,CAAC,EAAS,EAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE;YAChD,OAAO;SACV;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAEM,KAAK,GAAA;QACR,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1B,OAAO;SACV;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAEO,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC,CAAC;KACpD;AACJ;;;;"}

package/internal/VisibilityContext.js

@@ -1,3 +1,4 @@
+import './../index.css';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useCallback, useMemo } from 'react';
 import { assertSelectContext } from './utils.js';

package/internal/focusOrchestrator.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Идея focusOrchestrator заменить «команду через стейт» (forcedState или что-то такое)
+ * на менеджер передачи фокуса по принципу chain of responsibility
+ * Разделение:
+ *  - useFocusWithin - ушёл ли фокус из селекта наружу, обрабатывает onFocus/onBlur (внешние переходы)
+ *  - focusOrchestrator - кто держит фокус, куда его вернуть (внутренние)
+ */
+import { PropsWithChildren, FC } from 'react';
+export declare const FocusTier: {
+    readonly Trigger: 0;
+    readonly OptionsList: 2;
+};
+export type FocusTier = (typeof FocusTier)[keyof typeof FocusTier];
+/**
+ * Функция приёма фокуса кандидатом.
+ * Возвращает false, если сейчас принять фокус не может (оркестратор идёт к следующему по приоритету)
+ */
+type FocusAcceptor = () => boolean;
+export interface FocusOrchestrator {
+    registerCandidate(id: string, tier: FocusTier, accept: FocusAcceptor): () => void;
+    /**
+     * Оркестратор перебирает кандидатов по приоритету,
+     * Останавливается на первом, кто вернул true.
+     */
+    yieldFocus(): void;
+    /**
+     * Подписка для useFocusWithin: сигнал «состояние фокуса стабилизировалось».
+     * Пока идёт перенос, useFocusWithin откладывает разрешение blur.
+     */
+    subscribeStability(listener: (isStable: boolean) => void): () => void;
+}
+export declare const useFocusOrchestrator: () => FocusOrchestrator;
+export declare const useFocusCandidate: (id: string, tier: FocusTier, acceptExternal: FocusAcceptor) => void;
+export declare const FocusOrchestratorProvider: FC<PropsWithChildren>;
+export {};

package/internal/focusOrchestrator.js

@@ -0,0 +1,93 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useLayoutEffect, useRef, useReducer, useCallback, useMemo } from 'react';
+import { assertSelectContext, useEventCallback } from './utils.js';
+import '@hh.ru/magritte-common-keyboard';
+
+// меньшее значение = выше приоритет при возврате фокуса
+const FocusTier = {
+    Trigger: 0,
+    OptionsList: 2,
+};
+const FocusOrchestratorContext = createContext(null);
+const useFocusOrchestrator = () => {
+    return assertSelectContext(useContext(FocusOrchestratorContext), 'useFocusOrchestrator');
+};
+const useFocusCandidate = (id, tier, acceptExternal) => {
+    const orchestrator = useFocusOrchestrator();
+    const accept = useEventCallback(acceptExternal);
+    useLayoutEffect(() => {
+        if (!orchestrator) {
+            return void 0;
+        }
+        return orchestrator.registerCandidate(id, tier, accept);
+    }, [orchestrator, id, tier, accept]);
+};
+const FocusOrchestratorProvider = ({ children }) => {
+    const candidatesRef = useRef(new Map());
+    const isStableRef = useRef(true);
+    const stabilityListenersRef = useRef(new Set());
+    // Изменение version нужно только для запуска useLayoutEffect после commit.
+    const [flushVersion, requestFlush] = useReducer((version) => version + 1, 0);
+    const setStable = useCallback((isStable) => {
+        if (isStableRef.current === isStable) {
+            return;
+        }
+        isStableRef.current = isStable;
+        stabilityListenersRef.current.forEach((listener) => {
+            listener(isStable);
+        });
+    }, []);
+    const registerCandidate = useCallback((id, tier, accept) => {
+        const candidate = {
+            tier,
+            accept,
+        };
+        candidatesRef.current.set(id, candidate);
+        return () => {
+            if (candidatesRef.current.get(id) === candidate) {
+                candidatesRef.current.delete(id);
+            }
+        };
+    }, []);
+    const hasFocusRequestRef = useRef(false);
+    const yieldFocus = useCallback(() => {
+        hasFocusRequestRef.current = true;
+        // С этого момента useFocusWithin может отложить blur:
+        setStable(false);
+        // Не вызываем accept прямо здесь, ждем когда рякт откомитит
+        requestFlush();
+    }, [setStable]);
+    useLayoutEffect(() => {
+        if (!hasFocusRequestRef.current) {
+            return;
+        }
+        const candidates = [...candidatesRef.current.values()].sort((a, b) => a.tier - b.tier);
+        try {
+            for (const candidate of candidates) {
+                if (candidate.accept()) {
+                    break;
+                }
+            }
+        }
+        finally {
+            setStable(true);
+        }
+    }, [flushVersion, setStable]);
+    const subscribeStability = useCallback((listener) => {
+        stabilityListenersRef.current.add(listener);
+        listener(isStableRef.current);
+        return () => {
+            stabilityListenersRef.current.delete(listener);
+        };
+    }, []);
+    const value = useMemo(() => ({
+        registerCandidate,
+        yieldFocus,
+        subscribeStability,
+    }), [registerCandidate, yieldFocus, subscribeStability]);
+    return jsx(FocusOrchestratorContext.Provider, { value: value, children: children });
+};
+
+export { FocusOrchestratorProvider, FocusTier, useFocusCandidate, useFocusOrchestrator };
+//# sourceMappingURL=focusOrchestrator.js.map

package/internal/focusOrchestrator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusOrchestrator.js","sources":["src/internal/focusOrchestrator.tsx"],"sourcesContent":["/**\n * Идея focusOrchestrator заменить «команду через стейт» (forcedState или что-то такое)\n * на менеджер передачи фокуса по принципу chain of responsibility\n * Разделение:\n *  - useFocusWithin - ушёл ли фокус из селекта наружу, обрабатывает onFocus/onBlur (внешние переходы)\n *  - focusOrchestrator - кто держит фокус, куда его вернуть (внутренние)\n */\nimport {\n    createContext,\n    PropsWithChildren,\n    useCallback,\n    useContext,\n    useLayoutEffect,\n    useMemo,\n    useReducer,\n    useRef,\n    FC,\n} from 'react';\n\nimport { assertSelectContext, useEventCallback } from '@hh.ru/magritte-ui-new-select/internal/utils';\n\n// меньшее значение = выше приоритет при возврате фокуса\nexport const FocusTier = {\n    Trigger: 0,\n    OptionsList: 2,\n} as const;\n\nexport type FocusTier = (typeof FocusTier)[keyof typeof FocusTier];\n\n/**\n * Функция приёма фокуса кандидатом.\n * Возвращает false, если сейчас принять фокус не может (оркестратор идёт к следующему по приоритету)\n */\ntype FocusAcceptor = () => boolean;\n\nexport interface FocusOrchestrator {\n    // кандидат регистрируется, только когда реально фокусабелен\n    registerCandidate(id: string, tier: FocusTier, accept: FocusAcceptor): () => void;\n\n    /**\n     * Оркестратор перебирает кандидатов по приоритету,\n     * Останавливается на первом, кто вернул true.\n     */\n    yieldFocus(): void;\n\n    /**\n     * Подписка для useFocusWithin: сигнал «состояние фокуса стабилизировалось».\n     * Пока идёт перенос, useFocusWithin откладывает разрешение blur.\n     */\n    subscribeStability(listener: (isStable: boolean) => void): () => void;\n}\n\ninterface FocusCandidate {\n    tier: FocusTier;\n    accept: FocusAcceptor;\n}\n\nconst FocusOrchestratorContext = createContext<FocusOrchestrator | null>(null);\n\nexport const useFocusOrchestrator = (): FocusOrchestrator => {\n    return assertSelectContext(useContext(FocusOrchestratorContext), 'useFocusOrchestrator');\n};\n\nexport const useFocusCandidate = (id: string, tier: FocusTier, acceptExternal: FocusAcceptor): void => {\n    const orchestrator = useFocusOrchestrator();\n    const accept = useEventCallback(acceptExternal);\n\n    useLayoutEffect(() => {\n        if (!orchestrator) {\n            return void 0;\n        }\n        return orchestrator.registerCandidate(id, tier, accept);\n    }, [orchestrator, id, tier, accept]);\n};\n\nexport const FocusOrchestratorProvider: FC<PropsWithChildren> = ({ children }) => {\n    const candidatesRef = useRef<Map<string, FocusCandidate>>(new Map());\n\n    const isStableRef = useRef(true);\n    const stabilityListenersRef = useRef(new Set<(isStable: boolean) => void>());\n\n    // Изменение version нужно только для запуска useLayoutEffect после commit.\n    const [flushVersion, requestFlush] = useReducer((version: number) => version + 1, 0);\n\n    const setStable = useCallback((isStable: boolean) => {\n        if (isStableRef.current === isStable) {\n            return;\n        }\n        isStableRef.current = isStable;\n        stabilityListenersRef.current.forEach((listener) => {\n            listener(isStable);\n        });\n    }, []);\n\n    const registerCandidate = useCallback((id: string, tier: FocusTier, accept: FocusAcceptor): (() => void) => {\n        const candidate: FocusCandidate = {\n            tier,\n            accept,\n        };\n        candidatesRef.current.set(id, candidate);\n        return () => {\n            if (candidatesRef.current.get(id) === candidate) {\n                candidatesRef.current.delete(id);\n            }\n        };\n    }, []);\n\n    const hasFocusRequestRef = useRef(false);\n\n    const yieldFocus = useCallback(() => {\n        hasFocusRequestRef.current = true;\n        // С этого момента useFocusWithin может отложить blur:\n        setStable(false);\n        // Не вызываем accept прямо здесь, ждем когда рякт откомитит\n        requestFlush();\n    }, [setStable]);\n\n    useLayoutEffect(() => {\n        if (!hasFocusRequestRef.current) {\n            return;\n        }\n        const candidates = [...candidatesRef.current.values()].sort((a, b) => a.tier - b.tier);\n        try {\n            for (const candidate of candidates) {\n                if (candidate.accept()) {\n                    break;\n                }\n            }\n        } finally {\n            setStable(true);\n        }\n    }, [flushVersion, setStable]);\n\n    const subscribeStability = useCallback((listener: (isStable: boolean) => void): (() => void) => {\n        stabilityListenersRef.current.add(listener);\n        listener(isStableRef.current);\n        return () => {\n            stabilityListenersRef.current.delete(listener);\n        };\n    }, []);\n\n    const value = useMemo<FocusOrchestrator>(\n        () => ({\n            registerCandidate,\n            yieldFocus,\n            subscribeStability,\n        }),\n        [registerCandidate, yieldFocus, subscribeStability]\n    );\n\n    return <FocusOrchestratorContext.Provider value={value}>{children}</FocusOrchestratorContext.Provider>;\n};\n"],"names":["_jsx"],"mappings":"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"}

package/internal/slots.js

@@ -1,3 +1,4 @@
+import './../index.css';
 import { createSlotRegistry } from '@hh.ru/magritte-internal-slot-registry';
 
 // наличие кнопок влияет на аттрибуты доступности в пикере

package/internal/useDataProvider.d.ts

@@ -0,0 +1,8 @@
+import { StaticDataFetcherItem, DataProvider as DataProviderType } from '@hh.ru/magritte-common-data-provider';
+import { OnOptionsChangeCallback, SelectOption } from '@hh.ru/magritte-ui-new-select/types';
+export interface UseDataProvider<DataType extends StaticDataFetcherItem> {
+    internalError?: boolean;
+    internalLoading?: boolean;
+    optionList: SelectOption<DataType>[];
+}
+export declare const useDataProvider: <DataType extends StaticDataFetcherItem>(dataProvider: DataProviderType<DataType>, onOptionsChangeExternal?: OnOptionsChangeCallback<DataType>) => UseDataProvider<DataType>;

package/internal/{useSearch.js → useDataProvider.js}

@@ -1,23 +1,21 @@
+import './../index.css';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { DataProviderError } from '@hh.ru/magritte-common-data-provider';
+import { useSearchState } from './SearchStateContext.js';
 import { useVisibility } from './VisibilityContext.js';
 import 'react/jsx-runtime';
 import './utils.js';
 import '@hh.ru/magritte-common-keyboard';
 
 const EMPTY_OPTION_LIST = [];
-const useSearch = (dataProvider, onOptionsChangeExternal) => {
+const useDataProvider = (dataProvider, onOptionsChangeExternal) => {
+    const { searchValue } = useSearchState();
     const { showOptions } = useVisibility();
-    const [searchValue, setSearchValue] = useState('');
     const [optionList, setOptionList] = useState(EMPTY_OPTION_LIST);
     const [internalError, setInternalError] = useState(false);
     const [optionsLoading, setOptionsLoading] = useState(false);
     const currentRequestRef = useRef();
-    // TODO loading/inProgress реализовать в отдельном компоненте
-    // const loadingTimeoutRef = useRef<number>(0);
-    // const inProgressTimeoutRef = useRef<number>(0);
-    // const [searchInProgress, setSearchInProgress] = useState(false);
-    const updateOptionsFromProvider = useCallback((text) => {
+    const searchRequest = useCallback((text) => {
         if (!dataProvider) {
             return;
         }
@@ -69,27 +67,11 @@ const useSearch = (dataProvider, onOptionsChangeExternal) => {
         notifiedListRef.current = optionList;
         onOptionsChangeExternal?.(optionList);
     }, [optionList, onOptionsChangeExternal]);
-    // обрабатываем обновление провайдера из клиента
+    // фетчим при смене провайдера или поискового запроса
     useEffect(() => {
-        updateOptionsFromProvider(searchValue);
+        searchRequest(searchValue);
         // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
-    }, [dataProvider]);
-    // TODO убрать в тригер/пикер
-    // сбрасываем select при закрытии компонента
-    /* useEffect(() => {
-        if (!showOptions) {
-            setSearchValue('');
-            updateOptionsFromProvider('');
-        }
-        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
-    }, [showOptions]);
-
-    // обрабатываем поиск
-
-    useEffect(() => {
-        updateOptionsFromProvider(searchValue);
-        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
-    }, [searchValue]);*/
+    }, [dataProvider, searchValue]);
     // после анмаунта надо отменить все запросы
     useEffect(() => () => {
         currentRequestRef.current?.cancel();
@@ -98,10 +80,8 @@ const useSearch = (dataProvider, onOptionsChangeExternal) => {
         internalError,
         internalLoading: optionsLoading && showOptions,
         optionList,
-        searchValue,
-        setSearchValue,
-    }), [internalError, optionList, optionsLoading, searchValue, setSearchValue, showOptions]);
+    }), [internalError, optionList, optionsLoading, showOptions]);
 };
 
-export { useSearch };
-//# sourceMappingURL=useSearch.js.map
+export { useDataProvider };
+//# sourceMappingURL=useDataProvider.js.map

package/internal/useDataProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataProvider.js","sources":["src/internal/useDataProvider.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n    StaticDataFetcherItem,\n    DataProvider as DataProviderType,\n    DataProviderError,\n} from '@hh.ru/magritte-common-data-provider';\nimport { DataProviderRequest } from '@hh.ru/magritte-common-data-provider/types';\nimport { useSearchState } from '@hh.ru/magritte-ui-new-select/internal/SearchStateContext';\nimport { useVisibility } from '@hh.ru/magritte-ui-new-select/internal/VisibilityContext';\nimport { OnOptionsChangeCallback, SelectOption } from '@hh.ru/magritte-ui-new-select/types';\n\nconst EMPTY_OPTION_LIST: never[] = [];\n\nexport interface UseDataProvider<DataType extends StaticDataFetcherItem> {\n    internalError?: boolean;\n    internalLoading?: boolean;\n    optionList: SelectOption<DataType>[];\n}\n\nexport const useDataProvider = <DataType extends StaticDataFetcherItem>(\n    dataProvider: DataProviderType<DataType>,\n    onOptionsChangeExternal?: OnOptionsChangeCallback<DataType>\n): UseDataProvider<DataType> => {\n    const { searchValue } = useSearchState();\n    const { showOptions } = useVisibility();\n    const [optionList, setOptionList] = useState<SelectOption<DataType>[]>(EMPTY_OPTION_LIST);\n    const [internalError, setInternalError] = useState(false);\n    const [optionsLoading, setOptionsLoading] = useState(false);\n    const currentRequestRef = useRef<DataProviderRequest>();\n\n    const searchRequest = useCallback(\n        (text: string) => {\n            if (!dataProvider) {\n                return;\n            }\n            setInternalError(false);\n            currentRequestRef.current?.cancel();\n            const request = dataProvider(text);\n            currentRequestRef.current = request;\n            request\n                .then((result) => {\n                    currentRequestRef.current = undefined;\n                    const newOptions: SelectOption<DataType>[] = [];\n                    result.forEach((section) => {\n                        if (section.type === 'delimiter') {\n                            newOptions.push({\n                                data: { text: section.text, value: section.text } as DataType,\n                                type: 'delimiter',\n                            });\n                        }\n                        if (section.type === 'cells') {\n                            section.items.forEach((item) => {\n                                newOptions.push({\n                                    data: item.data ? item.data : ({ text: item.value, value: item.value } as DataType),\n                                    disabled: item.disabled,\n                                });\n                            });\n                        }\n                    });\n\n                    const hasRealOptions = newOptions.some((item) => item.type !== 'delimiter');\n                    setOptionList(hasRealOptions ? newOptions : EMPTY_OPTION_LIST);\n                })\n                .catch((error) => {\n                    // включаем error state если это НЕ ошибка\n                    // вызванная `minCharsCount` или отменненым запросом\n                    if (!(error instanceof DataProviderError)) {\n                        setInternalError(true);\n                        setOptionList(EMPTY_OPTION_LIST);\n                    }\n                })\n                .finally(() => {\n                    setOptionsLoading(false);\n                });\n        },\n        [dataProvider]\n    );\n\n    // уведомляем клиента об изменении списка опций вне фазы рендера (только при реальной смене ссылки)\n    const notifiedListRef = useRef(optionList);\n    useEffect(() => {\n        if (notifiedListRef.current === optionList) {\n            return;\n        }\n        notifiedListRef.current = optionList;\n        onOptionsChangeExternal?.(optionList);\n    }, [optionList, onOptionsChangeExternal]);\n\n    // фетчим при смене провайдера или поискового запроса\n    useEffect(() => {\n        searchRequest(searchValue);\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [dataProvider, searchValue]);\n\n    // после анмаунта надо отменить все запросы\n    useEffect(\n        () => () => {\n            currentRequestRef.current?.cancel();\n        },\n        []\n    );\n\n    return useMemo(\n        () => ({\n            internalError,\n            internalLoading: optionsLoading && showOptions,\n            optionList,\n        }),\n        [internalError, optionList, optionsLoading, showOptions]\n    );\n};\n"],"names":[],"mappings":"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"}

package/internal/useFocusWithin.d.ts

@@ -0,0 +1,11 @@
+import { FocusEventHandler } from 'react';
+interface UseFocusWithin {
+    onFocus: FocusEventHandler;
+    onBlur: FocusEventHandler;
+}
+/**
+ * Отслеживает, находится ли фокус внутри поддерева, слушая всплывающие
+ * React-события onFocus/onBlur на одном контейнере.
+ */
+export declare const useFocusWithin: (onFocusWithinExternal: (event: FocusEvent) => void, onBlurWithinExternal: (event: FocusEvent) => void, subscribeStability?: (listener: (isStable: boolean) => void) => () => void, predicateBlurExternal?: (event: FocusEvent) => boolean) => UseFocusWithin;
+export {};

package/internal/useFocusWithin.js

@@ -0,0 +1,87 @@
+import './../index.css';
+import { useRef, useCallback, useLayoutEffect } from 'react';
+import { useEventCallback } from './utils.js';
+import '@hh.ru/magritte-common-keyboard';
+
+/**
+ * Отслеживает, находится ли фокус внутри поддерева, слушая всплывающие
+ * React-события onFocus/onBlur на одном контейнере.
+ */
+const useFocusWithin = (
+// фокус зашёл в поддерево целиком (извне)
+onFocusWithinExternal, 
+// фокус покинул поддерево целиком (наружу, не между детьми)
+onBlurWithinExternal, 
+// подписка "идёт ли сейчас внутренний перенос фокуса"
+subscribeStability, 
+// некоторые компоненты составные
+// иногда надо проверить inline компонент и дроп, которым он управляет
+predicateBlurExternal) => {
+    const isFocusWithinRef = useRef(false);
+    // Событие blur, по которому ещё не принято решение
+    const pendingBlurRef = useRef(null);
+    // Если false — оркестратор сейчас передаёт фокус.
+    const isStableRef = useRef(true);
+    const onFocusWithin = useEventCallback(onFocusWithinExternal);
+    const onBlurWithin = useEventCallback(onBlurWithinExternal);
+    const predicateBlur = useEventCallback(predicateBlurExternal);
+    /**
+     * Пытаемся завершить pending blur.
+     * Если оркестратор ещё переносит фокус — ничего не делаем.
+     */
+    const commitPendingBlur = useCallback(() => {
+        const pendingBlur = pendingBlurRef.current;
+        if (!pendingBlur) {
+            return;
+        }
+        if (!isStableRef.current) {
+            return;
+        }
+        if (predicateBlur?.(pendingBlur)) {
+            pendingBlurRef.current = null;
+            return;
+        }
+        pendingBlurRef.current = null;
+        isFocusWithinRef.current = false;
+        onBlurWithin(pendingBlur);
+    }, [onBlurWithin, predicateBlur]);
+    /**
+     * Когда внутренний перенос закончился:
+     * - если новый элемент уже получил focus, pendingBlur будет null;
+     * - если никто не принял focus, завершаем настоящий blur.
+     */
+    useLayoutEffect(() => {
+        if (!subscribeStability) {
+            return void 0;
+        }
+        const unsubscribeStability = subscribeStability((isStable) => {
+            isStableRef.current = isStable;
+            if (isStable) {
+                queueMicrotask(commitPendingBlur);
+            }
+        });
+        return unsubscribeStability;
+    }, [subscribeStability, commitPendingBlur]);
+    const onFocus = useCallback((event) => {
+        pendingBlurRef.current = null;
+        if (!isFocusWithinRef.current) {
+            isFocusWithinRef.current = true;
+            onFocusWithin(event.nativeEvent);
+        }
+    }, [onFocusWithin]);
+    const onBlur = useCallback((event) => {
+        if (!isFocusWithinRef.current) {
+            return;
+        }
+        // Пока не считаем это настоящим выходом.
+        pendingBlurRef.current = event.nativeEvent;
+        queueMicrotask(commitPendingBlur);
+    }, [commitPendingBlur]);
+    return {
+        onFocus,
+        onBlur,
+    };
+};
+
+export { useFocusWithin };
+//# sourceMappingURL=useFocusWithin.js.map

package/internal/useFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin.js","sources":["src/internal/useFocusWithin.ts"],"sourcesContent":["import { FocusEventHandler, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { useEventCallback } from '@hh.ru/magritte-ui-new-select/internal/utils';\n\ninterface UseFocusWithin {\n    onFocus: FocusEventHandler;\n    onBlur: FocusEventHandler;\n}\n\n/**\n * Отслеживает, находится ли фокус внутри поддерева, слушая всплывающие\n * React-события onFocus/onBlur на одном контейнере.\n */\nexport const useFocusWithin = (\n    // фокус зашёл в поддерево целиком (извне)\n    onFocusWithinExternal: (event: FocusEvent) => void,\n    // фокус покинул поддерево целиком (наружу, не между детьми)\n    onBlurWithinExternal: (event: FocusEvent) => void,\n    // подписка \"идёт ли сейчас внутренний перенос фокуса\"\n    subscribeStability?: (listener: (isStable: boolean) => void) => () => void,\n    // некоторые компоненты составные\n    // иногда надо проверить inline компонент и дроп, которым он управляет\n    predicateBlurExternal?: (event: FocusEvent) => boolean\n): UseFocusWithin => {\n    const isFocusWithinRef = useRef(false);\n\n    // Событие blur, по которому ещё не принято решение\n    const pendingBlurRef = useRef<FocusEvent | null>(null);\n\n    // Если false — оркестратор сейчас передаёт фокус.\n    const isStableRef = useRef(true);\n\n    const onFocusWithin = useEventCallback(onFocusWithinExternal);\n    const onBlurWithin = useEventCallback(onBlurWithinExternal);\n    const predicateBlur = useEventCallback(predicateBlurExternal);\n\n    /**\n     * Пытаемся завершить pending blur.\n     * Если оркестратор ещё переносит фокус — ничего не делаем.\n     */\n    const commitPendingBlur = useCallback(() => {\n        const pendingBlur = pendingBlurRef.current;\n\n        if (!pendingBlur) {\n            return;\n        }\n\n        if (!isStableRef.current) {\n            return;\n        }\n\n        if (predicateBlur?.(pendingBlur)) {\n            pendingBlurRef.current = null;\n            return;\n        }\n\n        pendingBlurRef.current = null;\n        isFocusWithinRef.current = false;\n\n        onBlurWithin(pendingBlur);\n    }, [onBlurWithin, predicateBlur]);\n\n    /**\n     * Когда внутренний перенос закончился:\n     * - если новый элемент уже получил focus, pendingBlur будет null;\n     * - если никто не принял focus, завершаем настоящий blur.\n     */\n    useLayoutEffect(() => {\n        if (!subscribeStability) {\n            return void 0;\n        }\n        const unsubscribeStability = subscribeStability((isStable) => {\n            isStableRef.current = isStable;\n\n            if (isStable) {\n                queueMicrotask(commitPendingBlur);\n            }\n        });\n        return unsubscribeStability;\n    }, [subscribeStability, commitPendingBlur]);\n\n    const onFocus = useCallback<FocusEventHandler>(\n        (event) => {\n            pendingBlurRef.current = null;\n            if (!isFocusWithinRef.current) {\n                isFocusWithinRef.current = true;\n                onFocusWithin(event.nativeEvent);\n            }\n        },\n        [onFocusWithin]\n    );\n\n    const onBlur = useCallback<FocusEventHandler>(\n        (event) => {\n            if (!isFocusWithinRef.current) {\n                return;\n            }\n            // Пока не считаем это настоящим выходом.\n            pendingBlurRef.current = event.nativeEvent;\n            queueMicrotask(commitPendingBlur);\n        },\n        [commitPendingBlur]\n    );\n\n    return {\n        onFocus,\n        onBlur,\n    };\n};\n"],"names":[],"mappings":";;;;AASA;;;AAGG;AACU,MAAA,cAAc,GAAG;AAC1B;AACA,qBAAkD;AAClD;AACA,oBAAiD;AACjD;AACA,kBAA0E;AAC1E;AACA;AACA,qBAAsD,KACtC;AAChB,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;AAGvC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;;AAGvD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEjC,IAAA,MAAM,aAAa,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;AAC9D,IAAA,MAAM,YAAY,GAAG,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAC5D,IAAA,MAAM,aAAa,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;AAE9D;;;AAGG;AACH,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC;QAE3C,IAAI,CAAC,WAAW,EAAE;YACd,OAAO;SACV;AAED,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACtB,OAAO;SACV;AAED,QAAA,IAAI,aAAa,GAAG,WAAW,CAAC,EAAE;AAC9B,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,OAAO;SACV;AAED,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;AAC9B,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;QAEjC,YAAY,CAAC,WAAW,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;AAElC;;;;AAIG;IACH,eAAe,CAAC,MAAK;QACjB,IAAI,CAAC,kBAAkB,EAAE;YACrB,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,CAAC,QAAQ,KAAI;AACzD,YAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;YAE/B,IAAI,QAAQ,EAAE;gBACV,cAAc,CAAC,iBAAiB,CAAC,CAAC;aACrC;AACL,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,oBAAoB,CAAC;AAChC,KAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAE5C,IAAA,MAAM,OAAO,GAAG,WAAW,CACvB,CAAC,KAAK,KAAI;AACN,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;AAC3B,YAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;AAChC,YAAA,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;SACpC;AACL,KAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;AAEF,IAAA,MAAM,MAAM,GAAG,WAAW,CACtB,CAAC,KAAK,KAAI;AACN,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YAC3B,OAAO;SACV;;AAED,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;QAC3C,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,KAAC,EACD,CAAC,iBAAiB,CAAC,CACtB,CAAC;IAEF,OAAO;QACH,OAAO;QACP,MAAM;KACT,CAAC;AACN;;;;"}

package/internal/utils.d.ts

@@ -1,7 +1,11 @@
 import { SyntheticEvent } from 'react';
 import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+import { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';
 export declare const isArraysEquals: <T>(arrayA: T[], arrayB: T[]) => boolean;
 export declare const assertSelectContext: <T>(value: T | null, hookName: string) => T;
 export declare const useEventCallback: <Callback extends (...args: never[]) => unknown>(callback: Callback | undefined) => Callback;
-export declare const useSelectedLabels: <DataType extends StaticDataFetcherItem>(values: DataType | DataType[]) => string[];
+export declare const useSelectedLabels: <DataType extends StaticDataFetcherItem>(values: readonly DataType[]) => string[];
+export declare const value2Array: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(value: ValueTypeHelper<MultipleType, DataType> | undefined) => DataType[];
+export declare const extractValues: <DataType extends StaticDataFetcherItem>(items: readonly DataType[]) => string[];
 export declare const focusOptionsList: (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: "up" | "down") => void;
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;

package/internal/utils.js

@@ -1,7 +1,8 @@
+import './../index.css';
 import { useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import { findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
 
-// но не проверяет порядок и дубликаты
+// не проверяет порядок и дубликаты
 const isArraysEquals = (arrayA, arrayB) => arrayA.length === arrayB.length && arrayA.every((item) => arrayB.includes(item));
 // убирает `null` с контекста и падает с внятной ошибкой
 const assertSelectContext = (value, hookName) => {
@@ -24,10 +25,21 @@ const useEventCallback = (callback) => {
 // placeholder в тригерах собирается одинаково
 const useSelectedLabels = (values) => {
     return useMemo(() => {
-        const selectedItems = Array.isArray(values) ? values : [values].filter(Boolean);
-        return selectedItems.map((item) => item.text ?? item.value);
+        return values.map((item) => item.text ?? item.value);
     }, [values]);
 };
+// single select работает с обьектом DataType, multiple с массивом
+const value2Array = (value) => {
+    if (!value) {
+        return [];
+    }
+    return (Array.isArray(value) ? value : [value]);
+};
+// достает value из DataType на базе StaticDataFetcherItem
+const extractValues = (items) => {
+    return items.map((item) => item.value);
+};
+// навигация по дропу
 const focusOptionsList = (event, drop, direction) => {
     if (drop) {
         const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');
@@ -38,5 +50,5 @@ const focusOptionsList = (event, drop, direction) => {
     }
 };
 
-export { assertSelectContext, focusOptionsList, isArraysEquals, useEventCallback, useSelectedLabels };
+export { assertSelectContext, extractValues, focusOptionsList, isArraysEquals, useEventCallback, useSelectedLabels, value2Array };
 //# sourceMappingURL=utils.js.map