@salutejs/plasma-new-hope 0.90.0-canary.1260.9580678742.0 → 0.91.0-canary.1233.9650661962.0

package/styled-components/es/components/Select/elements/Target/elements/Button/Button.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { cx } from '../../../../../../utils';
+import { classes } from '../../../../Select.tokens';
+import { getButtonLabel } from '../../../../utils';
+import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
+export var Button = function Button(_ref) {
+  var opened = _ref.opened,
+    value = _ref.value,
+    isTargetAmount = _ref.isTargetAmount,
+    multiselect = _ref.multiselect,
+    valueToItemMap = _ref.valueToItemMap,
+    onKeyDown = _ref.onKeyDown,
+    label = _ref.label,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    renderValue = _ref.renderValue,
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap;
+  var withArrowInverse = opened ? classes.arrowInverse : undefined;
+  var iconSize = size === 'xs' ? 'xs' : 's';
+  var getActiveDescendant = function getActiveDescendant() {
+    var _focusedToValueMap$ge;
+    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+      return "".concat(acc, "/").concat(n);
+    }, '').replace(/^(\/)/, '');
+    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+  };
+  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
+    stretching: "filled",
+    onKeyDown: onKeyDown,
+    className: opened ? classes.selectWithoutBoxShadow : undefined,
+    disabled: disabled,
+    contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
+      size: iconSize,
+      color: "inherit",
+      className: cx(classes.selectTargetArrow, withArrowInverse)
+    })),
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant(),
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
+    value: value,
+    isTargetAmount: isTargetAmount,
+    multiselect: multiselect,
+    valueToItemMap: valueToItemMap,
+    label: label,
+    renderValue: renderValue
+  }))));
+};

package/styled-components/es/components/Select/elements/Target/elements/Button/Button.styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { applyEllipsis } from '../../../../../../mixins';
+import { IconDisclosureDownCentered } from '../../../../../_Icon';
+import { component, mergeConfig } from '../../../../../../engines';
+import { buttonConfig, buttonTokens } from '../../../../../Button';
+import { tokens, classes, constants } from '../../../../Select.tokens';
+var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedButtonConfig);
+export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");"], buttonTokens.buttonColor, tokens.targetButtonColor, buttonTokens.buttonColorHover, tokens.targetButtonColorHover, buttonTokens.buttonColorActive, tokens.targetButtonColorActive, buttonTokens.buttonBackgroundColor, tokens.targetButtonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.targetButtonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.targetButtonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.targetButtonArrowMargin, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetButtonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, constants.focusColor);
+export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-1"
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetButtonArrowColor, tokens.targetButtonArrowColorHover, tokens.targetButtonArrowColorActive);
+export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-2"
+})(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
+export var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-3"
+})(["display:inline;.", "::before{box-shadow:none !important;}"], classes.selectWithoutBoxShadow);
+export var Label = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-4"
+})(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/applyEllipsis(), classes.arrowInverse);

