@salutejs/plasma-new-hope 0.110.0-canary.1307.10059399396.0 → 0.110.1-canary.1233.10062283292.0

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

@@ -1,186 +1,99 @@
 export var classes = {
-  selectTarget: 'select-target',
-  selectTargeText: 'select-target-text',
-  selectTargetLabel: 'select-target-label',
+  dropdownItemIsFocused: 'dropdown-item-is-focused',
+  dropdownItemIsDisabled: 'dropdown-item-is-disabled',
+  dropdownItemIsActive: 'dropdown-item-is-active',
   selectTargetArrow: 'select-target-arrow',
   arrowInverse: 'arrow-inverse',
-  selectItemIsSelected: 'select-item-is-selected',
-  selectItemIsDisabled: 'select-item-is-disabled',
-  nativeSelectVisible: 'native-select-visible',
-  hasNoFocus: 'has-no-focus',
-  hasChips: 'has-chips',
-  innerLabelUp: 'inner-label-up'
+  textfieldTarget: 'select-textfield-target',
+  selectChipIsFocused: 'select-chip-is-focused',
+  selectWithoutBoxShadow: 'select-without-box-shadow',
+  selectItemCheckbox: 'select-item-checkbox',
+  selectSpinner: 'select-spinner'
 };
 export var tokens = {
-  background: '--plasma-select-background',
-  boxShadow: '--plasma-select-box-shadow',
-  width: '--plasma-select-width',
-  height: '--plasma-select-height',
   borderRadius: '--plasma-select-border-radius',
-  paddingTop: '--plasma-select-padding-top',
-  paddingRight: '--plasma-select-padding-right',
-  paddingBottom: '--plasma-select-padding-bottom',
-  paddingLeft: '--plasma-select-padding-left',
-  itemBackground: '--plasma-select-item-background',
-  itemColor: '--plasma-select-item-color',
-  itemBackgroundHover: '--plasma-select-item-background-hover',
-  itemBackgroundSelected: '--plasma-select-item-background-selected',
-  itemColorSelected: '--plasma-select-item-color-selected',
-  itemBackgroundSelectedHover: '--plasma-select-item-background-selected-hover',
-  itemColorSelectedHover: '--plasma-select-item-color-selected-hover',
-  itemWidth: '--plasma-select-item-width',
+  padding: '--plasma-select-padding',
+  focusOffset: '--plasma-select-focus-offset',
+  fontFamily: '--plasma-select-font-family',
+  fontSize: '--plasma-select-font-size',
+  fontStyle: '--plasma-select-font-style',
+  fontWeight: '--plasma-select-font-weight',
+  fontLetterSpacing: '--plasma-select-font-letter-spacing',
+  fontLineHeight: '--plasma-select-font-line-height',
   itemHeight: '--plasma-select-item-height',
   itemBorderRadius: '--plasma-select-item-border-radius',
-  itemPaddingTop: '--plasma-select-item-padding-top',
-  itemPaddingRight: '--plasma-select-item-padding-right',
-  itemPaddingBottom: '--plasma-select-item-padding-bottom',
-  itemPaddingLeft: '--plasma-select-item-padding-left',
-  itemMarginTop: '--plasma-select-item-margin-top',
-  itemMarginRight: '--plasma-select-item-margin-right',
-  itemMarginBottom: '--plasma-select-item-margin-bottom',
-  itemMarginLeft: '--plasma-select-item-margin-left',
-  itemFontFamily: '--plasma-select-item-font-family',
-  itemFontSize: '--plasma-select-item-font-size',
-  itemFontStyle: '--plasma-select-item-font-style',
-  itemFontWeightBold: '--plasma-select-item-letter-spacing',
-  itemFontLetterSpacing: '--plasma-select-item-line-height',
-  itemFontLineHeight: '--plasma-select-item-font-weight',
-  itemContentLeftColor: '--plasma-select-item-content-left-color',
-  itemContentRightColor: '--plasma-select-item-content-right-color',
-  itemContentLeftWidth: '--plasma-select-item-content-left-width',
-  itemContentRightWidth: '--plasma-select-item-content-right-width',
-  footerBackground: '--plasma-select-footer-background',
-  footerWidth: '--plasma-select-footer-width',
-  footerHeight: '--plasma-select-footer-height',
-  footerPaddingTop: '--plasma-select-footer-padding-top',
-  footerPaddingRight: '--plasma-select-footer-padding-right',
-  footerPaddingBottom: '--plasma-select-footer-padding-bottom',
-  footerPaddingLeft: '--plasma-select-footer-padding-left',
-  footerMarginTop: '--plasma-select-footer-margin-top',
-  footerMarginRight: '--plasma-select-footer-margin-right',
-  footerMarginBottom: '--plasma-select-footer-margin-bottom',
-  footerMarginLeft: '--plasma-select-footer-margin-left',
-  footerFontFamily: '--plasma-select-footer-font-family',
-  footerFontSize: '--plasma-select-footer-font-size',
-  footerFontStyle: '--plasma-select-footer-font-style',
-  footerFontWeightBold: '--plasma-select-footer-letter-spacing',
-  footerFontLetterSpacing: '--plasma-select-footer-line-height',
-  footerFontLineHeight: '--plasma-select-footer-font-weight',
-  headerBackground: '--plasma-select-header-background',
-  headerWidth: '--plasma-select-header-width',
-  headerHeight: '--plasma-select-header-height',
-  headerPaddingTop: '--plasma-select-header-padding-top',
-  headerPaddingRight: '--plasma-select-header-padding-right',
-  headerPaddingBottom: '--plasma-select-header-padding-bottom',
-  headerPaddingLeft: '--plasma-select-header-padding-left',
-  headerMarginTop: '--plasma-select-header-margin-top',
-  headerMarginRight: '--plasma-select-header-margin-right',
-  headerMarginBottom: '--plasma-select-header-margin-bottom',
-  headerMarginLeft: '--plasma-select-header-margin-left',
-  headerFontFamily: '--plasma-select-header-font-family',
-  headerFontSize: '--plasma-select-header-font-size',
-  headerFontStyle: '--plasma-select-header-font-style',
-  headerFontWeightBold: '--plasma-select-header-letter-spacing',
-  headerFontLetterSpacing: '--plasma-select-header-line-height',
-  headerFontLineHeight: '--plasma-select-header-font-weight',
-  dividerColor: '--plasma-select-divider-color',
-  dividerWidth: '--plasma-select-divider-width',
-  dividerHeight: '--plasma-select-divider-height',
-  dividerMarginTop: '--plasma-select-divider-margin-top',
-  dividerMarginRight: '--plasma-select-divider-margin-right',
-  dividerMarginBottom: '--plasma-select-divider-margin-bottom',
-  dividerMarginLeft: '--plasma-select-divider-margin-left',
-  groupBackground: '--plasma-select-group-background',
-  groupWidth: '--plasma-select-group-width',
-  groupHeight: '--plasma-select-group-height',
-  groupPaddingTop: '--plasma-select-group-padding-top',
-  groupPaddingRight: '--plasma-select-group-padding-right',
-  groupPaddingBottom: '--plasma-select-group-padding-bottom',
-  groupPaddingLeft: '--plasma-select-group-padding-left',
-  groupMarginTop: '--plasma-select-group-margin-top',
-  groupMarginRight: '--plasma-select-group-margin-right',
-  groupMarginBottom: '--plasma-select-group-margin-bottom',
-  groupMarginLeft: '--plasma-select-group-margin-left',
-  groupLabelColor: '--plasma-select-group-label-color',
-  groupLabelFontFamily: '--plasma-select-group-label-font-family',
-  groupLabelFontSize: '--plasma-select-group-label-font-size',
-  groupLabelFontStyle: '--plasma-select-group-label-font-style',
-  groupLabelFontWeight: '--plasma-select-group-label-font-weight',
-  groupLabelLetterSpacing: '--plasma-select-group-label-letter-spacing',
-  groupLabelLineHeight: '--plasma-select-group-label-line-height',
-  groupLabelPaddingTop: '--plasma-select-group-label-padding-top',
-  groupLabelPaddingRight: '--plasma-select-group-label-padding-right',
-  groupLabelPaddingBottom: '--plasma-select-group-label-padding-bottom',
-  groupLabelPaddingLeft: '--plasma-select-group-label-padding-left',
-  groupLabelMarginTop: '--plasma-select-group-label-margin-top',
-  groupLabelMarginRight: '--plasma-select-group-label-margin-right',
-  groupLabelMarginBottom: '--plasma-select-group-label-margin-bottom',
-  groupLabelMarginLeft: '--plasma-select-group-label-margin-left',
-  targetColor: '--plasma-select-target-color',
-  targetLabelColor: '--plasma-select-target-label-color',
-  targetArrowColor: '--plasma-select-target-arrow-color',
-  targetArrowRight: '--plasma-select-target-arrow-right',
-  targetBackgroundColor: '--plasma-select-target-background-color',
-  targetBackgroundColorHover: '--plasma-select-target-background-color-hover',
-  targetBackgroundColorActive: '--plasma-select-target-background-color-active',
-  targetBackgroundColorOpen: '--plasma-select-target-background-color-open',
-  targetBorderColor: '--plasma-select-target-border-color',
-  targetBorderColorHover: '--plasma-select-target-border-color-hover',
-  targetBorderColorActive: '--plasma-select-target-border-color-active',
-  targetBorderColorOpen: '--plasma-select-target-border-color-open',
-  targetInnerTop: '--plasma-select-target-inner-top',
-  targetPadding: '--plasma-select-target-padding',
-  targetPaddingWithInput: '--plasma-select-target-with-input',
-  targetPaddingHasChips: '--plasma-select-target-padding-has-chips',
+  itemPadding: '--plasma-select-item-padding',
+  itemPaddingTight: '--plasma-select-item-padding-tight',
+  itemIconSize: '--plasma-select-item-icon-size',
+  itemIconSizeTight: '--plasma-select-item-icon-size-tight',
+  itemIconMargin: '--plasma-select-item-icon-margin',
+  checkboxTriggerSize: '--plasma-select-checkbox-trigger-size',
+  checkboxTriggerSizeTight: '--plasma-select-checkbox-trigger-size-tight',
+  checkboxTriggerBorderRadius: '--plasma-select-checkbox-trigger-border-radius',
+  checkboxTriggerBorderRadiusTight: '--plasma-select-checkbox-trigger-border-radius-tight',
+  checkboxFillColor: '--plasma-select-checkbox-fill-color',
+  checkboxIconColor: '--plasma-select-checkbox-icon-color',
+  checkboxTriggerBorderColor: '--plasma-select-checkbox-trigger-border-color',
+  indicatorSize: '--plasma-select-indicator-size',
+  targetButtonColor: '--plasma-select-target-button-color',
+  targetButtonColorHover: '--plasma-select-target-button-color-hover',
+  targetButtonColorActive: '--plasma-select-target-button-color-active',
+  targetButtonArrowColor: '--plasma-select-target-button-arrow-color',
+  targetButtonArrowColorHover: '--plasma-select-target-button-arrow-color-hover',
+  targetButtonArrowColorActive: '--plasma-select-target-button-arrow-color-active',
+  targetTextfieldArrowColor: '--plasma-select-target-textfield-arrow-color',
+  targetTextfieldArrowColorHover: '--plasma-select-target-textfield-arrow-color-hover',
+  targetTextfieldArrowColorActive: '--plasma-select-target-textfield-arrow-color-active',
+  targetButtonArrowMargin: '--plasma-select-target-button-arrow-margin',
+  targetTextfieldArrowMargin: '--plasma-select-target-textfield-arrow-margin',
+  targetButtonBackgroundColor: '--plasma-select-target-button-background-color',
+  targetButtonBackgroundColorHover: '--plasma-select-target-button-background-color-hover',
+  targetButtonBackgroundColorActive: '--plasma-select-target-button-background-color-active',
+  targetTextfieldBackgroundColor: '--plasma-select-target-textfield-background-color',
+  targetTextfieldBackgroundColorOpened: '--plasma-select-target-textfield-background-color-opened',
+  targetTextfieldBorderColor: '--plasma-select-target-textfield-border-color',
+  targetButtonPadding: '--plasma-select-target-button-padding',
+  targetTextfieldPadding: '--plasma-select-target-textfield-padding',
+  targetTextfieldChipPadding: '--plasma-select-target-textfield-chip-padding',
   targetHeight: '--plasma-select-target-height',
-  targetWidth: '--plasma-select-target-width',
-  targetRadius: '--plasma-select-target-radius',
-  targetFontFamily: '--plasma-select-target-font-family',
-  targetFontSize: '--plasma-select-target-font-size',
-  targetFontStyle: '--plasma-select-target-font-style',
-  targetFontWeight: '--plasma-select-target-font-weight',
-  targetLetterSpacing: '--plasma-select-target-letter-spacing',
-  targetLineHeight: '--plasma-select-target-line-height',
-  targetLabelInnerTop: '--plasma-select-target-label-inner-top',
-  targetLabelInnerFontFamily: '--plasma-select-target-label-inner-font-family',
-  targetLabelInnerFontSize: '--plasma-select-target-label-inner-font-family',
-  targetLabelInnerFontStyle: '--plasma-select-target-label-inner-font-style',
-  targetLabelInnerFontWeight: '--plasma-select-target-label-inner-font-weight',
-  targetLabelInnerLetterSpacing: '--plasma-select-target-label-inner-letter-spacing',
-  targetLabelInnerLineHeight: '--plasma-select-target-label-inner-line-height',
-  chipGap: '--plasma-select-chip-gap',
-  chipBackground: '--plasma-select-chip-background',
   chipColor: '--plasma-select-chip-color',
+  chipBackground: '--plasma-select-chip-background',
   chipBackgroundHover: '--plasma-select-chip-background-hover',
-  chipColorHover: '--plasma-select-chip-color-hover',
-  chipScaleHover: '--plasma-select-chip-scale-hover',
-  chipBackgroundReadOnly: '--plasma-select-chip-background-readonly',
-  chipColorReadOnly: '--plasma-select-chip-color-readonly',
-  chipBackgroundReadOnlyHover: '--plasma-select-chip-background-readonly-hover',
-  chipColorReadOnlyHover: '--plasma-select-chip-color-readonly-hover',
   chipBackgroundActive: '--plasma-select-chip-background-active',
-  chipColorActive: '--plasma-select-chip-color-active',
-  chipScaleActive: '--plasma-select-chip-scale-active',
-  chipFocusColor: '--plasma-select-chip-focus-color',
-  chipCloseIconColor: '--plasma-select-chip-close-icon-color',
-  chipOutlineSize: '--plasma-select-chip-outline-size',
+  chipGap: '--plasma-select-chip-gap',
   chipBorderRadius: '--plasma-select-chip-border-radius',
-  chipWidth: '--plasma-select-chip-width',
   chipHeight: '--plasma-select-chip-height',
-  chipPaddingTop: '--plasma-select-chip-padding-top',
   chipPaddingRight: '--plasma-select-chip-padding-right',
-  chipPaddingBottom: '--plasma-select-chip-padding-bottom',
   chipPaddingLeft: '--plasma-select-chip-padding-left',
   chipCloseIconSize: '--plasma-select-chip-close-icon-size',
-  chipFontFamily: '--plasma-select-chip-font-family',
-  chipFontSize: '--plasma-select-chip-font-size',
-  chipFontStyle: '--plasma-select-chip-font-style',
-  chipFontWeight: '--plasma-select-chip-font-weight',
-  chipLetterSpacing: '--plasma-select-chip-letter-spacing',
-  chipLineHeight: '--plasma-select-chip-line-height',
   chipClearContentMarginLeft: '--plasma-select-chip-clear-content-margin-left',
   chipClearContentMarginRight: '--plasma-select-chip-clear-content-margin-right',
-  chipOpacityReadonly: '--plasma-select-chip-opacity-readonly',
-  disabledOpacity: '--plasma-select-disabled-opacity',
-  focusColor: '--plasma-select-focus-color'
+  labelOffset: '--plasma-select-label-offset',
+  innerLabelGap: '--plasma-select-inner-label-gap',
+  helperTextColor: '--plasma-select-helper-text-color',
+  helperTextOffset: '--plasma-select-helper-text-offset',
+  spinnerSize: '--plasma-select-spinner-size',
+  spinnerSizeTight: '--plasma-select-spinner-size-tight'
+};
+export var constants = {
+  focusColor: '--surface-accent',
+  focusSize: '0.0625rem',
+  background: '--surface-solid-card',
+  boxShadow: '--shadow-down-soft-s',
+  disclosureIconColor: '--text-secondary',
+  disclosureIconColorHover: '--text-secondary-hover',
+  itemBackground: '--plasma-colors-transparent',
+  itemBackgroundHover: '--surface-transparent-secondary',
+  textfieldTargetColor: '--text-primary',
+  textfieldOuterLabelColor: '--text-primary',
+  textfieldInnerLabelColor: '--text-secondary',
+  textfieldPlaceholderColor: '--text-secondary',
+  textfieldBorderSize: '0.0625rem',
+  opacity: '0.4',
+  fontFamily: '--plasma-typo-body-xs-font-family',
+  fontSize: '--plasma-typo-body-xs-font-size',
+  fontStyle: '--plasma-typo-body-xs-font-style',
+  fontWeight: '--plasma-typo-body-xs-font-weight',
+  fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
+  fontLineHeight: '--plasma-typo-body-xs-line-height'
 };

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

@@ -0,0 +1,349 @@
+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) {
+              if (path.length > focusedPath.length) {
+                dispatchPath({
+                  type: 'removed_last_level'
+                });
+              } else {
+                dispatchFocusedPath({
+                  type: 'return_prev_focus'
+                });
+              }
+            }
+            if (path.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.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.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,2 @@
 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';