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

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

@@ -8,33 +8,30 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { createContext, forwardRef, useReducer, useRef } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
-import { cx } from '../../utils';
-import { useOutsideClick } from '../../hooks';
+import React, { forwardRef, useReducer } from 'react';
+import { cx, getPlacements } from '../../utils';
 import { pathReducer } from './reducers/pathReducer';
 import { focusedPathReducer } from './reducers/focusedPathReducer';
 import { DropdownInner } from './ui';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { Ul, base } from './Dropdown.styles';
-import { childrenWithProps, getItemByFocused, getItemId, getPlacement } from './utils';
+import { Ul, StyledPopover, base } from './Dropdown.styles';
+import { childrenWithProps } from './utils';
 import { classes } from './Dropdown.tokens';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { useHashMaps } from './hooks/useHashMaps';
-import { FloatingPopover } from './FloatingPopover';
-export var Context = /*#__PURE__*/createContext({});
 
 /**
  * Выпадающий список.
  */
 export var dropdownRoot = function dropdownRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
-    var _getItemByFocused;
     var items = _ref.items,
       children = _ref.children,
-      placement = _ref.placement,
-      offset = _ref.offset,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
       _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       onToggle = _ref.onToggle,
@@ -71,25 +68,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
       _useHashMaps2 = _slicedToArray(_useHashMaps, 2),
       pathMap = _useHashMaps2[0],
       focusedToValueMap = _useHashMaps2[1];
-    var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
-    var floatingPopoverRef = useRef(null);
-    var treeId = safeUseId();
-
-    // Логика работы при клике за пределами выпадающего списка
-    var targetRef = useOutsideClick(function (event) {
-      if (!isCurrentListOpen || !closeOnOverlayClick) {
-        return;
-      }
-      dispatchPath({
-        type: 'reset'
-      });
-      dispatchFocusedPath({
-        type: 'reset'
-      });
-      if (onToggle) {
-        onToggle(false, event);
-      }
-    }, floatingPopoverRef);
     var handleGlobalToggle = function handleGlobalToggle(opened, event) {
       if (opened) {
         dispatchPath({
@@ -121,64 +99,66 @@ export var dropdownRoot = function dropdownRoot(Root) {
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var isCurrentListOpen = Boolean(path[0]);
-    return /*#__PURE__*/React.createElement(Context.Provider, {
-      value: {
-        focusedPath: focusedPath,
-        size: size,
-        variant: variant,
-        itemRole: itemRole,
-        handleGlobalToggle: handleGlobalToggle,
-        closeOnSelect: closeOnSelect,
-        onHover: onHover,
-        onItemClick: onItemClick,
-        onItemSelect: onItemSelect,
-        hasArrow: hasArrow,
-        treeId: treeId
-      }
-    }, /*#__PURE__*/React.createElement(FloatingPopover, {
-      ref: floatingPopoverRef,
+    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(StyledPopover, {
       opened: isCurrentListOpen,
       onToggle: handleGlobalToggle,
-      placement: getPlacement(placement),
       offset: offset,
-      portal: portal,
+      placement: getPlacements(placement),
       trigger: trigger,
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
       target: childrenWithProps(children, {
         role: 'combobox',
-        'aria-controls': "".concat(treeId, "_tree_level_1"),
+        'aria-controls': 'tree_level_1',
         'aria-expanded': isCurrentListOpen,
-        'aria-activedescendant': activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue.toString()) : '',
+        'aria-activedescendant': getActiveDescendant(),
         onKeyDown: onKeyDown
-      })
+      }),
+      preventOverflow: false,
+      usePortal: Boolean(portal),
+      frame: portal
     }, /*#__PURE__*/React.createElement(Root, _extends({
       className: cx(className, classes.dropdownRoot),
       ref: ref,
       view: view,
-      size: size,
-      style: {
-        display: 'inline-block'
-      }
+      size: size
     }, rest), /*#__PURE__*/React.createElement(Ul, {
-      ref: targetRef,
-      id: "".concat(treeId, "_tree_level_1"),
-      role: "tree",
       listHeight: listHeight,
       listOverflow: listOverflow,
+      role: "tree",
+      id: "tree_level_1",
       listWidth: listWidth
     }, items.map(function (item, index) {
       return /*#__PURE__*/React.createElement(DropdownInner, {
         key: "".concat(index, "/0"),
         item: item,
         currentLevel: 0,
+        focusedPath: focusedPath,
         trigger: trigger,
         path: path,
         dispatchPath: dispatchPath,
         index: index,
+        itemRole: itemRole,
         listHeight: listHeight,
         listOverflow: listOverflow,
-        listWidth: listWidth
+        handleGlobalToggle: handleGlobalToggle,
+        closeOnSelect: closeOnSelect,
+        onHover: onHover,
+        onItemSelect: onItemSelect,
+        onItemClick: onItemClick,
+        listWidth: listWidth,
+        variant: variant,
+        hasArrow: hasArrow,
+        size: size
       });
-    })))));
+    }))));
   });
 };
 export var dropdownConfig = {

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

@@ -1,20 +1,26 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
+import { component } from '../../engines';
+import { popoverConfig, popoverClasses } from '../Popover';
 import { getCorrectHeight } from './utils';
-import { tokens, constants } from './Dropdown.tokens';
-export var Ul = /*#__PURE__*/styled.ul.withConfig({
+import { tokens } from './Dropdown.tokens';
+var Popover = /*#__PURE__*/component(popoverConfig);
+export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
   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) {
+})([".", ",.", "{display:block;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
+export var Ul = /*#__PURE__*/styled.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(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || "var(".concat(tokens.width, ")");
 }, function (_ref2) {
   var listHeight = _ref2.listHeight;
   return listHeight ? getCorrectHeight(listHeight) : 'auto';
 }, function (_ref3) {
-  var isInnerUl = _ref3.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0.125rem 0") : 0;
-}, tokens.padding, function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+  var listOverflow = _ref3.listOverflow;
   return listOverflow || 'initial';
-}, constants.background, constants.boxShadow, tokens.borderRadius);
-export var base = /*#__PURE__*/css([""]);
+}, function (_ref4) {
+  var isInnerUl = _ref4.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
+}, tokens.padding);
+export var base = /*#__PURE__*/css(["display:inline-block;"]);

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