package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { cx, isEmpty } from '../../../../../../utils';
+import { classes } from '../../../../Select.tokens';
+import { Chip } from './elements/Chip/Chip';
+import { StyledButton, StyledArrow, Wrapper, ChipWrapper, TextfieldWrapper, IconArrowWrapper, Label, Placeholder, InnerLabel, InnerLabelWrapper, ContentLeftWrapper, Value } from './Textfield.styles';
+var getLabel = function getLabel(_ref) {
+  var value = _ref.value,
+    isTargetAmount = _ref.isTargetAmount,
+    valueToItemMap = _ref.valueToItemMap,
+    onChipClick = _ref.onChipClick,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    focusedChipIndex = _ref.focusedChipIndex,
+    labelPlacement = _ref.labelPlacement,
+    size = _ref.size,
+    renderValue = _ref.renderValue;
+  if (isEmpty(value)) {
+    if (!label || labelPlacement === 'outer') {
+      return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
+    }
+    return /*#__PURE__*/React.createElement(Label, null, label);
+  }
+  if (Array.isArray(value) && isTargetAmount) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      text: "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length),
+      isTargetAmount: isTargetAmount
+    });
+  }
+  if (Array.isArray(value)) {
+    return value.map(function (currentValue, index) {
+      var itemLabel = valueToItemMap.get(currentValue).label;
+      return /*#__PURE__*/React.createElement(Chip, {
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onChipClick(currentValue);
+        },
+        focused: focusedChipIndex === index
+      });
+    });
+  }
+  var itemLabel = valueToItemMap.get(value).label;
+  if (!label || labelPlacement === 'outer') {
+    return /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
+  }
+  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
+};
+export var Textfield = function Textfield(_ref2) {
+  var opened = _ref2.opened,
+    value = _ref2.value,
+    isTargetAmount = _ref2.isTargetAmount,
+    multiselect = _ref2.multiselect,
+    valueToItemMap = _ref2.valueToItemMap,
+    onChipClick = _ref2.onChipClick,
+    label = _ref2.label,
+    placeholder = _ref2.placeholder,
+    onKeyDown = _ref2.onKeyDown,
+    focusedChipIndex = _ref2.focusedChipIndex,
+    labelPlacement = _ref2.labelPlacement,
+    size = _ref2.size,
+    contentLeft = _ref2.contentLeft,
+    disabled = _ref2.disabled,
+    renderValue = _ref2.renderValue,
+    focusedPath = _ref2.focusedPath,
+    focusedToValueMap = _ref2.focusedToValueMap;
+  var withArrowInverse = opened ? classes.arrowInverse : undefined;
+  var iconSize = size === 'xs' ? 'xs' : 's';
+  var getActiveDescendant = function getActiveDescendant() {
+    var _focusedToValueMap$ge;
+    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+      return "".concat(acc, "/").concat(n);
+    }, '').replace(/^(\/)/, '');
+    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+  };
+  return /*#__PURE__*/React.createElement(TextfieldWrapper, {
+    opened: opened,
+    value: value
+  }, /*#__PURE__*/React.createElement(StyledButton, {
+    stretching: "filled",
+    className: cx(classes.textfieldTarget, opened || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
+    onKeyDown: onKeyDown,
+    disabled: disabled,
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant(),
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement(Wrapper, null, contentLeft && (!multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
+    value: value,
+    isTargetAmount: isTargetAmount,
+    valueToItemMap: valueToItemMap,
+    onChipClick: onChipClick,
+    label: label,
+    placeholder: placeholder,
+    focusedChipIndex: focusedChipIndex,
+    labelPlacement: labelPlacement,
+    size: size,
+    renderValue: renderValue
+  })), /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
+    size: iconSize,
+    color: "inherit",
+    className: cx(classes.selectTargetArrow, withArrowInverse)
+  })))));
+};

package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { isEmpty } from '../../../../../../utils';
+import { applyEllipsis, addFocus } from '../../../../../../mixins';
+import { IconDisclosureDownCentered } from '../../../../../_Icon';
+import { component, mergeConfig } from '../../../../../../engines';
+import { buttonConfig, buttonTokens } from '../../../../../Button';
+import { tokens, classes, constants } from '../../../../Select.tokens';
+var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedButtonConfig);
+export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-0"
+})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
+  var opened = _ref.opened;
+  return opened ? "var(".concat(tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(tokens.targetTextfieldBackgroundColor, ")");
+}, function (_ref2) {
+  var value = _ref2.value;
+  return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
+}, classes.selectWithoutBoxShadow);
+export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-1"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonBackgroundColor, tokens.targetTextfieldBackgroundColor, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, constants.focusColor, /*#__PURE__*/addFocus({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(tokens.focusOffset, ") * -1)"),
+  outlineSize: constants.focusSize,
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") + var(").concat(tokens.focusOffset, "))"),
+  outlineColor: constants.focusColor
+}));
+export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-2"
+})([""]);
+export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-3"
+})(["line-height:0;margin:var(", ");color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetTextfieldArrowMargin, tokens.targetTextfieldArrowColor, tokens.targetTextfieldArrowColorHover, tokens.targetTextfieldArrowColorActive);
+export var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-4"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], classes.arrowInverse);
+export var ChipWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-5"
+})(["width:100%;display:flex;min-width:0;padding:calc(", " + var(", "));gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], constants.focusSize, tokens.focusOffset, tokens.chipBorderRadius, tokens.chipBorderRadius);
+export var Label = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-6"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldInnerLabelColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var Placeholder = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-7"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldPlaceholderColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var InnerLabelWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-8"
+})(["display:flex;flex-direction:column;align-items:start;row-gap:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.innerLabelGap, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+export var InnerLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-9"
+})(["color:var(", ");font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);text-align:left;"], constants.textfieldInnerLabelColor);
+export var ContentLeftWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-10"
+})(["flex:none;margin-left:-2px;margin-right:6px;line-height:0;"]);
+export var Value = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-11"
+})(["", ""], /*#__PURE__*/applyEllipsis());

