@salutejs/plasma-new-hope 0.78.0-canary.1185.8913944828.0 → 0.78.0-canary.1185.8922773956.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (161) hide show
  1. package/cjs/components/Combobox/Combobox.css +5 -0
  2. package/cjs/components/Combobox/Combobox.js +1 -1
  3. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +5 -0
  4. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +1 -1
  5. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +5 -0
  6. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +1 -1
  7. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +5 -0
  8. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +1 -1
  9. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +5 -0
  10. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +1 -1
  11. package/cjs/components/Dropdown/Dropdown.css +5 -0
  12. package/cjs/components/Dropdown/Dropdown.js +2 -2
  13. package/cjs/components/Dropdown/Dropdown.tokens.js +17 -2
  14. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  15. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +1 -1
  16. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  17. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -0
  18. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  19. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +59 -1
  20. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  21. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +30 -0
  22. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
  23. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
  24. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
  25. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +112 -0
  26. package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
  27. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js +9 -0
  28. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
  29. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base_x642ct.css +1 -0
  30. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js +9 -0
  31. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
  32. package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base_x642ct.css +1 -0
  33. package/cjs/components/Dropdown/utils/index.js +15 -0
  34. package/cjs/components/Dropdown/utils/index.js.map +1 -1
  35. package/cjs/components/Pagination/Pagination.css +6 -31
  36. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -31
  37. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  38. package/cjs/components/Select/Select.css +6 -31
  39. package/cjs/components/Select/Select.js +3 -3
  40. package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +5 -0
  41. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  42. package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +5 -0
  43. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  44. package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +5 -0
  45. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  46. package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +5 -0
  47. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  48. package/cjs/components/Select/ui/SelectItem/SelectItem.css +7 -50
  49. package/cjs/components/Select/ui/SelectItem/SelectItem.js +4 -4
  50. package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  51. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  52. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  53. package/cjs/components/Select/ui/SelectItem/SelectItem.styles_vk39mp.css +1 -0
  54. package/cjs/index.css +6 -1
  55. package/cjs/index.js +3 -0
  56. package/cjs/index.js.map +1 -1
  57. package/es/components/Combobox/Combobox.css +5 -0
  58. package/es/components/Combobox/Combobox.js +1 -1
  59. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +5 -0
  60. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +1 -1
  61. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +5 -0
  62. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +1 -1
  63. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +5 -0
  64. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +1 -1
  65. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +5 -0
  66. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +1 -1
  67. package/es/components/Dropdown/Dropdown.css +5 -0
  68. package/es/components/Dropdown/Dropdown.js +2 -2
  69. package/es/components/Dropdown/Dropdown.tokens.js +17 -2
  70. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  71. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +1 -1
  72. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  73. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -0
  74. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  75. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +59 -1
  76. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  77. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +23 -0
  78. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
  79. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
  80. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
  81. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +107 -0
  82. package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
  83. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js +5 -0
  84. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
  85. package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base_x642ct.css +1 -0
  86. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js +5 -0
  87. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
  88. package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base_x642ct.css +1 -0
  89. package/es/components/Dropdown/utils/index.js +16 -2
  90. package/es/components/Dropdown/utils/index.js.map +1 -1
  91. package/es/components/Pagination/Pagination.css +6 -31
  92. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -31
  93. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
  94. package/es/components/Select/Select.css +6 -31
  95. package/es/components/Select/Select.js +3 -3
  96. package/es/components/Select/ui/SelectDivider/SelectDivider.css +5 -0
  97. package/es/components/Select/ui/SelectDivider/SelectDivider.js +1 -1
  98. package/es/components/Select/ui/SelectFooter/SelectFooter.css +5 -0
  99. package/es/components/Select/ui/SelectFooter/SelectFooter.js +1 -1
  100. package/es/components/Select/ui/SelectGroup/SelectGroup.css +5 -0
  101. package/es/components/Select/ui/SelectGroup/SelectGroup.js +1 -1
  102. package/es/components/Select/ui/SelectHeader/SelectHeader.css +5 -0
  103. package/es/components/Select/ui/SelectHeader/SelectHeader.js +1 -1
  104. package/es/components/Select/ui/SelectItem/SelectItem.css +7 -50
  105. package/es/components/Select/ui/SelectItem/SelectItem.js +4 -4
  106. package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  107. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  108. package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  109. package/es/components/Select/ui/SelectItem/SelectItem.styles_vk39mp.css +1 -0
  110. package/es/index.css +6 -1
  111. package/es/index.js +1 -0
  112. package/es/index.js.map +1 -1
  113. package/package.json +2 -2
  114. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +17 -2
  115. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +1 -1
  116. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +59 -9
  117. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +33 -0
  118. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +5 -0
  119. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +119 -0
  120. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js +8 -0
  121. package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js +8 -0
  122. package/styled-components/cjs/components/Dropdown/ui/index.js +14 -1
  123. package/styled-components/cjs/components/Dropdown/utils/index.js +15 -2
  124. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +2 -2
  125. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  126. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +10 -12
  127. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +17 -2
  128. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +1 -1
  129. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +58 -8
  130. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +25 -0
  131. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +1 -0
  132. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +111 -0
  133. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js +2 -0
  134. package/styled-components/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js +2 -0
  135. package/styled-components/es/components/Dropdown/ui/index.js +2 -1
  136. package/styled-components/es/components/Dropdown/utils/index.js +15 -1
  137. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
  138. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  139. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +10 -12
  140. package/types/components/Dropdown/Dropdown.tokens.d.ts +15 -0
  141. package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
  142. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +0 -1
  143. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
  144. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts +7 -0
  145. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts.map +1 -0
  146. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts +60 -0
  147. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts.map +1 -0
  148. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts +58 -0
  149. package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts.map +1 -0
  150. package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts +2 -0
  151. package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts.map +1 -0
  152. package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts +2 -0
  153. package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts.map +1 -0
  154. package/types/components/Dropdown/ui/index.d.ts +1 -0
  155. package/types/components/Dropdown/ui/index.d.ts.map +1 -1
  156. package/types/components/Dropdown/utils/index.d.ts +2 -1
  157. package/types/components/Dropdown/utils/index.d.ts.map +1 -1
  158. package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
  159. package/types/components/Select/ui/SelectItem/SelectItem.d.ts.map +1 -1
  160. package/cjs/components/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +0 -1
  161. package/es/components/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +0 -1