@@ -3,7 +3,7 @@ export var classes = {
   dropdownItemIsFocused: 'dropdown-item-is-focused',
   dropdownItemIsDisabled: 'dropdown-item-is-disabled',
   dropdownItemIsActive: 'dropdown-item-is-active',
-  dropdownItemIsSelected: 'dropdown-item-is-selected'
+  dropdownItemIsSelected: 'dropdownItemIsSelected'
 };
 export var tokens = {
   background: '--plasma-dropdown-background',
@@ -14,8 +14,6 @@ export var 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',
@@ -30,7 +28,6 @@ export var 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',
@@ -49,17 +46,11 @@ export var 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',
@@ -74,20 +65,6 @@ export var 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',
@@ -151,15 +128,4 @@ export var tokens = {
   groupLabelMarginRight: '--plasma-dropdown-group-label-margin-right',
   groupLabelMarginBottom: '--plasma-dropdown-group-label-margin-bottom',
   groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left'
-};
-export var 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/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -1,18 +1,26 @@
 import React from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
 import { DropdownItem } from '..';
-import { Ul } from '../../Dropdown.styles';
-import { FloatingPopover } from '../../FloatingPopover';
+import { Ul, StyledPopover } from '../../Dropdown.styles';
 var 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,
-    listWidth = _ref.listWidth;
+    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;
   var handleToggle = function handleToggle(opened) {
     if (opened) {
       dispatchPath({
@@ -28,54 +36,80 @@ var DropdownInner = function DropdownInner(_ref) {
     }
   };
   var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
-  var treeId = safeUseId();
-  var listId = "".concat(treeId, "_tree_level_").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(FloatingPopover, {
-      placement: "right-start",
+    return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: isCurrentListOpen,
-      onToggle: handleToggle,
+      usePortal: false,
+      placement: "right-start",
       trigger: trigger,
       target: /*#__PURE__*/React.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
+        ariaLabel: item.label,
+        size: size
       }),
-      isInner: true
+      onToggle: handleToggle,
+      isFocusTrapped: false,
+      preventOverflow: false
     }, /*#__PURE__*/React.createElement(Ul, {
-      id: listId,
-      role: "group",
-      isInnerUl: true,
       listHeight: listHeight,
       listOverflow: listOverflow,
-      listWidth: listWidth
+      role: "group",
+      id: listId,
+      listWidth: listWidth,
+      isInnerUl: true
     }, item.items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/React.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,
-        listWidth: listWidth
+        handleGlobalToggle: handleGlobalToggle,
+        closeOnSelect: closeOnSelect,
+        onHover: onHover,
+        onItemSelect: onItemSelect,
+        onItemClick: onItemClick,
+        listWidth: listWidth,
+        variant: variant,
+        hasArrow: hasArrow,
+        size: size
       });
     })));
   }
   return /*#__PURE__*/React.createElement(DropdownItem, {
     item: item,
-    path: path,
     index: index,
+    focusedPath: focusedPath,
     currentLevel: currentLevel,
-    ariaLevel: nextLevel
+    itemRole: itemRole,
+    handleGlobalToggle: handleGlobalToggle,
+    closeOnSelect: closeOnSelect,
+    onHover: onHover,
+    onItemSelect: onItemSelect,
+    onItemClick: onItemClick,
+    variant: variant,
+    size: size
   });
 };
 export { DropdownInner };

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

@@ -1,19 +1,28 @@
-import React, { useEffect, useRef, useContext } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { classes } from '../../Dropdown.tokens';
 import { cx } from '../../../../utils';
 import { IconDisclosureRight } from '../../../_Icon';
-import { Context } from '../../Dropdown';
-import { getItemId } from '../../utils';
-import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell } from './DropdownItem.styles';
+import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper, Divider } from './DropdownItem.styles';
 export var 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;
