@hh.ru/magritte-ui-tree-selector 1.1.5 → 1.2.0

package/Action.d.ts

@@ -5,7 +5,7 @@ interface ActionProps {
     onChange: (id: string, isSelected: boolean) => void;
     id: TreeModel['id'];
     selected: boolean;
-    indeterminate: boolean;
+    indeterminate?: boolean;
 }
 export declare const Action: FC<ActionProps>;
 export {};

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 } 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;;;;"}

package/Item.js

@@ -2,7 +2,7 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import classnames from 'classnames';
-import { s as styles, I as ItemContent } from './ItemContent-ad35f8ca.js';
+import { s as styles, I as ItemContent } from './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
@@ -11,35 +11,34 @@ import '@hh.ru/magritte-ui-typography';
 
 const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, leavesOnly, singleChoice, checkSelectable, onExpansion, onChange, children, }) => {
     const modelsOnLevel = useMemo(() => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()), [parentId, collection]);
-    const hasChildrenOnLevel = useMemo(() => {
-        return modelsOnLevel.some((model) => {
-            return collection.hasChildren(model.id);
-        });
-    }, [modelsOnLevel, collection]);
-    const hasActionOnLevel = useMemo(() => {
-        return modelsOnLevel.some((model) => {
-            const hasChildren = collection.hasChildren(model.id);
-            const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);
-            return hasAction;
-        });
-    }, [modelsOnLevel, collection, leavesOnly, checkSelectable]);
     const hasLetterOnLevel = useMemo(() => {
         return modelsOnLevel.some((model) => model.additional?.char);
     }, [modelsOnLevel]);
+    // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио
+    const maxControlsOnLevel = useMemo(() => {
+        return modelsOnLevel.reduce((currentMax, model) => {
+            const hasChildren = collection.hasChildren(model.id);
+            const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);
+            const actionCount = +hasChildren + +!!hasAction;
+            return Math.max(currentMax, actionCount);
+        }, 0);
+    }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);
     const hasChildren = collection.hasChildren(item.id);
     const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);
     const hasLetter = item.additional?.char;
+    const realControlsCount = +hasChildren + +!!hasAction;
+    // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне
+    const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);
     const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;
-    const actionsCount = +hasLetterOnLevel + +hasActionOnLevel + +hasChildrenOnLevel;
-    const hasShift = actionsCount > 1 &&
-        ((hasParentAction && (hasChildrenOnLevel || hasLetterOnLevel)) ||
-            (!hasParentAction && (hasLetterOnLevel || (!hasChildrenOnLevel && hasActionOnLevel))));
-    return (jsxs("div", { className: classnames({
-            [styles.withLetter]: hasLetter || hasLetterOnLevel,
-            [styles.withChevron]: hasChildren || hasChildrenOnLevel,
-            [styles.withAction]: hasAction || hasActionOnLevel,
+    const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;
+    const hasShift = allBoxesCount > 1 &&
+        ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));
+    return (jsxs("div", { className: classnames(styles.item, {
+            [styles.withTwoBoxes]: allBoxesCount === 2,
+            [styles.withThreeBoxes]: allBoxesCount === 3,
             [styles.withShift]: hasShift && parentId,
-        }), children: [jsx(ItemContent, { item: item, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter, hasChildrenOnLevel: hasChildrenOnLevel, expanded: isExpanded, onExpansion: onExpansion, selected: isSelected, onChange: onChange, singleChoice: singleChoice, indeterminate: isIndeterminate, hasActionOnLevel: hasActionOnLevel, hasLetterOnLevel: hasLetterOnLevel }), children && jsx("div", { className: styles.children, children: children })] }));
+            [styles.withIndent]: allBoxesCount === 0,
+        }), children: [jsx(ItemContent, { item: item, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter, expanded: isExpanded, onExpansion: onExpansion, selected: isSelected, onChange: onChange, singleChoice: singleChoice, indeterminate: isIndeterminate, hasLetterOnLevel: hasLetterOnLevel, hasDot: hasDot, maxControlsOnLevel: maxControlsOnLevel }), children && jsx("div", { className: styles.children, children: children })] }));
 };
 
 export { Item };

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';\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    singleChoice?: boolean;\n    isIndeterminate: boolean;\n    onExpansion: (id: string) => void;\n    onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const Item = <A extends AdditionalDefault>({\n    collection,\n    item,\n    parentId,\n    isExpanded,\n    isSelected,\n    isIndeterminate,\n    leavesOnly,\n    singleChoice,\n    checkSelectable,\n    onExpansion,\n    onChange,\n    children,\n}: ItemProps<A>): ReactElement => {\n    const modelsOnLevel = useMemo(\n        () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n        [parentId, collection]\n    );\n    const hasChildrenOnLevel = useMemo(() => {\n        return modelsOnLevel.some((model) => {\n            return collection.hasChildren(model.id);\n        });\n    }, [modelsOnLevel, collection]);\n    const hasActionOnLevel = useMemo(() => {\n        return modelsOnLevel.some((model) => {\n            const hasChildren = collection.hasChildren(model.id);\n            const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n            return hasAction;\n        });\n    }, [modelsOnLevel, collection, leavesOnly, checkSelectable]);\n    const hasLetterOnLevel = useMemo(() => {\n        return modelsOnLevel.some((model) => model.additional?.char);\n    }, [modelsOnLevel]);\n    const hasChildren = collection.hasChildren(item.id);\n    const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n    const hasLetter = item.additional?.char;\n    const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n    const actionsCount = +hasLetterOnLevel + +hasActionOnLevel + +hasChildrenOnLevel;\n    const hasShift =\n        actionsCount > 1 &&\n        ((hasParentAction && (hasChildrenOnLevel || hasLetterOnLevel)) ||\n            (!hasParentAction && (hasLetterOnLevel || (!hasChildrenOnLevel && hasActionOnLevel))));\n\n    return (\n        <div\n            className={classnames({\n                [styles.withLetter]: hasLetter || hasLetterOnLevel,\n                [styles.withChevron]: hasChildren || hasChildrenOnLevel,\n                [styles.withAction]: hasAction || hasActionOnLevel,\n                [styles.withShift]: hasShift && parentId,\n            })}\n        >\n            <ItemContent\n                item={item}\n                hasChildren={hasChildren}\n                hasAction={!!hasAction}\n                letter={hasLetter}\n                hasChildrenOnLevel={hasChildrenOnLevel}\n                expanded={isExpanded}\n                onExpansion={onExpansion}\n                selected={isSelected}\n                onChange={onChange}\n                singleChoice={singleChoice}\n                indeterminate={isIndeterminate}\n                hasActionOnLevel={hasActionOnLevel}\n                hasLetterOnLevel={hasLetterOnLevel}\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 } 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';\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    singleChoice?: boolean;\n    isIndeterminate: boolean;\n    onExpansion: (id: string) => void;\n    onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const Item = <A extends AdditionalDefault>({\n    collection,\n    item,\n    parentId,\n    isExpanded,\n    isSelected,\n    isIndeterminate,\n    leavesOnly,\n    singleChoice,\n    checkSelectable,\n    onExpansion,\n    onChange,\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 modelsOnLevel.some((model) => model.additional?.char);\n    }, [modelsOnLevel]);\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;\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}\n                expanded={isExpanded}\n                onExpansion={onExpansion}\n                selected={isSelected}\n                onChange={onChange}\n                singleChoice={singleChoice}\n                indeterminate={isIndeterminate}\n                hasLetterOnLevel={hasLetterOnLevel}\n                hasDot={hasDot}\n                maxControlsOnLevel={maxControlsOnLevel}\n            />\n            {children && <div className={styles.children}>{children}</div>}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ItemContent-59665486.js

