@salutejs/plasma-new-hope 0.88.0-canary.1233.9420319803.0 → 0.88.0-canary.1233.9437372350.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (136) hide show
  1. package/cjs/components/Chip/Chip.css +5 -5
  2. package/cjs/components/Chip/Chip.styles.js +1 -1
  3. package/cjs/components/Chip/Chip.styles.js.map +1 -1
  4. package/cjs/components/Chip/{Chip.styles_1l2rsrr.css → Chip.styles_1mwwhiw.css} +1 -1
  5. package/cjs/components/Combobox/Combobox.css +5 -5
  6. package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +5 -5
  7. package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +5 -5
  8. package/cjs/components/Pagination/Pagination.css +10 -11
  9. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -11
  10. package/cjs/components/Range/Range.css +5 -5
  11. package/cjs/components/Select/Select.css +10 -11
  12. package/cjs/components/Select/Select.js +10 -6
  13. package/cjs/components/Select/Select.js.map +1 -1
  14. package/cjs/components/Select/Select.styles.js +2 -0
  15. package/cjs/components/Select/Select.styles.js.map +1 -1
  16. package/cjs/components/Select/elements/Inner/Inner.css +10 -11
  17. package/cjs/components/Select/elements/Inner/Inner.js +7 -2
  18. package/cjs/components/Select/elements/Inner/Inner.js.map +1 -1
  19. package/cjs/components/Select/elements/Inner/elements/Item/Item.css +10 -11
  20. package/cjs/components/Select/elements/Inner/elements/Item/Item.js +17 -6
  21. package/cjs/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
  22. package/cjs/components/Select/elements/Target/Target.css +10 -11
  23. package/cjs/components/Select/elements/Target/Target.js +9 -3
  24. package/cjs/components/Select/elements/Target/Target.js.map +1 -1
  25. package/cjs/components/Select/elements/Target/elements/Button/Button.css +5 -6
  26. package/cjs/components/Select/elements/Target/elements/Button/Button.js +28 -32
  27. package/cjs/components/Select/elements/Target/elements/Button/Button.js.map +1 -1
  28. package/cjs/components/Select/elements/Target/elements/Button/Button.styles.js +2 -8
  29. package/cjs/components/Select/elements/Target/elements/Button/Button.styles.js.map +1 -1
  30. package/cjs/components/Select/elements/Target/elements/Button/{Button.styles_1bweq1y.css → Button.styles_1r519o1.css} +1 -2
  31. package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.css +5 -5
  32. package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
  33. package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js.map +1 -1
  34. package/cjs/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.css +5 -5
  35. package/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
  36. package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  37. package/cjs/components/Select/utils/getButtonLabel.js +47 -0
  38. package/cjs/components/Select/utils/getButtonLabel.js.map +1 -0
  39. package/cjs/components/Slider/Slider.css +5 -5
  40. package/cjs/components/Slider/components/Double/Double.css +5 -5
  41. package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +5 -5
  42. package/cjs/index.css +10 -11
  43. package/es/components/Chip/Chip.css +5 -5
  44. package/es/components/Chip/Chip.styles.js +1 -1
  45. package/es/components/Chip/Chip.styles.js.map +1 -1
  46. package/es/components/Chip/{Chip.styles_1l2rsrr.css → Chip.styles_1mwwhiw.css} +1 -1
  47. package/es/components/Combobox/Combobox.css +5 -5
  48. package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +5 -5
  49. package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +5 -5
  50. package/es/components/Pagination/Pagination.css +10 -11
  51. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -11
  52. package/es/components/Range/Range.css +5 -5
  53. package/es/components/Select/Select.css +10 -11
  54. package/es/components/Select/Select.js +10 -6
  55. package/es/components/Select/Select.js.map +1 -1
  56. package/es/components/Select/Select.styles.js +2 -0
  57. package/es/components/Select/Select.styles.js.map +1 -1
  58. package/es/components/Select/elements/Inner/Inner.css +10 -11
  59. package/es/components/Select/elements/Inner/Inner.js +7 -2
  60. package/es/components/Select/elements/Inner/Inner.js.map +1 -1
  61. package/es/components/Select/elements/Inner/elements/Item/Item.css +10 -11
  62. package/es/components/Select/elements/Inner/elements/Item/Item.js +17 -6
  63. package/es/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
  64. package/es/components/Select/elements/Target/Target.css +10 -11
  65. package/es/components/Select/elements/Target/Target.js +9 -3
  66. package/es/components/Select/elements/Target/Target.js.map +1 -1
  67. package/es/components/Select/elements/Target/elements/Button/Button.css +5 -6
  68. package/es/components/Select/elements/Target/elements/Button/Button.js +29 -33
  69. package/es/components/Select/elements/Target/elements/Button/Button.js.map +1 -1
  70. package/es/components/Select/elements/Target/elements/Button/Button.styles.js +3 -8
  71. package/es/components/Select/elements/Target/elements/Button/Button.styles.js.map +1 -1
  72. package/es/components/Select/elements/Target/elements/Button/{Button.styles_1bweq1y.css → Button.styles_1r519o1.css} +1 -2
  73. package/es/components/Select/elements/Target/elements/Textfield/Textfield.css +5 -5
  74. package/es/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
  75. package/es/components/Select/elements/Target/elements/Textfield/Textfield.js.map +1 -1
  76. package/es/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.css +5 -5
  77. package/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
  78. package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  79. package/es/components/Select/utils/getButtonLabel.js +43 -0
  80. package/es/components/Select/utils/getButtonLabel.js.map +1 -0
  81. package/es/components/Slider/Slider.css +5 -5
  82. package/es/components/Slider/components/Double/Double.css +5 -5
  83. package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +5 -5
  84. package/es/index.css +10 -11
  85. package/package.json +2 -2
  86. package/styled-components/cjs/components/Chip/Chip.styles.js +1 -1
  87. package/styled-components/cjs/components/Select/Select.js +20 -16
  88. package/styled-components/cjs/components/Select/elements/Inner/Inner.js +7 -2
  89. package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.js +16 -5
  90. package/styled-components/cjs/components/Select/elements/Target/Target.js +9 -3
  91. package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.js +28 -31
  92. package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.styles.js +3 -6
  93. package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
  94. package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
  95. package/styled-components/cjs/components/Select/utils/getButtonLabel.js +43 -0
  96. package/styled-components/cjs/components/Select/utils/index.js +8 -1
  97. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +2 -2
  98. package/styled-components/es/components/Chip/Chip.styles.js +1 -1
  99. package/styled-components/es/components/Select/Select.js +10 -6
  100. package/styled-components/es/components/Select/elements/Inner/Inner.js +7 -2
  101. package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.js +16 -5
  102. package/styled-components/es/components/Select/elements/Target/Target.js +9 -3
  103. package/styled-components/es/components/Select/elements/Target/elements/Button/Button.js +30 -33
  104. package/styled-components/es/components/Select/elements/Target/elements/Button/Button.styles.js +2 -5
  105. package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
  106. package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
  107. package/styled-components/es/components/Select/utils/getButtonLabel.js +37 -0
  108. package/styled-components/es/components/Select/utils/index.js +2 -1
  109. package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +2 -2
  110. package/types/components/Chip/Chip.styles.d.ts.map +1 -1
  111. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +12 -8
  112. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
  113. package/types/components/Select/Select.d.ts.map +1 -1
  114. package/types/components/Select/Select.types.d.ts +20 -8
  115. package/types/components/Select/Select.types.d.ts.map +1 -1
  116. package/types/components/Select/elements/Inner/Inner.d.ts.map +1 -1
  117. package/types/components/Select/elements/Inner/elements/Item/Item.d.ts.map +1 -1
  118. package/types/components/Select/elements/Inner/elements/Item/Item.types.d.ts +37 -1
  119. package/types/components/Select/elements/Inner/elements/Item/Item.types.d.ts.map +1 -1
  120. package/types/components/Select/elements/Target/Target.d.ts.map +1 -1
  121. package/types/components/Select/elements/Target/Target.types.d.ts +5 -3
  122. package/types/components/Select/elements/Target/Target.types.d.ts.map +1 -1
  123. package/types/components/Select/elements/Target/elements/Button/Button.d.ts.map +1 -1
  124. package/types/components/Select/elements/Target/elements/Button/Button.styles.d.ts +0 -1
  125. package/types/components/Select/elements/Target/elements/Button/Button.styles.d.ts.map +1 -1
  126. package/types/components/Select/elements/Target/elements/Button/Button.types.d.ts +1 -1
  127. package/types/components/Select/elements/Target/elements/Button/Button.types.d.ts.map +1 -1
  128. package/types/components/Select/elements/Target/elements/Textfield/Textfield.d.ts.map +1 -1
  129. package/types/components/Select/elements/Target/elements/Textfield/Textfield.types.d.ts +1 -1
  130. package/types/components/Select/elements/Target/elements/Textfield/Textfield.types.d.ts.map +1 -1
  131. package/types/components/Select/utils/getButtonLabel.d.ts +3 -0
  132. package/types/components/Select/utils/getButtonLabel.d.ts.map +1 -0
  133. package/types/components/Select/utils/index.d.ts +1 -0
  134. package/types/components/Select/utils/index.d.ts.map +1 -1
  135. package/types/examples/plasma_b2c/components/Select/Select.d.ts +12 -8
  136. package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
