@salutejs/plasma-new-hope 0.76.3-canary.1178.8720542914.0 → 0.77.0-canary.1185.8719560164.0

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

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getValidComponent = exports.getPlacements = exports.getPlacement = void 0;
+exports.getValidComponent = exports.getPlacements = exports.getPlacement = exports.getChildren = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 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 && Object.prototype.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 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 : String(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); }
 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); }
 var getPlacement = exports.getPlacement = function getPlacement(placement) {
   return "".concat(placement, "-start");
@@ -35,4 +40,46 @@ var getValidComponent = exports.getValidComponent = function getValidComponent(e
     return /*#__PURE__*/_react["default"].createElement(Component, props);
   }
   return element;
+};
+var getChildren = exports.getChildren = function getChildren(children, externalProps) {
+  if (externalProps.childrenRefs) {
+    externalProps.childrenRefs.current = [];
+  }
+  var res = _react.Children.map(children || [], function (child) {
+    var hasValue = ('value' in (child === null || child === void 0 ? void 0 : child.props));
+    var hasTarget = ('target' in (child === null || child === void 0 ? void 0 : child.props));
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !hasValue && !hasTarget) {
+      return child;
+    }
+    if (hasTarget) {
+      var _ref = child === null || child === void 0 ? void 0 : child.props,
+        target = _ref.target;
+      if (! /*#__PURE__*/(0, _react.isValidElement)(target)) {
+        return child;
+      }
+      var targetProps = _objectSpread(_objectSpread({}, target === null || target === void 0 ? void 0 : target.props), {}, {
+        ref: function ref(element) {
+          var _externalProps$childr;
+          if (externalProps !== null && externalProps !== void 0 && (_externalProps$childr = externalProps.childrenRefs) !== null && _externalProps$childr !== void 0 && _externalProps$childr.current && element) {
+            externalProps.childrenRefs.current.push(element);
+          }
+        }
+      });
+      var updatedTarget = /*#__PURE__*/(0, _react.cloneElement)(target, targetProps);
+      var updatedProps = _objectSpread(_objectSpread({}, child === null || child === void 0 ? void 0 : child.props), {}, {
+        target: updatedTarget
+      });
+      return /*#__PURE__*/(0, _react.cloneElement)(child, updatedProps);
+    }
+    var props = _objectSpread(_objectSpread({}, child === null || child === void 0 ? void 0 : child.props), {}, {
+      ref: function ref(element) {
+        var _externalProps$childr2;
+        if (externalProps !== null && externalProps !== void 0 && (_externalProps$childr2 = externalProps.childrenRefs) !== null && _externalProps$childr2 !== void 0 && _externalProps$childr2.current && element) {
+          externalProps.childrenRefs.current.push(element);
+        }
+      }
+    });
+    return /*#__PURE__*/(0, _react.cloneElement)(child, props);
+  });
+  return res;
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -112,10 +112,10 @@ const StoryNormal = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,34 +127,51 @@ const StoryNormal = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -165,6 +182,7 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -172,14 +190,16 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -92,7 +92,7 @@ const DisclosureRightIcon = (props) => (
     </StyledDisclosureRightIcon>
 );
 