@@ -0,0 +1,22 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import classnames from 'classnames';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { DotFilledSize24, ChevronDownOutlinedSize24, ChevronUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Action } from './Action.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+var styles = {"wrapper":"magritte-wrapper___GHKV6_1-2-0","letter":"magritte-letter___yZOCU_1-2-0","icon":"magritte-icon___kO3Fj_1-2-0","space":"magritte-space___xTO79_1-2-0","iconActive":"magritte-iconActive___4yrG5_1-2-0","content":"magritte-content___ZRc6R_1-2-0","with-shift":"magritte-with-shift___ZErxZ_1-2-0","withShift":"magritte-with-shift___ZErxZ_1-2-0","with-indent":"magritte-with-indent___MH9Vy_1-2-0","withIndent":"magritte-with-indent___MH9Vy_1-2-0","item":"magritte-item___2LtOL_1-2-0","children":"magritte-children___kq-eq_1-2-0","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-2-0","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-2-0","with-three-boxes":"magritte-with-three-boxes___cyVao_1-2-0","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-2-0"};
+
+const ItemContent = ({ item, hasAction, hasChildren, letter, expanded, onExpansion, hasLetterOnLevel, selected, onChange, indeterminate, singleChoice, hasDot, maxControlsOnLevel, }) => {
+    const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
+    const currentActionCount = +hasDot + +hasAction + +hasChildren;
+    const neededSpacesCount = maxControlsOnLevel - currentActionCount;
+    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: [expanded && jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }), !expanded && jsx(ChevronUpOutlinedSize24, { initial: "tertiary" })] })), jsx(Cell, { left: hasAction ? (jsx(Action, { selected: selected, onChange: onChange, id: item.id, indeterminate: indeterminate, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) })] }));
+};
+
+export { ItemContent as I, styles as s };
+//# sourceMappingURL=ItemContent-59665486.js.map

package/ItemContent-59665486.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent-59665486.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { ChevronDownOutlinedSize24, ChevronUpOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/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    expanded?: boolean;\n    selected: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    indeterminate: boolean;\n    singleChoice?: boolean;\n    hasLetterOnLevel: boolean;\n    hasDot: boolean;\n    maxControlsOnLevel: number;\n}\n\nconst ItemContent = <A extends AdditionalDefault>({\n    item,\n    hasAction,\n    hasChildren,\n    letter,\n    expanded,\n    onExpansion,\n    hasLetterOnLevel,\n    selected,\n    onChange,\n    indeterminate,\n    singleChoice,\n    hasDot,\n    maxControlsOnLevel,\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    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                    {expanded && <ChevronDownOutlinedSize24 initial=\"tertiary\" />}\n                    {!expanded && <ChevronUpOutlinedSize24 initial=\"tertiary\" />}\n                </div>\n            )}\n\n            <Cell\n                left={\n                    hasAction ? (\n                        <Action\n                            selected={selected}\n                            onChange={onChange}\n                            id={item.id}\n                            indeterminate={indeterminate}\n                            singleChoice={singleChoice}\n                        />\n                    ) : undefined\n                }\n            >\n                <CellText>{item.text}</CellText>\n            </Cell>\n        </div>\n    );\n};\n\nexport { ItemContent };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AA2BA,MAAM,WAAW,GAAG,CAA8B,EAC9C,IAAI,EACJ,SAAS,EACT,WAAW,EACX,MAAM,EACN,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,MAAM,EACN,kBAAkB,GACL,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;IAElE,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CACzB,CAAC,MAAM,IAAI,gBAAgB,MACxBC,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,KACRD,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,oBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,WAAW;AACnC,iBAAA,CAAC,EACF,OAAO,EAAE,qBAAqB,EAAA,QAAA,EAAA,CAE7B,QAAQ,IAAIC,GAAA,CAAC,yBAAyB,EAAA,EAAC,OAAO,EAAC,UAAU,EAAG,CAAA,EAC5D,CAAC,QAAQ,IAAIA,GAAC,CAAA,uBAAuB,IAAC,OAAO,EAAC,UAAU,EAAA,CAAG,IAC1D,CACT,EAEDA,GAAC,CAAA,IAAI,IACD,IAAI,EACA,SAAS,IACLA,GAAA,CAAC,MAAM,EAAA,EACH,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC5B,IACF,SAAS,EAGjB,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,GAAY,EAC7B,CAAA,CAAA,EAAA,CACL,EACR;AACN;;;;"}

package/ItemContent.d.ts

@@ -7,13 +7,13 @@ interface ItemContent<A extends AdditionalDefault> {
     letter?: string;
     onExpansion: (id: string) => void;
     expanded?: boolean;
-    hasChildrenOnLevel: boolean;
     selected: boolean;
     onChange: (id: string, isSelected: boolean) => void;
     indeterminate: boolean;
     singleChoice?: boolean;
-    hasActionOnLevel: boolean;
     hasLetterOnLevel: boolean;
+    hasDot: boolean;
+    maxControlsOnLevel: number;
 }
-declare const ItemContent: <A extends AdditionalDefault>({ item, hasAction, hasChildren, letter, expanded, onExpansion, hasChildrenOnLevel, hasLetterOnLevel, selected, onChange, indeterminate, singleChoice, hasActionOnLevel, }: ItemContent<A>) => ReactElement;
+declare const ItemContent: <A extends AdditionalDefault>({ item, hasAction, hasChildren, letter, expanded, onExpansion, hasLetterOnLevel, selected, onChange, indeterminate, singleChoice, hasDot, maxControlsOnLevel, }: ItemContent<A>) => ReactElement;
 export { ItemContent };

package/ItemContent.js

@@ -6,6 +6,6 @@ import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-typography';
-export { I as ItemContent } from './ItemContent-ad35f8ca.js';
+export { I as ItemContent } from './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 //# sourceMappingURL=ItemContent.js.map

package/ItemsList.js

@@ -3,7 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { Item } from './Item.js';
 import 'react';
 import 'classnames';
-import './ItemContent-ad35f8ca.js';
+import './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';

package/MobileItem.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { AdditionalDefault, TreeModel } from './collection/types';
+interface MobileItemProps<A extends AdditionalDefault> {
+    item: TreeModel<A>;
+    singleChoice?: boolean;
+    isSelectable?: boolean;
+    isSelected: boolean;
+    onChange: (id: string, isSelected: boolean) => void;
+}
+export declare const MobileItem: <A extends AdditionalDefault>({ item, isSelected, singleChoice, isSelectable, onChange, }: MobileItemProps<A>) => ReactElement;
+export {};

package/MobileItem.js

@@ -0,0 +1,14 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import { Action } from './Action.js';
+import 'react';
+import '@hh.ru/magritte-ui-checkbox-radio';
+
+const MobileItem = ({ item, isSelected, singleChoice, isSelectable, onChange, }) => {
+    return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: isSelected, children: jsx(Cell, { Element: 'div', right: isSelectable ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) }) }));
+};
+
+export { MobileItem };
+//# sourceMappingURL=MobileItem.js.map

