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

package/styled-components/cjs/components/Avatar/Avatar.js

@@ -15,22 +15,13 @@ var _Avatar2 = /*#__PURE__*/require("./Avatar.styles");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_focused/base");
 var _utils2 = /*#__PURE__*/require("./utils");
-var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusDict"];
+var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 _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; }
-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 _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; }
-var StatusDictDefault = {
-  active: 'Активен',
-  inactive: 'Неактивен'
-};
 var getAvatarContent = function getAvatarContent(_ref) {
   var customText = _ref.customText,
     url = _ref.url,
@@ -47,27 +38,6 @@ var getAvatarContent = function getAvatarContent(_ref) {
   }
   return /*#__PURE__*/_react["default"].createElement(_Avatar2.Text, null, initials);
 };
-var getAriaLabel = function getAriaLabel(props) {
-  var customText = props.customText,
-    url = props.url,
-    name = props.name,
-    status = props.status,
-    ariaLabelProp = props['aria-label'],
-    role = props.role,
-    statusDict = props.statusDict;
-
-  // INFO: В этих сценариях aria-label не нужен
-  if (customText || !role || role !== 'button') {
-    return undefined;
-  }
-
-  // INFO: включаем aria-label чтобы озвучить что на изображении
-  if (url) {
-    var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
-    return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
-  }
-  return undefined;
-};
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
 var Indicator = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
@@ -87,22 +57,14 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
       _props$focused = props.focused,
       focused = _props$focused === void 0 ? true : _props$focused,
       isScalable = props.isScalable,
-      _props$statusDict = props.statusDict,
-      statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
       rest = _objectWithoutProperties(props, _excluded);
     var initials = (0, _react.useMemo)(function () {
       return (0, _utils2.getInitialsForName)(name);
     }, [name]);
-    var ariaLabel = (0, _react.useMemo)(function () {
-      return getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
-        statusDict: statusDict
-      }));
-    }, [name, url, rest.role, status, customText, statusDict, rest['aria-label']]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
       size: avatarSize,
       className: (0, _utils.cx)(_Avatar.classes.avatarItem, className),
-      "aria-label": ariaLabel,
       focused: focused
     }, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
       isScalable: isScalable
@@ -112,7 +74,6 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
       initials: initials,
       name: name
     })), status && /*#__PURE__*/_react["default"].createElement(_Avatar2.StatusIcon, null, /*#__PURE__*/_react["default"].createElement(StyledIndicator, {
-      "aria-label": statusDict[status],
       status: status
     })));
   });

package/styled-components/cjs/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/cjs/components/Dropdown/Dropdown.js

@@ -7,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.dropdownRoot = exports.dropdownConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _Dropdown = /*#__PURE__*/require("./Dropdown.styles");
-var _utils = /*#__PURE__*/require("./utils");
-var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
+var _utils2 = /*#__PURE__*/require("./utils");
+var _Dropdown2 = /*#__PURE__*/require("./Dropdown.tokens");
+var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
+var _excluded = ["id", "target", "children", "hasArrow", "view", "size", "frame", "onToggle", "className", "isFocusTrapped", "isOpen", "role", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
 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 _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); }
@@ -26,15 +29,17 @@ var dropdownRoot = exports.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,
@@ -52,9 +57,24 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
     var innerId = id || uniqId;
     var rootRef = (0, _react.useRef)(null);
     var dropdownRef = (0, _react.useRef)(null);
+    var itemsRefs = (0, _react.useRef)([]);
     var handleRef = (0, _plasmaCore.useForkRef)(rootRef, outerRootRef);
     var trapRef = (0, _plasmaCore.useFocusTrap)(isOpen && isFocusTrapped);
     var dropdownForkRef = (0, _plasmaCore.useForkRef)(dropdownRef, trapRef);
