baseui 0.0.0-next-6ad6c9b → 0.0.0-next-e047a0a
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.
|
@@ -594,7 +594,7 @@ class Select extends React.Component {
|
|
|
594
594
|
}
|
|
595
595
|
|
|
596
596
|
if (!prevState.isFocused && this.state.isFocused) {
|
|
597
|
-
document.addEventListener('click', this.handleClickOutside);
|
|
597
|
+
setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
|
|
598
598
|
}
|
|
599
599
|
}
|
|
600
600
|
}
|
|
@@ -680,6 +680,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
680
680
|
}, {
|
|
681
681
|
key: "componentDidUpdate",
|
|
682
682
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
683
|
+
var _this2 = this;
|
|
684
|
+
|
|
683
685
|
if (typeof document !== 'undefined') {
|
|
684
686
|
if (prevState.isOpen !== this.state.isOpen) {
|
|
685
687
|
if (this.state.isOpen) {
|
|
@@ -692,7 +694,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
692
694
|
}
|
|
693
695
|
|
|
694
696
|
if (!prevState.isFocused && this.state.isFocused) {
|
|
695
|
-
|
|
697
|
+
setTimeout(function () {
|
|
698
|
+
return document.addEventListener('click', _this2.handleClickOutside);
|
|
699
|
+
}, 0);
|
|
696
700
|
}
|
|
697
701
|
}
|
|
698
702
|
}
|
|
@@ -761,7 +765,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
761
765
|
* Extends the value into an array from the given options
|
|
762
766
|
*/
|
|
763
767
|
function getValueArray(value) {
|
|
764
|
-
var
|
|
768
|
+
var _this3 = this;
|
|
765
769
|
|
|
766
770
|
if (!Array.isArray(value)) {
|
|
767
771
|
if (value === null || value === undefined) return [];
|
|
@@ -769,7 +773,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
769
773
|
}
|
|
770
774
|
|
|
771
775
|
return value.map(function (value) {
|
|
772
|
-
return expandValue(value,
|
|
776
|
+
return expandValue(value, _this3.props);
|
|
773
777
|
});
|
|
774
778
|
}
|
|
775
779
|
}, {
|
|
@@ -814,7 +818,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
814
818
|
}, {
|
|
815
819
|
key: "renderValue",
|
|
816
820
|
value: function renderValue(valueArray, isOpen, locale) {
|
|
817
|
-
var
|
|
821
|
+
var _this4 = this;
|
|
818
822
|
|
|
819
823
|
var _this$props$overrides2 = this.props.overrides,
|
|
820
824
|
overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
|
|
@@ -831,9 +835,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
831
835
|
var disabled = sharedProps.$disabled || value.clearableValue === false;
|
|
832
836
|
return /*#__PURE__*/React.createElement(Value, _extends({
|
|
833
837
|
value: value,
|
|
834
|
-
key: "value-".concat(i, "-").concat(value[
|
|
838
|
+
key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
|
|
835
839
|
removeValue: function removeValue() {
|
|
836
|
-
return
|
|
840
|
+
return _this4.removeValue(value);
|
|
837
841
|
},
|
|
838
842
|
disabled: disabled,
|
|
839
843
|
overrides: {
|
|
@@ -862,7 +866,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
862
866
|
}, {
|
|
863
867
|
key: "renderInput",
|
|
864
868
|
value: function renderInput(listboxId) {
|
|
865
|
-
var
|
|
869
|
+
var _this5 = this;
|
|
866
870
|
|
|
867
871
|
var _this$props$overrides3 = this.props.overrides,
|
|
868
872
|
overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
|
|
@@ -875,7 +879,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
875
879
|
var sharedProps = this.getSharedProps();
|
|
876
880
|
var isOpen = this.state.isOpen;
|
|
877
881
|
var selected = this.getValueArray(this.props.value).map(function (v) {
|
|
878
|
-
return v[
|
|
882
|
+
return v[_this5.props.labelKey];
|
|
879
883
|
}).join(', ');
|
|
880
884
|
var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
|
|
881
885
|
var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
|
|
@@ -1036,7 +1040,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1036
1040
|
}, {
|
|
1037
1041
|
key: "filterOptions",
|
|
1038
1042
|
value: function filterOptions(excludeOptions) {
|
|
1039
|
-
var
|
|
1043
|
+
var _this6 = this;
|
|
1040
1044
|
|
|
1041
1045
|
var filterValue = this.state.inputValue.trim(); // apply filter function
|
|
1042
1046
|
|
|
@@ -1049,9 +1053,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1049
1053
|
|
|
1050
1054
|
|
|
1051
1055
|
var filterDoesNotMatchOption = this.props.ignoreCase ? function (opt) {
|
|
1052
|
-
return opt[
|
|
1056
|
+
return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
|
|
1053
1057
|
} : function (opt) {
|
|
1054
|
-
return opt[
|
|
1058
|
+
return opt[_this6.props.labelKey] !== filterValue.trim();
|
|
1055
1059
|
};
|
|
1056
1060
|
|
|
1057
1061
|
if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
|
|
@@ -1106,7 +1110,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1106
1110
|
}, {
|
|
1107
1111
|
key: "render",
|
|
1108
1112
|
value: function render() {
|
|
1109
|
-
var
|
|
1113
|
+
var _this7 = this;
|
|
1110
1114
|
|
|
1111
1115
|
this.options = normalizeOptions(this.props.options);
|
|
1112
1116
|
var _this$props2 = this.props,
|
|
@@ -1178,55 +1182,55 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1178
1182
|
, _extends({
|
|
1179
1183
|
innerRef: function innerRef(ref) {
|
|
1180
1184
|
if (!ref) return;
|
|
1181
|
-
|
|
1185
|
+
_this7.anchor = ref.anchorRef;
|
|
1182
1186
|
},
|
|
1183
1187
|
autoFocus: false,
|
|
1184
1188
|
focusLock: false,
|
|
1185
|
-
mountNode:
|
|
1189
|
+
mountNode: _this7.props.mountNode,
|
|
1186
1190
|
onEsc: function onEsc() {
|
|
1187
|
-
return
|
|
1191
|
+
return _this7.closeMenu();
|
|
1188
1192
|
},
|
|
1189
1193
|
isOpen: isOpen,
|
|
1190
1194
|
popoverMargin: 0,
|
|
1191
1195
|
content: function content() {
|
|
1192
1196
|
var dropdownProps = {
|
|
1193
|
-
error:
|
|
1194
|
-
positive:
|
|
1195
|
-
getOptionLabel:
|
|
1197
|
+
error: _this7.props.error,
|
|
1198
|
+
positive: _this7.props.positive,
|
|
1199
|
+
getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
|
|
1196
1200
|
id: listboxId,
|
|
1197
|
-
isLoading:
|
|
1198
|
-
labelKey:
|
|
1199
|
-
maxDropdownHeight:
|
|
1201
|
+
isLoading: _this7.props.isLoading,
|
|
1202
|
+
labelKey: _this7.props.labelKey,
|
|
1203
|
+
maxDropdownHeight: _this7.props.maxDropdownHeight,
|
|
1200
1204
|
multi: multi,
|
|
1201
1205
|
noResultsMsg: noResultsMsg,
|
|
1202
|
-
onActiveDescendantChange:
|
|
1203
|
-
onItemSelect:
|
|
1206
|
+
onActiveDescendantChange: _this7.handleActiveDescendantChange,
|
|
1207
|
+
onItemSelect: _this7.selectValue,
|
|
1204
1208
|
options: options,
|
|
1205
1209
|
overrides: overrides,
|
|
1206
|
-
required:
|
|
1207
|
-
searchable:
|
|
1208
|
-
size:
|
|
1210
|
+
required: _this7.props.required,
|
|
1211
|
+
searchable: _this7.props.searchable,
|
|
1212
|
+
size: _this7.props.size,
|
|
1209
1213
|
type: type,
|
|
1210
1214
|
value: valueArray,
|
|
1211
|
-
valueKey:
|
|
1212
|
-
width:
|
|
1213
|
-
keyboardControlNode:
|
|
1215
|
+
valueKey: _this7.props.valueKey,
|
|
1216
|
+
width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
|
|
1217
|
+
keyboardControlNode: _this7.anchor
|
|
1214
1218
|
};
|
|
1215
1219
|
return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
|
|
1216
|
-
innerRef:
|
|
1220
|
+
innerRef: _this7.dropdown
|
|
1217
1221
|
}, dropdownProps));
|
|
1218
1222
|
},
|
|
1219
1223
|
placement: PLACEMENT.bottom
|
|
1220
1224
|
}, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
|
|
1221
|
-
onBlur:
|
|
1225
|
+
onBlur: _this7.handleBlur,
|
|
1222
1226
|
"data-baseweb": "select"
|
|
1223
1227
|
}, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
|
|
1224
|
-
onKeyDown:
|
|
1225
|
-
onClick:
|
|
1226
|
-
onTouchEnd:
|
|
1227
|
-
onTouchMove:
|
|
1228
|
-
onTouchStart:
|
|
1229
|
-
}, sharedProps, controlContainerProps), type === TYPE.search ?
|
|
1228
|
+
onKeyDown: _this7.handleKeyDown,
|
|
1229
|
+
onClick: _this7.handleClick,
|
|
1230
|
+
onTouchEnd: _this7.handleTouchEnd,
|
|
1231
|
+
onTouchMove: _this7.handleTouchMove,
|
|
1232
|
+
onTouchStart: _this7.handleTouchStart
|
|
1233
|
+
}, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
|
|
1230
1234
|
});
|
|
1231
1235
|
});
|
|
1232
1236
|
}
|
package/package.json
CHANGED
|
@@ -699,6 +699,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
699
699
|
}, {
|
|
700
700
|
key: "componentDidUpdate",
|
|
701
701
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
702
|
+
var _this2 = this;
|
|
703
|
+
|
|
702
704
|
if (typeof document !== 'undefined') {
|
|
703
705
|
if (prevState.isOpen !== this.state.isOpen) {
|
|
704
706
|
if (this.state.isOpen) {
|
|
@@ -711,7 +713,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
711
713
|
}
|
|
712
714
|
|
|
713
715
|
if (!prevState.isFocused && this.state.isFocused) {
|
|
714
|
-
|
|
716
|
+
setTimeout(function () {
|
|
717
|
+
return document.addEventListener('click', _this2.handleClickOutside);
|
|
718
|
+
}, 0);
|
|
715
719
|
}
|
|
716
720
|
}
|
|
717
721
|
}
|
|
@@ -780,7 +784,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
780
784
|
* Extends the value into an array from the given options
|
|
781
785
|
*/
|
|
782
786
|
function getValueArray(value) {
|
|
783
|
-
var
|
|
787
|
+
var _this3 = this;
|
|
784
788
|
|
|
785
789
|
if (!Array.isArray(value)) {
|
|
786
790
|
if (value === null || value === undefined) return [];
|
|
@@ -788,7 +792,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
788
792
|
}
|
|
789
793
|
|
|
790
794
|
return value.map(function (value) {
|
|
791
|
-
return (0, _index3.expandValue)(value,
|
|
795
|
+
return (0, _index3.expandValue)(value, _this3.props);
|
|
792
796
|
});
|
|
793
797
|
}
|
|
794
798
|
}, {
|
|
@@ -833,7 +837,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
833
837
|
}, {
|
|
834
838
|
key: "renderValue",
|
|
835
839
|
value: function renderValue(valueArray, isOpen, locale) {
|
|
836
|
-
var
|
|
840
|
+
var _this4 = this;
|
|
837
841
|
|
|
838
842
|
var _this$props$overrides2 = this.props.overrides,
|
|
839
843
|
overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
|
|
@@ -850,9 +854,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
850
854
|
var disabled = sharedProps.$disabled || value.clearableValue === false;
|
|
851
855
|
return /*#__PURE__*/React.createElement(Value, _extends({
|
|
852
856
|
value: value,
|
|
853
|
-
key: "value-".concat(i, "-").concat(value[
|
|
857
|
+
key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
|
|
854
858
|
removeValue: function removeValue() {
|
|
855
|
-
return
|
|
859
|
+
return _this4.removeValue(value);
|
|
856
860
|
},
|
|
857
861
|
disabled: disabled,
|
|
858
862
|
overrides: {
|
|
@@ -881,7 +885,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
881
885
|
}, {
|
|
882
886
|
key: "renderInput",
|
|
883
887
|
value: function renderInput(listboxId) {
|
|
884
|
-
var
|
|
888
|
+
var _this5 = this;
|
|
885
889
|
|
|
886
890
|
var _this$props$overrides3 = this.props.overrides,
|
|
887
891
|
overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
|
|
@@ -894,7 +898,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
894
898
|
var sharedProps = this.getSharedProps();
|
|
895
899
|
var isOpen = this.state.isOpen;
|
|
896
900
|
var selected = this.getValueArray(this.props.value).map(function (v) {
|
|
897
|
-
return v[
|
|
901
|
+
return v[_this5.props.labelKey];
|
|
898
902
|
}).join(', ');
|
|
899
903
|
var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
|
|
900
904
|
var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
|
|
@@ -1055,7 +1059,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1055
1059
|
}, {
|
|
1056
1060
|
key: "filterOptions",
|
|
1057
1061
|
value: function filterOptions(excludeOptions) {
|
|
1058
|
-
var
|
|
1062
|
+
var _this6 = this;
|
|
1059
1063
|
|
|
1060
1064
|
var filterValue = this.state.inputValue.trim(); // apply filter function
|
|
1061
1065
|
|
|
@@ -1068,9 +1072,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1068
1072
|
|
|
1069
1073
|
|
|
1070
1074
|
var filterDoesNotMatchOption = this.props.ignoreCase ? function (opt) {
|
|
1071
|
-
return opt[
|
|
1075
|
+
return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
|
|
1072
1076
|
} : function (opt) {
|
|
1073
|
-
return opt[
|
|
1077
|
+
return opt[_this6.props.labelKey] !== filterValue.trim();
|
|
1074
1078
|
};
|
|
1075
1079
|
|
|
1076
1080
|
if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
|
|
@@ -1125,7 +1129,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1125
1129
|
}, {
|
|
1126
1130
|
key: "render",
|
|
1127
1131
|
value: function render() {
|
|
1128
|
-
var
|
|
1132
|
+
var _this7 = this;
|
|
1129
1133
|
|
|
1130
1134
|
this.options = (0, _index3.normalizeOptions)(this.props.options);
|
|
1131
1135
|
var _this$props2 = this.props,
|
|
@@ -1197,55 +1201,55 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
1197
1201
|
, _extends({
|
|
1198
1202
|
innerRef: function innerRef(ref) {
|
|
1199
1203
|
if (!ref) return;
|
|
1200
|
-
|
|
1204
|
+
_this7.anchor = ref.anchorRef;
|
|
1201
1205
|
},
|
|
1202
1206
|
autoFocus: false,
|
|
1203
1207
|
focusLock: false,
|
|
1204
|
-
mountNode:
|
|
1208
|
+
mountNode: _this7.props.mountNode,
|
|
1205
1209
|
onEsc: function onEsc() {
|
|
1206
|
-
return
|
|
1210
|
+
return _this7.closeMenu();
|
|
1207
1211
|
},
|
|
1208
1212
|
isOpen: isOpen,
|
|
1209
1213
|
popoverMargin: 0,
|
|
1210
1214
|
content: function content() {
|
|
1211
1215
|
var dropdownProps = {
|
|
1212
|
-
error:
|
|
1213
|
-
positive:
|
|
1214
|
-
getOptionLabel:
|
|
1216
|
+
error: _this7.props.error,
|
|
1217
|
+
positive: _this7.props.positive,
|
|
1218
|
+
getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
|
|
1215
1219
|
id: listboxId,
|
|
1216
|
-
isLoading:
|
|
1217
|
-
labelKey:
|
|
1218
|
-
maxDropdownHeight:
|
|
1220
|
+
isLoading: _this7.props.isLoading,
|
|
1221
|
+
labelKey: _this7.props.labelKey,
|
|
1222
|
+
maxDropdownHeight: _this7.props.maxDropdownHeight,
|
|
1219
1223
|
multi: multi,
|
|
1220
1224
|
noResultsMsg: noResultsMsg,
|
|
1221
|
-
onActiveDescendantChange:
|
|
1222
|
-
onItemSelect:
|
|
1225
|
+
onActiveDescendantChange: _this7.handleActiveDescendantChange,
|
|
1226
|
+
onItemSelect: _this7.selectValue,
|
|
1223
1227
|
options: options,
|
|
1224
1228
|
overrides: overrides,
|
|
1225
|
-
required:
|
|
1226
|
-
searchable:
|
|
1227
|
-
size:
|
|
1229
|
+
required: _this7.props.required,
|
|
1230
|
+
searchable: _this7.props.searchable,
|
|
1231
|
+
size: _this7.props.size,
|
|
1228
1232
|
type: type,
|
|
1229
1233
|
value: valueArray,
|
|
1230
|
-
valueKey:
|
|
1231
|
-
width:
|
|
1232
|
-
keyboardControlNode:
|
|
1234
|
+
valueKey: _this7.props.valueKey,
|
|
1235
|
+
width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
|
|
1236
|
+
keyboardControlNode: _this7.anchor
|
|
1233
1237
|
};
|
|
1234
1238
|
return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
|
|
1235
|
-
innerRef:
|
|
1239
|
+
innerRef: _this7.dropdown
|
|
1236
1240
|
}, dropdownProps));
|
|
1237
1241
|
},
|
|
1238
1242
|
placement: _index2.PLACEMENT.bottom
|
|
1239
1243
|
}, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
|
|
1240
|
-
onBlur:
|
|
1244
|
+
onBlur: _this7.handleBlur,
|
|
1241
1245
|
"data-baseweb": "select"
|
|
1242
1246
|
}, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
|
|
1243
|
-
onKeyDown:
|
|
1244
|
-
onClick:
|
|
1245
|
-
onTouchEnd:
|
|
1246
|
-
onTouchMove:
|
|
1247
|
-
onTouchStart:
|
|
1248
|
-
}, sharedProps, controlContainerProps), type === _constants.TYPE.search ?
|
|
1247
|
+
onKeyDown: _this7.handleKeyDown,
|
|
1248
|
+
onClick: _this7.handleClick,
|
|
1249
|
+
onTouchEnd: _this7.handleTouchEnd,
|
|
1250
|
+
onTouchMove: _this7.handleTouchMove,
|
|
1251
|
+
onTouchStart: _this7.handleTouchStart
|
|
1252
|
+
}, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === _constants.TYPE.select ? _this7.renderArrow() : null))));
|
|
1249
1253
|
});
|
|
1250
1254
|
});
|
|
1251
1255
|
}
|
|
@@ -142,7 +142,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
if (!prevState.isFocused && this.state.isFocused) {
|
|
145
|
-
document.addEventListener('click', this.handleClickOutside);
|
|
145
|
+
setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
}
|