package/styled-components/es/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.js

@@ -0,0 +1,28 @@
+var _div;
+import React, { useEffect, useRef } from 'react';
+import { classes } from '../../../../../../Select.tokens';
+import { StyledChip } from './Chip.styles';
+export var Chip = function Chip(_ref) {
+  var text = _ref.text,
+    onClick = _ref.onClick,
+    focused = _ref.focused,
+    isTargetAmount = _ref.isTargetAmount;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (focused && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [focused]);
+  return /*#__PURE__*/React.createElement(StyledChip, {
+    contentClearButton: isTargetAmount && (_div || (_div = /*#__PURE__*/React.createElement("div", null))),
+    tabIndex: -1,
+    onClick: onClick,
+    text: "".concat(text),
+    className: focused ? classes.selectChipIsFocused : undefined,
+    ref: ref
+  });
+};

package/styled-components/es/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { chipConfig, chipTokens } from '../../../../../../../Chip';
+import { component, mergeConfig } from '../../../../../../../../engines';
+import { tokens, classes, constants } from '../../../../../../Select.tokens';
+import { addFocus } from '../../../../../../../../mixins';
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig);
+var Chip = /*#__PURE__*/component(mergedConfig);
+export var StyledChip = /*#__PURE__*/styled(Chip).withConfig({
+  componentId: "plasma-new-hope__sc-14rqoab-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ";"], chipTokens.color, tokens.chipColor, chipTokens.colorHover, tokens.chipColor, chipTokens.colorActive, tokens.chipColor, chipTokens.background, tokens.chipBackground, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.height, tokens.chipHeight, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.fontFamily, tokens.fontFamily, chipTokens.fontSize, tokens.fontSize, chipTokens.fontStyle, tokens.fontStyle, chipTokens.fontWeight, tokens.fontWeight, chipTokens.letterSpacing, tokens.fontLetterSpacing, chipTokens.lineHeight, tokens.fontLineHeight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.closeIconColor, tokens.chipColor, chipTokens.focusColor, constants.focusColor, /*#__PURE__*/addFocus({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(tokens.focusOffset, ") * -1)"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") + var(").concat(tokens.focusOffset, "))"),
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.selectChipIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 ").concat(constants.focusSize, " var(").concat(constants.focusColor, ");\n            }\n        ")
+}));

package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js

