@hh.ru/magritte-ui-tree-selector 1.5.1 → 1.6.0

package/Action.js

@@ -1,9 +1,9 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
 
-const Action = ({ id, singleChoice, indeterminate, selected, onChange }) => {
+const Action = memo(({ id, singleChoice, indeterminate, selected, onChange }) => {
     const handleChange = useCallback((event) => {
         onChange(id, event.target.checked);
     }, [id, onChange]);
@@ -12,7 +12,8 @@ const Action = ({ id, singleChoice, indeterminate, selected, onChange }) => {
         onChange: handleChange,
     };
     return singleChoice ? jsx(Radio, { ...inputProps }) : jsx(Checkbox, { ...inputProps, indeterminate: indeterminate });
-};
+});
+Action.displayName = 'TreeSelectorAction';
 
 export { Action };
 //# sourceMappingURL=Action.js.map

package/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../src/Action.tsx"],"sourcesContent":["import { ChangeEventHandler, FC, useCallback } from 'react';\n\nimport { Checkbox, Radio } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface ActionProps {\n    singleChoice?: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    id: TreeModel['id'];\n    selected: boolean;\n    indeterminate?: boolean;\n}\n\nexport const Action: FC<ActionProps> = ({ id, singleChoice, indeterminate, selected, onChange }) => {\n    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            onChange(id, event.target.checked);\n        },\n        [id, onChange]\n    );\n\n    const inputProps = {\n        checked: selected,\n        onChange: handleChange,\n    };\n\n    return singleChoice ? <Radio {...inputProps} /> : <Checkbox {...inputProps} indeterminate={indeterminate} />;\n};\n"],"names":["_jsx"],"mappings":";;;;AAaa,MAAA,MAAM,GAAoB,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AAC/F,IAAA,MAAM,YAAY,GAAyC,WAAW,CAClE,CAAC,KAAK,KAAI;QACN,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACvC,KAAC,EACD,CAAC,EAAE,EAAE,QAAQ,CAAC,CACjB,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,QAAQ,EAAE,YAAY;KACzB,CAAC;IAEF,OAAO,YAAY,GAAGA,IAAC,KAAK,EAAA,EAAA,GAAK,UAAU,EAAI,CAAA,GAAGA,GAAA,CAAC,QAAQ,EAAK,EAAA,GAAA,UAAU,EAAE,aAAa,EAAE,aAAa,EAAA,CAAI,CAAC;AACjH;;;;"}
+{"version":3,"file":"Action.js","sources":["../src/Action.tsx"],"sourcesContent":["import { ChangeEventHandler, FC, useCallback, memo } from 'react';\n\nimport { Checkbox, Radio } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface ActionProps {\n    singleChoice?: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    id: TreeModel['id'];\n    selected: boolean;\n    indeterminate?: boolean;\n}\n\nexport const Action: FC<ActionProps> = memo(({ id, singleChoice, indeterminate, selected, onChange }) => {\n    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            onChange(id, event.target.checked);\n        },\n        [id, onChange]\n    );\n\n    const inputProps = {\n        checked: selected,\n        onChange: handleChange,\n    };\n\n    return singleChoice ? <Radio {...inputProps} /> : <Checkbox {...inputProps} indeterminate={indeterminate} />;\n});\n\nAction.displayName = 'TreeSelectorAction';\n"],"names":["_jsx"],"mappings":";;;;AAaa,MAAA,MAAM,GAAoB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AACpG,IAAA,MAAM,YAAY,GAAyC,WAAW,CAClE,CAAC,KAAK,KAAI;QACN,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACvC,KAAC,EACD,CAAC,EAAE,EAAE,QAAQ,CAAC,CACjB,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,QAAQ,EAAE,YAAY;KACzB,CAAC;IAEF,OAAO,YAAY,GAAGA,IAAC,KAAK,EAAA,EAAA,GAAK,UAAU,EAAI,CAAA,GAAGA,GAAA,CAAC,QAAQ,EAAK,EAAA,GAAA,UAAU,EAAE,aAAa,EAAE,aAAa,EAAA,CAAI,CAAC;AACjH,CAAC,EAAE;AAEH,MAAM,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/Item.d.ts

@@ -17,6 +17,7 @@ interface ItemProps<A extends AdditionalDefault> extends PropsWithChildren {
     onExpansion: (id: string) => void;
     onChange: (id: string, isSelected: boolean) => void;
     renderItemForDesktop?: RenderItem;
+    animationTimeout: number;
 }
-export declare const Item: <A extends AdditionalDefault>({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, children, }: ItemProps<A>) => ReactElement;
+export declare const Item: import("react").MemoExoticComponent<(<A extends AdditionalDefault>({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, animationTimeout, children, }: ItemProps<A>) => ReactElement)>;
 export {};

package/Item.js

@@ -1,8 +1,9 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+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-cec51c98.js';
+import { s as styles, I as ItemContent } from './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
@@ -10,7 +11,7 @@ import './TreeSelectorItemBase.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-typography';
 
-const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, children, }) => {
+const ItemComponent = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, isSearch, checkSelectable, onExpansion, onChange, renderItemForDesktop, animationTimeout, children, }) => {
     const modelsOnLevel = useMemo(() => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()), [parentId, collection]);
     const hasLetterOnLevel = useMemo(() => {
         return !isSearch && modelsOnLevel.some((model) => model.additional?.char);
@@ -34,13 +35,40 @@ const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndetermin
     const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;
     const hasShift = allBoxesCount > 1 &&
         ((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,
-        }), children: [jsx(ItemContent, { item: item, 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 && jsx("div", { className: styles.children, children: children })] }));
+        }), children: [jsx(ItemContent, { item: item, 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, children: jsx("div", { ref: childrenContentRef, className: styles.children, children: child }) }, index))) })] }));
 };
+const Item = memo(ItemComponent);
 
 export { Item };
 //# sourceMappingURL=Item.js.map

package/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo } from 'react';\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<A extends AdditionalDefault> extends PropsWithChildren {\n    collection: TreeCollection<A>;\n    parentId?: string;\n    item: TreeModel<A>;\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;\n}\n\nexport const Item = <A 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    children,\n}: ItemProps<A>): 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    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        >\n            <ItemContent\n                item={item}\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            {children && <div className={styles.children}>{children}</div>}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"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<A extends AdditionalDefault> extends PropsWithChildren {\n    collection: TreeCollection<A>;\n    parentId?: string;\n    item: TreeModel<A>;\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;\n    animationTimeout: number;\n}\n\nconst ItemComponent = <A 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<A>): 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        >\n            <ItemContent\n                item={item}\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                    >\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);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ItemContent-36f7db0a.js

