@salutejs/plasma-new-hope 0.173.1-canary.1502.11462220468.0 → 0.174.0-canary.1497.11463811587.0

package/styled-components/cjs/components/Dropdown/Dropdown.styles.js

@@ -4,31 +4,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Ul = exports.StyledPopover = void 0;
+exports.base = exports.Ul = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
-var _engines = /*#__PURE__*/require("../../engines");
-var _Popover = /*#__PURE__*/require("../Popover");
 var _utils = /*#__PURE__*/require("./utils");
 var _Dropdown = /*#__PURE__*/require("./Dropdown.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
-var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
-  componentId: "plasma-new-hope__sc-13ezpo5-0"
-})([".", ",.", "{display:block;}"], /*#__PURE__*/String(_Popover.popoverClasses.wrapper), /*#__PURE__*/String(_Popover.popoverClasses.target));
 var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
-  componentId: "plasma-new-hope__sc-13ezpo5-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], _Dropdown.tokens.background, _Dropdown.tokens.boxShadow, _Dropdown.tokens.borderRadius, function (_ref) {
+  componentId: "plasma-new-hope__sc-13ezpo5-0"
+})(["box-sizing:border-box;width:", ";height:", ";margin:", ";padding:var(", ") 0;overflow:", ";background:var(", ");box-shadow:", ";border-radius:var(", ");"], function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || "var(".concat(_Dropdown.tokens.width, ")");
 }, function (_ref2) {
   var listHeight = _ref2.listHeight;
   return listHeight ? (0, _utils.getCorrectHeight)(listHeight) : 'auto';
 }, function (_ref3) {
-  var listOverflow = _ref3.listOverflow;
+  var isInnerUl = _ref3.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(_Dropdown.tokens.padding, ") * -1) 0.125rem 0") : 0;
+}, _Dropdown.tokens.padding, function (_ref4) {
+  var listOverflow = _ref4.listOverflow;
   return listOverflow || 'initial';
-}, function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(_Dropdown.tokens.padding, ") * -1) 0 0 var(").concat(_Dropdown.tokens.padding, ")") : 0;
-}, _Dropdown.tokens.padding);
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:inline-block;"]);
+}, _Dropdown.constants.background, _Dropdown.constants.boxShadow, _Dropdown.tokens.borderRadius);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = exports.classes = void 0;
+exports.tokens = exports.constants = exports.classes = void 0;
 var classes = exports.classes = {
   dropdownRoot: 'dropdown-root',
   dropdownItemIsFocused: 'dropdown-item-is-focused',
   dropdownItemIsDisabled: 'dropdown-item-is-disabled',
   dropdownItemIsActive: 'dropdown-item-is-active',
-  dropdownItemIsSelected: 'dropdownItemIsSelected'
+  dropdownItemIsSelected: 'dropdown-item-is-selected'
 };
 var tokens = exports.tokens = {
   background: '--plasma-dropdown-background',
@@ -20,6 +20,8 @@ var tokens = exports.tokens = {
   disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
   disabledOpacity: '--plasma-dropdown-disabled-opacity',
   focusColor: '--plasma-dropdown-focus-color',
+  // Old
+
   dividerColor: '--plasma-dropdown-divider-color',
   dividerMarginTop: '--plasma-dropdown-divider-margin-top',
   dividerMarginTopTight: '--plasma-dropdown-divider-margin-top-tight',
@@ -34,6 +36,7 @@ var tokens = exports.tokens = {
   itemBackgroundSelectedHover: '--plasma-dropdown-item-background-selected-hover',
   // Old
   itemColor: '--plasma-dropdown-item-color',
+  // Old
   itemColorSelected: '--plasma-dropdown-item-color-selected',
   // Old
   itemColorSelectedHover: '--plasma-dropdown-item-color-selected-hover',
@@ -52,11 +55,17 @@ var tokens = exports.tokens = {
   itemMarginLeft: '--plasma-dropdown-item-margin-left',
   // Old
   itemPaddingTop: '--plasma-dropdown-item-padding-top',
+  // Old
   itemPaddingTopTight: '--plasma-dropdown-item-padding-top-tight',
+  // Old
   itemPaddingRight: '--plasma-dropdown-item-padding-right',
+  // Old
   itemPaddingBottom: '--plasma-dropdown-item-padding-bottom',
+  // Old
   itemPaddingBottomTight: '--plasma-dropdown-item-padding-bottom-tight',
+  // Old
   itemPaddingLeft: '--plasma-dropdown-item-padding-left',
+  // Old
   itemContentLeftWidth: '--plasma-dropdown-item-content-left-width',
   // Old
   itemContentLeftColor: '--plasma-dropdown-item-content-left-color',
@@ -71,6 +80,20 @@ var tokens = exports.tokens = {
   itemFontWeightBold: '--plasma-dropdown-item-letter-spacing',
   itemFontLetterSpacing: '--plasma-dropdown-item-line-height',
   itemFontLineHeight: '--plasma-dropdown-item-font-weight',
+  itemPadding: '--plasma-dropdown-item-padding',
+  itemPaddingTight: '--plasma-dropdown-item-padding-tight',
+  cellPadding: '--plasma-dropdown-cell-padding',
+  cellPaddingLeftContent: '--plasma-dropdown-cell-padding-left-content',
+  cellPaddingContent: '--plasma-dropdown-cell-padding-content',
+  cellPaddingRightContent: '--plasma-dropdown-cell-padding-right-content',
+  cellTextboxGap: '--plasma-dropdown-cell-textbox-gap',
+  cellGap: '--plasma-dropdown-cell-gap',
+  cellTitleFontFamily: '--plasma-dropdown-cell-title-font-family',
+  cellTitleFontSize: '--plasma-dropdown-cell-title-font-size',
+  cellTitleFontStyle: '--plasma-dropdown-cell-title-font-style',
+  cellTitleFontWeight: '--plasma-dropdown-cell-title-font-weight',
+  cellTitleLetterSpacing: '--plasma-dropdown-cell-title-letter-spacing',
+  cellTitleLineHeight: '--plasma-dropdown-cell-title-line-height',
   // TODO: Remove below tokens as soon as they are no longer needed
   footerBackground: '--plasma-dropdown-footer-background',
   footerWidth: '--plasma-dropdown-footer-width',
@@ -134,4 +157,15 @@ var tokens = exports.tokens = {
   groupLabelMarginRight: '--plasma-dropdown-group-label-margin-right',
   groupLabelMarginBottom: '--plasma-dropdown-group-label-margin-bottom',
   groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left'
+};
+var constants = exports.constants = {
+  focusColor: '--surface-accent',
+  background: '--surface-solid-card',
+  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
+  disclosureIconColor: '--text-secondary',
+  itemBackground: '--plasma-colors-transparent',
+  itemBackgroundHover: '--surface-transparent-secondary',
+  opacity: '0.4',
+  cellTitleColor: '--text-primary',
+  cellBackgroundColor: '--plasma-colors-transparent'
 };

package/styled-components/cjs/components/Dropdown/FloatingPopover.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPopover = void 0;
+var _react = /*#__PURE__*/require("@floating-ui/react");
+var _react2 = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var target = _ref.target,
+    children = _ref.children,
+    opened = _ref.opened,
+    onToggle = _ref.onToggle,
+    placement = _ref.placement,
+    portal = _ref.portal,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
+    isInner = _ref.isInner,
+    trigger = _ref.trigger;
+  var _useFloating = (0, _react.useFloating)({
+      placement: placement === 'auto' ? undefined : placement,
+      open: opened,
+      middleware: [placement === 'auto' && (0, _react.autoPlacement)(), (0, _react.offset)({
+        mainAxis: offset[1],
+        crossAxis: offset[0]
+      }), (0, _react.flip)({
+        fallbackAxisSideDirection: 'end'
+      }), (0, _react.shift)()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
+  var wrappedId = (0, _plasmaCore.safeUseId)();
+  var handleTargetClick = function handleTargetClick(event) {
+    if (trigger === 'hover') {
+      return;
+    }
+    if (onToggle) {
+      onToggle(!opened, event);
+    }
+  };
+  var handleTargetMouseEnter = function handleTargetMouseEnter(event) {
+    if (trigger === 'click' || opened) {
+      return;
+    }
+    onToggle(true, event);
+  };
+  var handleTargetMouseLeave = function handleTargetMouseLeave(event) {
+    if (event.relatedTarget instanceof HTMLElement && refs.floating.current instanceof HTMLElement) {
+      var _refs$floating$curren;
+      if (trigger === 'click' || !opened || event.relatedTarget && refs.floating && (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(event.relatedTarget)) {
+        return;
+      }
+      onToggle(false, event);
+    }
+  };
+  var handleFloatingMouseLeave = function handleFloatingMouseLeave(event) {
+    if (event.relatedTarget instanceof HTMLElement && refs.reference.current instanceof HTMLElement) {
+      var _refs$reference$curre;
+      if (trigger === 'click' || !opened || event.relatedTarget && refs.reference && (_refs$reference$curre = refs.reference.current) !== null && _refs$reference$curre !== void 0 && _refs$reference$curre.contains(event.relatedTarget)) {
+        return;
+      }
+      onToggle(false, event);
+    }
+  };
+  return /*#__PURE__*/_react2["default"].createElement("div", {
+    id: wrappedId,
+    style: {
+      display: isInner ? 'block' : 'inline-block'
+    },
+    ref: ref
+  }, /*#__PURE__*/_react2["default"].createElement("div", {
+    ref: refs.setReference,
+    onClick: handleTargetClick,
+    onMouseEnter: handleTargetMouseEnter,
+    onMouseLeave: handleTargetMouseLeave
+  }, target), opened && /*#__PURE__*/_react2["default"].createElement(_react.FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/_react2["default"].createElement("div", {
+    ref: refs.setFloating,
+    onMouseLeave: handleFloatingMouseLeave,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      zIndex: 1
+    })
+  }, children)));
+});
+// root - принимает ref контейнера портала.
+// id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
+var getFloatingPortalProps = function getFloatingPortalProps(portal, wrappedId) {
+  if (!portal) {
+    return {
+      id: wrappedId
+    };
+  }
+  if (typeof portal === 'string') {
+    return {
+      id: portal
+    };
+  }
+  return {
+    root: portal
+  };
+};

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

@@ -5,29 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropdownInner = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _ = /*#__PURE__*/require("..");
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.styles");
+var _FloatingPopover = /*#__PURE__*/require("../../FloatingPopover");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
   var item = _ref.item,
     currentLevel = _ref.currentLevel,
-    focusedPath = _ref.focusedPath,
     path = _ref.path,
     dispatchPath = _ref.dispatchPath,
     index = _ref.index,
     trigger = _ref.trigger,
-    itemRole = _ref.itemRole,
     listHeight = _ref.listHeight,
     listOverflow = _ref.listOverflow,
-    handleGlobalToggle = _ref.handleGlobalToggle,
-    closeOnSelect = _ref.closeOnSelect,
-    onHover = _ref.onHover,
-    onItemSelect = _ref.onItemSelect,
-    onItemClick = _ref.onItemClick,
-    listWidth = _ref.listWidth,
-    variant = _ref.variant,
-    hasArrow = _ref.hasArrow,
-    size = _ref.size;
+    listWidth = _ref.listWidth;
   var handleToggle = function handleToggle(opened) {
     if (opened) {
       dispatchPath({
@@ -43,79 +35,53 @@ var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
     }
   };
   var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
-  var listId = "tree_level_".concat(currentLevel + 2);
+  var treeId = (0, _plasmaCore.safeUseId)();
+  var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
-    return /*#__PURE__*/_react["default"].createElement(_Dropdown.StyledPopover, {
-      opened: isCurrentListOpen,
-      usePortal: false,
+    return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
       placement: "right-start",
+      opened: isCurrentListOpen,
+      onToggle: handleToggle,
       trigger: trigger,
       target: /*#__PURE__*/_react["default"].createElement(_.DropdownItem, {
         item: item,
         index: index,
         path: path,
-        focusedPath: focusedPath,
         currentLevel: currentLevel,
-        itemRole: itemRole,
-        onHover: onHover,
-        onItemSelect: onItemSelect,
-        onItemClick: onItemClick,
-        variant: variant,
-        hasArrow: hasArrow,
         ariaControls: listId,
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
-        ariaLabel: item.label,
-        size: size
+        ariaLabel: item.label
       }),
-      onToggle: handleToggle,
-      isFocusTrapped: false,
-      preventOverflow: false
+      isInner: true
     }, /*#__PURE__*/_react["default"].createElement(_Dropdown.Ul, {
+      id: listId,
+      role: "group",
+      isInnerUl: true,
       listHeight: listHeight,
       listOverflow: listOverflow,
-      role: "group",
-      id: listId,
-      listWidth: listWidth,
-      isInnerUl: true
+      listWidth: listWidth
     }, item.items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/_react["default"].createElement(DropdownInner, {
         key: "".concat(innerIndex, "/").concat(currentLevel),
         item: innerItem,
         currentLevel: nextLevel,
-        focusedPath: focusedPath,
         path: path,
         dispatchPath: dispatchPath,
         index: innerIndex,
         trigger: trigger,
-        itemRole: itemRole,
         listHeight: listHeight,
         listOverflow: listOverflow,
-        handleGlobalToggle: handleGlobalToggle,
-        closeOnSelect: closeOnSelect,
-        onHover: onHover,
-        onItemSelect: onItemSelect,
-        onItemClick: onItemClick,
-        listWidth: listWidth,
-        variant: variant,
-        hasArrow: hasArrow,
-        size: size
+        listWidth: listWidth
       });
     })));
   }
   return /*#__PURE__*/_react["default"].createElement(_.DropdownItem, {
     item: item,
+    path: path,
     index: index,
-    focusedPath: focusedPath,
     currentLevel: currentLevel,
-    itemRole: itemRole,
-    handleGlobalToggle: handleGlobalToggle,
-    closeOnSelect: closeOnSelect,
-    onHover: onHover,
-    onItemSelect: onItemSelect,
-    onItemClick: onItemClick,
-    variant: variant,
-    size: size
+    ariaLevel: nextLevel
   });
 };

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -9,29 +9,20 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
 var _utils = /*#__PURE__*/require("../../../../utils");
 var _Icon = /*#__PURE__*/require("../../../_Icon");
+var _Dropdown2 = /*#__PURE__*/require("../../Dropdown");
+var _utils2 = /*#__PURE__*/require("../../utils");
 var _DropdownItem = /*#__PURE__*/require("./DropdownItem.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
     path = _ref.path,
-    focusedPath = _ref.focusedPath,
     currentLevel = _ref.currentLevel,
     index = _ref.index,
-    itemRole = _ref.itemRole,
-    closeOnSelect = _ref.closeOnSelect,
-    handleGlobalToggle = _ref.handleGlobalToggle,
-    onHover = _ref.onHover,
-    onItemSelect = _ref.onItemSelect,
-    onItemClick = _ref.onItemClick,
     ariaControls = _ref.ariaControls,
     ariaExpanded = _ref.ariaExpanded,
-    ariaHasPopup = _ref.ariaHasPopup,
     ariaLevel = _ref.ariaLevel,
-    ariaLabel = _ref.ariaLabel,
-    variant = _ref.variant,
-    hasArrow = _ref.hasArrow,
-    size = _ref.size;
+    ariaLabel = _ref.ariaLabel;
   var value = item.value,
     label = item.label,
     disabled = item.disabled,
@@ -41,6 +32,19 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
     dividerBefore = item.dividerBefore,
     dividerAfter = item.dividerAfter;
   var ref = (0, _react.useRef)(null);
+  var _useContext = (0, _react.useContext)(_Dropdown2.Context),
+    focusedPath = _useContext.focusedPath,
+    size = _useContext.size,
+    variant = _useContext.variant,
+    itemRole = _useContext.itemRole,
+    handleGlobalToggle = _useContext.handleGlobalToggle,
+    closeOnSelect = _useContext.closeOnSelect,
+    onHover = _useContext.onHover,
+    onItemSelect = _useContext.onItemSelect,
+    onItemClick = _useContext.onItemClick,
+    hasArrow = _useContext.hasArrow,
+    treeId = _useContext.treeId;
+  var hasDescendants = Boolean(item.items);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Dropdown.classes.dropdownItemIsFocused : undefined;
@@ -64,7 +68,9 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
     if (onItemClick) {
       onItemClick(item, event);
     }
-    if (handleGlobalToggle && closeOnSelect) {
+
+    // Закрываем весь дропдаун целиком при клике на айтем без потомков. Только при closeOnSelect === true.
+    if (closeOnSelect && !hasDescendants) {
       handleGlobalToggle(false, event);
     }
   };
@@ -76,20 +82,25 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dividerBefore && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {
     variant: variant
   }), /*#__PURE__*/_react["default"].createElement(_DropdownItem.Wrapper, {
+    ref: ref,
     className: (0, _utils.cx)(isDisabledClassName, focusedClass, activeClass),
-    id: value.toString(),
+    id: (0, _utils2.getItemId)(treeId, value.toString()),
     role: itemRole,
-    ref: ref,
-    "aria-disabled": disabled || isDisabled,
     onClick: handleClick,
     onMouseEnter: handleHover,
     variant: variant,
+    "aria-disabled": disabled || isDisabled,
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, contentLeft && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledText, null, label), contentRight && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/_react["default"].createElement(_DropdownItem.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownItem.CellWrapper, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledCell, {
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+    alignContentLeft: "center",
+    alignContentRight: "center",
+    title: label
+  })), item.items && hasArrow && /*#__PURE__*/_react["default"].createElement(_DropdownItem.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
     size: disclosureIconSize,
     color: "inherit"
   }))), dividerAfter && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -3,25 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.StyledText = exports.StyledContentRight = exports.StyledContentLeft = exports.Divider = exports.DisclosureIconWrapper = void 0;