+    ariaLabel = _ref.ariaLabel,
+    variant = _ref.variant,
+    hasArrow = _ref.hasArrow,
+    size = _ref.size;
   var value = item.value,
     label = item.label,
     disabled = item.disabled,
@@ -23,19 +32,6 @@ export var DropdownItem = function DropdownItem(_ref) {
     dividerBefore = item.dividerBefore,
     dividerAfter = item.dividerAfter;
   var ref = useRef(null);
-  var _useContext = useContext(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 ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
@@ -59,9 +55,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     if (onItemClick) {
       onItemClick(item, event);
     }
-
-    // Закрываем весь дропдаун целиком при клике на айтем без потомков. Только при closeOnSelect === true.
-    if (closeOnSelect && !hasDescendants) {
+    if (handleGlobalToggle && closeOnSelect) {
       handleGlobalToggle(false, event);
     }
   };
@@ -73,25 +67,20 @@ export var DropdownItem = function DropdownItem(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, dividerBefore && /*#__PURE__*/React.createElement(Divider, {
     variant: variant
   }), /*#__PURE__*/React.createElement(Wrapper, {
-    ref: ref,
     className: cx(isDisabledClassName, focusedClass, activeClass),
-    id: getItemId(treeId, value.toString()),
+    id: 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
-  }, /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
-    contentLeft: contentLeft,
-    contentRight: contentRight,
-    alignContentLeft: "center",
-    alignContentRight: "center",
-    title: label
-  })), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
     size: disclosureIconSize,
     color: "inherit"
   }))), dividerAfter && /*#__PURE__*/React.createElement(Divider, {

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

@@ -1,21 +1,20 @@
 import styled from 'styled-components';
-import { classes, tokens, constants } from '../../Dropdown.tokens';
-import { addFocus } from '../../../../mixins';
-import { cellConfig, cellTokens } from '../../../Cell';
-import { component, mergeConfig } from '../../../../engines';
-var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
-var Cell = /*#__PURE__*/component(mergedCellConfig);
-export var CellWrapper = /*#__PURE__*/styled.div.withConfig({
+import { classes, tokens } from '../../Dropdown.tokens';
+import { addFocus, applyEllipsis } from '../../../../mixins';
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;"], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
-export var StyledCell = /*#__PURE__*/styled(Cell).withConfig({
+})(["display:inline-flex;"]);
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-1"
-})([""]);
+})(["margin-left:auto;display:inline-flex;"]);
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-2"
-})(["line-height:0;color:var(", ");"], constants.disclosureIconColor);
-export var Divider = /*#__PURE__*/styled.div.withConfig({
+})(["line-height:0;color:var(", ");"], tokens.disclosureIconColor);
+export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-3"
+})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+export var Divider = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-hs0ek1-4"
 })(["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' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
@@ -24,15 +23,18 @@ export var Divider = /*#__PURE__*/styled.div.withConfig({
   return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
 }, tokens.dividerMarginLeft, tokens.dividerColor);
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
-  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;}", ";"], tokens.itemHeight, function (_ref3) {
+  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) {
   var variant = _ref3.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, constants.itemBackground, tokens.borderRadius, classes.dropdownItemIsDisabled, constants.itemBackgroundHover, classes.dropdownItemIsActive, constants.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
+}, tokens.itemPaddingRight, function (_ref4) {
+  var variant = _ref4.variant;
+  return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
+}, tokens.itemPaddingLeft, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.disabledOpacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
-  outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
   outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n            }\n        ")
 }));

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

@@ -26,7 +26,4 @@ export var getValidComponent = function getValidComponent(element, props) {
     return /*#__PURE__*/React.createElement(Component, props);
   }
   return element;
-};
-export { getItemId } from './getItemId';
-export { getItemByFocused } from './getItemByFocused';
-export { getPlacement } from './getPlacement';
+};

package/styled-components/es/components/Notification/Notification.js

@@ -86,7 +86,7 @@ export var notificationRoot = function notificationRoot(Root) {
     })))));
   });
 };
-export var noticationConfig = {
+export var notificationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

package/styled-components/es/components/Notification/Notification.template-doc.mdx

@@ -10,9 +10,9 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения. 
+Компонент `Notification` может использоваться для создания собственных систем оповещения.
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`. 
+Текстовая часть оповещения состоит из `title` и `children`.
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
@@ -34,24 +34,32 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
-Функция принимает значения свойств компонента `Notification`:
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
 
 ```tsx live
 import React from 'react';
-import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
 
 export function App() {
-    const handleClick = React.useCallback(() => {
+    const handleShow = React.useCallback(() => {
         addNotification({
+            id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
         }, 1000);
     }, []);
 
+    const handleHide = React.useCallback(() => {
+        closeNotification('incoming-call');
+    }, []);
+
     return (
         <NotificationsProvider>
-            <Button text="Показать оповещение" onClick={handleClick} />
+            <ButtonGroup>
+                <Button text="Показать оповещение" onClick={handleShow} />
+                <Button text="Скрыть оповещение" onClick={handleHide} />
+            </ButtonGroup>
         </NotificationsProvider>
     );
 }