package/MobileItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } 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 { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface MobileItemProps<A extends AdditionalDefault> {\n    item: TreeModel<A>;\n    singleChoice?: boolean;\n    isSelectable?: boolean;\n    isSelected: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const MobileItem = <A extends AdditionalDefault>({\n    item,\n    isSelected,\n    singleChoice,\n    isSelectable,\n    onChange,\n}: MobileItemProps<A>): ReactElement => {\n    return (\n        <CheckableCardElement padding={16} borderRadius={12} Element=\"label\" checked={isSelected}>\n            <Cell\n                Element={'div'}\n                right={\n                    isSelectable ? (\n                        <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n                    ) : undefined\n                }\n            >\n                <CellText>{item.text}</CellText>\n            </Cell>\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAea,MAAA,UAAU,GAAG,CAA8B,EACpD,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,GACS,KAAkB;AACnC,IAAA,QACIA,GAAA,CAAC,oBAAoB,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU,EAAA,QAAA,EACpFA,GAAC,CAAA,IAAI,IACD,OAAO,EAAE,KAAK,EACd,KAAK,EACD,YAAY,IACRA,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAI,CAAA,IAC7F,SAAS,YAGjBA,GAAC,CAAA,QAAQ,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,IAAI,EAAA,CAAY,EAC7B,CAAA,EAAA,CACY,EACzB;AACN;;;;"}

package/MobileItemsList.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import TreeCollection from './collection/treeCollection';
+import { AdditionalDefault, IdCollectionPredicate } from './collection/types';
+import { ListControls } from './types';
+interface MobileItemsListProps<A extends AdditionalDefault> {
+    collection: TreeCollection<A>;
+    selected: string[];
+    leavesOnly?: boolean;
+    singleChoice?: boolean;
+    checkSelectable?: IdCollectionPredicate;
+    onChange: (id: string, isSelected: boolean) => void;
+}
+export declare const MobileItemsList: import("react").ForwardRefExoticComponent<MobileItemsListProps<AdditionalDefault> & import("react").RefAttributes<ListControls>>;
+export {};

package/MobileItemsList.js

@@ -0,0 +1,34 @@
+import './index.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import { Action } from './Action.js';
+import { MobileItem } from './MobileItem.js';
+import { MobileParentItem } from './MobileParentItem.js';
+import '@hh.ru/magritte-ui-checkbox-radio';
+import '@hh.ru/magritte-ui-card';
+
+const MobileItemsListComponent = (props, ref) => {
+    const { collection, selected, leavesOnly, singleChoice, onChange, checkSelectable } = props;
+    const prevParentIds = useRef([]);
+    const [currentParentId, setCurrentParentId] = useState();
+    const items = useMemo(() => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()), [currentParentId, collection]);
+    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);
+    useImperativeHandle(ref, () => ({
+        back: () => {
+            setCurrentParentId(prevParentIds.current.pop());
+        },
+    }), []);
+    return (jsxs(Fragment, { children: [isSelectable && (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: selected.includes(currentParentId), children: jsx(Cell, { Element: 'div', right: jsx(Action, { selected: selected.includes(currentParentId), onChange: onChange, id: currentParentId, singleChoice: singleChoice }), children: jsx(CellText, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435" }) }) })), items.map((item) => {
+                const hasChildren = collection.hasChildren(item.id);
+                return hasChildren ? (jsx(MobileParentItem, { collection: collection, item: item, selected: selected, onClick: () => {
+                        prevParentIds.current.push(currentParentId);
+                        setCurrentParentId(item.id);
+                    } }, item.id)) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), onChange: onChange }, item.id));
+            })] }));
+};
+const MobileItemsList = forwardRef(MobileItemsListComponent);
+
+export { MobileItemsList };
+//# sourceMappingURL=MobileItemsList.js.map

