@salutejs/plasma-new-hope 0.340.0-canary.2314.18974837629.0 → 0.340.0-canary.2314.19043398713.0

package/cjs/components/Select/ui/TreeList/ui/Item/Item.js

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Select_tokens = require('../../../../Select.tokens.js');
+var index = require('../../../../../../utils/index.js');
 var treePathReducer = require('../../../../reducers/treePathReducer.js');
 var Select_context = require('../../../../Select.context.js');
 var Item_styles = require('./Item.styles.js');
+var isArraysEqual = require('../../../../../../utils/isArraysEqual.js');
+var useDidMountEffect = require('../../../../../../hooks/useDidMountEffect.js');
 var sizeToIconSize = require('../../../../utils/sizeToIconSize.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,7 +21,7 @@ var _StyledIndicator, _StyledIndicator2;
 var Item = function Item(_ref) {
   var _valueToPathMap$get, _item$items;
   var item = _ref.item,
-    index = _ref.index;
+    pathToItem = _ref.pathToItem;
   var label = item.label,
     value = item.value,
     disabled = item.disabled,
@@ -40,11 +44,14 @@ var Item = function Item(_ref) {
     handleCheckboxChange = _useContext.handleCheckboxChange,
     valueToPathMap = _useContext.valueToPathMap;
   var itemDisabled = Boolean(disabled || isDisabled);
+  var disabledClassName = itemDisabled ? Select_tokens.classes.dropdownItemIsDisabled : undefined;
+  var ref = React.useRef(null);
   var currentItemDepth = (((_valueToPathMap$get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap$get === void 0 ? void 0 : _valueToPathMap$get.length) || 0) - 1;
   var isCurrentLevelOpened = treePathReducer.keyExists(treePath, valueToPathMap.get(value.toString()) || []);
   var withArrowInverse = isCurrentLevelOpened ? Select_tokens.classes.arrowInverse : undefined;
-  var focusedClass = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? Select_tokens.classes.dropdownItemIsFocused : undefined;
+  var focusedClass = isArraysEqual.isArraysEqual(pathToItem, focusedPath) ? Select_tokens.classes.dropdownItemIsFocused : undefined;
   var handleClick = function handleClick(e) {
+    if (itemDisabled) return;
     if (!isLeaf) {
       dispatchTreePath({
         type: 'toggled_level',
@@ -60,8 +67,18 @@ var Item = function Item(_ref) {
     e.stopPropagation();
     handleCheckboxChange(item);
   };
+  useDidMountEffect.useDidMountEffect(function () {
+    if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [focusedClass]);
   return /*#__PURE__*/React__default.default.createElement(Item_styles.ItemWrapper, null, /*#__PURE__*/React__default.default.createElement(Item_styles.Wrapper, {
-    className: focusedClass,
+    ref: ref,
+    className: index.cx(focusedClass, disabledClassName),
     onClick: handleClick,
     variant: variant,
     role: "treeitem"
@@ -120,8 +137,8 @@ var Item = function Item(_ref) {
   }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/React__default.default.createElement(Item_styles.ChildItems, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (item, index) {
     return /*#__PURE__*/React__default.default.createElement(Item, {
       item: item,
-      index: index,
-      key: index
+      key: item.value,
+      pathToItem: [].concat(_rollupPluginBabelHelpers.toConsumableArray(pathToItem), [index])
     });
   })));
 };

package/cjs/components/Select/ui/TreeList/ui/Item/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { classes } from 'src/components/Select/Select.tokens';\nimport { sizeToIconSize } from 'src/components/Select/utils';\n\nimport { keyExists } from '../../../../reducers/treePathReducer';\nimport { Context } from '../../../../Select.context';\n\nimport { Props } from './Item.types';\nimport {\n    ItemWrapper,\n    ChildItems,\n    Offset,\n    IconWrapper,\n    StyledCheckboxWrapper,\n    StyledCheckbox,\n    StyledIndicator,\n    StyledIconDone,\n    StyledText,\n    StyledWrapper,\n    StyledCell,\n    DisclosureIconWrapper,\n    StyledArrowRight,\n    Wrapper,\n    StyledArrowLeft,\n} from './Item.styles';\n\nexport const Item: React.FC<Props> = ({ item, index }) => {\n    const { label, value, disabled, isDisabled, contentLeft, contentRight } = item;\n\n    const isLeaf = !item?.items;\n\n    const {\n        checked,\n        multiselect,\n        size,\n        variant,\n        renderItem,\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        _checkboxAppearance,\n        focusedPath,\n        treePath,\n        dispatchTreePath,\n        arrowPlacement,\n        handleItemClick,\n        handleCheckboxChange,\n        valueToPathMap,\n    } = useContext(Context);\n\n    const itemDisabled = Boolean(disabled || isDisabled);\n\n    const currentItemDepth = (valueToPathMap.get(item.value.toString())?.length || 0) - 1;\n\n    const isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);\n\n    const withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;\n\n    const focusedClass =\n        currentItemDepth === focusedPath.length - 1 && index === focusedPath?.[currentItemDepth]\n            ? classes.dropdownItemIsFocused\n            : undefined;\n\n    const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!isLeaf) {\n            dispatchTreePath({ type: 'toggled_level', value: valueToPathMap.get(value.toString()) || [] });\n        }\n\n        if (handleItemClick) {\n            handleItemClick(item, e);\n        }\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (itemDisabled) return;\n\n        e.stopPropagation();\n\n        handleCheckboxChange(item);\n    };\n\n    return (\n        <ItemWrapper>\n            <Wrapper className={focusedClass} onClick={handleClick} variant={variant} role=\"treeitem\">\n                <Offset depth={currentItemDepth} />\n\n                {arrowPlacement === 'left' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowLeft\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n\n                {multiselect && (\n                    <IconWrapper variant={variant}>\n                        <StyledCheckboxWrapper onClick={(e) => e.stopPropagation()}>\n                            <StyledCheckbox\n                                disabled={itemDisabled}\n                                checked={Boolean(checked.get(item.value))}\n                                indeterminate={checked.get(item.value) === 'indeterminate'}\n                                onChange={handleChange}\n                                appearance={_checkboxAppearance ?? 'default'}\n                            />\n                        </StyledCheckboxWrapper>\n                    </IconWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'right' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {renderItem ? (\n                    <StyledText>{renderItem(item)}</StyledText>\n                ) : (\n                    <StyledWrapper disabled={itemDisabled}>\n                        <StyledCell\n                            contentLeft={contentLeft}\n                            contentRight={contentRight}\n                            // TODO: #1548\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            title={<span>{label}</span>}\n                        />\n                    </StyledWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'left' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {arrowPlacement === 'right' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowRight\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n            </Wrapper>\n\n            {!isLeaf && isCurrentLevelOpened && (\n                <ChildItems>\n                    {item.items?.map((item, index) => {\n                        return <Item item={item} index={index} key={index} />;\n                    })}\n                </ChildItems>\n            )}\n        </ItemWrapper>\n    );\n};\n"],"names":["Item","_ref","_valueToPathMap$get","_item$items","item","index","label","value","disabled","isDisabled","contentLeft","contentRight","isLeaf","items","_useContext","useContext","Context","checked","multiselect","size","variant","renderItem","_checkboxAppearance","focusedPath","treePath","dispatchTreePath","arrowPlacement","handleItemClick","handleCheckboxChange","valueToPathMap","itemDisabled","Boolean","currentItemDepth","get","toString","length","isCurrentLevelOpened","keyExists","withArrowInverse","classes","arrowInverse","undefined","focusedClass","dropdownItemIsFocused","handleClick","e","type","handleChange","stopPropagation","React","createElement","ItemWrapper","Wrapper","className","onClick","role","Offset","depth","DisclosureIconWrapper","visibility","StyledArrowLeft","sizeToIconSize","color","IconWrapper","StyledCheckboxWrapper","StyledCheckbox","indeterminate","onChange","appearance","_StyledIndicator","StyledIndicator","view","StyledIconDone","StyledText","StyledWrapper","StyledCell","title","_StyledIndicator2","StyledArrowRight","ChildItems","map","key"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react';\nimport { classes } from 'src/components/Select/Select.tokens';\nimport { sizeToIconSize } from 'src/components/Select/utils';\nimport { isArraysEqual, cx } from 'src/utils';\nimport { useDidMountEffect } from 'src/hooks';\n\nimport { keyExists } from '../../../../reducers/treePathReducer';\nimport { Context } from '../../../../Select.context';\n\nimport { Props } from './Item.types';\nimport {\n    ItemWrapper,\n    ChildItems,\n    Offset,\n    IconWrapper,\n    StyledCheckboxWrapper,\n    StyledCheckbox,\n    StyledIndicator,\n    StyledIconDone,\n    StyledText,\n    StyledWrapper,\n    StyledCell,\n    DisclosureIconWrapper,\n    StyledArrowRight,\n    Wrapper,\n    StyledArrowLeft,\n} from './Item.styles';\n\nexport const Item: React.FC<Props> = ({ item, pathToItem }) => {\n    const { label, value, disabled, isDisabled, contentLeft, contentRight } = item;\n\n    const isLeaf = !item?.items;\n\n    const {\n        checked,\n        multiselect,\n        size,\n        variant,\n        renderItem,\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        _checkboxAppearance,\n        focusedPath,\n        treePath,\n        dispatchTreePath,\n        arrowPlacement,\n        handleItemClick,\n        handleCheckboxChange,\n        valueToPathMap,\n    } = useContext(Context);\n\n    const itemDisabled = Boolean(disabled || isDisabled);\n    const disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;\n\n    const ref = useRef<HTMLDivElement | null>(null);\n\n    const currentItemDepth = (valueToPathMap.get(item.value.toString())?.length || 0) - 1;\n\n    const isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);\n\n    const withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;\n\n    const focusedClass = isArraysEqual(pathToItem, focusedPath) ? classes.dropdownItemIsFocused : undefined;\n\n    const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (itemDisabled) return;\n\n        if (!isLeaf) {\n            dispatchTreePath({ type: 'toggled_level', value: valueToPathMap.get(value.toString()) || [] });\n        }\n\n        if (handleItemClick) {\n            handleItemClick(item, e);\n        }\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (itemDisabled) return;\n\n        e.stopPropagation();\n\n        handleCheckboxChange(item);\n    };\n\n    useDidMountEffect(() => {\n        if (focusedClass && ref?.current) {\n            ref.current.scrollIntoView({\n                behavior: 'smooth',\n                block: 'center',\n                inline: 'center',\n            });\n        }\n    }, [focusedClass]);\n\n    return (\n        <ItemWrapper>\n            <Wrapper\n                ref={ref}\n                className={cx(focusedClass, disabledClassName)}\n                onClick={handleClick}\n                variant={variant}\n                role=\"treeitem\"\n            >\n                <Offset depth={currentItemDepth} />\n\n                {arrowPlacement === 'left' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowLeft\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n\n                {multiselect && (\n                    <IconWrapper variant={variant}>\n                        <StyledCheckboxWrapper onClick={(e) => e.stopPropagation()}>\n                            <StyledCheckbox\n                                disabled={itemDisabled}\n                                checked={Boolean(checked.get(item.value))}\n                                indeterminate={checked.get(item.value) === 'indeterminate'}\n                                onChange={handleChange}\n                                appearance={_checkboxAppearance ?? 'default'}\n                            />\n                        </StyledCheckboxWrapper>\n                    </IconWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'right' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {renderItem ? (\n                    <StyledText>{renderItem(item)}</StyledText>\n                ) : (\n                    <StyledWrapper disabled={itemDisabled}>\n                        <StyledCell\n                            contentLeft={contentLeft}\n                            contentRight={contentRight}\n                            // TODO: #1548\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            title={<span>{label}</span>}\n                        />\n                    </StyledWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'left' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {arrowPlacement === 'right' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowRight\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n            </Wrapper>\n\n            {!isLeaf && isCurrentLevelOpened && (\n                <ChildItems>\n                    {item.items?.map((item, index) => {\n                        return <Item item={item} key={item.value} pathToItem={[...pathToItem, index]} />;\n                    })}\n                </ChildItems>\n            )}\n        </ItemWrapper>\n    );\n};\n"],"names":["Item","_ref","_valueToPathMap$get","_item$items","item","pathToItem","label","value","disabled","isDisabled","contentLeft","contentRight","isLeaf","items","_useContext","useContext","Context","checked","multiselect","size","variant","renderItem","_checkboxAppearance","focusedPath","treePath","dispatchTreePath","arrowPlacement","handleItemClick","handleCheckboxChange","valueToPathMap","itemDisabled","Boolean","disabledClassName","classes","dropdownItemIsDisabled","undefined","ref","useRef","currentItemDepth","get","toString","length","isCurrentLevelOpened","keyExists","withArrowInverse","arrowInverse","focusedClass","isArraysEqual","dropdownItemIsFocused","handleClick","e","type","handleChange","stopPropagation","useDidMountEffect","current","scrollIntoView","behavior","block","inline","React","createElement","ItemWrapper","Wrapper","className","cx","onClick","role","Offset","depth","DisclosureIconWrapper","visibility","StyledArrowLeft","sizeToIconSize","color","IconWrapper","StyledCheckboxWrapper","StyledCheckbox","indeterminate","onChange","appearance","_StyledIndicator","StyledIndicator","view","StyledIconDone","StyledText","StyledWrapper","StyledCell","title","_StyledIndicator2","StyledArrowRight","ChildItems","map","index","key","concat","_toConsumableArray"],"mappings":"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"}

package/cjs/index.js

@@ -40,6 +40,7 @@ var noop = require('./utils/noop.js');
 var getHeightAsNumber = require('./utils/getHeightAsNumber.js');
 var createConditionalComponent = require('./utils/createConditionalComponent.js');
 var deepCopy = require('./utils/deepCopy.js');
+var isArraysEqual = require('./utils/isArraysEqual.js');
 var fixedForwardRef = require('./utils/fixedForwardRef.js');
 var getPopoverPlacement = require('./utils/getPopoverPlacement.js');
 var initialValuesHelper = require('./utils/initialValuesHelper.js');
@@ -376,6 +377,7 @@ exports.noop = noop.noop;
 exports.getHeightAsNumber = getHeightAsNumber.getHeightAsNumber;
 exports.createConditionalComponent = createConditionalComponent.createConditionalComponent;
 exports.deepCopy = deepCopy.deepCopy;
+exports.isArraysEqual = isArraysEqual.isArraysEqual;
 exports.fixedForwardRef = fixedForwardRef.fixedForwardRef;
 exports.getPlacement = getPopoverPlacement.getPlacement;
 exports.getPlacements = getPopoverPlacement.getPlacements;

package/cjs/index.js.map

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

package/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport { createEvent } from './createEvent';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport * from './initialValuesHelper';\nexport { noop } from './noop';\nexport { getHeightAsNumber } from './getHeightAsNumber';\nexport { createConditionalComponent } from './createConditionalComponent';\nexport { deepCopy } from './deepCopy';\n\nexport const cx = (...classes: (string | boolean | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n\nexport { fixedForwardRef } from './fixedForwardRef';\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;AAkBaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAAuCF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAEzGC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport { createEvent } from './createEvent';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport * from './initialValuesHelper';\nexport { noop } from './noop';\nexport { getHeightAsNumber } from './getHeightAsNumber';\nexport { createConditionalComponent } from './createConditionalComponent';\nexport { deepCopy } from './deepCopy';\nexport { isArraysEqual } from './isArraysEqual';\n\nexport const cx = (...classes: (string | boolean | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n\nexport { fixedForwardRef } from './fixedForwardRef';\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;AAmBaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAAuCF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAEzGC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;"}

package/cjs/utils/isArraysEqual.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isArraysEqual = function isArraysEqual(a, b) {
+  return a.length === b.length && a.every(function (val, i) {
+    return val === b[i];
+  });
+};
+
+exports.isArraysEqual = isArraysEqual;
+//# sourceMappingURL=isArraysEqual.js.map

package/cjs/utils/isArraysEqual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isArraysEqual.js","sources":["../../src/utils/isArraysEqual.ts"],"sourcesContent":["export const isArraysEqual = (a: any[], b: any[]) => {\n    return a.length === b.length && a.every((val, i) => val === b[i]);\n};\n"],"names":["isArraysEqual","a","b","length","every","val","i"],"mappings":";;;;AAAO,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,CAAQ,EAAEC,CAAQ,EAAK;AACjD,EAAA,OAAOD,CAAC,CAACE,MAAM,KAAKD,CAAC,CAACC,MAAM,IAAIF,CAAC,CAACG,KAAK,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAA;AAAA,IAAA,OAAKD,GAAG,KAAKH,CAAC,CAACI,CAAC,CAAC,CAAA;GAAC,CAAA,CAAA;AACrE;;;;"}

package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -267,7 +267,9 @@ var comboboxRoot = function(Root) {
         }, [
             items
         ]), 3), valueToCheckedMap = _useMemo[0], valueToItemMap = _useMemo[1], valueToPathMap = _useMemo[2];
+        // Состояние поля поиска в target
         var _useState = _sliced_to_array((0, _react.useState)((0, _utils2.getTextValue)(multiple, outerValue, valueToItemMap, renderValue)), 2), textValue = _useState[0], setTextValue = _useState[1];
+        // Внутреннее состояние выбранных элементов
         var _useState1 = _sliced_to_array((0, _react.useState)(multiple ? [] : ''), 2), internalValue = _useState1[0], setInternalValue = _useState1[1];
         var value = outerValue !== null && outerValue !== undefined ? outerValue : internalValue;
         var rootRef = (0, _react.useRef)(null);
@@ -306,8 +308,6 @@ var comboboxRoot = function(Root) {
                 return;
             }
             handleListToggle(false);
-            // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
-            setTextValue((0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue));
         }, [
             floatingPopoverRef,
             listWrapperRef
@@ -384,6 +384,8 @@ var comboboxRoot = function(Root) {
                 dispatchTreePath({
                     type: 'reset'
                 });
+                // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
+                setTextValue((0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue));
                 // Скроллим чипы к левому краю при закрытии компонента
                 var el = rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelector('.input-scrollable-wrapper');
                 if (multiple && value.length > 0 && el) {
@@ -546,7 +548,12 @@ var comboboxRoot = function(Root) {
             multiple: multiple,
             value: value,
             textValue: textValue,
-            valueToItemMap: valueToItemMap
+            valueToItemMap: valueToItemMap,
+            treePath: treePath,
+            dispatchTreePath: dispatchTreePath,
+            treeView: treeView,
+            valueToPathMap: valueToPathMap,
+            items: filteredItems
         }).onKeyDown;
         // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.
         // Пример: когда юзер очистил value извне, тогда нужно пройтись по элементам и выключить все чекбоксы.
@@ -611,11 +618,17 @@ var comboboxRoot = function(Root) {
         // Эффект для раскрытия дерева при поиске.
         (0, _react.useLayoutEffect)(function() {
             if (treeView) {
+                // Если пользователь выбирает элемент, то выходим из эффекта.
+                if (textValue === (0, _utils2.getTextValue)(multiple, value, valueToItemMap, renderValue)) {
+                    return;
+                }
+                // Если поле ввода стало пустым, то скрывает все узлы дерева.
                 if (textValue === '') {
                     dispatchTreePath({
                         type: 'reset'
                     });
                 } else {
+                    // Иначе раскрываем все узлы, когда пользователь начинает вводить текст в поле ввода.
                     dispatchTreePath({
                         type: 'expand_all',
                         value: filteredItems

package/emotion/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js

@@ -20,6 +20,32 @@ _export(exports, {
     }
 });
 var _utils = require("../../../../utils");
+var _reducers = require("../../../Select/reducers");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 var JUMP_SIZE = 10;
 var keys = {
     Enter: 'Enter',
@@ -43,6 +69,51 @@ var getItemByFocused = function(focusedPath, focusedToValueMap) {
     return focusedToValueMap.get(focusedPathAsString);
 };
 var useKeyNavigation = function(param) {
+    var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, setTextValue = param.setTextValue, multiple = param.multiple, value = param.value, textValue = param.textValue, valueToItemMap = param.valueToItemMap, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, treeView = param.treeView, valueToPathMap = param.valueToPathMap, items = param.items;
+    if (treeView) {
+        return keyboardNavigationTree({
+            focusedPath: focusedPath,
+            dispatchFocusedPath: dispatchFocusedPath,
+            path: path,
+            dispatchPath: dispatchPath,
+            pathMap: pathMap,
+            focusedToValueMap: focusedToValueMap,
+            handleListToggle: handleListToggle,
+            handlePressDown: handlePressDown,
+            setTextValue: setTextValue,
+            multiple: multiple,
+            value: value,
+            textValue: textValue,
+            valueToItemMap: valueToItemMap,
+            treePath: treePath,
+            dispatchTreePath: dispatchTreePath,
+            treeView: treeView,
+            valueToPathMap: valueToPathMap,
+            items: items
+        });
+    }
+    return keyboardNavigationDefault({
+        focusedPath: focusedPath,
+        dispatchFocusedPath: dispatchFocusedPath,
+        path: path,
+        dispatchPath: dispatchPath,
+        pathMap: pathMap,
+        focusedToValueMap: focusedToValueMap,
+        handleListToggle: handleListToggle,
+        handlePressDown: handlePressDown,
+        setTextValue: setTextValue,
+        multiple: multiple,
+        value: value,
+        textValue: textValue,
+        valueToItemMap: valueToItemMap,
+        treePath: treePath,
+        dispatchTreePath: dispatchTreePath,
+        treeView: treeView,
+        valueToPathMap: valueToPathMap,
+        items: items
+    });
+};
+var keyboardNavigationDefault = function(param) {
     var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, setTextValue = param.setTextValue, multiple = param.multiple, value = param.value, textValue = param.textValue, valueToItemMap = param.valueToItemMap;
     var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
     var currentLength = pathMap.get(path === null || path === void 0 ? void 0 : path[focusedPath.length - 1]) || 0;
@@ -301,3 +372,244 @@ var useKeyNavigation = function(param) {
         onKeyDown: onKeyDown
     };
 };
+var keyboardNavigationTree = function(param) {
+    var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, setTextValue = param.setTextValue, multiple = param.multiple, value = param.value, textValue = param.textValue, valueToItemMap = param.valueToItemMap, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, valueToPathMap = param.valueToPathMap, items = param.items;
+    var _currentItem_parent_items, _currentItem_parent;
+    var currentItem = getItemByFocused(focusedPath, focusedToValueMap);
+    var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
+    var currentLength = (currentItem === null || currentItem === void 0 ? void 0 : (_currentItem_parent = currentItem.parent) === null || _currentItem_parent === void 0 ? void 0 : (_currentItem_parent_items = _currentItem_parent.items) === null || _currentItem_parent_items === void 0 ? void 0 : _currentItem_parent_items.length) || pathMap.get('root') || 0;
+    var isValidFocus = function(focusCandidate) {
+        if (!Array.isArray(items) || !Array.isArray(focusCandidate)) return false;
+        var currentLevel = items;
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = focusCandidate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var index = _step.value;
+                if (!Array.isArray(currentLevel) || index >= currentLevel.length) {
+                    return false;
+                }
+                var node = currentLevel[index];
+                currentLevel = node.items || [];
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        return true;
+    };
+    var onKeyDown = function(event) {
+        switch(event.code){
+            case keys.ArrowUp:
+                {
+                    if (path[0]) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                    /**
+                 * Если список открыт и фокус уже установлен на каком-либо элементе.
+                 * */ if (focusedPath.length) {
+                        /**
+                     * Если это не первый элемент, то нужно вначале найти элемент для фокуса.
+                     * Т.к. если верхний элемент раскрыт, то и перемещаться нужно не на него,
+                     * а на его самый нижний дочерний элемент.
+                     * */ if (currentIndex > 0) {
+                            var nextFocus = _to_consumable_array(focusedPath.slice(0, -1)).concat([
+                                currentIndex - 1
+                            ]);
+                            for(var i = 0; i <= focusedPath.length; i++){
+                                var focusedPathAsString = nextFocus.reduce(function(acc, n) {
+                                    return "".concat(acc, "/").concat(n);
+                                }, '').replace(/^(\/)/, '');
+                                var item = focusedToValueMap.get(focusedPathAsString);
+                                var isLevelOpened = (0, _reducers.keyExists)(treePath, valueToPathMap.get(item === null || item === void 0 ? void 0 : item.value.toString()) || []);
+                                if (isLevelOpened) {
+                                    var _item_items;
+                                    nextFocus = _to_consumable_array(nextFocus).concat([
+                                        ((item === null || item === void 0 ? void 0 : (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.length) || 0) - 1
+                                    ]);
+                                } else {
+                                    break;
+                                }
+                            }
+                            dispatchFocusedPath({
+                                type: 'set_focus',
+                                value: nextFocus
+                            });
+                        } else {
+                            /**
+                         * Если элемент первый, то нужно лишь подняться к его родителю.
+                         * */ dispatchFocusedPath({
+                                type: 'return_prev_focus'
+                            });
+                        }
+                    } else {
+                        /**
+                     * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
+                     * */ dispatchPath({
+                            type: 'opened_first_level'
+                        });
+                        dispatchFocusedPath({
+                            type: 'set_initial_focus'
+                        });
+                        handleListToggle(true);
+                    }
+                    break;
+                }
+            case keys.ArrowDown:
+                {
+                    if (path[0]) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                    /**
+                 * Если список открыт и фокус уже установлен на каком-либо элементе.
+                 * */ if (focusedPath.length) {
+                        /**
+                     * Заходим сюда если у элемента есть другие вложенные элементы.
+                     * */ if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.items) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.items.length)) {
+                            var isCurrentLevelOpened = (0, _reducers.keyExists)(treePath, valueToPathMap.get(currentItem.value.toString()) || []);
+                            /**
+                         * Если у этого элемента открыт его дочерний список,
+                         * то устанавливаем фокус на первый элемент из этого списка
+                         * и сразу же выходим из обработчика события.
+                         * */ if (isCurrentLevelOpened) {
+                                dispatchFocusedPath({
+                                    type: 'add_focus',
+                                    value: 0
+                                });
+                                break;
+                            }
+                        }
+                        /**
+                     * Если мы еще не достигли конца списка, то движемся к следующему элементу.
+                     * */ if (currentIndex + 1 < currentLength) {
+                            dispatchFocusedPath({
+                                type: 'change_last_focus',
+                                value: currentIndex + 1
+                            });
+                        } else {
+                            /**
+                         * Если же достигли последнего элемента на текущем уровне, то нужно определить,
+                         * на какой из элементов ниже мы перейдем.
+                         * Переход фокуса отсюда может быть только на уровни выше, при чем сразу на несколько.
+                         * */ var focusCandidate = _to_consumable_array(focusedPath);
+                            var nextFocus1 = null;
+                            while(focusCandidate.length > 1){
+                                focusCandidate = _to_consumable_array(focusCandidate.slice(0, -2)).concat([
+                                    (focusCandidate.at(-2) || 0) + 1
+                                ]);
+                                if (isValidFocus(focusCandidate)) {
+                                    nextFocus1 = focusCandidate;
+                                    break;
+                                }
+                            }
+                            if (nextFocus1) {
+                                dispatchFocusedPath({
+                                    type: 'set_focus',
+                                    value: nextFocus1
+                                });
+                            } else {
+                                break;
+                            }
+                        }
+                    } else {
+                        /**
+                     * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
+                     * */ dispatchPath({
+                            type: 'opened_first_level'
+                        });
+                        dispatchFocusedPath({
+                            type: 'set_initial_focus'
+                        });
+                        handleListToggle(true);
+                    }
+                    break;
+                }
+            case keys.ArrowLeft:
+                {
+                    if (path[0]) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        if (focusedPath.length) {
+                            dispatchTreePath({
+                                type: 'close_level',
+                                value: valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []
+                            });
+                        }
+                    }
+                    break;
+                }
+            case keys.ArrowRight:
+                {
+                    if (path[0]) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        if (!focusedPath.length || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.disabled) || !(currentItem === null || currentItem === void 0 ? void 0 : currentItem.items)) {
+                            break;
+                        }
+                        dispatchTreePath({
+                            type: 'open_level',
+                            value: valueToPathMap.get(currentItem.value.toString()) || []
+                        });
+                    }
+                    break;
+                }
+            case keys.Enter:
+                {
+                    event.preventDefault();
+                    if (!currentItem || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.disabled)) {
+                        break;
+                    }
+                    if (!path[0]) {
+                        dispatchPath({
+                            type: 'opened_first_level'
+                        });
+                        dispatchFocusedPath({
+                            type: 'set_initial_focus'
+                        });
+                        break;
+                    }
+                    handlePressDown(currentItem);
+                    break;
+                }
+            case keys.Tab:
+            case keys.Escape:
+                {
+                    if (path[0]) {
+                        handleListToggle(false);
+                    }
+                    if (multiple) {
+                        setTextValue('');
+                    } else if (textValue !== value) {
+                        // Проверяем, отличается ли значение в инпуте от выбранного value после нажатия Tab/Enter.
+                        // Если изменилось, то возвращаем label выбранного айтема.
+                        // Если нет выбранного элемента, то стираем значение инпута.
+                        if ((0, _utils.isEmpty)(value)) {
+                            setTextValue('');
+                        } else {
+                            var _valueToItemMap_get;
+                            setTextValue(((_valueToItemMap_get = valueToItemMap.get(value)) === null || _valueToItemMap_get === void 0 ? void 0 : _valueToItemMap_get.label) || '');
+                        }
+                    }
+                    break;
+                }
+            default:
+                {
+                    break;
+                }
+        }
+    };
+    return {
+        onKeyDown: onKeyDown
+    };
+};

package/emotion/cjs/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js

@@ -39,6 +39,10 @@ function focusedPathReducer(state, action) {
             {
                 return [];
             }
+        case 'set_focus':
+            {
+                return action.value;
+            }
         case 'set_initial_focus':
             {
                 return [
@@ -59,6 +63,9 @@ function focusedPathReducer(state, action) {
             }
         case 'return_prev_focus':
             {
+                if (state.length === 1) {
+                    return state;
+                }
                 return state.slice(0, -1);
             }
         default: