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

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

@@ -1,4 +1,5 @@
 export var classes = {
+  dropdownRoot: 'dropdown-root',
   dropdownItemIsSelected: 'dropdown-item-is-selected',
   dropdownItemIsDisabled: 'dropdown-item-is-disabled'
 };

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

@@ -0,0 +1,77 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useEffect, useState } from 'react';
+export var Keys = {
+  Tab: 'Tab',
+  Enter: 'Enter',
+  Escape: 'Escape',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown'
+};
+export var useKeyNavigation = function useKeyNavigation(_ref) {
+  var itemsRefs = _ref.itemsRefs,
+    opened = _ref.opened,
+    updateOpened = _ref.updateOpened;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectItemIndex = _useState2[0],
+    setSelectItemIndex = _useState2[1];
+  useEffect(function () {
+    var _itemsRefs$current, _itemsRefs$current$se;
+    if (!opened) {
+      setSelectItemIndex(0);
+      return;
+    }
+    itemsRefs === null || itemsRefs === void 0 ? void 0 : (_itemsRefs$current = itemsRefs.current) === null || _itemsRefs$current === void 0 ? void 0 : (_itemsRefs$current$se = _itemsRefs$current[selectItemIndex]) === null || _itemsRefs$current$se === void 0 ? void 0 : _itemsRefs$current$se.focus();
+  }, [opened]);
+  var onKeyDownTarget = useCallback(function (event) {
+    var _focusedItem, _focusedItem2;
+    event.stopPropagation();
+    var code = event.code;
+    var itemsRefsCount = itemsRefs.current.length;
+    var newOpened = opened;
+    var newSelectItemIndex = selectItemIndex;
+    var focusedItem = null;
+    if (code === Keys.Escape || code === Keys.Tab) {
+      newOpened = false;
+      newSelectItemIndex = -1;
+      updateOpened === null || updateOpened === void 0 ? void 0 : updateOpened(newOpened, event);
+    }
+    if (code === Keys.ArrowUp) {
+      var _itemsRefs$current2;
+      newSelectItemIndex = newSelectItemIndex - 1 === -1 ? itemsRefsCount - 1 : newSelectItemIndex - 1;
+      focusedItem = itemsRefs === null || itemsRefs === void 0 ? void 0 : (_itemsRefs$current2 = itemsRefs.current) === null || _itemsRefs$current2 === void 0 ? void 0 : _itemsRefs$current2[newSelectItemIndex];
+    }
+    if (code === Keys.ArrowDown) {
+      var _itemsRefs$current3;
+      newSelectItemIndex = newSelectItemIndex + 1 === itemsRefsCount ? 0 : newSelectItemIndex + 1;
+      focusedItem = itemsRefs === null || itemsRefs === void 0 ? void 0 : (_itemsRefs$current3 = itemsRefs.current) === null || _itemsRefs$current3 === void 0 ? void 0 : _itemsRefs$current3[newSelectItemIndex];
+    }
+    if (code === Keys.Enter) {
+      event.preventDefault();
+      var item = itemsRefs.current[newSelectItemIndex];
+
+      // TODO: #1016
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      if (item !== null && item !== void 0 && item.ariaDisabled) {
+        return;
+      }
+      item === null || item === void 0 ? void 0 : item.click();
+    }
+    setSelectItemIndex(newSelectItemIndex);
+    (_focusedItem = focusedItem) === null || _focusedItem === void 0 ? void 0 : _focusedItem.focus();
+    (_focusedItem2 = focusedItem) === null || _focusedItem2 === void 0 ? void 0 : _focusedItem2.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center'
+    });
+  }, [opened, selectItemIndex, updateOpened]);
+  return {
+    onKeyDownTarget: onKeyDownTarget
+  };
+};

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

@@ -1,3 +1,4 @@
 export { dropdownRoot, dropdownConfig } from './Dropdown';
 export { classes as dropdownClasses, tokens as dropdownTokens } from './Dropdown.tokens';
+export { useKeyNavigation as useDropdownKeyNavigation } from './hooks/useKeyboardNavigation';
 export * from './ui';

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

@@ -1,5 +1,5 @@
 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 _excluded = ["id", "className", "children", "text", "isSelected", "name", "checked", "value", "role", "view", "size", "disabled", "contentLeft", "contentRight", "onSelect", "onClick", "onChange"];
+var _excluded = ["id", "className", "children", "text", "isSelected", "name", "checked", "value", "view", "size", "disabled", "role", "contentLeft", "contentRight", "onSelect", "onClick", "onChange"];
 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 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; }
@@ -29,10 +29,11 @@ export var dropdownItemRoot = function dropdownItemRoot(Root) {
       name = _ref.name,
       checked = _ref.checked,
       value = _ref.value,
-      role = _ref.role,
       view = _ref.view,
       size = _ref.size,
       disabled = _ref.disabled,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'option' : _ref$role,
       ContentLeftComponent = _ref.contentLeft,
       ContentRightComponent = _ref.contentRight,
       onSelect = _ref.onSelect,
@@ -66,7 +67,7 @@ export var dropdownItemRoot = function dropdownItemRoot(Root) {
       value: value,
       checked: checked || isSelected,
       disabled: disabled,
-      tabIndex: 0
+      tabIndex: -1
     }, !disabled && {
       onChange: handleOnChange
     });
@@ -86,6 +87,7 @@ export var dropdownItemRoot = function dropdownItemRoot(Root) {
       ref: outerRootRef,
       tabIndex: 0,
       "aria-disabled": disabled,
+      "aria-selected": isSelected,
       onClick: handleOnClick,
       "data-value": value
     }, rest), text ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContentLeft, null, ContentLeftComponent && ContentLeft), /*#__PURE__*/React.createElement(StyledText, null, text), /*#__PURE__*/React.createElement(StyledContentRight, null, ContentRightComponent && ContentRight)) : children);

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

@@ -1,5 +1,10 @@
+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); }
-import React, { cloneElement, isValidElement } from 'react';
+import React, { Children, cloneElement, isValidElement } from 'react';
 export var getPlacement = function getPlacement(placement) {
   return "".concat(placement, "-start");
 };
@@ -27,4 +32,46 @@ export var getValidComponent = function getValidComponent(element, props) {
     return /*#__PURE__*/React.createElement(Component, props);
   }
   return element;
+};
+export var getChildren = function getChildren(children, externalProps) {
+  if (externalProps.childrenRefs) {
+    externalProps.childrenRefs.current = [];
+  }
+  var res = 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__*/isValidElement(child) || !hasValue && !hasTarget) {
+      return child;
+    }
+    if (hasTarget) {
+      var _ref = child === null || child === void 0 ? void 0 : child.props,
+        target = _ref.target;
+      if (! /*#__PURE__*/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__*/cloneElement(target, targetProps);
+      var updatedProps = _objectSpread(_objectSpread({}, child === null || child === void 0 ? void 0 : child.props), {}, {
+        target: updatedTarget
+      });
+      return /*#__PURE__*/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__*/cloneElement(child, props);
+  });
+  return res;
 };

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

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/es/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/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/es/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/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/es/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/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };