@hh.ru/magritte-ui-tree-selector 1.7.2 → 2.0.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/Item.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { memo, useMemo, useRef, Children } from 'react';
4
4
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
5
5
  import classnames from 'classnames';
6
- import { s as styles, I as ItemContent } from './ItemContent-DTNfuJTc.js';
6
+ import { s as styles, I as ItemContent } from './ItemContent-CKb4RKWy.js';
7
7
  import '@hh.ru/magritte-common-keyboard';
8
8
  import '@hh.ru/magritte-ui-icon/icon';
9
9
  import './Action.js';
@@ -3,12 +3,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { memo, useCallback } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
6
- import { DotFilledSize24, ChevronUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
6
+ import { DotFilledSize24, ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
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
10
 
11
- var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_1-7-2","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_1-7-2","wrapper":"magritte-wrapper___GHKV6_1-7-2","letter":"magritte-letter___yZOCU_1-7-2","icon":"magritte-icon___kO3Fj_1-7-2","space":"magritte-space___xTO79_1-7-2","iconActive":"magritte-iconActive___4yrG5_1-7-2","iconUp":"magritte-iconUp___mpXV6_1-7-2","content":"magritte-content___ZRc6R_1-7-2","with-shift":"magritte-with-shift___ZErxZ_1-7-2","withShift":"magritte-with-shift___ZErxZ_1-7-2","with-indent":"magritte-with-indent___MH9Vy_1-7-2","withIndent":"magritte-with-indent___MH9Vy_1-7-2","item":"magritte-item___2LtOL_1-7-2","children":"magritte-children___kq-eq_1-7-2","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-7-2","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-7-2","with-three-boxes":"magritte-with-three-boxes___cyVao_1-7-2","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-7-2","item-animation-enter":"magritte-item-animation-enter___14KlM_1-7-2","itemAnimationEnter":"magritte-item-animation-enter___14KlM_1-7-2","item-animation-enter-active":"magritte-item-animation-enter-active___oEWbW_1-7-2","itemAnimationEnterActive":"magritte-item-animation-enter-active___oEWbW_1-7-2","item-animation-exit":"magritte-item-animation-exit___a-Low_1-7-2","itemAnimationExit":"magritte-item-animation-exit___a-Low_1-7-2","item-animation-exit-active":"magritte-item-animation-exit-active___MhBnn_1-7-2","itemAnimationExitActive":"magritte-item-animation-exit-active___MhBnn_1-7-2"};
11
+ var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_2-0-0","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_2-0-0","wrapper":"magritte-wrapper___GHKV6_2-0-0","letter":"magritte-letter___yZOCU_2-0-0","icon":"magritte-icon___kO3Fj_2-0-0","space":"magritte-space___xTO79_2-0-0","iconActive":"magritte-iconActive___4yrG5_2-0-0","iconUp":"magritte-iconUp___mpXV6_2-0-0","content":"magritte-content___ZRc6R_2-0-0","with-shift":"magritte-with-shift___ZErxZ_2-0-0","withShift":"magritte-with-shift___ZErxZ_2-0-0","with-indent":"magritte-with-indent___MH9Vy_2-0-0","withIndent":"magritte-with-indent___MH9Vy_2-0-0","item":"magritte-item___2LtOL_2-0-0","children":"magritte-children___kq-eq_2-0-0","with-two-boxes":"magritte-with-two-boxes___LWOy2_2-0-0","withTwoBoxes":"magritte-with-two-boxes___LWOy2_2-0-0","with-three-boxes":"magritte-with-three-boxes___cyVao_2-0-0","withThreeBoxes":"magritte-with-three-boxes___cyVao_2-0-0","item-animation-enter":"magritte-item-animation-enter___14KlM_2-0-0","itemAnimationEnter":"magritte-item-animation-enter___14KlM_2-0-0","item-animation-enter-active":"magritte-item-animation-enter-active___oEWbW_2-0-0","itemAnimationEnterActive":"magritte-item-animation-enter-active___oEWbW_2-0-0","item-animation-exit":"magritte-item-animation-exit___a-Low_2-0-0","itemAnimationExit":"magritte-item-animation-exit___a-Low_2-0-0","item-animation-exit-active":"magritte-item-animation-exit-active___MhBnn_2-0-0","itemAnimationExitActive":"magritte-item-animation-exit-active___MhBnn_2-0-0"};
12
12
 
13
13
  const ItemContentComponent = ({ item, parentId, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, isSearch, renderItemForDesktop = TreeSelectorItemBase, }) => {
14
14
  const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
@@ -28,9 +28,9 @@ const ItemContentComponent = ({ item, parentId, hasAction, hasChildren, letter,
28
28
  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;
29
29
  return (jsxs("div", { className: styles.wrapper, children: [(letter || hasLetterOnLevel) && (jsx("div", { className: styles.letter, children: letter && (jsx(Text, { typography: "subtitle-1-semibold", style: "secondary", Element: "span", children: letter })) })), hasDot && (jsx("div", { className: styles.icon, children: jsx(DotFilledSize24, { initial: "tertiary" }) })), [...Array(neededSpacesCount).keys()].map((_, i) => (jsx("div", { className: styles.space }, i))), hasChildren && (jsx("div", { className: classnames(styles.icon, styles.iconActive, {
30
30
  [styles.iconUp]: isExpanded,
31
- }), "data-qa": `tree-selector-chevron-${item.id}`, onClick: handleExpandableClick, children: jsx(ChevronUpOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
31
+ }), "data-qa": `tree-selector-chevron-${item.id}`, onClick: handleExpandableClick, children: jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
32
32
  };
33
33
  const ItemContent = memo(ItemContentComponent);
34
34
 
35
35
  export { ItemContent as I, styles as s };
36
- //# sourceMappingURL=ItemContent-DTNfuJTc.js.map
36
+ //# sourceMappingURL=ItemContent-CKb4RKWy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ItemContent-CKb4RKWy.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 { ChevronDownOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<A extends AdditionalDefault> {\n item: TreeModel<A>;\n parentId?: TreeModel<A>['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<A>;\n isSearch: boolean;\n}\n\nconst ItemContentComponent = <A 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<A>): ReactElement => {\n const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n const currentActionCount = +hasDot + +hasAction + +hasChildren;\n const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n isExpanded && onExpansion(item.id);\n event.preventDefault();\n return;\n }\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n !isExpanded && onExpansion(item.id);\n event.preventDefault();\n }\n },\n [isExpanded, onExpansion, item.id]\n );\n\n const input = hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n onKeyDown={handleExpandableKeyDown}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n />\n ) : undefined;\n\n return (\n <div className={styles.wrapper}>\n {(letter || hasLetterOnLevel) && (\n <div className={styles.letter}>\n {letter && (\n <Text typography=\"subtitle-1-semibold\" style=\"secondary\" Element=\"span\">\n {letter}\n </Text>\n )}\n </div>\n )}\n {hasDot && (\n <div className={styles.icon}>\n <DotFilledSize24 initial=\"tertiary\" />\n </div>\n )}\n\n {[...Array(neededSpacesCount).keys()].map((_, i) => (\n <div key={i} className={styles.space} />\n ))}\n\n {hasChildren && (\n <div\n className={classnames(styles.icon, styles.iconActive, {\n [styles.iconUp]: isExpanded,\n })}\n data-qa={`tree-selector-chevron-${item.id}`}\n onClick={handleExpandableClick}\n >\n <ChevronDownOutlinedSize24 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 <A extends AdditionalDefault>(\n props: ItemContent<A>\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/ItemContent.js CHANGED
@@ -7,7 +7,7 @@ import '@hh.ru/magritte-ui-icon/icon';
7
7
  import './Action.js';
8
8
  import './TreeSelectorItemBase.js';
9
9
  import '@hh.ru/magritte-ui-typography';
10
- export { I as ItemContent } from './ItemContent-DTNfuJTc.js';
10
+ export { I as ItemContent } from './ItemContent-CKb4RKWy.js';
11
11
  import '@hh.ru/magritte-ui-checkbox-radio';
12
12
  import '@hh.ru/magritte-ui-cell';
13
13
  //# sourceMappingURL=ItemContent.js.map
package/ItemsList.js CHANGED
@@ -4,7 +4,7 @@ import { Item } from './Item.js';
4
4
  import 'react';
5
5
  import 'react-transition-group';
6
6
  import 'classnames';
7
- import './ItemContent-DTNfuJTc.js';
7
+ import './ItemContent-CKb4RKWy.js';
8
8
  import '@hh.ru/magritte-common-keyboard';
9
9
  import '@hh.ru/magritte-ui-icon/icon';
10
10
  import './Action.js';
@@ -4,20 +4,22 @@ import { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-se
4
4
  type MobileItemsListProps<A extends AdditionalDefault> = {
5
5
  selected: string[];
6
6
  disabled: string[];
7
- getSearchItemOrder: (model: TreeModel<A>) => number;
7
+ getMobileSearchItemOrder: (model: TreeModel<A>) => number;
8
8
  setInputValue: (newValue: string) => void;
9
9
  handleChangeInput: (newValue: string) => void;
10
10
  contentFilterQuery: string;
11
11
  trlSelectParent: ReactNode;
12
+ isSearch: boolean;
12
13
  } & Pick<TreeSelectorDummyProps<A>, 'collection' | 'leavesOnly' | 'singleChoice' | 'checkSelectable' | 'onChange' | 'renderItem' | 'renderMobileDelimiter' | 'onMobileNavigationChange'>;
13
14
  export declare const MobileItemsList: <A extends AdditionalDefault>(props: {
14
15
  selected: string[];
15
16
  disabled: string[];
16
- getSearchItemOrder: (model: TreeModel<A>) => number;
17
+ getMobileSearchItemOrder: (model: TreeModel<A>) => number;
17
18
  setInputValue: (newValue: string) => void;
18
19
  handleChangeInput: (newValue: string) => void;
19
20
  contentFilterQuery: string;
20
21
  trlSelectParent: ReactNode;
22
+ isSearch: boolean;
21
23
  } & Pick<TreeSelectorDummyProps<A>, "singleChoice" | "onChange" | "collection" | "leavesOnly" | "checkSelectable" | "renderItem" | "renderMobileDelimiter" | "onMobileNavigationChange"> & {
22
24
  ref?: ForwardedRef<ListControls> | undefined;
23
25
  }) => ReactElement;
@@ -13,24 +13,23 @@ import '@hh.ru/magritte-ui-typography';
13
13
  import './TreeSelectorItemBase.js';
14
14
 
15
15
  const MobileItemsListComponent = (props, ref) => {
16
- const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getSearchItemOrder, setInputValue, handleChangeInput, renderMobileDelimiter, renderItem, contentFilterQuery, trlSelectParent, onMobileNavigationChange, } = props;
16
+ const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getMobileSearchItemOrder, setInputValue, handleChangeInput, isSearch, renderMobileDelimiter, renderItem, contentFilterQuery, trlSelectParent, onMobileNavigationChange, } = props;
17
17
  const prevParentIds = useRef([]);
18
18
  const prevQueries = useRef([]);
19
19
  const currentQuery = useRef(contentFilterQuery);
20
20
  const [currentParentId, setCurrentParentId] = useState();
21
- const isSearch = !!contentFilterQuery;
22
21
  const items = useMemo(() => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()), [currentParentId, collection]);
23
22
  const { itemsByOrder, sortedOrders } = useMemo(() => {
24
23
  const orders = new Set();
25
24
  const itemsByOrder = items.reduce((acc, item) => {
26
- const modelOrder = isSearch && !currentParentId ? getSearchItemOrder(item) : 0;
25
+ const modelOrder = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;
27
26
  orders.add(modelOrder);
28
27
  acc[modelOrder] = acc[modelOrder] || [];
29
28
  acc[modelOrder].push(item);
30
29
  return acc;
31
30
  }, {});
32
31
  return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };
33
- }, [items, isSearch, currentParentId, getSearchItemOrder]);
32
+ }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);
34
33
  const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);
35
34
  useEffect(() => {
36
35
  setCurrentParentId(undefined);
@@ -60,7 +59,6 @@ const MobileItemsListComponent = (props, ref) => {
60
59
  order,
61
60
  isSearch,
62
61
  index,
63
- isFirstInOrder: index === 0,
64
62
  isTopLevel: !currentParentId,
65
63
  });
66
64
  return (jsxs(Fragment$1, { children: [hasLetter && jsx(MobileDelimiter, { children: item.additional?.char }), delimiterContent && jsx(MobileDelimiter, { children: delimiterContent }), hasChildren ? (jsx(MobileParentItem, { collection: collection, item: item, selected: selected, onClick: () => {
@@ -1 +1 @@
1
- {"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n ReactElement,\n Fragment,\n useMemo,\n useState,\n useImperativeHandle,\n forwardRef,\n ForwardedRef,\n useRef,\n useEffect,\n ReactNode,\n} from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype MobileItemsListProps<A extends AdditionalDefault> = {\n selected: string[];\n disabled: string[];\n getSearchItemOrder: (model: TreeModel<A>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n trlSelectParent: ReactNode;\n} & Pick<\n TreeSelectorDummyProps<A>,\n | 'collection'\n | 'leavesOnly'\n | 'singleChoice'\n | 'checkSelectable'\n | 'onChange'\n | 'renderItem'\n | 'renderMobileDelimiter'\n | 'onMobileNavigationChange'\n>;\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n props: MobileItemsListProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n disabled,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getSearchItemOrder,\n setInputValue,\n handleChangeInput,\n renderMobileDelimiter,\n renderItem,\n contentFilterQuery,\n trlSelectParent,\n onMobileNavigationChange,\n } = props;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const isSearch = !!contentFilterQuery;\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const { itemsByOrder, sortedOrders } = useMemo(() => {\n const orders = new Set<number>();\n const itemsByOrder = items.reduce<Record<number, TreeModel<A>[]>>((acc, item) => {\n const modelOrder = isSearch && !currentParentId ? getSearchItemOrder(item) : 0;\n orders.add(modelOrder);\n acc[modelOrder] = acc[modelOrder] || [];\n acc[modelOrder].push(item);\n return acc;\n }, {});\n return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };\n }, [items, isSearch, currentParentId, getSearchItemOrder]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n const prevParentId = prevParentIds.current.pop();\n setCurrentParentId(prevParentId);\n onMobileNavigationChange?.(prevParentId);\n if (prevQueries.current.length) {\n setInputValue(prevQueries.current.pop() as string);\n } else {\n handleChangeInput('');\n }\n },\n }),\n [handleChangeInput, onMobileNavigationChange, setInputValue]\n );\n return (\n <>\n {isSelectable && (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n 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>{trlSelectParent}</CellText>\n </Cell>\n </CheckableCardElement>\n )}\n {sortedOrders.map((order) => {\n return itemsByOrder[order].map((item, index) => {\n const hasChildren = collection.hasChildren(item.id);\n const hasLetter = item.additional?.char && !isSearch;\n const delimiterContent = renderMobileDelimiter?.({\n item,\n order,\n isSearch,\n index,\n isFirstInOrder: index === 0,\n isTopLevel: !currentParentId,\n });\n return (\n <Fragment key={item.id}>\n {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n {hasChildren ? (\n <MobileParentItem\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n onMobileNavigationChange?.(item.id);\n }}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n ) : (\n <MobileItem\n key={item.id}\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n onChange={onChange}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n )}\n </Fragment>\n );\n });\n })}\n </>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <A extends AdditionalDefault>(\n props: MobileItemsListProps<A> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsxs","_jsx","Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n ReactElement,\n Fragment,\n useMemo,\n useState,\n useImperativeHandle,\n forwardRef,\n ForwardedRef,\n useRef,\n useEffect,\n ReactNode,\n} from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileDelimiter } from '@hh.ru/magritte-ui-tree-selector/MobileDelimiter';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype MobileItemsListProps<A extends AdditionalDefault> = {\n selected: string[];\n disabled: string[];\n getMobileSearchItemOrder: (model: TreeModel<A>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n trlSelectParent: ReactNode;\n isSearch: boolean;\n} & Pick<\n TreeSelectorDummyProps<A>,\n | 'collection'\n | 'leavesOnly'\n | 'singleChoice'\n | 'checkSelectable'\n | 'onChange'\n | 'renderItem'\n | 'renderMobileDelimiter'\n | 'onMobileNavigationChange'\n>;\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n props: MobileItemsListProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n disabled,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getMobileSearchItemOrder,\n setInputValue,\n handleChangeInput,\n isSearch,\n renderMobileDelimiter,\n renderItem,\n contentFilterQuery,\n trlSelectParent,\n onMobileNavigationChange,\n } = props;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const { itemsByOrder, sortedOrders } = useMemo(() => {\n const orders = new Set<number>();\n const itemsByOrder = items.reduce<Record<number, TreeModel<A>[]>>((acc, item) => {\n const modelOrder = isSearch && !currentParentId ? getMobileSearchItemOrder(item) : 0;\n orders.add(modelOrder);\n acc[modelOrder] = acc[modelOrder] || [];\n acc[modelOrder].push(item);\n return acc;\n }, {});\n return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };\n }, [items, isSearch, currentParentId, getMobileSearchItemOrder]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n const prevParentId = prevParentIds.current.pop();\n setCurrentParentId(prevParentId);\n onMobileNavigationChange?.(prevParentId);\n if (prevQueries.current.length) {\n setInputValue(prevQueries.current.pop() as string);\n } else {\n handleChangeInput('');\n }\n },\n }),\n [handleChangeInput, onMobileNavigationChange, setInputValue]\n );\n return (\n <>\n {isSelectable && (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n 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>{trlSelectParent}</CellText>\n </Cell>\n </CheckableCardElement>\n )}\n {sortedOrders.map((order) => {\n return itemsByOrder[order].map((item, index) => {\n const hasChildren = collection.hasChildren(item.id);\n const hasLetter = item.additional?.char && !isSearch;\n const delimiterContent = renderMobileDelimiter?.({\n item,\n order,\n isSearch,\n index,\n isTopLevel: !currentParentId,\n });\n return (\n <Fragment key={item.id}>\n {hasLetter && <MobileDelimiter>{item.additional?.char}</MobileDelimiter>}\n {delimiterContent && <MobileDelimiter>{delimiterContent}</MobileDelimiter>}\n {hasChildren ? (\n <MobileParentItem\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n onMobileNavigationChange?.(item.id);\n }}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n ) : (\n <MobileItem\n key={item.id}\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n onChange={onChange}\n isSearch={isSearch}\n renderItem={renderItem}\n />\n )}\n </Fragment>\n );\n });\n })}\n </>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent) as <A extends AdditionalDefault>(\n props: MobileItemsListProps<A> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsxs","_jsx","Fragment"],"mappings":"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"}
package/TreeSelector.js CHANGED
@@ -12,7 +12,7 @@ import './ItemsList.js';
12
12
  import './Item.js';
13
13
  import 'react-transition-group';
14
14
  import 'classnames';
15
- import './ItemContent-DTNfuJTc.js';
15
+ import './ItemContent-CKb4RKWy.js';
16
16
  import '@hh.ru/magritte-common-keyboard';
17
17
  import '@hh.ru/magritte-ui-icon/icon';
18
18
  import './Action.js';
@@ -1,7 +1,7 @@
1
1
  import { ReactElement, ForwardedRef } from 'react';
2
2
  import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
3
3
  import { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';
4
- export declare const TreeSelectorDummyComponent: <A extends AdditionalDefault>({ collection: initialCollection, checkSelectable, initialExpanded, value: selected, leavesOnly, singleChoice, expanded, disabled, treeFilter, suggestedNotFound, constantlySuggested, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, trls, children, }: TreeSelectorDummyProps<A>, ref: ForwardedRef<ListControls>) => ReactElement;
4
+ export declare const TreeSelectorDummyComponent: <A extends AdditionalDefault>({ collection: initialCollection, checkSelectable, initialExpanded, value: selected, leavesOnly, singleChoice, disabled, treeFilter, suggestedNotFound, constantlySuggested, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, trls, children, }: TreeSelectorDummyProps<A>, ref: ForwardedRef<ListControls>) => ReactElement;
5
5
  export declare const TreeSelectorDummy: <A extends AdditionalDefault>(props: import("@hh.ru/magritte-ui-tree-selector/types").BaseTreeSelectorProps<A> & import("@hh.ru/magritte-ui-tree-selector/types").DummyProps & {
6
6
  ref?: ForwardedRef<ListControls> | undefined;
7
7
  }) => ReactElement;
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
  import { jsx, Fragment } from 'react/jsx-runtime';
3
- import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
3
+ import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
4
4
  import { match } from '@hh.ru/magritte-common-fuzzy-search';
5
5
  import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
6
6
  import { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';
@@ -14,7 +14,7 @@ import { useRenderInput } from './useRenderInput.js';
14
14
  import './Item.js';
15
15
  import 'react-transition-group';
16
16
  import 'classnames';
17
- import './ItemContent-DTNfuJTc.js';
17
+ import './ItemContent-CKb4RKWy.js';
18
18
  import '@hh.ru/magritte-common-keyboard';
19
19
  import '@hh.ru/magritte-ui-icon/icon';
20
20
  import './Action.js';
@@ -36,16 +36,19 @@ const defaultArray = [];
36
36
  const needToApply = (query) => {
37
37
  return !!(query && query.length);
38
38
  };
39
- const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, trls, children, }, ref) => {
39
+ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, disabled = defaultArray, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, renderItemForDesktop, renderItem, renderMobileDelimiter, onExpand, onChange, onChangeFilterQuery, contentNotFound, onMobileNavigationChange, getMobileSearchItemOrder, trls, children, }, ref) => {
40
40
  const [collection, setCollection] = useState(initialCollection);
41
+ const [isSearch, setIsSearch] = useState(false);
41
42
  const currentQuery = useRef('');
42
43
  const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));
43
44
  const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));
44
45
  const { animationTimeout } = useAnimationTimeout();
46
+ const getSearchItemOrderDefault = useCallback((model) => {
47
+ return initialCollection.getModelLevel(model.id);
48
+ }, [initialCollection]);
45
49
  const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });
46
50
  const { expanded: currentExpanded, setExpanded, handleExpansion, } = useExpanded({
47
- initialValue: expanded ? expanded.slice() : initialExpanded.slice(),
48
- controlledExpanded: expanded,
51
+ initialValue: initialExpanded.slice(),
49
52
  onExpand,
50
53
  });
51
54
  const { isMobile } = useBreakpoint();
@@ -89,6 +92,7 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
89
92
  currentQuery.current = contentFilterQuery;
90
93
  onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);
91
94
  setExpanded(newExpanded);
95
+ setIsSearch(true);
92
96
  }
93
97
  else if (queryWasChanged) {
94
98
  // Запрос не годится для поиска.
@@ -97,6 +101,7 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
97
101
  onChangeFilterQuery?.(initialCollection.toList().map((model) => model.id), contentFilterQueryTrimmed);
98
102
  currentQuery.current = contentFilterQuery;
99
103
  setExpanded(newExpanded);
104
+ setIsSearch(false);
100
105
  }
101
106
  }, [
102
107
  initialCollection,
@@ -110,7 +115,7 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
110
115
  ]);
111
116
  const renderTreeSelector = useCallback(() => {
112
117
  const hasModels = collection.getTopLevel().length;
113
- return hasModels ? (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getSearchItemOrder: (model) => initialCollection.getModelLevel(model.id), collection: collection, selected: selected, disabled: disabled, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref, setInputValue: setInputValue, renderItem: renderItem, renderMobileDelimiter: renderMobileDelimiter, handleChangeInput: handleChangeInput, contentFilterQuery: contentFilterQuery.trim(), trlSelectParent: trls.selectAllParent, onMobileNavigationChange: onMobileNavigationChange })) : (jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, disabled: disabled, singleChoice: singleChoice, indeterminate: indeterminate, isSearch: !!contentFilterQuery.trim(), renderItemForDesktop: renderItemForDesktop, animationTimeout: animationTimeout })) })) : (jsx(Fragment, { children: contentNotFound }));
118
+ return hasModels ? (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getMobileSearchItemOrder: getMobileSearchItemOrder || getSearchItemOrderDefault, collection: collection, selected: selected, disabled: disabled, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref, setInputValue: setInputValue, renderItem: renderItem, renderMobileDelimiter: renderMobileDelimiter, handleChangeInput: handleChangeInput, contentFilterQuery: contentFilterQuery.trim(), trlSelectParent: trls.selectAllParent, onMobileNavigationChange: onMobileNavigationChange, isSearch: isSearch })) : (jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, disabled: disabled, singleChoice: singleChoice, indeterminate: indeterminate, isSearch: isSearch, renderItemForDesktop: renderItemForDesktop, animationTimeout: animationTimeout })) })) : (jsx(Fragment, { children: contentNotFound }));
114
119
  }, [
115
120
  collection,
116
121
  isMobile,
@@ -135,6 +140,7 @@ const TreeSelectorDummyComponent = ({ collection: initialCollection, checkSelect
135
140
  animationTimeout,
136
141
  contentNotFound,
137
142
  initialCollection,
143
+ isSearch,
138
144
  ]);
139
145
  return jsx(Fragment, { children: children({ renderTreeSelector, renderInput }) });
140
146
  };