package/MobileItemsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import { ReactElement, useMemo, useState, useImperativeHandle, forwardRef, ForwardedRef, useRef } 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 { 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 } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemsListProps<A extends AdditionalDefault> {\n    collection: TreeCollection<A>;\n    selected: string[];\n    leavesOnly?: boolean;\n    singleChoice?: boolean;\n    checkSelectable?: IdCollectionPredicate;\n    onChange: (id: string, isSelected: boolean) => void;\n}\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n    props: MobileItemsListProps<A>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const { collection, selected, leavesOnly, singleChoice, onChange, checkSelectable } = props;\n    const prevParentIds = useRef<(string | undefined)[]>([]);\n    const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n    const items = useMemo(\n        () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n        [currentParentId, collection]\n    );\n    const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            back: () => {\n                setCurrentParentId(prevParentIds.current.pop());\n            },\n        }),\n        []\n    );\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                        right={\n                            <Action\n                                selected={selected.includes(currentParentId)}\n                                onChange={onChange}\n                                id={currentParentId}\n                                singleChoice={singleChoice}\n                            />\n                        }\n                    >\n                        <CellText>Выбрать все</CellText>\n                    </Cell>\n                </CheckableCardElement>\n            )}\n            {items.map((item) => {\n                const hasChildren = collection.hasChildren(item.id);\n\n                return hasChildren ? (\n                    <MobileParentItem\n                        key={item.id}\n                        collection={collection}\n                        item={item}\n                        selected={selected}\n                        onClick={() => {\n                            prevParentIds.current.push(currentParentId);\n                            setCurrentParentId(item.id);\n                        }}\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                        onChange={onChange}\n                    />\n                );\n            })}\n        </>\n    );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAoBA,MAAM,wBAAwB,GAAG,CAC7B,KAA8B,EAC9B,GAA+B,KACjB;AACd,IAAA,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;AAC5F,IAAA,MAAM,aAAa,GAAG,MAAM,CAAyB,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAsB,CAAC;AAC7E,IAAA,MAAM,KAAK,GAAG,OAAO,CACjB,OAAO,eAAe,GAAG,UAAU,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,EAC5F,CAAC,eAAe,EAAE,UAAU,CAAC,CAChC,CAAC;AACF,IAAA,MAAM,YAAY,GAAG,eAAe,IAAI,CAAC,UAAU,IAAI,eAAe,GAAG,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtG,IAAA,mBAAmB,CACf,GAAG,EACH,OAAO;QACH,IAAI,EAAE,MAAK;YACP,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;SACnD;KACJ,CAAC,EACF,EAAE,CACL,CAAC;AAEF,IAAA,QACIA,IACK,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAY,KACTC,IAAC,oBAAoB,EAAA,EACjB,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAE3C,QAAA,EAAAA,GAAA,CAAC,IAAI,EACD,EAAA,OAAO,EAAE,KAAK,EACd,KAAK,EACDA,GAAC,CAAA,MAAM,IACH,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAC5C,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,eAAe,EACnB,YAAY,EAAE,YAAY,EAC5B,CAAA,EAAA,QAAA,EAGNA,GAAC,CAAA,QAAQ,gFAAuB,EAC7B,CAAA,EAAA,CACY,CAC1B,EACA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;gBAChB,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAEpD,OAAO,WAAW,IACdA,GAAC,CAAA,gBAAgB,EAEb,EAAA,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAK;AACV,wBAAA,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;AAC5C,wBAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;qBAC/B,EAAA,EAPI,IAAI,CAAC,EAAE,CAQd,KAEFA,GAAC,CAAA,UAAU,IAEP,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,EACpD,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,QAAQ,EAAE,QAAQ,EALb,EAAA,IAAI,CAAC,EAAE,CAMd,CACL,CAAC;aACL,CAAC,CACH,EAAA,CAAA,EACL;AACN,CAAC,CAAC;MAEW,eAAe,GAAG,UAAU,CAAC,wBAAwB;;;;"}

package/MobileParentItem.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import TreeCollection from './collection/treeCollection';
+import { AdditionalDefault, TreeModel } from './collection/types';
+interface MobileParentItemProps<A extends AdditionalDefault> {
+    collection: TreeCollection<A>;
+    item: TreeModel<A>;
+    selected: string[];
+    onClick: () => void;
+}
+export declare const MobileParentItem: <A extends AdditionalDefault>({ collection, item, selected, onClick, }: MobileParentItemProps<A>) => ReactElement;
+export {};

package/MobileParentItem.js

@@ -0,0 +1,21 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Card } from '@hh.ru/magritte-ui-card';
+import { Cell, LabelRight, CellText } from '@hh.ru/magritte-ui-cell';
+
+const MobileParentItem = ({ collection, item, selected, onClick, }) => {
+    const childrenSelectedCount = useMemo(() => {
+        let count = 0;
+        collection.walkChildren(item.id, (model) => {
+            if (selected.includes(model.id)) {
+                count += 1;
+            }
+        });
+        return count;
+    }, [collection, selected, item.id]);
+    return (jsx(Card, { padding: 16, borderRadius: 12, showBorder: true, actionCard: true, onClick: onClick, children: jsx(Cell, { right: jsx(LabelRight, { counter: childrenSelectedCount ? childrenSelectedCount.toString() : undefined }), children: jsx(CellText, { children: item.text }) }) }));
+};
+
+export { MobileParentItem };
+//# sourceMappingURL=MobileParentItem.js.map