@@ -24,7 +24,9 @@ var Target = exports.Target = function Target(_ref) {
24
24
  size = _ref.size,
25
25
  contentLeft = _ref.contentLeft,
26
26
  disabled = _ref.disabled,
27
- renderTargetLabel = _ref.renderTargetLabel;
27
+ renderValue = _ref.renderValue,
28
+ focusedPath = _ref.focusedPath,
29
+ focusedToValueMap = _ref.focusedToValueMap;
28
30
  return target === 'button' ? /*#__PURE__*/_react["default"].createElement(_Button.Button, {
29
31
  opened: opened,
30
32
  value: value,
@@ -35,7 +37,9 @@ var Target = exports.Target = function Target(_ref) {
35
37
  label: label,
36
38
  size: size,
37
39
  disabled: disabled,
38
- renderTargetLabel: renderTargetLabel
40
+ renderValue: renderValue,
41
+ focusedPath: focusedPath,
42
+ focusedToValueMap: focusedToValueMap
39
43
  }) : /*#__PURE__*/_react["default"].createElement(_Textfield.Textfield, {
40
44
  opened: opened,
41
45
  value: value,
@@ -51,6 +55,8 @@ var Target = exports.Target = function Target(_ref) {
51
55
  size: size,
52
56
  contentLeft: contentLeft,
53
57
  disabled: disabled,
54
- renderTargetLabel: renderTargetLabel
58
+ renderValue: renderValue,
59
+ focusedPath: focusedPath,
60
+ focusedToValueMap: focusedToValueMap
55
61
  });
56
62
  };
@@ -7,39 +7,31 @@ exports.Button = void 0;
7
7
  var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
8
  var _utils = /*#__PURE__*/require("../../../../../../utils");
9
9
  var _Select = /*#__PURE__*/require("../../../../Select.tokens");
10
+ var _utils2 = /*#__PURE__*/require("../../../../utils");
10
11
  var _Button = /*#__PURE__*/require("./Button.styles");
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
- var getLabel = function getLabel(_ref) {
13
- var value = _ref.value,
14
- label = _ref.label,
13
+ var Button = exports.Button = function Button(_ref) {
14
+ var opened = _ref.opened,
15
+ value = _ref.value,
15
16
  isTargetAmount = _ref.isTargetAmount,
16
17
  multiselect = _ref.multiselect,
17
- valueToItemMap = _ref.valueToItemMap;
18
- if ((0, _utils.isEmpty)(value)) {
19
- return label;
20
- }
21
- if (multiselect && isTargetAmount) {
22
- return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
23
- }
24
- if (multiselect && Array.isArray(value)) {
25
- return value.map(function (value) {
26
- return valueToItemMap.get(value).label;
27
- }).join(', ');
28
- }
29
- return valueToItemMap.get(value.toString()).label;
30
- };
31
- var Button = exports.Button = function Button(_ref2) {
32
- var opened = _ref2.opened,
33
- value = _ref2.value,
34
- isTargetAmount = _ref2.isTargetAmount,
35
- multiselect = _ref2.multiselect,
36
- valueToItemMap = _ref2.valueToItemMap,
37
- onKeyDown = _ref2.onKeyDown,
38
- label = _ref2.label,
39
- size = _ref2.size,
40
- disabled = _ref2.disabled;
18
+ valueToItemMap = _ref.valueToItemMap,
19
+ onKeyDown = _ref.onKeyDown,
20
+ label = _ref.label,
21
+ size = _ref.size,
22
+ disabled = _ref.disabled,
23
+ renderValue = _ref.renderValue,
24
+ focusedPath = _ref.focusedPath,
25
+ focusedToValueMap = _ref.focusedToValueMap;
41
26
  var withArrowInverse = opened ? _Select.classes.arrowInverse : undefined;
42
27
  var iconSize = size === 'xs' ? 'xs' : 's';
28
+ var getActiveDescendant = function getActiveDescendant() {
29
+ var _focusedToValueMap$ge;
30
+ var focusedPathAsString = focusedPath.reduce(function (acc, n) {
31
+ return "".concat(acc, "/").concat(n);
32
+ }, '').replace(/^(\/)/, '');
33
+ return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
34
+ };
43
35
  return /*#__PURE__*/_react["default"].createElement(_Button.ButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.StyledButton, {
44
36
  stretching: "filled",
45
37
  onKeyDown: onKeyDown,
@@ -49,12 +41,17 @@ var Button = exports.Button = function Button(_ref2) {
49
41
  size: iconSize,
50
42
  color: "inherit",
51
43
  className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
52
- }))
53
- }, /*#__PURE__*/_react["default"].createElement(_Button.InnerWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, getLabel({
44
+ })),
45
+ role: "combobox",
46
+ "aria-controls": "tree_level_1",
47
+ "aria-expanded": opened,
48
+ "aria-activedescendant": getActiveDescendant()
49
+ }, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
54
50
  value: value,
55
51
  isTargetAmount: isTargetAmount,
56
52
  multiselect: multiselect,
57
53
  valueToItemMap: valueToItemMap,
58
- label: label
59
- })))));
54
+ label: label,
55
+ renderValue: renderValue
56
+ }))));
60
57
  };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledButton = exports.StyledArrow = exports.Label = exports.InnerWrapper = exports.IconArrowWrapper = exports.ButtonWrapper = void 0;