@@ -0,0 +1,119 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.dropdownItemOldRoot = exports.dropdownItemOldConfig = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
10
+ var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
11
+ var _utils = /*#__PURE__*/require("../../../../utils");
12
+ var _utils2 = /*#__PURE__*/require("../../utils");
13
+ var _base = /*#__PURE__*/require("./variations/_view/base");
14
+ var _base2 = /*#__PURE__*/require("./variations/_size/base");
15
+ var _DropdownItem = /*#__PURE__*/require("./DropdownItem.styles");
16
+ var _excluded = ["id", "className", "children", "text", "isSelected", "name", "checked", "value", "role", "view", "size", "disabled", "contentLeft", "contentRight", "onSelect", "onClick", "onChange"];
17
+ 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); }
18
+ 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 && {}.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; }
19
+ 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); }
20
+ 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; }
21
+ 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; }
22
+ 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; }
23
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
24
+ 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); }
25
+ 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; }
26
+ 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; }
27
+ /**
28
+ * Элемент выпадающего списка
29
+ */
30
+ var dropdownItemOldRoot = exports.dropdownItemOldRoot = function dropdownItemOldRoot(Root) {
31
+ return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
32
+ var id = _ref.id,
33
+ className = _ref.className,
34
+ children = _ref.children,
35
+ text = _ref.text,
36
+ isSelected = _ref.isSelected,
37
+ name = _ref.name,
38
+ checked = _ref.checked,
39
+ value = _ref.value,
40
+ role = _ref.role,
41
+ view = _ref.view,
42
+ size = _ref.size,
43
+ disabled = _ref.disabled,
44
+ ContentLeftComponent = _ref.contentLeft,
45
+ ContentRightComponent = _ref.contentRight,
46
+ onSelect = _ref.onSelect,
47
+ onClick = _ref.onClick,
48
+ onChange = _ref.onChange,
49
+ rest = _objectWithoutProperties(_ref, _excluded);
50
+ var uniqId = (0, _plasmaCore.safeUseId)();
51
+ var innerId = id || uniqId;
52
+ var withDropdownItemIsSelected = checked || isSelected ? _Dropdown.classes.dropdownItemIsSelected : undefined;
53
+ var withDropdownItemIsDisabled = disabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
54
+ var handleOnClick = (0, _react.useCallback)(function (event) {
55
+ if (disabled) {
56
+ return;
57
+ }
58
+ onClick === null || onClick === void 0 || onClick(event);
59
+ if (onSelect && !ContentLeftComponent) {
60
+ onSelect(value, text);
61
+ }
62
+ }, [onSelect, disabled]);
63
+ var handleOnChange = (0, _react.useCallback)(function (event) {
64
+ if (disabled) {
65
+ return;
66
+ }
67
+ onChange === null || onChange === void 0 || onChange(event);
68
+ if (onSelect && ContentLeftComponent) {
69
+ onSelect(value, text);
70
+ }
71
+ }, [onSelect, disabled]);
72
+ var contentProps = _objectSpread({
73
+ name: name,
74
+ value: value,
75
+ checked: checked || isSelected,
76
+ disabled: disabled,
77
+ tabIndex: 0
78
+ }, !disabled && {
79
+ onChange: handleOnChange
80
+ });
81
+ var ContentLeft = (0, _react.useMemo)(function () {
82
+ return (0, _utils2.getValidComponent)(ContentLeftComponent, contentProps);
83
+ }, [ContentRightComponent, contentProps]);
84
+ var ContentRight = (0, _react.useMemo)(function () {
85
+ return (0, _utils2.getValidComponent)(ContentRightComponent, contentProps);
86
+ }, [ContentRightComponent, contentProps]);
87
+ return /*#__PURE__*/_react["default"].createElement(Root, _extends({
88
+ className: (0, _utils.cx)(withDropdownItemIsSelected, withDropdownItemIsDisabled, className),
89
+ view: view,
90
+ size: size,
91
+ id: innerId,
92
+ isSelected: isSelected,
93
+ role: role,
94
+ ref: outerRootRef,
95
+ tabIndex: 0,
96
+ "aria-disabled": disabled,
97
+ onClick: handleOnClick,
98
+ "data-value": value
99
+ }, 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);
100
+ });
101
+ };
102
+ var dropdownItemOldConfig = exports.dropdownItemOldConfig = {
103
+ name: 'DropdownItem',
104
+ tag: 'div',
105
+ layout: dropdownItemOldRoot,
106
+ base: _DropdownItem.base,
107
+ variations: {
108
+ view: {
109
+ css: _base.base
110
+ },
111
+ size: {
112
+ css: _base2.base
113
+ }
114
+ },
115
+ defaults: {
116
+ view: 'primary',
117
+ size: 'm'
118
+ }
119
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -63,9 +63,22 @@ Object.defineProperty(exports, "dropdownHeaderRoot", {
63
63
  return _DropdownHeader.dropdownHeaderRoot;
64
64
  }
65
65
  });
