@hh.ru/magritte-ui-tree-selector 3.1.2 → 4.0.1

package/MobileItemsList.js

@@ -1,19 +1,23 @@
 import './index.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, useCallback } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import classnames from 'classnames';
 import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
 import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import { Action } from './Action.js';
 import { MobileDelimiter } from './MobileDelimiter.js';
 import { MobileItem } from './MobileItem.js';
 import { MobileParentItem } from './MobileParentItem.js';
+import { s as styles } from './tree-selector-item-B5qJBEp2.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-typography';
 import './TreeSelectorItemBase.js';
 
+const DEFAULT_ITEM_HEIGHT = 56;
 const MobileItemsListComponent = (props, ref) => {
-    const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getMobileSearchItemOrder, setInputValue, handleChangeInput, isSearch, renderMobileDelimiter, renderItem, contentFilterQuery, getSelectAllParentTrl, onMobileNavigationChange, } = props;
+    const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getMobileSearchItemOrder, setInputValue, handleChangeInput, isSearch, renderMobileDelimiter, renderItem, contentFilterQuery, getSelectAllParentTrl, renderContentBefore, onMobileNavigationChange, } = props;
     const navigationChangeCallback = useRef(onMobileNavigationChange);
     navigationChangeCallback.current = onMobileNavigationChange;
     const prevParentIds = useRef([]);
@@ -21,18 +25,40 @@ const MobileItemsListComponent = (props, ref) => {
     const currentQuery = useRef(contentFilterQuery);
     const [currentParentId, setCurrentParentId] = useState();
     const items = useMemo(() => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()), [currentParentId, collection]);
-    const { itemsByOrder, sortedOrders } = useMemo(() => {
-        const orders = new Set();
-        const itemsByOrder = items.reduce((acc, item) => {
-            const modelOrder = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;
-            orders.add(modelOrder);
-            acc[modelOrder] = acc[modelOrder] || [];
-            acc[modelOrder].push(item);
+    const orderHashMap = useMemo(() => {
+        return items.reduce((acc, item) => {
+            acc[item.id] = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;
             return acc;
         }, {});
-        return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };
     }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);
+    const sortedItems = useMemo(() => {
+        return items.sort((itemA, itemB) => {
+            return orderHashMap[itemA.id] - orderHashMap[itemB.id];
+        });
+    }, [items, orderHashMap]);
     const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);
+    const withContentBefore = !!renderContentBefore;
+    const count = items.length + (isSelectable ? 1 : 0) + (withContentBefore ? 1 : 0);
+    const parentRef = useRef(null);
+    const getItemKey = (index) => {
+        if (withContentBefore && index === 0) {
+            return 'promo';
+        }
+        const isSelectAllItem = isSelectable && ((index === 0 && !withContentBefore) || (index === 1 && withContentBefore));
+        if (isSelectAllItem) {
+            return `current${currentParentId}`;
+        }
+        const itemIndex = index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);
+        const item = sortedItems[itemIndex];
+        return currentParentId ? `${currentParentId}${item.id}` : `${item.id}`;
+    };
+    const virtualizer = useVirtualizer({
+        count,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => DEFAULT_ITEM_HEIGHT,
+        getItemKey,
+    });
+    const itemsVirtualizer = virtualizer.getVirtualItems();
     useEffect(() => {
         setCurrentParentId(undefined);
         prevParentIds.current = [];
@@ -42,40 +68,68 @@ const MobileItemsListComponent = (props, ref) => {
     }, [contentFilterQuery]);
     useImperativeHandle(ref, () => ({
         back: () => {
-            const prevParentId = prevParentIds.current.pop();
-            setCurrentParentId(prevParentId);
-            navigationChangeCallback.current?.(prevParentId);
-            if (prevQueries.current.length) {
-                const prevInputValue = prevQueries.current.pop();
-                setInputValue(prevInputValue);
-                currentQuery.current = prevInputValue;
-            }
-            else {
-                handleChangeInput('');
+            if (!virtualizer.isScrolling) {
+                const prevParentId = prevParentIds.current.pop();
+                setCurrentParentId(prevParentId);
+                navigationChangeCallback.current?.(prevParentId);
+                if (prevQueries.current.length) {
+                    const prevInputValue = prevQueries.current.pop();
+                    setInputValue(prevInputValue);
+                    currentQuery.current = prevInputValue;
+                }
+                else {
+                    handleChangeInput('');
+                }
             }
         },
-    }), [handleChangeInput, setInputValue]);
-    return (jsxs(Fragment, { children: [isSelectable && (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: selected.includes(currentParentId), "data-qa": `tree-selector-select-all-${currentParentId}`, children: jsx(Cell, { Element: 'div', disabled: disabled.includes(currentParentId), right: jsx(Action, { selected: selected.includes(currentParentId), onChange: onChange, id: currentParentId, singleChoice: singleChoice }), children: jsx(CellText, { children: getSelectAllParentTrl(currentParentId) }) }) })), sortedOrders.map((order) => {
-                return itemsByOrder[order].map((item, index) => {
-                    const hasChildren = collection.hasChildren(item.id);
-                    const hasLetter = item.additional?.char && !isSearch;
-                    const delimiterContent = renderMobileDelimiter?.({
-                        item,
-                        order,
-                        isSearch,
-                        index,
-                        isTopLevel: !currentParentId,
-                    });
-                    return (jsxs(Fragment$1, { children: [hasLetter && jsx(MobileDelimiter, { children: item.additional?.char }), delimiterContent && jsx(MobileDelimiter, { children: delimiterContent }), hasChildren ? (jsx(MobileParentItem, { collection: collection, item: item, selected: selected, onClick: () => {
-                                    prevParentIds.current.push(currentParentId);
-                                    prevQueries.current.push(currentQuery.current);
-                                    setCurrentParentId(item.id);
-                                    setInputValue('');
-                                    currentQuery.current = '';
-                                    navigationChangeCallback.current?.(item.id);
-                                }, isSearch: isSearch, renderItem: renderItem })) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), isDisabled: disabled.includes(item.id), onChange: onChange, isSearch: isSearch, renderItem: renderItem }, item.id))] }, item.id));
-                });
-            })] }));
+    }), [handleChangeInput, setInputValue, virtualizer]);
+    const refCallback = useCallback((node) => {
+        parentRef.current = node ? node.parentElement : null;
+    }, []);
+    useEffect(() => {
+        virtualizer.scrollToOffset(0);
+    }, [currentParentId, sortedItems, virtualizer]);
+    return (jsx("div", { ref: refCallback, className: styles.virtualizedList, style: {
+            height: `${virtualizer.getTotalSize()}px`,
+        }, children: itemsVirtualizer.map((virtualItem) => {
+            const isContentBeforeItem = withContentBefore && virtualItem.index === 0;
+            const isSelectAllItem = isSelectable &&
+                ((virtualItem.index === 0 && !withContentBefore) || (virtualItem.index === 1 && withContentBefore));
+            if (isContentBeforeItem) {
+                return (jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, className: styles.virtualizedItem, style: {
+                        transform: `translateY(${virtualItem.start}px)`,
+                    }, children: renderContentBefore(isSearch) }, virtualItem.key));
+            }
+            if (isSelectAllItem) {
+                return (jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, className: styles.virtualizedItem, style: {
+                        transform: `translateY(${virtualItem.start}px)`,
+                    }, children: jsx("div", { className: styles.mobileItem, children: jsx(CheckableCardElement, { padding: 16, flexible: true, borderRadius: 12, Element: "label", checked: selected.includes(currentParentId), "data-qa": `tree-selector-select-all-${currentParentId}`, children: jsx(Cell, { Element: 'div', disabled: disabled.includes(currentParentId), right: jsx(Action, { selected: selected.includes(currentParentId), onChange: onChange, id: currentParentId, singleChoice: singleChoice }), children: jsx(CellText, { children: getSelectAllParentTrl(currentParentId) }) }) }) }) }, virtualItem.key));
+            }
+            const itemIndex = virtualItem.index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);
+            const item = sortedItems[itemIndex];
+            const hasChildren = collection.hasChildren(item.id);
+            const hasLetter = item.additional?.char && !isSearch;
+            const delimiterContent = renderMobileDelimiter?.({
+                item,
+                order: orderHashMap[item.id],
+                isSearch,
+                index: itemIndex,
+                isTopLevel: !currentParentId,
+            });
+            const withGap = (!!withContentBefore && virtualItem.index !== 1) || (!withContentBefore && virtualItem.index !== 0);
+            return (jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, style: {
+                    transform: `translateY(${virtualItem.start}px)`,
+                }, className: classnames(styles.virtualizedItem, {
+                    [styles.withGap]: withGap,
+                }), children: jsxs("div", { className: styles.mobileItem, children: [hasLetter && jsx(MobileDelimiter, { children: item.additional?.char }), delimiterContent && jsx(MobileDelimiter, { children: delimiterContent }), hasChildren ? (jsx(MobileParentItem, { collection: collection, item: item, selected: selected, onClick: () => {
+                                prevParentIds.current.push(currentParentId);
+                                prevQueries.current.push(currentQuery.current);
+                                setCurrentParentId(item.id);
+                                setInputValue('');
+                                currentQuery.current = '';
+                                navigationChangeCallback.current?.(item.id);
+                            }, isSearch: isSearch, renderItem: renderItem })) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), isDisabled: disabled.includes(item.id), onChange: onChange, isSearch: isSearch, renderItem: renderItem }))] }) }, virtualItem.key));
+        }) }));
 };
 const MobileItemsList = forwardRef(MobileItemsListComponent);
 

