@salutejs/plasma-new-hope 0.78.0-canary.1201.8983771283.0 → 0.78.0-canary.1201.8986419693.0

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

@@ -33,180 +33,208 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
   var currentLength = pathMap.get(path === null || path === void 0 ? void 0 : path[path.length - 1]) || 0;
   var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
   var onKeyDown = function onKeyDown(event) {
-    var code = event.code;
-    if (code === keys.ArrowUp) {
-      if (focusedPath.length) {
-        if (currentIndex <= 0) {
-          return;
+    switch (event.code) {
+      case keys.ArrowUp:
+        {
+          if (focusedPath.length) {
+            if (currentIndex > 0) {
+              dispatchFocusedPath({
+                type: 'change_last_focus',
+                value: currentIndex - 1
+              });
+            }
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleGlobalToggle(true, event);
+          }
+          break;
         }
-        dispatchFocusedPath({
-          type: 'change_last_focus',
-          value: currentIndex - 1
-        });
-      } else {
-        dispatchPath({
-          type: 'opened_first_level'
-        });
-        dispatchFocusedPath({
-          type: 'set_initial_focus'
-        });
-        handleGlobalToggle(true, event);
-      }
-    }
-    if (code === keys.ArrowDown) {
-      if (focusedPath.length) {
-        if (currentIndex + 1 >= currentLength) {
-          return;
+      case keys.ArrowDown:
+        {
+          if (focusedPath.length) {
+            if (currentIndex + 1 < currentLength) {
+              dispatchFocusedPath({
+                type: 'change_last_focus',
+                value: currentIndex + 1
+              });
+            }
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleGlobalToggle(true, event);
+          }
+          break;
         }
-        dispatchFocusedPath({
-          type: 'change_last_focus',
-          value: currentIndex + 1
-        });
-      } else {
-        dispatchPath({
-          type: 'opened_first_level'
-        });
-        dispatchFocusedPath({
-          type: 'set_initial_focus'
-        });
-        handleGlobalToggle(true, event);
-      }
-    }
-    if (code === keys.ArrowLeft) {
-      if (focusedPath.length) {
-        dispatchPath({
-          type: 'removed_last_level'
-        });
-        dispatchFocusedPath({
-          type: 'return_prev_focus'
-        });
-      }
-      if (focusedPath.length === 1) {
-        handleGlobalToggle(false, event);
-      }
-    }
-    if (code === keys.ArrowRight) {
-      if (focusedPath.length) {
-        var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
-        if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
-          dispatchPath({
-            type: 'added_next_level',
-            value: currentItem.value.toString()
-          });
-          dispatchFocusedPath({
-            type: 'add_focus',
-            value: 0
-          });
+      case keys.ArrowLeft:
+        {
+          if (focusedPath.length) {
+            dispatchPath({
+              type: 'removed_last_level'
+            });
+            dispatchFocusedPath({
+              type: 'return_prev_focus'
+            });
+          }
+          if (focusedPath.length === 1) {
+            handleGlobalToggle(false, event);
+          }
+          break;
         }
-      }
-    }
-    if (code === keys.Enter || code === keys.Space) {
-      event.preventDefault();
-      if (path[0]) {
-        var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
-        if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
-          return;
+      case keys.ArrowRight:
+        {
+          if (!focusedPath.length) {
+            break;
+          }
+          var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
+          if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
+            dispatchPath({
+              type: 'added_next_level',
+              value: currentItem.value.toString()
+            });
+            dispatchFocusedPath({
+              type: 'add_focus',
+              value: 0
+            });
+          }
+          break;
         }
-        if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
-          dispatchPath({
-            type: 'added_next_level',
-            value: _currentItem.value.toString()
-          });
-          dispatchFocusedPath({
-            type: 'add_focus',
-            value: 0
-          });
-        } else {
-          if (closeOnSelect) {
-            handleGlobalToggle(false, event);
+      case keys.Enter:
+      case keys.Space:
+        {
+          event.preventDefault();
+          if (!path[0]) {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            break;
           }
-          if (onItemSelect && _currentItem) {
-            onItemSelect(_currentItem, event);
+          var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
+          if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
+            break;
           }
-          if (onItemClick && _currentItem) {
-            onItemClick(_currentItem, event);
+          if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
+            dispatchPath({
+              type: 'added_next_level',
+              value: _currentItem.value.toString()
+            });
+            dispatchFocusedPath({
+              type: 'add_focus',
+              value: 0
+            });
+          } else {
+            if (closeOnSelect) {
+              handleGlobalToggle(false, event);
+            }
+            if (onItemSelect && _currentItem) {
+              onItemSelect(_currentItem, event);
+            }
+            if (onItemClick && _currentItem) {
+              onItemClick(_currentItem, event);
+            }
           }
+          break;
         }
-      } else {
-        dispatchPath({
-          type: 'opened_first_level'
-        });
-        dispatchFocusedPath({
-          type: 'set_initial_focus'
-        });
-      }
-    }
-    if (code === keys.Tab || code === keys.Escape) {
-      dispatchFocusedPath({
-        type: 'reset'
-      });
-      dispatchPath({
-        type: 'reset'
-      });
-      handleGlobalToggle(false, event);
-    }
-    if (code === keys.Home) {
-      if (path[0]) {
-        dispatchFocusedPath({
-          type: 'change_last_focus',
-          value: 0
-        });
-      } else {
-        dispatchPath({
-          type: 'opened_first_level'
-        });
-        dispatchFocusedPath({
-          type: 'set_initial_focus'
-        });
-        handleGlobalToggle(true, event);
-      }
-    }
-    if (code === keys.End) {
-      if (path[0]) {
-        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
-        });
-        handleGlobalToggle(true, event);
-      }
-    }
-    if (code === keys.PageUp) {
-      if (path[0]) {
-        if (currentIndex <= JUMP_SIZE) {
+      case keys.Tab:
+      case keys.Escape:
+        {
           dispatchFocusedPath({
-            type: 'change_last_focus',
-            value: 0
+            type: 'reset'
           });
-        } else {
-          dispatchFocusedPath({
-            type: 'change_last_focus',
-            value: currentIndex - JUMP_SIZE
+          dispatchPath({
+            type: 'reset'
           });
+          handleGlobalToggle(false, event);
+          break;
         }
-      }
-    }
-    if (code === keys.PageDown) {
-      if (path[0]) {
-        if (currentLength - currentIndex <= JUMP_SIZE) {
-          dispatchFocusedPath({
-            type: 'change_last_focus',
-            value: currentLength - 1
-          });
-        } else {
-          dispatchFocusedPath({
-            type: 'change_last_focus',
-            value: currentIndex + JUMP_SIZE
-          });
+      case keys.Home:
+        {
+          if (path[0]) {
+            dispatchFocusedPath({
+              type: 'change_last_focus',
+              value: 0
+            });
+          } else {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            handleGlobalToggle(true, event);
+          }
+          break;
+        }
+      case keys.End:
+        {
+          if (path[0]) {
+            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
+            });
+            handleGlobalToggle(true, event);
+          }
+          break;
+        }
+      case keys.PageUp:
+        {
+          if (!path[0]) {
+            break;
+          }
+          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 (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 {

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -35,7 +35,7 @@ var DropdownInner = function DropdownInner(_ref) {
     }
   };
   var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
-  var listId = "listbox".concat(currentLevel + 2);
+  var listId = "tree_level_".concat(currentLevel + 2);
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
     return /*#__PURE__*/React.createElement(StyledPopover, {

package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { dropdownTokens } from '../../../../components/Dropdown';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--text-secondary);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.js

@@ -0,0 +1,5 @@
+import { dropdownConfig } from '../../../../components/Dropdown';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Dropdown.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
+export var Dropdown = /*#__PURE__*/component(mergedConfig);