66
+ Object.defineProperty(exports, "dropdownItemOldConfig", {
67
+ enumerable: true,
68
+ get: function get() {
69
+ return _DropdownItemOld.dropdownItemOldConfig;
70
+ }
71
+ });
72
+ Object.defineProperty(exports, "dropdownItemOldRoot", {
73
+ enumerable: true,
74
+ get: function get() {
75
+ return _DropdownItemOld.dropdownItemOldRoot;
76
+ }
77
+ });
66
78
  var _DropdownDivider = /*#__PURE__*/require("./DropdownDivider/DropdownDivider");
67
79
  var _DropdownFooter = /*#__PURE__*/require("./DropdownFooter/DropdownFooter");
68
80
  var _DropdownGroup = /*#__PURE__*/require("./DropdownGroup/DropdownGroup");
69
81
  var _DropdownHeader = /*#__PURE__*/require("./DropdownHeader/DropdownHeader");
70
82
  var _DropdownItem = /*#__PURE__*/require("./DropdownItem/DropdownItem");
71
- var _DropdownInner = /*#__PURE__*/require("./DropdownInner/DropdownInner");
83
+ var _DropdownInner = /*#__PURE__*/require("./DropdownInner/DropdownInner");
84
+ var _DropdownItemOld = /*#__PURE__*/require("./DropdownItemOld/DropdownItemOld");
@@ -1,13 +1,13 @@
1
1
  "use strict";
2
2
 
3
- 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); }
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
- exports.getPlacements = exports.getPlacement = exports.getCorrectHeight = exports.childrenWithProps = void 0;
6
+ exports.getValidComponent = exports.getPlacements = exports.getPlacement = exports.getCorrectHeight = exports.childrenWithProps = void 0;
8
7
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
8
  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); }
10
9
  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 && {}.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; }
10
+ 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); }
11
11
  var getPlacement = exports.getPlacement = function getPlacement(placement) {
12
12
  return "".concat(placement, "-start");
13
13
  };
@@ -36,4 +36,17 @@ var childrenWithProps = exports.childrenWithProps = function childrenWithProps(c
36
36
  }
37
37
  return child;
38
38
  });
39
+ };
40
+ var isReactObject = function isReactObject(element) {
41
+ return _typeof(element) === 'object' || typeof element === 'function';
42
+ };
43
+ var getValidComponent = exports.getValidComponent = function getValidComponent(element, props) {
44
+ if ( /*#__PURE__*/(0, _react.isValidElement)(element)) {
45
+ return /*#__PURE__*/(0, _react.cloneElement)(element, props);
46
+ }
47
+ if (isReactObject(element)) {
48
+ var Component = element;
49
+ return /*#__PURE__*/_react["default"].createElement(Component, props);
50
+ }
51
+ return element;
39
52
  };
@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.selectItemRoot = exports.selectItemConfig = void 0;
7
- var _Combobox = /*#__PURE__*/require("../../../Combobox");
7
+ var _Dropdown = /*#__PURE__*/require("../../../Dropdown");
8
8
  var _base = /*#__PURE__*/require("./variations/_view/base");
9
9
  var _base2 = /*#__PURE__*/require("./variations/_size/base");
10
10
  var _SelectItem = /*#__PURE__*/require("./SelectItem.styles");