package/MobileItemsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n    ReactElement,\n    Fragment,\n    useMemo,\n    useState,\n    useImperativeHandle,\n    forwardRef,\n    ForwardedRef,\n    useRef,\n    useEffect,\n} from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype MobileItemsListProps<Additional extends AdditionalDefault> = {\n    selected: string[];\n    disabled: string[];\n    getMobileSearchItemOrder: (model: TreeModel<Additional>) => number;\n    setInputValue: (newValue: string) => void;\n    handleChangeInput: (newValue: string) => void;\n    contentFilterQuery: string;\n    isSearch: boolean;\n} & Pick<\n    TreeSelectorDummyProps<Additional>,\n    | 'collection'\n    | 'leavesOnly'\n    | 'singleChoice'\n    | 'checkSelectable'\n    | 'onChange'\n    | 'renderItem'\n    | 'renderMobileDelimiter'\n    | 'onMobileNavigationChange'\n    | 'getSelectAllParentTrl'\n>;\n\nconst MobileItemsListComponent = <Additional extends AdditionalDefault>(\n    props: MobileItemsListProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        collection,\n        selected,\n        disabled,\n        leavesOnly,\n        singleChoice,\n        onChange,\n        checkSelectable,\n        getMobileSearchItemOrder,\n        setInputValue,\n        handleChangeInput,\n        isSearch,\n        renderMobileDelimiter,\n        renderItem,\n        contentFilterQuery,\n        getSelectAllParentTrl,\n        onMobileNavigationChange,\n    } = props;\n    const navigationChangeCallback = useRef(onMobileNavigationChange);\n    navigationChangeCallback.current = onMobileNavigationChange;\n    const prevParentIds = useRef<(string | undefined)[]>([]);\n    const prevQueries = useRef<string[]>([]);\n    const currentQuery = useRef(contentFilterQuery);\n    const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n    const items = useMemo(\n        () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n        [currentParentId, collection]\n    );\n    const { itemsByOrder, sortedOrders } = useMemo(() => {\n        const orders = new Set<number>();\n        const itemsByOrder = items.reduce<Record<number, TreeModel<Additional>[]>>((acc, item) => {\n            const modelOrder = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;\n            orders.add(modelOrder);\n            acc[modelOrder] = acc[modelOrder] || [];\n            acc[modelOrder].push(item);\n            return acc;\n        }, {});\n        return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };\n    }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);\n\n    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n    useEffect(() => {\n        setCurrentParentId(undefined);\n        prevParentIds.current = [];\n        prevQueries.current = [];\n        navigationChangeCallback.current?.(undefined);\n        currentQuery.current = contentFilterQuery;\n    }, [contentFilterQuery]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            back: () => {\n                const prevParentId = prevParentIds.current.pop();\n                setCurrentParentId(prevParentId);\n                navigationChangeCallback.current?.(prevParentId);\n                if (prevQueries.current.length) {\n                    const prevInputValue = prevQueries.current.pop() as string;\n                    setInputValue(prevInputValue);\n                    currentQuery.current = prevInputValue;\n                } else {\n                    handleChangeInput('');\n                }\n            },\n        }),\n        [handleChangeInput, setInputValue]\n    );\n    return (\n        <>\n            {isSelectable && (\n                <CheckableCardElement\n                    padding={16}\n                    borderRadius={12}\n                    Element=\"label\"\n                    checked={selected.includes(currentParentId)}\n                    data-qa={`tree-selector-select-all-${currentParentId}`}\n                >\n                    <Cell\n                        Element={'div'}\n                        disabled={disabled.includes(currentParentId)}\n                        right={\n                            <Action\n                                selected={selected.includes(currentParentId)}\n                                onChange={onChange}\n                                id={currentParentId}\n                                singleChoice={singleChoice}\n                            />\n                        }\n                    >\n                        <CellText>{getSelectAllParentTrl(currentParentId)}</CellText>\n                    </Cell>\n                </CheckableCardElement>\n            )}\n            {sortedOrders.map((order) => {\n                return itemsByOrder[order].map((item, index) => {\n                    const hasChildren = collection.hasChildren(item.id);\n                    const hasLetter = item.additional?.char && !isSearch;\n                    const delimiterContent = renderMobileDelimiter?.({\n                        item,\n                        order,\n                        isSearch,\n                        index,\n                        isTopLevel: !currentParentId,\n                    });\n                    return (\n                        <Fragment key={item.id}>\n                            {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n                            {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n                            {hasChildren ? (\n                                <MobileParentItem\n                                    collection={collection}\n                                    item={item}\n                                    selected={selected}\n                                    onClick={() => {\n                                        prevParentIds.current.push(currentParentId);\n                                        prevQueries.current.push(currentQuery.current);\n                                        setCurrentParentId(item.id);\n                                        setInputValue('');\n                                        currentQuery.current = '';\n                                        navigationChangeCallback.current?.(item.id);\n                                    }}\n                                    isSearch={isSearch}\n                                    renderItem={renderItem}\n                                />\n                            ) : (\n                                <MobileItem\n                                    key={item.id}\n                                    item={item}\n                                    singleChoice={singleChoice}\n                                    isSelectable={checkSelectable?.(item.id, collection)}\n                                    isSelected={selected.includes(item.id)}\n                                    isDisabled={disabled.includes(item.id)}\n                                    onChange={onChange}\n                                    isSearch={isSearch}\n                                    renderItem={renderItem}\n                                />\n                            )}\n                        </Fragment>\n                    );\n                });\n            })}\n        </>\n    );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <Additional extends AdditionalDefault>(\n    props: MobileItemsListProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsxs","_jsx","Fragment"],"mappings":";;;;;;;;;;;;;AA0CA,MAAM,wBAAwB,GAAG,CAC7B,KAAuC,EACvC,GAA+B,KACjB;AACd,IAAA,MAAM,EACF,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,wBAAwB,EACxB,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAC3B,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC;AAClE,IAAA,wBAAwB,CAAC,OAAO,GAAG,wBAAwB,CAAC;AAC5D,IAAA,MAAM,aAAa,GAAG,MAAM,CAAyB,EAAE,CAAC,CAAC;AACzD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAsB,CAAC;AAC7E,IAAA,MAAM,KAAK,GAAG,OAAO,CACjB,OAAO,eAAe,GAAG,UAAU,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,EAC5F,CAAC,eAAe,EAAE,UAAU,CAAC,CAChC,CAAC;IACF,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC,MAAK;AAChD,QAAA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;QACjC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAA0C,CAAC,GAAG,EAAE,IAAI,KAAI;AACrF,YAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,CAAC,eAAe,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACrF,YAAA,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACvB,GAAG,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACxC,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3B,YAAA,OAAO,GAAG,CAAC;SACd,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;KAC5E,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,YAAY,GAAG,eAAe,IAAI,CAAC,UAAU,IAAI,eAAe,GAAG,eAAe,EAAE,UAAU,CAAC,CAAC;IAEtG,SAAS,CAAC,MAAK;QACX,kBAAkB,CAAC,SAAS,CAAC,CAAC;AAC9B,QAAA,aAAa,CAAC,OAAO,GAAG,EAAE,CAAC;AAC3B,QAAA,WAAW,CAAC,OAAO,GAAG,EAAE,CAAC;AACzB,QAAA,wBAAwB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;AAC9C,QAAA,YAAY,CAAC,OAAO,GAAG,kBAAkB,CAAC;AAC9C,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEzB,IAAA,mBAAmB,CACf,GAAG,EACH,OAAO;QACH,IAAI,EAAE,MAAK;YACP,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACjD,kBAAkB,CAAC,YAAY,CAAC,CAAC;AACjC,YAAA,wBAAwB,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC;AACjD,YAAA,IAAI,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC5B,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,EAAY,CAAC;gBAC3D,aAAa,CAAC,cAAc,CAAC,CAAC;AAC9B,gBAAA,YAAY,CAAC,OAAO,GAAG,cAAc,CAAC;AACzC,aAAA;AAAM,iBAAA;gBACH,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACzB,aAAA;SACJ;AACJ,KAAA,CAAC,EACF,CAAC,iBAAiB,EAAE,aAAa,CAAC,CACrC,CAAC;IACF,QACIA,4BACK,YAAY,KACTC,GAAC,CAAA,oBAAoB,IACjB,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,aAClC,CAA4B,yBAAA,EAAA,eAAe,EAAE,EAEtD,QAAA,EAAAA,GAAA,CAAC,IAAI,EACD,EAAA,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAC5C,KAAK,EACDA,GAAC,CAAA,MAAM,IACH,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAC5C,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,eAAe,EACnB,YAAY,EAAE,YAAY,EAAA,CAC5B,YAGNA,GAAC,CAAA,QAAQ,cAAE,qBAAqB,CAAC,eAAe,CAAC,EAAA,CAAY,GAC1D,EACY,CAAA,CAC1B,EACA,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;oBAC3C,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACpD,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC;AACrD,oBAAA,MAAM,gBAAgB,GAAG,qBAAqB,GAAG;wBAC7C,IAAI;wBACJ,KAAK;wBACL,QAAQ;wBACR,KAAK;wBACL,UAAU,EAAE,CAAC,eAAe;AAC/B,qBAAA,CAAC,CAAC;oBACH,QACID,KAACE,UAAQ,EAAA,EAAA,QAAA,EAAA,CACJ,SAAS,IAAID,GAAA,CAAC,eAAe,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAmB,CAAA,EACvE,gBAAgB,IAAIA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EAAE,gBAAgB,EAAA,CAAmB,EACzE,WAAW,IACRA,IAAC,gBAAgB,EAAA,EACb,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAK;AACV,oCAAA,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;oCAC5C,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAC/C,oCAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oCAC5B,aAAa,CAAC,EAAE,CAAC,CAAC;AAClB,oCAAA,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC;oCAC1B,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,iCAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACxB,CAAA,KAEFA,GAAC,CAAA,UAAU,IAEP,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,EACpD,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IARjB,IAAI,CAAC,EAAE,CASd,CACL,CA/BU,EAAA,EAAA,IAAI,CAAC,EAAE,CAgCX,EACb;AACN,iBAAC,CAAC,CAAC;aACN,CAAC,CACH,EAAA,CAAA,EACL;AACN,CAAC,CAAC;MAEW,eAAe,GAAG,UAAU,CAAC,wBAAwB;;;;"}
+{"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n    ReactElement,\n    useMemo,\n    useState,\n    useImperativeHandle,\n    forwardRef,\n    ForwardedRef,\n    useRef,\n    useEffect,\n    RefCallback,\n    useCallback,\n} from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\nimport styles from './tree-selector-item.less';\n\nconst DEFAULT_ITEM_HEIGHT = 56;\n\ntype MobileItemsListProps<Additional extends AdditionalDefault> = {\n    selected: string[];\n    disabled: string[];\n    getMobileSearchItemOrder: (model: TreeModel<Additional>) => number;\n    setInputValue: (newValue: string) => void;\n    handleChangeInput: (newValue: string) => void;\n    contentFilterQuery: string;\n    isSearch: boolean;\n} & Pick<\n    TreeSelectorDummyProps<Additional>,\n    | 'collection'\n    | 'leavesOnly'\n    | 'singleChoice'\n    | 'checkSelectable'\n    | 'onChange'\n    | 'renderItem'\n    | 'renderMobileDelimiter'\n    | 'onMobileNavigationChange'\n    | 'getSelectAllParentTrl'\n    | 'renderContentBefore'\n>;\n\nconst MobileItemsListComponent = <Additional extends AdditionalDefault>(\n    props: MobileItemsListProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        collection,\n        selected,\n        disabled,\n        leavesOnly,\n        singleChoice,\n        onChange,\n        checkSelectable,\n        getMobileSearchItemOrder,\n        setInputValue,\n        handleChangeInput,\n        isSearch,\n        renderMobileDelimiter,\n        renderItem,\n        contentFilterQuery,\n        getSelectAllParentTrl,\n        renderContentBefore,\n        onMobileNavigationChange,\n    } = props;\n    const navigationChangeCallback = useRef(onMobileNavigationChange);\n    navigationChangeCallback.current = onMobileNavigationChange;\n    const prevParentIds = useRef<(string | undefined)[]>([]);\n    const prevQueries = useRef<string[]>([]);\n    const currentQuery = useRef(contentFilterQuery);\n    const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n    const items = useMemo(\n        () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n        [currentParentId, collection]\n    );\n    const orderHashMap = useMemo(() => {\n        return items.reduce<Record<TreeModel<Additional>['id'], number>>((acc, item) => {\n            acc[item.id] = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;\n            return acc;\n        }, {});\n    }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);\n\n    const sortedItems = useMemo(() => {\n        return items.sort((itemA, itemB) => {\n            return orderHashMap[itemA.id] - orderHashMap[itemB.id];\n        });\n    }, [items, orderHashMap]);\n\n    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n    const withContentBefore = !!renderContentBefore;\n    const count = items.length + (isSelectable ? 1 : 0) + (withContentBefore ? 1 : 0);\n    const parentRef = useRef<HTMLElement | null>(null);\n\n    const getItemKey = (index: number) => {\n        if (withContentBefore && index === 0) {\n            return 'promo';\n        }\n\n        const isSelectAllItem =\n            isSelectable && ((index === 0 && !withContentBefore) || (index === 1 && withContentBefore));\n\n        if (isSelectAllItem) {\n            return `current${currentParentId}`;\n        }\n\n        const itemIndex = index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n        const item = sortedItems[itemIndex];\n\n        return currentParentId ? `${currentParentId}${item.id}` : `${item.id}`;\n    };\n\n    const virtualizer = useVirtualizer({\n        count,\n        getScrollElement: () => parentRef.current,\n        estimateSize: () => DEFAULT_ITEM_HEIGHT,\n        getItemKey,\n    });\n\n    const itemsVirtualizer = virtualizer.getVirtualItems();\n\n    useEffect(() => {\n        setCurrentParentId(undefined);\n        prevParentIds.current = [];\n        prevQueries.current = [];\n        navigationChangeCallback.current?.(undefined);\n        currentQuery.current = contentFilterQuery;\n    }, [contentFilterQuery]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            back: () => {\n                if (!virtualizer.isScrolling) {\n                    const prevParentId = prevParentIds.current.pop();\n                    setCurrentParentId(prevParentId);\n                    navigationChangeCallback.current?.(prevParentId);\n                    if (prevQueries.current.length) {\n                        const prevInputValue = prevQueries.current.pop() as string;\n                        setInputValue(prevInputValue);\n                        currentQuery.current = prevInputValue;\n                    } else {\n                        handleChangeInput('');\n                    }\n                }\n            },\n        }),\n        [handleChangeInput, setInputValue, virtualizer]\n    );\n\n    const refCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n        parentRef.current = node ? node.parentElement : null;\n    }, []);\n\n    useEffect(() => {\n        virtualizer.scrollToOffset(0);\n    }, [currentParentId, sortedItems, virtualizer]);\n\n    return (\n        <div\n            ref={refCallback}\n            className={styles.virtualizedList}\n            style={{\n                height: `${virtualizer.getTotalSize()}px`,\n            }}\n        >\n            {itemsVirtualizer.map((virtualItem) => {\n                const isContentBeforeItem = withContentBefore && virtualItem.index === 0;\n                const isSelectAllItem =\n                    isSelectable &&\n                    ((virtualItem.index === 0 && !withContentBefore) || (virtualItem.index === 1 && withContentBefore));\n\n                if (isContentBeforeItem) {\n                    return (\n                        <div\n                            key={virtualItem.key}\n                            ref={virtualizer.measureElement}\n                            data-index={virtualItem.index}\n                            className={styles.virtualizedItem}\n                            style={{\n                                transform: `translateY(${virtualItem.start}px)`,\n                            }}\n                        >\n                            {renderContentBefore(isSearch)}\n                        </div>\n                    );\n                }\n                if (isSelectAllItem) {\n                    return (\n                        <div\n                            key={virtualItem.key}\n                            ref={virtualizer.measureElement}\n                            data-index={virtualItem.index}\n                            className={styles.virtualizedItem}\n                            style={{\n                                transform: `translateY(${virtualItem.start}px)`,\n                            }}\n                        >\n                            <div className={styles.mobileItem}>\n                                <CheckableCardElement\n                                    padding={16}\n                                    flexible\n                                    borderRadius={12}\n                                    Element=\"label\"\n                                    checked={selected.includes(currentParentId)}\n                                    data-qa={`tree-selector-select-all-${currentParentId}`}\n                                >\n                                    <Cell\n                                        Element={'div'}\n                                        disabled={disabled.includes(currentParentId)}\n                                        right={\n                                            <Action\n                                                selected={selected.includes(currentParentId)}\n                                                onChange={onChange}\n                                                id={currentParentId}\n                                                singleChoice={singleChoice}\n                                            />\n                                        }\n                                    >\n                                        <CellText>{getSelectAllParentTrl(currentParentId)}</CellText>\n                                    </Cell>\n                                </CheckableCardElement>\n                            </div>\n                        </div>\n                    );\n                }\n                const itemIndex = virtualItem.index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n                const item = sortedItems[itemIndex];\n                const hasChildren = collection.hasChildren(item.id);\n                const hasLetter = item.additional?.char && !isSearch;\n                const delimiterContent = renderMobileDelimiter?.({\n                    item,\n                    order: orderHashMap[item.id],\n                    isSearch,\n                    index: itemIndex,\n                    isTopLevel: !currentParentId,\n                });\n                const withGap =\n                    (!!withContentBefore && virtualItem.index !== 1) || (!withContentBefore && virtualItem.index !== 0);\n                return (\n                    <div\n                        key={virtualItem.key}\n                        ref={virtualizer.measureElement}\n                        data-index={virtualItem.index}\n                        style={{\n                            transform: `translateY(${virtualItem.start}px)`,\n                        }}\n                        className={classnames(styles.virtualizedItem, {\n                            [styles.withGap]: withGap,\n                        })}\n                    >\n                        <div className={styles.mobileItem}>\n                            {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n                            {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n                            {hasChildren ? (\n                                <MobileParentItem\n                                    collection={collection}\n                                    item={item}\n                                    selected={selected}\n                                    onClick={() => {\n                                        prevParentIds.current.push(currentParentId);\n                                        prevQueries.current.push(currentQuery.current);\n                                        setCurrentParentId(item.id);\n                                        setInputValue('');\n                                        currentQuery.current = '';\n                                        navigationChangeCallback.current?.(item.id);\n                                    }}\n                                    isSearch={isSearch}\n                                    renderItem={renderItem}\n                                />\n                            ) : (\n                                <MobileItem\n                                    item={item}\n                                    singleChoice={singleChoice}\n                                    isSelectable={checkSelectable?.(item.id, collection)}\n                                    isSelected={selected.includes(item.id)}\n                                    isDisabled={disabled.includes(item.id)}\n                                    onChange={onChange}\n                                    isSearch={isSearch}\n                                    renderItem={renderItem}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <Additional extends AdditionalDefault>(\n    props: MobileItemsListProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/MobileParentItem.js

@@ -16,7 +16,7 @@ const MobileParentItem = ({ collection, item, selected, onClick, isSearch, rende
         return count;
     }, [collection, selected, item.id]);
     const labelRight = jsx(LabelRight, { badge: childrenSelectedCount ? childrenSelectedCount.toString() : undefined });
-    return (jsx(Card, { padding: 16, borderRadius: 12, showBorder: true, actionCard: true, onClick: onClick, "data-qa": `tree-selector-item-${item.id}`, children: renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true }) }));
+    return (jsx(Card, { padding: 16, borderRadius: 12, showBorder: true, actionCard: true, stretched: true, onClick: onClick, "data-qa": `tree-selector-item-${item.id}`, children: renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true }) }));
 };
 
 export { MobileParentItem };