@@ -0,0 +1,24 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useCallback } from 'react';
+import classnames from 'classnames';
+import { DotFilledSize24, ChevronUpOutlinedSize24 } 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';
+
+var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_1-6-0","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_1-6-0","wrapper":"magritte-wrapper___GHKV6_1-6-0","letter":"magritte-letter___yZOCU_1-6-0","icon":"magritte-icon___kO3Fj_1-6-0","space":"magritte-space___xTO79_1-6-0","iconActive":"magritte-iconActive___4yrG5_1-6-0","iconUp":"magritte-iconUp___mpXV6_1-6-0","content":"magritte-content___ZRc6R_1-6-0","with-shift":"magritte-with-shift___ZErxZ_1-6-0","withShift":"magritte-with-shift___ZErxZ_1-6-0","with-indent":"magritte-with-indent___MH9Vy_1-6-0","withIndent":"magritte-with-indent___MH9Vy_1-6-0","item":"magritte-item___2LtOL_1-6-0","children":"magritte-children___kq-eq_1-6-0","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-6-0","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-6-0","with-three-boxes":"magritte-with-three-boxes___cyVao_1-6-0","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-6-0"};
+
+const ItemContentComponent = ({ item, 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 input = hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, indeterminate: isIndeterminate, singleChoice: singleChoice })) : undefined;
+    return (jsxs("div", { className: styles.wrapper, 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,
+                }), onClick: handleExpandableClick, children: jsx(ChevronUpOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
+};
+const ItemContent = memo(ItemContentComponent);
+
+export { ItemContent as I, styles as s };
+//# sourceMappingURL=ItemContent-36f7db0a.js.map

package/ItemContent-36f7db0a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent-36f7db0a.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback, memo } from 'react';\nimport classnames from 'classnames';\n\nimport { ChevronUpOutlinedSize24, DotFilledSize24 } 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<A extends AdditionalDefault> {\n    item: TreeModel<A>;\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;\n    isSearch: boolean;\n}\n\nconst ItemContentComponent = <A extends AdditionalDefault>({\n    item,\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<A>): 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 input = hasAction ? (\n        <Action\n            selected={isSelected}\n            onChange={onChange}\n            id={item.id}\n            indeterminate={isIndeterminate}\n            singleChoice={singleChoice}\n        />\n    ) : undefined;\n\n    return (\n        <div className={styles.wrapper}>\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                    onClick={handleExpandableClick}\n                >\n                    <ChevronUpOutlinedSize24 initial=\"tertiary\" />\n                </div>\n            )}\n            {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n        </div>\n    );\n};\n\nexport const ItemContent = memo(ItemContentComponent);\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AA+BA,MAAM,oBAAoB,GAAG,CAA8B,EACvD,IAAI,EACJ,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,MAAM,EACN,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,GAAG,oBAAoB,GAC9B,KAAkB;IAC/B,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;IAC7G,MAAM,kBAAkB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAS,GAAG,CAAC,WAAW,CAAC;AAC/D,IAAA,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAElE,IAAA,MAAM,KAAK,GAAG,SAAS,IACnBA,GAAA,CAAC,MAAM,EAAA,EACH,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,eAAe,EAC9B,YAAY,EAAE,YAAY,EAC5B,CAAA,IACF,SAAS,CAAC;IAEd,QACIC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CACzB,CAAC,MAAM,IAAI,gBAAgB,MACxBD,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,QAAA,EAAA,MAAM,KACHA,GAAC,CAAA,IAAI,IAAC,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAClE,MAAM,EAAA,CACJ,CACV,EACC,CAAA,CACT,EACA,MAAM,KACHA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,eAAe,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EAAA,CACpC,CACT,EAEA,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC3CA,GAAa,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EAA1B,EAAA,CAAC,CAA6B,CAC3C,CAAC,EAED,WAAW,KACRA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,EAAE;AAClD,oBAAA,CAAC,MAAM,CAAC,MAAM,GAAG,UAAU;AAC9B,iBAAA,CAAC,EACF,OAAO,EAAE,qBAAqB,YAE9BA,GAAC,CAAA,uBAAuB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,CAAG,EAC5C,CAAA,CACT,EACA,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAA,EAAA,CAC3F,EACR;AACN,CAAC,CAAC;MAEW,WAAW,GAAG,IAAI,CAAC,oBAAoB;;;;"}

package/ItemContent.d.ts

@@ -19,5 +19,5 @@ interface ItemContent<A extends AdditionalDefault> {
     renderItemForDesktop?: RenderItem;
     isSearch: boolean;
 }
-declare const ItemContent: <A extends AdditionalDefault>({ item, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, isSearch, renderItemForDesktop, }: ItemContent<A>) => ReactElement;
-export { ItemContent };
+export declare const ItemContent: import("react").MemoExoticComponent<(<A extends AdditionalDefault>({ item, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, isSearch, renderItemForDesktop, }: ItemContent<A>) => ReactElement)>;
+export {};

package/ItemContent.js

@@ -6,7 +6,7 @@ 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-cec51c98.js';
+export { I as ItemContent } from './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-cell';
 //# sourceMappingURL=ItemContent.js.map

package/ItemsList.d.ts

@@ -17,6 +17,7 @@ interface ItemsListProps<A extends AdditionalDefault> {
     singleChoice?: boolean;
     isSearch: boolean;
     renderItemForDesktop?: RenderItem;
+    animationTimeout: number;
 }
 export declare const ItemsList: <A extends AdditionalDefault>(props: ItemsListProps<A>) => ReactElement;
 export {};

package/ItemsList.js

@@ -2,8 +2,9 @@ import './index.css';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Item } from './Item.js';
 import 'react';
+import 'react-transition-group';
 import 'classnames';
-import './ItemContent-cec51c98.js';
+import './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
@@ -12,11 +13,11 @@ import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-typography';
 
 const ItemsList = (props) => {
-    const { items, collection, leavesOnly, checkSelectable, selected, parentId, expanded, disabled, onExpansion, indeterminate, onChange, isSearch, singleChoice, renderItemForDesktop, } = 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, children: hasChildren && isExpanded && (jsx(ItemsList, { ...props, items: collection.getChildren(item.id), parentId: item.id })) }, 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));
         }) }));
 };
 

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<A extends AdditionalDefault> {\n    items: TreeModel<A>[];\n    collection: TreeCollection<A>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    parentId?: TreeModel<A>['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;\n}\n\nexport const ItemsList = <A extends AdditionalDefault>(props: ItemsListProps<A>): 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    } = 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                    >\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":";;;;;;;;;;;;AAwBa,MAAA,SAAS,GAAG,CAA8B,KAAwB,KAAkB;AAC7F,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,GACvB,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,EAAA,QAAA,EAEzC,WAAW,IAAI,UAAU,KACtBA,GAAA,CAAC,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAI,CAAA,CACtF,EAlBI,EAAA,IAAI,CAAC,EAAE,CAmBT,EACT;SACL,CAAC,EACH,CAAA,EACL;AACN;;;;"}
+{"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<A extends AdditionalDefault> {\n    items: TreeModel<A>[];\n    collection: TreeCollection<A>;\n    leavesOnly?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    parentId?: TreeModel<A>['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;\n    animationTimeout: number;\n}\n\nexport const ItemsList = <A extends AdditionalDefault>(props: ItemsListProps<A>): 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,CAA8B,KAAwB,KAAkB;AAC7F,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;;;;"}

package/MobileItemsList.d.ts

@@ -1,22 +1,12 @@
 import { ReactNode } from 'react';
-import TreeCollection from './collection/treeCollection';
-import { AdditionalDefault, IdCollectionPredicate, TreeModel } from './collection/types';
-import { ListControls, RenderItem, RenderMobileDelimiter } from './types';
-interface MobileItemsListProps<A extends AdditionalDefault> {
-    collection: TreeCollection<A>;
+import { AdditionalDefault, TreeModel } from './collection/types';
+import { ListControls, TreeSelectorDummyProps } from './types';
+export declare const MobileItemsList: import("react").ForwardRefExoticComponent<{
     selected: string[];
     disabled: string[];
-    leavesOnly?: boolean;
-    singleChoice?: boolean;
-    checkSelectable?: IdCollectionPredicate;
-    onChange: (id: string, isSelected: boolean) => void;
-    getSearchItemOrder: (model: TreeModel<A>) => number;
+    getSearchItemOrder: (model: TreeModel<AdditionalDefault>) => number;
     setInputValue: (newValue: string) => void;
     handleChangeInput: (newValue: string) => void;
     contentFilterQuery: string;
-    renderItem?: RenderItem;
-    renderMobileDelimiter?: RenderMobileDelimiter;
     trlSelectParent: ReactNode;
-}
-export declare const MobileItemsList: import("react").ForwardRefExoticComponent<MobileItemsListProps<AdditionalDefault> & import("react").RefAttributes<ListControls>>;
-export {};
+} & Pick<TreeSelectorDummyProps<AdditionalDefault>, "singleChoice" | "onChange" | "collection" | "leavesOnly" | "checkSelectable" | "renderItem" | "renderMobileDelimiter" | "onMobileNavigationChange"> & import("react").RefAttributes<ListControls>>;

package/MobileItemsList.js

@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-typography';
 import './TreeSelectorItemBase.js';
 
 const MobileItemsListComponent = (props, ref) => {
-    const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getSearchItemOrder, setInputValue, handleChangeInput, renderMobileDelimiter, renderItem, contentFilterQuery, trlSelectParent, } = props;
+    const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getSearchItemOrder, setInputValue, handleChangeInput, renderMobileDelimiter, renderItem, contentFilterQuery, trlSelectParent, onMobileNavigationChange, } = props;
     const prevParentIds = useRef([]);
     const prevQueries = useRef([]);
     const currentQuery = useRef(contentFilterQuery);
@@ -40,7 +40,9 @@ const MobileItemsListComponent = (props, ref) => {
     }, [contentFilterQuery]);
     useImperativeHandle(ref, () => ({
         back: () => {
-            setCurrentParentId(prevParentIds.current.pop());
+            const prevParentId = prevParentIds.current.pop();
+            setCurrentParentId(prevParentId);
+            onMobileNavigationChange?.(prevParentId);
             if (prevQueries.current.length) {
                 setInputValue(prevQueries.current.pop());
             }
@@ -48,7 +50,7 @@ const MobileItemsListComponent = (props, ref) => {
                 handleChangeInput('');
             }
         },
-    }), [handleChangeInput, setInputValue]);
+    }), [handleChangeInput, onMobileNavigationChange, setInputValue]);
     return (jsxs(Fragment, { children: [isSelectable && (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: selected.includes(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: trlSelectParent }) }) })), sortedOrders.map((order) => {
                 return itemsByOrder[order].map((item, index) => {
                     const hasChildren = collection.hasChildren(item.id);
@@ -67,6 +69,7 @@ const MobileItemsListComponent = (props, ref) => {
                                     setCurrentParentId(item.id);
                                     setInputValue('');
                                     currentQuery.current = '';
+                                    onMobileNavigationChange?.(item.id);
                                 }, isSearch: isSearch, renderItem: renderItem }, item.id)) : (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))] }));
                 });
             })] }));