@@ -1 +1 @@
1
- {"version":3,"file":"TreeSelectorDummy.js","sources":["../src/TreeSelectorDummy.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { MobileItemsList } from '@hh.ru/magritte-ui-tree-selector/MobileItemsList';\nimport { filterWithParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\nimport { useExpanded } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\nimport { useIndeterminate } from '@hh.ru/magritte-ui-tree-selector/useIndeterminate';\nimport { useRenderInput } from '@hh.ru/magritte-ui-tree-selector/useRenderInput';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nconst needToApply = (query: string): boolean => {\n return !!(query && query.length);\n};\n\nexport const TreeSelectorDummyComponent = <A extends AdditionalDefault>(\n {\n collection: initialCollection,\n checkSelectable = defaultCheckSelectable,\n initialExpanded = defaultArray,\n value: selected,\n leavesOnly,\n singleChoice,\n expanded,\n disabled = defaultArray,\n treeFilter = filterWithParents,\n suggestedNotFound = defaultArray,\n constantlySuggested = defaultArray,\n renderItemForDesktop,\n renderItem,\n renderMobileDelimiter,\n onExpand,\n onChange,\n onChangeFilterQuery,\n contentNotFound,\n onMobileNavigationChange,\n trls,\n children,\n }: TreeSelectorDummyProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const [collection, setCollection] = useState(initialCollection);\n const currentQuery = useRef('');\n const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n const { animationTimeout } = useAnimationTimeout();\n\n const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n const {\n expanded: currentExpanded,\n setExpanded,\n handleExpansion,\n } = useExpanded({\n initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n controlledExpanded: expanded,\n onExpand,\n });\n const { isMobile } = useBreakpoint();\n\n const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();\n\n useEffect(() => {\n const contentFilterQueryTrimmed = contentFilterQuery.trim();\n const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();\n\n if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {\n const newExpanded: string[] = [];\n const newCollection = treeFilter(\n initialCollection,\n (item) => match(contentFilterQueryTrimmed, item.text),\n isMobile\n );\n newCollection.toList().forEach((item) => {\n if (newCollection.hasChildren(item.id)) {\n // Если есть в отфильтрованной коллекции есть дочерние элементы,\n // значит они заматчились, и нужно открыть родителя.\n newExpanded.push(item.id);\n } else {\n // Если заматчился только сам родитель, показываем его\n // схлопнутым => нужно добавить его ветку в коллекцию.\n initialCollection.walkChildren(item.id, (child, parents) => {\n newCollection.addModel({ ...child }, parents[0].id);\n });\n }\n });\n\n const filteredIds = newCollection.toList().map((model) => model.id);\n\n // Если в отфильтрованной коллекции нет моделей, но заданы предложенные,\n // то показываем их\n // Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним\n // всегда показывающиеся модели, если их ещё нет в коллекции\n if (!filteredIds.length && suggestedNotFoundModels.current.length) {\n suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));\n } else {\n constantlySuggestedModels.current.forEach((model) => {\n if (!filteredIds.includes(model.id)) {\n newCollection.addModel({ ...model });\n }\n });\n }\n\n setCollection(newCollection);\n currentQuery.current = contentFilterQuery;\n onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);\n setExpanded(newExpanded);\n } else if (queryWasChanged) {\n // Запрос не годится для поиска.\n const newExpanded = initialExpanded.slice();\n setCollection(initialCollection);\n\n onChangeFilterQuery?.(\n initialCollection.toList().map((model) => model.id),\n contentFilterQueryTrimmed\n );\n currentQuery.current = contentFilterQuery;\n setExpanded(newExpanded);\n }\n }, [\n initialCollection,\n contentFilterQuery,\n treeFilter,\n selected,\n initialExpanded,\n setExpanded,\n isMobile,\n onChangeFilterQuery,\n ]);\n\n const renderTreeSelector = useCallback(() => {\n const hasModels = collection.getTopLevel().length;\n return hasModels ? (\n <VSpacingContainer default={12} gteM={0}>\n {isMobile ? (\n <MobileItemsList\n getSearchItemOrder={(model) => initialCollection.getModelLevel(model.id)}\n collection={collection}\n selected={selected}\n disabled={disabled}\n onChange={onChange}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n singleChoice={singleChoice}\n ref={ref}\n setInputValue={setInputValue}\n renderItem={renderItem}\n renderMobileDelimiter={renderMobileDelimiter}\n handleChangeInput={handleChangeInput}\n contentFilterQuery={contentFilterQuery.trim()}\n trlSelectParent={trls.selectAllParent}\n onMobileNavigationChange={onMobileNavigationChange}\n />\n ) : (\n <ItemsList\n collection={collection}\n items={collection.getTopLevel()}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n expanded={currentExpanded}\n onExpansion={handleExpansion}\n selected={selected}\n onChange={onChange}\n disabled={disabled}\n singleChoice={singleChoice}\n indeterminate={indeterminate}\n isSearch={!!contentFilterQuery.trim()}\n renderItemForDesktop={renderItemForDesktop}\n animationTimeout={animationTimeout}\n />\n )}\n </VSpacingContainer>\n ) : (\n <>{contentNotFound}</>\n );\n }, [\n collection,\n isMobile,\n selected,\n disabled,\n onChange,\n leavesOnly,\n checkSelectable,\n singleChoice,\n ref,\n setInputValue,\n renderItem,\n renderMobileDelimiter,\n handleChangeInput,\n contentFilterQuery,\n trls.selectAllParent,\n onMobileNavigationChange,\n currentExpanded,\n handleExpansion,\n indeterminate,\n renderItemForDesktop,\n animationTimeout,\n contentNotFound,\n initialCollection,\n ]);\n\n return <>{children({ renderTreeSelector, renderInput })}</>;\n};\n\nexport const TreeSelectorDummy = forwardRef(TreeSelectorDummyComponent) as <A extends AdditionalDefault>(\n props: TreeSelectorDummyProps<A> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"TreeSelectorDummy.js","sources":["../src/TreeSelectorDummy.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { MobileItemsList } from '@hh.ru/magritte-ui-tree-selector/MobileItemsList';\nimport { filterWithParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls, TreeSelectorDummyProps } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\nimport { useExpanded } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\nimport { useIndeterminate } from '@hh.ru/magritte-ui-tree-selector/useIndeterminate';\nimport { useRenderInput } from '@hh.ru/magritte-ui-tree-selector/useRenderInput';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nconst needToApply = (query: string): boolean => {\n return !!(query && query.length);\n};\n\nexport const TreeSelectorDummyComponent = <A extends AdditionalDefault>(\n {\n collection: initialCollection,\n checkSelectable = defaultCheckSelectable,\n initialExpanded = defaultArray,\n value: selected,\n leavesOnly,\n singleChoice,\n disabled = defaultArray,\n treeFilter = filterWithParents,\n suggestedNotFound = defaultArray,\n constantlySuggested = defaultArray,\n renderItemForDesktop,\n renderItem,\n renderMobileDelimiter,\n onExpand,\n onChange,\n onChangeFilterQuery,\n contentNotFound,\n onMobileNavigationChange,\n getMobileSearchItemOrder,\n trls,\n children,\n }: TreeSelectorDummyProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const [collection, setCollection] = useState(initialCollection);\n const [isSearch, setIsSearch] = useState(false);\n const currentQuery = useRef('');\n const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n const { animationTimeout } = useAnimationTimeout();\n const getSearchItemOrderDefault = useCallback(\n (model: TreeModel<A>) => {\n return initialCollection.getModelLevel(model.id);\n },\n [initialCollection]\n );\n\n const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n const {\n expanded: currentExpanded,\n setExpanded,\n handleExpansion,\n } = useExpanded({\n initialValue: initialExpanded.slice(),\n onExpand,\n });\n const { isMobile } = useBreakpoint();\n\n const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();\n\n useEffect(() => {\n const contentFilterQueryTrimmed = contentFilterQuery.trim();\n const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();\n\n if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {\n const newExpanded: string[] = [];\n const newCollection = treeFilter(\n initialCollection,\n (item) => match(contentFilterQueryTrimmed, item.text),\n isMobile\n );\n newCollection.toList().forEach((item) => {\n if (newCollection.hasChildren(item.id)) {\n // Если есть в отфильтрованной коллекции есть дочерние элементы,\n // значит они заматчились, и нужно открыть родителя.\n newExpanded.push(item.id);\n } else {\n // Если заматчился только сам родитель, показываем его\n // схлопнутым => нужно добавить его ветку в коллекцию.\n initialCollection.walkChildren(item.id, (child, parents) => {\n newCollection.addModel({ ...child }, parents[0].id);\n });\n }\n });\n\n const filteredIds = newCollection.toList().map((model) => model.id);\n\n // Если в отфильтрованной коллекции нет моделей, но заданы предложенные,\n // то показываем их\n // Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним\n // всегда показывающиеся модели, если их ещё нет в коллекции\n if (!filteredIds.length && suggestedNotFoundModels.current.length) {\n suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));\n } else {\n constantlySuggestedModels.current.forEach((model) => {\n if (!filteredIds.includes(model.id)) {\n newCollection.addModel({ ...model });\n }\n });\n }\n\n setCollection(newCollection);\n currentQuery.current = contentFilterQuery;\n onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);\n setExpanded(newExpanded);\n setIsSearch(true);\n } else if (queryWasChanged) {\n // Запрос не годится для поиска.\n const newExpanded = initialExpanded.slice();\n setCollection(initialCollection);\n\n onChangeFilterQuery?.(\n initialCollection.toList().map((model) => model.id),\n contentFilterQueryTrimmed\n );\n currentQuery.current = contentFilterQuery;\n setExpanded(newExpanded);\n setIsSearch(false);\n }\n }, [\n initialCollection,\n contentFilterQuery,\n treeFilter,\n selected,\n initialExpanded,\n setExpanded,\n isMobile,\n onChangeFilterQuery,\n ]);\n\n const renderTreeSelector = useCallback(() => {\n const hasModels = collection.getTopLevel().length;\n return hasModels ? (\n <VSpacingContainer default={12} gteM={0}>\n {isMobile ? (\n <MobileItemsList\n getMobileSearchItemOrder={getMobileSearchItemOrder || getSearchItemOrderDefault}\n collection={collection}\n selected={selected}\n disabled={disabled}\n onChange={onChange}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n singleChoice={singleChoice}\n ref={ref}\n setInputValue={setInputValue}\n renderItem={renderItem}\n renderMobileDelimiter={renderMobileDelimiter}\n handleChangeInput={handleChangeInput}\n contentFilterQuery={contentFilterQuery.trim()}\n trlSelectParent={trls.selectAllParent}\n onMobileNavigationChange={onMobileNavigationChange}\n isSearch={isSearch}\n />\n ) : (\n <ItemsList\n collection={collection}\n items={collection.getTopLevel()}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n expanded={currentExpanded}\n onExpansion={handleExpansion}\n selected={selected}\n onChange={onChange}\n disabled={disabled}\n singleChoice={singleChoice}\n indeterminate={indeterminate}\n isSearch={isSearch}\n renderItemForDesktop={renderItemForDesktop}\n animationTimeout={animationTimeout}\n />\n )}\n </VSpacingContainer>\n ) : (\n <>{contentNotFound}</>\n );\n }, [\n collection,\n isMobile,\n selected,\n disabled,\n onChange,\n leavesOnly,\n checkSelectable,\n singleChoice,\n ref,\n setInputValue,\n renderItem,\n renderMobileDelimiter,\n handleChangeInput,\n contentFilterQuery,\n trls.selectAllParent,\n onMobileNavigationChange,\n currentExpanded,\n handleExpansion,\n indeterminate,\n renderItemForDesktop,\n animationTimeout,\n contentNotFound,\n initialCollection,\n isSearch,\n ]);\n\n return <>{children({ renderTreeSelector, renderInput })}</>;\n};\n\nexport const TreeSelectorDummy = forwardRef(TreeSelectorDummyComponent) as <A extends AdditionalDefault>(\n props: TreeSelectorDummyProps<A> & { ref?: ForwardedRef<ListControls> }\n) => ReactElement;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}
package/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
5
5
  --magritte-semantic-animation-ease-in-out-200-duration-v18-2-1:200ms;
6
6
  }
7
- .magritte-item-animation-timeout___pbOyZ_1-7-2{
7
+ .magritte-item-animation-timeout___pbOyZ_2-0-0{
8
8
  transition-property:height, opacity;
9
9
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
10
10
  overflow:hidden;
@@ -12,17 +12,17 @@
12
12
  transition-duration:var(--animation-duration);
13
13
  }
14
14
  @media (prefers-reduced-motion: no-preference){
15
- .magritte-item-animation-timeout___pbOyZ_1-7-2{
15
+ .magritte-item-animation-timeout___pbOyZ_2-0-0{
16
16
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
17
17
  }
18
18
  }
19
- .magritte-wrapper___GHKV6_1-7-2{
19
+ .magritte-wrapper___GHKV6_2-0-0{
20
20
  display:flex;
21
21
  padding:12px 0;
22
22
  gap:12px;
23
23
  align-items:flex-start;
24
24
  }
25
- .magritte-letter___yZOCU_1-7-2{
25
+ .magritte-letter___yZOCU_2-0-0{
26
26
  width:24px;
27
27
  height:24px;
28
28
  display:flex;
@@ -30,47 +30,47 @@
30
30
  justify-content:center;
31
31
  flex-shrink:0;
32
32
  }
33
- .magritte-icon___kO3Fj_1-7-2,
34
- .magritte-space___xTO79_1-7-2{
33
+ .magritte-icon___kO3Fj_2-0-0,
34
+ .magritte-space___xTO79_2-0-0{
35
35
  flex-shrink:0;
36
36
  line-height:0;
37
37
  width:24px;
38
38
  }
39
- .magritte-icon___kO3Fj_1-7-2{
39
+ .magritte-icon___kO3Fj_2-0-0{
40
40
  transform:rotate(0);
41
41
  }
42
- .magritte-iconActive___4yrG5_1-7-2{
42
+ .magritte-iconActive___4yrG5_2-0-0{
43
43
  cursor:pointer;
44
44
  }
45
- .magritte-iconUp___mpXV6_1-7-2{
45
+ .magritte-iconUp___mpXV6_2-0-0{
46
46
  transform:rotate(-180deg);
47
47
  }
48
48
  @media (prefers-reduced-motion: no-preference){
49
- .magritte-icon___kO3Fj_1-7-2{
49
+ .magritte-icon___kO3Fj_2-0-0{
50
50
  transition-property:transform;
51
51
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-2-1);
52
52
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-1);
53
53
  }
54
54
  }
55
- .magritte-content___ZRc6R_1-7-2{
55
+ .magritte-content___ZRc6R_2-0-0{
56
56
  flex-grow:1;
57
57
  }
58
- .magritte-with-shift___ZErxZ_1-7-2{
58
+ .magritte-with-shift___ZErxZ_2-0-0{
59
59
  margin-left:-36px;
60
60
  }
61
- .magritte-with-indent___MH9Vy_1-7-2{
61
+ .magritte-with-indent___MH9Vy_2-0-0{
62
62
  margin-left:36px;
63
63
  }
64
- .magritte-item___2LtOL_1-7-2 > .magritte-children___kq-eq_1-7-2{
64
+ .magritte-item___2LtOL_2-0-0 > .magritte-children___kq-eq_2-0-0{
65
65
  padding-left:36px;
66
66
  }
67
- .magritte-item___2LtOL_1-7-2.magritte-with-two-boxes___LWOy2_1-7-2 > .magritte-children___kq-eq_1-7-2{
67
+ .magritte-item___2LtOL_2-0-0.magritte-with-two-boxes___LWOy2_2-0-0 > .magritte-children___kq-eq_2-0-0{
68
68
  padding-left:72px;
69
69
  }
70
- .magritte-item___2LtOL_1-7-2.magritte-with-three-boxes___cyVao_1-7-2 > .magritte-children___kq-eq_1-7-2{
70
+ .magritte-item___2LtOL_2-0-0.magritte-with-three-boxes___cyVao_2-0-0 > .magritte-children___kq-eq_2-0-0{
71
71
  padding-left:108px;
72
72
  }
73
- .magritte-children___kq-eq_1-7-2{
73
+ .magritte-children___kq-eq_2-0-0{
74
74
  transition-property:height, opacity;
75
75
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
76
76
  overflow:hidden;
@@ -78,20 +78,20 @@
78
78
  transition-duration:var(--animation-duration);
79
79
  }
80
80
  @media (prefers-reduced-motion: no-preference){
81
- .magritte-children___kq-eq_1-7-2{
81
+ .magritte-children___kq-eq_2-0-0{
82
82
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
83
83
  }
84
84
  }
85
- .magritte-item-animation-enter___14KlM_1-7-2{
85
+ .magritte-item-animation-enter___14KlM_2-0-0{
86
86
  opacity:0;
87
87
  }
88
- .magritte-item-animation-enter-active___oEWbW_1-7-2{
88
+ .magritte-item-animation-enter-active___oEWbW_2-0-0{
89
89
  opacity:1;
90
90
  }
91
- .magritte-item-animation-exit___a-Low_1-7-2{
91
+ .magritte-item-animation-exit___a-Low_2-0-0{
92
92
  opacity:1;
93
93
  }
94
- .magritte-item-animation-exit-active___MhBnn_1-7-2{
94
+ .magritte-item-animation-exit-active___MhBnn_2-0-0{
95
95
  opacity:0;
96
96
  }
97
97
 
@@ -99,7 +99,7 @@
99
99
  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
100
100
  --magritte-semantic-animation-ease-in-out-200-duration-v18-2-1:200ms;
101
101
  }
102
- .magritte-item-animation-timeout___Pdli9_1-7-2{
102
+ .magritte-item-animation-timeout___Pdli9_2-0-0{
103
103
  transition-property:height, opacity;
104
104
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
105
105
  overflow:hidden;
@@ -107,7 +107,7 @@
107
107
  transition-duration:var(--animation-duration);
108
108
  }
109
109
  @media (prefers-reduced-motion: no-preference){
110
- .magritte-item-animation-timeout___Pdli9_1-7-2{
110
+ .magritte-item-animation-timeout___Pdli9_2-0-0{
111
111
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
112
112
  }
113
113
  }
package/index.d.ts CHANGED
@@ -1,4 +1,10 @@
1
+ import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';
2
+ import ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';
1
3
  export * from '@hh.ru/magritte-ui-tree-selector/TreeSelector';
2
4
  export * from '@hh.ru/magritte-ui-tree-selector/TreeSelectorDummy';
3
5
  export * from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';
4
6
  export * from '@hh.ru/magritte-ui-tree-selector/types';
7
+ export * from '@hh.ru/magritte-ui-tree-selector/collection/types';
8
+ export * from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';
9
+ export * from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';
10
+ export { TreeCollection, ImmutableSelectionStrategy };
package/index.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import './index.css';
2
+ export { default as TreeCollection } from './collection/treeCollection.js';
3
+ export { default as ImmutableSelectionStrategy } from './strategy/immutableSelectionStrategy.js';
2
4
  export { TreeSelector } from './TreeSelector.js';
3
5
  export { TreeSelectorDummy, TreeSelectorDummyComponent } from './TreeSelectorDummy.js';
4
6
  export { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
5
- import 'react/jsx-runtime';
6
- import 'react';
7
- import './strategy/immutableSelectionStrategy.js';
7
+ export { filterMissingIds, filterParents, filterUniqueLeavesOnly, filterWithParents, fromTree, getIdsWithNoParentsInSameList, walk } from './collection/treeCollectionHelper.js';
8
8
  import './strategy/selectionStrategy.js';
9
- import './collection/treeCollectionHelper.js';
10
- import './collection/treeCollection.js';
11
9
  import './strategy/createSingleValueToggler.js';
12
10
  import './strategy/createTreeCollectionToggler.js';
13
11
  import './strategy/dummyToggle.js';
12
+ import 'react/jsx-runtime';
13
+ import 'react';
14
14
  import './useDisabled.js';
15
15
  import './useSelected.js';
16
16
  import '@hh.ru/magritte-common-fuzzy-search';
@@ -20,7 +20,7 @@ import './ItemsList.js';
20
20
  import './Item.js';
21
21
  import 'react-transition-group';
22
22
  import 'classnames';
23
- import './ItemContent-DTNfuJTc.js';
23
+ import './ItemContent-CKb4RKWy.js';
24
24
  import '@hh.ru/magritte-common-keyboard';
25
25
  import '@hh.ru/magritte-ui-icon/icon';
26
26
  import './Action.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tree-selector",
3
- "version": "1.7.2",
3
+ "version": "2.0.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -30,7 +30,7 @@
30
30
  "@hh.ru/magritte-ui-checkable-card": "3.0.14",
31
31
  "@hh.ru/magritte-ui-checkbox-radio": "3.0.5",
32
32
  "@hh.ru/magritte-ui-icon": "7.1.9",
33
- "@hh.ru/magritte-ui-input": "5.0.27",
33
+ "@hh.ru/magritte-ui-input": "5.0.28",
34
34
  "@hh.ru/magritte-ui-mock-component": "1.0.11",
35
35
  "@hh.ru/magritte-ui-spacing": "2.0.25",
36
36
  "@hh.ru/magritte-ui-theme-provider": "1.1.25",
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "972bfd4870014387ce9b27bfef00ff9d03577381"
47
+ "gitHead": "1cc9ec6e1f236ae1d462d053443baf57bd352e16"
48
48
  }
package/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ReactElement, ReactNode } from 'react';
2
+ import { SearchInputProps } from '@hh.ru/magritte-ui-input';
2
3
  import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';
3
4
  import { AdditionalDefault, IdCollectionPredicate, TreeFilter, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';
4
5
  interface ChildrenProps {
5
6
  renderTreeSelector: () => ReactElement;
6
- renderInput: () => ReactElement;
7
+ renderInput: (props?: SearchInputProps) => ReactElement;
7
8
  }
8
9
  interface Children {
9
10
  (props: ChildrenProps): ReactNode;
@@ -26,49 +27,80 @@ export interface RenderMobileDelimiterProps<A extends AdditionalDefault> {
26
27
  order: number;
27
28
  isSearch: boolean;
28
29
  index: number;
29
- isFirstInOrder: boolean;
30
30
  isTopLevel: boolean;
31
31
  }
32
32
  export interface RenderMobileDelimiter<A extends AdditionalDefault> {
33
33
  (props: RenderMobileDelimiterProps<A>): ReactNode;
34
34
  }
35
35
  export interface BaseTreeSelectorProps<A extends AdditionalDefault> {
36
+ /** Текущее значение */
36
37
  value: string[];
38
+ /** Коллекция */
37
39
  collection: TreeCollection<A>;
40
+ /** Можно выбрать только один элемент */
38
41
  singleChoice?: boolean;
42
+ /** Разрешает выбор только элементов без потомков */
39
43
  leavesOnly?: boolean;
44
+ /** Функция возвращает true для элементов, которые можно выбрать. При использовании
45
+ * вместе с параметром leavesOnly применяется только к элементам без потомков */
40
46
  checkSelectable?: IdCollectionPredicate;
47
+ /** Изначально открытые ID. Применяются только при инициализации */
41
48
  initialExpanded?: string[];
49
+ /** Запрещённые ID */
42
50
  disabled?: string[];
43
- expanded?: string[];
51
+ /** Обработчик изменения состояния раскрытия элементов
52
+ * В аргументах получает список id раскрытых элементов `{Array} expanded` */
44
53
  onExpand?: (expanded: string[]) => void;
54
+ /** Метод которому передаётся объект с функциями renderTreeSelector, renderInput для вывода частей компонента */
45
55
  children: Children;
56
+ /** Способ фильтрации дерева при поиске */
46
57
  treeFilter?: TreeFilter;
58
+ /** ID моделей которые предлагаются для выбора, если в поиске ничего не найдено */
47
59
  suggestedNotFound?: string[];
60
+ /** ID моделей, которые всегда будут дополнительно предлагаться для выбора, если в поиске что-то нашлось */
48
61
  constantlySuggested?: string[];
62
+ /** Обработчик изменения строки contentFilterQuery
63
+ * В аргументах получает список подходящих под запрос id и сам запрос */
49
64
  onChangeFilterQuery?: (ids: string[], query: string) => void;
65
+ /** Render функция для десктопного варианта item */
50
66
  renderItemForDesktop?: RenderItem<A>;
67
+ /** Render функция для мобильного варианта item */
51
68
  renderItem?: RenderItem<A>;
69
+ /** Render функция для мобильного варианта разделителя */
52
70
  renderMobileDelimiter?: RenderMobileDelimiter<A>;
71
+ /** Контент, который выводится, если не нашлось ни одной модели при поиске */
53
72
  contentNotFound?: ReactNode;
73
+ /** Обработчик изменения навигации в мобильном варианте
74
+ * В аргументах получает id модели, в которую перешли */
54
75
  onMobileNavigationChange?: (currentId?: string) => void;
76
+ /** Функция для получения порядка очередности для модели при поиске в мобиле */
77
+ getMobileSearchItemOrder?: (item: TreeModel<A>) => number;
78
+ /** Перевод для item выбрать родителя в мобильном варианте */
55
79
  trls: {
56
80
  selectAllParent: ReactNode;
57
81
  };
58
82
  }
59
83
  export interface DummyProps {
84
+ /** Обработчик изменения набора выбранных ID.
85
+ * В аргументах получает `{String} id`, `{Boolean} isSelected`. */
60
86
  onChange: (id: string, isSelected: boolean) => void;
61
87
  collapseToParentId?: never;
62
88
  maxSelected?: never;
63
89
  }
64
90
  type NonDummyProps = {
91
+ /** Обработчик изменения набора выбранных ID.
92
+ * В аргументах получает `{Array} allSelected`, `{String} id`, `{Boolean} isSelected`. */
65
93
  onChange: (allSelected: string[], id: string, isSelected: boolean) => void;
94
+ /** Флаг свертки до родительского id */
66
95
  collapseToParentId?: boolean;
96
+ /** Ограничение максимального количества выбранных элементов
97
+ * Используется либо с collapseToParentId, либо leavesOnly */
67
98
  maxSelected?: number;
68
99
  };
69
100
  export type TreeSelectorDummyProps<A extends AdditionalDefault> = BaseTreeSelectorProps<A> & DummyProps;
70
101
  export type TreeSelectorProps<A extends AdditionalDefault> = BaseTreeSelectorProps<A> & NonDummyProps;
71
102
  export interface ListControls {
103
+ /** Метод, возвращающий навигацию на шаг назад в мобильном варианте */
72
104
  back: () => void;
73
105
  }
74
106
  export {};
@@ -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_1-7-2","itemAnimationTimeout":"magritte-item-animation-timeout___Pdli9_1-7-2"};
4
+ var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_2-0-0","itemAnimationTimeout":"magritte-item-animation-timeout___Pdli9_2-0-0"};
5
5
 
6
6
  const useAnimationTimeout = () => {
7
7
  const [animationTimeout, setAnimationTimeout] = useState(0);
package/useExpanded.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  export declare const areEqualArrays: (arr1: string[], arr2: string[]) => boolean;
2
2
  interface UseExpandedHookProps {
3
3
  initialValue: string[];
4
- controlledExpanded?: string[];
5
4
  onExpand?: (expanded: string[]) => void;
6
5
  }
7
6
  interface UseExpandedHookReturn {
package/useExpanded.js CHANGED
@@ -11,7 +11,7 @@ const areEqualArrays = (arr1, arr2) => {
11
11
  .sort()
12
12
  .every((item, index) => item === sortArr2[index]);
13
13
  };
14
- const useExpanded = ({ initialValue, controlledExpanded, onExpand }) => {
14
+ const useExpanded = ({ initialValue, onExpand }) => {
15
15
  const [expanded, setExpanded] = useState(initialValue);
16
16
  const expandedRef = useRef(initialValue);
17
17
  const handlerRef = useRef(onExpand);
@@ -38,11 +38,6 @@ const useExpanded = ({ initialValue, controlledExpanded, onExpand }) => {
38
38
  useEffect(() => {
39
39
  expandedRef.current = expanded;
40
40
  }, [expanded]);
41
- useEffect(() => {
42
- if (controlledExpanded) {
43
- handleSetExpanded(controlledExpanded.slice());
44
- }
45
- }, [controlledExpanded, handleSetExpanded]);
46
41
  return { expanded, setExpanded: handleSetExpanded, handleExpansion };
47
42
  };
48
43
 
@@ -1 +1 @@
1
- {"version":3,"file":"useExpanded.js","sources":["../src/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const areEqualArrays = (arr1: string[], arr2: string[]): boolean => {\n if (arr1.length !== arr2.length) {\n return false;\n }\n const sortArr2 = arr2.slice().sort();\n return arr1\n .slice()\n .sort()\n .every((item, index) => item === sortArr2[index]);\n};\n\ninterface UseExpandedHookProps {\n initialValue: string[];\n controlledExpanded?: string[];\n onExpand?: (expanded: string[]) => void;\n}\n\ninterface UseExpandedHookReturn {\n expanded: string[];\n setExpanded: (expanded: string[]) => void;\n handleExpansion: (id: string) => void;\n}\ninterface UseExpandedHook {\n (props: UseExpandedHookProps): UseExpandedHookReturn;\n}\n\nexport const useExpanded: UseExpandedHook = ({ initialValue, controlledExpanded, onExpand }) => {\n const [expanded, setExpanded] = useState(initialValue);\n const expandedRef = useRef(initialValue);\n const handlerRef = useRef(onExpand);\n\n const handleSetExpanded = useCallback((updatedExpanded: string[]) => {\n handlerRef.current?.(updatedExpanded.slice());\n\n if (!areEqualArrays(expandedRef.current, updatedExpanded)) {\n setExpanded(updatedExpanded);\n }\n }, []);\n\n const handleExpansion = useCallback(\n (id: string): void => {\n let updatedExpanded;\n if (expandedRef.current.includes(id)) {\n updatedExpanded = expandedRef.current.filter((itemId) => itemId !== id);\n } else {\n updatedExpanded = expandedRef.current.slice();\n updatedExpanded.push(id);\n }\n handleSetExpanded(updatedExpanded);\n },\n [handleSetExpanded]\n );\n\n useEffect(() => {\n handlerRef.current = onExpand;\n }, [onExpand]);\n\n useEffect(() => {\n expandedRef.current = expanded;\n }, [expanded]);\n\n useEffect(() => {\n if (controlledExpanded) {\n handleSetExpanded(controlledExpanded.slice());\n }\n }, [controlledExpanded, handleSetExpanded]);\n\n return { expanded, setExpanded: handleSetExpanded, handleExpansion };\n};\n"],"names":[],"mappings":";;MAEa,cAAc,GAAG,CAAC,IAAc,EAAE,IAAc,KAAa;AACtE,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;AAC7B,QAAA,OAAO,KAAK,CAAC;AAChB,KAAA;IACD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC;AACrC,IAAA,OAAO,IAAI;AACN,SAAA,KAAK,EAAE;AACP,SAAA,IAAI,EAAE;AACN,SAAA,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,EAAE;AAiBK,MAAM,WAAW,GAAoB,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAI;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACvD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEpC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,eAAyB,KAAI;QAChE,UAAU,CAAC,OAAO,GAAG,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC;QAE9C,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;YACvD,WAAW,CAAC,eAAe,CAAC,CAAC;AAChC,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,EAAU,KAAU;AACjB,QAAA,IAAI,eAAe,CAAC;QACpB,IAAI,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAClC,YAAA,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,EAAE,CAAC,CAAC;AAC3E,SAAA;AAAM,aAAA;AACH,YAAA,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC9C,YAAA,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5B,SAAA;QACD,iBAAiB,CAAC,eAAe,CAAC,CAAC;AACvC,KAAC,EACD,CAAC,iBAAiB,CAAC,CACtB,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC;AAClC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AACnC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,kBAAkB,EAAE;AACpB,YAAA,iBAAiB,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC,CAAC;AACjD,SAAA;AACL,KAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;AACzE;;;;"}
1
+ {"version":3,"file":"useExpanded.js","sources":["../src/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const areEqualArrays = (arr1: string[], arr2: string[]): boolean => {\n if (arr1.length !== arr2.length) {\n return false;\n }\n const sortArr2 = arr2.slice().sort();\n return arr1\n .slice()\n .sort()\n .every((item, index) => item === sortArr2[index]);\n};\n\ninterface UseExpandedHookProps {\n initialValue: string[];\n onExpand?: (expanded: string[]) => void;\n}\n\ninterface UseExpandedHookReturn {\n expanded: string[];\n setExpanded: (expanded: string[]) => void;\n handleExpansion: (id: string) => void;\n}\ninterface UseExpandedHook {\n (props: UseExpandedHookProps): UseExpandedHookReturn;\n}\n\nexport const useExpanded: UseExpandedHook = ({ initialValue, onExpand }) => {\n const [expanded, setExpanded] = useState(initialValue);\n const expandedRef = useRef(initialValue);\n const handlerRef = useRef(onExpand);\n\n const handleSetExpanded = useCallback((updatedExpanded: string[]) => {\n handlerRef.current?.(updatedExpanded.slice());\n\n if (!areEqualArrays(expandedRef.current, updatedExpanded)) {\n setExpanded(updatedExpanded);\n }\n }, []);\n\n const handleExpansion = useCallback(\n (id: string): void => {\n let updatedExpanded;\n if (expandedRef.current.includes(id)) {\n updatedExpanded = expandedRef.current.filter((itemId) => itemId !== id);\n } else {\n updatedExpanded = expandedRef.current.slice();\n updatedExpanded.push(id);\n }\n handleSetExpanded(updatedExpanded);\n },\n [handleSetExpanded]\n );\n\n useEffect(() => {\n handlerRef.current = onExpand;\n }, [onExpand]);\n\n useEffect(() => {\n expandedRef.current = expanded;\n }, [expanded]);\n\n return { expanded, setExpanded: handleSetExpanded, handleExpansion };\n};\n"],"names":[],"mappings":";;MAEa,cAAc,GAAG,CAAC,IAAc,EAAE,IAAc,KAAa;AACtE,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;AAC7B,QAAA,OAAO,KAAK,CAAC;AAChB,KAAA;IACD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC;AACrC,IAAA,OAAO,IAAI;AACN,SAAA,KAAK,EAAE;AACP,SAAA,IAAI,EAAE;AACN,SAAA,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,EAAE;AAgBW,MAAA,WAAW,GAAoB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAI;IACvE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACvD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEpC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,eAAyB,KAAI;QAChE,UAAU,CAAC,OAAO,GAAG,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC;QAE9C,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;YACvD,WAAW,CAAC,eAAe,CAAC,CAAC;AAChC,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,EAAU,KAAU;AACjB,QAAA,IAAI,eAAe,CAAC;QACpB,IAAI,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAClC,YAAA,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,EAAE,CAAC,CAAC;AAC3E,SAAA;AAAM,aAAA;AACH,YAAA,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC9C,YAAA,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5B,SAAA;QACD,iBAAiB,CAAC,eAAe,CAAC,CAAC;AACvC,KAAC,EACD,CAAC,iBAAiB,CAAC,CACtB,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC;AAClC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AACnC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;AACzE;;;;"}
@@ -1,10 +1,11 @@
1
1
  import { ReactElement } from 'react';
2
+ import { SearchInputProps } from '@hh.ru/magritte-ui-input';
2
3
  export interface UseRenderInputHook {
3
4
  (): {
4
5
  contentFilterQuery: string;
5
6
  setInputValue: (newValue: string) => void;
6
7
  handleChangeInput: (newValue: string) => void;
7
- renderInput: () => ReactElement;
8
+ renderInput: (props?: SearchInputProps) => ReactElement;
8
9
  };
9
10
  }
10
11
  export declare const useRenderInput: UseRenderInputHook;
package/useRenderInput.js CHANGED
@@ -25,8 +25,8 @@ const useRenderInput = () => {
25
25
  const setInputValue = useCallback((newValue) => {
26
26
  setValue(newValue);
27
27
  }, [setValue]);
28
- const renderInput = useCallback(() => {
29
- return jsx(SearchInput, { value: value, onChange: handleChangeInput, "data-qa": "tree-selector-search-input" });
28
+ const renderInput = useCallback((props) => {
29
+ return (jsx(SearchInput, { ...props, value: value, onChange: handleChangeInput, "data-qa": "tree-selector-search-input" }));
30
30
  }, [value, handleChangeInput]);
31
31
  return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };
32
32
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\n\nimport { useDebounce } from '@hh.ru/magritte-common-func-utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\n\nexport interface UseRenderInputHook {\n (): {\n contentFilterQuery: string;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n renderInput: () => ReactElement;\n };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n const [contentFilterQuery, setContentFilterQuery] = useState('');\n const { animationTimeout } = useAnimationTimeout();\n const [value, setValue] = useState('');\n const { isMobile } = useBreakpoint();\n\n useEffect(() => {\n setValue('');\n setContentFilterQuery('');\n }, [isMobile]);\n\n const debouncedContentFilterQuery = useDebounce(\n useCallback((newValue: string) => {\n setContentFilterQuery(newValue);\n }, []),\n animationTimeout\n );\n\n const handleChangeInput = useCallback(\n (newValue: string) => {\n debouncedContentFilterQuery(newValue);\n setValue(newValue);\n },\n [debouncedContentFilterQuery]\n );\n\n const setInputValue = useCallback(\n (newValue: string) => {\n setValue(newValue);\n },\n [setValue]\n );\n\n const renderInput = useCallback(() => {\n return <SearchInput value={value} onChange={handleChangeInput} data-qa=\"tree-selector-search-input\" />;\n }, [value, handleChangeInput]);\n\n return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,2BAA2B,GAAG,WAAW,CAC3C,WAAW,CAAC,CAAC,QAAgB,KAAI;QAC7B,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACpC,KAAC,EAAE,EAAE,CAAC,EACN,gBAAgB,CACnB,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,QAAgB,KAAI;QACjB,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,2BAA2B,CAAC,CAChC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACjC,QAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAU,SAAA,EAAA,4BAA4B,GAAG,CAAC;AAC3G,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AACjF;;;;"}
1
+ {"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\n\nimport { useDebounce } from '@hh.ru/magritte-common-func-utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput, SearchInputProps } from '@hh.ru/magritte-ui-input';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\n\nexport interface UseRenderInputHook {\n (): {\n contentFilterQuery: string;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n renderInput: (props?: SearchInputProps) => ReactElement;\n };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n const [contentFilterQuery, setContentFilterQuery] = useState('');\n const { animationTimeout } = useAnimationTimeout();\n const [value, setValue] = useState('');\n const { isMobile } = useBreakpoint();\n\n useEffect(() => {\n setValue('');\n setContentFilterQuery('');\n }, [isMobile]);\n\n const debouncedContentFilterQuery = useDebounce(\n useCallback((newValue: string) => {\n setContentFilterQuery(newValue);\n }, []),\n animationTimeout\n );\n\n const handleChangeInput = useCallback(\n (newValue: string) => {\n debouncedContentFilterQuery(newValue);\n setValue(newValue);\n },\n [debouncedContentFilterQuery]\n );\n\n const setInputValue = useCallback(\n (newValue: string) => {\n setValue(newValue);\n },\n [setValue]\n );\n\n const renderInput = useCallback(\n (props?: SearchInputProps) => {\n return (\n <SearchInput\n {...props}\n value={value}\n onChange={handleChangeInput}\n data-qa=\"tree-selector-search-input\"\n />\n );\n },\n [value, handleChangeInput]\n );\n\n return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,2BAA2B,GAAG,WAAW,CAC3C,WAAW,CAAC,CAAC,QAAgB,KAAI;QAC7B,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACpC,KAAC,EAAE,EAAE,CAAC,EACN,gBAAgB,CACnB,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,QAAgB,KAAI;QACjB,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,2BAA2B,CAAC,CAChC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAwB,KAAI;AACzB,QAAA,QACIA,GAAC,CAAA,WAAW,EACJ,EAAA,GAAA,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,aACnB,4BAA4B,EAAA,CACtC,EACJ;AACN,KAAC,EACD,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAC7B,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AACjF;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemContent-DTNfuJTc.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 { ChevronUpOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<A extends AdditionalDefault> {\n item: TreeModel<A>;\n parentId?: TreeModel<A>['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<A>;\n isSearch: boolean;\n}\n\nconst ItemContentComponent = <A 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<A>): ReactElement => {\n const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n const currentActionCount = +hasDot + +hasAction + +hasChildren;\n const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n isExpanded && onExpansion(item.id);\n event.preventDefault();\n return;\n }\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n !isExpanded && onExpansion(item.id);\n event.preventDefault();\n }\n },\n [isExpanded, onExpansion, item.id]\n );\n\n const input = hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n onKeyDown={handleExpandableKeyDown}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n />\n ) : undefined;\n\n return (\n <div className={styles.wrapper}>\n {(letter || hasLetterOnLevel) && (\n <div className={styles.letter}>\n {letter && (\n <Text typography=\"subtitle-1-semibold\" style=\"secondary\" Element=\"span\">\n {letter}\n </Text>\n )}\n </div>\n )}\n {hasDot && (\n <div className={styles.icon}>\n <DotFilledSize24 initial=\"tertiary\" />\n </div>\n )}\n\n {[...Array(neededSpacesCount).keys()].map((_, i) => (\n <div key={i} className={styles.space} />\n ))}\n\n {hasChildren && (\n <div\n className={classnames(styles.icon, styles.iconActive, {\n [styles.iconUp]: isExpanded,\n })}\n data-qa={`tree-selector-chevron-${item.id}`}\n onClick={handleExpandableClick}\n >\n <ChevronUpOutlinedSize24 initial=\"tertiary\" />\n </div>\n )}\n {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n </div>\n );\n};\n\nexport const ItemContent = memo(ItemContentComponent) as <A extends AdditionalDefault>(\n props: ItemContent<A>\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}