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

package/Item.d.ts

@@ -17,7 +17,7 @@ interface ItemProps<Additional extends AdditionalDefault> extends PropsWithChild
     onExpansion: (id: string) => void;
     onChange: (id: string, isSelected: boolean) => void;
     renderItemForDesktop?: RenderItem<Additional>;
-    animationTimeout: number;
+    cache: Record<string, number>;
 }
 export declare const Item: <Additional extends AdditionalDefault>(props: ItemProps<Additional>) => ReactElement;
 export {};

package/Item.js

@@ -1,9 +1,8 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { memo, useMemo, useRef, Children } from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import classnames from 'classnames';
-import { s as styles, I as ItemContent } from './ItemContent-DQStXvKp.js';
+import { memo, useMemo } from 'react';
+import { ItemContent } from './ItemContent.js';
+import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
@@ -11,8 +10,29 @@ 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-B5TWpXFy.js';
 
-const ItemComponent = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, animationTimeout, children, }) => {
+const ONE_BOX_MARGIN = 36;
+const getMargin = (allBoxesCount, hasShift, hasIndent) => {
+    let margin = 0;
+    if (allBoxesCount === 2) {
+        margin = ONE_BOX_MARGIN * 2;
+    }
+    else if (allBoxesCount === 3) {
+        margin = ONE_BOX_MARGIN * 3;
+    }
+    else {
+        margin = ONE_BOX_MARGIN;
+    }
+    if (hasIndent) {
+        return margin + ONE_BOX_MARGIN;
+    }
+    if (hasShift) {
+        return margin - ONE_BOX_MARGIN;
+    }
+    return margin;
+};
+const ItemComponent = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, cache, children, }) => {
     const modelsOnLevel = useMemo(() => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()), [parentId, collection]);
     const hasLetterOnLevel = useMemo(() => {
         return !isSearch && modelsOnLevel.some((model) => model.additional?.char);
@@ -35,44 +55,15 @@ const ItemComponent = ({ collection, item, parentId, isExpanded, isSelected, isI
     const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;
     const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;
     const hasShift = allBoxesCount > 1 &&
+        parentId &&
         ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));
-    const childrenContentRef = useRef(null);
-    const handleEnter = () => {
-        if (childrenContentRef.current) {
-            childrenContentRef.current.style.height = '0';
-        }
-    };
-    const handleEntering = () => {
-        if (childrenContentRef.current) {
-            childrenContentRef.current.style.height = `${childrenContentRef.current.scrollHeight}px`;
-        }
-    };
-    const handleEntered = () => {
-        if (childrenContentRef.current) {
-            childrenContentRef.current.style.height = `auto`;
-        }
-    };
-    const handleExit = () => {
-        if (childrenContentRef.current) {
-            childrenContentRef.current.style.height = `${childrenContentRef.current.scrollHeight}px`;
-        }
-    };
-    const handleExiting = () => {
-        if (childrenContentRef.current) {
-            childrenContentRef.current.style.height = '0';
-        }
-    };
-    return (jsxs("div", { className: classnames(styles.item, {
-            [styles.withTwoBoxes]: allBoxesCount === 2,
-            [styles.withThreeBoxes]: allBoxesCount === 3,
-            [styles.withShift]: hasShift && parentId,
-            [styles.withIndent]: allBoxesCount === 0,
-        }), "data-qa": `tree-selector-item-${item.id}`, children: [jsx(ItemContent, { item: item, parentId: parentId, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter ? item.additional?.char : undefined, isExpanded: isExpanded, onExpansion: onExpansion, isSelected: isSelected, onChange: onChange, singleChoice: singleChoice, isIndeterminate: isIndeterminate, isDisabled: isDisabled, hasLetterOnLevel: hasLetterOnLevel, hasDot: hasDot, maxControlsOnLevel: maxControlsOnLevel, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop }), jsx(TransitionGroup, { component: null, children: Children.toArray(children).map((child, index) => (jsx(CSSTransition, { nodeRef: childrenContentRef, timeout: animationTimeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, classNames: {
-                        enter: styles.itemAnimationEnter,
-                        enterActive: styles.itemAnimationEnterActive,
-                        exit: styles.itemAnimationExit,
-                        exitActive: styles.itemAnimationExitActive,
-                    }, children: jsx("div", { ref: childrenContentRef, className: styles.children, children: child }) }, index))) })] }));
+    const hasIndent = allBoxesCount === 0;
+    useMemo(() => {
+        cache[item.id] = getMargin(allBoxesCount, !!hasShift, hasIndent) + (parentId ? cache[parentId] : 0);
+    }, [item.id, parentId]);
+    let margin = parentId ? cache[parentId] : 0;
+    margin = margin + (hasShift ? -ONE_BOX_MARGIN : 0) + (hasIndent ? ONE_BOX_MARGIN : 0);
+    return (jsxs("div", { style: { paddingLeft: margin }, "data-qa": `tree-selector-item-${item.id}`, children: [jsx(ItemContent, { item: item, parentId: parentId, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter ? item.additional?.char : undefined, isExpanded: isExpanded, onExpansion: onExpansion, isSelected: isSelected, onChange: onChange, singleChoice: singleChoice, isIndeterminate: isIndeterminate, isDisabled: isDisabled, hasLetterOnLevel: hasLetterOnLevel, hasDot: hasDot, maxControlsOnLevel: maxControlsOnLevel, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop }), children] }));
 };
 const Item = memo(ItemComponent);
 

package/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo, useRef, Children, memo } from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { ItemContent } from '@hh.ru/magritte-ui-tree-selector/ItemContent';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemProps<Additional extends AdditionalDefault> extends PropsWithChildren {\n    collection: TreeCollection<Additional>;\n    parentId?: TreeModel<Additional>['id'];\n    item: TreeModel<Additional>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    isExpanded: boolean;\n    isSelected: boolean;\n    isDisabled: boolean;\n    singleChoice?: boolean;\n    isIndeterminate: boolean;\n    isSearch: boolean;\n    onExpansion: (id: string) => void;\n    onChange: (id: string, isSelected: boolean) => void;\n    renderItemForDesktop?: RenderItem<Additional>;\n    animationTimeout: number;\n}\n\nconst ItemComponent = <Additional extends AdditionalDefault>({\n    collection,\n    item,\n    parentId,\n    isExpanded,\n    isSelected,\n    isIndeterminate,\n    isDisabled,\n    leavesOnly,\n    singleChoice,\n    isSearch,\n    checkSelectable,\n    onExpansion,\n    onChange,\n    renderItemForDesktop,\n    animationTimeout,\n    children,\n}: ItemProps<Additional>): ReactElement => {\n    const modelsOnLevel = useMemo(\n        () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n        [parentId, collection]\n    );\n\n    const hasLetterOnLevel = useMemo(() => {\n        return !isSearch && modelsOnLevel.some((model) => model.additional?.char);\n    }, [modelsOnLevel, isSearch]);\n\n    // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n    const maxControlsOnLevel = useMemo(() => {\n        return modelsOnLevel.reduce((currentMax, model) => {\n            const hasChildren = collection.hasChildren(model.id);\n            const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n            const actionCount = +hasChildren + +!!hasAction;\n            return Math.max(currentMax, actionCount);\n        }, 0);\n    }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n    const hasChildren = collection.hasChildren(item.id);\n    const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n    const hasLetter = item.additional?.char && !isSearch;\n    const realControlsCount = +hasChildren + +!!hasAction;\n\n    // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n    const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n    const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n    const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n    const hasShift =\n        allBoxesCount > 1 &&\n        ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n    const childrenContentRef = useRef<HTMLDivElement>(null);\n    const handleEnter = () => {\n        if (childrenContentRef.current) {\n            childrenContentRef.current.style.height = '0';\n        }\n    };\n    const handleEntering = () => {\n        if (childrenContentRef.current) {\n            childrenContentRef.current.style.height = `${childrenContentRef.current.scrollHeight}px`;\n        }\n    };\n\n    const handleEntered = () => {\n        if (childrenContentRef.current) {\n            childrenContentRef.current.style.height = `auto`;\n        }\n    };\n    const handleExit = () => {\n        if (childrenContentRef.current) {\n            childrenContentRef.current.style.height = `${childrenContentRef.current.scrollHeight}px`;\n        }\n    };\n    const handleExiting = () => {\n        if (childrenContentRef.current) {\n            childrenContentRef.current.style.height = '0';\n        }\n    };\n\n    return (\n        <div\n            className={classnames(styles.item, {\n                [styles.withTwoBoxes]: allBoxesCount === 2,\n                [styles.withThreeBoxes]: allBoxesCount === 3,\n                [styles.withShift]: hasShift && parentId,\n                [styles.withIndent]: allBoxesCount === 0,\n            })}\n            data-qa={`tree-selector-item-${item.id}`}\n        >\n            <ItemContent\n                item={item}\n                parentId={parentId}\n                hasChildren={hasChildren}\n                hasAction={!!hasAction}\n                letter={hasLetter ? item.additional?.char : undefined}\n                isExpanded={isExpanded}\n                onExpansion={onExpansion}\n                isSelected={isSelected}\n                onChange={onChange}\n                singleChoice={singleChoice}\n                isIndeterminate={isIndeterminate}\n                isDisabled={isDisabled}\n                hasLetterOnLevel={hasLetterOnLevel}\n                hasDot={hasDot}\n                maxControlsOnLevel={maxControlsOnLevel}\n                isSearch={isSearch}\n                renderItemForDesktop={renderItemForDesktop}\n            />\n\n            <TransitionGroup component={null}>\n                {Children.toArray(children).map((child, index) => (\n                    <CSSTransition\n                        key={index}\n                        nodeRef={childrenContentRef}\n                        timeout={animationTimeout}\n                        onEnter={handleEnter}\n                        onEntering={handleEntering}\n                        onEntered={handleEntered}\n                        onExit={handleExit}\n                        onExiting={handleExiting}\n                        classNames={{\n                            enter: styles.itemAnimationEnter,\n                            enterActive: styles.itemAnimationEnterActive,\n                            exit: styles.itemAnimationExit,\n                            exitActive: styles.itemAnimationExitActive,\n                        }}\n                    >\n                        <div ref={childrenContentRef} className={styles.children}>\n                            {child}\n                        </div>\n                    </CSSTransition>\n                ))}\n            </TransitionGroup>\n        </div>\n    );\n};\n\nexport const Item = memo(ItemComponent) as <Additional extends AdditionalDefault>(\n    props: ItemProps<Additional>\n) => ReactElement;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo, memo } from 'react';\n\nimport { ItemContent } from '@hh.ru/magritte-ui-tree-selector/ItemContent';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\nconst ONE_BOX_MARGIN = 36;\n\nconst getMargin = (allBoxesCount: number, hasShift: boolean, hasIndent: boolean): number => {\n    let margin = 0;\n    if (allBoxesCount === 2) {\n        margin = ONE_BOX_MARGIN * 2;\n    } else if (allBoxesCount === 3) {\n        margin = ONE_BOX_MARGIN * 3;\n    } else {\n        margin = ONE_BOX_MARGIN;\n    }\n    if (hasIndent) {\n        return margin + ONE_BOX_MARGIN;\n    }\n\n    if (hasShift) {\n        return margin - ONE_BOX_MARGIN;\n    }\n\n    return margin;\n};\n\ninterface ItemProps<Additional extends AdditionalDefault> extends PropsWithChildren {\n    collection: TreeCollection<Additional>;\n    parentId?: TreeModel<Additional>['id'];\n    item: TreeModel<Additional>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    isExpanded: boolean;\n    isSelected: boolean;\n    isDisabled: boolean;\n    singleChoice?: boolean;\n    isIndeterminate: boolean;\n    isSearch: boolean;\n    onExpansion: (id: string) => void;\n    onChange: (id: string, isSelected: boolean) => void;\n    renderItemForDesktop?: RenderItem<Additional>;\n    cache: Record<string, number>;\n}\n\nconst ItemComponent = <Additional extends AdditionalDefault>({\n    collection,\n    item,\n    parentId,\n    isExpanded,\n    isSelected,\n    isIndeterminate,\n    isDisabled,\n    leavesOnly,\n    singleChoice,\n    isSearch,\n    checkSelectable,\n    onExpansion,\n    onChange,\n    renderItemForDesktop,\n    cache,\n    children,\n}: ItemProps<Additional>): ReactElement => {\n    const modelsOnLevel = useMemo(\n        () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n        [parentId, collection]\n    );\n\n    const hasLetterOnLevel = useMemo(() => {\n        return !isSearch && modelsOnLevel.some((model) => model.additional?.char);\n    }, [modelsOnLevel, isSearch]);\n\n    // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n    const maxControlsOnLevel = useMemo(() => {\n        return modelsOnLevel.reduce((currentMax, model) => {\n            const hasChildren = collection.hasChildren(model.id);\n            const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n            const actionCount = +hasChildren + +!!hasAction;\n            return Math.max(currentMax, actionCount);\n        }, 0);\n    }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n    const hasChildren = collection.hasChildren(item.id);\n    const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n    const hasLetter = item.additional?.char && !isSearch;\n    const realControlsCount = +hasChildren + +!!hasAction;\n\n    // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n    const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n    const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n    const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n    const hasShift =\n        allBoxesCount > 1 &&\n        parentId &&\n        ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n    const hasIndent = allBoxesCount === 0;\n\n    useMemo(() => {\n        cache[item.id] = getMargin(allBoxesCount, !!hasShift, hasIndent) + (parentId ? cache[parentId] : 0);\n    }, [item.id, parentId]);\n\n    let margin = parentId ? cache[parentId] : 0;\n\n    margin = margin + (hasShift ? -ONE_BOX_MARGIN : 0) + (hasIndent ? ONE_BOX_MARGIN : 0);\n\n    return (\n        <div style={{ paddingLeft: margin }} data-qa={`tree-selector-item-${item.id}`}>\n            <ItemContent\n                item={item}\n                parentId={parentId}\n                hasChildren={hasChildren}\n                hasAction={!!hasAction}\n                letter={hasLetter ? item.additional?.char : undefined}\n                isExpanded={isExpanded}\n                onExpansion={onExpansion}\n                isSelected={isSelected}\n                onChange={onChange}\n                singleChoice={singleChoice}\n                isIndeterminate={isIndeterminate}\n                isDisabled={isDisabled}\n                hasLetterOnLevel={hasLetterOnLevel}\n                hasDot={hasDot}\n                maxControlsOnLevel={maxControlsOnLevel}\n                isSearch={isSearch}\n                renderItemForDesktop={renderItemForDesktop}\n            />\n\n            {children}\n        </div>\n    );\n};\n\nexport const Item = memo(ItemComponent) as <Additional extends AdditionalDefault>(\n    props: ItemProps<Additional>\n) => ReactElement;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,cAAc,GAAG,EAAE,CAAC;AAE1B,MAAM,SAAS,GAAG,CAAC,aAAqB,EAAE,QAAiB,EAAE,SAAkB,KAAY;IACvF,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,IAAI,aAAa,KAAK,CAAC,EAAE;AACrB,QAAA,MAAM,GAAG,cAAc,GAAG,CAAC,CAAC;AAC/B,KAAA;SAAM,IAAI,aAAa,KAAK,CAAC,EAAE;AAC5B,QAAA,MAAM,GAAG,cAAc,GAAG,CAAC,CAAC;AAC/B,KAAA;AAAM,SAAA;QACH,MAAM,GAAG,cAAc,CAAC;AAC3B,KAAA;AACD,IAAA,IAAI,SAAS,EAAE;QACX,OAAO,MAAM,GAAG,cAAc,CAAC;AAClC,KAAA;AAED,IAAA,IAAI,QAAQ,EAAE;QACV,OAAO,MAAM,GAAG,cAAc,CAAC;AAClC,KAAA;AAED,IAAA,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAoBF,MAAM,aAAa,GAAG,CAAuC,EACzD,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,EACR,oBAAoB,EACpB,KAAK,EACL,QAAQ,GACY,KAAkB;AACtC,IAAA,MAAM,aAAa,GAAG,OAAO,CACzB,OAAO,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,EAC9E,CAAC,QAAQ,EAAE,UAAU,CAAC,CACzB,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,OAAO,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;;AAG9B,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;QACpC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,KAAK,KAAI;YAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACrD,YAAA,MAAM,SAAS,GAAG,EAAE,UAAU,IAAI,WAAW,CAAC,IAAI,eAAe,GAAG,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAC1F,MAAM,WAAW,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;YAChD,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;SAC5C,EAAE,CAAC,CAAC,CAAC;KACT,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,IAAA,MAAM,SAAS,GAAG,EAAE,UAAU,IAAI,WAAW,CAAC,IAAI,eAAe,GAAG,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrD,MAAM,iBAAiB,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;;IAGtD,MAAM,MAAM,GAAG,iBAAiB,GAAG,kBAAkB,KAAK,SAAS,IAAI,WAAW,CAAC,CAAC;IACpF,MAAM,eAAe,GAAG,QAAQ,GAAG,CAAC,UAAU,IAAI,eAAe,GAAG,QAAQ,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC;AAElG,IAAA,MAAM,aAAa,GAAG,CAAC,gBAAgB,GAAG,kBAAkB,CAAC;AAE7D,IAAA,MAAM,QAAQ,GACV,aAAa,GAAG,CAAC;QACjB,QAAQ;AACR,SAAC,CAAC,eAAe,KAAK,gBAAgB,IAAI,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,eAAe,IAAI,gBAAgB,CAAC,CAAC,CAAC;AAEjH,IAAA,MAAM,SAAS,GAAG,aAAa,KAAK,CAAC,CAAC;IAEtC,OAAO,CAAC,MAAK;AACT,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,aAAa,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;KACvG,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AAExB,IAAA,IAAI,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE5C,MAAM,GAAG,MAAM,IAAI,QAAQ,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;IAEtF,QACIA,cAAK,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAAW,SAAA,EAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,EAAE,CAAE,CAAA,EAAA,QAAA,EAAA,CACzEC,GAAC,CAAA,WAAW,IACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,EACrD,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,GAC5C,EAED,QAAQ,CACP,EAAA,CAAA,EACR;AACN,CAAC,CAAC;MAEW,IAAI,GAAG,IAAI,CAAC,aAAa;;;;"}

package/ItemContent.js

@@ -1,13 +1,37 @@
 import './index.css';
-import 'react/jsx-runtime';
-import 'react';
-import 'classnames';
-import '@hh.ru/magritte-common-keyboard';
-import '@hh.ru/magritte-ui-icon/icon';
-import './Action.js';
-import './TreeSelectorItemBase.js';
-import '@hh.ru/magritte-ui-typography';
-export { I as ItemContent } from './ItemContent-DQStXvKp.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useCallback } from 'react';
+import classnames from 'classnames';
+import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Action } from './Action.js';
+import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './tree-selector-item-B5TWpXFy.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-cell';
+
+const ItemContentComponent = ({ item, parentId, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, isSearch, renderItemForDesktop = TreeSelectorItemBase, }) => {
+    const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
+    const currentActionCount = +hasDot + +hasAction + +hasChildren;
+    const neededSpacesCount = maxControlsOnLevel - currentActionCount;
+    const handleExpandableKeyDown = useCallback((event) => {
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {
+            isExpanded && onExpansion(item.id);
+            event.preventDefault();
+            return;
+        }
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {
+            !isExpanded && onExpansion(item.id);
+            event.preventDefault();
+        }
+    }, [isExpanded, onExpansion, item.id]);
+    const input = hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, onKeyDown: handleExpandableKeyDown, indeterminate: isIndeterminate, singleChoice: singleChoice, name: `tree-selector-item-${parentId || 'top'}-${item.id}` })) : undefined;
+    return (jsxs("div", { className: styles.wrapper, onClick: hasChildren && !hasAction ? handleExpandableClick : undefined, children: [(letter || hasLetterOnLevel) && (jsx("div", { className: styles.letter, children: letter && (jsx(Text, { typography: "subtitle-1-semibold", style: "secondary", Element: "span", children: letter })) })), hasDot && (jsx("div", { className: styles.icon, children: jsx(DotFilledSize24, { initial: "tertiary" }) })), [...Array(neededSpacesCount).keys()].map((_, i) => (jsx("div", { className: styles.space }, i))), hasChildren && (jsx("div", { className: classnames(styles.icon, styles.iconActive, {
+                    [styles.iconUp]: isExpanded,
+                }), "data-qa": `tree-selector-chevron-${item.id}`, onClick: hasAction ? handleExpandableClick : undefined, children: jsx(ChevronRightOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
+};
+const ItemContent = memo(ItemContentComponent);
+
+export { ItemContent };
 //# sourceMappingURL=ItemContent.js.map

package/ItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"ItemContent.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback, memo, KeyboardEventHandler } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<Additional extends AdditionalDefault> {\n    item: TreeModel<Additional>;\n    parentId?: TreeModel<Additional>['id'];\n    hasChildren: boolean;\n    hasAction: boolean;\n    letter?: string;\n    onExpansion: (id: string) => void;\n    isExpanded: boolean;\n    isSelected: boolean;\n    isDisabled: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    isIndeterminate: boolean;\n    singleChoice?: boolean;\n    hasLetterOnLevel: boolean;\n    hasDot: boolean;\n    maxControlsOnLevel: number;\n    renderItemForDesktop?: RenderItem<Additional>;\n    isSearch: boolean;\n}\n\nconst ItemContentComponent = <Additional extends AdditionalDefault>({\n    item,\n    parentId,\n    hasAction,\n    hasChildren,\n    letter,\n    isExpanded,\n    isDisabled,\n    onExpansion,\n    hasLetterOnLevel,\n    isSelected,\n    onChange,\n    isIndeterminate,\n    singleChoice,\n    hasDot,\n    maxControlsOnLevel,\n    isSearch,\n    renderItemForDesktop = TreeSelectorItemBase,\n}: ItemContent<Additional>): ReactElement => {\n    const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n    const currentActionCount = +hasDot + +hasAction + +hasChildren;\n    const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n    const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n        (event) => {\n            if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                isExpanded && onExpansion(item.id);\n                event.preventDefault();\n                return;\n            }\n            if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n                !isExpanded && onExpansion(item.id);\n                event.preventDefault();\n            }\n        },\n        [isExpanded, onExpansion, item.id]\n    );\n\n    const input = hasAction ? (\n        <Action\n            selected={isSelected}\n            onChange={onChange}\n            id={item.id}\n            onKeyDown={handleExpandableKeyDown}\n            indeterminate={isIndeterminate}\n            singleChoice={singleChoice}\n            name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n        />\n    ) : undefined;\n\n    return (\n        <div className={styles.wrapper} onClick={hasChildren && !hasAction ? handleExpandableClick : undefined}>\n            {(letter || hasLetterOnLevel) && (\n                <div className={styles.letter}>\n                    {letter && (\n                        <Text typography=\"subtitle-1-semibold\" style=\"secondary\" Element=\"span\">\n                            {letter}\n                        </Text>\n                    )}\n                </div>\n            )}\n            {hasDot && (\n                <div className={styles.icon}>\n                    <DotFilledSize24 initial=\"tertiary\" />\n                </div>\n            )}\n\n            {[...Array(neededSpacesCount).keys()].map((_, i) => (\n                <div key={i} className={styles.space} />\n            ))}\n\n            {hasChildren && (\n                <div\n                    className={classnames(styles.icon, styles.iconActive, {\n                        [styles.iconUp]: isExpanded,\n                    })}\n                    data-qa={`tree-selector-chevron-${item.id}`}\n                    onClick={hasAction ? handleExpandableClick : undefined}\n                >\n                    <ChevronRightOutlinedSize24 initial=\"tertiary\" />\n                </div>\n            )}\n            {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n        </div>\n    );\n};\n\nexport const ItemContent = memo(ItemContentComponent) as <Additional extends AdditionalDefault>(\n    props: ItemContent<Additional>\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/ItemsList.d.ts

@@ -1,13 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';
-import { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';
+import { AdditionalDefault, IdCollectionPredicate } from '@hh.ru/magritte-ui-tree-selector/collection/types';
 import { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';
 interface ItemsListProps<Additional extends AdditionalDefault> {
-    items: TreeModel<Additional>[];
     collection: TreeCollection<Additional>;
     leavesOnly?: boolean;
     checkSelectable?: IdCollectionPredicate;
-    parentId?: TreeModel<Additional>['id'];
     onExpansion: (id: string) => void;
     expanded: string[];
     selected: string[];
@@ -17,7 +15,7 @@ interface ItemsListProps<Additional extends AdditionalDefault> {
     singleChoice?: boolean;
     isSearch: boolean;
     renderItemForDesktop?: RenderItem<Additional>;
-    animationTimeout: number;
+    renderContentBefore?: (isSearch: boolean) => ReactNode;
 }
 export declare const ItemsList: <Additional extends AdditionalDefault>(props: ItemsListProps<Additional>) => ReactElement;
 export {};

package/ItemsList.js

@@ -1,10 +1,11 @@
 import './index.css';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useCallback, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { Item } from './Item.js';
-import 'react';
-import 'react-transition-group';
+import { s as styles } from './tree-selector-item-B5TWpXFy.js';
+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';
@@ -13,13 +14,76 @@ import './TreeSelectorItemBase.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-typography';
 
+const getNewExpanded = (oldExpanded, newExpanded) => {
+    if (oldExpanded.length >= newExpanded.length) {
+        return [];
+    }
+    return newExpanded.filter((i) => !oldExpanded.includes(i));
+};
 const ItemsList = (props) => {
-    const { items, collection, leavesOnly, checkSelectable, selected, parentId, expanded, disabled, onExpansion, indeterminate, onChange, isSearch, singleChoice, renderItemForDesktop, animationTimeout, } = props;
-    return (jsx(Fragment, { children: items.map((item) => {
-            const isExpanded = expanded.includes(item.id);
-            const hasChildren = collection.hasChildren(item.id);
-            return (jsx(Item, { collection: collection, checkSelectable: checkSelectable, isSelected: selected.includes(item.id), isExpanded: isExpanded, isIndeterminate: indeterminate.includes(item.id), isDisabled: disabled.includes(item.id), parentId: parentId, item: item, leavesOnly: leavesOnly, singleChoice: singleChoice, onExpansion: onExpansion, onChange: onChange, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop, animationTimeout: animationTimeout, children: hasChildren && isExpanded && (jsx(ItemsList, { ...props, items: collection.getChildren(item.id), parentId: item.id })) }, item.id));
-        }) }));
+    const { collection, leavesOnly, checkSelectable, selected, expanded, disabled, onExpansion, indeterminate, onChange, isSearch, singleChoice, renderItemForDesktop, renderContentBefore, } = props;
+    const prevExpanded = useRef(expanded);
+    const expandedIds = useRef(expanded);
+    const treeItems = useMemo(() => {
+        const newItems = [];
+        expandedIds.current = getNewExpanded(prevExpanded.current, expanded);
+        collection.walk((item, currentParents) => {
+            const parentId = currentParents.length ? currentParents[0].id : undefined;
+            const isExpandedChild = currentParents.every((parent) => expanded.includes(parent.id));
+            if (!parentId || isExpandedChild) {
+                newItems.push({
+                    ...item,
+                    parentIds: currentParents.map((parent) => parent.id),
+                });
+            }
+        });
+        return newItems;
+    }, [collection, expanded]);
+    const marginCache = useRef({});
+    const parentRef = useRef(null);
+    const withPromoContent = !!renderContentBefore;
+    const getKey = (index) => {
+        const treeIndex = withPromoContent ? index - 1 : index;
+        const treeItem = treeItems[treeIndex];
+        if (withPromoContent && index === 0) {
+            return 'promo';
+        }
+        return treeItem.parentIds[0] ? `${treeItem.parentIds[0]}${treeItem.id}` : `${treeItem.id}`;
+    };
+    const virtualizer = useVirtualizer({
+        count: treeItems.length + (withPromoContent ? 1 : 0),
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 48,
+        getItemKey: getKey,
+    });
+    const refCallback = useCallback((node) => {
+        parentRef.current = node ? node.parentElement : null;
+    }, []);
+    const items = virtualizer.getVirtualItems();
+    useEffect(() => {
+        virtualizer.scrollToOffset(0);
+    }, [collection, virtualizer]);
+    useEffect(() => {
+        prevExpanded.current = expanded;
+    }, [expanded]);
+    const onAnimationEnd = () => {
+        expandedIds.current = [];
+    };
+    return (jsx("div", { ref: refCallback, className: styles.virtualizedList, style: {
+            height: `${virtualizer.getTotalSize()}px`,
+        }, children: jsx("div", { className: styles.virtualizedItem, style: {
+                transform: `translateY(${items[0]?.start}px)`,
+            }, children: items.map((virtualItem) => {
+                if (withPromoContent && virtualItem.index === 0) {
+                    return (jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, children: renderContentBefore(isSearch) }, virtualItem.key));
+                }
+                const treeIndex = withPromoContent ? virtualItem.index - 1 : virtualItem.index;
+                const treeItem = treeItems[treeIndex];
+                const { parentIds, ...item } = treeItem;
+                const parentId = parentIds[0];
+                const wasExpanded = expandedIds.current.some((expandedId) => parentIds.includes(expandedId));
+                return (jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, onAnimationEnd: onAnimationEnd, className: wasExpanded ? styles.wasExpanded : undefined, children: jsx(Item, { collection: collection, checkSelectable: checkSelectable, isSelected: selected.includes(item.id), isExpanded: expanded.includes(item.id), isIndeterminate: indeterminate.includes(item.id), isDisabled: disabled.includes(item.id), parentId: parentId, item: item, leavesOnly: leavesOnly, singleChoice: singleChoice, onExpansion: onExpansion, onChange: onChange, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop, cache: marginCache.current }) }, virtualItem.key));
+            }) }) }));
 };
 
 export { ItemsList };

package/ItemsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemsList.js","sources":["../src/ItemsList.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Item } from '@hh.ru/magritte-ui-tree-selector/Item';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface ItemsListProps<Additional extends AdditionalDefault> {\n    items: TreeModel<Additional>[];\n    collection: TreeCollection<Additional>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    parentId?: TreeModel<Additional>['id'];\n    onExpansion: (id: string) => void;\n    expanded: string[];\n    selected: string[];\n    disabled: string[];\n    onChange: (id: string, isSelected: boolean) => void;\n    indeterminate: string[];\n    singleChoice?: boolean;\n    isSearch: boolean;\n    renderItemForDesktop?: RenderItem<Additional>;\n    animationTimeout: number;\n}\n\nexport const ItemsList = <Additional extends AdditionalDefault>(props: ItemsListProps<Additional>): ReactElement => {\n    const {\n        items,\n        collection,\n        leavesOnly,\n        checkSelectable,\n        selected,\n        parentId,\n        expanded,\n        disabled,\n        onExpansion,\n        indeterminate,\n        onChange,\n        isSearch,\n        singleChoice,\n        renderItemForDesktop,\n        animationTimeout,\n    } = props;\n    return (\n        <>\n            {items.map((item) => {\n                const isExpanded = expanded.includes(item.id);\n                const hasChildren = collection.hasChildren(item.id);\n\n                return (\n                    <Item\n                        key={item.id}\n                        collection={collection}\n                        checkSelectable={checkSelectable}\n                        isSelected={selected.includes(item.id)}\n                        isExpanded={isExpanded}\n                        isIndeterminate={indeterminate.includes(item.id)}\n                        isDisabled={disabled.includes(item.id)}\n                        parentId={parentId}\n                        item={item}\n                        leavesOnly={leavesOnly}\n                        singleChoice={singleChoice}\n                        onExpansion={onExpansion}\n                        onChange={onChange}\n                        isSearch={isSearch}\n                        renderItemForDesktop={renderItemForDesktop}\n                        animationTimeout={animationTimeout}\n                    >\n                        {hasChildren && isExpanded && (\n                            <ItemsList {...props} items={collection.getChildren(item.id)} parentId={item.id} />\n                        )}\n                    </Item>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAyBa,MAAA,SAAS,GAAG,CAAuC,KAAiC,KAAkB;AAC/G,IAAA,MAAM,EACF,KAAK,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,GACnB,GAAG,KAAK,CAAC;IACV,QACIA,0BACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YAChB,MAAM,UAAU,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEpD,QACIA,GAAC,CAAA,IAAI,EAED,EAAA,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAChD,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAC1C,gBAAgB,EAAE,gBAAgB,EAEjC,QAAA,EAAA,WAAW,IAAI,UAAU,KACtBA,IAAC,SAAS,EAAA,EAAA,GAAK,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAI,CAAA,CACtF,EAnBI,EAAA,IAAI,CAAC,EAAE,CAoBT,EACT;SACL,CAAC,EACH,CAAA,EACL;AACN;;;;"}
+{"version":3,"file":"ItemsList.js","sources":["../src/ItemsList.tsx"],"sourcesContent":["import { ReactElement, ReactNode, RefCallback, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { Item } from '@hh.ru/magritte-ui-tree-selector/Item';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemsListProps<Additional extends AdditionalDefault> {\n    collection: TreeCollection<Additional>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    onExpansion: (id: string) => void;\n    expanded: string[];\n    selected: string[];\n    disabled: string[];\n    onChange: (id: string, isSelected: boolean) => void;\n    indeterminate: string[];\n    singleChoice?: boolean;\n    isSearch: boolean;\n    renderItemForDesktop?: RenderItem<Additional>;\n    renderContentBefore?: (isSearch: boolean) => ReactNode;\n}\n\ninterface TreeModelItem<Additional extends AdditionalDefault> extends TreeModel<Additional> {\n    parentIds: string[];\n}\n\nconst getNewExpanded = (oldExpanded: string[], newExpanded: string[]): string[] => {\n    if (oldExpanded.length >= newExpanded.length) {\n        return [];\n    }\n    return newExpanded.filter((i) => !oldExpanded.includes(i));\n};\n\nexport const ItemsList = <Additional extends AdditionalDefault>(props: ItemsListProps<Additional>): ReactElement => {\n    const {\n        collection,\n        leavesOnly,\n        checkSelectable,\n        selected,\n        expanded,\n        disabled,\n        onExpansion,\n        indeterminate,\n        onChange,\n        isSearch,\n        singleChoice,\n        renderItemForDesktop,\n        renderContentBefore,\n    } = props;\n    const prevExpanded = useRef<string[]>(expanded);\n    const expandedIds = useRef<string[]>(expanded);\n\n    const treeItems = useMemo(() => {\n        const newItems: TreeModelItem<Additional>[] = [];\n        expandedIds.current = getNewExpanded(prevExpanded.current, expanded);\n        collection.walk((item, currentParents) => {\n            const parentId = currentParents.length ? currentParents[0].id : undefined;\n            const isExpandedChild = currentParents.every((parent) => expanded.includes(parent.id));\n            if (!parentId || isExpandedChild) {\n                newItems.push({\n                    ...item,\n                    parentIds: currentParents.map((parent) => parent.id),\n                });\n            }\n        });\n        return newItems;\n    }, [collection, expanded]);\n    const marginCache = useRef<Record<string, number>>({});\n    const parentRef = useRef<HTMLElement | null>(null);\n    const withPromoContent = !!renderContentBefore;\n\n    const getKey = (index: number) => {\n        const treeIndex = withPromoContent ? index - 1 : index;\n        const treeItem = treeItems[treeIndex];\n        if (withPromoContent && index === 0) {\n            return 'promo';\n        }\n        return treeItem.parentIds[0] ? `${treeItem.parentIds[0]}${treeItem.id}` : `${treeItem.id}`;\n    };\n    const virtualizer = useVirtualizer({\n        count: treeItems.length + (withPromoContent ? 1 : 0),\n        getScrollElement: () => parentRef.current,\n        estimateSize: () => 48,\n        getItemKey: getKey,\n    });\n\n    const refCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n        parentRef.current = node ? node.parentElement : null;\n    }, []);\n\n    const items = virtualizer.getVirtualItems();\n\n    useEffect(() => {\n        virtualizer.scrollToOffset(0);\n    }, [collection, virtualizer]);\n\n    useEffect(() => {\n        prevExpanded.current = expanded;\n    }, [expanded]);\n\n    const onAnimationEnd = () => {\n        expandedIds.current = [];\n    };\n\n    return (\n        <div\n            ref={refCallback}\n            className={styles.virtualizedList}\n            style={{\n                height: `${virtualizer.getTotalSize()}px`,\n            }}\n        >\n            <div\n                className={styles.virtualizedItem}\n                style={{\n                    transform: `translateY(${items[0]?.start}px)`,\n                }}\n            >\n                {items.map((virtualItem) => {\n                    if (withPromoContent && virtualItem.index === 0) {\n                        return (\n                            <div key={virtualItem.key} ref={virtualizer.measureElement} data-index={virtualItem.index}>\n                                {renderContentBefore(isSearch)}\n                            </div>\n                        );\n                    }\n\n                    const treeIndex = withPromoContent ? virtualItem.index - 1 : virtualItem.index;\n                    const treeItem = treeItems[treeIndex];\n                    const { parentIds, ...item } = treeItem;\n                    const parentId = parentIds[0];\n                    const wasExpanded = expandedIds.current.some((expandedId) => parentIds.includes(expandedId));\n\n                    return (\n                        <div\n                            key={virtualItem.key}\n                            ref={virtualizer.measureElement}\n                            data-index={virtualItem.index}\n                            onAnimationEnd={onAnimationEnd}\n                            className={wasExpanded ? styles.wasExpanded : undefined}\n                        >\n                            <Item\n                                collection={collection}\n                                checkSelectable={checkSelectable}\n                                isSelected={selected.includes(item.id)}\n                                isExpanded={expanded.includes(item.id)}\n                                isIndeterminate={indeterminate.includes(item.id)}\n                                isDisabled={disabled.includes(item.id)}\n                                parentId={parentId}\n                                item={item}\n                                leavesOnly={leavesOnly}\n                                singleChoice={singleChoice}\n                                onExpansion={onExpansion}\n                                onChange={onChange}\n                                isSearch={isSearch}\n                                renderItemForDesktop={renderItemForDesktop}\n                                cache={marginCache.current}\n                            />\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/MobileDelimiter.js

@@ -4,7 +4,7 @@ import { Card } from '@hh.ru/magritte-ui-card';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
 const MobileDelimiter = ({ children }) => {
-    return (jsx(Card, { padding: 16, paddingTop: 8, paddingBottom: 0, children: jsx(Text, { typography: "label-3-regular", style: "secondary", children: children }) }));
+    return (jsx(Card, { padding: 16, paddingTop: 8, paddingBottom: 0, stretched: true, children: jsx(Text, { typography: "label-3-regular", style: "secondary", children: children }) }));
 };
 
 export { MobileDelimiter };

package/MobileDelimiter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileDelimiter.js","sources":["../src/MobileDelimiter.tsx"],"sourcesContent":["import { PropsWithChildren, FC } from 'react';\n\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nexport const MobileDelimiter: FC<PropsWithChildren> = ({ children }) => {\n    return (\n        <Card padding={16} paddingTop={8} paddingBottom={0}>\n            <Text typography=\"label-3-regular\" style=\"secondary\">\n                {children}\n            </Text>\n        </Card>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;MAKa,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACnE,IAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAC9C,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,WAAW,EAC/C,QAAA,EAAA,QAAQ,EACN,CAAA,EAAA,CACJ,EACT;AACN;;;;"}
+{"version":3,"file":"MobileDelimiter.js","sources":["../src/MobileDelimiter.tsx"],"sourcesContent":["import { PropsWithChildren, FC } from 'react';\n\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nexport const MobileDelimiter: FC<PropsWithChildren> = ({ children }) => {\n    return (\n        <Card padding={16} paddingTop={8} paddingBottom={0} stretched>\n            <Text typography=\"label-3-regular\" style=\"secondary\">\n                {children}\n            </Text>\n        </Card>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;MAKa,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACnE,IAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,SAAS,EAAA,IAAA,EAAA,QAAA,EACzDA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,WAAW,EAC/C,QAAA,EAAA,QAAQ,EACN,CAAA,EAAA,CACJ,EACT;AACN;;;;"}

package/MobileItem.js

@@ -9,7 +9,7 @@ import '@hh.ru/magritte-ui-cell';
 
 const MobileItem = ({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, isSearch, renderItem = TreeSelectorItemBase, }) => {
     const input = isSelectable ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, singleChoice: singleChoice })) : undefined;
-    return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: isSelected, "data-qa": `tree-selector-item-${item.id}`, children: renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled }) }));
+    return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", flexible: true, checked: isSelected, "data-qa": `tree-selector-item-${item.id}`, children: renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled }) }));
 };
 
 export { MobileItem };

package/MobileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemProps<Additional extends AdditionalDefault> {\n    item: TreeModel<Additional>;\n    singleChoice?: boolean;\n    isSelectable?: boolean;\n    isSelected: boolean;\n    isDisabled: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    renderItem?: RenderItem<Additional>;\n    isSearch: boolean;\n}\n\nexport const MobileItem = <Additional extends AdditionalDefault>({\n    item,\n    isSelected,\n    singleChoice,\n    isSelectable,\n    isDisabled,\n    onChange,\n    isSearch,\n    renderItem = TreeSelectorItemBase,\n}: MobileItemProps<Additional>): ReactElement => {\n    const input = isSelectable ? (\n        <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n    ) : undefined;\n    return (\n        <CheckableCardElement\n            padding={16}\n            borderRadius={12}\n            Element=\"label\"\n            checked={isSelected}\n            data-qa={`tree-selector-item-${item.id}`}\n        >\n            {renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled })}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AAmBa,MAAA,UAAU,GAAG,CAAuC,EAC7D,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACP,KAAkB;AAC5C,IAAA,MAAM,KAAK,GAAG,YAAY,IACtBA,GAAC,CAAA,MAAM,EAAC,EAAA,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,IAC7F,SAAS,CAAC;IACd,QACIA,IAAC,oBAAoB,EAAA,EACjB,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,UAAU,EACV,SAAA,EAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,EAAE,CAAE,CAAA,EAAA,QAAA,EAEvC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACrD,CAAA,EACzB;AACN;;;;"}
+{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemProps<Additional extends AdditionalDefault> {\n    item: TreeModel<Additional>;\n    singleChoice?: boolean;\n    isSelectable?: boolean;\n    isSelected: boolean;\n    isDisabled: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    renderItem?: RenderItem<Additional>;\n    isSearch: boolean;\n}\n\nexport const MobileItem = <Additional extends AdditionalDefault>({\n    item,\n    isSelected,\n    singleChoice,\n    isSelectable,\n    isDisabled,\n    onChange,\n    isSearch,\n    renderItem = TreeSelectorItemBase,\n}: MobileItemProps<Additional>): ReactElement => {\n    const input = isSelectable ? (\n        <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n    ) : undefined;\n    return (\n        <CheckableCardElement\n            padding={16}\n            borderRadius={12}\n            Element=\"label\"\n            flexible\n            checked={isSelected}\n            data-qa={`tree-selector-item-${item.id}`}\n        >\n            {renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled })}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AAmBa,MAAA,UAAU,GAAG,CAAuC,EAC7D,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACP,KAAkB;AAC5C,IAAA,MAAM,KAAK,GAAG,YAAY,IACtBA,GAAC,CAAA,MAAM,EAAC,EAAA,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,IAC7F,SAAS,CAAC;IACd,QACIA,IAAC,oBAAoB,EAAA,EACjB,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,QACR,OAAO,EAAE,UAAU,EAAA,SAAA,EACV,CAAsB,mBAAA,EAAA,IAAI,CAAC,EAAE,CAAA,CAAE,YAEvC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACrD,CAAA,EACzB;AACN;;;;"}

package/MobileItemsList.d.ts

@@ -9,7 +9,7 @@ type MobileItemsListProps<Additional extends AdditionalDefault> = {
     handleChangeInput: (newValue: string) => void;
     contentFilterQuery: string;
     isSearch: boolean;
-} & Pick<TreeSelectorDummyProps<Additional>, 'collection' | 'leavesOnly' | 'singleChoice' | 'checkSelectable' | 'onChange' | 'renderItem' | 'renderMobileDelimiter' | 'onMobileNavigationChange' | 'getSelectAllParentTrl'>;
+} & Pick<TreeSelectorDummyProps<Additional>, 'collection' | 'leavesOnly' | 'singleChoice' | 'checkSelectable' | 'onChange' | 'renderItem' | 'renderMobileDelimiter' | 'onMobileNavigationChange' | 'getSelectAllParentTrl' | 'renderContentBefore'>;
 export declare const MobileItemsList: <Additional extends AdditionalDefault>(props: {
     selected: string[];
     disabled: string[];
@@ -18,7 +18,7 @@ export declare const MobileItemsList: <Additional extends AdditionalDefault>(pro
     handleChangeInput: (newValue: string) => void;
     contentFilterQuery: string;
     isSearch: boolean;
-} & Pick<TreeSelectorDummyProps<Additional>, "singleChoice" | "onChange" | "collection" | "leavesOnly" | "checkSelectable" | "renderItem" | "renderMobileDelimiter" | "onMobileNavigationChange" | "getSelectAllParentTrl"> & {
+} & Pick<TreeSelectorDummyProps<Additional>, "singleChoice" | "onChange" | "collection" | "leavesOnly" | "checkSelectable" | "renderContentBefore" | "renderItem" | "renderMobileDelimiter" | "onMobileNavigationChange" | "getSelectAllParentTrl"> & {
     ref?: ForwardedRef<ListControls> | undefined;
 }) => ReactElement;
 export {};