6
+ exports.StyledButton = exports.StyledArrow = exports.Label = exports.IconArrowWrapper = exports.ButtonWrapper = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _mixins = /*#__PURE__*/require("../../../../../../mixins");
9
9
  var _Icon = /*#__PURE__*/require("../../../../../_Icon");
@@ -25,9 +25,6 @@ var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["defa
25
25
  var ButtonWrapper = exports.ButtonWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
26
26
  componentId: "plasma-new-hope__sc-m19uar-3"
27
27
  })(["display:inline;.", "::before{box-shadow:none !important;}"], _Select.classes.selectWithoutBoxShadow);
28
- var InnerWrapper = exports.InnerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
29
- componentId: "plasma-new-hope__sc-m19uar-4"
30
- })(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], _Select.classes.arrowInverse);
31
28
  var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].div.withConfig({
32
- componentId: "plasma-new-hope__sc-m19uar-5"
33
- })(["width:100%;text-align:left;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
29
+ componentId: "plasma-new-hope__sc-m19uar-4"
30
+ })(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Select.classes.arrowInverse);
@@ -19,7 +19,8 @@ var getLabel = function getLabel(_ref) {
19
19
  placeholder = _ref.placeholder,
20
20
  focusedChipIndex = _ref.focusedChipIndex,
21
21
  labelPlacement = _ref.labelPlacement,
22
- size = _ref.size;
22
+ size = _ref.size,
23
+ renderValue = _ref.renderValue;
23
24
  if ((0, _utils.isEmpty)(value)) {
24
25
  if (!label || labelPlacement === 'outer') {
25
26
  return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
@@ -34,8 +35,9 @@ var getLabel = function getLabel(_ref) {
34
35
  }
35
36
  if (Array.isArray(value)) {
36
37
  return value.map(function (currentValue, index) {
38
+ var itemLabel = valueToItemMap.get(currentValue).label;
37
39
  return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
38
- text: valueToItemMap.get(currentValue).label,
40
+ text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
39
41
  onClick: function onClick(e) {
40
42
  e.stopPropagation();
41
43
  onChipClick(currentValue);
@@ -44,10 +46,11 @@ var getLabel = function getLabel(_ref) {
44
46
  });
45
47
  });
46
48
  }
49
+ var itemLabel = valueToItemMap.get(value).label;
47
50
  if (!label || labelPlacement === 'outer') {
48
- return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, valueToItemMap.get(value).label);
51
+ return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
49
52
  }
50
- return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, valueToItemMap.get(value).label));
53
+ return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
51
54
  };