package/MobileParentItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileParentItem.js","sources":["../src/MobileParentItem.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\n\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { LabelRight } from '@hh.ru/magritte-ui-cell';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileParentItemProps<Additional extends AdditionalDefault> {\n    collection: TreeCollection<Additional>;\n    item: TreeModel<Additional>;\n    selected: string[];\n    onClick: () => void;\n    renderItem?: RenderItem<Additional>;\n    isSearch: boolean;\n}\n\nexport const MobileParentItem = <Additional extends AdditionalDefault>({\n    collection,\n    item,\n    selected,\n    onClick,\n    isSearch,\n    renderItem = TreeSelectorItemBase,\n}: MobileParentItemProps<Additional>): ReactElement => {\n    const childrenSelectedCount = useMemo(() => {\n        let count = 0;\n        collection.walkChildren(item.id, (model) => {\n            if (selected.includes(model.id)) {\n                count += 1;\n            }\n        });\n\n        return count;\n    }, [collection, selected, item.id]);\n\n    const labelRight = <LabelRight badge={childrenSelectedCount ? childrenSelectedCount.toString() : undefined} />;\n\n    return (\n        <Card\n            padding={16}\n            borderRadius={12}\n            showBorder\n            actionCard\n            onClick={onClick}\n            data-qa={`tree-selector-item-${item.id}`}\n        >\n            {renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true })}\n        </Card>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAkBa,gBAAgB,GAAG,CAAuC,EACnE,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACD,KAAkB;AAClD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACvC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,KAAI;YACvC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;gBAC7B,KAAK,IAAI,CAAC,CAAC;AACd,aAAA;AACL,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,KAAK,CAAC;KAChB,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAGA,GAAC,CAAA,UAAU,IAAC,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC,QAAQ,EAAE,GAAG,SAAS,GAAI,CAAC;IAE/G,QACIA,IAAC,IAAI,EAAA,EACD,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,UAAU,EAAA,IAAA,EACV,UAAU,EACV,IAAA,EAAA,OAAO,EAAE,OAAO,EAAA,SAAA,EACP,CAAsB,mBAAA,EAAA,IAAI,CAAC,EAAE,EAAE,EAEvC,QAAA,EAAA,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,qBAAqB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAC3F,CAAA,EACT;AACN;;;;"}
+{"version":3,"file":"MobileParentItem.js","sources":["../src/MobileParentItem.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\n\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { LabelRight } from '@hh.ru/magritte-ui-cell';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileParentItemProps<Additional extends AdditionalDefault> {\n    collection: TreeCollection<Additional>;\n    item: TreeModel<Additional>;\n    selected: string[];\n    onClick: () => void;\n    renderItem?: RenderItem<Additional>;\n    isSearch: boolean;\n}\n\nexport const MobileParentItem = <Additional extends AdditionalDefault>({\n    collection,\n    item,\n    selected,\n    onClick,\n    isSearch,\n    renderItem = TreeSelectorItemBase,\n}: MobileParentItemProps<Additional>): ReactElement => {\n    const childrenSelectedCount = useMemo(() => {\n        let count = 0;\n        collection.walkChildren(item.id, (model) => {\n            if (selected.includes(model.id)) {\n                count += 1;\n            }\n        });\n\n        return count;\n    }, [collection, selected, item.id]);\n\n    const labelRight = <LabelRight badge={childrenSelectedCount ? childrenSelectedCount.toString() : undefined} />;\n\n    return (\n        <Card\n            padding={16}\n            borderRadius={12}\n            showBorder\n            actionCard\n            stretched\n            onClick={onClick}\n            data-qa={`tree-selector-item-${item.id}`}\n        >\n            {renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true })}\n        </Card>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAkBa,gBAAgB,GAAG,CAAuC,EACnE,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACD,KAAkB;AAClD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACvC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,KAAI;YACvC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;gBAC7B,KAAK,IAAI,CAAC,CAAC;AACd,aAAA;AACL,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,KAAK,CAAC;KAChB,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAGA,GAAC,CAAA,UAAU,IAAC,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC,QAAQ,EAAE,GAAG,SAAS,GAAI,CAAC;IAE/G,QACIA,IAAC,IAAI,EAAA,EACD,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,UAAU,EAAA,IAAA,EACV,UAAU,EAAA,IAAA,EACV,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,OAAO,EACP,SAAA,EAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,EAAE,CAAE,CAAA,EAAA,QAAA,EAEvC,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,qBAAqB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAC3F,CAAA,EACT;AACN;;;;"}

package/TreeSelector.js

@@ -7,12 +7,11 @@ import { useDisabled } from './useDisabled.js';
 import { useSelected } from './useSelected.js';
 import '@hh.ru/magritte-common-fuzzy-search';
 import '@hh.ru/magritte-ui-breakpoint';
-import '@hh.ru/magritte-ui-spacing';
 import './ItemsList.js';
+import '@tanstack/react-virtual';
 import './Item.js';
-import 'react-transition-group';
+import './ItemContent.js';
 import 'classnames';
-import './ItemContent-DQStXvKp.js';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
@@ -20,21 +19,27 @@ import '@hh.ru/magritte-ui-checkbox-radio';
 import './TreeSelectorItemBase.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-typography';
+import './tree-selector-item-B5qJBEp2.js';
 import './MobileItemsList.js';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import './MobileDelimiter.js';
 import '@hh.ru/magritte-ui-card';
 import './MobileItem.js';
 import './MobileParentItem.js';
+import './TreeSelectorWrapper.js';
+import '@hh.ru/magritte-common-resize';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import '@hh.ru/magritte-ui-modal';
 import './collection/treeCollectionHelper.js';
 import './collection/treeCollection.js';
-import './useAnimationTimeout.js';
 import './useExpanded.js';
 import './useIndeterminate.js';
 import './useRenderInput.js';
 import '@hh.ru/magritte-common-func-utils';
-import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-input';
+import './useAnimationTimeout.js';
 import './strategy/selectionStrategy.js';
 import './strategy/createSingleValueToggler.js';
 import './strategy/createTreeCollectionToggler.js';

package/TreeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement, useMemo } from 'react';\n\nimport { TreeSelectorDummy } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorDummy';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps, ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useDisabled } from '@hh.ru/magritte-ui-tree-selector/useDisabled';\nimport { useSelected } from '@hh.ru/magritte-ui-tree-selector/useSelected';\n\nconst TreeSelectorComponent = <Additional extends AdditionalDefault>(\n    props: TreeSelectorProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        value,\n        collection,\n        singleChoice,\n        leavesOnly,\n        collapseToParentId,\n        checkSelectable,\n        onChange,\n        disabled,\n        maxSelected,\n        ...rest\n    } = props;\n    const strategy = useMemo(\n        () =>\n            new ImmutableSelectionStrategy(collection, {\n                singleChoice,\n                leavesOnly,\n                checkSelectable,\n            }),\n        [collection, singleChoice, leavesOnly, checkSelectable]\n    );\n\n    if (maxSelected && !collapseToParentId && !leavesOnly) {\n        throw new Error(\n            `Magritte component TreeSelector: maxSelected can be used only with collapseToParentId or leavesOnly`\n        );\n    }\n\n    const { selected, setSelected } = useSelected({\n        value,\n        strategy,\n        collection,\n        onChange,\n        maxSelected,\n        collapseToParentId,\n    });\n\n    const currentDisabled = useDisabled({ selected, disabled, collection, maxSelected });\n\n    return (\n        <TreeSelectorDummy\n            {...rest}\n            value={selected}\n            disabled={currentDisabled}\n            collection={collection}\n            singleChoice={singleChoice}\n            leavesOnly={leavesOnly}\n            checkSelectable={checkSelectable}\n            onChange={setSelected}\n            ref={ref}\n        />\n    );\n};\n\nexport const TreeSelector = forwardRef(TreeSelectorComponent) as <Additional extends AdditionalDefault>(\n    props: TreeSelectorProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,GAAG,CAC1B,KAAoC,EACpC,GAA+B,KACjB;IACd,MAAM,EACF,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,OAAO,CACpB,MACI,IAAI,0BAA0B,CAAC,UAAU,EAAE;QACvC,YAAY;QACZ,UAAU;QACV,eAAe;KAClB,CAAC,EACN,CAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,CAAC,CAC1D,CAAC;AAEF,IAAA,IAAI,WAAW,IAAI,CAAC,kBAAkB,IAAI,CAAC,UAAU,EAAE;AACnD,QAAA,MAAM,IAAI,KAAK,CACX,CAAA,mGAAA,CAAqG,CACxG,CAAC;AACL,KAAA;AAED,IAAA,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC;QAC1C,KAAK;QACL,QAAQ;QACR,UAAU;QACV,QAAQ;QACR,WAAW;QACX,kBAAkB;AACrB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAErF,IAAA,QACIA,GAAC,CAAA,iBAAiB,EACV,EAAA,GAAA,IAAI,EACR,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,eAAe,EACzB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,CACV,EACJ;AACN,CAAC,CAAC;MAEW,YAAY,GAAG,UAAU,CAAC,qBAAqB;;;;"}
+{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement, useMemo } from 'react';\n\nimport { TreeSelectorDummy } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorDummy';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps, ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useDisabled } from '@hh.ru/magritte-ui-tree-selector/useDisabled';\nimport { useSelected } from '@hh.ru/magritte-ui-tree-selector/useSelected';\n\nconst TreeSelectorComponent = <Additional extends AdditionalDefault>(\n    props: TreeSelectorProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        value,\n        collection,\n        singleChoice,\n        leavesOnly,\n        collapseToParentId,\n        checkSelectable,\n        onChange,\n        disabled,\n        maxSelected,\n        ...rest\n    } = props;\n    const strategy = useMemo(\n        () =>\n            new ImmutableSelectionStrategy(collection, {\n                singleChoice,\n                leavesOnly,\n                checkSelectable,\n            }),\n        [collection, singleChoice, leavesOnly, checkSelectable]\n    );\n\n    if (maxSelected && !collapseToParentId && !leavesOnly) {\n        throw new Error(\n            `Magritte component TreeSelector: maxSelected can be used only with collapseToParentId or leavesOnly`\n        );\n    }\n\n    const { selected, setSelected } = useSelected({\n        value,\n        strategy,\n        collection,\n        onChange,\n        maxSelected,\n        collapseToParentId,\n    });\n\n    const currentDisabled = useDisabled({ selected, disabled, collection, maxSelected });\n\n    return (\n        <TreeSelectorDummy\n            {...rest}\n            value={selected}\n            disabled={currentDisabled}\n            collection={collection}\n            singleChoice={singleChoice}\n            leavesOnly={leavesOnly}\n            checkSelectable={checkSelectable}\n            onChange={setSelected}\n            ref={ref}\n        />\n    );\n};\n\nexport const TreeSelector = forwardRef(TreeSelectorComponent) as <Additional extends AdditionalDefault>(\n    props: TreeSelectorProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,GAAG,CAC1B,KAAoC,EACpC,GAA+B,KACjB;IACd,MAAM,EACF,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,OAAO,CACpB,MACI,IAAI,0BAA0B,CAAC,UAAU,EAAE;QACvC,YAAY;QACZ,UAAU;QACV,eAAe;KAClB,CAAC,EACN,CAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,CAAC,CAC1D,CAAC;AAEF,IAAA,IAAI,WAAW,IAAI,CAAC,kBAAkB,IAAI,CAAC,UAAU,EAAE;AACnD,QAAA,MAAM,IAAI,KAAK,CACX,CAAA,mGAAA,CAAqG,CACxG,CAAC;AACL,KAAA;AAED,IAAA,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC;QAC1C,KAAK;QACL,QAAQ;QACR,UAAU;QACV,QAAQ;QACR,WAAW;QACX,kBAAkB;AACrB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAErF,IAAA,QACIA,GAAC,CAAA,iBAAiB,EACV,EAAA,GAAA,IAAI,EACR,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,eAAe,EACzB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,CACV,EACJ;AACN,CAAC,CAAC;MAEW,YAAY,GAAG,UAAU,CAAC,qBAAqB;;;;"}