+    var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
+        itemsRefs: itemsRefs,
+        opened: isOpen,
+        updateOpened: _onToggle
+      }),
+      onKeyDownTarget = _useKeyNavigation.onKeyDownTarget;
+    var childrenArray = (0, _react.useMemo)(function () {
+      return _react.Children.toArray(children);
+    }, [children]);
+    var childrenMemo = (0, _react.useMemo)(function () {
+      return (0, _utils2.getChildren)(childrenArray, {
+        childrenRefs: itemsRefs
+      });
+    }, [childrenArray, isOpen]);
     return /*#__PURE__*/_react["default"].createElement(_Dropdown.StyledPopover, {
       role: role,
       isOpen: isOpen,
@@ -68,17 +88,19 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
       offset: offset,
       preventOverflow: preventOverflow,
       hasArrow: hasArrow,
-      placement: (0, _utils.getPlacements)(placement),
+      placement: (0, _utils2.getPlacements)(placement),
       trigger: trigger,
       closeOnOverlayClick: closeOnOverlayClick,
       closeOnEsc: closeOnEsc,
       isFocusTrapped: isFocusTrapped,
-      frame: frame
+      frame: frame,
+      onKeyDown: onKeyDownTarget
     }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
+      className: (0, _utils.cx)(className, _Dropdown2.classes.dropdownRoot),
       ref: handleRef,
       view: view,
       size: size
-    }, rest), /*#__PURE__*/_react["default"].createElement(_Dropdown.StyledDropdown, null, children)));
+    }, rest), /*#__PURE__*/_react["default"].createElement(_Dropdown.StyledDropdown, null, childrenMemo)));
   });
 };
 var dropdownConfig = exports.dropdownConfig = {

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

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Popover = /*#__PURE__*/(0, _engines.component)(_Popover.popoverConfig);
 var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
   componentId: "plasma-new-hope__sc-13ezpo5-0"
-})([".", "{display:block;}"], /*#__PURE__*/String(_Popover.popoverClasses.target));
+})([".", ",.", "{display:block;}"], /*#__PURE__*/String(_Popover.popoverClasses.wrapper), /*#__PURE__*/String(_Popover.popoverClasses.target));
 var StyledDropdown = exports.StyledDropdown = /*#__PURE__*/_styledComponents["default"].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(", ");"], _Dropdown.tokens.background, _Dropdown.tokens.boxShadow, _Dropdown.tokens.borderRadius, _Dropdown.tokens.width, _Dropdown.tokens.height, _Dropdown.tokens.paddingTop, _Dropdown.tokens.paddingRight, _Dropdown.tokens.paddingBottom, _Dropdown.tokens.paddingLeft);

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
+  dropdownRoot: 'dropdown-root',
   dropdownItemIsSelected: 'dropdown-item-is-selected',
   dropdownItemIsDisabled: 'dropdown-item-is-disabled'
 };

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyNavigation = exports.Keys = void 0;
+var _react = /*#__PURE__*/require("react");
+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; }
+var Keys = exports.Keys = {
+  Tab: 'Tab',
+  Enter: 'Enter',
+  Escape: 'Escape',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown'
+};
+var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref) {
+  var itemsRefs = _ref.itemsRefs,
+    opened = _ref.opened,
+    updateOpened = _ref.updateOpened;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectItemIndex = _useState2[0],
+    setSelectItemIndex = _useState2[1];
+  (0, _react.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 = (0, _react.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/cjs/components/Dropdown/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   dropdownRoot: true,
   dropdownConfig: true,
   dropdownClasses: true,
-  dropdownTokens: true
+  dropdownTokens: true,
+  useDropdownKeyNavigation: true
 };
 Object.defineProperty(exports, "dropdownClasses", {
   enumerable: true,
@@ -33,8 +34,15 @@ Object.defineProperty(exports, "dropdownTokens", {
     return _Dropdown2.tokens;
   }
 });
+Object.defineProperty(exports, "useDropdownKeyNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _useKeyboardNavigation.useKeyNavigation;
+  }
+});
 var _Dropdown = /*#__PURE__*/require("./Dropdown");
 var _Dropdown2 = /*#__PURE__*/require("./Dropdown.tokens");
+var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
 var _ui = /*#__PURE__*/require("./ui");
 Object.keys(_ui).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -13,7 +13,7 @@ var _utils2 = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _DropdownItem = /*#__PURE__*/require("./DropdownItem.styles");
-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 _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 _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); }
@@ -37,10 +37,11 @@ var dropdownItemRoot = exports.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,
@@ -74,7 +75,7 @@ var dropdownItemRoot = exports.dropdownItemRoot = function dropdownItemRoot(Root
       value: value,
       checked: checked || isSelected,
       disabled: disabled,
-      tabIndex: 0
+      tabIndex: -1
     }, !disabled && {
       onChange: handleOnChange
     });
@@ -94,6 +95,7 @@ var dropdownItemRoot = exports.dropdownItemRoot = function dropdownItemRoot(Root
       ref: outerRootRef,
       tabIndex: 0,
       "aria-disabled": disabled,
+      "aria-selected": isSelected,
       onClick: handleOnClick,
       "data-value": value
     }, rest), text ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentLeft, null, ContentLeftComponent && ContentLeft), /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledText, null, text), /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentRight, null, ContentRightComponent && ContentRight)) : children);

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