@salutejs/plasma-new-hope 0.88.0-canary.1233.9420319803.0 → 0.88.0-canary.1233.9439608380.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Chip/Chip.css +5 -5
- package/cjs/components/Chip/Chip.styles.js +1 -1
- package/cjs/components/Chip/Chip.styles.js.map +1 -1
- package/cjs/components/Chip/{Chip.styles_1l2rsrr.css → Chip.styles_1mwwhiw.css} +1 -1
- package/cjs/components/Combobox/Combobox.css +5 -5
- package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +5 -5
- package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +5 -5
- package/cjs/components/Pagination/Pagination.css +10 -11
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -11
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js.map +1 -1
- package/cjs/components/Range/Range.css +5 -5
- package/cjs/components/Select/Select.css +10 -11
- package/cjs/components/Select/Select.js +16 -10
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.styles.js +2 -0
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/Select/elements/Inner/Inner.css +10 -11
- package/cjs/components/Select/elements/Inner/Inner.js +7 -2
- package/cjs/components/Select/elements/Inner/Inner.js.map +1 -1
- package/cjs/components/Select/elements/Inner/elements/Item/Item.css +10 -11
- package/cjs/components/Select/elements/Inner/elements/Item/Item.js +17 -6
- package/cjs/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
- package/cjs/components/Select/elements/Target/Target.css +10 -11
- package/cjs/components/Select/elements/Target/Target.js +9 -3
- package/cjs/components/Select/elements/Target/Target.js.map +1 -1
- package/cjs/components/Select/elements/Target/elements/Button/Button.css +5 -6
- package/cjs/components/Select/elements/Target/elements/Button/Button.js +28 -32
- package/cjs/components/Select/elements/Target/elements/Button/Button.js.map +1 -1
- package/cjs/components/Select/elements/Target/elements/Button/Button.styles.js +2 -8
- package/cjs/components/Select/elements/Target/elements/Button/Button.styles.js.map +1 -1
- package/cjs/components/Select/elements/Target/elements/Button/{Button.styles_1bweq1y.css → Button.styles_1r519o1.css} +1 -2
- package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.css +5 -5
- package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
- package/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js.map +1 -1
- package/cjs/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.css +5 -5
- package/cjs/components/Select/hooks/useKeyboardNavigation.js +11 -2
- package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/cjs/components/Select/utils/getButtonLabel.js +47 -0
- package/cjs/components/Select/utils/getButtonLabel.js.map +1 -0
- package/cjs/components/Slider/Slider.css +5 -5
- package/cjs/components/Slider/components/Double/Double.css +5 -5
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +5 -5
- package/cjs/index.css +10 -11
- package/es/components/Chip/Chip.css +5 -5
- package/es/components/Chip/Chip.styles.js +1 -1
- package/es/components/Chip/Chip.styles.js.map +1 -1
- package/es/components/Chip/{Chip.styles_1l2rsrr.css → Chip.styles_1mwwhiw.css} +1 -1
- package/es/components/Combobox/Combobox.css +5 -5
- package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +5 -5
- package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +5 -5
- package/es/components/Pagination/Pagination.css +10 -11
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -11
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js.map +1 -1
- package/es/components/Range/Range.css +5 -5
- package/es/components/Select/Select.css +10 -11
- package/es/components/Select/Select.js +16 -10
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/Select.styles.js +2 -0
- package/es/components/Select/Select.styles.js.map +1 -1
- package/es/components/Select/elements/Inner/Inner.css +10 -11
- package/es/components/Select/elements/Inner/Inner.js +7 -2
- package/es/components/Select/elements/Inner/Inner.js.map +1 -1
- package/es/components/Select/elements/Inner/elements/Item/Item.css +10 -11
- package/es/components/Select/elements/Inner/elements/Item/Item.js +17 -6
- package/es/components/Select/elements/Inner/elements/Item/Item.js.map +1 -1
- package/es/components/Select/elements/Target/Target.css +10 -11
- package/es/components/Select/elements/Target/Target.js +9 -3
- package/es/components/Select/elements/Target/Target.js.map +1 -1
- package/es/components/Select/elements/Target/elements/Button/Button.css +5 -6
- package/es/components/Select/elements/Target/elements/Button/Button.js +29 -33
- package/es/components/Select/elements/Target/elements/Button/Button.js.map +1 -1
- package/es/components/Select/elements/Target/elements/Button/Button.styles.js +3 -8
- package/es/components/Select/elements/Target/elements/Button/Button.styles.js.map +1 -1
- package/es/components/Select/elements/Target/elements/Button/{Button.styles_1bweq1y.css → Button.styles_1r519o1.css} +1 -2
- package/es/components/Select/elements/Target/elements/Textfield/Textfield.css +5 -5
- package/es/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
- package/es/components/Select/elements/Target/elements/Textfield/Textfield.js.map +1 -1
- package/es/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.css +5 -5
- package/es/components/Select/hooks/useKeyboardNavigation.js +11 -2
- package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Select/utils/getButtonLabel.js +43 -0
- package/es/components/Select/utils/getButtonLabel.js.map +1 -0
- package/es/components/Slider/Slider.css +5 -5
- package/es/components/Slider/components/Double/Double.css +5 -5
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +5 -5
- package/es/index.css +10 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Chip/Chip.styles.js +1 -1
- package/styled-components/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/styled-components/cjs/components/Select/Select.js +26 -20
- package/styled-components/cjs/components/Select/elements/Inner/Inner.js +7 -2
- package/styled-components/cjs/components/Select/elements/Inner/elements/Item/Item.js +16 -5
- package/styled-components/cjs/components/Select/elements/Target/Target.js +9 -3
- package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.js +28 -31
- package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.styles.js +3 -6
- package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
- package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +11 -2
- package/styled-components/cjs/components/Select/utils/getButtonLabel.js +43 -0
- package/styled-components/cjs/components/Select/utils/index.js +8 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +22 -50
- package/styled-components/es/components/Chip/Chip.styles.js +1 -1
- package/styled-components/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js +0 -1
- package/styled-components/es/components/Select/Select.js +16 -10
- package/styled-components/es/components/Select/elements/Inner/Inner.js +7 -2
- package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.js +16 -5
- package/styled-components/es/components/Select/elements/Target/Target.js +9 -3
- package/styled-components/es/components/Select/elements/Target/elements/Button/Button.js +30 -33
- package/styled-components/es/components/Select/elements/Target/elements/Button/Button.styles.js +2 -5
- package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.js +25 -7
- package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +11 -2
- package/styled-components/es/components/Select/utils/getButtonLabel.js +37 -0
- package/styled-components/es/components/Select/utils/index.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +22 -50
- package/types/components/Chip/Chip.styles.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +5 -9
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +4 -92
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts +1 -0
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +22 -12
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/elements/Inner/Inner.d.ts.map +1 -1
- package/types/components/Select/elements/Inner/elements/Item/Item.d.ts.map +1 -1
- package/types/components/Select/elements/Inner/elements/Item/Item.types.d.ts +37 -1
- package/types/components/Select/elements/Inner/elements/Item/Item.types.d.ts.map +1 -1
- package/types/components/Select/elements/Target/Target.d.ts.map +1 -1
- package/types/components/Select/elements/Target/Target.types.d.ts +5 -3
- package/types/components/Select/elements/Target/Target.types.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Button/Button.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Button/Button.styles.d.ts +0 -1
- package/types/components/Select/elements/Target/elements/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Button/Button.types.d.ts +1 -1
- package/types/components/Select/elements/Target/elements/Button/Button.types.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Textfield/Textfield.d.ts.map +1 -1
- package/types/components/Select/elements/Target/elements/Textfield/Textfield.types.d.ts +1 -1
- package/types/components/Select/elements/Target/elements/Textfield/Textfield.types.d.ts.map +1 -1
- package/types/components/Select/hooks/useKeyboardNavigation.d.ts.map +1 -1
- package/types/components/Select/utils/getButtonLabel.d.ts +3 -0
- package/types/components/Select/utils/getButtonLabel.d.ts.map +1 -0
- package/types/components/Select/utils/index.d.ts +1 -0
- package/types/components/Select/utils/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts +1 -0
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.d.ts +4 -92
- package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
@@ -8,8 +8,9 @@ exports.selectRoot = exports.selectConfig = exports.Context = void 0;
|
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
9
|
var _utils = /*#__PURE__*/require("../../utils");
|
10
10
|
var _hooks = /*#__PURE__*/require("../../hooks");
|
11
|
+
var _utils2 = /*#__PURE__*/require("../Dropdown/utils");
|
11
12
|
var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
|
12
|
-
var
|
13
|
+
var _utils3 = /*#__PURE__*/require("./utils");
|
13
14
|
var _Inner = /*#__PURE__*/require("./elements/Inner/Inner");
|
14
15
|
var _SelectNotFoundContent = /*#__PURE__*/require("./elements/SelectNotFoundContent/SelectNotFoundContent");
|
15
16
|
var _Target = /*#__PURE__*/require("./elements/Target/Target");
|
@@ -18,8 +19,7 @@ var _usePathMaps3 = /*#__PURE__*/require("./hooks/usePathMaps");
|
|
18
19
|
var _Select = /*#__PURE__*/require("./Select.styles");
|
19
20
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
20
21
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
21
|
-
var
|
22
|
-
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"];
|
22
|
+
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"];
|
23
23
|
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); }
|
24
24
|
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; }
|
25
25
|
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); }
|
@@ -42,10 +42,10 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
42
42
|
onChange = props.onChange,
|
43
43
|
_props$target = props.target,
|
44
44
|
target = _props$target === void 0 ? 'textfield' : _props$target,
|
45
|
-
_props$multiselect = props.multiselect,
|
46
|
-
multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
|
47
45
|
separator = props.separator,
|
48
46
|
items = props.items,
|
47
|
+
_props$placement = props.placement,
|
48
|
+
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
49
49
|
label = props.label,
|
50
50
|
_props$labelPlacement = props.labelPlacement,
|
51
51
|
labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
|
@@ -70,10 +70,11 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
70
70
|
_props$variant = props.variant,
|
71
71
|
variant = _props$variant === void 0 ? 'normal' : _props$variant,
|
72
72
|
portal = props.portal,
|
73
|
-
|
73
|
+
renderValue = props.renderValue,
|
74
74
|
rest = _objectWithoutProperties(props, _excluded);
|
75
|
+
var multiselect = Array.isArray(value);
|
75
76
|
var transformedItems = (0, _react.useMemo)(function () {
|
76
|
-
return (0,
|
77
|
+
return (0, _utils3.initialItemsTransform)(items);
|
77
78
|
}, [items]);
|
78
79
|
var _usePathMaps = (0, _usePathMaps3.usePathMaps)(transformedItems),
|
79
80
|
_usePathMaps2 = _slicedToArray(_usePathMaps, 4),
|
@@ -125,12 +126,12 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
125
126
|
var checkedCopy = new Map(checked);
|
126
127
|
if (!checkedCopy.get(item.value.toString())) {
|
127
128
|
checkedCopy.set(item.value.toString(), true);
|
128
|
-
(0,
|
129
|
+
(0, _utils3.updateDescendants)(item, checkedCopy, true);
|
129
130
|
} else {
|
130
131
|
checkedCopy.set(item.value.toString(), false);
|
131
|
-
(0,
|
132
|
+
(0, _utils3.updateDescendants)(item, checkedCopy, false);
|
132
133
|
}
|
133
|
-
(0,
|
134
|
+
(0, _utils3.updateAncestors)(item, checkedCopy);
|
134
135
|
var newValues = [];
|
135
136
|
valueToItemMap.forEach(function (item, key) {
|
136
137
|
if (checkedCopy.get(key)) {
|
@@ -154,7 +155,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
154
155
|
});
|
155
156
|
if (!isCurrentChecked) {
|
156
157
|
checkedCopy.set(item.value, 'done');
|
157
|
-
(0,
|
158
|
+
(0, _utils3.updateSingleAncestors)(item, checkedCopy, 'dot');
|
158
159
|
}
|
159
160
|
onChange(isCurrentChecked ? '' : item.value);
|
160
161
|
}
|
@@ -206,12 +207,12 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
206
207
|
if (multiselect && Array.isArray(value)) {
|
207
208
|
value.forEach(function (val) {
|
208
209
|
checkedCopy.set(val, true);
|
209
|
-
(0,
|
210
|
-
(0,
|
210
|
+
(0, _utils3.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
|
211
|
+
(0, _utils3.updateAncestors)(valueToItemMap.get(val), checkedCopy);
|
211
212
|
});
|
212
213
|
} else {
|
213
214
|
checkedCopy.set(value, 'done');
|
214
|
-
(0,
|
215
|
+
(0, _utils3.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
|
215
216
|
}
|
216
217
|
}
|
217
218
|
setChecked(checkedCopy);
|
@@ -219,7 +220,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
219
220
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
220
221
|
ref: ref,
|
221
222
|
size: size,
|
222
|
-
view: (0,
|
223
|
+
view: (0, _utils3.getView)(view, status),
|
223
224
|
chipView: chipView,
|
224
225
|
items: items
|
225
226
|
}, rest), label && labelPlacement === 'outer' && target !== 'button' && /*#__PURE__*/_react["default"].createElement(_Select.OuterLabel, null, label), /*#__PURE__*/_react["default"].createElement(Context.Provider, {
|
@@ -235,9 +236,9 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
235
236
|
}, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
|
236
237
|
ref: targetRef,
|
237
238
|
isOpen: isCurrentListOpen,
|
239
|
+
placement: (0, _utils2.getPlacements)(placement),
|
238
240
|
usePortal: Boolean(portal),
|
239
241
|
frame: portal,
|
240
|
-
placement: "bottom-start",
|
241
242
|
onToggle: handleToggle,
|
242
243
|
trigger: "click",
|
243
244
|
target: /*#__PURE__*/_react["default"].createElement(_Target.Target, {
|
@@ -247,6 +248,8 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
247
248
|
isTargetAmount: isTargetAmount,
|
248
249
|
multiselect: multiselect,
|
249
250
|
valueToItemMap: valueToItemMap,
|
251
|
+
focusedPath: focusedPath,
|
252
|
+
focusedToValueMap: focusedToValueMap,
|
250
253
|
onChipClick: handleChipClick,
|
251
254
|
label: label,
|
252
255
|
placeholder: placeholder,
|
@@ -256,13 +259,15 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
256
259
|
size: size,
|
257
260
|
contentLeft: contentLeft,
|
258
261
|
disabled: disabled,
|
259
|
-
|
262
|
+
renderValue: renderValue
|
260
263
|
}),
|
261
264
|
preventOverflow: false,
|
262
265
|
closeOnOverlayClick: true
|
263
|
-
}, (0, _utils.isEmpty)(items) ? notFoundContent ||
|
264
|
-
description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C"
|
265
|
-
|
266
|
+
}, (0, _utils.isEmpty)(items) ? notFoundContent || /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.SelectNotFoundContent, {
|
267
|
+
description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C",
|
268
|
+
buttonAction: function buttonAction() {},
|
269
|
+
buttonText: "Label"
|
270
|
+
}) : /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
|
266
271
|
role: "tree",
|
267
272
|
id: "tree_level_1",
|
268
273
|
listHeight: listHeight,
|
@@ -297,6 +302,7 @@ var selectConfig = exports.selectConfig = {
|
|
297
302
|
},
|
298
303
|
defaults: {
|
299
304
|
view: 'default',
|
305
|
+
chipView: 'default',
|
300
306
|
size: 'm'
|
301
307
|
}
|
302
308
|
};
|
@@ -44,7 +44,11 @@ var Inner = exports.Inner = function Inner(_ref) {
|
|
44
44
|
item: item,
|
45
45
|
path: path,
|
46
46
|
currentLevel: currentLevel,
|
47
|
-
index: index
|
47
|
+
index: index,
|
48
|
+
ariaControls: listId,
|
49
|
+
ariaExpanded: isCurrentListOpen,
|
50
|
+
ariaLevel: nextLevel,
|
51
|
+
ariaLabel: item.label
|
48
52
|
}),
|
49
53
|
onToggle: handleToggle,
|
50
54
|
isFocusTrapped: false,
|
@@ -70,6 +74,7 @@ var Inner = exports.Inner = function Inner(_ref) {
|
|
70
74
|
item: item,
|
71
75
|
path: path,
|
72
76
|
index: index,
|
73
|
-
currentLevel: currentLevel
|
77
|
+
currentLevel: currentLevel,
|
78
|
+
itemRole: "option"
|
74
79
|
});
|
75
80
|
};
|
@@ -19,9 +19,15 @@ var Item = exports.Item = function Item(_ref) {
|
|
19
19
|
var item = _ref.item,
|
20
20
|
path = _ref.path,
|
21
21
|
currentLevel = _ref.currentLevel,
|
22
|
-
index = _ref.index
|
22
|
+
index = _ref.index,
|
23
|
+
ariaControls = _ref.ariaControls,
|
24
|
+
ariaExpanded = _ref.ariaExpanded,
|
25
|
+
ariaLevel = _ref.ariaLevel,
|
26
|
+
ariaLabel = _ref.ariaLabel,
|
27
|
+
itemRole = _ref.itemRole;
|
23
28
|
var value = item.value,
|
24
29
|
label = item.label,
|
30
|
+
disabled = item.disabled,
|
25
31
|
isDisabled = item.isDisabled,
|
26
32
|
contentLeft = item.contentLeft,
|
27
33
|
contentRight = item.contentRight;
|
@@ -34,7 +40,7 @@ var Item = exports.Item = function Item(_ref) {
|
|
34
40
|
handleCheckboxChange = _useContext.handleCheckboxChange,
|
35
41
|
handleItemClick = _useContext.handleItemClick,
|
36
42
|
variant = _useContext.variant;
|
37
|
-
var isDisabledClassName = isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
|
43
|
+
var isDisabledClassName = disabled || isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
|
38
44
|
var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Select.classes.dropdownItemIsFocused : undefined;
|
39
45
|
var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? _Select.classes.dropdownItemIsActive : undefined;
|
40
46
|
(0, _react.useEffect)(function () {
|
@@ -47,12 +53,12 @@ var Item = exports.Item = function Item(_ref) {
|
|
47
53
|
}
|
48
54
|
}, [focusedClass]);
|
49
55
|
var handleChange = function handleChange(e) {
|
50
|
-
if (isDisabled) return;
|
56
|
+
if (disabled || isDisabled) return;
|
51
57
|
e.stopPropagation();
|
52
58
|
handleCheckboxChange(item);
|
53
59
|
};
|
54
60
|
var handleClick = function handleClick(e) {
|
55
|
-
if (isDisabled) return;
|
61
|
+
if (disabled || isDisabled) return;
|
56
62
|
handleItemClick(item, e);
|
57
63
|
};
|
58
64
|
return /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
|
@@ -60,7 +66,12 @@ var Item = exports.Item = function Item(_ref) {
|
|
60
66
|
id: value.toString(),
|
61
67
|
ref: ref,
|
62
68
|
onClick: handleClick,
|
63
|
-
variant: variant
|
69
|
+
variant: variant,
|
70
|
+
"aria-controls": ariaControls,
|
71
|
+
"aria-expanded": ariaExpanded,
|
72
|
+
"aria-level": ariaLevel,
|
73
|
+
"aria-label": ariaLabel,
|
74
|
+
role: itemRole
|
64
75
|
}, /*#__PURE__*/_react["default"].createElement(_Item.IconWrapper, {
|
65
76
|
variant: variant
|
66
77
|
}, multiselect && /*#__PURE__*/_react["default"].createElement("span", {
|
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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
|
13
|
-
var
|
14
|
-
|
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
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
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
|
-
|
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
|
};
|
package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.styles.js
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.StyledButton = exports.StyledArrow = exports.Label = exports.
|
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-
|
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);
|
package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js
CHANGED
@@ -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:
|
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,
|
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,
|
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,16 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
166
166
|
{
|
167
167
|
event.preventDefault();
|
168
168
|
var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
|
169
|
-
if (!
|
169
|
+
if (!path[0]) {
|
170
|
+
dispatchPath({
|
171
|
+
type: 'opened_first_level'
|
172
|
+
});
|
173
|
+
dispatchFocusedPath({
|
174
|
+
type: 'set_initial_focus'
|
175
|
+
});
|
176
|
+
break;
|
177
|
+
}
|
178
|
+
if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
|
170
179
|
break;
|
171
180
|
}
|
172
181
|
handlePressDown(_currentItem2);
|
@@ -181,7 +190,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
181
190
|
});
|
182
191
|
}
|
183
192
|
var _currentItem3 = getFurtherPath(focusedPath, focusedToValueMap);
|
184
|
-
if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled) {
|
193
|
+
if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled || _currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.disabled) {
|
185
194
|
break;
|
186
195
|
}
|
187
196
|
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");
|
@@ -290,41 +290,14 @@ const items = [
|
|
290
290
|
isDisabled: true,
|
291
291
|
},
|
292
292
|
];
|
293
|
-
const loadingItems = [
|
294
|
-
{ value: '1', label: 'Item 1' },
|
295
|
-
{ value: '2', label: 'Item 2' },
|
296
|
-
{ value: '3', label: 'Item 3' },
|
297
|
-
{ value: '4', label: 'Item 4' },
|
298
|
-
{ value: '5', label: 'Item 5' },
|
299
|
-
{ value: '6', label: 'Item 6' },
|
300
|
-
{ value: '7', label: 'Item 7' },
|
301
|
-
{ value: '8', label: 'Item 8' },
|
302
|
-
{ value: '9', label: 'Item 9' },
|
303
|
-
{ value: '10', label: 'Item 10' },
|
304
|
-
];
|
305
293
|
|
306
294
|
const SingleStory = (args: StorySelectProps) => {
|
307
295
|
const [value, setValue] = useState('');
|
308
296
|
|
309
|
-
const iconSize = args.size === 'xs' ? 'xs' : 's';
|
310
|
-
|
311
297
|
return (
|
312
|
-
|
313
|
-
<
|
314
|
-
|
315
|
-
</button>
|
316
|
-
|
317
|
-
<div style={{ width: '300px' }}>
|
318
|
-
<Select
|
319
|
-
{...args}
|
320
|
-
multiselect={false}
|
321
|
-
items={items}
|
322
|
-
value={value}
|
323
|
-
onChange={setValue}
|
324
|
-
contentLeft={<IconPlaceholder size={iconSize} />}
|
325
|
-
/>
|
326
|
-
</div>
|
327
|
-
</>
|
298
|
+
<div style={{ width: '300px' }}>
|
299
|
+
<Select {...args} items={items} value={value} onChange={setValue} />
|
300
|
+
</div>
|
328
301
|
);
|
329
302
|
};
|
330
303
|
|
@@ -335,25 +308,10 @@ export const Single: StoryObj<StorySelectProps> = {
|
|
335
308
|
const MultiselectStory = (args: StorySelectProps) => {
|
336
309
|
const [value, setValue] = useState<Array<string>>([]);
|
337
310
|
|
338
|
-
const iconSize = args.size === 'xs' ? 'xs' : 's';
|
339
|
-
|
340
311
|
return (
|
341
|
-
|
342
|
-
<
|
343
|
-
|
344
|
-
</button>
|
345
|
-
|
346
|
-
<div style={{ width: '300px' }}>
|
347
|
-
<Select
|
348
|
-
{...args}
|
349
|
-
multiselect
|
350
|
-
items={items}
|
351
|
-
value={value}
|
352
|
-
onChange={setValue}
|
353
|
-
contentLeft={<IconPlaceholder size={iconSize} />}
|
354
|
-
/>
|
355
|
-
</div>
|
356
|
-
</>
|
312
|
+
<div style={{ width: '300px' }}>
|
313
|
+
<Select {...args} items={items} value={value} onChange={setValue} />
|
314
|
+
</div>
|
357
315
|
);
|
358
316
|
};
|
359
317
|
|
@@ -380,6 +338,20 @@ export const Predefined: StoryObj<StorySelectProps> = {
|
|
380
338
|
render: (args) => <PredefinedStory {...args} />,
|
381
339
|
};
|
382
340
|
|
341
|
+
const EmptyListStory = (args: StorySelectProps) => {
|
342
|
+
const [valueSingle, setValueSingle] = useState('');
|
343
|
+
|
344
|
+
return (
|
345
|
+
<div style={{ width: '300px' }}>
|
346
|
+
<Select {...args} items={[]} value={valueSingle} onChange={setValueSingle} />
|
347
|
+
</div>
|
348
|
+
);
|
349
|
+
};
|
350
|
+
|
351
|
+
export const EmptyList: StoryObj<StorySelectProps> = {
|
352
|
+
render: (args) => <EmptyListStory {...args} />,
|
353
|
+
};
|
354
|
+
|
383
355
|
const CommonStory = (args: StorySelectProps) => {
|
384
356
|
const [value, setValue] = useState('');
|
385
357
|
const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
|
@@ -517,7 +489,7 @@ const CommonStory = (args: StorySelectProps) => {
|
|
517
489
|
<td>Clear</td>
|
518
490
|
|
519
491
|
<td>
|
520
|
-
<div style={{
|
492
|
+
<div style={{ width: '200px' }}>
|
521
493
|
<Select
|
522
494
|
{...args}
|
523
495
|
multiselect={false}
|
@@ -529,7 +501,7 @@ const CommonStory = (args: StorySelectProps) => {
|
|
529
501
|
</div>
|
530
502
|
</td>
|
531
503
|
<td>
|
532
|
-
<div style={{
|
504
|
+
<div style={{ width: '200px' }}>
|
533
505
|
<Select
|
534
506
|
{...args}
|
535
507
|
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(", ")
|
17
|
+
})(["display:flex;margin-left:var(", ");margin-right:var(", ");color:var(", ");"], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor);
|