package/MobileParentItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileParentItem.js","sources":["../src/MobileParentItem.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\n\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText, LabelRight } from '@hh.ru/magritte-ui-cell';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface MobileParentItemProps<A extends AdditionalDefault> {\n    collection: TreeCollection<A>;\n    item: TreeModel<A>;\n    selected: string[];\n    onClick: () => void;\n}\n\nexport const MobileParentItem = <A extends AdditionalDefault>({\n    collection,\n    item,\n    selected,\n    onClick,\n}: MobileParentItemProps<A>): ReactElement => {\n    const childrenSelectedCount = useMemo(() => {\n        let count = 0;\n        collection.walkChildren(item.id, (model) => {\n            if (selected.includes(model.id)) {\n                count += 1;\n            }\n        });\n\n        return count;\n    }, [collection, selected, item.id]);\n\n    return (\n        <Card padding={16} borderRadius={12} showBorder actionCard onClick={onClick}>\n            <Cell right={<LabelRight counter={childrenSelectedCount ? childrenSelectedCount.toString() : undefined} />}>\n                <CellText>{item.text}</CellText>\n            </Cell>\n        </Card>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAcO,MAAM,gBAAgB,GAAG,CAA8B,EAC1D,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,GACgB,KAAkB;AACzC,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACvC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,KAAI;YACvC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;gBAC7B,KAAK,IAAI,CAAC,CAAC;AACd,aAAA;AACL,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,KAAK,CAAC;KAChB,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAEpC,QACIA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAC,IAAA,EAAA,UAAU,EAAC,IAAA,EAAA,OAAO,EAAE,OAAO,EACvE,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAEA,GAAC,CAAA,UAAU,IAAC,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,CAAC,QAAQ,EAAE,GAAG,SAAS,EAAI,CAAA,EAAA,QAAA,EACtGA,GAAC,CAAA,QAAQ,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,IAAI,EAAY,CAAA,EAAA,CAC7B,EACJ,CAAA,EACT;AACN;;;;"}

package/TreeSelector.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import { AdditionalDefault } from './collection/types';
-import { ControlledTreeSelectorProps } from './types';
-export declare const TreeSelector: <A extends AdditionalDefault>({ collection, checkSelectable, initialExpanded, value: selected, leavesOnly, singleChoice, expanded, onExpand, onChange, }: ControlledTreeSelectorProps<A>) => ReactElement;
+import { ListControls } from './types';
+export declare const TreeSelector: import("react").ForwardRefExoticComponent<import("./types").TreeSelectorProps<AdditionalDefault> & import("@hh.ru/magritte-ui-tree-selector/types").ControlledProps & import("react").RefAttributes<ListControls>>;

package/TreeSelector.js

@@ -1,29 +1,38 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';
 import { ItemsList } from './ItemsList.js';
+import { MobileItemsList } from './MobileItemsList.js';
 import useExpanded from './useExpanded.js';
 import { useIndeterminate } from './useIndeterminate.js';
 import './Item.js';
-import 'react';
 import 'classnames';
-import './ItemContent-ad35f8ca.js';
+import './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import './MobileItem.js';
+import './MobileParentItem.js';
+import '@hh.ru/magritte-ui-card';
 
 const defaultCheckSelectable = () => true;
 const defaultArray = [];
-const TreeSelector = ({ collection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, onExpand, onChange, }) => {
+const TreeSelector = forwardRef(({ collection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, onExpand, onChange, }, ref) => {
     const { indeterminate } = useIndeterminate({ collection, selected });
     const { expanded: currentExpanded, handleExpansion } = useExpanded({
         initialValue: expanded ? expanded.slice() : initialExpanded.slice(),
         controlledExpanded: expanded,
         onExpand,
     });
-    return (jsx("div", { children: jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, singleChoice: singleChoice, indeterminate: indeterminate }) }));
-};
+    const { isMobile } = useBreakpoint();
+    return (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { collection: collection, selected: selected, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref })) : (jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, singleChoice: singleChoice, indeterminate: indeterminate })) }));
+});
+TreeSelector.displayName = 'TreeSelector';
 
 export { TreeSelector };
 //# sourceMappingURL=TreeSelector.js.map

package/TreeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ControlledTreeSelectorProps } 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';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nexport const TreeSelector = <A extends AdditionalDefault>({\n    collection,\n    checkSelectable = defaultCheckSelectable,\n    initialExpanded = defaultArray,\n    value: selected,\n    leavesOnly,\n    singleChoice,\n    expanded,\n    onExpand,\n    onChange,\n}: ControlledTreeSelectorProps<A>): ReactElement => {\n    const { indeterminate } = useIndeterminate({ collection, selected });\n    const { expanded: currentExpanded, handleExpansion } = useExpanded({\n        initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n        controlledExpanded: expanded,\n        onExpand,\n    });\n    return (\n        <div>\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                singleChoice={singleChoice}\n                indeterminate={indeterminate}\n            />\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,sBAAsB,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAM,YAAY,GAAa,EAAE,CAAC;AAE3B,MAAM,YAAY,GAAG,CAA8B,EACtD,UAAU,EACV,eAAe,GAAG,sBAAsB,EACxC,eAAe,GAAG,YAAY,EAC9B,KAAK,EAAE,QAAQ,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,GACqB,KAAkB;AAC/C,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,WAAW,CAAC;AAC/D,QAAA,YAAY,EAAE,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE;AACnE,QAAA,kBAAkB,EAAE,QAAQ;QAC5B,QAAQ;AACX,KAAA,CAAC,CAAC;IACH,QACIA,uBACIA,GAAC,CAAA,SAAS,IACN,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,EAC/B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,eAAe,EACzB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAAA,CAC9B,EACA,CAAA,EACR;AACN;;;;"}
+{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef } from 'react';\n\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 { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ControlledTreeSelectorProps, ListControls } 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';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nexport const TreeSelector = forwardRef(\n    <A extends AdditionalDefault>(\n        {\n            collection,\n            checkSelectable = defaultCheckSelectable,\n            initialExpanded = defaultArray,\n            value: selected,\n            leavesOnly,\n            singleChoice,\n            expanded,\n            onExpand,\n            onChange,\n        }: ControlledTreeSelectorProps<A>,\n        ref: ForwardedRef<ListControls>\n    ): ReactElement => {\n        const { indeterminate } = useIndeterminate({ collection, selected });\n        const { expanded: currentExpanded, handleExpansion } = useExpanded({\n            initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n            controlledExpanded: expanded,\n            onExpand,\n        });\n        const { isMobile } = useBreakpoint();\n\n        return (\n            <VSpacingContainer default={12} gteM={0}>\n                {isMobile ? (\n                    <MobileItemsList\n                        collection={collection}\n                        selected={selected}\n                        onChange={onChange}\n                        leavesOnly={leavesOnly}\n                        checkSelectable={checkSelectable}\n                        singleChoice={singleChoice}\n                        ref={ref}\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                        singleChoice={singleChoice}\n                        indeterminate={indeterminate}\n                    />\n                )}\n            </VSpacingContainer>\n        );\n    }\n);\n\nTreeSelector.displayName = 'TreeSelector';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,sBAAsB,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAM,YAAY,GAAa,EAAE,CAAC;AAE3B,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,UAAU,EACV,eAAe,GAAG,sBAAsB,EACxC,eAAe,GAAG,YAAY,EAC9B,KAAK,EAAE,QAAQ,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,GACqB,EACjC,GAA+B,KACjB;AACd,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,WAAW,CAAC;AAC/D,QAAA,YAAY,EAAE,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE;AACnE,QAAA,kBAAkB,EAAE,QAAQ;QAC5B,QAAQ;AACX,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,QACIA,IAAC,iBAAiB,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,YAClC,QAAQ,IACLA,IAAC,eAAe,EAAA,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACV,CAAA,KAEFA,GAAA,CAAC,SAAS,EACN,EAAA,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,EAC/B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,eAAe,EACzB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC9B,CAAA,CACL,EACe,CAAA,EACtB;AACN,CAAC,EACH;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/UncontrolledTreeSelector.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import { AdditionalDefault } from './collection/types';
-import { UncontrolledTreeSelectorProps } from './types';
-export declare const UncontrolledTreeSelector: <A extends AdditionalDefault>(props: UncontrolledTreeSelectorProps<A>) => ReactElement;
+import { ListControls } from './types';
+export declare const UncontrolledTreeSelector: import("react").ForwardRefExoticComponent<import("./types").TreeSelectorProps<AdditionalDefault> & {
+    value?: string[] | undefined;
+    onChange?: ((id: string, isSelected: boolean, allSelected: string[]) => void) | undefined;
+} & import("react").RefAttributes<ListControls>>;