package/TreeSelectorDummy.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ForwardedRef } from 'react';
 import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
 import { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';
-export declare const TreeSelectorDummyComponent: <Additional extends AdditionalDefault>({ collection: initialCollection, checkSelectable, initialExpanded, value: selected, leavesOnly, singleChoice, disabled, treeFilter, suggestedNotFound, constantlySuggested, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, expandTreeOnSelected, getSelectAllParentTrl, children, }: TreeSelectorDummyProps<Additional>, ref: ForwardedRef<ListControls>) => ReactElement;
+export declare const TreeSelectorDummyComponent: <Additional extends AdditionalDefault>({ collection: initialCollection, checkSelectable, initialExpanded, value: selected, leavesOnly, singleChoice, disabled, treeFilter, suggestedNotFound, constantlySuggested, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, expandTreeOnSelected, getSelectAllParentTrl, renderContentBefore, children, }: TreeSelectorDummyProps<Additional>, ref: ForwardedRef<ListControls>) => ReactElement;
 export declare const TreeSelectorDummy: <Additional extends AdditionalDefault>(props: import("@hh.ru/magritte-ui-tree-selector/types").BaseTreeSelectorProps<Additional> & import("@hh.ru/magritte-ui-tree-selector/types").DummyProps & {
     ref?: ForwardedRef<ListControls> | undefined;
 }) => ReactElement;

package/TreeSelectorDummy.js

@@ -3,18 +3,17 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { match } from '@hh.ru/magritte-common-fuzzy-search';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';
 import { ItemsList } from './ItemsList.js';
 import { MobileItemsList } from './MobileItemsList.js';
+import { TreeSelectorWrapper } from './TreeSelectorWrapper.js';
 import { filterWithParents } from './collection/treeCollectionHelper.js';
-import { useAnimationTimeout } from './useAnimationTimeout.js';
 import { useExpanded } from './useExpanded.js';
 import { useIndeterminate } from './useIndeterminate.js';
 import { useRenderInput } from './useRenderInput.js';
+import '@tanstack/react-virtual';
 import './Item.js';
-import 'react-transition-group';
+import './ItemContent.js';
 import 'classnames';
-import './ItemContent-DQStXvKp.js';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
@@ -22,29 +21,34 @@ import '@hh.ru/magritte-ui-checkbox-radio';
 import './TreeSelectorItemBase.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-typography';
+import './tree-selector-item-B5qJBEp2.js';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import './MobileDelimiter.js';
 import '@hh.ru/magritte-ui-card';
 import './MobileItem.js';
 import './MobileParentItem.js';
+import '@hh.ru/magritte-common-resize';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import '@hh.ru/magritte-ui-modal';
 import './collection/treeCollection.js';
 import '@hh.ru/magritte-common-func-utils';
-import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-input';
+import './useAnimationTimeout.js';
 
 const defaultCheckSelectable = () => true;
 const defaultArray = [];
 const needToApply = (query) => {
     return !!(query && query.length);
 };
-const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, expandTreeOnSelected = true, getSelectAllParentTrl, children, }, ref) => {
+const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, expandTreeOnSelected = true, getSelectAllParentTrl, renderContentBefore, children, }, ref) => {
     const [collection, setCollection] = useState(initialCollection);
     const [isSearch, setIsSearch] = useState(false);
     const currentQuery = useRef('');
     const inputRef = useRef(null);
     const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));
     const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));