11
- var selectItemRoot = exports.selectItemRoot = _Combobox.comboboxItemRoot;
11
+ var selectItemRoot = exports.selectItemRoot = _Dropdown.dropdownItemOldRoot;
12
12
  var selectItemConfig = exports.selectItemConfig = {
13
13
  name: 'SelectItem',
14
14
  tag: 'div',
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.mappingOverride = exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Select = /*#__PURE__*/require("../../Select.tokens");
9
- var _Combobox = /*#__PURE__*/require("../../../Combobox");
10
- var _DropdownItem = /*#__PURE__*/require("../../../Dropdown/ui/DropdownItem/DropdownItem.styles");
9
+ var _Dropdown = /*#__PURE__*/require("../../../Dropdown");
10
+ var _DropdownItem = /*#__PURE__*/require("../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles");
11
11
  // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
12
- var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n ".concat(_Combobox.comboboxTokens.itemBackground, ": var(").concat(_Select.tokens.itemBackground, ");\n ").concat(_Combobox.comboboxTokens.itemColor, ": var(").concat(_Select.tokens.itemColor, ");\n ").concat(_Combobox.comboboxTokens.itemBackgroundHover, ": var(").concat(_Select.tokens.itemBackgroundHover, ");\n ").concat(_Combobox.comboboxTokens.itemBackgroundSelected, ": var(").concat(_Select.tokens.itemBackgroundSelected, ");\n ").concat(_Combobox.comboboxTokens.itemColorSelected, ": var(").concat(_Select.tokens.itemColorSelected, ");\n ").concat(_Combobox.comboboxTokens.itemBackgroundSelectedHover, ": var(").concat(_Select.tokens.itemBackgroundSelectedHover, ");\n ").concat(_Combobox.comboboxTokens.itemColorSelectedHover, ": var(").concat(_Select.tokens.itemColorSelectedHover, ");\n ").concat(_Combobox.comboboxTokens.itemContentLeftColor, ": var(").concat(_Select.tokens.itemContentLeftColor, ");\n ").concat(_Combobox.comboboxTokens.itemContentRightColor, ": var(").concat(_Select.tokens.itemContentRightColor, ");\n ").concat(_Combobox.comboboxTokens.disabledOpacity, ": var(").concat(_Select.tokens.disabledOpacity, ");\n ").concat(_Combobox.comboboxTokens.focusColor, ": var(").concat(_Select.tokens.focusColor, ");\n ").concat(_Combobox.comboboxTokens.itemWidth, ": var(").concat(_Select.tokens.itemWidth, ");\n ").concat(_Combobox.comboboxTokens.itemHeight, ": var(").concat(_Select.tokens.itemHeight, ");\n ").concat(_Combobox.comboboxTokens.itemBorderRadius, ": var(").concat(_Select.tokens.itemBorderRadius, ");\n ").concat(_Combobox.comboboxTokens.itemPaddingTop, ": var(").concat(_Select.tokens.itemPaddingTop, ");\n ").concat(_Combobox.comboboxTokens.itemPaddingRight, ": var(").concat(_Select.tokens.itemPaddingRight, ");\n ").concat(_Combobox.comboboxTokens.itemPaddingBottom, ": var(").concat(_Select.tokens.itemPaddingBottom, ");\n ").concat(_Combobox.comboboxTokens.itemPaddingLeft, ": var(").concat(_Select.tokens.itemPaddingLeft, ");\n ").concat(_Combobox.comboboxTokens.itemMarginTop, ": var(").concat(_Select.tokens.itemMarginTop, ");\n ").concat(_Combobox.comboboxTokens.itemMarginRight, ": var(").concat(_Select.tokens.itemMarginRight, ");\n ").concat(_Combobox.comboboxTokens.itemMarginBottom, ": var(").concat(_Select.tokens.itemMarginBottom, ");\n ").concat(_Combobox.comboboxTokens.itemMarginLeft, ": var(").concat(_Select.tokens.itemMarginLeft, ");\n ").concat(_Combobox.comboboxTokens.itemFontFamily, ": var(").concat(_Select.tokens.itemFontFamily, ");\n ").concat(_Combobox.comboboxTokens.itemFontSize, ": var(").concat(_Select.tokens.itemFontSize, ");\n ").concat(_Combobox.comboboxTokens.itemFontStyle, ": var(").concat(_Select.tokens.itemFontStyle, ");\n ").concat(_Combobox.comboboxTokens.itemFontWeightBold, ": var(").concat(_Select.tokens.itemFontWeightBold, ");\n ").concat(_Combobox.comboboxTokens.itemFontLetterSpacing, ": var(").concat(_Select.tokens.itemFontLetterSpacing, ");\n ").concat(_Combobox.comboboxTokens.itemFontLineHeight, ": var(").concat(_Select.tokens.itemFontLineHeight, ");\n ").concat(_Combobox.comboboxTokens.itemContentLeftWidth, ": var(").concat(_Select.tokens.itemContentLeftWidth, ");\n ").concat(_Combobox.comboboxTokens.itemContentRightWidth, ": var(").concat(_Select.tokens.itemContentRightWidth, ");\n");
12
+ var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n ".concat(_Dropdown.dropdownTokens.itemBackground, ": var(").concat(_Select.tokens.itemBackground, ");\n ").concat(_Dropdown.dropdownTokens.itemColor, ": var(").concat(_Select.tokens.itemColor, ");\n ").concat(_Dropdown.dropdownTokens.itemBackgroundHover, ": var(").concat(_Select.tokens.itemBackgroundHover, ");\n ").concat(_Dropdown.dropdownTokens.itemBackgroundSelected, ": var(").concat(_Select.tokens.itemBackgroundSelected, ");\n ").concat(_Dropdown.dropdownTokens.itemColorSelected, ": var(").concat(_Select.tokens.itemColorSelected, ");\n ").concat(_Dropdown.dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(_Select.tokens.itemBackgroundSelectedHover, ");\n ").concat(_Dropdown.dropdownTokens.itemColorSelectedHover, ": var(").concat(_Select.tokens.itemColorSelectedHover, ");\n ").concat(_Dropdown.dropdownTokens.itemContentLeftColor, ": var(").concat(_Select.tokens.itemContentLeftColor, ");\n ").concat(_Dropdown.dropdownTokens.itemContentRightColor, ": var(").concat(_Select.tokens.itemContentRightColor, ");\n ").concat(_Dropdown.dropdownTokens.disabledOpacity, ": var(").concat(_Select.tokens.disabledOpacity, ");\n ").concat(_Dropdown.dropdownTokens.focusColor, ": var(").concat(_Select.tokens.focusColor, ");\n ").concat(_Dropdown.dropdownTokens.itemWidth, ": var(").concat(_Select.tokens.itemWidth, ");\n ").concat(_Dropdown.dropdownTokens.itemHeight, ": var(").concat(_Select.tokens.itemHeight, ");\n ").concat(_Dropdown.dropdownTokens.itemBorderRadius, ": var(").concat(_Select.tokens.itemBorderRadius, ");\n ").concat(_Dropdown.dropdownTokens.itemPaddingTop, ": var(").concat(_Select.tokens.itemPaddingTop, ");\n ").concat(_Dropdown.dropdownTokens.itemPaddingRight, ": var(").concat(_Select.tokens.itemPaddingRight, ");\n ").concat(_Dropdown.dropdownTokens.itemPaddingBottom, ": var(").concat(_Select.tokens.itemPaddingBottom, ");\n ").concat(_Dropdown.dropdownTokens.itemPaddingLeft, ": var(").concat(_Select.tokens.itemPaddingLeft, ");\n ").concat(_Dropdown.dropdownTokens.itemMarginTop, ": var(").concat(_Select.tokens.itemMarginTop, ");\n ").concat(_Dropdown.dropdownTokens.itemMarginRight, ": var(").concat(_Select.tokens.itemMarginRight, ");\n ").concat(_Dropdown.dropdownTokens.itemMarginBottom, ": var(").concat(_Select.tokens.itemMarginBottom, ");\n ").concat(_Dropdown.dropdownTokens.itemMarginLeft, ": var(").concat(_Select.tokens.itemMarginLeft, ");\n ").concat(_Dropdown.dropdownTokens.itemFontFamily, ": var(").concat(_Select.tokens.itemFontFamily, ");\n ").concat(_Dropdown.dropdownTokens.itemFontSize, ": var(").concat(_Select.tokens.itemFontSize, ");\n ").concat(_Dropdown.dropdownTokens.itemFontStyle, ": var(").concat(_Select.tokens.itemFontStyle, ");\n ").concat(_Dropdown.dropdownTokens.itemFontWeightBold, ": var(").concat(_Select.tokens.itemFontWeightBold, ");\n ").concat(_Dropdown.dropdownTokens.itemFontLetterSpacing, ": var(").concat(_Select.tokens.itemFontLetterSpacing, ");\n ").concat(_Dropdown.dropdownTokens.itemFontLineHeight, ": var(").concat(_Select.tokens.itemFontLineHeight, ");\n ").concat(_Dropdown.dropdownTokens.itemContentLeftWidth, ": var(").concat(_Select.tokens.itemContentLeftWidth, ");\n ").concat(_Dropdown.dropdownTokens.itemContentRightWidth, ": var(").concat(_Select.tokens.itemContentRightWidth, ");\n");
13
13
  var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _DropdownItem.baseContent, mappingOverride);
@@ -274,18 +274,16 @@ const items = [
274
274
 
275
275
  const StoryNormal = (args: StoryDropdownProps) => {
276
276
  return (
277
- <>
278
- <Dropdown
279
- {...args}
280
- items={items}
281
- onToggle={action('onToggle')}
282
- onHover={action('onHover')}
283
- onItemSelect={action('onItemSelect')}
284
- onItemClick={action('onItemClick')}
285
- >
286
- <Button text="Список стран" />
287
- </Dropdown>
288
- </>
277
+ <Dropdown
278
+ {...args}
279
+ items={items}
280
+ onToggle={action('onToggle')}
281
+ onHover={action('onHover')}
282
+ onItemSelect={action('onItemSelect')}
283
+ onItemClick={action('onItemClick')}
284
+ >
285
+ <Button text="Список стран" />
286
+ </Dropdown>
289
287
  );
290
288
  };
291
289
 
@@ -2,7 +2,8 @@ export var classes = {
2
2
  dropdownRoot: 'dropdown-root',
3
3
  dropdownItemIsFocused: 'dropdown-item-is-focused',
4
4
  dropdownItemIsDisabled: 'dropdown-item-is-disabled',
5
- dropdownItemIsActive: 'dropdown-item-is-active'
5
+ dropdownItemIsActive: 'dropdown-item-is-active',
6
+ dropdownItemIsSelected: 'dropdownItemIsSelected'
6
7
  };
7
8
  export var tokens = {
8
9
  background: '--plasma-dropdown-background',
@@ -96,5 +97,19 @@ export var tokens = {
96
97
  groupLabelMarginTop: '--plasma-dropdown-group-label-margin-top',
97
98
  groupLabelMarginRight: '--plasma-dropdown-group-label-margin-right',
98
99
  groupLabelMarginBottom: '--plasma-dropdown-group-label-margin-bottom',
99
- groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left'
100
+ groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left',
101
+ itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
102
+ itemColorSelected: '--plasma-dropdown-item-color-selected',
103
+ itemBackgroundSelectedHover: '--plasma-dropdown-item-background-selected-hover',
104
+ itemColorSelectedHover: '--plasma-dropdown-item-color-selected-hover',
105
+ itemContentLeftColor: '--plasma-dropdown-item-content-left-color',
106
+ itemContentRightColor: '--plasma-dropdown-item-content-right-color',
107
+ itemWidth: '--plasma-dropdown-item-width',
108
+ itemHeight: '--plasma-dropdown-item-height',
109
+ itemMarginTop: '--plasma-dropdown-item-margin-top',
110
+ itemMarginRight: '--plasma-dropdown-item-margin-right',
111
+ itemMarginBottom: '--plasma-dropdown-item-margin-bottom',
112
+ itemMarginLeft: '--plasma-dropdown-item-margin-left',
113
+ itemContentLeftWidth: '--plasma-dropdown-item-content-left-width',
114
+ itemContentRightWidth: '--plasma-dropdown-item-content-right-width'
100
115
  };
@@ -115,7 +115,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
115
115
  });
116
116
  }
117
117
  }
118
- if (code === 'Tab') {
118
+ if (code === 'Tab' || code === 'Escape') {
119
119
  dispatchFocusedPath({
120
120
  type: 'reset'
121
121
  });
@@ -15,14 +15,64 @@ export var StyledText = /*#__PURE__*/styled.div.withConfig({
15
15
  })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
16
16
 
17
17
  // TODO: Remove baseContent after refactoring a Select component
18
- export var baseContent = /*#__PURE__*/"\n box-sizing: content-box;\n display: flex;\n align-items: center;\n user-select: none;\n\n :focus {\n outline: none;\n }\n\n ".concat(addFocus({
19
- outlineSize: '0.0625rem',
20
- outlineOffset: '0',
21
- outlineColor: "var(".concat(tokens.focusColor, ")"),
22
- outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
23
- hasTransition: false,
24
- customFocusRules: "\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n }\n ")
25
- }), ";\n\n width: 100%;\n\n font-family: var(").concat(tokens.itemFontFamily, ");\n font-size: var(").concat(tokens.itemFontSize, ");\n font-style: var(").concat(tokens.itemFontStyle, ");\n font-weight: var(").concat(tokens.itemFontWeightBold, ");\n letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n background: var(").concat(tokens.itemBackground, ");\n color: var(").concat(tokens.itemColor, ");\n border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ") var(").concat(tokens.itemPaddingLeft, ");\n\n margin: 0;\n\n &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n cursor: pointer;\n background: var(").concat(tokens.itemBackgroundHover, ");\n }\n\n &.").concat(classes.dropdownItemIsActive, " {\n background: var(").concat(tokens.itemBackgroundHover, ");\n }\n\n &.").concat(classes.dropdownItemIsDisabled, " {\n opacity: var(").concat(tokens.disabledOpacity, ");\n cursor: not-allowed;\n }\n");
18
+ // export const baseContent = `
19
+ // box-sizing: content-box;
20
+ // display: flex;
21
+ // align-items: center;
22
+ // user-select: none;
23
+ //
24
+ // :focus {
25
+ // outline: none;
26
+ // }
27
+ //
28
+ // ${addFocus({
29
+ // outlineSize: '0.0625rem',
30
+ // outlineOffset: '0',
31
+ // outlineColor: `var(${tokens.focusColor})`,
32
+ // outlineRadius: `var(${tokens.itemBorderRadius})`,
33
+ // hasTransition: false,
34
+ // customFocusRules: `
35
+ // &.${classes.dropdownItemIsFocused}:before {
36
+ // outline: none;
37
+ // box-shadow: 0 0 0 0.0625rem var(${tokens.focusColor});
38
+ // }
39
+ // `,
40
+ // })};
41
+ //
42
+ // width: 100%;
43
+ //
44
+ // font-family: var(${tokens.itemFontFamily});
45
+ // font-size: var(${tokens.itemFontSize});
46
+ // font-style: var(${tokens.itemFontStyle});
47
+ // font-weight: var(${tokens.itemFontWeightBold});
48
+ // letter-spacing: var(${tokens.itemFontLetterSpacing});
49
+ // line-height: var(${tokens.itemFontLineHeight});
50
+ //
51
+ // background: var(${tokens.itemBackground});
52
+ // color: var(${tokens.itemColor});
53
+ // border-radius: var(${tokens.itemBorderRadius});
54
+ //
55
+ // padding: var(${tokens.itemPaddingTop}) var(${tokens.itemPaddingRight}) var(${tokens.itemPaddingBottom}) var(${
56
+ // tokens.itemPaddingLeft
57
+ // });
58
+ //
59
+ // margin: 0;
60
+ //
61
+ // &:hover:not(.${classes.dropdownItemIsDisabled}) {
62
+ // cursor: pointer;
63
+ // background: var(${tokens.itemBackgroundHover});
64
+ // }
65
+ //
66
+ // &.${classes.dropdownItemIsActive} {
67
+ // background: var(${tokens.itemBackgroundHover});
68
+ // }
69
+ //
70
+ // &.${classes.dropdownItemIsDisabled} {
71
+ // opacity: var(${tokens.disabledOpacity});
72
+ // cursor: not-allowed;
73
+ // }
74
+ // `;
75
+
26
76
  export var Wrapper = /*#__PURE__*/styled.li.withConfig({
27
77
  componentId: "plasma-new-hope__sc-hs0ek1-4"
28
78
  })(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref) {
@@ -0,0 +1,25 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import { css } from 'styled-components';
4
+ import styled from 'styled-components';
5
+ import { classes, tokens } from '../../Dropdown.tokens';
6
+ import { addFocus, applyEllipsis } from '../../../../mixins';
7
+ export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
8
+ componentId: "plasma-new-hope__sc-17ya3ay-0"
9
+ })(["display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentLeftWidth, tokens.itemContentLeftColor);
10
+ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
11
+ componentId: "plasma-new-hope__sc-17ya3ay-1"
12
+ })(["margin-left:auto;display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentRightWidth, tokens.itemContentRightColor);
13
+ export var StyledText = /*#__PURE__*/styled.div.withConfig({
14
+ componentId: "plasma-new-hope__sc-17ya3ay-2"
15
+ })(["", ";"], /*#__PURE__*/applyEllipsis());
16
+
17
+ // INFO: Для возможности переиспользования стилей в других компонентах
18
+ export var baseContent = /*#__PURE__*/"\n box-sizing: content-box;\n display: flex;\n align-items: center;\n user-select: none;\n\n :focus {\n outline: none;\n }\n\n ".concat(addFocus({
19
+ outlineSize: '0.0625rem',
20
+ outlineOffset: '0',
21
+ outlineColor: "var(".concat(tokens.focusColor, ")"),
22
+ outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
23
+ hasTransition: false
24
+ }), ";\n\n width: auto;\n\n font-family: var(").concat(tokens.itemFontFamily, ");\n font-size: var(").concat(tokens.itemFontSize, ");\n font-style: var(").concat(tokens.itemFontStyle, ");\n font-weight: var(").concat(tokens.itemFontWeightBold, ");\n letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n background: var(").concat(tokens.itemBackground, ");\n color: var(").concat(tokens.itemColor, ");\n border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n width: var(").concat(tokens.itemWidth, ");\n height: var(").concat(tokens.itemHeight, ");\n\n padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ")\n var(").concat(tokens.itemPaddingLeft, ");\n\n margin: var(").concat(tokens.itemMarginTop, ") var(").concat(tokens.itemMarginRight, ") var(").concat(tokens.itemMarginBottom, ")\n var(").concat(tokens.itemMarginLeft, ");\n\n &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n cursor: pointer;\n background: var(").concat(tokens.itemBackgroundHover, ");\n }\n\n &.").concat(String(classes.dropdownItemIsSelected), " {\n color: var(").concat(tokens.itemColorSelected, ");\n background: var(").concat(tokens.itemBackgroundSelected, ");\n\n &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n background: var(").concat(tokens.itemBackgroundSelectedHover, ");\n }\n }\n\n &.").concat(classes.dropdownItemIsDisabled, " {\n opacity: var(").concat(tokens.disabledOpacity, ");\n cursor: not-allowed;\n }\n");
25
+ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ";\n"])), baseContent);
@@ -0,0 +1,111 @@
1
+ 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); }
2
+ var _excluded = ["id", "className", "children", "text", "isSelected", "name", "checked", "value", "role", "view", "size", "disabled", "contentLeft", "contentRight", "onSelect", "onClick", "onChange"];
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
+ 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; }
5
+ 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; }
6
+ 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; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
+ 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); }
9
+ 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; }
10
+ 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; }
11
+ import React, { forwardRef, useCallback, useMemo } from 'react';
12
+ import { safeUseId } from '@salutejs/plasma-core';
13
+ import { classes } from '../../Dropdown.tokens';
14
+ import { cx } from '../../../../utils';
15
+ import { getValidComponent } from '../../utils';
16
+ import { base as viewCSS } from './variations/_view/base';
17
+ import { base as sizeCSS } from './variations/_size/base';
18
+ import { StyledContentLeft, StyledContentRight, StyledText, base } from './DropdownItem.styles';
19
+ /**
20
+ * Элемент выпадающего списка
21
+ */
22
+ export var dropdownItemOldRoot = function dropdownItemOldRoot(Root) {
23
+ return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
24
+ var id = _ref.id,
25
+ className = _ref.className,
26
+ children = _ref.children,
27
+ text = _ref.text,
28
+ isSelected = _ref.isSelected,
29
+ name = _ref.name,
30
+ checked = _ref.checked,
31
+ value = _ref.value,
32
+ role = _ref.role,
33
+ view = _ref.view,
34
+ size = _ref.size,
35
+ disabled = _ref.disabled,
36
+ ContentLeftComponent = _ref.contentLeft,
37
+ ContentRightComponent = _ref.contentRight,
38
+ onSelect = _ref.onSelect,
39
+ onClick = _ref.onClick,
40
+ onChange = _ref.onChange,
41
+ rest = _objectWithoutProperties(_ref, _excluded);
42
+ var uniqId = safeUseId();
43
+ var innerId = id || uniqId;
44
+ var withDropdownItemIsSelected = checked || isSelected ? classes.dropdownItemIsSelected : undefined;
45
+ var withDropdownItemIsDisabled = disabled ? classes.dropdownItemIsDisabled : undefined;
46
+ var handleOnClick = useCallback(function (event) {
47
+ if (disabled) {
48
+ return;
49
+ }
50
+ onClick === null || onClick === void 0 || onClick(event);
51
+ if (onSelect && !ContentLeftComponent) {
52
+ onSelect(value, text);
53
+ }
54
+ }, [onSelect, disabled]);
55
+ var handleOnChange = useCallback(function (event) {
56
+ if (disabled) {
57
+ return;
58
+ }
59
+ onChange === null || onChange === void 0 || onChange(event);
60
+ if (onSelect && ContentLeftComponent) {
61
+ onSelect(value, text);
62
+ }
63
+ }, [onSelect, disabled]);
64
+ var contentProps = _objectSpread({
65
+ name: name,
66
+ value: value,
67
+ checked: checked || isSelected,
68
+ disabled: disabled,
69
+ tabIndex: 0
70
+ }, !disabled && {
71
+ onChange: handleOnChange
72
+ });
73
+ var ContentLeft = useMemo(function () {
74
+ return getValidComponent(ContentLeftComponent, contentProps);
75
+ }, [ContentRightComponent, contentProps]);
76
+ var ContentRight = useMemo(function () {
77
+ return getValidComponent(ContentRightComponent, contentProps);
78
+ }, [ContentRightComponent, contentProps]);
79
+ return /*#__PURE__*/React.createElement(Root, _extends({
80
+ className: cx(withDropdownItemIsSelected, withDropdownItemIsDisabled, className),
81
+ view: view,
82
+ size: size,
83
+ id: innerId,
84
+ isSelected: isSelected,
85
+ role: role,
86
+ ref: outerRootRef,
87
+ tabIndex: 0,
88
+ "aria-disabled": disabled,
89
+ onClick: handleOnClick,
90
+ "data-value": value
91
+ }, 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);
92
+ });
93
+ };
94
+ export var dropdownItemOldConfig = {
95
+ name: 'DropdownItem',
96
+ tag: 'div',
97
+ layout: dropdownItemOldRoot,
98
+ base: base,
99
+ variations: {
100
+ view: {
101
+ css: viewCSS
102
+ },
103
+ size: {
104
+ css: sizeCSS
105
+ }
106
+ },
107
+ defaults: {
108
+ view: 'primary',
109
+ size: 'm'
110
+ }
111
+ };
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -0,0 +1,2 @@
1
+ import { css } from 'styled-components';
2
+ export var base = /*#__PURE__*/css([""]);
@@ -3,4 +3,5 @@ export { dropdownFooterRoot, dropdownFooterConfig } from './DropdownFooter/Dropd
3
3
  export { dropdownGroupRoot, dropdownGroupConfig } from './DropdownGroup/DropdownGroup';
4
4
  export { dropdownHeaderRoot, dropdownHeaderConfig } from './DropdownHeader/DropdownHeader';
5
5
  export { DropdownItem } from './DropdownItem/DropdownItem';
6
- export { DropdownInner } from './DropdownInner/DropdownInner';
6
+ export { DropdownInner } from './DropdownInner/DropdownInner';
7
+ export { dropdownItemOldRoot, dropdownItemOldConfig } from './DropdownItemOld/DropdownItemOld';
@@ -1,4 +1,5 @@
1
- import React, { Children } from 'react';
1
+ 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); }
2
+ import React, { Children, cloneElement, isValidElement } from 'react';
2
3
  export var getPlacement = function getPlacement(placement) {
3
4
  return "".concat(placement, "-start");
4
5
  };
@@ -27,4 +28,17 @@ export var childrenWithProps = function childrenWithProps(children, additionalPr
27
28
  }
28
29
  return child;
29
30
  });
31
+ };
32
+ var isReactObject = function isReactObject(element) {
33
+ return _typeof(element) === 'object' || typeof element === 'function';
34
+ };
35
+ export var getValidComponent = function getValidComponent(element, props) {
36
+ if ( /*#__PURE__*/isValidElement(element)) {
37
+ return /*#__PURE__*/cloneElement(element, props);
38
+ }
39
+ if (isReactObject(element)) {
40
+ var Component = element;
41
+ return /*#__PURE__*/React.createElement(Component, props);
42
+ }
43
+ return element;
30
44
  };
@@ -1,8 +1,8 @@
1
- import { comboboxItemRoot } from '../../../Combobox';
1
+ import { dropdownItemOldRoot } from '../../../Dropdown';
2
2
  import { base as viewCSS } from './variations/_view/base';
3
3
  import { base as sizeCSS } from './variations/_size/base';
4
4
  import { base } from './SelectItem.styles';
5
- export var selectItemRoot = comboboxItemRoot;
5
+ export var selectItemRoot = dropdownItemOldRoot;
6
6
  export var selectItemConfig = {
7
7
  name: 'SelectItem',
8
8
  tag: 'div',
@@ -1,8 +1,8 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../../Select.tokens';
3
- import { comboboxTokens } from '../../../Combobox';
4
- import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
3
+ import { dropdownTokens } from '../../../Dropdown';
4
+ import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles';
5
5
 
6
6
  // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
7
- export var mappingOverride = /*#__PURE__*/"\n ".concat(comboboxTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n ").concat(comboboxTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n ").concat(comboboxTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n ").concat(comboboxTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n ").concat(comboboxTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n ").concat(comboboxTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n ").concat(comboboxTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n ").concat(comboboxTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n ").concat(comboboxTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n ").concat(comboboxTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n ").concat(comboboxTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n ").concat(comboboxTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n ").concat(comboboxTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n ").concat(comboboxTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n ").concat(comboboxTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n ").concat(comboboxTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n ").concat(comboboxTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n ").concat(comboboxTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n ").concat(comboboxTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n ").concat(comboboxTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n ").concat(comboboxTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n ").concat(comboboxTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n ").concat(comboboxTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n ").concat(comboboxTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n ").concat(comboboxTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n ").concat(comboboxTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n ").concat(comboboxTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n ").concat(comboboxTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n ").concat(comboboxTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n ").concat(comboboxTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
7
+ export var mappingOverride = /*#__PURE__*/"\n ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
8
8
  export var base = /*#__PURE__*/css(["", ";", ";"], dropdownItemBase, mappingOverride);