@@ -0,0 +1,346 @@
+var JUMP_SIZE = 10;
+export var keys = {
+  Enter: 'Enter',
+  Space: 'Space',
+  Tab: 'Tab',
+  Escape: 'Escape',
+  Backspace: 'Backspace',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  Home: 'Home',
+  End: 'End',
+  PageUp: 'PageUp',
+  PageDown: 'PageDown'
+};
+var getFurtherPath = function getFurtherPath(focusedPath, focusedToValueMap) {
+  var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+    return "".concat(acc, "/").concat(n);
+  }, '').replace(/^(\/)/, '');
+  return focusedToValueMap.get(focusedPathAsString);
+};
+export var useKeyNavigation = function useKeyNavigation(_ref) {
+  var focusedPath = _ref.focusedPath,
+    dispatchFocusedPath = _ref.dispatchFocusedPath,
+    path = _ref.path,
+    dispatchPath = _ref.dispatchPath,
+    pathMap = _ref.pathMap,
+    focusedToValueMap = _ref.focusedToValueMap,
+    handleToggle = _ref.handleToggle,
+    handlePressDown = _ref.handlePressDown,
+    focusedChipIndex = _ref.focusedChipIndex,
+    dispatchFocusedChipIndex = _ref.dispatchFocusedChipIndex,
+    value = _ref.value,
+    valueToItemMap = _ref.valueToItemMap,
+    multiselect = _ref.multiselect,
+    isTargetAmount = _ref.isTargetAmount;
+  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;
+  var onKeyDown = function onKeyDown(event) {
+    switch (event.code) {
+      case keys.ArrowUp:
+        {
+          if (focusedPath.length) {
+            if (currentIndex > 0) {
+              if (path.length > focusedPath.length) {
+                dispatchPath({
+                  type: 'removed_last_level'
+                });
+              }
+              dispatchFocusedPath({
+                type: 'change_last_focus',
+                value: currentIndex - 1
+              });
+            }
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleToggle(true);
+          }
+          if (Array.isArray(value)) {
+            dispatchFocusedChipIndex({
+              type: 'reset'
+            });
+          }
+          break;
+        }
+      case keys.ArrowDown:
+        {
+          if (focusedPath.length) {
+            if (currentIndex + 1 < currentLength) {
+              if (path.length > focusedPath.length) {
+                dispatchPath({
+                  type: 'removed_last_level'
+                });
+              }
+              dispatchFocusedPath({
+                type: 'change_last_focus',
+                value: currentIndex + 1
+              });
+            }
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleToggle(true);
+          }
+          if (Array.isArray(value)) {
+            dispatchFocusedChipIndex({
+              type: 'reset'
+            });
+          }
+          break;
+        }
+      case keys.ArrowLeft:
+        {
+          if (path[0]) {
+            if (focusedPath.length) {
+              dispatchPath({
+                type: 'removed_last_level'
+              });
+              dispatchFocusedPath({
+                type: 'return_prev_focus'
+              });
+            }
+            if (focusedPath.length === 1) {
+              handleToggle(false);
+            }
+          } else if (Array.isArray(value) && !isTargetAmount) {
+            dispatchFocusedChipIndex({
+              type: 'moveLeft'
+            });
+          }
+          break;
+        }
+      case keys.ArrowRight:
+        {
+          if (path[0]) {
+            if (!focusedPath.length) {
+              break;
+            }
+            var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
+            if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
+              if (path.length > focusedPath.length) {
+                dispatchFocusedPath({
+                  type: 'add_focus',
+                  value: 0
+                });
+              } else {
+                dispatchPath({
+                  type: 'added_next_level',
+                  value: currentItem.value.toString()
+                });
+              }
+            }
+          } else if (Array.isArray(value) && !isTargetAmount) {
+            dispatchFocusedChipIndex({
+              type: 'moveRight',
+              total: value.length
+            });
+          }
+          break;
+        }
+      case keys.Backspace:
+        {
+          if (!multiselect) break;
+          if (focusedChipIndex !== null) {
+            var _currentItem = valueToItemMap.get(value[focusedChipIndex]);
+            handlePressDown(_currentItem);
+            if (value.length === 1) {
+              dispatchFocusedChipIndex({
+                type: 'reset'
+              });
+              break;
+            }
+            if (focusedChipIndex === value.length - 1) {
+              dispatchFocusedChipIndex({
+                type: 'moveLeft'
+              });
+              break;
+            }
+          }
+          break;
+        }
+      case keys.Space:
+        {
+          event.preventDefault();
+          var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
+          if (!path[0]) {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            break;
+          }
+          if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
+            break;
+          }
+          handlePressDown(_currentItem2);
+          break;
+        }
+      case keys.Enter:
+        {
+          event.preventDefault();
+          if (Array.isArray(value)) {
+            dispatchFocusedChipIndex({
+              type: 'reset'
+            });
+          }
+          var _currentItem3 = getFurtherPath(focusedPath, focusedToValueMap);
+          if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled || _currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.disabled) {
+            break;
+          }
+          if (!path[0]) {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            break;
+          }
+          if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.items) {
+            if (path.length > focusedPath.length) {
+              dispatchFocusedPath({
+                type: 'add_focus',
+                value: 0
+              });
+            } else {
+              dispatchPath({
+                type: 'added_next_level',
+                value: _currentItem3.value.toString()
+              });
+            }
+            break;
+          }
+          handlePressDown(_currentItem3);
+          break;
+        }
+      case keys.Tab:
+      case keys.Escape:
+        {
+          dispatchFocusedPath({
+            type: 'reset'
+          });
+          dispatchPath({
+            type: 'reset'
+          });
+          dispatchFocusedChipIndex({
+            type: 'reset'
+          });
+          handleToggle(false);
+          break;
+        }
+      case keys.Home:
+        {
+          if (path[0]) {
+            if (path.length > focusedPath.length) {
+              dispatchPath({
+                type: 'removed_last_level'
+              });
+            }
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: 0
+            });
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleToggle(true);
+          }
+          break;
+        }
+      case keys.End:
+        {
+          if (path[0]) {
+            if (path.length > focusedPath.length) {
+              dispatchPath({
+                type: 'removed_last_level'
+              });
+            }
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: currentLength - 1
+            });
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: (pathMap.get('root') || 0) - 1
+            });
+            handleToggle(true);
+          }
+          break;
+        }
+      case keys.PageUp:
+        {
+          if (!path[0]) {
+            break;
+          }
+          if (path.length > focusedPath.length) {
+            dispatchPath({
+              type: 'removed_last_level'
+            });
+          }
+          if (currentIndex <= JUMP_SIZE) {
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: 0
+            });
+          } else {
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: currentIndex - JUMP_SIZE
+            });
+          }
+          break;
+        }
+      case keys.PageDown:
+        {
+          if (!path[0]) {
+            break;
+          }
+          if (path.length > focusedPath.length) {
+            dispatchPath({
+              type: 'removed_last_level'
+            });
+          }
+          if (currentLength - currentIndex <= JUMP_SIZE) {
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: currentLength - 1
+            });
+          } else {
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: currentIndex + JUMP_SIZE
+            });
+          }
+          break;
+        }
+      default:
+        {
+          break;
+        }
+    }
+  };
+  return {
+    onKeyDown: onKeyDown
+  };
+};