-    const { animationTimeout } = useAnimationTimeout();
     const getSearchItemOrderDefault = useCallback((model) => {
         return initialCollection.getModelLevel(model.id);
     }, [initialCollection]);
@@ -131,7 +135,7 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
     ]);
     const renderTreeSelector = useCallback(() => {
         const hasModels = collection.getTopLevel().length;
-        return (jsx("div", { ref: treeRefCallback, children: hasModels ? (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getMobileSearchItemOrder: getMobileSearchItemOrder || getSearchItemOrderDefault, collection: collection, selected: selected, disabled: disabled, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref, setInputValue: setInputValue, renderItem: renderItem, renderMobileDelimiter: renderMobileDelimiter, handleChangeInput: handleChangeInput, contentFilterQuery: contentFilterQuery.trim(), onMobileNavigationChange: onMobileNavigationChange, isSearch: isSearch, getSelectAllParentTrl: getSelectAllParentTrl })) : (jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, disabled: disabled, singleChoice: singleChoice, indeterminate: indeterminate, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop, animationTimeout: animationTimeout })) })) : (jsx(Fragment, { children: contentNotFound })) }));
+        return (jsx(TreeSelectorWrapper, { ref: treeRefCallback, children: hasModels ? (jsx(Fragment, { children: isMobile ? (jsx(MobileItemsList, { getMobileSearchItemOrder: getMobileSearchItemOrder || getSearchItemOrderDefault, collection: collection, selected: selected, disabled: disabled, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref, setInputValue: setInputValue, renderItem: renderItem, renderMobileDelimiter: renderMobileDelimiter, handleChangeInput: handleChangeInput, contentFilterQuery: contentFilterQuery.trim(), onMobileNavigationChange: onMobileNavigationChange, isSearch: isSearch, getSelectAllParentTrl: getSelectAllParentTrl, renderContentBefore: renderContentBefore })) : (jsx(ItemsList, { collection: collection, leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, disabled: disabled, singleChoice: singleChoice, indeterminate: indeterminate, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop, renderContentBefore: renderContentBefore })) })) : (jsx(Fragment, { children: contentNotFound })) }));
     }, [
         collection,
         treeRefCallback,
@@ -150,14 +154,14 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
         renderMobileDelimiter,
         handleChangeInput,
         contentFilterQuery,
-        getSelectAllParentTrl,
         onMobileNavigationChange,
         isSearch,
+        getSelectAllParentTrl,
+        renderContentBefore,
         currentExpanded,
         handleExpansion,
         indeterminate,
         renderItemForDesktop,
-        animationTimeout,
         contentNotFound,
     ]);
     return jsx(Fragment, { children: children({ renderTreeSelector, renderInput }) });