52
55
  var Textfield = exports.Textfield = function Textfield(_ref2) {
53
56
  var opened = _ref2.opened,
@@ -63,9 +66,19 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
63
66
  labelPlacement = _ref2.labelPlacement,
64
67
  size = _ref2.size,
65
68
  contentLeft = _ref2.contentLeft,
66
- disabled = _ref2.disabled;
69
+ disabled = _ref2.disabled,
70
+ renderValue = _ref2.renderValue,
71
+ focusedPath = _ref2.focusedPath,
72
+ focusedToValueMap = _ref2.focusedToValueMap;
67
73
  var withArrowInverse = opened ? _Select.classes.arrowInverse : undefined;
68
74
  var iconSize = size === 'xs' ? 'xs' : 's';
75
+ var getActiveDescendant = function getActiveDescendant() {
76
+ var _focusedToValueMap$ge;
77
+ var focusedPathAsString = focusedPath.reduce(function (acc, n) {
78
+ return "".concat(acc, "/").concat(n);
79
+ }, '').replace(/^(\/)/, '');
80
+ return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
81
+ };
69
82
  return /*#__PURE__*/_react["default"].createElement(_Textfield.TextfieldWrapper, {
70
83
  opened: opened,
71
84
  value: value
@@ -73,7 +86,11 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
73
86
  stretching: "filled",
74
87
  className: (0, _utils.cx)(_Select.classes.textfieldTarget, opened || focusedChipIndex !== null ? _Select.classes.selectWithoutBoxShadow : undefined),
75
88
  onKeyDown: onKeyDown,
76
- disabled: disabled
89
+ disabled: disabled,
90
+ role: "combobox",
91
+ "aria-controls": "tree_level_1",
92
+ "aria-expanded": opened,
93
+ "aria-activedescendant": getActiveDescendant()
77
94
  }, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, contentLeft && (!multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
78
95
  value: value,
79
96
  isTargetAmount: isTargetAmount,
@@ -83,7 +100,8 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
83
100
  placeholder: placeholder,
84
101
  focusedChipIndex: focusedChipIndex,
85
102
  labelPlacement: labelPlacement,
86
- size: size
103
+ size: size,
104
+ renderValue: renderValue
87
105
  })), /*#__PURE__*/_react["default"].createElement(_Textfield.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledArrow, {
88
106
  size: iconSize,
89
107
  color: "inherit",
@@ -166,7 +166,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
166
166
  {
167
167
  event.preventDefault();
168
168
  var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
169
- if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
169
+ if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
170
170
  break;
171
171
  }
172
172
  handlePressDown(_currentItem2);
@@ -181,7 +181,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
181
181
  });