package/MobileItemsList.js.map

@@ -1 +1 @@
-{"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    ReactNode,\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 TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, RenderItem, RenderMobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemsListProps<A extends AdditionalDefault> {\n    collection: TreeCollection<A>;\n    selected: string[];\n    disabled: string[];\n    leavesOnly?: boolean;\n    singleChoice?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    onChange: (id: string, isSelected: boolean) => void;\n    getSearchItemOrder: (model: TreeModel<A>) => number;\n    setInputValue: (newValue: string) => void;\n    handleChangeInput: (newValue: string) => void;\n    contentFilterQuery: string;\n    renderItem?: RenderItem;\n    renderMobileDelimiter?: RenderMobileDelimiter;\n    trlSelectParent: ReactNode;\n}\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n    props: MobileItemsListProps<A>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        collection,\n        selected,\n        disabled,\n        leavesOnly,\n        singleChoice,\n        onChange,\n        checkSelectable,\n        getSearchItemOrder,\n        setInputValue,\n        handleChangeInput,\n        renderMobileDelimiter,\n        renderItem,\n        contentFilterQuery,\n        trlSelectParent,\n    } = props;\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 isSearch = !!contentFilterQuery;\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<A>[]>>((acc, item) => {\n            const modelOrder = isSearch && !currentParentId ? getSearchItemOrder(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, getSearchItemOrder]);\n\n    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n    useEffect(() => {\n        setCurrentParentId(undefined);\n        prevParentIds.current = [];\n        prevQueries.current = [];\n        currentQuery.current = contentFilterQuery;\n    }, [contentFilterQuery]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            back: () => {\n                setCurrentParentId(prevParentIds.current.pop());\n                if (prevQueries.current.length) {\n                    setInputValue(prevQueries.current.pop() as string);\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                >\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>{trlSelectParent}</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                        isFirstInOrder: index === 0,\n                        isTopLevel: !currentParentId,\n                    });\n                    return (\n                        <>\n                            {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n                            {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n                            {hasChildren ? (\n                                <MobileParentItem\n                                    key={item.id}\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                                    }}\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                        </>\n                    );\n                });\n            })}\n        </>\n    );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"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    ReactNode,\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<A extends AdditionalDefault> = {\n    selected: string[];\n    disabled: string[];\n    getSearchItemOrder: (model: TreeModel<A>) => number;\n    setInputValue: (newValue: string) => void;\n    handleChangeInput: (newValue: string) => void;\n    contentFilterQuery: string;\n    trlSelectParent: ReactNode;\n} & Pick<\n    TreeSelectorDummyProps<A>,\n    | 'collection'\n    | 'leavesOnly'\n    | 'singleChoice'\n    | 'checkSelectable'\n    | 'onChange'\n    | 'renderItem'\n    | 'renderMobileDelimiter'\n    | 'onMobileNavigationChange'\n>;\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n    props: MobileItemsListProps<A>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        collection,\n        selected,\n        disabled,\n        leavesOnly,\n        singleChoice,\n        onChange,\n        checkSelectable,\n        getSearchItemOrder,\n        setInputValue,\n        handleChangeInput,\n        renderMobileDelimiter,\n        renderItem,\n        contentFilterQuery,\n        trlSelectParent,\n        onMobileNavigationChange,\n    } = props;\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 isSearch = !!contentFilterQuery;\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<A>[]>>((acc, item) => {\n            const modelOrder = isSearch && !currentParentId ? getSearchItemOrder(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, getSearchItemOrder]);\n\n    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n    useEffect(() => {\n        setCurrentParentId(undefined);\n        prevParentIds.current = [];\n        prevQueries.current = [];\n        currentQuery.current = contentFilterQuery;\n    }, [contentFilterQuery]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            back: () => {\n                const prevParentId = prevParentIds.current.pop();\n                setCurrentParentId(prevParentId);\n                onMobileNavigationChange?.(prevParentId);\n                if (prevQueries.current.length) {\n                    setInputValue(prevQueries.current.pop() as string);\n                } else {\n                    handleChangeInput('');\n                }\n            },\n        }),\n        [handleChangeInput, onMobileNavigationChange, setInputValue]\n    );\n    return (\n        <>\n            {isSelectable && (\n                <CheckableCardElement\n                    padding={16}\n                    borderRadius={12}\n                    Element=\"label\"\n                    checked={selected.includes(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>{trlSelectParent}</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                        isFirstInOrder: index === 0,\n                        isTopLevel: !currentParentId,\n                    });\n                    return (\n                        <>\n                            {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n                            {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n                            {hasChildren ? (\n                                <MobileParentItem\n                                    key={item.id}\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                                        onMobileNavigationChange?.(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                        </>\n                    );\n                });\n            })}\n        </>\n    );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/TreeSelector.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { AdditionalDefault } from './collection/types';
-import { TreeSelectorProps, ListControls } from './types';
-export declare const TreeSelector: import("react").ForwardRefExoticComponent<TreeSelectorProps<AdditionalDefault> & import("react").RefAttributes<ListControls>>;
+import { ListControls } from './types';
+export declare const TreeSelector: import("react").ForwardRefExoticComponent<import("./types").BaseTreeSelectorProps<AdditionalDefault> & {
+    onChange: (allSelected: string[], id: string, isSelected: boolean) => void;
+    collapseToParentId?: boolean | undefined;
+    maxSelected?: number | undefined;
+} & import("react").RefAttributes<ListControls>>;

package/TreeSelector.js

@@ -10,8 +10,9 @@ import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-spacing';
 import './ItemsList.js';
 import './Item.js';
+import 'react-transition-group';
 import 'classnames';
-import './ItemContent-cec51c98.js';
+import './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
@@ -26,9 +27,11 @@ import './MobileItem.js';
 import './MobileParentItem.js';
 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-ui-input';
 import './strategy/selectionStrategy.js';
 import './strategy/createSingleValueToggler.js';
@@ -36,7 +39,7 @@ import './strategy/createTreeCollectionToggler.js';
 import './strategy/dummyToggle.js';
 
 const TreeSelectorComponent = (props, ref) => {
-    const { value, collection, singleChoice, leavesOnly, collapseToParentId, checkSelectable, onChange, initialValue, disabled, maxSelected, ...rest } = props;
+    const { value, collection, singleChoice, leavesOnly, collapseToParentId, checkSelectable, onChange, disabled, maxSelected, ...rest } = props;
     const strategy = useMemo(() => new ImmutableSelectionStrategy(collection, {
         singleChoice,
         leavesOnly,
@@ -47,7 +50,6 @@ const TreeSelectorComponent = (props, ref) => {
     }
     const { selected, setSelected } = useSelected({
         value,
-        initialValue,
         strategy,
         collection,
         onChange,

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 = <A extends AdditionalDefault>(\n    props: TreeSelectorProps<A>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const {\n        value,\n        collection,\n        singleChoice,\n        leavesOnly,\n        collapseToParentId,\n        checkSelectable,\n        onChange,\n        initialValue,\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        initialValue,\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);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,GAAG,CAC1B,KAA2B,EAC3B,GAA+B,KACjB;IACd,MAAM,EACF,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,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,YAAY;QACZ,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 = <A extends AdditionalDefault>(\n    props: TreeSelectorProps<A>,\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);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,GAAG,CAC1B,KAA2B,EAC3B,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.js

@@ -7,12 +7,14 @@ import { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';
 import { ItemsList } from './ItemsList.js';
 import { MobileItemsList } from './MobileItemsList.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 './Item.js';
+import 'react-transition-group';
 import 'classnames';
-import './ItemContent-cec51c98.js';
+import './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
@@ -25,6 +27,7 @@ import '@hh.ru/magritte-ui-card';
 import './MobileItem.js';
 import './MobileParentItem.js';
 import './collection/treeCollection.js';
+import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-ui-input';
 
 const defaultCheckSelectable = () => true;
@@ -32,11 +35,12 @@ const defaultArray = [];
 const needToApply = (query) => {
     return !!(query && query.length);
 };
-const TreeSelectorDummy = forwardRef(({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, trls, children, }, ref) => {
+const TreeSelectorDummy = forwardRef(({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, trls, children, }, ref) => {
     const [collection, setCollection] = useState(initialCollection);
     const currentQuery = useRef('');
     const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));
     const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));
+    const { animationTimeout } = useAnimationTimeout();
     const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });
     const { expanded: currentExpanded, setExpanded, handleExpansion, } = useExpanded({
         initialValue: expanded ? expanded.slice() : initialExpanded.slice(),
@@ -104,10 +108,11 @@ const TreeSelectorDummy = forwardRef(({ collection: initialCollection, checkSele
         onChangeFilterQuery,
     ]);
     const renderTreeSelector = useCallback(() => {
-        return (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getSearchItemOrder: (model) => initialCollection.getModelLevel(model.id), 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(), trlSelectParent: trls.selectAllParent })) : (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: !!contentFilterQuery.trim(), renderItemForDesktop: renderItemForDesktop })) }));
+        const hasModels = collection.getTopLevel().length;
+        return hasModels ? (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getSearchItemOrder: (model) => initialCollection.getModelLevel(model.id), 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(), trlSelectParent: trls.selectAllParent, onMobileNavigationChange: onMobileNavigationChange })) : (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: !!contentFilterQuery.trim(), renderItemForDesktop: renderItemForDesktop, animationTimeout: animationTimeout })) })) : (jsx(Fragment, { children: contentNotFound }));
     }, [
-        isMobile,
         collection,
+        isMobile,
         selected,
         disabled,
         onChange,
@@ -116,15 +121,18 @@ const TreeSelectorDummy = forwardRef(({ collection: initialCollection, checkSele
         singleChoice,
         ref,
         setInputValue,
+        renderItem,
+        renderMobileDelimiter,
         handleChangeInput,
         contentFilterQuery,
+        trls.selectAllParent,
+        onMobileNavigationChange,
         currentExpanded,
         handleExpansion,
         indeterminate,
         renderItemForDesktop,
-        renderItem,
-        renderMobileDelimiter,
-        trls.selectAllParent,
+        animationTimeout,
+        contentNotFound,
         initialCollection,
     ]);
     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 } 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 } 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 TreeSelectorDummy = forwardRef(\n    <A extends AdditionalDefault>(\n        {\n            collection: initialCollection,\n            checkSelectable = defaultCheckSelectable,\n            initialExpanded = defaultArray,\n            value: selected,\n            leavesOnly,\n            singleChoice,\n            expanded,\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            trls,\n            children,\n        }: TreeSelectorDummyProps<A>,\n        ref: ForwardedRef<ListControls>\n    ): ReactElement => {\n        const [collection, setCollection] = useState(initialCollection);\n        const currentQuery = useRef('');\n        const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n        const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n\n        const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n        const {\n            expanded: currentExpanded,\n            setExpanded,\n            handleExpansion,\n        } = useExpanded({\n            initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n            controlledExpanded: expanded,\n            onExpand,\n        });\n        const { isMobile } = useBreakpoint();\n\n        const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();\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            } 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                setExpanded(newExpanded);\n            }\n        }, [\n            initialCollection,\n            contentFilterQuery,\n            treeFilter,\n            selected,\n            initialExpanded,\n            setExpanded,\n            isMobile,\n            onChangeFilterQuery,\n        ]);\n\n        const renderTreeSelector = useCallback(() => {\n            return (\n                <VSpacingContainer default={12} gteM={0}>\n                    {isMobile ? (\n                        <MobileItemsList\n                            getSearchItemOrder={(model) => initialCollection.getModelLevel(model.id)}\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                            trlSelectParent={trls.selectAllParent}\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={!!contentFilterQuery.trim()}\n                            renderItemForDesktop={renderItemForDesktop}\n                        />\n                    )}\n                </VSpacingContainer>\n            );\n        }, [\n            isMobile,\n            collection,\n            selected,\n            disabled,\n            onChange,\n            leavesOnly,\n            checkSelectable,\n            singleChoice,\n            ref,\n            setInputValue,\n            handleChangeInput,\n            contentFilterQuery,\n            currentExpanded,\n            handleExpansion,\n            indeterminate,\n            renderItemForDesktop,\n            renderItem,\n            renderMobileDelimiter,\n            trls.selectAllParent,\n            initialCollection,\n        ]);\n\n        return <>{children({ renderTreeSelector, renderInput })}</>;\n    }\n);\n\nTreeSelectorDummy.displayName = 'TreeSelectorDummy';\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 } 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 } 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 TreeSelectorDummy = forwardRef(\n    <A extends AdditionalDefault>(\n        {\n            collection: initialCollection,\n            checkSelectable = defaultCheckSelectable,\n            initialExpanded = defaultArray,\n            value: selected,\n            leavesOnly,\n            singleChoice,\n            expanded,\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            trls,\n            children,\n        }: TreeSelectorDummyProps<A>,\n        ref: ForwardedRef<ListControls>\n    ): ReactElement => {\n        const [collection, setCollection] = useState(initialCollection);\n        const currentQuery = useRef('');\n        const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n        const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n        const { animationTimeout } = useAnimationTimeout();\n\n        const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n        const {\n            expanded: currentExpanded,\n            setExpanded,\n            handleExpansion,\n        } = useExpanded({\n            initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n            controlledExpanded: expanded,\n            onExpand,\n        });\n        const { isMobile } = useBreakpoint();\n\n        const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();\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            } 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                setExpanded(newExpanded);\n            }\n        }, [\n            initialCollection,\n            contentFilterQuery,\n            treeFilter,\n            selected,\n            initialExpanded,\n            setExpanded,\n            isMobile,\n            onChangeFilterQuery,\n        ]);\n\n        const renderTreeSelector = useCallback(() => {\n            const hasModels = collection.getTopLevel().length;\n            return hasModels ? (\n                <VSpacingContainer default={12} gteM={0}>\n                    {isMobile ? (\n                        <MobileItemsList\n                            getSearchItemOrder={(model) => initialCollection.getModelLevel(model.id)}\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                            trlSelectParent={trls.selectAllParent}\n                            onMobileNavigationChange={onMobileNavigationChange}\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={!!contentFilterQuery.trim()}\n                            renderItemForDesktop={renderItemForDesktop}\n                            animationTimeout={animationTimeout}\n                        />\n                    )}\n                </VSpacingContainer>\n            ) : (\n                <>{contentNotFound}</>\n            );\n        }, [\n            collection,\n            isMobile,\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            trls.selectAllParent,\n            onMobileNavigationChange,\n            currentExpanded,\n            handleExpansion,\n            indeterminate,\n            renderItemForDesktop,\n            animationTimeout,\n            contentNotFound,\n            initialCollection,\n        ]);\n\n        return <>{children({ renderTreeSelector, renderInput })}</>;\n    }\n);\n\nTreeSelectorDummy.displayName = 'TreeSelectorDummy';\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/TreeSelectorItemBase.js

