@semcore/select 16.0.0-prerelease.4 → 16.0.0-prerelease.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/InputSearch.mjs +101 -81
- package/lib/esm/Select.mjs +293 -227
- package/lib/esm/context.mjs +3 -3
- package/lib/esm/index.mjs +5 -5
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +8 -6
- package/lib/esm/translations/en.json.mjs +8 -6
- package/lib/esm/translations/es.json.mjs +8 -6
- package/lib/esm/translations/fr.json.mjs +8 -6
- package/lib/esm/translations/it.json.mjs +8 -6
- package/lib/esm/translations/ja.json.mjs +8 -6
- package/lib/esm/translations/ko.json.mjs +8 -6
- package/lib/esm/translations/nl.json.mjs +8 -6
- package/lib/esm/translations/pl.json.mjs +8 -6
- package/lib/esm/translations/pt.json.mjs +8 -6
- package/lib/esm/translations/sv.json.mjs +8 -6
- package/lib/esm/translations/tr.json.mjs +8 -6
- package/lib/esm/translations/vi.json.mjs +8 -6
- package/lib/esm/translations/zh.json.mjs +8 -6
- package/package.json +12 -12
package/lib/esm/Select.mjs
CHANGED
|
@@ -1,101 +1,129 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { sstyled
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import { ButtonTrigger
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import { useBox
|
|
26
|
-
import { selectContext
|
|
27
|
-
import { localizedMessages
|
|
28
|
-
import { isInputTriggerTag
|
|
29
|
-
import { callAllEventHandlers
|
|
30
|
-
var
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
5
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
6
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
7
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
8
|
+
import _get from "@babel/runtime/helpers/esm/get";
|
|
9
|
+
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
10
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
11
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
12
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
13
|
+
import { sstyled, createComponent, lastInteraction, assignProps } from "@semcore/core";
|
|
14
|
+
import React from "react";
|
|
15
|
+
import cn from "classnames";
|
|
16
|
+
import DropdownMenu from "@semcore/dropdown-menu";
|
|
17
|
+
import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
|
|
18
|
+
import { ButtonTrigger } from "@semcore/base-trigger";
|
|
19
|
+
import Divider from "@semcore/divider";
|
|
20
|
+
import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
21
|
+
import logger from "@semcore/core/lib/utils/logger";
|
|
22
|
+
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
23
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
24
|
+
import InputSearch from "./InputSearch.mjs";
|
|
25
|
+
import { useBox } from "@semcore/flex-box";
|
|
26
|
+
import { selectContext } from "./context.mjs";
|
|
27
|
+
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
28
|
+
import { isInputTriggerTag } from "@semcore/popper";
|
|
29
|
+
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
30
|
+
var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
|
|
31
|
+
var style = (
|
|
31
32
|
/*__reshadow_css_start__*/
|
|
32
|
-
(
|
|
33
|
+
(sstyled.insert(
|
|
33
34
|
/*__inner_css_start__*/
|
|
34
35
|
'.___SOptionCheckbox_1dlne_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1dlne_gg_::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1dlne_gg_::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center}.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1dlne_gg_._size_l_1dlne_gg_{width:20px;height:20px}.___SOptionCheckbox_1dlne_gg_._size_l_1dlne_gg_.__selected_1dlne_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_:before,.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_:before{border-color:var(--theme_1dlne)}.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_.__indeterminate_1dlne_gg_:before,.___SOptionCheckbox_1dlne_gg_.__theme_1dlne_gg_.__selected_1dlne_gg_:before{background-color:var(--theme_1dlne);border-color:var(--theme_1dlne)}.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1dlne_gg_.__selected_1dlne_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_._size_l_1dlne_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1dlne_gg_.__indeterminate_1dlne_gg_._size_m_1dlne_gg_:after{width:8px;height:2px}',
|
|
35
36
|
"1dlne_gg_"
|
|
36
37
|
), {
|
|
37
|
-
__SOptionCheckbox: "___SOptionCheckbox_1dlne_gg_",
|
|
38
|
-
_selected: "__selected_1dlne_gg_",
|
|
39
|
-
_size_l: "_size_l_1dlne_gg_",
|
|
40
|
-
_indeterminate: "__indeterminate_1dlne_gg_",
|
|
41
|
-
_theme: "__theme_1dlne_gg_",
|
|
38
|
+
"__SOptionCheckbox": "___SOptionCheckbox_1dlne_gg_",
|
|
39
|
+
"_selected": "__selected_1dlne_gg_",
|
|
40
|
+
"_size_l": "_size_l_1dlne_gg_",
|
|
41
|
+
"_indeterminate": "__indeterminate_1dlne_gg_",
|
|
42
|
+
"_theme": "__theme_1dlne_gg_",
|
|
42
43
|
"--theme": "--theme_1dlne",
|
|
43
|
-
_size_m: "_size_m_1dlne_gg_"
|
|
44
|
+
"_size_m": "_size_m_1dlne_gg_"
|
|
44
45
|
})
|
|
45
46
|
);
|
|
46
|
-
function
|
|
47
|
-
return Array.isArray(
|
|
47
|
+
function isSelectedOption(value, valueOption) {
|
|
48
|
+
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|
|
48
49
|
}
|
|
49
|
-
function
|
|
50
|
-
return Array.isArray(
|
|
50
|
+
function isEmptyValue(value) {
|
|
51
|
+
return Array.isArray(value) ? value.length === 0 : value === null;
|
|
51
52
|
}
|
|
52
|
-
function
|
|
53
|
-
return
|
|
53
|
+
function getEmptyValue(multiselect) {
|
|
54
|
+
return multiselect ? [] : null;
|
|
54
55
|
}
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
var
|
|
58
|
-
function
|
|
59
|
-
var
|
|
60
|
-
|
|
61
|
-
for (var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
var RootSelect = /* @__PURE__ */ function(_AbstractDropdown) {
|
|
57
|
+
_inherits(RootSelect2, _AbstractDropdown);
|
|
58
|
+
var _super = _createSuper(RootSelect2);
|
|
59
|
+
function RootSelect2() {
|
|
60
|
+
var _this;
|
|
61
|
+
_classCallCheck(this, RootSelect2);
|
|
62
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
63
|
+
args[_key] = arguments[_key];
|
|
64
|
+
}
|
|
65
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
66
|
+
_defineProperty(_assertThisInitialized(_this), "role", "listbox");
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerOptionClick", function(optionValue, index) {
|
|
68
|
+
return function(e) {
|
|
69
|
+
var newValue = optionValue;
|
|
70
|
+
var _this$asProps = _this.asProps, value = _this$asProps.value, multiselect = _this$asProps.multiselect;
|
|
71
|
+
if (Array.isArray(value)) {
|
|
72
|
+
if (value.includes(optionValue)) {
|
|
73
|
+
newValue = value.filter(function(v) {
|
|
74
|
+
return v !== optionValue;
|
|
75
|
+
});
|
|
76
|
+
} else {
|
|
77
|
+
newValue = value.concat(optionValue);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
_this.handlers.value(newValue, e);
|
|
81
|
+
if (!multiselect) {
|
|
82
|
+
_this.handlers.visible(false);
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
}
|
|
69
85
|
};
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
86
|
+
});
|
|
87
|
+
_defineProperty(_assertThisInitialized(_this), "handlerClear", function(e) {
|
|
88
|
+
var value = _this.asProps.value;
|
|
89
|
+
var emptyValue = getEmptyValue(Array.isArray(value));
|
|
90
|
+
_this.handlers.value(emptyValue, e);
|
|
91
|
+
_this.handlers.visible(false);
|
|
92
|
+
});
|
|
93
|
+
return _this;
|
|
74
94
|
}
|
|
75
|
-
|
|
95
|
+
_createClass(RootSelect2, [{
|
|
76
96
|
key: "itemRef",
|
|
77
|
-
value: function(
|
|
78
|
-
|
|
79
|
-
var
|
|
80
|
-
|
|
97
|
+
value: function itemRef(props, index, node) {
|
|
98
|
+
_get(_getPrototypeOf(RootSelect2.prototype), "itemRef", this).call(this, props, index, node);
|
|
99
|
+
var highlightedIndex = this.asProps.highlightedIndex;
|
|
100
|
+
var isHighlighted = index === highlightedIndex;
|
|
101
|
+
if (isHighlighted) {
|
|
102
|
+
this.scrollToNode(node);
|
|
103
|
+
}
|
|
81
104
|
}
|
|
82
105
|
}, {
|
|
83
106
|
key: "uncontrolledProps",
|
|
84
|
-
value: function() {
|
|
85
|
-
var
|
|
86
|
-
return
|
|
87
|
-
visible: [null, function(
|
|
88
|
-
if (
|
|
89
|
-
var
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
107
|
+
value: function uncontrolledProps() {
|
|
108
|
+
var _this2 = this;
|
|
109
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "uncontrolledProps", this).call(this)), {}, {
|
|
110
|
+
visible: [null, function(visible) {
|
|
111
|
+
if (visible === true) {
|
|
112
|
+
var hasInputSearch = isAdvanceMode(_this2.asProps.Children, [Select.InputSearch.displayName], true);
|
|
113
|
+
var defaultIndex = hasInputSearch ? null : _this2.props.defaultHighlightedIndex;
|
|
114
|
+
_this2.handlers.highlightedIndex(defaultIndex);
|
|
115
|
+
setTimeout(function() {
|
|
116
|
+
var _this2$menuRef$curren, _this2$menuRef$curren2;
|
|
117
|
+
var options = (_this2$menuRef$curren = _this2.menuRef.current) === null || _this2$menuRef$curren === void 0 ? void 0 : _this2$menuRef$curren.querySelectorAll('[role="option"]');
|
|
118
|
+
var selected = (_this2$menuRef$curren2 = _this2.menuRef.current) === null || _this2$menuRef$curren2 === void 0 ? void 0 : _this2$menuRef$curren2.querySelector('[aria-selected="true"]');
|
|
119
|
+
if (selected && options) {
|
|
120
|
+
_this2.scrollToNode(selected);
|
|
121
|
+
for (var i = 0; i < options.length; i++) {
|
|
122
|
+
if (options[i] === selected) {
|
|
123
|
+
_this2.handlers.highlightedIndex(i);
|
|
97
124
|
break;
|
|
98
125
|
}
|
|
126
|
+
}
|
|
99
127
|
}
|
|
100
128
|
}, 30);
|
|
101
129
|
}
|
|
@@ -105,81 +133,90 @@ var O = /* @__PURE__ */ function(n) {
|
|
|
105
133
|
}
|
|
106
134
|
}, {
|
|
107
135
|
key: "getTriggerProps",
|
|
108
|
-
value: function() {
|
|
109
|
-
var
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
"aria-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
136
|
+
value: function getTriggerProps() {
|
|
137
|
+
var _this3 = this;
|
|
138
|
+
var _this$asProps2 = this.asProps, disabled = _this$asProps2.disabled, visible = _this$asProps2.visible, state = _this$asProps2.state, placeholder = _this$asProps2.placeholder, value = _this$asProps2.value, options = _this$asProps2.options, forwardRef = _this$asProps2.forwardRef, name = _this$asProps2.name, multiselect = _this$asProps2.multiselect, getI18nText = _this$asProps2.getI18nText, highlightedIndex = _this$asProps2.highlightedIndex, uid = _this$asProps2.uid, Children = _this$asProps2.Children, hasChildren = _this$asProps2.children;
|
|
139
|
+
var isMenu = isAdvanceMode(Children, [Select.Menu.displayName], true) || !hasChildren;
|
|
140
|
+
var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
|
|
141
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getTriggerProps", this).call(this)), {}, {
|
|
142
|
+
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
|
|
143
|
+
"aria-controls": visible ? ariaControls : void 0,
|
|
144
|
+
"aria-haspopup": isMenu ? "listbox" : "dialog",
|
|
145
|
+
"aria-disabled": disabled ? "true" : "false",
|
|
146
|
+
"aria-activedescendant": visible && highlightedIndex !== null && this.itemRefs[highlightedIndex] ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : void 0,
|
|
147
|
+
empty: isEmptyValue(value),
|
|
148
|
+
value,
|
|
149
|
+
name,
|
|
150
|
+
$hiddenRef: forwardRef,
|
|
151
|
+
multiselect,
|
|
152
|
+
state,
|
|
153
|
+
placeholder,
|
|
154
|
+
disabled,
|
|
155
|
+
active: visible,
|
|
125
156
|
onClear: this.handlerClear,
|
|
126
|
-
children: this.renderChildrenTrigger(
|
|
127
|
-
getI18nText
|
|
128
|
-
onBlur: function() {
|
|
129
|
-
|
|
157
|
+
children: this.renderChildrenTrigger(value, options),
|
|
158
|
+
getI18nText,
|
|
159
|
+
onBlur: function onBlur() {
|
|
160
|
+
if (_this3.asProps.visible) {
|
|
161
|
+
_this3.prevHighlightedIndex = _this3.asProps.highlightedIndex;
|
|
162
|
+
_this3.handlers.highlightedIndex(null);
|
|
163
|
+
}
|
|
130
164
|
},
|
|
131
|
-
onFocus: function() {
|
|
132
|
-
if (
|
|
133
|
-
var
|
|
134
|
-
|
|
165
|
+
onFocus: function onFocus() {
|
|
166
|
+
if (_this3.asProps.visible) {
|
|
167
|
+
var index = _this3.prevHighlightedIndex;
|
|
168
|
+
_this3.handlers.highlightedIndex(index);
|
|
135
169
|
}
|
|
136
170
|
}
|
|
137
171
|
});
|
|
138
172
|
}
|
|
139
173
|
}, {
|
|
140
174
|
key: "getListProps",
|
|
141
|
-
value: function() {
|
|
142
|
-
var
|
|
143
|
-
return
|
|
144
|
-
"aria-multiselectable":
|
|
175
|
+
value: function getListProps() {
|
|
176
|
+
var multiselect = this.asProps.multiselect;
|
|
177
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getListProps", this).call(this)), {}, {
|
|
178
|
+
"aria-multiselectable": multiselect ? "true" : void 0
|
|
145
179
|
});
|
|
146
180
|
}
|
|
147
181
|
}, {
|
|
148
182
|
key: "getPopperProps",
|
|
149
|
-
value: function() {
|
|
150
|
-
return
|
|
151
|
-
onKeyDown:
|
|
183
|
+
value: function getPopperProps() {
|
|
184
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getPopperProps", this).call(this)), {}, {
|
|
185
|
+
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
|
|
152
186
|
});
|
|
153
187
|
}
|
|
154
188
|
}, {
|
|
155
189
|
key: "getOptionProps",
|
|
156
|
-
value: function(
|
|
157
|
-
var
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
190
|
+
value: function getOptionProps(props, index) {
|
|
191
|
+
var _props$selected, _this4 = this;
|
|
192
|
+
var _this$asProps3 = this.asProps, value = _this$asProps3.value, highlightedIndex = _this$asProps3.highlightedIndex, _this$asProps3$size = _this$asProps3.size, size = _this$asProps3$size === void 0 ? "m" : _this$asProps3$size;
|
|
193
|
+
var highlighted = index === highlightedIndex && lastInteraction.isKeyboard() && !props.disabled;
|
|
194
|
+
var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
|
|
195
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect2.prototype), "getItemProps", this).call(this, props, index)), {}, {
|
|
196
|
+
highlighted,
|
|
197
|
+
selected,
|
|
198
|
+
"aria-selected": selected ? "true" : "false",
|
|
199
|
+
"aria-disabled": props.disabled ? "true" : "false",
|
|
163
200
|
role: "option",
|
|
164
|
-
onClick: this.bindHandlerOptionClick(
|
|
165
|
-
ref: function(
|
|
166
|
-
return
|
|
201
|
+
onClick: this.bindHandlerOptionClick(props.value, index),
|
|
202
|
+
ref: function ref(node) {
|
|
203
|
+
return _this4.itemRef(props, index, node);
|
|
167
204
|
},
|
|
168
|
-
size
|
|
205
|
+
size
|
|
169
206
|
});
|
|
170
207
|
}
|
|
171
208
|
}, {
|
|
172
209
|
key: "getOptionCheckboxProps",
|
|
173
|
-
value: function() {
|
|
174
|
-
var
|
|
210
|
+
value: function getOptionCheckboxProps() {
|
|
211
|
+
var _this$asProps4 = this.asProps, size = _this$asProps4.size, resolveColor = _this$asProps4.resolveColor;
|
|
175
212
|
return {
|
|
176
|
-
size
|
|
177
|
-
resolveColor
|
|
213
|
+
size,
|
|
214
|
+
resolveColor
|
|
178
215
|
};
|
|
179
216
|
}
|
|
180
217
|
}, {
|
|
181
218
|
key: "getDividerProps",
|
|
182
|
-
value: function() {
|
|
219
|
+
value: function getDividerProps() {
|
|
183
220
|
return {
|
|
184
221
|
my: 1,
|
|
185
222
|
"aria-disabled": "true"
|
|
@@ -187,126 +224,155 @@ var O = /* @__PURE__ */ function(n) {
|
|
|
187
224
|
}
|
|
188
225
|
}, {
|
|
189
226
|
key: "renderChildrenTrigger",
|
|
190
|
-
value: function(
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
227
|
+
value: function renderChildrenTrigger(value, options) {
|
|
228
|
+
if (options) {
|
|
229
|
+
return [].concat(value).reduce(function(acc, value2) {
|
|
230
|
+
var selectedOption = options.find(function(o) {
|
|
231
|
+
return isSelectedOption(value2, o.value);
|
|
232
|
+
});
|
|
233
|
+
if (!selectedOption) return acc;
|
|
234
|
+
if (acc.length) acc.push(", ");
|
|
235
|
+
acc.push(selectedOption.label || selectedOption.value);
|
|
236
|
+
return acc;
|
|
237
|
+
}, []);
|
|
238
|
+
}
|
|
239
|
+
return Array.isArray(value) ? value.reduce(function(acc, value2) {
|
|
240
|
+
if (acc.length) acc.push(", ");
|
|
241
|
+
acc.push(value2);
|
|
242
|
+
return acc;
|
|
243
|
+
}, []) : value;
|
|
199
244
|
}
|
|
200
245
|
}, {
|
|
201
246
|
key: "render",
|
|
202
|
-
value: function() {
|
|
203
|
-
var
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
247
|
+
value: function render() {
|
|
248
|
+
var _ref2 = this.asProps;
|
|
249
|
+
var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, options = _this$asProps5.options, multiselect = _this$asProps5.multiselect;
|
|
250
|
+
_this$asProps5.value;
|
|
251
|
+
var uid = _this$asProps5.uid, forcedAdvancedMode = _this$asProps5.forcedAdvancedMode, other = _objectWithoutProperties(_this$asProps5, _excluded);
|
|
252
|
+
var advancedMode = forcedAdvancedMode || findComponent(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
|
|
253
|
+
logger.warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other["data-ui-name"] || Select.displayName);
|
|
254
|
+
this.itemProps = [];
|
|
255
|
+
if (options) {
|
|
256
|
+
var _ref = this.asProps;
|
|
257
|
+
return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref), /* @__PURE__ */ React.createElement(Select.Trigger, other), /* @__PURE__ */ React.createElement(Select.Menu, null, options.map(function(option, index) {
|
|
258
|
+
return /* @__PURE__ */ React.createElement(Select.Option, _extends({
|
|
259
|
+
key: option.value,
|
|
260
|
+
id: "igc-".concat(uid, "-option-").concat(index)
|
|
261
|
+
}, option), multiselect && /* @__PURE__ */ React.createElement(Select.Option.Checkbox, null), option.children);
|
|
213
262
|
})));
|
|
214
263
|
}
|
|
215
|
-
return /* @__PURE__ */
|
|
264
|
+
return /* @__PURE__ */ React.createElement(DropdownMenu, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Children, null));
|
|
216
265
|
}
|
|
217
|
-
}])
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
266
|
+
}]);
|
|
267
|
+
return RootSelect2;
|
|
268
|
+
}(AbstractDropdown);
|
|
269
|
+
_defineProperty(RootSelect, "displayName", "Select");
|
|
270
|
+
_defineProperty(RootSelect, "style", style);
|
|
271
|
+
_defineProperty(RootSelect, "enhance", Object.values(enhance).concat([resolveColorEnhance()]));
|
|
272
|
+
_defineProperty(RootSelect, "defaultProps", function(props) {
|
|
273
|
+
var _props$highlightedInd, _props$selectedIndex, _props$interaction, _props$timeout;
|
|
274
|
+
var hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName], true);
|
|
275
|
+
var defaultIndex = hasInputSearch ? null : 0;
|
|
224
276
|
return {
|
|
225
|
-
placeholder:
|
|
277
|
+
placeholder: props.multiselect ? "Select options" : "Select option",
|
|
226
278
|
size: "m",
|
|
227
|
-
defaultValue:
|
|
228
|
-
defaultVisible:
|
|
229
|
-
defaultHighlightedIndex: (
|
|
230
|
-
defaultSelectedIndex: (
|
|
231
|
-
scrollToSelected:
|
|
232
|
-
i18n:
|
|
279
|
+
defaultValue: getEmptyValue(props.multiselect),
|
|
280
|
+
defaultVisible: false,
|
|
281
|
+
defaultHighlightedIndex: (_props$highlightedInd = props.highlightedIndex) !== null && _props$highlightedInd !== void 0 ? _props$highlightedInd : defaultIndex,
|
|
282
|
+
defaultSelectedIndex: (_props$selectedIndex = props.selectedIndex) !== null && _props$selectedIndex !== void 0 ? _props$selectedIndex : defaultIndex,
|
|
283
|
+
scrollToSelected: true,
|
|
284
|
+
i18n: localizedMessages,
|
|
233
285
|
locale: "en",
|
|
234
|
-
interaction: (
|
|
235
|
-
inlineActions:
|
|
236
|
-
timeout: (
|
|
286
|
+
interaction: (_props$interaction = props.interaction) !== null && _props$interaction !== void 0 ? _props$interaction : "click",
|
|
287
|
+
inlineActions: false,
|
|
288
|
+
timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
|
|
237
289
|
};
|
|
238
290
|
});
|
|
239
|
-
function
|
|
240
|
-
var
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
"
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
291
|
+
function Trigger(_ref8) {
|
|
292
|
+
var _ref3 = arguments[0], _ref6;
|
|
293
|
+
var Children = _ref8.Children, name = _ref8.name, value = _ref8.value, styles = _ref8.styles, $hiddenRef = _ref8.$hiddenRef, _ref8$tag = _ref8.tag, Tag = _ref8$tag === void 0 ? ButtonTrigger : _ref8$tag, getI18nText = _ref8.getI18nText;
|
|
294
|
+
var hasInputTrigger = isInputTriggerTag(Tag);
|
|
295
|
+
var SSelectTrigger = Dropdown.Trigger;
|
|
296
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectTrigger, _ref6.cn("SSelectTrigger", _objectSpread({}, assignProps({
|
|
297
|
+
"tag": Tag,
|
|
298
|
+
"placeholder": getI18nText("selectPlaceholder"),
|
|
299
|
+
"role": "combobox",
|
|
300
|
+
"aria-autocomplete": hasInputTrigger && "list" || void 0
|
|
301
|
+
}, _ref3))), addonTextChildren(Children, Tag.Text || ButtonTrigger.Text, Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /* @__PURE__ */ React.createElement("input", _ref6.cn("input", {
|
|
302
|
+
"type": "hidden",
|
|
303
|
+
"defaultValue": value,
|
|
304
|
+
"name": name,
|
|
305
|
+
"ref": $hiddenRef
|
|
251
306
|
})));
|
|
252
307
|
}
|
|
253
|
-
var
|
|
254
|
-
function
|
|
255
|
-
var
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
308
|
+
var optionPropsContext = /* @__PURE__ */ React.createContext({});
|
|
309
|
+
function Option(props) {
|
|
310
|
+
var _ref4 = arguments[0], _ref7;
|
|
311
|
+
var SSelectOption = Dropdown.Item;
|
|
312
|
+
var styles = props.styles, Children = props.Children;
|
|
313
|
+
var hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
|
|
314
|
+
var hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
|
|
315
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSelectOption, _ref7.cn("SSelectOption", _objectSpread({}, assignProps({}, _ref4))), /* @__PURE__ */ React.createElement(optionPropsContext.Provider, {
|
|
316
|
+
value: props
|
|
317
|
+
}, hasCheckbox && !hasContent ? /* @__PURE__ */ React.createElement(Select.Option.Content, null, /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {}))) : /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {}))));
|
|
259
318
|
}
|
|
260
|
-
function
|
|
261
|
-
var
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
319
|
+
function Checkbox(providedProps) {
|
|
320
|
+
var optionProps = React.useContext(optionPropsContext);
|
|
321
|
+
var props = React.useMemo(function() {
|
|
322
|
+
return _objectSpread({
|
|
323
|
+
selected: optionProps === null || optionProps === void 0 ? void 0 : optionProps.selected,
|
|
324
|
+
disabled: optionProps === null || optionProps === void 0 ? void 0 : optionProps.disabled,
|
|
325
|
+
size: optionProps === null || optionProps === void 0 ? void 0 : optionProps.size
|
|
326
|
+
}, providedProps || {});
|
|
327
|
+
}, [providedProps, optionProps]);
|
|
328
|
+
var _useBox = useBox(props, props.forwardRef), _useBox2 = _slicedToArray(_useBox, 2), SOptionCheckbox = _useBox2[0], componentProps = _useBox2[1];
|
|
329
|
+
var size = props.size, theme = props.theme, selected = props.selected, resolveColor = props.resolveColor, indeterminate = props.indeterminate;
|
|
330
|
+
var styles = sstyled(props.styles);
|
|
331
|
+
var _styles$cn = styles.cn("SOptionCheckbox", {
|
|
332
|
+
size,
|
|
333
|
+
"use:theme": resolveColor(theme),
|
|
334
|
+
indeterminate,
|
|
335
|
+
selected
|
|
336
|
+
}), className = _styles$cn.className, style2 = _styles$cn.style;
|
|
337
|
+
return /* @__PURE__ */ React.createElement(SOptionCheckbox, _extends({}, componentProps, {
|
|
338
|
+
className: cn(className, componentProps.className) || void 0,
|
|
339
|
+
style: _objectSpread(_objectSpread({}, style2), componentProps.style),
|
|
276
340
|
tabIndex: -1
|
|
277
341
|
}));
|
|
278
342
|
}
|
|
279
|
-
var
|
|
280
|
-
var
|
|
281
|
-
return /* @__PURE__ */
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
343
|
+
var InputSearchWrapper = function InputSearchWrapper2() {
|
|
344
|
+
var _ref5 = arguments[0];
|
|
345
|
+
return /* @__PURE__ */ React.createElement(InputSearch, assignProps({}, _ref5));
|
|
346
|
+
};
|
|
347
|
+
var Select = createComponent(RootSelect, {
|
|
348
|
+
Trigger: [Trigger, {
|
|
349
|
+
Addon: ButtonTrigger.Addon,
|
|
350
|
+
Text: ButtonTrigger.Text
|
|
286
351
|
}],
|
|
287
|
-
Popper:
|
|
288
|
-
List:
|
|
289
|
-
Menu:
|
|
290
|
-
Option: [
|
|
291
|
-
Addon:
|
|
292
|
-
Content:
|
|
293
|
-
Hint:
|
|
294
|
-
Checkbox
|
|
352
|
+
Popper: Dropdown.Popper,
|
|
353
|
+
List: DropdownMenu.List,
|
|
354
|
+
Menu: DropdownMenu.Menu,
|
|
355
|
+
Option: [Option, {
|
|
356
|
+
Addon: DropdownMenu.Item.Addon,
|
|
357
|
+
Content: DropdownMenu.Item.Content,
|
|
358
|
+
Hint: DropdownMenu.Item.Hint,
|
|
359
|
+
Checkbox
|
|
295
360
|
}],
|
|
296
|
-
Group:
|
|
297
|
-
OptionTitle:
|
|
298
|
-
OptionHint:
|
|
299
|
-
Divider
|
|
300
|
-
InputSearch: [
|
|
301
|
-
Input: [
|
|
361
|
+
Group: Dropdown.Group,
|
|
362
|
+
OptionTitle: DropdownMenu.ItemTitle,
|
|
363
|
+
OptionHint: DropdownMenu.ItemHint,
|
|
364
|
+
Divider,
|
|
365
|
+
InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
|
|
366
|
+
Input: [InputSearchWrapper, InputSearch._______childrenComponents]
|
|
302
367
|
}, {
|
|
303
|
-
parent:
|
|
304
|
-
context:
|
|
305
|
-
})
|
|
306
|
-
|
|
368
|
+
parent: DropdownMenu,
|
|
369
|
+
context: selectContext
|
|
370
|
+
});
|
|
371
|
+
var wrapSelect = function wrapSelect2(wrapper) {
|
|
372
|
+
return wrapper;
|
|
307
373
|
};
|
|
308
|
-
|
|
374
|
+
Select.selectedIndexContext = selectedIndexContext;
|
|
309
375
|
export {
|
|
310
|
-
|
|
311
|
-
|
|
376
|
+
Select as default,
|
|
377
|
+
wrapSelect
|
|
312
378
|
};
|