182
182
  }
183
183
  var _currentItem3 = getFurtherPath(focusedPath, focusedToValueMap);
184
- if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled) {
184
+ if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled || _currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.disabled) {
185
185
  break;
186
186
  }
187
187
  if (!path[0]) {
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getButtonLabel = void 0;
7
+ var _utils = /*#__PURE__*/require("../../../utils");
8
+ var getLabel = function getLabel(_ref) {
9
+ var renderValue = _ref.renderValue,
10
+ value = _ref.value,
11
+ valueToItemMap = _ref.valueToItemMap;
12
+ var _ref2 = valueToItemMap.get(value.toString()),
13
+ label = _ref2.label;
14
+ return renderValue ? renderValue(value, label) : label;
15
+ };
16
+ var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
17
+ var value = _ref3.value,
18
+ label = _ref3.label,
19
+ isTargetAmount = _ref3.isTargetAmount,
20
+ multiselect = _ref3.multiselect,
21
+ valueToItemMap = _ref3.valueToItemMap,
22
+ renderValue = _ref3.renderValue;
23
+ if ((0, _utils.isEmpty)(value)) {
24
+ return label;
25
+ }
26
+ if (multiselect && isTargetAmount) {
27
+ return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
28
+ }
29
+ if (multiselect && Array.isArray(value)) {
30
+ return value.map(function (itemValue) {
31
+ return getLabel({
32
+ renderValue: renderValue,
33
+ value: itemValue,
34
+ valueToItemMap: valueToItemMap
35
+ });
36
+ }).join(', ');
37
+ }
38
+ return getLabel({
39
+ renderValue: renderValue,
40
+ value: value,
41
+ valueToItemMap: valueToItemMap
42
+ });
43
+ };
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "getButtonLabel", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _getButtonLabel.getButtonLabel;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "getCorrectHeight", {
7
13
  enumerable: true,
8
14
  get: function get() {
@@ -51,4 +57,5 @@ var _updateAncestors = /*#__PURE__*/require("./updateAncestors");
51
57
  var _updateSingleAncestors = /*#__PURE__*/require("./updateSingleAncestors");
52
58
  var _sizeToIconSize = /*#__PURE__*/require("./sizeToIconSize");
53
59
  var _getCorrectHeight = /*#__PURE__*/require("./getCorrectHeight");
54
- var _getView = /*#__PURE__*/require("./getView");
60
+ var _getView = /*#__PURE__*/require("./getView");
61
+ var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");
@@ -517,7 +517,7 @@ const CommonStory = (args: StorySelectProps) => {
517
517
  <td>Clear</td>
518
518
 
519
519
  <td>
520
- <div style={{ display: 'flex' }}>
520
+ <div style={{ width: '200px' }}>
521
521
  <Select
522
522
  {...args}
523
523
  multiselect={false}
@@ -529,7 +529,7 @@ const CommonStory = (args: StorySelectProps) => {
529
529
  </div>
530
530
  </td>
531
531
  <td>
532
- <div style={{ display: 'flex' }}>
532
+ <div style={{ width: '200px' }}>
533
533
  <Select
534
534
  {...args}
535
535
  multiselect
@@ -14,4 +14,4 @@ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
14
14
  })(["display:flex;margin-left:var(", ");margin-right:var(", ");"], tokens.rightContentMarginLeft, tokens.rightContentMarginRight);
15
15
  export var StyledContentClear = /*#__PURE__*/styled.div.withConfig({
16
16
  componentId: "plasma-new-hope__sc-bm1fxi-3"
17
- })(["display:flex;margin-left:var(", ");margin-right:var(", ");color:var(", ");:hover{color:red;}"], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor);
17
+ })(["display:flex;margin-left:var(", ");margin-right:var(", ");color:var(", ");"], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor);
@@ -1,5 +1,5 @@
1
1
  var _SelectNotFoundConten;