package/UncontrolledTreeSelector.js

@@ -1,18 +1,25 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { TreeSelector } from './TreeSelector.js';
 import ImmutableSelectionStrategy from './strategy/immutableSelectionStrategy.js';
 import { useSelected } from './useSelected.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-spacing';
 import './ItemsList.js';
 import './Item.js';
 import 'classnames';
-import './ItemContent-ad35f8ca.js';
+import './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-typography';
+import './MobileItemsList.js';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import './MobileItem.js';
+import './MobileParentItem.js';
+import '@hh.ru/magritte-ui-card';
 import './useExpanded.js';
 import './useIndeterminate.js';
 import './strategy/selectionStrategy.js';
@@ -23,7 +30,7 @@ import './strategy/createTreeCollectionToggler.js';
 import './strategy/dummyToggle.js';
 
 const defaultArray = [];
-const UncontrolledTreeSelector = (props) => {
+const UncontrolledTreeSelectorComponent = (props, ref) => {
     const { value = defaultArray, collection, singleChoice, leavesOnly, checkSelectable, onChange } = props;
     const strategy = useMemo(() => new ImmutableSelectionStrategy(collection, {
         singleChoice,
@@ -31,8 +38,9 @@ const UncontrolledTreeSelector = (props) => {
         checkSelectable,
     }), [collection, singleChoice, leavesOnly, checkSelectable]);
     const { selected, setSelected } = useSelected({ value, strategy, onChange });
-    return jsx(TreeSelector, { ...props, value: selected, onChange: setSelected });
+    return jsx(TreeSelector, { ...props, value: selected, onChange: setSelected, ref: ref });
 };
+const UncontrolledTreeSelector = forwardRef(UncontrolledTreeSelectorComponent);
 
 export { UncontrolledTreeSelector };
 //# sourceMappingURL=UncontrolledTreeSelector.js.map

package/UncontrolledTreeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledTreeSelector.js","sources":["../src/UncontrolledTreeSelector.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\n\nimport { TreeSelector } from '@hh.ru/magritte-ui-tree-selector/TreeSelector';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { UncontrolledTreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useSelected } from '@hh.ru/magritte-ui-tree-selector/useSelected';\n\nconst defaultArray: string[] = [];\nexport const UncontrolledTreeSelector = <A extends AdditionalDefault>(\n    props: UncontrolledTreeSelectorProps<A>\n): ReactElement => {\n    const { value = defaultArray, collection, singleChoice, leavesOnly, checkSelectable, onChange } = 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    const { selected, setSelected } = useSelected({ value, strategy, onChange });\n    return <TreeSelector {...props} value={selected} onChange={setSelected}></TreeSelector>;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAY,GAAa,EAAE,CAAC;AACrB,MAAA,wBAAwB,GAAG,CACpC,KAAuC,KACzB;AACd,IAAA,MAAM,EAAE,KAAK,GAAG,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxG,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,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC7E,IAAA,OAAOA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAiB,CAAC;AAC5F;;;;"}
+{"version":3,"file":"UncontrolledTreeSelector.js","sources":["../src/UncontrolledTreeSelector.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement, useMemo } from 'react';\n\nimport { TreeSelector } from '@hh.ru/magritte-ui-tree-selector/TreeSelector';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { UncontrolledTreeSelectorProps, ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useSelected } from '@hh.ru/magritte-ui-tree-selector/useSelected';\n\nconst defaultArray: string[] = [];\nconst UncontrolledTreeSelectorComponent = <A extends AdditionalDefault>(\n    props: UncontrolledTreeSelectorProps<A>,\n    ref: ForwardedRef<ListControls>\n): ReactElement => {\n    const { value = defaultArray, collection, singleChoice, leavesOnly, checkSelectable, onChange } = 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    const { selected, setSelected } = useSelected({ value, strategy, onChange });\n    return <TreeSelector {...props} value={selected} onChange={setSelected} ref={ref}></TreeSelector>;\n};\n\nexport const UncontrolledTreeSelector = forwardRef(UncontrolledTreeSelectorComponent);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAY,GAAa,EAAE,CAAC;AAClC,MAAM,iCAAiC,GAAG,CACtC,KAAuC,EACvC,GAA+B,KACjB;AACd,IAAA,MAAM,EAAE,KAAK,GAAG,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxG,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,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC7E,IAAA,OAAOA,IAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,GAAiB,CAAC;AACtG,CAAC,CAAC;MAEW,wBAAwB,GAAG,UAAU,CAAC,iCAAiC;;;;"}

package/index.css

@@ -1,46 +1,38 @@
-.magritte-wrapper___GHKV6_1-1-5{
+.magritte-wrapper___GHKV6_1-2-0{
   display:flex;
   padding:12px 0;
   gap:12px;
   align-items:center;
 }
-.magritte-letter___yZOCU_1-1-5{
+.magritte-letter___yZOCU_1-2-0{
   width:24px;
   flex-shrink:0;
   text-align:center;
 }
-.magritte-icon___kO3Fj_1-1-5{
+.magritte-icon___kO3Fj_1-2-0,
+.magritte-space___xTO79_1-2-0{
   flex-shrink:0;
   line-height:0;
   width:24px;
 }
-.magritte-iconActive___4yrG5_1-1-5{
+.magritte-iconActive___4yrG5_1-2-0{
   cursor:pointer;
 }
-.magritte-content___ZRc6R_1-1-5{
+.magritte-content___ZRc6R_1-2-0{
   flex-grow:1;
 }
-.magritte-with-action___-lsFP_1-1-5 > .magritte-children___kq-eq_1-1-5{
-  padding-left:36px;
-}
-.magritte-with-action___-lsFP_1-1-5.magritte-with-letter___skx30_1-1-5 > .magritte-children___kq-eq_1-1-5{
-  padding-left:72px;
+.magritte-with-shift___ZErxZ_1-2-0{
+  margin-left:-36px;
 }
-.magritte-with-action___-lsFP_1-1-5.magritte-with-chevron___VOytc_1-1-5 > .magritte-children___kq-eq_1-1-5{
-  padding-left:72px;
+.magritte-with-indent___MH9Vy_1-2-0{
+  margin-left:36px;
 }
-.magritte-with-action___-lsFP_1-1-5.magritte-with-letter___skx30_1-1-5.magritte-with-chevron___VOytc_1-1-5 > .magritte-children___kq-eq_1-1-5{
-  padding-left:108px;
-}
-.magritte-with-letter___skx30_1-1-5 > .magritte-children___kq-eq_1-1-5{
+.magritte-item___2LtOL_1-2-0 > .magritte-children___kq-eq_1-2-0{
   padding-left:36px;
 }
-.magritte-with-letter___skx30_1-1-5.magritte-with-chevron___VOytc_1-1-5 > .magritte-children___kq-eq_1-1-5{
+.magritte-item___2LtOL_1-2-0.magritte-with-two-boxes___LWOy2_1-2-0 > .magritte-children___kq-eq_1-2-0{
   padding-left:72px;
 }
-.magritte-with-chevron___VOytc_1-1-5 > .magritte-children___kq-eq_1-1-5{
-  padding-left:36px;
-}
-.magritte-with-shift___ZErxZ_1-1-5{
-  margin-left:-36px;
+.magritte-item___2LtOL_1-2-0.magritte-with-three-boxes___cyVao_1-2-0 > .magritte-children___kq-eq_1-2-0{
+  padding-left:108px;
 }

package/index.d.ts

@@ -1 +1,3 @@
 export * from './TreeSelector';
+export * from './UncontrolledTreeSelector';
+export * from './types';

package/index.js

@@ -1,16 +1,32 @@
 import './index.css';
 export { TreeSelector } from './TreeSelector.js';
+export { UncontrolledTreeSelector } from './UncontrolledTreeSelector.js';
 import 'react/jsx-runtime';
+import 'react';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-spacing';
 import './ItemsList.js';
 import './Item.js';
-import 'react';
 import 'classnames';
-import './ItemContent-ad35f8ca.js';
+import './ItemContent-59665486.js';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import './Action.js';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-typography';
+import './MobileItemsList.js';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import './MobileItem.js';
+import './MobileParentItem.js';
+import '@hh.ru/magritte-ui-card';
 import './useExpanded.js';
 import './useIndeterminate.js';
+import './strategy/immutableSelectionStrategy.js';
+import './strategy/selectionStrategy.js';
+import './collection/treeCollectionHelper.js';
+import './collection/treeCollection.js';
+import './strategy/createSingleValueToggler.js';
+import './strategy/createTreeCollectionToggler.js';
+import './strategy/dummyToggle.js';
+import './useSelected.js';
 //# 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.1.5",
+  "version": "1.2.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,10 +19,14 @@
     "test": "yarn root:test $(pwd)"
   },
   "dependencies": {
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-card": "6.0.4",
     "@hh.ru/magritte-ui-cell": "2.2.11",
+    "@hh.ru/magritte-ui-checkable-card": "3.0.6",
     "@hh.ru/magritte-ui-checkbox-radio": "3.0.2",
     "@hh.ru/magritte-ui-icon": "7.1.6",
     "@hh.ru/magritte-ui-mock-component": "1.0.10",
+    "@hh.ru/magritte-ui-spacing": "2.0.22",
     "@hh.ru/magritte-ui-theme-provider": "1.1.22",
     "@hh.ru/magritte-ui-typography": "3.0.9"
   },
@@ -33,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fd7a0b7f2af780bd38bc43b2066bf6ec986eec3"
+  "gitHead": "59e0e0164dddefec65be2bba7b1c43237393e25d"
 }

package/types.d.ts

@@ -9,7 +9,7 @@ export interface TreeSelectorProps<A extends AdditionalDefault> {
     expanded?: string[];
     onExpand?: (expanded: string[]) => void;
 }
-interface ControlledProps {
+export interface ControlledProps {
     value: string[];
     onChange: (id: string, isSelected: boolean) => void;
 }
@@ -19,4 +19,7 @@ type UncontrolledProps = {
 };
 export type ControlledTreeSelectorProps<A extends AdditionalDefault> = TreeSelectorProps<A> & ControlledProps;
 export type UncontrolledTreeSelectorProps<A extends AdditionalDefault> = TreeSelectorProps<A> & UncontrolledProps;
+export interface ListControls {
+    back: () => void;
+}
 export {};

package/ItemContent-ad35f8ca.js

@@ -1,20 +0,0 @@
-import './index.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
-import classnames from 'classnames';
-import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
-import { DotFilledSize24, ChevronDownOutlinedSize24, ChevronUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { Action } from './Action.js';
-import { Text } from '@hh.ru/magritte-ui-typography';
-
-var styles = {"wrapper":"magritte-wrapper___GHKV6_1-1-5","letter":"magritte-letter___yZOCU_1-1-5","icon":"magritte-icon___kO3Fj_1-1-5","iconActive":"magritte-iconActive___4yrG5_1-1-5","content":"magritte-content___ZRc6R_1-1-5","with-action":"magritte-with-action___-lsFP_1-1-5","withAction":"magritte-with-action___-lsFP_1-1-5","children":"magritte-children___kq-eq_1-1-5","with-letter":"magritte-with-letter___skx30_1-1-5","withLetter":"magritte-with-letter___skx30_1-1-5","with-chevron":"magritte-with-chevron___VOytc_1-1-5","withChevron":"magritte-with-chevron___VOytc_1-1-5","with-shift":"magritte-with-shift___ZErxZ_1-1-5","withShift":"magritte-with-shift___ZErxZ_1-1-5"};
-
-const ItemContent = ({ item, hasAction, hasChildren, letter, expanded, onExpansion, hasChildrenOnLevel, hasLetterOnLevel, selected, onChange, indeterminate, singleChoice, hasActionOnLevel, }) => {
-    const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
-    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 })) })), hasActionOnLevel && hasChildren && !hasAction && (jsx("div", { className: styles.icon, children: jsx(DotFilledSize24, { initial: "tertiary" }) })), (hasChildrenOnLevel || hasChildren) && (jsxs("div", { className: classnames(styles.icon, {
-                    [styles.iconActive]: hasChildren,
-                }), onClick: handleExpandableClick, children: [expanded && hasChildren && jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }), !expanded && hasChildren && jsx(ChevronUpOutlinedSize24, { initial: "tertiary" }), hasChildrenOnLevel && !hasChildren && jsx(DotFilledSize24, { initial: "tertiary" })] })), jsx(Cell, { left: hasAction ? (jsx(Action, { selected: selected, onChange: onChange, id: item.id, indeterminate: indeterminate, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) })] }));
-};
-
-export { ItemContent as I, styles as s };
-//# sourceMappingURL=ItemContent-ad35f8ca.js.map

package/ItemContent-ad35f8ca.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemContent-ad35f8ca.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { ChevronDownOutlinedSize24, ChevronUpOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/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    expanded?: boolean;\n    hasChildrenOnLevel: boolean;\n    selected: boolean;\n    onChange: (id: string, isSelected: boolean) => void;\n    indeterminate: boolean;\n    singleChoice?: boolean;\n    hasActionOnLevel: boolean;\n    hasLetterOnLevel: boolean;\n}\n\nconst ItemContent = <A extends AdditionalDefault>({\n    item,\n    hasAction,\n    hasChildren,\n    letter,\n    expanded,\n    onExpansion,\n    hasChildrenOnLevel,\n    hasLetterOnLevel,\n    selected,\n    onChange,\n    indeterminate,\n    singleChoice,\n    hasActionOnLevel,\n}: ItemContent<A>): ReactElement => {\n    const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\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            {hasActionOnLevel && hasChildren && !hasAction && (\n                <div className={styles.icon}>\n                    <DotFilledSize24 initial=\"tertiary\" />\n                </div>\n            )}\n\n            {(hasChildrenOnLevel || hasChildren) && (\n                <div\n                    className={classnames(styles.icon, {\n                        [styles.iconActive]: hasChildren,\n                    })}\n                    onClick={handleExpandableClick}\n                >\n                    {expanded && hasChildren && <ChevronDownOutlinedSize24 initial=\"tertiary\" />}\n                    {!expanded && hasChildren && <ChevronUpOutlinedSize24 initial=\"tertiary\" />}\n                    {hasChildrenOnLevel && !hasChildren && <DotFilledSize24 initial=\"tertiary\" />}\n                </div>\n            )}\n\n            <Cell\n                left={\n                    hasAction ? (\n                        <Action\n                            selected={selected}\n                            onChange={onChange}\n                            id={item.id}\n                            indeterminate={indeterminate}\n                            singleChoice={singleChoice}\n                        />\n                    ) : undefined\n                }\n            >\n                <CellText>{item.text}</CellText>\n            </Cell>\n        </div>\n    );\n};\n\nexport { ItemContent };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AA2BA,MAAM,WAAW,GAAG,CAA8B,EAC9C,IAAI,EACJ,SAAS,EACT,WAAW,EACX,MAAM,EACN,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,gBAAgB,GACH,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;AAE7G,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAA,EAAA,CAAA,CAAC,MAAM,IAAI,gBAAgB,MACxBC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EACxB,MAAM,KACHA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAClE,MAAM,EACJ,CAAA,CACV,EACC,CAAA,CACT,EACA,gBAAgB,IAAI,WAAW,IAAI,CAAC,SAAS,KAC1CA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,eAAe,EAAC,EAAA,OAAO,EAAC,UAAU,GAAG,EACpC,CAAA,CACT,EAEA,CAAC,kBAAkB,IAAI,WAAW,MAC/BD,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,oBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,WAAW;iBACnC,CAAC,EACF,OAAO,EAAE,qBAAqB,aAE7B,QAAQ,IAAI,WAAW,IAAIC,GAAA,CAAC,yBAAyB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,CAAG,EAC3E,CAAC,QAAQ,IAAI,WAAW,IAAIA,GAAA,CAAC,uBAAuB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,CAAG,EAC1E,kBAAkB,IAAI,CAAC,WAAW,IAAIA,IAAC,eAAe,EAAA,EAAC,OAAO,EAAC,UAAU,GAAG,CAC3E,EAAA,CAAA,CACT,EAEDA,GAAA,CAAC,IAAI,EAAA,EACD,IAAI,EACA,SAAS,IACLA,GAAC,CAAA,MAAM,IACH,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC5B,IACF,SAAS,YAGjBA,GAAC,CAAA,QAAQ,cAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EAAA,CAC7B,CACL,EAAA,CAAA,EACR;AACN;;;;"}