+exports.Wrapper = exports.StyledCell = exports.Divider = exports.DisclosureIconWrapper = exports.CellWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
+var _Cell = /*#__PURE__*/require("../../../Cell");
+var _engines = /*#__PURE__*/require("../../../../engines");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+var mergedCellConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig);
+var Cell = /*#__PURE__*/(0, _engines.component)(mergedCellConfig);
+var CellWrapper = exports.CellWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-0"
-})(["display:inline-flex;"]);
-var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;"], _Cell.cellTokens.cellTitleColor, _Dropdown.constants.cellTitleColor, _Cell.cellTokens.cellBackgroundColor, _Dropdown.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Dropdown.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Dropdown.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Dropdown.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Dropdown.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Dropdown.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Dropdown.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Dropdown.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Dropdown.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Dropdown.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Dropdown.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Dropdown.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Dropdown.tokens.cellTitleLineHeight);
+var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-1"
-})(["margin-left:auto;display:inline-flex;"]);
+})([""]);
 var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-2"
-})(["line-height:0;color:var(", ");"], _Dropdown.tokens.disclosureIconColor);
-var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-3"
-})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
+})(["line-height:0;color:var(", ");"], _Dropdown.constants.disclosureIconColor);
 var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-4"
+  componentId: "plasma-new-hope__sc-hs0ek1-3"
 })(["height:1px;margin-top:", ";margin-right:var(", ");margin-bottom:", ";margin-left:var(", ");background:var(", ");"], function (_ref) {
   var variant = _ref.variant;
   return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginTopTight : _Dropdown.tokens.dividerMarginTop, ")");
@@ -30,18 +31,15 @@ var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.wi
   return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginBottomTight : _Dropdown.tokens.dividerMarginBottom, ")");
 }, _Dropdown.tokens.dividerMarginLeft, _Dropdown.tokens.dividerColor);
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-5"
-})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref3) {
+  componentId: "plasma-new-hope__sc-hs0ek1-4"
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");border-radius:var(", ");user-select:none;border-right:0.125rem solid transparent;border-left:0.125rem solid transparent;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Dropdown.tokens.itemHeight, function (_ref3) {
   var variant = _ref3.variant;
-  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingTopTight : _Dropdown.tokens.itemPaddingTop, ")");
-}, _Dropdown.tokens.itemPaddingRight, function (_ref4) {
-  var variant = _ref4.variant;
-  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingBottomTight : _Dropdown.tokens.itemPaddingBottom, ")");
-}, _Dropdown.tokens.itemPaddingLeft, _Dropdown.tokens.itemFontFamily, _Dropdown.tokens.itemFontSize, _Dropdown.tokens.itemFontStyle, _Dropdown.tokens.itemFontWeightBold, _Dropdown.tokens.itemFontLetterSpacing, _Dropdown.tokens.itemFontLineHeight, _Dropdown.tokens.itemBackground, _Dropdown.tokens.itemColor, _Dropdown.tokens.itemBorderRadius, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsActive, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.disabledOpacity, /*#__PURE__*/(0, _mixins.addFocus)({
+  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingTight : _Dropdown.tokens.itemPadding, ")");
+}, _Dropdown.tokens.itemFontFamily, _Dropdown.tokens.itemFontSize, _Dropdown.tokens.itemFontStyle, _Dropdown.tokens.itemFontWeightBold, _Dropdown.tokens.itemFontLetterSpacing, _Dropdown.tokens.itemFontLineHeight, _Dropdown.constants.itemBackground, _Dropdown.tokens.borderRadius, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.constants.itemBackgroundHover, _Dropdown.classes.dropdownItemIsActive, _Dropdown.constants.itemBackgroundHover, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
-  outlineColor: /*#__PURE__*/"var(".concat(_Dropdown.tokens.focusColor, ")"),
+  outlineColor: /*#__PURE__*/"var(".concat(_Dropdown.constants.focusColor, ")"),
   outlineRadius: /*#__PURE__*/"var(".concat(_Dropdown.tokens.itemBorderRadius, ")"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Dropdown.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Dropdown.tokens.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Dropdown.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Dropdown.constants.focusColor, ");\n            }\n        ")
 }));