package/styled-components/es/components/Select/hooks/usePathMaps.js

@@ -0,0 +1,27 @@
+import { isEmpty } from '../../../utils';
+// Рекурсивно проходим по дереву items и создаем 4 мапы: открытых путей, фокусов, выбранных элементов и айтемов.
+export var usePathMaps = function usePathMaps(items) {
+  var pathMap = new Map();
+  var focusedToValueMap = new Map();
+  var valueToCheckedMap = new Map();
+  var valueToItemMap = new Map();
+  pathMap.set('root', items.length);
+  var rec = function rec(items) {
+    var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    items.forEach(function (item, index) {
+      var value = item.value,
+        innerItems = item.items;
+      var currIndex = "".concat(prevIndex, "/").concat(index).replace(/^(\/)/, '');
+      focusedToValueMap.set(currIndex, item);
+      valueToCheckedMap.set(value, false);
+      if (isEmpty(innerItems) || !innerItems) {
+        valueToItemMap.set(value, item);
+      } else {
+        pathMap.set(value, innerItems.length);
+        rec(innerItems, currIndex);
+      }
+    });
+  };
+  rec(items);
+  return [pathMap, focusedToValueMap, valueToCheckedMap, valueToItemMap];
+};

package/styled-components/es/components/Select/index.js

@@ -1,3 +1,3 @@
 export { selectRoot, selectConfig } from './Select';
-export { classes as selectClasses, tokens as selectTokens } from './Select.tokens';
-export * from './ui';
+export { tokens as selectTokens } from './Select.tokens';
+export { SelectNotFoundContent } from './elements/SelectNotFoundContent/SelectNotFoundContent';