@@ -7,7 +7,7 @@ const TreeSelectorItemBase = ({ disabled, input, item, isXS, labelRight, }) => {
         [isXS ? 'right' : 'left']: input,
         ...(isXS && labelRight && { right: labelRight }),
     };
-    return (jsx(Cell, { disabled: disabled, ...cellProps, children: jsx(CellText, { children: item.text }) }));
+    return (jsx(Cell, { disabled: disabled, ...cellProps, align: "top", children: jsx(CellText, { children: item.text }) }));
 };
 
 export { TreeSelectorItemBase };

package/TreeSelectorItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelectorItemBase.js","sources":["../src/TreeSelectorItemBase.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItemProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\nexport const TreeSelectorItemBase = <A extends AdditionalDefault>({\n    disabled,\n    input,\n    item,\n    isXS,\n    labelRight,\n}: RenderItemProps<A>): ReactElement => {\n    const cellProps = {\n        [isXS ? 'right' : 'left']: input,\n        ...(isXS && labelRight && { right: labelRight }),\n    };\n    return (\n        <Cell disabled={disabled} {...cellProps}>\n            <CellText>{item.text}</CellText>\n        </Cell>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;AAMa,MAAA,oBAAoB,GAAG,CAA8B,EAC9D,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,UAAU,GACO,KAAkB;AACnC,IAAA,MAAM,SAAS,GAAG;QACd,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK;QAChC,IAAI,IAAI,IAAI,UAAU,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;KACnD,CAAC;AACF,IAAA,QACIA,GAAC,CAAA,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAM,GAAA,SAAS,YACnCA,GAAC,CAAA,QAAQ,cAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EAAA,CAC7B,EACT;AACN;;;;"}
+{"version":3,"file":"TreeSelectorItemBase.js","sources":["../src/TreeSelectorItemBase.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItemProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\nexport const TreeSelectorItemBase = <A extends AdditionalDefault>({\n    disabled,\n    input,\n    item,\n    isXS,\n    labelRight,\n}: RenderItemProps<A>): ReactElement => {\n    const cellProps = {\n        [isXS ? 'right' : 'left']: input,\n        ...(isXS && labelRight && { right: labelRight }),\n    };\n    return (\n        <Cell disabled={disabled} {...cellProps} align=\"top\">\n            <CellText>{item.text}</CellText>\n        </Cell>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;AAMa,MAAA,oBAAoB,GAAG,CAA8B,EAC9D,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,UAAU,GACO,KAAkB;AACnC,IAAA,MAAM,SAAS,GAAG;QACd,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK;QAChC,IAAI,IAAI,IAAI,UAAU,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;KACnD,CAAC;IACF,QACIA,IAAC,IAAI,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAM,GAAA,SAAS,EAAE,KAAK,EAAC,KAAK,EAAA,QAAA,EAChDA,GAAC,CAAA,QAAQ,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,IAAI,EAAA,CAAY,EAC7B,CAAA,EACT;AACN;;;;"}

package/index.css

@@ -1,10 +1,45 @@
-.magritte-wrapper___GHKV6_1-5-1{
+:root{
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-2-0:200ms;
+}
+.magritte-item-animation-timeout___Pdli9_1-6-0{
+  transition:height 500ms ease;
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0);
+  overflow:hidden;
+  --animation-duration:0ms;
+  transition-duration:var(--animation-duration);
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-item-animation-timeout___Pdli9_1-6-0{
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-0);
+  }
+}
+
+:root{
+  --magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-100-duration-v18-2-0:100ms;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-2-0:200ms;
+}
+.magritte-item-animation-timeout___pbOyZ_1-6-0{
+  transition:height 500ms ease;
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0);
+  overflow:hidden;
+  --animation-duration:0ms;
+  transition-duration:var(--animation-duration);
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-item-animation-timeout___pbOyZ_1-6-0{
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-0);
+  }
+}
+.magritte-wrapper___GHKV6_1-6-0{
   display:flex;
   padding:12px 0;
   gap:12px;
   align-items:flex-start;
 }