package/styled-components/cjs/components/Dropdown/utils/getItemByFocused.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemByFocused = void 0;
+var getItemByFocused = exports.getItemByFocused = function getItemByFocused(focusedPath, focusedToValueMap) {
+  var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+    return "".concat(acc, "/").concat(n);
+  }, '').replace(/^(\/)/, '');
+  return focusedToValueMap.get(focusedPathAsString);
+};

package/styled-components/cjs/components/Dropdown/utils/getItemId.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemId = void 0;
+var getItemId = exports.getItemId = function getItemId(treeId, value) {
+  return "".concat(treeId, "-").concat(value);
+};

package/styled-components/cjs/components/Dropdown/utils/getPlacement.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPlacement = void 0;
+var getPlacement = exports.getPlacement = function getPlacement(placement) {
+  if (!placement) {
+    return 'bottom-start';
+  }
+  if (placement === 'auto') {
+    return placement;
+  }
+  return "".concat(placement, "-start");
+};

package/styled-components/cjs/components/Dropdown/utils/index.js

@@ -3,8 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getValidComponent = exports.getCorrectHeight = exports.childrenWithProps = void 0;
+exports.getCorrectHeight = exports.childrenWithProps = void 0;
+Object.defineProperty(exports, "getItemByFocused", {
+  enumerable: true,
+  get: function get() {
+    return _getItemByFocused.getItemByFocused;
+  }
+});
+Object.defineProperty(exports, "getItemId", {
+  enumerable: true,
+  get: function get() {
+    return _getItemId.getItemId;
+  }
+});
+Object.defineProperty(exports, "getPlacement", {
+  enumerable: true,
+  get: function get() {
+    return _getPlacement.getPlacement;
+  }
+});
+exports.getValidComponent = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _getItemId = /*#__PURE__*/require("./getItemId");
+var _getItemByFocused = /*#__PURE__*/require("./getItemByFocused");
+var _getPlacement = /*#__PURE__*/require("./getPlacement");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }