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

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

@@ -81,32 +81,7 @@ export function App() {
 ```
 
 ### Доступность
-
-#### Avatar c использованием изображения
-
-В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий.
-
-Поэтому добавляем/используем свойства: `role`, `tabIndex` и `aria-label`.
-
-Примечание:
-- если указано свойство `name` то `aria-label` можно опустить;
-
-```tsx live
-import React from 'react';
-import { Avatar } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <>
-            <Avatar role="button" tabIndex={0} name="Иван Фадеев" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
-        </>
-    );
-}
-```
-
-#### Avatar c текстом
-
-В этом случае достаточно указать свойство `name`.
+Добавляем `"role"` и `"tabIndex"`.
 
 ```tsx live
 import React from 'react';
@@ -115,33 +90,8 @@ import { Avatar } from '@salutejs/{{ package }}';
 export function App() {
     return (
         <>
-            <Avatar role="button" tabIndex={0} name="Иван Фадеев" />
+            <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
         </>
     );
 }
 ```
-
-#### Avatar и статус
-
-Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label`.
-
-```tsx live
-import React from 'react';
-import { Avatar } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <>
-            <Avatar role="button" tabIndex={0} name="Иван Фадеев" status="inactive" />
-        </>
-    );
-}
-```
-
-Озвучит как `ИФ. Неактивен`. (В данном примере озвучиваются инициалы, производное от ФИО)
-
-#### Свойство statusDict
-
-Опциональное свойство для корректной озвучки значений свойства `status`.
-
-По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.

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);

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/Avatar/Avatar.stories.tsx

@@ -34,38 +34,13 @@ export const Default: Story = {
 };
 
 export const Accessibility: Story = {
-    args: {
-        role: 'button',
-        name: 'Геннадий Силуянович',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'active',
-        focused: true,
-    },
-};
-
-export const AccessibilityWithURL: Story = {
     args: {
         role: 'button',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
+        name: 'Иван Фадеев',
         status: 'active',
         focused: true,
-        name: 'Микула Селянинович',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-};
-
-export const AccessibilityWithCustomText: Story = {
-    args: {
-        role: 'button',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'inactive',
-        focused: true,
-        customText: 'ФИО',
     },
 };

package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -8,7 +8,6 @@ import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroup } from './AvatarGroup';
 
 type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
-type Avatar = ComponentProps<typeof Avatar>;
 
 const meta: Meta<typeof AvatarGroup> = {
     title: 'plasma_b2c/AvatarGroup',
@@ -34,57 +33,40 @@ export const Default: Story = {
 
 export const DynamicSize: Story = {
     args: { totalCount: 10, visibleCount: 3 },
-    render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
-        const itemLength = totalCount;
+    render: (args: ComponentProps<typeof AvatarGroup>) => {
+        const itemLength = args.totalCount;
 
         return (
             <AvatarGroup {...args}>
-                {Array(visibleCount)
+                {Array(args.visibleCount)
                     .fill(true)
                     .map((_, index) => (
-                        <Avatar size="xxl" key={index} customText={index + 1} />
+                        <Avatar size="xxl" customText={index + 1} />
                     ))}
 
-                {itemLength > visibleCount && <Avatar size="xxl" customText={`+${itemLength - visibleCount}`} />}
+                {itemLength > args.visibleCount && (
+                    <Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
+                )}
             </AvatarGroup>
         );
     },
 };
 
-const list: Array<Avatar> = [
-    {
-        name: 'Илья Муромец',
-        status: 'active',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-    {
-        name: 'Алеша Попович',
-        status: 'active',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-    {
-        name: 'Добрыня Никитич',
-        status: 'active',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-    {
-        name: 'Микула Селянинович',
-        status: 'inactive',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-    {
-        name: 'Ставр Годинович',
-        status: 'inactive',
-    },
-];
-
 export const Accessibility: Story = {
     render: (args: ComponentProps<typeof AvatarGroup>) => {
         return (
             <AvatarGroup {...args}>
-                {list.map((props) => (
-                    <Avatar role="button" tabIndex={0} focused key={props.name} size="xxl" {...props} />
-                ))}
+                {Array(5)
+                    .fill(true)
+                    .map(() => (
+                        <Avatar
+                            role="button"
+                            tabIndex={0}
+                            focused
+                            size="xxl"
+                            url="https://avatars.githubusercontent.com/u/1813468?v=4"
+                        />
+                    ))}
             </AvatarGroup>
         );
     },

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)
     }
   }
 };