package/TreeSelectorDummy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelectorDummy.js","sources":["../src/TreeSelectorDummy.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useCallback, useEffect, useRef, useState, RefCallback } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { MobileItemsList } from '@hh.ru/magritte-ui-tree-selector/MobileItemsList';\nimport { filterWithParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\nimport { useExpanded } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\nimport { useIndeterminate } from '@hh.ru/magritte-ui-tree-selector/useIndeterminate';\nimport { useRenderInput } from '@hh.ru/magritte-ui-tree-selector/useRenderInput';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nconst needToApply = (query: string): boolean => {\n    return !!(query && query.length);\n};\n\nexport const TreeSelectorDummyComponent = <Additional extends AdditionalDefault>(\n    {\n        collection: initialCollection,\n        checkSelectable = defaultCheckSelectable,\n        initialExpanded = defaultArray,\n        value: selected,\n        leavesOnly,\n        singleChoice,\n        disabled = defaultArray,\n        treeFilter = filterWithParents,\n        suggestedNotFound = defaultArray,\n        constantlySuggested = defaultArray,\n        renderItemForDesktop,\n        renderItem,\n        renderMobileDelimiter,\n        onExpand,\n        onChange,\n        onChangeFilterQuery,\n        contentNotFound,\n        onMobileNavigationChange,\n        getMobileSearchItemOrder,\n        expandTreeOnSelected = true,\n        getSelectAllParentTrl,\n        children,\n    }: TreeSelectorDummyProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const [collection, setCollection] = useState(initialCollection);\n    const [isSearch, setIsSearch] = useState(false);\n    const currentQuery = useRef('');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n    const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n    const { animationTimeout } = useAnimationTimeout();\n    const getSearchItemOrderDefault = useCallback(\n        (model: TreeModel<Additional>) => {\n            return initialCollection.getModelLevel(model.id);\n        },\n        [initialCollection]\n    );\n\n    const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n\n    const {\n        expanded: currentExpanded,\n        setExpanded,\n        handleExpansion,\n        handleResetExpanded,\n    } = useExpanded({\n        initialValue: initialExpanded?.slice(),\n        selected,\n        expandTreeOnSelected,\n        collection: initialCollection,\n        onExpand,\n    });\n    const { isMobile } = useBreakpoint();\n\n    const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput(inputRef);\n\n    const treeRefCallback: RefCallback<HTMLDivElement> = useCallback(\n        (node) => {\n            if (!node) {\n                handleResetExpanded();\n            }\n        },\n        [handleResetExpanded]\n    );\n\n    useEffect(() => {\n        const contentFilterQueryTrimmed = contentFilterQuery.trim();\n        const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();\n\n        if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {\n            const newExpanded: string[] = [];\n            const newCollection = treeFilter(\n                initialCollection,\n                (item) => match(contentFilterQueryTrimmed, item.text),\n                isMobile\n            );\n            newCollection.toList().forEach((item) => {\n                if (newCollection.hasChildren(item.id)) {\n                    // Если есть в отфильтрованной коллекции есть дочерние элементы,\n                    // значит они заматчились, и нужно открыть родителя.\n                    newExpanded.push(item.id);\n                } else {\n                    // Если заматчился только сам родитель, показываем его\n                    // схлопнутым => нужно добавить его ветку в коллекцию.\n                    initialCollection.walkChildren(item.id, (child, parents) => {\n                        newCollection.addModel({ ...child }, parents[0].id);\n                    });\n                }\n            });\n\n            const filteredIds = newCollection.toList().map((model) => model.id);\n\n            // Если в отфильтрованной коллекции нет моделей, но заданы предложенные,\n            // то показываем их\n            // Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним\n            // всегда показывающиеся модели, если их ещё нет в коллекции\n            if (!filteredIds.length && suggestedNotFoundModels.current.length) {\n                suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));\n            } else {\n                constantlySuggestedModels.current.forEach((model) => {\n                    if (!filteredIds.includes(model.id)) {\n                        newCollection.addModel({ ...model });\n                    }\n                });\n            }\n\n            setCollection(newCollection);\n            currentQuery.current = contentFilterQuery;\n            onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);\n            setExpanded(newExpanded);\n            setIsSearch(true);\n        } else if (queryWasChanged) {\n            // Запрос не годится для поиска.\n            const newExpanded = initialExpanded.slice();\n            setCollection(initialCollection);\n\n            onChangeFilterQuery?.(\n                initialCollection.toList().map((model) => model.id),\n                contentFilterQueryTrimmed\n            );\n            currentQuery.current = contentFilterQuery;\n            if (inputRef.current) {\n                setExpanded(newExpanded);\n            } else {\n                handleResetExpanded();\n            }\n\n            setIsSearch(false);\n        }\n    }, [\n        initialCollection,\n        contentFilterQuery,\n        treeFilter,\n        selected,\n        setExpanded,\n        isMobile,\n        onChangeFilterQuery,\n        handleResetExpanded,\n        initialExpanded,\n    ]);\n\n    const renderTreeSelector = useCallback(() => {\n        const hasModels = collection.getTopLevel().length;\n        return (\n            <div ref={treeRefCallback}>\n                {hasModels ? (\n                    <VSpacingContainer default={12} gteM={0}>\n                        {isMobile ? (\n                            <MobileItemsList\n                                getMobileSearchItemOrder={getMobileSearchItemOrder || getSearchItemOrderDefault}\n                                collection={collection}\n                                selected={selected}\n                                disabled={disabled}\n                                onChange={onChange}\n                                leavesOnly={leavesOnly}\n                                checkSelectable={checkSelectable}\n                                singleChoice={singleChoice}\n                                ref={ref}\n                                setInputValue={setInputValue}\n                                renderItem={renderItem}\n                                renderMobileDelimiter={renderMobileDelimiter}\n                                handleChangeInput={handleChangeInput}\n                                contentFilterQuery={contentFilterQuery.trim()}\n                                onMobileNavigationChange={onMobileNavigationChange}\n                                isSearch={isSearch}\n                                getSelectAllParentTrl={getSelectAllParentTrl}\n                            />\n                        ) : (\n                            <ItemsList\n                                collection={collection}\n                                items={collection.getTopLevel()}\n                                leavesOnly={leavesOnly}\n                                checkSelectable={checkSelectable}\n                                expanded={currentExpanded}\n                                onExpansion={handleExpansion}\n                                selected={selected}\n                                onChange={onChange}\n                                disabled={disabled}\n                                singleChoice={singleChoice}\n                                indeterminate={indeterminate}\n                                isSearch={isSearch}\n                                renderItemForDesktop={renderItemForDesktop}\n                                animationTimeout={animationTimeout}\n                            />\n                        )}\n                    </VSpacingContainer>\n                ) : (\n                    <>{contentNotFound}</>\n                )}\n            </div>\n        );\n    }, [\n        collection,\n        treeRefCallback,\n        isMobile,\n        getMobileSearchItemOrder,\n        getSearchItemOrderDefault,\n        selected,\n        disabled,\n        onChange,\n        leavesOnly,\n        checkSelectable,\n        singleChoice,\n        ref,\n        setInputValue,\n        renderItem,\n        renderMobileDelimiter,\n        handleChangeInput,\n        contentFilterQuery,\n        getSelectAllParentTrl,\n        onMobileNavigationChange,\n        isSearch,\n        currentExpanded,\n        handleExpansion,\n        indeterminate,\n        renderItemForDesktop,\n        animationTimeout,\n        contentNotFound,\n    ]);\n\n    return <>{children({ renderTreeSelector, renderInput })}</>;\n};\n\nexport const TreeSelectorDummy = forwardRef(TreeSelectorDummyComponent) as <Additional extends AdditionalDefault>(\n    props: TreeSelectorDummyProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"TreeSelectorDummy.js","sources":["../src/TreeSelectorDummy.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useCallback, useEffect, useRef, useState, RefCallback } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { MobileItemsList } from '@hh.ru/magritte-ui-tree-selector/MobileItemsList';\nimport { TreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorWrapper';\nimport { filterWithParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useExpanded } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\nimport { useIndeterminate } from '@hh.ru/magritte-ui-tree-selector/useIndeterminate';\nimport { useRenderInput } from '@hh.ru/magritte-ui-tree-selector/useRenderInput';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nconst needToApply = (query: string): boolean => {\n    return !!(query && query.length);\n};\n\nexport const TreeSelectorDummyComponent = <Additional extends AdditionalDefault>(\n    {\n        collection: initialCollection,\n        checkSelectable = defaultCheckSelectable,\n        initialExpanded = defaultArray,\n        value: selected,\n        leavesOnly,\n        singleChoice,\n        disabled = defaultArray,\n        treeFilter = filterWithParents,\n        suggestedNotFound = defaultArray,\n        constantlySuggested = defaultArray,\n        renderItemForDesktop,\n        renderItem,\n        renderMobileDelimiter,\n        onExpand,\n        onChange,\n        onChangeFilterQuery,\n        contentNotFound,\n        onMobileNavigationChange,\n        getMobileSearchItemOrder,\n        expandTreeOnSelected = true,\n        getSelectAllParentTrl,\n        renderContentBefore,\n        children,\n    }: TreeSelectorDummyProps<Additional>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const [collection, setCollection] = useState(initialCollection);\n    const [isSearch, setIsSearch] = useState(false);\n    const currentQuery = useRef('');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n    const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n    const getSearchItemOrderDefault = useCallback(\n        (model: TreeModel<Additional>) => {\n            return initialCollection.getModelLevel(model.id);\n        },\n        [initialCollection]\n    );\n\n    const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n\n    const {\n        expanded: currentExpanded,\n        setExpanded,\n        handleExpansion,\n        handleResetExpanded,\n    } = useExpanded({\n        initialValue: initialExpanded?.slice(),\n        selected,\n        expandTreeOnSelected,\n        collection: initialCollection,\n        onExpand,\n    });\n    const { isMobile } = useBreakpoint();\n\n    const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput(inputRef);\n\n    const treeRefCallback: RefCallback<HTMLDivElement> = useCallback(\n        (node) => {\n            if (!node) {\n                handleResetExpanded();\n            }\n        },\n        [handleResetExpanded]\n    );\n\n    useEffect(() => {\n        const contentFilterQueryTrimmed = contentFilterQuery.trim();\n        const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();\n\n        if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {\n            const newExpanded: string[] = [];\n            const newCollection = treeFilter(\n                initialCollection,\n                (item) => match(contentFilterQueryTrimmed, item.text),\n                isMobile\n            );\n            newCollection.toList().forEach((item) => {\n                if (newCollection.hasChildren(item.id)) {\n                    // Если есть в отфильтрованной коллекции есть дочерние элементы,\n                    // значит они заматчились, и нужно открыть родителя.\n                    newExpanded.push(item.id);\n                } else {\n                    // Если заматчился только сам родитель, показываем его\n                    // схлопнутым => нужно добавить его ветку в коллекцию.\n                    initialCollection.walkChildren(item.id, (child, parents) => {\n                        newCollection.addModel({ ...child }, parents[0].id);\n                    });\n                }\n            });\n\n            const filteredIds = newCollection.toList().map((model) => model.id);\n\n            // Если в отфильтрованной коллекции нет моделей, но заданы предложенные,\n            // то показываем их\n            // Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним\n            // всегда показывающиеся модели, если их ещё нет в коллекции\n            if (!filteredIds.length && suggestedNotFoundModels.current.length) {\n                suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));\n            } else {\n                constantlySuggestedModels.current.forEach((model) => {\n                    if (!filteredIds.includes(model.id)) {\n                        newCollection.addModel({ ...model });\n                    }\n                });\n            }\n\n            setCollection(newCollection);\n            currentQuery.current = contentFilterQuery;\n            onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);\n            setExpanded(newExpanded);\n            setIsSearch(true);\n        } else if (queryWasChanged) {\n            // Запрос не годится для поиска.\n            const newExpanded = initialExpanded.slice();\n            setCollection(initialCollection);\n\n            onChangeFilterQuery?.(\n                initialCollection.toList().map((model) => model.id),\n                contentFilterQueryTrimmed\n            );\n            currentQuery.current = contentFilterQuery;\n            if (inputRef.current) {\n                setExpanded(newExpanded);\n            } else {\n                handleResetExpanded();\n            }\n\n            setIsSearch(false);\n        }\n    }, [\n        initialCollection,\n        contentFilterQuery,\n        treeFilter,\n        selected,\n        setExpanded,\n        isMobile,\n        onChangeFilterQuery,\n        handleResetExpanded,\n        initialExpanded,\n    ]);\n\n    const renderTreeSelector = useCallback(() => {\n        const hasModels = collection.getTopLevel().length;\n        return (\n            <TreeSelectorWrapper ref={treeRefCallback}>\n                {hasModels ? (\n                    <>\n                        {isMobile ? (\n                            <MobileItemsList\n                                getMobileSearchItemOrder={getMobileSearchItemOrder || getSearchItemOrderDefault}\n                                collection={collection}\n                                selected={selected}\n                                disabled={disabled}\n                                onChange={onChange}\n                                leavesOnly={leavesOnly}\n                                checkSelectable={checkSelectable}\n                                singleChoice={singleChoice}\n                                ref={ref}\n                                setInputValue={setInputValue}\n                                renderItem={renderItem}\n                                renderMobileDelimiter={renderMobileDelimiter}\n                                handleChangeInput={handleChangeInput}\n                                contentFilterQuery={contentFilterQuery.trim()}\n                                onMobileNavigationChange={onMobileNavigationChange}\n                                isSearch={isSearch}\n                                getSelectAllParentTrl={getSelectAllParentTrl}\n                                renderContentBefore={renderContentBefore}\n                            />\n                        ) : (\n                            <ItemsList\n                                collection={collection}\n                                leavesOnly={leavesOnly}\n                                checkSelectable={checkSelectable}\n                                expanded={currentExpanded}\n                                onExpansion={handleExpansion}\n                                selected={selected}\n                                onChange={onChange}\n                                disabled={disabled}\n                                singleChoice={singleChoice}\n                                indeterminate={indeterminate}\n                                isSearch={isSearch}\n                                renderItemForDesktop={renderItemForDesktop}\n                                renderContentBefore={renderContentBefore}\n                            />\n                        )}\n                    </>\n                ) : (\n                    <>{contentNotFound}</>\n                )}\n            </TreeSelectorWrapper>\n        );\n    }, [\n        collection,\n        treeRefCallback,\n        isMobile,\n        getMobileSearchItemOrder,\n        getSearchItemOrderDefault,\n        selected,\n        disabled,\n        onChange,\n        leavesOnly,\n        checkSelectable,\n        singleChoice,\n        ref,\n        setInputValue,\n        renderItem,\n        renderMobileDelimiter,\n        handleChangeInput,\n        contentFilterQuery,\n        onMobileNavigationChange,\n        isSearch,\n        getSelectAllParentTrl,\n        renderContentBefore,\n        currentExpanded,\n        handleExpansion,\n        indeterminate,\n        renderItemForDesktop,\n        contentNotFound,\n    ]);\n\n    return <>{children({ renderTreeSelector, renderInput })}</>;\n};\n\nexport const TreeSelectorDummy = forwardRef(TreeSelectorDummyComponent) as <Additional extends AdditionalDefault>(\n    props: TreeSelectorDummyProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/TreeSelectorWrapper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TreeSelectorWrapper: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/TreeSelectorWrapper.js

@@ -0,0 +1,44 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useContext, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useResize } from '@hh.ru/magritte-common-resize';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { CustomScrollContext } from '@hh.ru/magritte-internal-custom-scroll';
+import { BottomSheetFullScreenContent } from '@hh.ru/magritte-ui-bottom-sheet';
+import { ModalContentFullHeight } from '@hh.ru/magritte-ui-modal';
+
+const TreeSelectorWrapper = forwardRef((props, ref) => {
+    const [height, setHeight] = useState(0);
+    const wrapperRef = useRef(null);
+    const wrapperMultiRef = useMultipleRefs(wrapperRef, ref);
+    const scrollContext = useContext(CustomScrollContext);
+    const calcHeight = useCallback(() => {
+        if (wrapperRef.current?.parentElement) {
+            const style = window.getComputedStyle(wrapperRef.current.parentElement) || {};
+            const paddingTop = parseFloat(style.paddingTop || '0');
+            const paddingBottom = parseFloat(style.paddingBottom || '0');
+            const height = wrapperRef.current.parentElement.offsetHeight - paddingTop - paddingBottom;
+            setHeight(height);
+        }
+    }, []);
+    useLayoutEffect(() => {
+        calcHeight();
+    }, [calcHeight]);
+    useEffect(() => {
+        const wrapperElement = wrapperRef.current;
+        if (!wrapperElement || !scrollContext) {
+            return void 0;
+        }
+        const handleTouchMove = (event) => {
+            event.stopPropagation();
+        };
+        wrapperElement.addEventListener('touchmove', handleTouchMove);
+        return () => wrapperElement.removeEventListener('touchmove', handleTouchMove);
+    }, [scrollContext]);
+    useResize(calcHeight);
+    return scrollContext ? (jsx(BottomSheetFullScreenContent, { style: { height, overflow: 'auto' }, ref: wrapperMultiRef, ...props })) : (jsx(ModalContentFullHeight, { style: { height, overflow: 'auto' }, ref: wrapperMultiRef, ...props }));
+});
+TreeSelectorWrapper.displayName = 'TreeSelectorWrapper';
+
+export { TreeSelectorWrapper };
+//# sourceMappingURL=TreeSelectorWrapper.js.map

package/TreeSelectorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelectorWrapper.js","sources":["../src/TreeSelectorWrapper.tsx"],"sourcesContent":["import {\n    forwardRef,\n    PropsWithChildren,\n    useRef,\n    useState,\n    useLayoutEffect,\n    useCallback,\n    useEffect,\n    useContext,\n} from 'react';\n\nimport { useResize } from '@hh.ru/magritte-common-resize';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomScrollContext } from '@hh.ru/magritte-internal-custom-scroll';\nimport { BottomSheetFullScreenContent } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { ModalContentFullHeight } from '@hh.ru/magritte-ui-modal';\n\nexport const TreeSelectorWrapper = forwardRef<HTMLDivElement, PropsWithChildren>((props, ref) => {\n    const [height, setHeight] = useState(0);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperMultiRef = useMultipleRefs(wrapperRef, ref);\n    const scrollContext = useContext(CustomScrollContext);\n\n    const calcHeight = useCallback(() => {\n        if (wrapperRef.current?.parentElement) {\n            const style = window.getComputedStyle(wrapperRef.current.parentElement) || {};\n            const paddingTop = parseFloat(style.paddingTop || '0');\n            const paddingBottom = parseFloat(style.paddingBottom || '0');\n            const height = wrapperRef.current.parentElement.offsetHeight - paddingTop - paddingBottom;\n            setHeight(height);\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        calcHeight();\n    }, [calcHeight]);\n\n    useEffect(() => {\n        const wrapperElement = wrapperRef.current;\n        if (!wrapperElement || !scrollContext) {\n            return void 0;\n        }\n\n        const handleTouchMove = (event: TouchEvent) => {\n            event.stopPropagation();\n        };\n\n        wrapperElement.addEventListener('touchmove', handleTouchMove);\n        return () => wrapperElement.removeEventListener('touchmove', handleTouchMove);\n    }, [scrollContext]);\n\n    useResize(calcHeight);\n\n    return scrollContext ? (\n        <BottomSheetFullScreenContent style={{ height, overflow: 'auto' }} ref={wrapperMultiRef} {...props} />\n    ) : (\n        <ModalContentFullHeight style={{ height, overflow: 'auto' }} ref={wrapperMultiRef} {...props} />\n    );\n});\n\nTreeSelectorWrapper.displayName = 'TreeSelectorWrapper';\n"],"names":["_jsx"],"mappings":";;;;;;;;AAiBa,MAAA,mBAAmB,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,KAAI;IAC5F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;AACzD,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAEtD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE;AACnC,YAAA,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC9E,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC;YACvD,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC;AAC7D,YAAA,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,GAAG,UAAU,GAAG,aAAa,CAAC;YAC1F,SAAS,CAAC,MAAM,CAAC,CAAC;AACrB,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,MAAK;AACjB,QAAA,UAAU,EAAE,CAAC;AACjB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC;AAC1C,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,aAAa,EAAE;YACnC,OAAO,KAAK,CAAC,CAAC;AACjB,SAAA;AAED,QAAA,MAAM,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;AAC5B,SAAC,CAAC;AAEF,QAAA,cAAc,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QAC9D,OAAO,MAAM,cAAc,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAClF,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,UAAU,CAAC,CAAC;IAEtB,OAAO,aAAa,IAChBA,GAAC,CAAA,4BAA4B,EAAC,EAAA,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,eAAe,EAAA,GAAM,KAAK,EAAA,CAAI,KAEtGA,GAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,eAAe,EAAM,GAAA,KAAK,EAAI,CAAA,CACnG,CAAC;AACN,CAAC,EAAE;AAEH,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}