@laerdal/life-react-components 1.9.9-dev.2 → 1.9.9-dev.5
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/dist/Breadcrumb/Breadcrumb.cjs +10 -46
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.js +8 -43
- package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/Breadcrumb/styles.cjs +55 -0
- package/dist/Breadcrumb/styles.cjs.map +1 -0
- package/dist/Breadcrumb/styles.d.ts +7 -0
- package/dist/Breadcrumb/styles.js +39 -0
- package/dist/Breadcrumb/styles.js.map +1 -0
- package/dist/Button/DualFunctionButton.cjs +1 -0
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.js +1 -0
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs +8 -2
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.js +2 -2
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +2 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +2 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +57 -67
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.d.ts +7 -14
- package/dist/Dropdown/BasicDropdown.js +58 -67
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +1 -1
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +1 -1
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +8 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +38 -44
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +20 -17
- package/dist/InputFields/DatepickerField.js +20 -33
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +52 -63
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +19 -14
- package/dist/InputFields/NumberField.js +53 -60
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +1 -1
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +1 -1
- package/dist/InputFields/RadioButton.js +1 -1
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/TextField.cjs +3 -5
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +1 -2
- package/dist/InputFields/TextField.js +4 -5
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/index.cjs +0 -26
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.d.ts +0 -1
- package/dist/InputFields/index.js +0 -1
- package/dist/InputFields/index.js.map +1 -1
- package/dist/Popover/Popover.cjs +2 -2
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +2 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +2 -0
- package/dist/Toggles/ToggleButton.cjs.map +1 -1
- package/dist/Toggles/ToggleButton.d.ts +1 -0
- package/dist/Toggles/ToggleButton.js +2 -0
- package/dist/Toggles/ToggleButton.js.map +1 -1
- package/dist/Toggles/ToggleSwitch.cjs +18 -24
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.d.ts +1 -5
- package/dist/Toggles/ToggleSwitch.js +13 -21
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -1
- package/package.json +1 -1
|
@@ -37,33 +37,38 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
37
37
|
|
|
38
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
39
|
|
|
40
|
-
var BasicDropdown =
|
|
41
|
-
var id =
|
|
42
|
-
list =
|
|
43
|
-
placeholder =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
40
|
+
var BasicDropdown = function BasicDropdown(_ref) {
|
|
41
|
+
var id = _ref.id,
|
|
42
|
+
list = _ref.list,
|
|
43
|
+
placeholder = _ref.placeholder,
|
|
44
|
+
onSelect = _ref.onSelect,
|
|
45
|
+
setDropdownMenuValues = _ref.setDropdownMenuValues,
|
|
46
|
+
initalValue = _ref.initalValue,
|
|
47
|
+
disableSorting = _ref.disableSorting,
|
|
48
|
+
messageOnNoResults = _ref.messageOnNoResults,
|
|
49
|
+
_ref$itemsType = _ref.itemsType,
|
|
50
|
+
itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
|
|
51
|
+
action = _ref.action,
|
|
52
|
+
actionLabel = _ref.actionLabel,
|
|
53
|
+
actionVariant = _ref.actionVariant,
|
|
54
|
+
actionIcon = _ref.actionIcon,
|
|
55
|
+
actionLoading = _ref.actionLoading,
|
|
56
|
+
actionDisabled = _ref.actionDisabled,
|
|
57
|
+
pinTopItem = _ref.pinTopItem,
|
|
58
|
+
multiSelect = _ref.multiSelect,
|
|
59
|
+
_ref$scrollable = _ref.scrollable,
|
|
60
|
+
scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
|
|
61
|
+
maxHeight = _ref.maxHeight,
|
|
62
|
+
disabled = _ref.disabled,
|
|
63
|
+
readOnly = _ref.readOnly,
|
|
64
|
+
isButton = _ref.isButton,
|
|
65
|
+
activeValidationMessage = _ref.activeValidationMessage,
|
|
66
|
+
autofilledMessage = _ref.autofilledMessage,
|
|
67
|
+
size = _ref.size,
|
|
68
|
+
_ref$margin = _ref.margin,
|
|
69
|
+
margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
|
|
70
|
+
dropdownMenuValues = _ref.dropdownMenuValues,
|
|
71
|
+
minWidth = _ref.minWidth;
|
|
67
72
|
|
|
68
73
|
var _React$useState = React.useState(false),
|
|
69
74
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -85,10 +90,15 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
85
90
|
focused = _React$useState8[0],
|
|
86
91
|
setFocused = _React$useState8[1];
|
|
87
92
|
|
|
88
|
-
var _React$useState9 = React.useState(
|
|
93
|
+
var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
|
|
89
94
|
_React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
|
|
90
|
-
|
|
91
|
-
|
|
95
|
+
selectedValues = _React$useState10[0],
|
|
96
|
+
setSelectedValues = _React$useState10[1];
|
|
97
|
+
|
|
98
|
+
var _React$useState11 = React.useState(false),
|
|
99
|
+
_React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
|
|
100
|
+
keyboardNavigated = _React$useState12[0],
|
|
101
|
+
setKeyboardNavigated = _React$useState12[1];
|
|
92
102
|
|
|
93
103
|
var inputRef = React.useRef(null);
|
|
94
104
|
var styledFieldRef = (0, _common.useFocusVisibleRef)([inputRef]);
|
|
@@ -109,15 +119,9 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
109
119
|
|
|
110
120
|
var handleValueSelect = function handleValueSelect(values) {
|
|
111
121
|
setInput(values.join(', '));
|
|
122
|
+
onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
|
|
112
123
|
|
|
113
|
-
if (
|
|
114
|
-
props.onSelect(values);
|
|
115
|
-
} else if (props.multiSelect === false || props.multiSelect === undefined) {
|
|
116
|
-
props.onSelect(values[0]);
|
|
117
|
-
} //don't close dropdown on item select if have custom action or multiselect
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
if (actionLabel || props.multiSelect) return;
|
|
124
|
+
if (actionLabel || multiSelect) return;
|
|
121
125
|
|
|
122
126
|
if (keyboardNavigated) {
|
|
123
127
|
var _styledFieldRef$curre;
|
|
@@ -132,25 +136,18 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
132
136
|
};
|
|
133
137
|
|
|
134
138
|
React.useEffect(function () {
|
|
135
|
-
if (
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
setInput(props.value);
|
|
140
|
-
}
|
|
141
|
-
} else {
|
|
142
|
-
setInput('');
|
|
139
|
+
if (initalValue || dropdownMenuValues) {
|
|
140
|
+
var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
|
|
141
|
+
setInput(initValue);
|
|
142
|
+
setSelectedValues([initValue]);
|
|
143
143
|
}
|
|
144
|
-
}, [
|
|
144
|
+
}, [initalValue, dropdownMenuValues]);
|
|
145
145
|
React.useEffect(function () {
|
|
146
146
|
setIsLoading(false);
|
|
147
147
|
}, [input]);
|
|
148
148
|
React.useEffect(function () {
|
|
149
149
|
!isOpen && setKeyboardNavigated(false);
|
|
150
150
|
}, [isOpen]);
|
|
151
|
-
React.useImperativeHandle(ref, function () {
|
|
152
|
-
return inputRef.current;
|
|
153
|
-
}, [inputRef]);
|
|
154
151
|
|
|
155
152
|
var customSetIsOpen = function customSetIsOpen(isOpen) {
|
|
156
153
|
setIsOpen(isOpen);
|
|
@@ -168,13 +165,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
168
165
|
return listDisplayLabels.join(', ');
|
|
169
166
|
};
|
|
170
167
|
|
|
171
|
-
var handleBlur = function handleBlur(e) {
|
|
172
|
-
// @ts-ignore
|
|
173
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
174
|
-
onBlur && onBlur(e);
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
|
|
178
168
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
179
169
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
|
|
180
170
|
ref: containerRef,
|
|
@@ -183,7 +173,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
183
173
|
readOnly: readOnly,
|
|
184
174
|
disabled: disabled,
|
|
185
175
|
margin: margin,
|
|
186
|
-
onBlur: handleBlur,
|
|
187
176
|
minWidth: minWidth,
|
|
188
177
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
|
|
189
178
|
ref: styledFieldRef,
|
|
@@ -245,7 +234,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
245
234
|
scrollable: scrollable,
|
|
246
235
|
onValueUpdate: handleValueSelect,
|
|
247
236
|
items: list,
|
|
248
|
-
multiSelect:
|
|
237
|
+
multiSelect: multiSelect,
|
|
249
238
|
pinTopItem: pinTopItem,
|
|
250
239
|
maxHeight: maxHeight,
|
|
251
240
|
actionIcon: actionIcon,
|
|
@@ -260,8 +249,8 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
260
249
|
messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
|
|
261
250
|
outline: keyboardNavigated,
|
|
262
251
|
isButton: isButton || false,
|
|
263
|
-
selectedValues:
|
|
264
|
-
setSelectedValues:
|
|
252
|
+
selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
|
|
253
|
+
setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
|
|
265
254
|
id: "".concat(id, "_dropdowncontent")
|
|
266
255
|
})]
|
|
267
256
|
}), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
|
|
@@ -278,7 +267,8 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
278
267
|
})]
|
|
279
268
|
})]
|
|
280
269
|
});
|
|
281
|
-
}
|
|
270
|
+
};
|
|
271
|
+
|
|
282
272
|
BasicDropdown.propTypes = {
|
|
283
273
|
id: _propTypes.default.string.isRequired,
|
|
284
274
|
list: _propTypes.default.array.isRequired,
|
|
@@ -289,9 +279,13 @@ BasicDropdown.propTypes = {
|
|
|
289
279
|
actionLoading: _propTypes.default.bool,
|
|
290
280
|
actionDisabled: _propTypes.default.bool,
|
|
291
281
|
pinTopItem: _propTypes.default.bool,
|
|
282
|
+
multiSelect: _propTypes.default.bool,
|
|
292
283
|
scrollable: _propTypes.default.bool,
|
|
293
284
|
maxHeight: _propTypes.default.string,
|
|
294
285
|
placeholder: _propTypes.default.string,
|
|
286
|
+
onSelect: _propTypes.default.func,
|
|
287
|
+
setDropdownMenuValues: _propTypes.default.func,
|
|
288
|
+
initalValue: _propTypes.default.string,
|
|
295
289
|
disableSorting: _propTypes.default.bool,
|
|
296
290
|
messageOnNoResults: _propTypes.default.string,
|
|
297
291
|
disabled: _propTypes.default.bool,
|
|
@@ -300,11 +294,7 @@ BasicDropdown.propTypes = {
|
|
|
300
294
|
activeValidationMessage: _propTypes.default.string,
|
|
301
295
|
autofilledMessage: _propTypes.default.string,
|
|
302
296
|
margin: _propTypes.default.string,
|
|
303
|
-
|
|
304
|
-
onBlur: _propTypes.default.func,
|
|
305
|
-
multiSelect: _propTypes.default.oneOf([true]).isRequired,
|
|
306
|
-
value: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
307
|
-
onSelect: _propTypes.default.func.isRequired
|
|
297
|
+
dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string)
|
|
308
298
|
};
|
|
309
299
|
var _default = BasicDropdown;
|
|
310
300
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","onBlur","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","onSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps {\n id: string;\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n minWidth?: string;\n onBlur?: (event: React.FocusEvent) => void;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n multiSelect: true;\n value?: string[];\n onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n multiSelect?: false;\n value?: string;\n onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n const {\n id,\n list,\n placeholder,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n minWidth,\n onBlur\n } = props;\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n\n if (props.multiSelect === true) {\n props.onSelect(values);\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n props.onSelect(values[0]);\n }\n\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || props.multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({focusVisible: true} as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (props.value) {\n if (props.multiSelect) {\n setInput(props.value.join(', '));\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n setInput(props.value);\n }\n } else {\n setInput('');\n }\n }, [props.value, props.multiSelect]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n\n return (\n <>\n <Dropdown ref={containerRef}\n isButton={isButton || false}\n className={size ? size : ''}\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onBlur={handleBlur}\n minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: props.multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n setSelectedValues={handleValueSelect}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600}/>\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n});\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","current","focus","focusVisible","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';\nimport { useFocusOutsideRef } from '../common';\n\ninterface DropdownFilterProps {\n id: string;\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n multiSelect?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n onSelect?: (value: string[]) => void;\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n initalValue?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n dropdownMenuValues?: string[];\n minWidth?: string;\n}\n\nconst BasicDropdown = ({\n id,\n list,\n placeholder,\n onSelect,\n setDropdownMenuValues,\n initalValue,\n disableSorting,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n multiSelect,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n dropdownMenuValues,\n minWidth,\n}: DropdownFilterProps) => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n onSelect && onSelect(values);\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({ focusVisible: true } as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (initalValue || dropdownMenuValues) {\n const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n setInput(initValue);\n setSelectedValues([initValue]);\n }\n }, [initalValue, dropdownMenuValues]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n return (\n <>\n <Dropdown ref={containerRef} isButton={isButton || false} className={size ? size : ''} readOnly={readOnly} disabled={disabled} margin={margin} minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {}),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={dropdownMenuValues ?? selectedValues}\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400} />\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600} />\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DropdownItem } from './DropdownContent';
|
|
3
3
|
import { Size } from '../types';
|
|
4
|
-
interface
|
|
4
|
+
interface DropdownFilterProps {
|
|
5
5
|
id: string;
|
|
6
6
|
list: DropdownItem[];
|
|
7
7
|
itemsType?: 'normal' | 'checkbox' | 'radio';
|
|
@@ -12,9 +12,13 @@ interface BasicDropdownCommonProps {
|
|
|
12
12
|
actionLoading?: boolean;
|
|
13
13
|
actionDisabled?: boolean;
|
|
14
14
|
pinTopItem?: boolean;
|
|
15
|
+
multiSelect?: boolean;
|
|
15
16
|
scrollable?: boolean;
|
|
16
17
|
maxHeight?: string;
|
|
17
18
|
placeholder?: string;
|
|
19
|
+
onSelect?: (value: string[]) => void;
|
|
20
|
+
setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
|
|
21
|
+
initalValue?: string;
|
|
18
22
|
disableSorting?: boolean;
|
|
19
23
|
messageOnNoResults?: string;
|
|
20
24
|
disabled?: boolean;
|
|
@@ -24,19 +28,8 @@ interface BasicDropdownCommonProps {
|
|
|
24
28
|
autofilledMessage?: string;
|
|
25
29
|
size?: Size.Small | Size.Medium;
|
|
26
30
|
margin?: string;
|
|
31
|
+
dropdownMenuValues?: string[];
|
|
27
32
|
minWidth?: string;
|
|
28
|
-
onBlur?: (event: React.FocusEvent) => void;
|
|
29
33
|
}
|
|
30
|
-
declare
|
|
31
|
-
multiSelect: true;
|
|
32
|
-
value?: string[];
|
|
33
|
-
onSelect: (value: string[]) => void;
|
|
34
|
-
};
|
|
35
|
-
declare type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
|
|
36
|
-
multiSelect?: false;
|
|
37
|
-
value?: string;
|
|
38
|
-
onSelect: (value: string) => void;
|
|
39
|
-
};
|
|
40
|
-
declare type DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;
|
|
41
|
-
declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
|
|
34
|
+
declare const BasicDropdown: ({ id, list, placeholder, onSelect, setDropdownMenuValues, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, readOnly, isButton, activeValidationMessage, autofilledMessage, size, margin, dropdownMenuValues, minWidth, }: DropdownFilterProps) => JSX.Element;
|
|
42
35
|
export default BasicDropdown;
|
|
@@ -13,33 +13,39 @@ import { useFocusOutsideRef } from '../common';
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
15
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
16
|
+
|
|
17
|
+
var BasicDropdown = function BasicDropdown(_ref) {
|
|
18
|
+
var id = _ref.id,
|
|
19
|
+
list = _ref.list,
|
|
20
|
+
placeholder = _ref.placeholder,
|
|
21
|
+
onSelect = _ref.onSelect,
|
|
22
|
+
setDropdownMenuValues = _ref.setDropdownMenuValues,
|
|
23
|
+
initalValue = _ref.initalValue,
|
|
24
|
+
disableSorting = _ref.disableSorting,
|
|
25
|
+
messageOnNoResults = _ref.messageOnNoResults,
|
|
26
|
+
_ref$itemsType = _ref.itemsType,
|
|
27
|
+
itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
|
|
28
|
+
action = _ref.action,
|
|
29
|
+
actionLabel = _ref.actionLabel,
|
|
30
|
+
actionVariant = _ref.actionVariant,
|
|
31
|
+
actionIcon = _ref.actionIcon,
|
|
32
|
+
actionLoading = _ref.actionLoading,
|
|
33
|
+
actionDisabled = _ref.actionDisabled,
|
|
34
|
+
pinTopItem = _ref.pinTopItem,
|
|
35
|
+
multiSelect = _ref.multiSelect,
|
|
36
|
+
_ref$scrollable = _ref.scrollable,
|
|
37
|
+
scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
|
|
38
|
+
maxHeight = _ref.maxHeight,
|
|
39
|
+
disabled = _ref.disabled,
|
|
40
|
+
readOnly = _ref.readOnly,
|
|
41
|
+
isButton = _ref.isButton,
|
|
42
|
+
activeValidationMessage = _ref.activeValidationMessage,
|
|
43
|
+
autofilledMessage = _ref.autofilledMessage,
|
|
44
|
+
size = _ref.size,
|
|
45
|
+
_ref$margin = _ref.margin,
|
|
46
|
+
margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
|
|
47
|
+
dropdownMenuValues = _ref.dropdownMenuValues,
|
|
48
|
+
minWidth = _ref.minWidth;
|
|
43
49
|
|
|
44
50
|
var _React$useState = React.useState(false),
|
|
45
51
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -61,10 +67,15 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
61
67
|
focused = _React$useState8[0],
|
|
62
68
|
setFocused = _React$useState8[1];
|
|
63
69
|
|
|
64
|
-
var _React$useState9 = React.useState(
|
|
70
|
+
var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
|
|
65
71
|
_React$useState10 = _slicedToArray(_React$useState9, 2),
|
|
66
|
-
|
|
67
|
-
|
|
72
|
+
selectedValues = _React$useState10[0],
|
|
73
|
+
setSelectedValues = _React$useState10[1];
|
|
74
|
+
|
|
75
|
+
var _React$useState11 = React.useState(false),
|
|
76
|
+
_React$useState12 = _slicedToArray(_React$useState11, 2),
|
|
77
|
+
keyboardNavigated = _React$useState12[0],
|
|
78
|
+
setKeyboardNavigated = _React$useState12[1];
|
|
68
79
|
|
|
69
80
|
var inputRef = React.useRef(null);
|
|
70
81
|
var styledFieldRef = useFocusVisibleRef([inputRef]);
|
|
@@ -85,15 +96,9 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
85
96
|
|
|
86
97
|
var handleValueSelect = function handleValueSelect(values) {
|
|
87
98
|
setInput(values.join(', '));
|
|
99
|
+
onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
|
|
88
100
|
|
|
89
|
-
if (
|
|
90
|
-
props.onSelect(values);
|
|
91
|
-
} else if (props.multiSelect === false || props.multiSelect === undefined) {
|
|
92
|
-
props.onSelect(values[0]);
|
|
93
|
-
} //don't close dropdown on item select if have custom action or multiselect
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
if (actionLabel || props.multiSelect) return;
|
|
101
|
+
if (actionLabel || multiSelect) return;
|
|
97
102
|
|
|
98
103
|
if (keyboardNavigated) {
|
|
99
104
|
var _styledFieldRef$curre;
|
|
@@ -108,25 +113,18 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
108
113
|
};
|
|
109
114
|
|
|
110
115
|
React.useEffect(function () {
|
|
111
|
-
if (
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
setInput(props.value);
|
|
116
|
-
}
|
|
117
|
-
} else {
|
|
118
|
-
setInput('');
|
|
116
|
+
if (initalValue || dropdownMenuValues) {
|
|
117
|
+
var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
|
|
118
|
+
setInput(initValue);
|
|
119
|
+
setSelectedValues([initValue]);
|
|
119
120
|
}
|
|
120
|
-
}, [
|
|
121
|
+
}, [initalValue, dropdownMenuValues]);
|
|
121
122
|
React.useEffect(function () {
|
|
122
123
|
setIsLoading(false);
|
|
123
124
|
}, [input]);
|
|
124
125
|
React.useEffect(function () {
|
|
125
126
|
!isOpen && setKeyboardNavigated(false);
|
|
126
127
|
}, [isOpen]);
|
|
127
|
-
React.useImperativeHandle(ref, function () {
|
|
128
|
-
return inputRef.current;
|
|
129
|
-
}, [inputRef]);
|
|
130
128
|
|
|
131
129
|
var customSetIsOpen = function customSetIsOpen(isOpen) {
|
|
132
130
|
setIsOpen(isOpen);
|
|
@@ -144,13 +142,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
144
142
|
return listDisplayLabels.join(', ');
|
|
145
143
|
};
|
|
146
144
|
|
|
147
|
-
var handleBlur = function handleBlur(e) {
|
|
148
|
-
// @ts-ignore
|
|
149
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
150
|
-
onBlur && onBlur(e);
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
|
|
154
145
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
155
146
|
children: [/*#__PURE__*/_jsxs(Dropdown, {
|
|
156
147
|
ref: containerRef,
|
|
@@ -159,7 +150,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
159
150
|
readOnly: readOnly,
|
|
160
151
|
disabled: disabled,
|
|
161
152
|
margin: margin,
|
|
162
|
-
onBlur: handleBlur,
|
|
163
153
|
minWidth: minWidth,
|
|
164
154
|
children: [/*#__PURE__*/_jsxs(StyledField, {
|
|
165
155
|
ref: styledFieldRef,
|
|
@@ -221,7 +211,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
221
211
|
scrollable: scrollable,
|
|
222
212
|
onValueUpdate: handleValueSelect,
|
|
223
213
|
items: list,
|
|
224
|
-
multiSelect:
|
|
214
|
+
multiSelect: multiSelect,
|
|
225
215
|
pinTopItem: pinTopItem,
|
|
226
216
|
maxHeight: maxHeight,
|
|
227
217
|
actionIcon: actionIcon,
|
|
@@ -236,8 +226,8 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
236
226
|
messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
|
|
237
227
|
outline: keyboardNavigated,
|
|
238
228
|
isButton: isButton || false,
|
|
239
|
-
selectedValues:
|
|
240
|
-
setSelectedValues:
|
|
229
|
+
selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
|
|
230
|
+
setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
|
|
241
231
|
id: "".concat(id, "_dropdowncontent")
|
|
242
232
|
})]
|
|
243
233
|
}), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
|
|
@@ -254,7 +244,8 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
254
244
|
})]
|
|
255
245
|
})]
|
|
256
246
|
});
|
|
257
|
-
}
|
|
247
|
+
};
|
|
248
|
+
|
|
258
249
|
BasicDropdown.propTypes = {
|
|
259
250
|
id: _pt.string.isRequired,
|
|
260
251
|
list: _pt.array.isRequired,
|
|
@@ -265,9 +256,13 @@ BasicDropdown.propTypes = {
|
|
|
265
256
|
actionLoading: _pt.bool,
|
|
266
257
|
actionDisabled: _pt.bool,
|
|
267
258
|
pinTopItem: _pt.bool,
|
|
259
|
+
multiSelect: _pt.bool,
|
|
268
260
|
scrollable: _pt.bool,
|
|
269
261
|
maxHeight: _pt.string,
|
|
270
262
|
placeholder: _pt.string,
|
|
263
|
+
onSelect: _pt.func,
|
|
264
|
+
setDropdownMenuValues: _pt.func,
|
|
265
|
+
initalValue: _pt.string,
|
|
271
266
|
disableSorting: _pt.bool,
|
|
272
267
|
messageOnNoResults: _pt.string,
|
|
273
268
|
disabled: _pt.bool,
|
|
@@ -276,11 +271,7 @@ BasicDropdown.propTypes = {
|
|
|
276
271
|
activeValidationMessage: _pt.string,
|
|
277
272
|
autofilledMessage: _pt.string,
|
|
278
273
|
margin: _pt.string,
|
|
279
|
-
|
|
280
|
-
onBlur: _pt.func,
|
|
281
|
-
multiSelect: _pt.oneOf([true]).isRequired,
|
|
282
|
-
value: _pt.arrayOf(_pt.string),
|
|
283
|
-
onSelect: _pt.func.isRequired
|
|
274
|
+
dropdownMenuValues: _pt.arrayOf(_pt.string)
|
|
284
275
|
};
|
|
285
276
|
export default BasicDropdown;
|
|
286
277
|
//# sourceMappingURL=BasicDropdown.js.map
|