-.magritte-letter___yZOCU_1-5-1{
+.magritte-letter___yZOCU_1-6-0{
   width:24px;
   height:24px;
   display:flex;
@@ -12,30 +47,55 @@
   justify-content:center;
   flex-shrink:0;
 }
-.magritte-icon___kO3Fj_1-5-1,
-.magritte-space___xTO79_1-5-1{
+.magritte-icon___kO3Fj_1-6-0,
+.magritte-space___xTO79_1-6-0{
   flex-shrink:0;
   line-height:0;
   width:24px;
 }
-.magritte-iconActive___4yrG5_1-5-1{
+.magritte-icon___kO3Fj_1-6-0{
+  transform:rotate(0);
+}
+.magritte-iconActive___4yrG5_1-6-0{
   cursor:pointer;
 }
-.magritte-content___ZRc6R_1-5-1{
+.magritte-iconUp___mpXV6_1-6-0{
+  transform:rotate(-180deg);
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-icon___kO3Fj_1-6-0{
+    transition-property:transform;
+    transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-2-0);
+    transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-0);
+  }
+}
+.magritte-content___ZRc6R_1-6-0{
   flex-grow:1;
 }
-.magritte-with-shift___ZErxZ_1-5-1{
+.magritte-with-shift___ZErxZ_1-6-0{
   margin-left:-36px;
 }
-.magritte-with-indent___MH9Vy_1-5-1{
+.magritte-with-indent___MH9Vy_1-6-0{
   margin-left:36px;
 }
-.magritte-item___2LtOL_1-5-1 > .magritte-children___kq-eq_1-5-1{
+.magritte-item___2LtOL_1-6-0 > .magritte-children___kq-eq_1-6-0{
   padding-left:36px;
 }
-.magritte-item___2LtOL_1-5-1.magritte-with-two-boxes___LWOy2_1-5-1 > .magritte-children___kq-eq_1-5-1{
+.magritte-item___2LtOL_1-6-0.magritte-with-two-boxes___LWOy2_1-6-0 > .magritte-children___kq-eq_1-6-0{
   padding-left:72px;
 }
-.magritte-item___2LtOL_1-5-1.magritte-with-three-boxes___cyVao_1-5-1 > .magritte-children___kq-eq_1-5-1{
+.magritte-item___2LtOL_1-6-0.magritte-with-three-boxes___cyVao_1-6-0 > .magritte-children___kq-eq_1-6-0{
   padding-left:108px;
 }
+.magritte-children___kq-eq_1-6-0{
+  transition:height 500ms ease;
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0);
+  overflow:hidden;
+  --animation-duration:0ms;
+  transition-duration:var(--animation-duration);
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-children___kq-eq_1-6-0{
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-0);
+  }
+}

package/index.js

@@ -18,8 +18,9 @@ import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-spacing';
 import './ItemsList.js';
 import './Item.js';
+import 'react-transition-group';
 import 'classnames';
-import './ItemContent-cec51c98.js';
+import './ItemContent-36f7db0a.js';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
@@ -31,8 +32,10 @@ import './MobileDelimiter.js';
 import '@hh.ru/magritte-ui-card';
 import './MobileItem.js';
 import './MobileParentItem.js';
+import './useAnimationTimeout.js';
 import './useExpanded.js';
 import './useIndeterminate.js';
 import './useRenderInput.js';
+import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-ui-input';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-tree-selector",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,7 +19,9 @@
     "test": "yarn root:test $(pwd)"
   },
   "dependencies": {
+    "@hh.ru/magritte-common-func-utils": "1.3.6",
     "@hh.ru/magritte-common-fuzzy-search": "1.0.4",
+    "@hh.ru/magritte-design-tokens": "18.2.0",
     "@hh.ru/magritte-ui-breakpoint": "4.0.2",
     "@hh.ru/magritte-ui-card": "6.0.8",
     "@hh.ru/magritte-ui-cell": "3.0.1",
@@ -34,10 +36,11 @@
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
-    "react": ">=18.2.0"
+    "react": ">=18.2.0",
+    "react-transition-group": ">=4.4.5"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4480faadc19af08673481a84a62f77d081e9be2e"
+  "gitHead": "731585449c1e6729e634c99e1b3d9758b8116f58"
 }

package/types.d.ts

@@ -33,6 +33,7 @@ export interface RenderMobileDelimiter {
     <A extends AdditionalDefault>(props: RenderMobileDelimiterProps<A>): ReactNode;
 }
 export interface BaseTreeSelectorProps<A extends AdditionalDefault> {
+    value: string[];
     collection: TreeCollection<A>;
     singleChoice?: boolean;
     leavesOnly?: boolean;
@@ -50,27 +51,22 @@ export interface BaseTreeSelectorProps<A extends AdditionalDefault> {
     renderItemForDesktop?: RenderItem;
     renderItem?: RenderItem;
     renderMobileDelimiter?: RenderMobileDelimiter;
+    contentNotFound?: ReactNode;
+    onMobileNavigationChange?: (currentId?: string) => void;
     trls: {
         selectAllParent: ReactNode;
     };
 }
 export interface DummyProps {
-    value: string[];
     onChange: (id: string, isSelected: boolean) => void;
     collapseToParentId?: never;
     maxSelected?: never;
 }
 type NonDummyProps = {
-    onChange?: (id: string, isSelected: boolean, allSelected: string[]) => void;
+    onChange: (allSelected: string[], id: string, isSelected: boolean) => void;
     collapseToParentId?: boolean;
     maxSelected?: number;
-} & ({
-    value: string[];
-    initialValue?: never;
-} | {
-    value?: never;
-    initialValue: string[];
-});
+};
 export type TreeSelectorDummyProps<A extends AdditionalDefault> = BaseTreeSelectorProps<A> & DummyProps;
 export type TreeSelectorProps<A extends AdditionalDefault> = BaseTreeSelectorProps<A> & NonDummyProps;
 export interface ListControls {

package/useAnimationTimeout.d.ts

@@ -0,0 +1,7 @@
+interface UseAnimationTimeoutHook {
+    (): {
+        animationTimeout: number;
+    };
+}
+export declare const useAnimationTimeout: UseAnimationTimeoutHook;
+export {};

package/useAnimationTimeout.js

@@ -0,0 +1,23 @@
+import './index.css';
+import { useState, useLayoutEffect } from 'react';
+
+var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_1-6-0","itemAnimationTimeout":"magritte-item-animation-timeout___Pdli9_1-6-0"};
+
+const useAnimationTimeout = () => {
+    const [animationTimeout, setAnimationTimeout] = useState(0);
+    useLayoutEffect(() => {
+        const animationTimeoutElement = document.createElement('div');
+        animationTimeoutElement.classList.add(styles.itemAnimationTimeout);
+        document.body.appendChild(animationTimeoutElement);
+        const style = window.getComputedStyle(animationTimeoutElement);
+        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
+        if (Number.isInteger(animationTimeout)) {
+            setAnimationTimeout(animationTimeout);
+        }
+        document.body.removeChild(animationTimeoutElement);
+    }, []);
+    return { animationTimeout };
+};
+
+export { useAnimationTimeout };
+//# sourceMappingURL=useAnimationTimeout.js.map

package/useAnimationTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationTimeout.js","sources":["../src/useAnimationTimeout.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport styles from './animation.less';\n\ninterface UseAnimationTimeoutHook {\n    (): { animationTimeout: number };\n}\n\nexport const useAnimationTimeout: UseAnimationTimeoutHook = () => {\n    const [animationTimeout, setAnimationTimeout] = useState(0);\n\n    useLayoutEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.itemAnimationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    return { animationTimeout };\n};\n"],"names":[],"mappings":";;;;AAQO,MAAM,mBAAmB,GAA4B,MAAK;IAC7D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,eAAe,CAAC,MAAK;QACjB,MAAM,uBAAuB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,uBAAuB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;AACnE,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAsB,oBAAA,CAAA,CAAC,EAAE,EAAE,CAAC,CAAC;AACtF,QAAA,IAAI,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE;YACpC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AACzC,SAAA;AACD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;KACtD,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAChC;;;;"}

package/useDisabled.d.ts

@@ -1,11 +1,8 @@
-import TreeCollection from './collection/treeCollection';
 import { AdditionalDefault } from './collection/types';
-interface UseDisabledHookProps<A extends AdditionalDefault> {
+import { TreeSelectorProps } from './types';
+type UseDisabledHookProps<A extends AdditionalDefault> = {
     selected: string[];
-    disabled?: string[];
-    collection: TreeCollection<A>;
-    maxSelected?: number;
-}
+} & Pick<TreeSelectorProps<A>, 'disabled' | 'collection' | 'maxSelected'>;
 interface UseDisabledHook {
     <A extends AdditionalDefault>(props: UseDisabledHookProps<A>): string[] | undefined;
 }

package/useDisabled.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDisabled.js","sources":["../src/useDisabled.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface UseDisabledHookProps<A extends AdditionalDefault> {\n    selected: string[];\n    disabled?: string[];\n    collection: TreeCollection<A>;\n    maxSelected?: number;\n}\ninterface UseDisabledHook {\n    <A extends AdditionalDefault>(props: UseDisabledHookProps<A>): string[] | undefined;\n}\n\nexport const useDisabled: UseDisabledHook = ({ selected, disabled, collection, maxSelected }) => {\n    return useMemo(() => {\n        const valueIds = getIdsWithNoParentsInSameList(collection, selected);\n        if (maxSelected && valueIds.length >= maxSelected) {\n            return collection\n                .toList()\n                .map(({ id }) => id)\n                .filter((id) => !selected.includes(id));\n        }\n        return disabled;\n    }, [selected, collection, disabled, maxSelected]);\n};\n"],"names":[],"mappings":";;;;AAgBO,MAAM,WAAW,GAAoB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,KAAI;IAC5F,OAAO,OAAO,CAAC,MAAK;QAChB,MAAM,QAAQ,GAAG,6BAA6B,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACrE,QAAA,IAAI,WAAW,IAAI,QAAQ,CAAC,MAAM,IAAI,WAAW,EAAE;AAC/C,YAAA,OAAO,UAAU;AACZ,iBAAA,MAAM,EAAE;iBACR,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;AACnB,iBAAA,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/C,SAAA;AACD,QAAA,OAAO,QAAQ,CAAC;KACnB,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AACtD;;;;"}
+{"version":3,"file":"useDisabled.js","sources":["../src/useDisabled.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseDisabledHookProps<A extends AdditionalDefault> = {\n    selected: string[];\n} & Pick<TreeSelectorProps<A>, 'disabled' | 'collection' | 'maxSelected'>;\ninterface UseDisabledHook {\n    <A extends AdditionalDefault>(props: UseDisabledHookProps<A>): string[] | undefined;\n}\n\nexport const useDisabled: UseDisabledHook = ({ selected, disabled, collection, maxSelected }) => {\n    return useMemo(() => {\n        const valueIds = getIdsWithNoParentsInSameList(collection, selected);\n        if (maxSelected && valueIds.length >= maxSelected) {\n            return collection\n                .toList()\n                .map(({ id }) => id)\n                .filter((id) => !selected.includes(id));\n        }\n        return disabled;\n    }, [selected, collection, disabled, maxSelected]);\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,WAAW,GAAoB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,KAAI;IAC5F,OAAO,OAAO,CAAC,MAAK;QAChB,MAAM,QAAQ,GAAG,6BAA6B,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACrE,QAAA,IAAI,WAAW,IAAI,QAAQ,CAAC,MAAM,IAAI,WAAW,EAAE;AAC/C,YAAA,OAAO,UAAU;AACZ,iBAAA,MAAM,EAAE;iBACR,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;AACnB,iBAAA,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/C,SAAA;AACD,QAAA,OAAO,QAAQ,CAAC;KACnB,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AACtD;;;;"}

package/useRenderInput.js

@@ -1,21 +1,27 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback } from 'react';
+import { useDebounce } from '@hh.ru/magritte-common-func-utils';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { SearchInput } from '@hh.ru/magritte-ui-input';
+import { useAnimationTimeout } from './useAnimationTimeout.js';
 
 const useRenderInput = () => {
     const [contentFilterQuery, setContentFilterQuery] = useState('');
+    const { animationTimeout } = useAnimationTimeout();
     const [value, setValue] = useState('');
     const { isMobile } = useBreakpoint();
     useEffect(() => {
         setValue('');
         setContentFilterQuery('');
     }, [isMobile]);
-    const handleChangeInput = useCallback((newValue) => {
+    const debouncedContentFilterQuery = useDebounce(useCallback((newValue) => {
         setContentFilterQuery(newValue);
+    }, []), animationTimeout);
+    const handleChangeInput = useCallback((newValue) => {
+        debouncedContentFilterQuery(newValue);
         setValue(newValue);
-    }, [setContentFilterQuery]);
+    }, [debouncedContentFilterQuery]);
     const setInputValue = useCallback((newValue) => {
         setValue(newValue);
     }, [setValue]);

package/useRenderInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\n\nexport interface UseRenderInputHook {\n    (): {\n        contentFilterQuery: string;\n        setInputValue: (newValue: string) => void;\n        handleChangeInput: (newValue: string) => void;\n        renderInput: () => ReactElement;\n    };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n    const [contentFilterQuery, setContentFilterQuery] = useState('');\n    const [value, setValue] = useState('');\n    const { isMobile } = useBreakpoint();\n\n    useEffect(() => {\n        setValue('');\n        setContentFilterQuery('');\n    }, [isMobile]);\n\n    const handleChangeInput = useCallback(\n        (newValue: string) => {\n            setContentFilterQuery(newValue);\n            setValue(newValue);\n        },\n        [setContentFilterQuery]\n    );\n\n    const setInputValue = useCallback(\n        (newValue: string) => {\n            setValue(newValue);\n        },\n        [setValue]\n    );\n\n    const renderInput = useCallback(() => {\n        return <SearchInput value={value} onChange={handleChangeInput} />;\n    }, [value, handleChangeInput]);\n\n    return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;AAcO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,QAAgB,KAAI;QACjB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,qBAAqB,CAAC,CAC1B,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACjC,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAA,CAAI,CAAC;AACtE,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AACjF;;;;"}
+{"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\n\nimport { useDebounce } from '@hh.ru/magritte-common-func-utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\n\nexport interface UseRenderInputHook {\n    (): {\n        contentFilterQuery: string;\n        setInputValue: (newValue: string) => void;\n        handleChangeInput: (newValue: string) => void;\n        renderInput: () => ReactElement;\n    };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n    const [contentFilterQuery, setContentFilterQuery] = useState('');\n    const { animationTimeout } = useAnimationTimeout();\n    const [value, setValue] = useState('');\n    const { isMobile } = useBreakpoint();\n\n    useEffect(() => {\n        setValue('');\n        setContentFilterQuery('');\n    }, [isMobile]);\n\n    const debouncedContentFilterQuery = useDebounce(\n        useCallback((newValue: string) => {\n            setContentFilterQuery(newValue);\n        }, []),\n        animationTimeout\n    );\n\n    const handleChangeInput = useCallback(\n        (newValue: string) => {\n            debouncedContentFilterQuery(newValue);\n            setValue(newValue);\n        },\n        [debouncedContentFilterQuery]\n    );\n\n    const setInputValue = useCallback(\n        (newValue: string) => {\n            setValue(newValue);\n        },\n        [setValue]\n    );\n\n    const renderInput = useCallback(() => {\n        return <SearchInput value={value} onChange={handleChangeInput} />;\n    }, [value, handleChangeInput]);\n\n    return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,2BAA2B,GAAG,WAAW,CAC3C,WAAW,CAAC,CAAC,QAAgB,KAAI;QAC7B,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACpC,KAAC,EAAE,EAAE,CAAC,EACN,gBAAgB,CACnB,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,QAAgB,KAAI;QACjB,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,2BAA2B,CAAC,CAChC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACjC,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAA,CAAI,CAAC;AACtE,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AACjF;;;;"}

package/useSelected.d.ts

@@ -1,15 +1,9 @@
-import TreeCollection from './collection/treeCollection';
 import { AdditionalDefault } from './collection/types';
 import ImmutableSelectionStrategy from './strategy/immutableSelectionStrategy';
-interface UseSelectedHookProps<A extends AdditionalDefault> {
-    value?: string[];
-    initialValue?: string[];
+import { TreeSelectorProps } from './types';
+type UseSelectedHookProps<A extends AdditionalDefault> = {
     strategy: ImmutableSelectionStrategy<A>;
-    collection: TreeCollection<A>;
-    onChange?: (id: string, isSelected: boolean, allSelected: string[]) => void;
-    collapseToParentId?: boolean;
-    maxSelected?: number;
-}
+} & Pick<TreeSelectorProps<A>, 'value' | 'onChange' | 'collapseToParentId' | 'maxSelected' | 'collection'>;
 type UseSelectedHookReturn = {
     selected: string[];
     setSelected: (id: string, isSelected: boolean) => void;

package/useSelected.js

@@ -3,18 +3,15 @@ import { useCallback, useState, useRef, useEffect } from 'react';
 import { getIdsWithNoParentsInSameList } from './collection/treeCollectionHelper.js';
 import './collection/treeCollection.js';
 
-const defaultArray = [];
-const useSelected = ({ value, initialValue = defaultArray, maxSelected, strategy, collection, collapseToParentId, onChange, }) => {
+const useSelected = ({ value, maxSelected, strategy, collection, collapseToParentId, onChange, }) => {
     const getSelectedFromValue = useCallback(() => {
-        let newValue = value?.slice();
+        let newValue = value.slice();
         if (maxSelected && newValue && newValue.length > maxSelected) {
             newValue = newValue.slice(0, maxSelected);
         }
         return strategy.add([], newValue);
     }, [value, maxSelected, strategy]);
-    const isControlled = !!value;
-    const slicedInitialValue = initialValue && maxSelected ? initialValue.slice(0, maxSelected) : initialValue;
-    const [selected, setSelectedState] = useState(isControlled ? getSelectedFromValue : slicedInitialValue);
+    const [selected, setSelectedState] = useState(getSelectedFromValue);
     const firstRender = useRef(true);
     const setSelected = useCallback((id, isSelected) => {
         const ids = [id];
@@ -25,21 +22,16 @@ const useSelected = ({ value, initialValue = defaultArray, maxSelected, strategy
         if (maxSelected && filteredUpdatedSelected.length > maxSelected) {
             filteredUpdatedSelected.length = maxSelected;
         }
-        if (!isControlled) {
-            setSelectedState(strategy.add([], filteredUpdatedSelected));
-        }
-        onChange?.(id, isSelected, filteredUpdatedSelected);
-    }, [strategy, selected, collection, collapseToParentId, onChange, isControlled, maxSelected]);
+        onChange(filteredUpdatedSelected, id, isSelected);
+    }, [strategy, selected, collection, collapseToParentId, onChange, maxSelected]);
     useEffect(() => {
-        if (isControlled) {
-            if (firstRender.current) {
-                firstRender.current = false;
-                return;
-            }
-            const selected = getSelectedFromValue();
-            setSelectedState(selected);
+        if (firstRender.current) {
+            firstRender.current = false;
+            return;
         }
-    }, [getSelectedFromValue, firstRender, isControlled]);
+        const selected = getSelectedFromValue();
+        setSelectedState(selected);
+    }, [getSelectedFromValue, firstRender]);
     return {
         selected,
         setSelected,

package/useSelected.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelected.js","sources":["../src/useSelected.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\n\ninterface UseSelectedHookProps<A extends AdditionalDefault> {\n    value?: string[];\n    initialValue?: string[];\n    strategy: ImmutableSelectionStrategy<A>;\n    collection: TreeCollection<A>;\n    onChange?: (id: string, isSelected: boolean, allSelected: string[]) => void;\n    collapseToParentId?: boolean;\n    maxSelected?: number;\n}\n\ntype UseSelectedHookReturn = {\n    selected: string[];\n    setSelected: (id: string, isSelected: boolean) => void;\n};\n\ninterface UseSelectedHook {\n    <A extends AdditionalDefault>(props: UseSelectedHookProps<A>): UseSelectedHookReturn;\n}\n\nconst defaultArray: string[] = [];\n\nexport const useSelected: UseSelectedHook = ({\n    value,\n    initialValue = defaultArray,\n    maxSelected,\n    strategy,\n    collection,\n    collapseToParentId,\n    onChange,\n}) => {\n    const getSelectedFromValue = useCallback((): string[] => {\n        let newValue = value?.slice();\n        if (maxSelected && newValue && newValue.length > maxSelected) {\n            newValue = newValue.slice(0, maxSelected);\n        }\n        return strategy.add([], newValue as string[]);\n    }, [value, maxSelected, strategy]);\n    const isControlled = !!value;\n    const slicedInitialValue = initialValue && maxSelected ? initialValue.slice(0, maxSelected) : initialValue;\n\n    const [selected, setSelectedState] = useState(isControlled ? getSelectedFromValue : slicedInitialValue);\n    const firstRender = useRef(true);\n\n    const setSelected = useCallback(\n        (id: string, isSelected: boolean) => {\n            const ids = [id];\n            const updatedSelected = isSelected ? strategy.add(selected, ids) : strategy.remove(selected, ids);\n            const filteredUpdatedSelected = collapseToParentId\n                ? getIdsWithNoParentsInSameList(collection, updatedSelected)\n                : updatedSelected;\n            if (maxSelected && filteredUpdatedSelected.length > maxSelected) {\n                filteredUpdatedSelected.length = maxSelected;\n            }\n            if (!isControlled) {\n                setSelectedState(strategy.add([], filteredUpdatedSelected));\n            }\n            onChange?.(id, isSelected, filteredUpdatedSelected);\n        },\n        [strategy, selected, collection, collapseToParentId, onChange, isControlled, maxSelected]\n    );\n\n    useEffect(() => {\n        if (isControlled) {\n            if (firstRender.current) {\n                firstRender.current = false;\n                return;\n            }\n\n            const selected = getSelectedFromValue();\n\n            setSelectedState(selected);\n        }\n    }, [getSelectedFromValue, firstRender, isControlled]);\n\n    return {\n        selected,\n        setSelected,\n    };\n};\n"],"names":[],"mappings":";;;;AA0BA,MAAM,YAAY,GAAa,EAAE,CAAC;MAErB,WAAW,GAAoB,CAAC,EACzC,KAAK,EACL,YAAY,GAAG,YAAY,EAC3B,WAAW,EACX,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAe;AACpD,QAAA,IAAI,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC;QAC9B,IAAI,WAAW,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,WAAW,EAAE;YAC1D,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAC7C,SAAA;QACD,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,QAAoB,CAAC,CAAC;KACjD,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC;IAC7B,MAAM,kBAAkB,GAAG,YAAY,IAAI,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG,YAAY,CAAC;AAE3G,IAAA,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,GAAG,oBAAoB,GAAG,kBAAkB,CAAC,CAAC;AACxG,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,EAAU,EAAE,UAAmB,KAAI;AAChC,QAAA,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;QACjB,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAClG,MAAM,uBAAuB,GAAG,kBAAkB;AAC9C,cAAE,6BAA6B,CAAC,UAAU,EAAE,eAAe,CAAC;cAC1D,eAAe,CAAC;AACtB,QAAA,IAAI,WAAW,IAAI,uBAAuB,CAAC,MAAM,GAAG,WAAW,EAAE;AAC7D,YAAA,uBAAuB,CAAC,MAAM,GAAG,WAAW,CAAC;AAChD,SAAA;QACD,IAAI,CAAC,YAAY,EAAE;YACf,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,uBAAuB,CAAC,CAAC,CAAC;AAC/D,SAAA;QACD,QAAQ,GAAG,EAAE,EAAE,UAAU,EAAE,uBAAuB,CAAC,CAAC;AACxD,KAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAC,CAC5F,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,YAAY,EAAE;YACd,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,gBAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC5B,OAAO;AACV,aAAA;AAED,YAAA,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;YAExC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC9B,SAAA;KACJ,EAAE,CAAC,oBAAoB,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtD,OAAO;QACH,QAAQ;QACR,WAAW;KACd,CAAC;AACN;;;;"}
+{"version":3,"file":"useSelected.js","sources":["../src/useSelected.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseSelectedHookProps<A extends AdditionalDefault> = {\n    strategy: ImmutableSelectionStrategy<A>;\n} & Pick<TreeSelectorProps<A>, 'value' | 'onChange' | 'collapseToParentId' | 'maxSelected' | 'collection'>;\n\ntype UseSelectedHookReturn = {\n    selected: string[];\n    setSelected: (id: string, isSelected: boolean) => void;\n};\n\ninterface UseSelectedHook {\n    <A extends AdditionalDefault>(props: UseSelectedHookProps<A>): UseSelectedHookReturn;\n}\n\nexport const useSelected: UseSelectedHook = ({\n    value,\n    maxSelected,\n    strategy,\n    collection,\n    collapseToParentId,\n    onChange,\n}) => {\n    const getSelectedFromValue = useCallback((): string[] => {\n        let newValue = value.slice();\n        if (maxSelected && newValue && newValue.length > maxSelected) {\n            newValue = newValue.slice(0, maxSelected);\n        }\n        return strategy.add([], newValue);\n    }, [value, maxSelected, strategy]);\n\n    const [selected, setSelectedState] = useState(getSelectedFromValue);\n    const firstRender = useRef(true);\n\n    const setSelected = useCallback(\n        (id: string, isSelected: boolean) => {\n            const ids = [id];\n            const updatedSelected = isSelected ? strategy.add(selected, ids) : strategy.remove(selected, ids);\n            const filteredUpdatedSelected = collapseToParentId\n                ? getIdsWithNoParentsInSameList(collection, updatedSelected)\n                : updatedSelected;\n            if (maxSelected && filteredUpdatedSelected.length > maxSelected) {\n                filteredUpdatedSelected.length = maxSelected;\n            }\n\n            onChange(filteredUpdatedSelected, id, isSelected);\n        },\n        [strategy, selected, collection, collapseToParentId, onChange, maxSelected]\n    );\n\n    useEffect(() => {\n        if (firstRender.current) {\n            firstRender.current = false;\n            return;\n        }\n\n        const selected = getSelectedFromValue();\n\n        setSelectedState(selected);\n    }, [getSelectedFromValue, firstRender]);\n\n    return {\n        selected,\n        setSelected,\n    };\n};\n"],"names":[],"mappings":";;;;AAoBa,MAAA,WAAW,GAAoB,CAAC,EACzC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAe;AACpD,QAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QAC7B,IAAI,WAAW,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,WAAW,EAAE;YAC1D,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAC7C,SAAA;QACD,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;KACrC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AACpE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,EAAU,EAAE,UAAmB,KAAI;AAChC,QAAA,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;QACjB,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAClG,MAAM,uBAAuB,GAAG,kBAAkB;AAC9C,cAAE,6BAA6B,CAAC,UAAU,EAAE,eAAe,CAAC;cAC1D,eAAe,CAAC;AACtB,QAAA,IAAI,WAAW,IAAI,uBAAuB,CAAC,MAAM,GAAG,WAAW,EAAE;AAC7D,YAAA,uBAAuB,CAAC,MAAM,GAAG,WAAW,CAAC;AAChD,SAAA;AAED,QAAA,QAAQ,CAAC,uBAAuB,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC;AACtD,KAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAC9E,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,YAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,OAAO;AACV,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;QAExC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC/B,KAAC,EAAE,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,OAAO;QACH,QAAQ;QACR,WAAW;KACd,CAAC;AACN;;;;"}

package/ItemContent-cec51c98.js

@@ -1,23 +0,0 @@
-import './index.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback } from 'react';
-import classnames from 'classnames';
-import { DotFilledSize24, ChevronDownOutlinedSize24, ChevronUpOutlinedSize24 } 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';
-
-var styles = {"wrapper":"magritte-wrapper___GHKV6_1-5-1","letter":"magritte-letter___yZOCU_1-5-1","icon":"magritte-icon___kO3Fj_1-5-1","space":"magritte-space___xTO79_1-5-1","iconActive":"magritte-iconActive___4yrG5_1-5-1","content":"magritte-content___ZRc6R_1-5-1","with-shift":"magritte-with-shift___ZErxZ_1-5-1","withShift":"magritte-with-shift___ZErxZ_1-5-1","with-indent":"magritte-with-indent___MH9Vy_1-5-1","withIndent":"magritte-with-indent___MH9Vy_1-5-1","item":"magritte-item___2LtOL_1-5-1","children":"magritte-children___kq-eq_1-5-1","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-5-1","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-5-1","with-three-boxes":"magritte-with-three-boxes___cyVao_1-5-1","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-5-1"};
-
-const ItemContent = ({ item, 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 input = hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, indeterminate: isIndeterminate, singleChoice: singleChoice })) : undefined;
-    return (jsxs("div", { className: styles.wrapper, 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 && (jsxs("div", { className: classnames(styles.icon, {
-                    [styles.iconActive]: hasChildren,
-                }), onClick: handleExpandableClick, children: [isExpanded && jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }), !isExpanded && jsx(ChevronUpOutlinedSize24, { initial: "tertiary" })] })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
-};
-
-export { ItemContent as I, styles as s };
-//# sourceMappingURL=ItemContent-cec51c98.js.map

package/ItemContent-cec51c98.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemContent-cec51c98.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { ChevronDownOutlinedSize24, ChevronUpOutlinedSize24, DotFilledSize24 } 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<A extends AdditionalDefault> {\n    item: TreeModel<A>;\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;\n    isSearch: boolean;\n}\n\nconst ItemContent = <A extends AdditionalDefault>({\n    item,\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<A>): 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 input = hasAction ? (\n        <Action\n            selected={isSelected}\n            onChange={onChange}\n            id={item.id}\n            indeterminate={isIndeterminate}\n            singleChoice={singleChoice}\n        />\n    ) : undefined;\n\n    return (\n        <div className={styles.wrapper}>\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, {\n                        [styles.iconActive]: hasChildren,\n                    })}\n                    onClick={handleExpandableClick}\n                >\n                    {isExpanded && <ChevronDownOutlinedSize24 initial=\"tertiary\" />}\n                    {!isExpanded && <ChevronUpOutlinedSize24 initial=\"tertiary\" />}\n                </div>\n            )}\n            {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n        </div>\n    );\n};\n\nexport { ItemContent };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AA+BA,MAAM,WAAW,GAAG,CAA8B,EAC9C,IAAI,EACJ,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,MAAM,EACN,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,GAAG,oBAAoB,GAC9B,KAAkB;IAC/B,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;IAC7G,MAAM,kBAAkB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAS,GAAG,CAAC,WAAW,CAAC;AAC/D,IAAA,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAElE,IAAA,MAAM,KAAK,GAAG,SAAS,IACnBA,GAAA,CAAC,MAAM,EAAA,EACH,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,eAAe,EAC9B,YAAY,EAAE,YAAY,EAC5B,CAAA,IACF,SAAS,CAAC;IAEd,QACIC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CACzB,CAAC,MAAM,IAAI,gBAAgB,MACxBD,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EACxB,MAAM,KACHA,GAAA,CAAC,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAClE,MAAM,EACJ,CAAA,CACV,EACC,CAAA,CACT,EACA,MAAM,KACHA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,YACvBA,GAAC,CAAA,eAAe,EAAC,EAAA,OAAO,EAAC,UAAU,GAAG,EACpC,CAAA,CACT,EAEA,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC3CA,GAAA,CAAA,KAAA,EAAA,EAAa,SAAS,EAAE,MAAM,CAAC,KAAK,EAA1B,EAAA,CAAC,CAA6B,CAC3C,CAAC,EAED,WAAW,KACRC,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,oBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,WAAW;iBACnC,CAAC,EACF,OAAO,EAAE,qBAAqB,aAE7B,UAAU,IAAID,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,CAAG,EAC9D,CAAC,UAAU,IAAIA,GAAC,CAAA,uBAAuB,EAAC,EAAA,OAAO,EAAC,UAAU,GAAG,CAC5D,EAAA,CAAA,CACT,EACA,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAC3F,EAAA,CAAA,EACR;AACN;;;;"}