2
- var _excluded = ["value", "onChange", "target", "multiselect", "separator", "items", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderTargetLabel"];
2
+ var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue"];
3
3
  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); }
4
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
5
  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."); }
@@ -12,6 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
12
12
  import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect } from 'react';
13
13
  import { isEmpty } from '../../utils';
14
14
  import { useOutsideClick } from '../../hooks';
15
+ import { getPlacements } from '../Dropdown/utils';
15
16
  import { useKeyNavigation } from './hooks/useKeyboardNavigation';
16
17
  import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView } from './utils';
17
18
  import { Inner } from './elements/Inner/Inner';
@@ -33,10 +34,10 @@ export var selectRoot = function selectRoot(Root) {
33
34
  onChange = props.onChange,
34
35
  _props$target = props.target,
35
36
  target = _props$target === void 0 ? 'textfield' : _props$target,
36
- _props$multiselect = props.multiselect,
37
- multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
38
37
  separator = props.separator,
39
38
  items = props.items,
39
+ _props$placement = props.placement,
40
+ placement = _props$placement === void 0 ? 'bottom' : _props$placement,
40
41
  label = props.label,
41
42
  _props$labelPlacement = props.labelPlacement,
42
43
  labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
@@ -61,8 +62,9 @@ export var selectRoot = function selectRoot(Root) {
61
62
  _props$variant = props.variant,
62
63
  variant = _props$variant === void 0 ? 'normal' : _props$variant,
63
64
  portal = props.portal,
64
- renderTargetLabel = props.renderTargetLabel,
65
+ renderValue = props.renderValue,
65
66
  rest = _objectWithoutProperties(props, _excluded);
67
+ var multiselect = Array.isArray(value);
66
68
  var transformedItems = useMemo(function () {
67
69
  return initialItemsTransform(items);
68
70
  }, [items]);
@@ -226,9 +228,9 @@ export var selectRoot = function selectRoot(Root) {
226
228
  }, /*#__PURE__*/React.createElement(StyledPopover, {
227
229
  ref: targetRef,
228
230
  isOpen: isCurrentListOpen,
231
+ placement: getPlacements(placement),
229
232
  usePortal: Boolean(portal),
230
233
  frame: portal,
231
- placement: "bottom-start",
232
234
  onToggle: handleToggle,
233
235
  trigger: "click",
234
236
  target: /*#__PURE__*/React.createElement(Target, {
@@ -238,6 +240,8 @@ export var selectRoot = function selectRoot(Root) {
238
240
  isTargetAmount: isTargetAmount,
239
241
  multiselect: multiselect,
240
242
  valueToItemMap: valueToItemMap,
243
+ focusedPath: focusedPath,
244
+ focusedToValueMap: focusedToValueMap,
241
245
  onChipClick: handleChipClick,
242
246
  label: label,
243
247
  placeholder: placeholder,
@@ -247,7 +251,7 @@ export var selectRoot = function selectRoot(Root) {
247
251
  size: size,
248
252
  contentLeft: contentLeft,
249
253
  disabled: disabled,
250
- renderTargetLabel: renderTargetLabel
254
+ renderValue: renderValue
251
255
  }),
252
256
  preventOverflow: false,
253
257
  closeOnOverlayClick: true
@@ -37,7 +37,11 @@ export var Inner = function Inner(_ref) {
37
37
  item: item,
38
38
  path: path,
39
39
  currentLevel: currentLevel,
40
- index: index
40
+ index: index,
41
+ ariaControls: listId,
42
+ ariaExpanded: isCurrentListOpen,
43
+ ariaLevel: nextLevel,
44
+ ariaLabel: item.label
41
45
  }),
42
46
  onToggle: handleToggle,
43
47
  isFocusTrapped: false,
@@ -63,6 +67,7 @@ export var Inner = function Inner(_ref) {
63
67
  item: item,
64
68
  path: path,
65
69
  index: index,
66
- currentLevel: currentLevel
70
+ currentLevel: currentLevel,
71
+ itemRole: "option"
67
72
  });
68
73
  };
@@ -10,9 +10,15 @@ export var Item = function Item(_ref) {
10
10
  var item = _ref.item,
11
11
  path = _ref.path,
12
12
  currentLevel = _ref.currentLevel,
13
- index = _ref.index;
13
+ index = _ref.index,
14
+ ariaControls = _ref.ariaControls,
15
+ ariaExpanded = _ref.ariaExpanded,
16
+ ariaLevel = _ref.ariaLevel,
17
+ ariaLabel = _ref.ariaLabel,
18
+ itemRole = _ref.itemRole;
14
19
  var value = item.value,
15
20
  label = item.label,
21
+ disabled = item.disabled,
16
22
  isDisabled = item.isDisabled,
17
23
  contentLeft = item.contentLeft,
18
24
  contentRight = item.contentRight;
@@ -25,7 +31,7 @@ export var Item = function Item(_ref) {
25
31
  handleCheckboxChange = _useContext.handleCheckboxChange,
26
32
  handleItemClick = _useContext.handleItemClick,
27
33
  variant = _useContext.variant;
28
- var isDisabledClassName = isDisabled ? classes.dropdownItemIsDisabled : undefined;
34
+ var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
29
35
  var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
30
36
  var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
31
37
  useEffect(function () {
@@ -38,12 +44,12 @@ export var Item = function Item(_ref) {
38
44
  }
39
45
  }, [focusedClass]);
40
46
  var handleChange = function handleChange(e) {
41
- if (isDisabled) return;
47
+ if (disabled || isDisabled) return;
42
48
  e.stopPropagation();
43
49
  handleCheckboxChange(item);
44
50
  };
45
51
  var handleClick = function handleClick(e) {
46
- if (isDisabled) return;
52
+ if (disabled || isDisabled) return;
47
53
  handleItemClick(item, e);
48
54
  };
49
55
  return /*#__PURE__*/React.createElement(Wrapper, {
@@ -51,7 +57,12 @@ export var Item = function Item(_ref) {
51
57
  id: value.toString(),
52
58
  ref: ref,
53
59
  onClick: handleClick,
54
- variant: variant
60
+ variant: variant,
61
+ "aria-controls": ariaControls,
62
+ "aria-expanded": ariaExpanded,
63
+ "aria-level": ariaLevel,
64
+ "aria-label": ariaLabel,
65
+ role: itemRole
55
66
  }, /*#__PURE__*/React.createElement(IconWrapper, {
56
67
  variant: variant
57
68
  }, multiselect && /*#__PURE__*/React.createElement("span", {
@@ -17,7 +17,9 @@ export var Target = function Target(_ref) {
17
17
  size = _ref.size,
18
18
  contentLeft = _ref.contentLeft,
19
19
  disabled = _ref.disabled,
20
- renderTargetLabel = _ref.renderTargetLabel;
20
+ renderValue = _ref.renderValue,
21
+ focusedPath = _ref.focusedPath,
22
+ focusedToValueMap = _ref.focusedToValueMap;
21
23
  return target === 'button' ? /*#__PURE__*/React.createElement(Button, {
22
24
  opened: opened,
23
25
  value: value,
@@ -28,7 +30,9 @@ export var Target = function Target(_ref) {
28
30
  label: label,
29
31
  size: size,
30
32
  disabled: disabled,
31
- renderTargetLabel: renderTargetLabel
33
+ renderValue: renderValue,
34
+ focusedPath: focusedPath,
35
+ focusedToValueMap: focusedToValueMap
32
36
  }) : /*#__PURE__*/React.createElement(Textfield, {
33
37
  opened: opened,
34
38
  value: value,
@@ -44,6 +48,8 @@ export var Target = function Target(_ref) {
44
48
  size: size,
45
49
  contentLeft: contentLeft,
46
50
  disabled: disabled,
47
- renderTargetLabel: renderTargetLabel
51
+ renderValue: renderValue,
52
+ focusedPath: focusedPath,
53
+ focusedToValueMap: focusedToValueMap
48
54
  });
49
55
  };
@@ -1,38 +1,30 @@
1
1
  import React from 'react';
2
- import { cx, isEmpty } from '../../../../../../utils';
2
+ import { cx } from '../../../../../../utils';
3
3
  import { classes } from '../../../../Select.tokens';
4
- import { StyledButton, StyledArrow, InnerWrapper, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
5
- var getLabel = function getLabel(_ref) {
6
- var value = _ref.value,
7
- label = _ref.label,
4
+ import { getButtonLabel } from '../../../../utils';
5
+ import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
6
+ export var Button = function Button(_ref) {
7
+ var opened = _ref.opened,
8
+ value = _ref.value,
8
9
  isTargetAmount = _ref.isTargetAmount,
9
10
  multiselect = _ref.multiselect,
10
- valueToItemMap = _ref.valueToItemMap;
11
- if (isEmpty(value)) {
12
- return label;
13
- }
14
- if (multiselect && isTargetAmount) {
15
- return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
16
- }
17
- if (multiselect && Array.isArray(value)) {
18
- return value.map(function (value) {
19
- return valueToItemMap.get(value).label;
20
- }).join(', ');
21
- }
22
- return valueToItemMap.get(value.toString()).label;
23
- };
24
- export var Button = function Button(_ref2) {
25
- var opened = _ref2.opened,
26
- value = _ref2.value,
27
- isTargetAmount = _ref2.isTargetAmount,
28
- multiselect = _ref2.multiselect,
29
- valueToItemMap = _ref2.valueToItemMap,
30
- onKeyDown = _ref2.onKeyDown,
31
- label = _ref2.label,
32
- size = _ref2.size,
33
- disabled = _ref2.disabled;
11
+ valueToItemMap = _ref.valueToItemMap,
12
+ onKeyDown = _ref.onKeyDown,
13
+ label = _ref.label,
14
+ size = _ref.size,
15
+ disabled = _ref.disabled,
16
+ renderValue = _ref.renderValue,
17
+ focusedPath = _ref.focusedPath,
18
+ focusedToValueMap = _ref.focusedToValueMap;
34
19
  var withArrowInverse = opened ? classes.arrowInverse : undefined;
35
20
  var iconSize = size === 'xs' ? 'xs' : 's';
21
+ var getActiveDescendant = function getActiveDescendant() {
22
+ var _focusedToValueMap$ge;
23
+ var focusedPathAsString = focusedPath.reduce(function (acc, n) {
24
+ return "".concat(acc, "/").concat(n);
25
+ }, '').replace(/^(\/)/, '');
26
+ return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
27
+ };
36
28
  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
37
29
  stretching: "filled",
38
30
  onKeyDown: onKeyDown,
@@ -42,12 +34,17 @@ export var Button = function Button(_ref2) {
42
34
  size: iconSize,
43
35
  color: "inherit",
44
36
  className: cx(classes.selectTargetArrow, withArrowInverse)
45
- }))
46
- }, /*#__PURE__*/React.createElement(InnerWrapper, null, /*#__PURE__*/React.createElement(Label, null, getLabel({
37
+ })),
38
+ role: "combobox",
39
+ "aria-controls": "tree_level_1",
40
+ "aria-expanded": opened,
41
+ "aria-activedescendant": getActiveDescendant()
42
+ }, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
47
43
  value: value,
48
44
  isTargetAmount: isTargetAmount,
49
45
  multiselect: multiselect,
50
46
  valueToItemMap: valueToItemMap,
51
- label: label
52
- })))));
47
+ label: label,
48
+ renderValue: renderValue
49
+ }))));
53
50
  };
@@ -18,9 +18,6 @@ export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withCon
18
18
  export var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
19
19
  componentId: "plasma-new-hope__sc-m19uar-3"
20
20
  })(["display:inline;.", "::before{box-shadow:none !important;}"], classes.selectWithoutBoxShadow);
21
- export var InnerWrapper = /*#__PURE__*/styled.div.withConfig({
22
- componentId: "plasma-new-hope__sc-m19uar-4"
23
- })(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], classes.arrowInverse);
24
21
  export var Label = /*#__PURE__*/styled.div.withConfig({
25
- componentId: "plasma-new-hope__sc-m19uar-5"
26
- })(["width:100%;text-align:left;", ""], /*#__PURE__*/applyEllipsis());
22
+ componentId: "plasma-new-hope__sc-m19uar-4"
23
+ })(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/applyEllipsis(), classes.arrowInverse);