@hh.ru/magritte-ui-tree-selector 4.0.5 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Action.js +1 -1
- package/Action.js.map +1 -1
- package/Item.js +6 -3
- package/Item.js.map +1 -1
- package/ItemContent.js +5 -3
- package/ItemContent.js.map +1 -1
- package/ItemsList.js +2 -2
- package/MobileItem.d.ts +2 -1
- package/MobileItem.js +5 -2
- package/MobileItem.js.map +1 -1
- package/MobileItemsList.js +2 -2
- package/MobileItemsList.js.map +1 -1
- package/MobileParentItem.d.ts +2 -1
- package/MobileParentItem.js +5 -2
- package/MobileParentItem.js.map +1 -1
- package/TreeSelector.js +2 -2
- package/TreeSelectorDummy.js +2 -2
- package/TreeSelectorItemBase.js +1 -1
- package/TreeSelectorItemBase.js.map +1 -1
- package/index.css +25 -24
- package/index.js +2 -2
- package/package.json +9 -9
- package/tree-selector-item-JlIDTcin.js +5 -0
- package/tree-selector-item-JlIDTcin.js.map +1 -0
- package/useAnimationTimeout.js +1 -1
- package/tree-selector-item-DpD44bMe.js +0 -5
- package/tree-selector-item-DpD44bMe.js.map +0 -1
package/Action.js
CHANGED
|
@@ -12,7 +12,7 @@ const Action = memo(({ id, name, singleChoice, indeterminate, selected, onChange
|
|
|
12
12
|
onChange: handleChange,
|
|
13
13
|
name,
|
|
14
14
|
onKeyDown,
|
|
15
|
-
'data-qa': `tree-selector-input-${id}`,
|
|
15
|
+
'data-qa': `tree-selector-input tree-selector-input-${id}`,
|
|
16
16
|
};
|
|
17
17
|
return singleChoice ? jsx(Radio, { ...inputProps }) : jsx(Checkbox, { ...inputProps, indeterminate: indeterminate });
|
|
18
18
|
});
|
package/Action.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.js","sources":["../src/Action.tsx"],"sourcesContent":["import { ChangeEventHandler, FC, useCallback, memo, KeyboardEventHandler } 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 name?: string;\n selected: boolean;\n indeterminate?: boolean;\n onKeyDown?: KeyboardEventHandler;\n}\n\nexport const Action: FC<ActionProps> = memo(\n ({ id, name, singleChoice, indeterminate, selected, onChange, onKeyDown }) => {\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 name,\n onKeyDown,\n 'data-qa': `tree-selector-input-${id}`,\n };\n\n return singleChoice ? <Radio {...inputProps} /> : <Checkbox {...inputProps} indeterminate={indeterminate} />;\n }\n);\n\nAction.displayName = 'TreeSelectorAction';\n"],"names":["_jsx"],"mappings":";;;;MAea,MAAM,GAAoB,IAAI,CACvC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;AACzE,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;QACtB,IAAI;QACJ,SAAS;QACT,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"Action.js","sources":["../src/Action.tsx"],"sourcesContent":["import { ChangeEventHandler, FC, useCallback, memo, KeyboardEventHandler } 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 name?: string;\n selected: boolean;\n indeterminate?: boolean;\n onKeyDown?: KeyboardEventHandler;\n}\n\nexport const Action: FC<ActionProps> = memo(\n ({ id, name, singleChoice, indeterminate, selected, onChange, onKeyDown }) => {\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 name,\n onKeyDown,\n 'data-qa': `tree-selector-input tree-selector-input-${id}`,\n };\n\n return singleChoice ? <Radio {...inputProps} /> : <Checkbox {...inputProps} indeterminate={indeterminate} />;\n }\n);\n\nAction.displayName = 'TreeSelectorAction';\n"],"names":["_jsx"],"mappings":";;;;MAea,MAAM,GAAoB,IAAI,CACvC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;AACzE,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;QACtB,IAAI;QACJ,SAAS;QACT,SAAS,EAAE,CAA2C,wCAAA,EAAA,EAAE,CAAE,CAAA;KAC7D,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,EACH;AAEF,MAAM,CAAC,WAAW,GAAG,oBAAoB;;;;"}
|
package/Item.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { memo, useMemo } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
4
5
|
import { ItemContent } from './ItemContent.js';
|
|
5
|
-
import 'classnames';
|
|
6
6
|
import '@hh.ru/magritte-common-keyboard';
|
|
7
7
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
8
8
|
import './Action.js';
|
|
@@ -10,7 +10,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
10
10
|
import './TreeSelectorItemBase.js';
|
|
11
11
|
import '@hh.ru/magritte-ui-cell';
|
|
12
12
|
import '@hh.ru/magritte-ui-typography';
|
|
13
|
-
import './tree-selector-item-
|
|
13
|
+
import './tree-selector-item-JlIDTcin.js';
|
|
14
14
|
|
|
15
15
|
const ONE_BOX_MARGIN = 36;
|
|
16
16
|
const getMargin = (allBoxesCount, hasShift, hasIndent) => {
|
|
@@ -63,7 +63,10 @@ const ItemComponent = ({ collection, item, parentId, isExpanded, isSelected, isI
|
|
|
63
63
|
}, [item.id, parentId]);
|
|
64
64
|
let margin = parentId ? cache[parentId] : 0;
|
|
65
65
|
margin = margin + (hasShift ? -ONE_BOX_MARGIN : 0) + (hasIndent ? ONE_BOX_MARGIN : 0);
|
|
66
|
-
return (jsxs("div", { style: { paddingLeft: margin }, "data-qa": `tree-selector-item-${item.id}`,
|
|
66
|
+
return (jsxs("div", { style: { paddingLeft: margin }, "data-qa": classnames('tree-selector-item', `tree-selector-item-${item.id}`, {
|
|
67
|
+
'tree-selector-item-expanded': isExpanded,
|
|
68
|
+
[`tree-selector-child-${parentId}`]: parentId,
|
|
69
|
+
}), children: [jsx(ItemContent, { item: item, parentId: parentId, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter ? item.additional?.char : undefined, isExpanded: isExpanded, onExpansion: onExpansion, isSelected: isSelected, onChange: onChange, singleChoice: singleChoice, isIndeterminate: isIndeterminate, isDisabled: isDisabled, hasLetterOnLevel: hasLetterOnLevel, hasDot: hasDot, maxControlsOnLevel: maxControlsOnLevel, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop }), children] }));
|
|
67
70
|
};
|
|
68
71
|
const Item = memo(ItemComponent);
|
|
69
72
|
|
package/Item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo, memo } from 'react';\n\nimport { ItemContent } from '@hh.ru/magritte-ui-tree-selector/ItemContent';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\nconst ONE_BOX_MARGIN = 36;\n\nconst getMargin = (allBoxesCount: number, hasShift: boolean, hasIndent: boolean): number => {\n let margin = 0;\n if (allBoxesCount === 2) {\n margin = ONE_BOX_MARGIN * 2;\n } else if (allBoxesCount === 3) {\n margin = ONE_BOX_MARGIN * 3;\n } else {\n margin = ONE_BOX_MARGIN;\n }\n if (hasIndent) {\n return margin + ONE_BOX_MARGIN;\n }\n\n if (hasShift) {\n return margin - ONE_BOX_MARGIN;\n }\n\n return margin;\n};\n\ninterface ItemProps<Additional extends AdditionalDefault> extends PropsWithChildren {\n collection: TreeCollection<Additional>;\n parentId?: TreeModel<Additional>['id'];\n item: TreeModel<Additional>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n singleChoice?: boolean;\n isIndeterminate: boolean;\n isSearch: boolean;\n onExpansion: (id: string) => void;\n onChange: (id: string, isSelected: boolean) => void;\n renderItemForDesktop?: RenderItem<Additional>;\n cache: Record<string, number>;\n}\n\nconst ItemComponent = <Additional extends AdditionalDefault>({\n collection,\n item,\n parentId,\n isExpanded,\n isSelected,\n isIndeterminate,\n isDisabled,\n leavesOnly,\n singleChoice,\n isSearch,\n checkSelectable,\n onExpansion,\n onChange,\n renderItemForDesktop,\n cache,\n children,\n}: ItemProps<Additional>): ReactElement => {\n const modelsOnLevel = useMemo(\n () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n [parentId, collection]\n );\n\n const hasLetterOnLevel = useMemo(() => {\n return !isSearch && modelsOnLevel.some((model) => model.additional?.char);\n }, [modelsOnLevel, isSearch]);\n\n // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n const maxControlsOnLevel = useMemo(() => {\n return modelsOnLevel.reduce((currentMax, model) => {\n const hasChildren = collection.hasChildren(model.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n const actionCount = +hasChildren + +!!hasAction;\n return Math.max(currentMax, actionCount);\n }, 0);\n }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n const hasChildren = collection.hasChildren(item.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n const hasLetter = item.additional?.char && !isSearch;\n const realControlsCount = +hasChildren + +!!hasAction;\n\n // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n const hasShift =\n allBoxesCount > 1 &&\n parentId &&\n ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n const hasIndent = allBoxesCount === 0;\n\n useMemo(() => {\n cache[item.id] = getMargin(allBoxesCount, !!hasShift, hasIndent) + (parentId ? cache[parentId] : 0);\n }, [item.id, parentId]);\n\n let margin = parentId ? cache[parentId] : 0;\n\n margin = margin + (hasShift ? -ONE_BOX_MARGIN : 0) + (hasIndent ? ONE_BOX_MARGIN : 0);\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo, memo } 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\nconst ONE_BOX_MARGIN = 36;\n\nconst getMargin = (allBoxesCount: number, hasShift: boolean, hasIndent: boolean): number => {\n let margin = 0;\n if (allBoxesCount === 2) {\n margin = ONE_BOX_MARGIN * 2;\n } else if (allBoxesCount === 3) {\n margin = ONE_BOX_MARGIN * 3;\n } else {\n margin = ONE_BOX_MARGIN;\n }\n if (hasIndent) {\n return margin + ONE_BOX_MARGIN;\n }\n\n if (hasShift) {\n return margin - ONE_BOX_MARGIN;\n }\n\n return margin;\n};\n\ninterface ItemProps<Additional extends AdditionalDefault> extends PropsWithChildren {\n collection: TreeCollection<Additional>;\n parentId?: TreeModel<Additional>['id'];\n item: TreeModel<Additional>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n singleChoice?: boolean;\n isIndeterminate: boolean;\n isSearch: boolean;\n onExpansion: (id: string) => void;\n onChange: (id: string, isSelected: boolean) => void;\n renderItemForDesktop?: RenderItem<Additional>;\n cache: Record<string, number>;\n}\n\nconst ItemComponent = <Additional extends AdditionalDefault>({\n collection,\n item,\n parentId,\n isExpanded,\n isSelected,\n isIndeterminate,\n isDisabled,\n leavesOnly,\n singleChoice,\n isSearch,\n checkSelectable,\n onExpansion,\n onChange,\n renderItemForDesktop,\n cache,\n children,\n}: ItemProps<Additional>): ReactElement => {\n const modelsOnLevel = useMemo(\n () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n [parentId, collection]\n );\n\n const hasLetterOnLevel = useMemo(() => {\n return !isSearch && modelsOnLevel.some((model) => model.additional?.char);\n }, [modelsOnLevel, isSearch]);\n\n // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n const maxControlsOnLevel = useMemo(() => {\n return modelsOnLevel.reduce((currentMax, model) => {\n const hasChildren = collection.hasChildren(model.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n const actionCount = +hasChildren + +!!hasAction;\n return Math.max(currentMax, actionCount);\n }, 0);\n }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n const hasChildren = collection.hasChildren(item.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n const hasLetter = item.additional?.char && !isSearch;\n const realControlsCount = +hasChildren + +!!hasAction;\n\n // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n const hasShift =\n allBoxesCount > 1 &&\n parentId &&\n ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n const hasIndent = allBoxesCount === 0;\n\n useMemo(() => {\n cache[item.id] = getMargin(allBoxesCount, !!hasShift, hasIndent) + (parentId ? cache[parentId] : 0);\n }, [item.id, parentId]);\n\n let margin = parentId ? cache[parentId] : 0;\n\n margin = margin + (hasShift ? -ONE_BOX_MARGIN : 0) + (hasIndent ? ONE_BOX_MARGIN : 0);\n\n return (\n <div\n style={{ paddingLeft: margin }}\n data-qa={classnames('tree-selector-item', `tree-selector-item-${item.id}`, {\n 'tree-selector-item-expanded': isExpanded,\n [`tree-selector-child-${parentId}`]: parentId,\n })}\n >\n <ItemContent\n item={item}\n parentId={parentId}\n hasChildren={hasChildren}\n hasAction={!!hasAction}\n letter={hasLetter ? item.additional?.char : undefined}\n isExpanded={isExpanded}\n onExpansion={onExpansion}\n isSelected={isSelected}\n onChange={onChange}\n singleChoice={singleChoice}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n hasLetterOnLevel={hasLetterOnLevel}\n hasDot={hasDot}\n maxControlsOnLevel={maxControlsOnLevel}\n isSearch={isSearch}\n renderItemForDesktop={renderItemForDesktop}\n />\n\n {children}\n </div>\n );\n};\n\nexport const Item = memo(ItemComponent) as <Additional extends AdditionalDefault>(\n props: ItemProps<Additional>\n) => ReactElement;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/ItemContent.js
CHANGED
|
@@ -7,7 +7,7 @@ import { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-
|
|
|
7
7
|
import { Action } from './Action.js';
|
|
8
8
|
import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
|
|
9
9
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
10
|
-
import { s as styles } from './tree-selector-item-
|
|
10
|
+
import { s as styles } from './tree-selector-item-JlIDTcin.js';
|
|
11
11
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
12
12
|
import '@hh.ru/magritte-ui-cell';
|
|
13
13
|
|
|
@@ -27,9 +27,11 @@ const ItemContentComponent = ({ item, parentId, hasAction, hasChildren, letter,
|
|
|
27
27
|
}
|
|
28
28
|
}, [isExpanded, onExpansion, item.id]);
|
|
29
29
|
const input = hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, onKeyDown: handleExpandableKeyDown, indeterminate: isIndeterminate, singleChoice: singleChoice, name: `tree-selector-item-${parentId || 'top'}-${item.id}` })) : undefined;
|
|
30
|
-
return (jsxs("div", { className:
|
|
30
|
+
return (jsxs("div", { className: classnames(styles.wrapper, {
|
|
31
|
+
[styles.wrapperActive]: hasChildren || hasAction,
|
|
32
|
+
}), onClick: hasChildren && !hasAction ? handleExpandableClick : undefined, children: [(letter || hasLetterOnLevel) && (jsx("div", { className: styles.letter, children: letter && (jsx(Text, { typography: "subtitle-1-semibold", style: "secondary", Element: "span", children: letter })) })), hasDot && (jsx("div", { className: styles.icon, children: jsx(DotFilledSize24, { initial: "tertiary" }) })), [...Array(neededSpacesCount).keys()].map((_, i) => (jsx("div", { className: styles.space }, i))), hasChildren && (jsx("div", { className: classnames(styles.icon, styles.iconActive, {
|
|
31
33
|
[styles.iconUp]: isExpanded,
|
|
32
|
-
}), "data-qa": `tree-selector-chevron-${item.id}`, onClick: hasAction ? handleExpandableClick : undefined, children: jsx(ChevronRightOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
|
|
34
|
+
}), "data-qa": `tree-selector-chevron tree-selector-chevron-${item.id}`, onClick: hasAction ? handleExpandableClick : undefined, children: jsx(ChevronRightOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
|
|
33
35
|
};
|
|
34
36
|
const ItemContent = memo(ItemContentComponent);
|
|
35
37
|
|
package/ItemContent.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemContent.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback, memo, KeyboardEventHandler } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<Additional extends AdditionalDefault> {\n item: TreeModel<Additional>;\n parentId?: TreeModel<Additional>['id'];\n hasChildren: boolean;\n hasAction: boolean;\n letter?: string;\n onExpansion: (id: string) => void;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n isIndeterminate: boolean;\n singleChoice?: boolean;\n hasLetterOnLevel: boolean;\n hasDot: boolean;\n maxControlsOnLevel: number;\n renderItemForDesktop?: RenderItem<Additional>;\n isSearch: boolean;\n}\n\nconst ItemContentComponent = <Additional extends AdditionalDefault>({\n item,\n parentId,\n hasAction,\n hasChildren,\n letter,\n isExpanded,\n isDisabled,\n onExpansion,\n hasLetterOnLevel,\n isSelected,\n onChange,\n isIndeterminate,\n singleChoice,\n hasDot,\n maxControlsOnLevel,\n isSearch,\n renderItemForDesktop = TreeSelectorItemBase,\n}: ItemContent<Additional>): ReactElement => {\n const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n const currentActionCount = +hasDot + +hasAction + +hasChildren;\n const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n isExpanded && onExpansion(item.id);\n event.preventDefault();\n return;\n }\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n !isExpanded && onExpansion(item.id);\n event.preventDefault();\n }\n },\n [isExpanded, onExpansion, item.id]\n );\n\n const input = hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n onKeyDown={handleExpandableKeyDown}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n />\n ) : undefined;\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"ItemContent.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback, memo, KeyboardEventHandler } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<Additional extends AdditionalDefault> {\n item: TreeModel<Additional>;\n parentId?: TreeModel<Additional>['id'];\n hasChildren: boolean;\n hasAction: boolean;\n letter?: string;\n onExpansion: (id: string) => void;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n isIndeterminate: boolean;\n singleChoice?: boolean;\n hasLetterOnLevel: boolean;\n hasDot: boolean;\n maxControlsOnLevel: number;\n renderItemForDesktop?: RenderItem<Additional>;\n isSearch: boolean;\n}\n\nconst ItemContentComponent = <Additional extends AdditionalDefault>({\n item,\n parentId,\n hasAction,\n hasChildren,\n letter,\n isExpanded,\n isDisabled,\n onExpansion,\n hasLetterOnLevel,\n isSelected,\n onChange,\n isIndeterminate,\n singleChoice,\n hasDot,\n maxControlsOnLevel,\n isSearch,\n renderItemForDesktop = TreeSelectorItemBase,\n}: ItemContent<Additional>): ReactElement => {\n const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n const currentActionCount = +hasDot + +hasAction + +hasChildren;\n const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n isExpanded && onExpansion(item.id);\n event.preventDefault();\n return;\n }\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n !isExpanded && onExpansion(item.id);\n event.preventDefault();\n }\n },\n [isExpanded, onExpansion, item.id]\n );\n\n const input = hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n onKeyDown={handleExpandableKeyDown}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n />\n ) : undefined;\n\n return (\n <div\n className={classnames(styles.wrapper, {\n [styles.wrapperActive]: hasChildren || hasAction,\n })}\n onClick={hasChildren && !hasAction ? handleExpandableClick : undefined}\n >\n {(letter || hasLetterOnLevel) && (\n <div className={styles.letter}>\n {letter && (\n <Text typography=\"subtitle-1-semibold\" style=\"secondary\" Element=\"span\">\n {letter}\n </Text>\n )}\n </div>\n )}\n {hasDot && (\n <div className={styles.icon}>\n <DotFilledSize24 initial=\"tertiary\" />\n </div>\n )}\n\n {[...Array(neededSpacesCount).keys()].map((_, i) => (\n <div key={i} className={styles.space} />\n ))}\n\n {hasChildren && (\n <div\n className={classnames(styles.icon, styles.iconActive, {\n [styles.iconUp]: isExpanded,\n })}\n data-qa={`tree-selector-chevron tree-selector-chevron-${item.id}`}\n onClick={hasAction ? handleExpandableClick : undefined}\n >\n <ChevronRightOutlinedSize24 initial=\"tertiary\" />\n </div>\n )}\n {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n </div>\n );\n};\n\nexport const ItemContent = memo(ItemContentComponent) as <Additional extends AdditionalDefault>(\n props: ItemContent<Additional>\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/ItemsList.js
CHANGED
|
@@ -3,9 +3,9 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useRef, useMemo, useCallback, useEffect } from 'react';
|
|
4
4
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
5
5
|
import { Item } from './Item.js';
|
|
6
|
-
import { s as styles } from './tree-selector-item-
|
|
7
|
-
import './ItemContent.js';
|
|
6
|
+
import { s as styles } from './tree-selector-item-JlIDTcin.js';
|
|
8
7
|
import 'classnames';
|
|
8
|
+
import './ItemContent.js';
|
|
9
9
|
import '@hh.ru/magritte-common-keyboard';
|
|
10
10
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
11
11
|
import './Action.js';
|
package/MobileItem.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ interface MobileItemProps<Additional extends AdditionalDefault> {
|
|
|
10
10
|
onChange: (id: string, isSelected: boolean) => void;
|
|
11
11
|
renderItem?: RenderItem<Additional>;
|
|
12
12
|
isSearch: boolean;
|
|
13
|
+
parentId?: string;
|
|
13
14
|
}
|
|
14
|
-
export declare const MobileItem: <Additional extends AdditionalDefault>({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, isSearch, renderItem, }: MobileItemProps<Additional>) => ReactElement;
|
|
15
|
+
export declare const MobileItem: <Additional extends AdditionalDefault>({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, isSearch, parentId, renderItem, }: MobileItemProps<Additional>) => ReactElement;
|
|
15
16
|
export {};
|
package/MobileItem.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
3
4
|
import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
4
5
|
import { Action } from './Action.js';
|
|
5
6
|
import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
|
|
@@ -7,9 +8,11 @@ import 'react';
|
|
|
7
8
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
8
9
|
import '@hh.ru/magritte-ui-cell';
|
|
9
10
|
|
|
10
|
-
const MobileItem = ({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, isSearch, renderItem = TreeSelectorItemBase, }) => {
|
|
11
|
+
const MobileItem = ({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, isSearch, parentId, renderItem = TreeSelectorItemBase, }) => {
|
|
11
12
|
const input = isSelectable ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, singleChoice: singleChoice })) : undefined;
|
|
12
|
-
return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", flexible: true, checked: isSelected, "data-qa": `tree-selector-item-${item.id}`,
|
|
13
|
+
return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", flexible: true, checked: isSelected, "data-qa": classnames('tree-selector-item', `tree-selector-item-${item.id}`, {
|
|
14
|
+
[`tree-selector-child-${parentId}`]: parentId,
|
|
15
|
+
}), children: renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled }) }));
|
|
13
16
|
};
|
|
14
17
|
|
|
15
18
|
export { MobileItem };
|
package/MobileItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemProps<Additional extends AdditionalDefault> {\n item: TreeModel<Additional>;\n singleChoice?: boolean;\n isSelectable?: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n renderItem?: RenderItem<Additional>;\n isSearch: boolean;\n}\n\nexport const MobileItem = <Additional extends AdditionalDefault>({\n item,\n isSelected,\n singleChoice,\n isSelectable,\n isDisabled,\n onChange,\n isSearch,\n renderItem = TreeSelectorItemBase,\n}: MobileItemProps<Additional>): ReactElement => {\n const input = isSelectable ? (\n <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n ) : undefined;\n return (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n flexible\n checked={isSelected}\n data-qa={`tree-selector-item-${item.id}`}\n >\n {renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled })}\n </CheckableCardElement>\n );\n};\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemProps<Additional extends AdditionalDefault> {\n item: TreeModel<Additional>;\n singleChoice?: boolean;\n isSelectable?: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n renderItem?: RenderItem<Additional>;\n isSearch: boolean;\n parentId?: string;\n}\n\nexport const MobileItem = <Additional extends AdditionalDefault>({\n item,\n isSelected,\n singleChoice,\n isSelectable,\n isDisabled,\n onChange,\n isSearch,\n parentId,\n renderItem = TreeSelectorItemBase,\n}: MobileItemProps<Additional>): ReactElement => {\n const input = isSelectable ? (\n <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n ) : undefined;\n return (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n flexible\n checked={isSelected}\n data-qa={classnames('tree-selector-item', `tree-selector-item-${item.id}`, {\n [`tree-selector-child-${parentId}`]: parentId,\n })}\n >\n {renderItem({ input, item, isSearch, isXS: true, disabled: isDisabled })}\n </CheckableCardElement>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAqBa,MAAA,UAAU,GAAG,CAAuC,EAC7D,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACP,KAAkB;AAC5C,IAAA,MAAM,KAAK,GAAG,YAAY,IACtBA,GAAC,CAAA,MAAM,EAAC,EAAA,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,IAC7F,SAAS,CAAC;AACd,IAAA,QACIA,GAAA,CAAC,oBAAoB,EAAA,EACjB,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EACR,IAAA,EAAA,OAAO,EAAE,UAAU,aACV,UAAU,CAAC,oBAAoB,EAAE,CAAsB,mBAAA,EAAA,IAAI,CAAC,EAAE,EAAE,EAAE;AACvE,YAAA,CAAC,CAAuB,oBAAA,EAAA,QAAQ,CAAE,CAAA,GAAG,QAAQ;SAChD,CAAC,EAAA,QAAA,EAED,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACrD,CAAA,EACzB;AACN;;;;"}
|
package/MobileItemsList.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Action } from './Action.js';
|
|
|
9
9
|
import { MobileDelimiter } from './MobileDelimiter.js';
|
|
10
10
|
import { MobileItem } from './MobileItem.js';
|
|
11
11
|
import { MobileParentItem } from './MobileParentItem.js';
|
|
12
|
-
import { s as styles } from './tree-selector-item-
|
|
12
|
+
import { s as styles } from './tree-selector-item-JlIDTcin.js';
|
|
13
13
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
14
14
|
import '@hh.ru/magritte-ui-card';
|
|
15
15
|
import '@hh.ru/magritte-ui-typography';
|
|
@@ -129,7 +129,7 @@ const MobileItemsListComponent = (props, ref) => {
|
|
|
129
129
|
setInputValue('');
|
|
130
130
|
currentQuery.current = '';
|
|
131
131
|
navigationChangeCallback.current?.(item.id);
|
|
132
|
-
}, isSearch: isSearch, renderItem: renderItem })) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), isDisabled: disabled.includes(item.id), onChange: onChange, isSearch: isSearch, renderItem: renderItem }))] }) }, virtualItem.key));
|
|
132
|
+
}, parentId: currentParentId, isSearch: isSearch, renderItem: renderItem })) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), isDisabled: disabled.includes(item.id), onChange: onChange, isSearch: isSearch, renderItem: renderItem, parentId: currentParentId }))] }) }, virtualItem.key));
|
|
133
133
|
}) }));
|
|
134
134
|
};
|
|
135
135
|
const MobileItemsList = forwardRef(MobileItemsListComponent);
|
package/MobileItemsList.js.map
CHANGED
|
@@ -1 +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 RefCallback,\n useCallback,\n} from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\nimport styles from './tree-selector-item.less';\n\nconst DEFAULT_ITEM_HEIGHT = 56;\n\ntype MobileItemsListProps<Additional extends AdditionalDefault> = {\n selected: string[];\n disabled: string[];\n getMobileSearchItemOrder: (model: TreeModel<Additional>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n isSearch: boolean;\n} & Pick<\n TreeSelectorDummyProps<Additional>,\n | 'collection'\n | 'leavesOnly'\n | 'singleChoice'\n | 'checkSelectable'\n | 'onChange'\n | 'renderItem'\n | 'renderMobileDelimiter'\n | 'onMobileNavigationChange'\n | 'getSelectAllParentTrl'\n | 'renderContentBefore'\n>;\n\nconst MobileItemsListComponent = <Additional extends AdditionalDefault>(\n props: MobileItemsListProps<Additional>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n disabled,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getMobileSearchItemOrder,\n setInputValue,\n handleChangeInput,\n isSearch,\n renderMobileDelimiter,\n renderItem,\n contentFilterQuery,\n getSelectAllParentTrl,\n renderContentBefore,\n onMobileNavigationChange,\n } = props;\n const navigationChangeCallback = useRef(onMobileNavigationChange);\n navigationChangeCallback.current = onMobileNavigationChange;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const orderHashMap = useMemo(() => {\n return items.reduce<Record<TreeModel<Additional>['id'], number>>((acc, item) => {\n acc[item.id] = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;\n return acc;\n }, {});\n }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);\n\n const sortedItems = useMemo(() => {\n return items.sort((itemA, itemB) => {\n return orderHashMap[itemA.id] - orderHashMap[itemB.id];\n });\n }, [items, orderHashMap]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n const withContentBefore = !!renderContentBefore;\n const count = items.length + (isSelectable ? 1 : 0) + (withContentBefore ? 1 : 0);\n const parentRef = useRef<HTMLElement | null>(null);\n\n const getItemKey = (index: number) => {\n if (withContentBefore && index === 0) {\n return 'promo';\n }\n\n const isSelectAllItem =\n isSelectable && ((index === 0 && !withContentBefore) || (index === 1 && withContentBefore));\n\n if (isSelectAllItem) {\n return `current${currentParentId}`;\n }\n\n const itemIndex = index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n const item = sortedItems[itemIndex];\n\n return currentParentId ? `${currentParentId}${item.id}` : `${item.id}`;\n };\n\n const virtualizer = useVirtualizer({\n count,\n getScrollElement: () => parentRef.current,\n estimateSize: () => DEFAULT_ITEM_HEIGHT,\n getItemKey,\n });\n\n const itemsVirtualizer = virtualizer.getVirtualItems();\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n navigationChangeCallback.current?.(undefined);\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n if (!virtualizer.isScrolling) {\n const prevParentId = prevParentIds.current.pop();\n setCurrentParentId(prevParentId);\n navigationChangeCallback.current?.(prevParentId);\n if (prevQueries.current.length) {\n const prevInputValue = prevQueries.current.pop() as string;\n setInputValue(prevInputValue);\n currentQuery.current = prevInputValue;\n } else {\n handleChangeInput('');\n }\n }\n },\n }),\n [handleChangeInput, setInputValue, virtualizer]\n );\n\n const refCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n parentRef.current = node ? node.parentElement : null;\n }, []);\n\n useEffect(() => {\n virtualizer.scrollToOffset(0);\n }, [currentParentId, sortedItems, virtualizer]);\n\n return (\n <div\n ref={refCallback}\n className={styles.virtualizedList}\n style={{\n height: `${virtualizer.getTotalSize()}px`,\n }}\n >\n {itemsVirtualizer.map((virtualItem) => {\n const isContentBeforeItem = withContentBefore && virtualItem.index === 0;\n const isSelectAllItem =\n isSelectable &&\n ((virtualItem.index === 0 && !withContentBefore) || (virtualItem.index === 1 && withContentBefore));\n\n if (isContentBeforeItem) {\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n className={styles.virtualizedItem}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n >\n {renderContentBefore(isSearch)}\n </div>\n );\n }\n if (isSelectAllItem) {\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n className={styles.virtualizedItem}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n >\n <div className={styles.mobileItem}>\n <CheckableCardElement\n padding={16}\n flexible\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n data-qa={`tree-selector-select-all-${currentParentId}`}\n >\n <Cell\n Element={'div'}\n disabled={disabled.includes(currentParentId)}\n right={\n <Action\n selected={selected.includes(currentParentId)}\n onChange={onChange}\n id={currentParentId}\n singleChoice={singleChoice}\n />\n }\n >\n <CellText>{getSelectAllParentTrl(currentParentId)}</CellText>\n </Cell>\n </CheckableCardElement>\n </div>\n </div>\n );\n }\n const itemIndex = virtualItem.index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n const item = sortedItems[itemIndex];\n const hasChildren = collection.hasChildren(item.id);\n const hasLetter = item.additional?.char && !isSearch;\n const delimiterContent = renderMobileDelimiter?.({\n item,\n order: orderHashMap[item.id],\n isSearch,\n index: itemIndex,\n isTopLevel: !currentParentId,\n });\n const withGap =\n (!!withContentBefore && virtualItem.index !== 1) || (!withContentBefore && virtualItem.index !== 0);\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n className={classnames(styles.virtualizedItem, {\n [styles.withGap]: withGap,\n })}\n >\n <div className={styles.mobileItem}>\n {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n {hasChildren ? (\n <MobileParentItem\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n navigationChangeCallback.current?.(item.id);\n }}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n ) : (\n <MobileItem\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n onChange={onChange}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <Additional extends AdditionalDefault>(\n props: MobileItemsListProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
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 RefCallback,\n useCallback,\n} from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\nimport styles from './tree-selector-item.less';\n\nconst DEFAULT_ITEM_HEIGHT = 56;\n\ntype MobileItemsListProps<Additional extends AdditionalDefault> = {\n selected: string[];\n disabled: string[];\n getMobileSearchItemOrder: (model: TreeModel<Additional>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n isSearch: boolean;\n} & Pick<\n TreeSelectorDummyProps<Additional>,\n | 'collection'\n | 'leavesOnly'\n | 'singleChoice'\n | 'checkSelectable'\n | 'onChange'\n | 'renderItem'\n | 'renderMobileDelimiter'\n | 'onMobileNavigationChange'\n | 'getSelectAllParentTrl'\n | 'renderContentBefore'\n>;\n\nconst MobileItemsListComponent = <Additional extends AdditionalDefault>(\n props: MobileItemsListProps<Additional>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n disabled,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getMobileSearchItemOrder,\n setInputValue,\n handleChangeInput,\n isSearch,\n renderMobileDelimiter,\n renderItem,\n contentFilterQuery,\n getSelectAllParentTrl,\n renderContentBefore,\n onMobileNavigationChange,\n } = props;\n const navigationChangeCallback = useRef(onMobileNavigationChange);\n navigationChangeCallback.current = onMobileNavigationChange;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const orderHashMap = useMemo(() => {\n return items.reduce<Record<TreeModel<Additional>['id'], number>>((acc, item) => {\n acc[item.id] = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;\n return acc;\n }, {});\n }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);\n\n const sortedItems = useMemo(() => {\n return items.sort((itemA, itemB) => {\n return orderHashMap[itemA.id] - orderHashMap[itemB.id];\n });\n }, [items, orderHashMap]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n const withContentBefore = !!renderContentBefore;\n const count = items.length + (isSelectable ? 1 : 0) + (withContentBefore ? 1 : 0);\n const parentRef = useRef<HTMLElement | null>(null);\n\n const getItemKey = (index: number) => {\n if (withContentBefore && index === 0) {\n return 'promo';\n }\n\n const isSelectAllItem =\n isSelectable && ((index === 0 && !withContentBefore) || (index === 1 && withContentBefore));\n\n if (isSelectAllItem) {\n return `current${currentParentId}`;\n }\n\n const itemIndex = index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n const item = sortedItems[itemIndex];\n\n return currentParentId ? `${currentParentId}${item.id}` : `${item.id}`;\n };\n\n const virtualizer = useVirtualizer({\n count,\n getScrollElement: () => parentRef.current,\n estimateSize: () => DEFAULT_ITEM_HEIGHT,\n getItemKey,\n });\n\n const itemsVirtualizer = virtualizer.getVirtualItems();\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n navigationChangeCallback.current?.(undefined);\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n if (!virtualizer.isScrolling) {\n const prevParentId = prevParentIds.current.pop();\n setCurrentParentId(prevParentId);\n navigationChangeCallback.current?.(prevParentId);\n if (prevQueries.current.length) {\n const prevInputValue = prevQueries.current.pop() as string;\n setInputValue(prevInputValue);\n currentQuery.current = prevInputValue;\n } else {\n handleChangeInput('');\n }\n }\n },\n }),\n [handleChangeInput, setInputValue, virtualizer]\n );\n\n const refCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n parentRef.current = node ? node.parentElement : null;\n }, []);\n\n useEffect(() => {\n virtualizer.scrollToOffset(0);\n }, [currentParentId, sortedItems, virtualizer]);\n\n return (\n <div\n ref={refCallback}\n className={styles.virtualizedList}\n style={{\n height: `${virtualizer.getTotalSize()}px`,\n }}\n >\n {itemsVirtualizer.map((virtualItem) => {\n const isContentBeforeItem = withContentBefore && virtualItem.index === 0;\n const isSelectAllItem =\n isSelectable &&\n ((virtualItem.index === 0 && !withContentBefore) || (virtualItem.index === 1 && withContentBefore));\n\n if (isContentBeforeItem) {\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n className={styles.virtualizedItem}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n >\n {renderContentBefore(isSearch)}\n </div>\n );\n }\n if (isSelectAllItem) {\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n className={styles.virtualizedItem}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n >\n <div className={styles.mobileItem}>\n <CheckableCardElement\n padding={16}\n flexible\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n data-qa={`tree-selector-select-all-${currentParentId}`}\n >\n <Cell\n Element={'div'}\n disabled={disabled.includes(currentParentId)}\n right={\n <Action\n selected={selected.includes(currentParentId)}\n onChange={onChange}\n id={currentParentId}\n singleChoice={singleChoice}\n />\n }\n >\n <CellText>{getSelectAllParentTrl(currentParentId)}</CellText>\n </Cell>\n </CheckableCardElement>\n </div>\n </div>\n );\n }\n const itemIndex = virtualItem.index - (isSelectable ? 1 : 0) - (withContentBefore ? 1 : 0);\n const item = sortedItems[itemIndex];\n const hasChildren = collection.hasChildren(item.id);\n const hasLetter = item.additional?.char && !isSearch;\n const delimiterContent = renderMobileDelimiter?.({\n item,\n order: orderHashMap[item.id],\n isSearch,\n index: itemIndex,\n isTopLevel: !currentParentId,\n });\n const withGap =\n (!!withContentBefore && virtualItem.index !== 1) || (!withContentBefore && virtualItem.index !== 0);\n return (\n <div\n key={virtualItem.key}\n ref={virtualizer.measureElement}\n data-index={virtualItem.index}\n style={{\n transform: `translateY(${virtualItem.start}px)`,\n }}\n className={classnames(styles.virtualizedItem, {\n [styles.withGap]: withGap,\n })}\n >\n <div className={styles.mobileItem}>\n {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n {hasChildren ? (\n <MobileParentItem\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n navigationChangeCallback.current?.(item.id);\n }}\n parentId={currentParentId}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n ) : (\n <MobileItem\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n onChange={onChange}\n isSearch={isSearch}\n renderItem={renderItem}\n parentId={currentParentId}\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <Additional extends AdditionalDefault>(\n props: MobileItemsListProps<Additional> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/MobileParentItem.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ interface MobileParentItemProps<Additional extends AdditionalDefault> {
|
|
|
9
9
|
onClick: () => void;
|
|
10
10
|
renderItem?: RenderItem<Additional>;
|
|
11
11
|
isSearch: boolean;
|
|
12
|
+
parentId?: string;
|
|
12
13
|
}
|
|
13
|
-
export declare const MobileParentItem: <Additional extends AdditionalDefault>({ collection, item, selected, onClick, isSearch, renderItem, }: MobileParentItemProps<Additional>) => ReactElement;
|
|
14
|
+
export declare const MobileParentItem: <Additional extends AdditionalDefault>({ collection, item, selected, onClick, isSearch, parentId, renderItem, }: MobileParentItemProps<Additional>) => ReactElement;
|
|
14
15
|
export {};
|
package/MobileParentItem.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
4
5
|
import { Badge } from '@hh.ru/magritte-ui-badge';
|
|
5
6
|
import { Card } from '@hh.ru/magritte-ui-card';
|
|
6
7
|
import { CellRightLabel } from '@hh.ru/magritte-ui-cell';
|
|
7
8
|
import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
|
|
8
9
|
|
|
9
|
-
const MobileParentItem = ({ collection, item, selected, onClick, isSearch, renderItem = TreeSelectorItemBase, }) => {
|
|
10
|
+
const MobileParentItem = ({ collection, item, selected, onClick, isSearch, parentId, renderItem = TreeSelectorItemBase, }) => {
|
|
10
11
|
const childrenSelectedCount = useMemo(() => {
|
|
11
12
|
let count = 0;
|
|
12
13
|
collection.walkChildren(item.id, (model) => {
|
|
@@ -17,7 +18,9 @@ const MobileParentItem = ({ collection, item, selected, onClick, isSearch, rende
|
|
|
17
18
|
return count;
|
|
18
19
|
}, [collection, selected, item.id]);
|
|
19
20
|
const labelRight = (jsx(CellRightLabel, { badge: childrenSelectedCount ? jsx(Badge, { children: childrenSelectedCount.toString() }) : undefined }));
|
|
20
|
-
return (jsx(Card, { padding: 16, borderRadius: 12, showBorder: true, actionCard: true, stretched: true, onClick: onClick, "data-qa": `tree-selector-item-${item.id}`,
|
|
21
|
+
return (jsx(Card, { padding: 16, borderRadius: 12, showBorder: true, actionCard: true, stretched: true, onClick: onClick, "data-qa": classnames('tree-selector-item', `tree-selector-item-${item.id}`, {
|
|
22
|
+
[`tree-selector-child-${parentId}`]: parentId,
|
|
23
|
+
}), children: renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true }) }));
|
|
21
24
|
};
|
|
22
25
|
|
|
23
26
|
export { MobileParentItem };
|
package/MobileParentItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileParentItem.js","sources":["../src/MobileParentItem.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\n\nimport { Badge } from '@hh.ru/magritte-ui-badge';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { CellRightLabel } from '@hh.ru/magritte-ui-cell';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileParentItemProps<Additional extends AdditionalDefault> {\n collection: TreeCollection<Additional>;\n item: TreeModel<Additional>;\n selected: string[];\n onClick: () => void;\n renderItem?: RenderItem<Additional>;\n isSearch: boolean;\n}\n\nexport const MobileParentItem = <Additional extends AdditionalDefault>({\n collection,\n item,\n selected,\n onClick,\n isSearch,\n renderItem = TreeSelectorItemBase,\n}: MobileParentItemProps<Additional>): ReactElement => {\n const childrenSelectedCount = useMemo(() => {\n let count = 0;\n collection.walkChildren(item.id, (model) => {\n if (selected.includes(model.id)) {\n count += 1;\n }\n });\n\n return count;\n }, [collection, selected, item.id]);\n\n const labelRight = (\n <CellRightLabel badge={childrenSelectedCount ? <Badge>{childrenSelectedCount.toString()}</Badge> : undefined} />\n );\n\n return (\n <Card\n padding={16}\n borderRadius={12}\n showBorder\n actionCard\n stretched\n onClick={onClick}\n data-qa={`tree-selector-item-${item.id}`}\n >\n {renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true })}\n </Card>\n );\n};\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MobileParentItem.js","sources":["../src/MobileParentItem.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\nimport classnames from 'classnames';\n\nimport { Badge } from '@hh.ru/magritte-ui-badge';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { CellRightLabel } from '@hh.ru/magritte-ui-cell';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileParentItemProps<Additional extends AdditionalDefault> {\n collection: TreeCollection<Additional>;\n item: TreeModel<Additional>;\n selected: string[];\n onClick: () => void;\n renderItem?: RenderItem<Additional>;\n isSearch: boolean;\n parentId?: string;\n}\n\nexport const MobileParentItem = <Additional extends AdditionalDefault>({\n collection,\n item,\n selected,\n onClick,\n isSearch,\n parentId,\n renderItem = TreeSelectorItemBase,\n}: MobileParentItemProps<Additional>): ReactElement => {\n const childrenSelectedCount = useMemo(() => {\n let count = 0;\n collection.walkChildren(item.id, (model) => {\n if (selected.includes(model.id)) {\n count += 1;\n }\n });\n\n return count;\n }, [collection, selected, item.id]);\n\n const labelRight = (\n <CellRightLabel badge={childrenSelectedCount ? <Badge>{childrenSelectedCount.toString()}</Badge> : undefined} />\n );\n\n return (\n <Card\n padding={16}\n borderRadius={12}\n showBorder\n actionCard\n stretched\n onClick={onClick}\n data-qa={classnames('tree-selector-item', `tree-selector-item-${item.id}`, {\n [`tree-selector-child-${parentId}`]: parentId,\n })}\n >\n {renderItem({ item, labelRight, childrenSelectedCount, isSearch, isXS: true, isParent: true })}\n </Card>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;MAqBa,gBAAgB,GAAG,CAAuC,EACnE,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,GAAG,oBAAoB,GACD,KAAkB;AAClD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACvC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,KAAI;YACvC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;gBAC7B,KAAK,IAAI,CAAC,CAAC;AACd,aAAA;AACL,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,KAAK,CAAC;KAChB,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAEpC,MAAM,UAAU,IACZA,GAAC,CAAA,cAAc,EAAC,EAAA,KAAK,EAAE,qBAAqB,GAAGA,GAAA,CAAC,KAAK,EAAE,EAAA,QAAA,EAAA,qBAAqB,CAAC,QAAQ,EAAE,EAAA,CAAS,GAAG,SAAS,EAAI,CAAA,CACnH,CAAC;AAEF,IAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EACD,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,UAAU,EACV,IAAA,EAAA,UAAU,EACV,IAAA,EAAA,SAAS,EACT,IAAA,EAAA,OAAO,EAAE,OAAO,aACP,UAAU,CAAC,oBAAoB,EAAE,CAAsB,mBAAA,EAAA,IAAI,CAAC,EAAE,EAAE,EAAE;AACvE,YAAA,CAAC,CAAuB,oBAAA,EAAA,QAAQ,CAAE,CAAA,GAAG,QAAQ;SAChD,CAAC,EAAA,QAAA,EAED,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,qBAAqB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAC3F,CAAA,EACT;AACN;;;;"}
|
package/TreeSelector.js
CHANGED
|
@@ -10,8 +10,8 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
10
10
|
import './ItemsList.js';
|
|
11
11
|
import '@tanstack/react-virtual';
|
|
12
12
|
import './Item.js';
|
|
13
|
-
import './ItemContent.js';
|
|
14
13
|
import 'classnames';
|
|
14
|
+
import './ItemContent.js';
|
|
15
15
|
import '@hh.ru/magritte-common-keyboard';
|
|
16
16
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
17
17
|
import './Action.js';
|
|
@@ -19,7 +19,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
19
19
|
import './TreeSelectorItemBase.js';
|
|
20
20
|
import '@hh.ru/magritte-ui-cell';
|
|
21
21
|
import '@hh.ru/magritte-ui-typography';
|
|
22
|
-
import './tree-selector-item-
|
|
22
|
+
import './tree-selector-item-JlIDTcin.js';
|
|
23
23
|
import './MobileItemsList.js';
|
|
24
24
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
25
25
|
import './MobileDelimiter.js';
|
package/TreeSelectorDummy.js
CHANGED
|
@@ -12,8 +12,8 @@ import { useIndeterminate } from './useIndeterminate.js';
|
|
|
12
12
|
import { useRenderInput } from './useRenderInput.js';
|
|
13
13
|
import '@tanstack/react-virtual';
|
|
14
14
|
import './Item.js';
|
|
15
|
-
import './ItemContent.js';
|
|
16
15
|
import 'classnames';
|
|
16
|
+
import './ItemContent.js';
|
|
17
17
|
import '@hh.ru/magritte-common-keyboard';
|
|
18
18
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
19
19
|
import './Action.js';
|
|
@@ -21,7 +21,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
21
21
|
import './TreeSelectorItemBase.js';
|
|
22
22
|
import '@hh.ru/magritte-ui-cell';
|
|
23
23
|
import '@hh.ru/magritte-ui-typography';
|
|
24
|
-
import './tree-selector-item-
|
|
24
|
+
import './tree-selector-item-JlIDTcin.js';
|
|
25
25
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
26
26
|
import './MobileDelimiter.js';
|
|
27
27
|
import '@hh.ru/magritte-ui-card';
|
package/TreeSelectorItemBase.js
CHANGED
|
@@ -7,7 +7,7 @@ const TreeSelectorItemBase = ({ disabled, input, item, isXS, labelRight, }) => {
|
|
|
7
7
|
[isXS ? 'right' : 'left']: input,
|
|
8
8
|
...(isXS && labelRight && { right: labelRight }),
|
|
9
9
|
};
|
|
10
|
-
return (jsx(Cell, { disabled: disabled, ...cellProps, Element: isXS || !input ? 'div' : 'label', align: "top", children: jsx(CellText, { children: item.text }) }));
|
|
10
|
+
return (jsx(Cell, { disabled: disabled, ...cellProps, Element: isXS || !input ? 'div' : 'label', align: "top", children: jsx(CellText, { "data-qa": `tree-selector-item-text tree-selector-item-text-${item.id}`, children: item.text }) }));
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
export { TreeSelectorItemBase };
|
|
@@ -1 +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 = <Additional extends AdditionalDefault>({\n disabled,\n input,\n item,\n isXS,\n labelRight,\n}: RenderItemProps<Additional>): ReactElement => {\n const cellProps = {\n [isXS ? 'right' : 'left']: input,\n ...(isXS && labelRight && { right: labelRight }),\n };\n return (\n <Cell disabled={disabled} {...cellProps} Element={isXS || !input ? 'div' : 'label'} align=\"top\">\n <CellText>{item.text}</CellText>\n </Cell>\n );\n};\n"],"names":["_jsx"],"mappings":";;;AAMa,MAAA,oBAAoB,GAAG,CAAuC,EACvE,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,UAAU,GACgB,KAAkB;AAC5C,IAAA,MAAM,SAAS,GAAG;QACd,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK;QAChC,IAAI,IAAI,IAAI,UAAU,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE;KAClD,CAAC;
|
|
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 = <Additional extends AdditionalDefault>({\n disabled,\n input,\n item,\n isXS,\n labelRight,\n}: RenderItemProps<Additional>): ReactElement => {\n const cellProps = {\n [isXS ? 'right' : 'left']: input,\n ...(isXS && labelRight && { right: labelRight }),\n };\n return (\n <Cell disabled={disabled} {...cellProps} Element={isXS || !input ? 'div' : 'label'} align=\"top\">\n <CellText data-qa={`tree-selector-item-text tree-selector-item-text-${item.id}`}>{item.text}</CellText>\n </Cell>\n );\n};\n"],"names":["_jsx"],"mappings":";;;AAMa,MAAA,oBAAoB,GAAG,CAAuC,EACvE,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,UAAU,GACgB,KAAkB;AAC5C,IAAA,MAAM,SAAS,GAAG;QACd,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK;QAChC,IAAI,IAAI,IAAI,UAAU,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE;KAClD,CAAC;IACF,QACIA,IAAC,IAAI,EAAA,EAAC,QAAQ,EAAE,QAAQ,KAAM,SAAS,EAAE,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,OAAO,EAAE,KAAK,EAAC,KAAK,YAC3FA,GAAC,CAAA,QAAQ,eAAU,CAAmD,gDAAA,EAAA,IAAI,CAAC,EAAE,CAAA,CAAE,YAAG,IAAI,CAAC,IAAI,EAAY,CAAA,EAAA,CACpG,EACT;AACN;;;;"}
|
package/index.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0:cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
5
5
|
--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0:200ms;
|
|
6
6
|
}
|
|
7
|
-
@keyframes magritte-fade-in___yS4Ja_4-0
|
|
7
|
+
@keyframes magritte-fade-in___yS4Ja_4-1-0{
|
|
8
8
|
0%{
|
|
9
9
|
opacity:0;
|
|
10
10
|
}
|
|
@@ -12,24 +12,24 @@
|
|
|
12
12
|
opacity:1;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
.magritte-item-animation-timeout___pbOyZ_4-0
|
|
16
|
-
animation-name:magritte-fade-in___yS4Ja_4-0
|
|
15
|
+
.magritte-item-animation-timeout___pbOyZ_4-1-0{
|
|
16
|
+
animation-name:magritte-fade-in___yS4Ja_4-1-0;
|
|
17
17
|
animation-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
|
|
18
18
|
--animation-duration:0ms;
|
|
19
19
|
animation-duration:var(--animation-duration);
|
|
20
20
|
}
|
|
21
21
|
@media (prefers-reduced-motion: no-preference){
|
|
22
|
-
.magritte-item-animation-timeout___pbOyZ_4-0
|
|
22
|
+
.magritte-item-animation-timeout___pbOyZ_4-1-0{
|
|
23
23
|
--animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
.magritte-wrapper___GHKV6_4-0
|
|
26
|
+
.magritte-wrapper___GHKV6_4-1-0{
|
|
27
27
|
display:flex;
|
|
28
28
|
padding:12px 0;
|
|
29
29
|
gap:12px;
|
|
30
30
|
align-items:flex-start;
|
|
31
31
|
}
|
|
32
|
-
.magritte-letter___yZOCU_4-0
|
|
32
|
+
.magritte-letter___yZOCU_4-1-0{
|
|
33
33
|
width:24px;
|
|
34
34
|
height:24px;
|
|
35
35
|
display:flex;
|
|
@@ -37,58 +37,59 @@
|
|
|
37
37
|
justify-content:center;
|
|
38
38
|
flex-shrink:0;
|
|
39
39
|
}
|
|
40
|
-
.magritte-icon___kO3Fj_4-0
|
|
41
|
-
.magritte-space___xTO79_4-0
|
|
40
|
+
.magritte-icon___kO3Fj_4-1-0,
|
|
41
|
+
.magritte-space___xTO79_4-1-0{
|
|
42
42
|
flex-shrink:0;
|
|
43
43
|
line-height:0;
|
|
44
44
|
width:24px;
|
|
45
45
|
}
|
|
46
|
-
.magritte-icon___kO3Fj_4-0
|
|
46
|
+
.magritte-icon___kO3Fj_4-1-0{
|
|
47
47
|
transform:rotate(0);
|
|
48
48
|
}
|
|
49
|
-
.magritte-
|
|
49
|
+
.magritte-wrapperActive___Hwk8p_4-1-0,
|
|
50
|
+
.magritte-iconActive___4yrG5_4-1-0{
|
|
50
51
|
cursor:pointer;
|
|
51
52
|
}
|
|
52
|
-
.magritte-iconUp___mpXV6_4-0
|
|
53
|
+
.magritte-iconUp___mpXV6_4-1-0{
|
|
53
54
|
transform:rotate(90deg);
|
|
54
55
|
}
|
|
55
56
|
@media (prefers-reduced-motion: no-preference){
|
|
56
|
-
.magritte-icon___kO3Fj_4-0
|
|
57
|
+
.magritte-icon___kO3Fj_4-1-0{
|
|
57
58
|
transition-property:transform;
|
|
58
59
|
transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-3-0);
|
|
59
60
|
transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-3-0);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
|
-
.magritte-content___ZRc6R_4-0
|
|
63
|
+
.magritte-content___ZRc6R_4-1-0{
|
|
63
64
|
flex-grow:1;
|
|
64
65
|
}
|
|
65
|
-
.magritte-mobile-item___ynALC_4-0
|
|
66
|
+
.magritte-mobile-item___ynALC_4-1-0{
|
|
66
67
|
display:flex;
|
|
67
68
|
gap:12px;
|
|
68
69
|
flex-wrap:wrap;
|
|
69
70
|
}
|
|
70
|
-
.magritte-with-gap___gbvGO_4-0
|
|
71
|
+
.magritte-with-gap___gbvGO_4-1-0{
|
|
71
72
|
padding-top:12px;
|
|
72
73
|
}
|
|
73
|
-
.magritte-virtualized-list___qt2E6_4-0
|
|
74
|
+
.magritte-virtualized-list___qt2E6_4-1-0{
|
|
74
75
|
width:100%;
|
|
75
76
|
position:relative;
|
|
76
77
|
will-change:transform;
|
|
77
78
|
}
|
|
78
|
-
.magritte-virtualized-item___qAYVN_4-0
|
|
79
|
+
.magritte-virtualized-item___qAYVN_4-1-0{
|
|
79
80
|
position:absolute;
|
|
80
81
|
top:0;
|
|
81
82
|
left:0;
|
|
82
83
|
width:100%;
|
|
83
84
|
}
|
|
84
|
-
.magritte-was-expanded___uCFbW_4-0
|
|
85
|
-
animation-name:magritte-fade-in___yS4Ja_4-0
|
|
85
|
+
.magritte-was-expanded___uCFbW_4-1-0{
|
|
86
|
+
animation-name:magritte-fade-in___yS4Ja_4-1-0;
|
|
86
87
|
animation-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
|
|
87
88
|
--animation-duration:0ms;
|
|
88
89
|
animation-duration:var(--animation-duration);
|
|
89
90
|
}
|
|
90
91
|
@media (prefers-reduced-motion: no-preference){
|
|
91
|
-
.magritte-was-expanded___uCFbW_4-0
|
|
92
|
+
.magritte-was-expanded___uCFbW_4-1-0{
|
|
92
93
|
--animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
|
|
93
94
|
}
|
|
94
95
|
}
|
|
@@ -97,7 +98,7 @@
|
|
|
97
98
|
--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0:cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
98
99
|
--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0:200ms;
|
|
99
100
|
}
|
|
100
|
-
@keyframes magritte-fade-in___FDoho_4-0
|
|
101
|
+
@keyframes magritte-fade-in___FDoho_4-1-0{
|
|
101
102
|
0%{
|
|
102
103
|
opacity:0;
|
|
103
104
|
}
|
|
@@ -105,14 +106,14 @@
|
|
|
105
106
|
opacity:1;
|
|
106
107
|
}
|
|
107
108
|
}
|
|
108
|
-
.magritte-item-animation-timeout___Pdli9_4-0
|
|
109
|
-
animation-name:magritte-fade-in___FDoho_4-0
|
|
109
|
+
.magritte-item-animation-timeout___Pdli9_4-1-0{
|
|
110
|
+
animation-name:magritte-fade-in___FDoho_4-1-0;
|
|
110
111
|
animation-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
|
|
111
112
|
--animation-duration:0ms;
|
|
112
113
|
animation-duration:var(--animation-duration);
|
|
113
114
|
}
|
|
114
115
|
@media (prefers-reduced-motion: no-preference){
|
|
115
|
-
.magritte-item-animation-timeout___Pdli9_4-0
|
|
116
|
+
.magritte-item-animation-timeout___Pdli9_4-1-0{
|
|
116
117
|
--animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
|
|
117
118
|
}
|
|
118
119
|
}
|
package/index.js
CHANGED
|
@@ -19,14 +19,14 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
19
19
|
import './ItemsList.js';
|
|
20
20
|
import '@tanstack/react-virtual';
|
|
21
21
|
import './Item.js';
|
|
22
|
-
import './ItemContent.js';
|
|
23
22
|
import 'classnames';
|
|
23
|
+
import './ItemContent.js';
|
|
24
24
|
import '@hh.ru/magritte-common-keyboard';
|
|
25
25
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
26
26
|
import './Action.js';
|
|
27
27
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
28
28
|
import '@hh.ru/magritte-ui-typography';
|
|
29
|
-
import './tree-selector-item-
|
|
29
|
+
import './tree-selector-item-JlIDTcin.js';
|
|
30
30
|
import './MobileItemsList.js';
|
|
31
31
|
import '@hh.ru/magritte-ui-cell';
|
|
32
32
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-tree-selector",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"@hh.ru/magritte-design-tokens": "18.3.0",
|
|
29
29
|
"@hh.ru/magritte-internal-custom-scroll": "1.2.0",
|
|
30
30
|
"@hh.ru/magritte-ui-badge": "2.2.2",
|
|
31
|
-
"@hh.ru/magritte-ui-bottom-sheet": "5.2.
|
|
31
|
+
"@hh.ru/magritte-ui-bottom-sheet": "5.2.5",
|
|
32
32
|
"@hh.ru/magritte-ui-breakpoint": "4.0.3",
|
|
33
33
|
"@hh.ru/magritte-ui-card": "6.0.12",
|
|
34
|
-
"@hh.ru/magritte-ui-cell": "4.0.
|
|
35
|
-
"@hh.ru/magritte-ui-checkable-card": "3.0.
|
|
36
|
-
"@hh.ru/magritte-ui-checkbox-radio": "3.0.
|
|
37
|
-
"@hh.ru/magritte-ui-icon": "7.
|
|
38
|
-
"@hh.ru/magritte-ui-input": "5.1.
|
|
34
|
+
"@hh.ru/magritte-ui-cell": "4.0.1",
|
|
35
|
+
"@hh.ru/magritte-ui-checkable-card": "3.0.22",
|
|
36
|
+
"@hh.ru/magritte-ui-checkbox-radio": "3.0.11",
|
|
37
|
+
"@hh.ru/magritte-ui-icon": "7.4.0",
|
|
38
|
+
"@hh.ru/magritte-ui-input": "5.1.4",
|
|
39
39
|
"@hh.ru/magritte-ui-mock-component": "1.0.11",
|
|
40
|
-
"@hh.ru/magritte-ui-modal": "4.1.
|
|
40
|
+
"@hh.ru/magritte-ui-modal": "4.1.2",
|
|
41
41
|
"@hh.ru/magritte-ui-spacing": "2.0.26",
|
|
42
42
|
"@hh.ru/magritte-ui-theme-provider": "1.1.26",
|
|
43
43
|
"@hh.ru/magritte-ui-typography": "3.0.13",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"publishConfig": {
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "ea23d2f658bf6ce2247c469f273fe77826f008ba"
|
|
55
55
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_4-1-0","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_4-1-0","fade-in":"magritte-fade-in___yS4Ja_4-1-0","fadeIn":"magritte-fade-in___yS4Ja_4-1-0","wrapper":"magritte-wrapper___GHKV6_4-1-0","letter":"magritte-letter___yZOCU_4-1-0","icon":"magritte-icon___kO3Fj_4-1-0","space":"magritte-space___xTO79_4-1-0","wrapperActive":"magritte-wrapperActive___Hwk8p_4-1-0","iconActive":"magritte-iconActive___4yrG5_4-1-0","iconUp":"magritte-iconUp___mpXV6_4-1-0","content":"magritte-content___ZRc6R_4-1-0","mobile-item":"magritte-mobile-item___ynALC_4-1-0","mobileItem":"magritte-mobile-item___ynALC_4-1-0","with-gap":"magritte-with-gap___gbvGO_4-1-0","withGap":"magritte-with-gap___gbvGO_4-1-0","virtualized-list":"magritte-virtualized-list___qt2E6_4-1-0","virtualizedList":"magritte-virtualized-list___qt2E6_4-1-0","virtualized-item":"magritte-virtualized-item___qAYVN_4-1-0","virtualizedItem":"magritte-virtualized-item___qAYVN_4-1-0","was-expanded":"magritte-was-expanded___uCFbW_4-1-0","wasExpanded":"magritte-was-expanded___uCFbW_4-1-0"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=tree-selector-item-JlIDTcin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree-selector-item-JlIDTcin.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/useAnimationTimeout.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { useState, useLayoutEffect } from 'react';
|
|
3
3
|
|
|
4
|
-
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_4-0
|
|
4
|
+
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_4-1-0","itemAnimationTimeout":"magritte-item-animation-timeout___Pdli9_4-1-0","fade-in":"magritte-fade-in___FDoho_4-1-0","fadeIn":"magritte-fade-in___FDoho_4-1-0"};
|
|
5
5
|
|
|
6
6
|
const useAnimationTimeout = () => {
|
|
7
7
|
const [animationTimeout, setAnimationTimeout] = useState(0);
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_4-0-5","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_4-0-5","fade-in":"magritte-fade-in___yS4Ja_4-0-5","fadeIn":"magritte-fade-in___yS4Ja_4-0-5","wrapper":"magritte-wrapper___GHKV6_4-0-5","letter":"magritte-letter___yZOCU_4-0-5","icon":"magritte-icon___kO3Fj_4-0-5","space":"magritte-space___xTO79_4-0-5","iconActive":"magritte-iconActive___4yrG5_4-0-5","iconUp":"magritte-iconUp___mpXV6_4-0-5","content":"magritte-content___ZRc6R_4-0-5","mobile-item":"magritte-mobile-item___ynALC_4-0-5","mobileItem":"magritte-mobile-item___ynALC_4-0-5","with-gap":"magritte-with-gap___gbvGO_4-0-5","withGap":"magritte-with-gap___gbvGO_4-0-5","virtualized-list":"magritte-virtualized-list___qt2E6_4-0-5","virtualizedList":"magritte-virtualized-list___qt2E6_4-0-5","virtualized-item":"magritte-virtualized-item___qAYVN_4-0-5","virtualizedItem":"magritte-virtualized-item___qAYVN_4-0-5","was-expanded":"magritte-was-expanded___uCFbW_4-0-5","wasExpanded":"magritte-was-expanded___uCFbW_4-0-5"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=tree-selector-item-DpD44bMe.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tree-selector-item-DpD44bMe.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|