-const StoryTight = (args: StoryDropdownProps) => {
+const StoryNormal = (args: StoryDropdownProps) => {
     const [selected, setSelected] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
@@ -112,10 +112,10 @@ const StoryTight = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryTight = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled
@@ -190,6 +209,6 @@ const StoryTight = (args: StoryDropdownProps) => {
     );
 };
 
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -26,7 +26,7 @@ type StoryDropdownPropsCustom = {
 type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
 
 const meta: Meta<StoryDropdownProps> = {
-    title: 'plasma_web/Dropdown',
+    title: 'plasma_b2c/Dropdown',
     decorators: [WithTheme],
     component: Dropdown,
     argTypes: {
@@ -112,10 +112,10 @@ const StoryNormal = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryNormal = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -26,7 +26,7 @@ type StoryDropdownPropsCustom = {
 type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
 
 const meta: Meta<StoryDropdownProps> = {
-    title: 'plasma_web/Dropdown',
+    title: 'plasma_b2c/Dropdown',
     decorators: [WithTheme],
     component: Dropdown,
     argTypes: {
@@ -92,7 +92,7 @@ const DisclosureRightIcon = (props) => (
     </StyledDisclosureRightIcon>
 );
 
-const StoryTight = (args: StoryDropdownProps) => {
+const StoryNormal = (args: StoryDropdownProps) => {
     const [selected, setSelected] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
@@ -112,10 +112,10 @@ const StoryTight = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryTight = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled
@@ -190,6 +209,6 @@ const StoryTight = (args: StoryDropdownProps) => {
     );
 };
 
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
 };

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

@@ -1,13 +1,17 @@
-var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
+var _excluded = ["id", "target", "children", "hasArrow", "view", "size", "frame", "onToggle", "className", "isFocusTrapped", "isOpen", "role", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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, { forwardRef, useRef } from 'react';
+import React, { Children, forwardRef, useMemo, useRef } from 'react';
 import { useFocusTrap, useForkRef, useUniqId } from '@salutejs/plasma-core';
+import { cx } from '../../utils';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { StyledDropdown, StyledPopover } from './Dropdown.styles';
-import { getPlacements } from './utils';
+import { getChildren, getPlacements } from './utils';
+import { classes } from './Dropdown.tokens';
+import { useKeyNavigation } from './hooks/useKeyboardNavigation';
+
 /**
  * Выпадающий список без внешнего контроля видимости.
  */
@@ -17,15 +21,17 @@ export var dropdownRoot = function dropdownRoot(Root) {
       target = _ref.target,
       children = _ref.children,
       hasArrow = _ref.hasArrow,
-      role = _ref.role,
       view = _ref.view,
       size = _ref.size,
       frame = _ref.frame,
       _onToggle = _ref.onToggle,
+      className = _ref.className,
       _ref$isFocusTrapped = _ref.isFocusTrapped,
       isFocusTrapped = _ref$isFocusTrapped === void 0 ? true : _ref$isFocusTrapped,
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'listbox' : _ref$role,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
       _ref$trigger = _ref.trigger,
@@ -43,9 +49,24 @@ export var dropdownRoot = function dropdownRoot(Root) {
     var innerId = id || uniqId;
     var rootRef = useRef(null);
     var dropdownRef = useRef(null);
+    var itemsRefs = useRef([]);
     var handleRef = useForkRef(rootRef, outerRootRef);
     var trapRef = useFocusTrap(isOpen && isFocusTrapped);
     var dropdownForkRef = useForkRef(dropdownRef, trapRef);
+    var _useKeyNavigation = useKeyNavigation({
+        itemsRefs: itemsRefs,
+        opened: isOpen,
+        updateOpened: _onToggle
+      }),
+      onKeyDownTarget = _useKeyNavigation.onKeyDownTarget;
+    var childrenArray = useMemo(function () {
+      return Children.toArray(children);
+    }, [children]);
+    var childrenMemo = useMemo(function () {
+      return getChildren(childrenArray, {
+        childrenRefs: itemsRefs
+      });
+    }, [childrenArray, isOpen]);
     return /*#__PURE__*/React.createElement(StyledPopover, {
       role: role,
       isOpen: isOpen,
@@ -64,12 +85,14 @@ export var dropdownRoot = function dropdownRoot(Root) {
       closeOnOverlayClick: closeOnOverlayClick,
       closeOnEsc: closeOnEsc,
       isFocusTrapped: isFocusTrapped,
-      frame: frame
+      frame: frame,
+      onKeyDown: onKeyDownTarget
     }, /*#__PURE__*/React.createElement(Root, _extends({
+      className: cx(className, classes.dropdownRoot),
       ref: handleRef,
       view: view,
       size: size
-    }, rest), /*#__PURE__*/React.createElement(StyledDropdown, null, children)));
+    }, rest), /*#__PURE__*/React.createElement(StyledDropdown, null, childrenMemo)));
   });
 };
 export var dropdownConfig = {

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

@@ -7,7 +7,7 @@ import { tokens } from './Dropdown.tokens';
 var Popover = /*#__PURE__*/component(popoverConfig);
 export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
   componentId: "plasma-new-hope__sc-13ezpo5-0"
-})([".", "{display:block;}"], /*#__PURE__*/String(popoverClasses.target));
+})([".", ",.", "{display:block;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
 export var StyledDropdown = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-13ezpo5-1"
 })(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");padding:var(", ") var(", ") var(", ") var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, tokens.width, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);