@entur/dropdown 5.0.6 → 5.0.8
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/Dropdown.d.ts +62 -62
- package/dist/MultiSelect.d.ts +111 -111
- package/dist/NativeDropdown.d.ts +52 -52
- package/dist/SearchableDropdown.d.ts +70 -70
- package/dist/components/DropdownList.d.ts +25 -25
- package/dist/components/FieldComponents.d.ts +29 -29
- package/dist/deprecated/BaseDropdown.d.ts +22 -22
- package/dist/deprecated/DownshiftProvider.d.ts +16 -16
- package/dist/deprecated/Dropdown.d.ts +72 -72
- package/dist/deprecated/DropdownInputGroup.d.ts +11 -11
- package/dist/deprecated/DropdownList.d.ts +8 -8
- package/dist/deprecated/DropdownLoadingDots.d.ts +10 -10
- package/dist/deprecated/DropdownToggleButton.d.ts +3 -3
- package/dist/deprecated/MultiSelect.d.ts +64 -64
- package/dist/deprecated/RegularDropdown.d.ts +20 -20
- package/dist/deprecated/SearchableDropdown.d.ts +34 -34
- package/dist/deprecated/index.d.ts +2 -2
- package/dist/dropdown.cjs.development.js +207 -200
- package/dist/dropdown.cjs.development.js.map +1 -1
- package/dist/dropdown.cjs.production.min.js +1 -1
- package/dist/dropdown.cjs.production.min.js.map +1 -1
- package/dist/dropdown.esm.js +56 -43
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/index.d.ts +7 -7
- package/dist/styles.css +231 -233
- package/dist/useNormalizedItems.d.ts +12 -12
- package/dist/useResolvedItems.d.ts +10 -10
- package/dist/utils.d.ts +48 -48
- package/package.json +10 -10
|
@@ -15,12 +15,6 @@ var button = require('@entur/button');
|
|
|
15
15
|
var chip = require('@entur/chip');
|
|
16
16
|
var tooltip = require('@entur/tooltip');
|
|
17
17
|
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
|
|
22
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
23
|
-
|
|
24
18
|
function _regeneratorRuntime() {
|
|
25
19
|
_regeneratorRuntime = function () {
|
|
26
20
|
return exports;
|
|
@@ -383,7 +377,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
383
377
|
}
|
|
384
378
|
|
|
385
379
|
var _excluded$d = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
|
|
386
|
-
var DownshiftContext = /*#__PURE__*/
|
|
380
|
+
var DownshiftContext = /*#__PURE__*/React.createContext(null);
|
|
387
381
|
var DownshiftProvider = function DownshiftProvider(_ref) {
|
|
388
382
|
var children = _ref.children,
|
|
389
383
|
_ref$onChange = _ref.onChange,
|
|
@@ -402,7 +396,7 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
|
|
|
402
396
|
searchable = _ref$searchable === void 0 ? false : _ref$searchable,
|
|
403
397
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
404
398
|
var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
|
|
405
|
-
if (changes.type ===
|
|
399
|
+
if (changes.type === Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem) {
|
|
406
400
|
return;
|
|
407
401
|
}
|
|
408
402
|
if ('selectedItem' in changes) {
|
|
@@ -437,23 +431,23 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
|
|
|
437
431
|
return _extends({}, changes, highlightFirstItemIndex);
|
|
438
432
|
}
|
|
439
433
|
};
|
|
440
|
-
return
|
|
434
|
+
return React.createElement(Downshift, _extends({
|
|
441
435
|
itemToString: function itemToString(item) {
|
|
442
436
|
return item ? item.label : '';
|
|
443
437
|
},
|
|
444
438
|
onStateChange: handleStateChange,
|
|
445
439
|
stateReducer: stateReducer
|
|
446
440
|
}, rest), function (args) {
|
|
447
|
-
return
|
|
448
|
-
className:
|
|
441
|
+
return React.createElement("div", {
|
|
442
|
+
className: classNames('eds-input-group', className),
|
|
449
443
|
style: style
|
|
450
|
-
},
|
|
444
|
+
}, React.createElement(DownshiftContext.Provider, {
|
|
451
445
|
value: args
|
|
452
446
|
}, children));
|
|
453
447
|
});
|
|
454
448
|
};
|
|
455
449
|
var useDownshift = function useDownshift() {
|
|
456
|
-
var context =
|
|
450
|
+
var context = React.useContext(DownshiftContext);
|
|
457
451
|
if (!context) {
|
|
458
452
|
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
459
453
|
}
|
|
@@ -470,15 +464,15 @@ var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
|
|
|
470
464
|
selectedItem = _useDownshift.selectedItem,
|
|
471
465
|
getItemProps = _useDownshift.getItemProps,
|
|
472
466
|
getMenuProps = _useDownshift.getMenuProps;
|
|
473
|
-
return
|
|
474
|
-
className:
|
|
467
|
+
return React.createElement("ul", _extends({
|
|
468
|
+
className: classNames('eds-dropdown-list', {
|
|
475
469
|
'eds-dropdown-list--open': isOpen
|
|
476
470
|
})
|
|
477
471
|
}, getMenuProps(), rest), isOpen ? items.map(function (item, index) {
|
|
478
472
|
return (
|
|
479
473
|
// eslint-disable-next-line react/jsx-key
|
|
480
|
-
|
|
481
|
-
className:
|
|
474
|
+
React.createElement("li", _extends({
|
|
475
|
+
className: classNames('eds-dropdown-list__item', {
|
|
482
476
|
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
483
477
|
'eds-dropdown-list__item--selected': selectedItem === item
|
|
484
478
|
})
|
|
@@ -486,13 +480,13 @@ var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
|
|
|
486
480
|
key: "" + index + item.value,
|
|
487
481
|
item: item,
|
|
488
482
|
index: index
|
|
489
|
-
})),
|
|
490
|
-
return
|
|
483
|
+
})), React.createElement("span", null, item.label), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
484
|
+
return React.createElement(Icon, {
|
|
491
485
|
key: index,
|
|
492
486
|
inline: true,
|
|
493
487
|
className: "eds-dropdown-list__item-icon"
|
|
494
488
|
});
|
|
495
|
-
})), selectedItem === item &&
|
|
489
|
+
})), selectedItem === item && React.createElement(icons.CheckIcon, null))
|
|
496
490
|
);
|
|
497
491
|
}) : null);
|
|
498
492
|
};
|
|
@@ -501,14 +495,14 @@ var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
|
|
|
501
495
|
var _useDownshift = useDownshift(),
|
|
502
496
|
getToggleButtonProps = _useDownshift.getToggleButtonProps,
|
|
503
497
|
isOpen = _useDownshift.isOpen;
|
|
504
|
-
return
|
|
505
|
-
className:
|
|
498
|
+
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
499
|
+
className: classNames('eds-dropdown__toggle-button', {
|
|
506
500
|
'eds-dropdown__toggle-button--open': isOpen
|
|
507
501
|
})
|
|
508
502
|
}), {
|
|
509
503
|
tabIndex: "-1",
|
|
510
504
|
type: "button"
|
|
511
|
-
}),
|
|
505
|
+
}), React.createElement(icons.DownArrowIcon, null));
|
|
512
506
|
};
|
|
513
507
|
|
|
514
508
|
var _excluded$b = ["className", "children"];
|
|
@@ -516,9 +510,9 @@ var DropdownDeprecatedLoadingDots = function DropdownDeprecatedLoadingDots(_ref)
|
|
|
516
510
|
var className = _ref.className,
|
|
517
511
|
children = _ref.children,
|
|
518
512
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
519
|
-
return
|
|
520
|
-
className:
|
|
521
|
-
}, rest),
|
|
513
|
+
return React.createElement("div", _extends({
|
|
514
|
+
className: classNames('eds-inline-spinner', className)
|
|
515
|
+
}, rest), React.createElement(loader.LoadingDots, null), React.createElement(a11y.VisuallyHidden, null, children));
|
|
522
516
|
};
|
|
523
517
|
|
|
524
518
|
var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
|
|
@@ -540,11 +534,11 @@ var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
|
|
|
540
534
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
541
535
|
var _useDownshift = useDownshift(),
|
|
542
536
|
getLabelProps = _useDownshift.getLabelProps;
|
|
543
|
-
return
|
|
537
|
+
return React.createElement("div", {
|
|
544
538
|
className: "eds-dropdown-wrapper",
|
|
545
539
|
style: style
|
|
546
|
-
},
|
|
547
|
-
append:
|
|
540
|
+
}, React.createElement(form.BaseFormControl, _extends({
|
|
541
|
+
append: React.createElement(Appendix$1, {
|
|
548
542
|
clearable: clearable,
|
|
549
543
|
loading: loading,
|
|
550
544
|
loadingText: loadingText,
|
|
@@ -555,7 +549,7 @@ var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
|
|
|
555
549
|
isFilled: isFilled,
|
|
556
550
|
labelProps: getLabelProps(),
|
|
557
551
|
disableLabelAnimation: disableLabelAnimation
|
|
558
|
-
}, rest), children),
|
|
552
|
+
}, rest), children), React.createElement(DropdownListDeprecated, _extends({
|
|
559
553
|
items: items,
|
|
560
554
|
style: _extends({
|
|
561
555
|
position: 'absolute',
|
|
@@ -568,7 +562,7 @@ var ClearButton$1 = function ClearButton(_ref2) {
|
|
|
568
562
|
var _useDownshift2 = useDownshift(),
|
|
569
563
|
clearSelection = _useDownshift2.clearSelection,
|
|
570
564
|
selectedItem = _useDownshift2.selectedItem;
|
|
571
|
-
return
|
|
565
|
+
return React.createElement(React.Fragment, null, selectedItem && React.createElement("button", _extends({
|
|
572
566
|
className: "eds-dropdown__clear-button",
|
|
573
567
|
type: "button",
|
|
574
568
|
tabIndex: -1,
|
|
@@ -576,7 +570,7 @@ var ClearButton$1 = function ClearButton(_ref2) {
|
|
|
576
570
|
return clearSelection();
|
|
577
571
|
},
|
|
578
572
|
"aria-label": "Trykk for \xE5 fjerne valg"
|
|
579
|
-
}, props),
|
|
573
|
+
}, props), React.createElement(icons.CloseSmallIcon, null)), selectedItem && React.createElement("div", {
|
|
580
574
|
className: "eds-dropdown__divider"
|
|
581
575
|
}));
|
|
582
576
|
};
|
|
@@ -586,16 +580,16 @@ var Appendix$1 = function Appendix(_ref3) {
|
|
|
586
580
|
loadingText = _ref3.loadingText,
|
|
587
581
|
readOnly = _ref3.readOnly;
|
|
588
582
|
if (loading) {
|
|
589
|
-
return
|
|
583
|
+
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
590
584
|
}
|
|
591
585
|
if (readOnly) {
|
|
592
586
|
return null;
|
|
593
587
|
}
|
|
594
|
-
return clearable ?
|
|
588
|
+
return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownDeprecatedToggleButton, null)) : React.createElement(DropdownDeprecatedToggleButton, null);
|
|
595
589
|
};
|
|
596
590
|
|
|
597
591
|
var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
|
|
598
|
-
var RegularDropdownDeprecated = /*#__PURE__*/
|
|
592
|
+
var RegularDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
599
593
|
var disabled = _ref.disabled,
|
|
600
594
|
_ref$placeholder = _ref.placeholder,
|
|
601
595
|
placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
|
|
@@ -620,7 +614,7 @@ var RegularDropdownDeprecated = /*#__PURE__*/React__default["default"].forwardRe
|
|
|
620
614
|
isOpen = _useDownshift.isOpen,
|
|
621
615
|
highlightedIndex = _useDownshift.highlightedIndex,
|
|
622
616
|
setHighlightedIndex = _useDownshift.setHighlightedIndex;
|
|
623
|
-
return
|
|
617
|
+
return React.createElement(BaseDropdownDeprecated, _extends({
|
|
624
618
|
disabled: disabled,
|
|
625
619
|
listStyle: listStyle,
|
|
626
620
|
items: items,
|
|
@@ -631,7 +625,7 @@ var RegularDropdownDeprecated = /*#__PURE__*/React__default["default"].forwardRe
|
|
|
631
625
|
loadingText: loadingText,
|
|
632
626
|
className: className,
|
|
633
627
|
clearable: clearable
|
|
634
|
-
}, rest),
|
|
628
|
+
}, rest), React.createElement("button", _extends({}, getToggleButtonProps(_extends({
|
|
635
629
|
className: 'eds-form-control eds-dropdown__selected-item',
|
|
636
630
|
style: {
|
|
637
631
|
textAlign: 'left'
|
|
@@ -681,17 +675,17 @@ function LowerCaseFilterTest(item, input) {
|
|
|
681
675
|
var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
|
|
682
676
|
return inputRegex.test(item.label);
|
|
683
677
|
}
|
|
684
|
-
/**
|
|
685
|
-
* @deprecated
|
|
686
|
-
* New SearchableDropdown available
|
|
687
|
-
*
|
|
688
|
-
* migration guide to new dropdown:
|
|
689
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
690
|
-
* - change from 'value' to 'selectedItem'
|
|
691
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
692
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
678
|
+
/**
|
|
679
|
+
* @deprecated
|
|
680
|
+
* New SearchableDropdown available
|
|
681
|
+
*
|
|
682
|
+
* migration guide to new dropdown:
|
|
683
|
+
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
684
|
+
* - change from 'value' to 'selectedItem'
|
|
685
|
+
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
686
|
+
* - 'onChange' must update value of 'selectedItem'
|
|
693
687
|
*/
|
|
694
|
-
var SearchableDropdownDeprecated = /*#__PURE__*/
|
|
688
|
+
var SearchableDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
695
689
|
var _ref$disabled = _ref.disabled,
|
|
696
690
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
697
691
|
className = _ref.className,
|
|
@@ -727,12 +721,12 @@ var SearchableDropdownDeprecated = /*#__PURE__*/React__default["default"].forwar
|
|
|
727
721
|
hideSelectedItem = _useState[0],
|
|
728
722
|
setHideSelectedItem = _useState[1];
|
|
729
723
|
var inputRef = React.useRef(null);
|
|
730
|
-
var filteredItems =
|
|
724
|
+
var filteredItems = React.useMemo(function () {
|
|
731
725
|
return items.filter(function (item) {
|
|
732
726
|
return itemFilter(item, inputValue);
|
|
733
727
|
});
|
|
734
728
|
}, [inputValue, items, itemFilter]);
|
|
735
|
-
return
|
|
729
|
+
return React.createElement(BaseDropdownDeprecated, {
|
|
736
730
|
items: filteredItems,
|
|
737
731
|
disabled: disabled,
|
|
738
732
|
readOnly: readOnly,
|
|
@@ -745,15 +739,15 @@ var SearchableDropdownDeprecated = /*#__PURE__*/React__default["default"].forwar
|
|
|
745
739
|
label: label,
|
|
746
740
|
isFilled: selectedItem ? true : false,
|
|
747
741
|
disableLabelAnimation: disableLabelAnimation
|
|
748
|
-
}, !hideSelectedItem && selectedItem && !inputValue &&
|
|
742
|
+
}, !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
|
|
749
743
|
className: "eds-dropdown__searchable-selected-item__wrapper"
|
|
750
|
-
},
|
|
744
|
+
}, React.createElement("span", {
|
|
751
745
|
className: "eds-dropdown__searchable-selected-item",
|
|
752
746
|
onClick: function onClick() {
|
|
753
747
|
var _inputRef$current;
|
|
754
748
|
return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
755
749
|
}
|
|
756
|
-
}, selectedItem.label)),
|
|
750
|
+
}, selectedItem.label)), React.createElement("input", _extends({}, getInputProps(_extends({
|
|
757
751
|
disabled: disabled,
|
|
758
752
|
readOnly: readOnly,
|
|
759
753
|
className: 'eds-form-control eds-dropdown__input',
|
|
@@ -780,18 +774,18 @@ var DropdownInputGroupDeprecated = function DropdownInputGroupDeprecated(_ref) {
|
|
|
780
774
|
variant = _ref.variant,
|
|
781
775
|
className = _ref.className,
|
|
782
776
|
style = _ref.style;
|
|
783
|
-
return
|
|
777
|
+
return React.createElement(form.VariantProvider, {
|
|
784
778
|
variant: variant
|
|
785
|
-
},
|
|
779
|
+
}, React.createElement("div", {
|
|
786
780
|
className: className,
|
|
787
781
|
style: style
|
|
788
|
-
}, children, feedback && variant &&
|
|
782
|
+
}, children, feedback && variant && React.createElement(form.FeedbackText, {
|
|
789
783
|
variant: variant
|
|
790
784
|
}, feedback)));
|
|
791
785
|
};
|
|
792
786
|
|
|
793
787
|
var useNormalizedItems = function useNormalizedItems(items) {
|
|
794
|
-
return
|
|
788
|
+
return React.useMemo(function () {
|
|
795
789
|
return items.map(function (item) {
|
|
796
790
|
if (typeof item == 'string') {
|
|
797
791
|
return {
|
|
@@ -810,8 +804,8 @@ var useNormalizedItems = function useNormalizedItems(items) {
|
|
|
810
804
|
};
|
|
811
805
|
|
|
812
806
|
var useIsMounted = function useIsMounted() {
|
|
813
|
-
var isMountedRef =
|
|
814
|
-
|
|
807
|
+
var isMountedRef = React.useRef(true);
|
|
808
|
+
React.useEffect(function () {
|
|
815
809
|
return function () {
|
|
816
810
|
isMountedRef.current = false;
|
|
817
811
|
};
|
|
@@ -841,12 +835,12 @@ debounceTimeout) {
|
|
|
841
835
|
var isItemsFunction = typeof itemsOrItemsResolver === 'function';
|
|
842
836
|
// Here, we normalize the itemsResolver argument to an async function, so we
|
|
843
837
|
// can use it without thinking about the differences later
|
|
844
|
-
var itemsResolver =
|
|
838
|
+
var itemsResolver = React.useMemo(function () {
|
|
845
839
|
return isItemsFunction ? itemsOrItemsResolver : function () {
|
|
846
840
|
return Promise.resolve(itemsOrItemsResolver);
|
|
847
841
|
};
|
|
848
|
-
}, [
|
|
849
|
-
var _React$useReducer =
|
|
842
|
+
}, [isItemsFunction]);
|
|
843
|
+
var _React$useReducer = React.useReducer(reducer, {
|
|
850
844
|
items: isItemsFunction ? [] : itemsOrItemsResolver,
|
|
851
845
|
loading: false
|
|
852
846
|
}),
|
|
@@ -860,7 +854,7 @@ debounceTimeout) {
|
|
|
860
854
|
var isMounted = useIsMounted();
|
|
861
855
|
// Next, let's create the fetching function. This should be called whenever
|
|
862
856
|
// the input value changes
|
|
863
|
-
var fetchItems =
|
|
857
|
+
var fetchItems = React.useCallback( /*#__PURE__*/function () {
|
|
864
858
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
|
|
865
859
|
var resolvedItems;
|
|
866
860
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
@@ -898,7 +892,7 @@ debounceTimeout) {
|
|
|
898
892
|
};
|
|
899
893
|
}(), [itemsResolver, isMounted]);
|
|
900
894
|
var normalizedItems = useNormalizedItems(items);
|
|
901
|
-
|
|
895
|
+
React.useEffect(function () {
|
|
902
896
|
// Let's fetch the list initially if it's specified
|
|
903
897
|
if (isItemsFunction) {
|
|
904
898
|
fetchItems('');
|
|
@@ -912,18 +906,18 @@ debounceTimeout) {
|
|
|
912
906
|
};
|
|
913
907
|
|
|
914
908
|
var _excluded$7 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
|
|
915
|
-
/**
|
|
916
|
-
* @deprecated
|
|
917
|
-
* New Dropdown available
|
|
918
|
-
*
|
|
919
|
-
* migration guide to new dropdown:
|
|
920
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
921
|
-
* + if 'searchable', switch to 'SearchableDropdown'
|
|
922
|
-
* - change from 'value' to 'selectedItem'
|
|
923
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
924
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
909
|
+
/**
|
|
910
|
+
* @deprecated
|
|
911
|
+
* New Dropdown available
|
|
912
|
+
*
|
|
913
|
+
* migration guide to new dropdown:
|
|
914
|
+
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
915
|
+
* + if 'searchable', switch to 'SearchableDropdown'
|
|
916
|
+
* - change from 'value' to 'selectedItem'
|
|
917
|
+
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
918
|
+
* - 'onChange' must update value of 'selectedItem'
|
|
925
919
|
*/
|
|
926
|
-
var DropdownDeprecated = /*#__PURE__*/
|
|
920
|
+
var DropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
927
921
|
var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
|
|
928
922
|
debounceTimeout = _ref.debounceTimeout,
|
|
929
923
|
disabled = _ref.disabled,
|
|
@@ -967,7 +961,7 @@ var DropdownDeprecated = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
967
961
|
name: rest.name,
|
|
968
962
|
'data-cy': rest['data-cy']
|
|
969
963
|
};
|
|
970
|
-
return
|
|
964
|
+
return React.createElement(DownshiftProvider, _extends({
|
|
971
965
|
selectedItem: selectedItem,
|
|
972
966
|
onInputValueChange: fetchItems,
|
|
973
967
|
onChange: onChange,
|
|
@@ -976,10 +970,10 @@ var DropdownDeprecated = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
976
970
|
className: className,
|
|
977
971
|
style: style,
|
|
978
972
|
searchable: searchable
|
|
979
|
-
}, rest),
|
|
973
|
+
}, rest), React.createElement(DropdownInputGroupDeprecated, {
|
|
980
974
|
feedback: feedback,
|
|
981
975
|
variant: variant
|
|
982
|
-
},
|
|
976
|
+
}, React.createElement(RenderedDropdown, _extends({
|
|
983
977
|
label: label,
|
|
984
978
|
items: normalizedItems,
|
|
985
979
|
loading: loading,
|
|
@@ -998,9 +992,9 @@ var DropdownDeprecated = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
998
992
|
});
|
|
999
993
|
|
|
1000
994
|
var _excluded$6 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
|
|
1001
|
-
var MultiSelectOldContext = /*#__PURE__*/
|
|
995
|
+
var MultiSelectOldContext = /*#__PURE__*/React.createContext(null);
|
|
1002
996
|
var useMultiSelectOldContext = function useMultiSelectOldContext() {
|
|
1003
|
-
var context =
|
|
997
|
+
var context = React.useContext(MultiSelectOldContext);
|
|
1004
998
|
if (!context) {
|
|
1005
999
|
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
1006
1000
|
}
|
|
@@ -1023,15 +1017,15 @@ actionAndChanges) {
|
|
|
1023
1017
|
return changes;
|
|
1024
1018
|
}
|
|
1025
1019
|
}
|
|
1026
|
-
/**
|
|
1027
|
-
* @deprecated
|
|
1028
|
-
* New MultiSelect available
|
|
1029
|
-
*
|
|
1030
|
-
* migration guide to new dropdown:
|
|
1031
|
-
* - change import from 'MultiSelectDeprecated' to 'MultiSelect'
|
|
1032
|
-
* - add state containing selected items to 'selectedItems' prop
|
|
1033
|
-
* + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
|
|
1034
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
1020
|
+
/**
|
|
1021
|
+
* @deprecated
|
|
1022
|
+
* New MultiSelect available
|
|
1023
|
+
*
|
|
1024
|
+
* migration guide to new dropdown:
|
|
1025
|
+
* - change import from 'MultiSelectDeprecated' to 'MultiSelect'
|
|
1026
|
+
* - add state containing selected items to 'selectedItems' prop
|
|
1027
|
+
* + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
|
|
1028
|
+
* - 'onChange' must update value of 'selectedItem'
|
|
1035
1029
|
*/
|
|
1036
1030
|
var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
1037
1031
|
var className = _ref.className,
|
|
@@ -1069,7 +1063,7 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1069
1063
|
var _useState = React.useState(initialSelectedItems),
|
|
1070
1064
|
selectedItems = _useState[0],
|
|
1071
1065
|
setSelectedItems = _useState[1];
|
|
1072
|
-
var reset =
|
|
1066
|
+
var reset = React.useCallback(function () {
|
|
1073
1067
|
setSelectedItems([]);
|
|
1074
1068
|
}, []);
|
|
1075
1069
|
function isSelected(selectedCheckboxItem) {
|
|
@@ -1109,7 +1103,7 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1109
1103
|
openMenu = _useSelect.openMenu;
|
|
1110
1104
|
var buttonText = selectedItems.length ? itemsSelectedLabel(selectedItems) : '';
|
|
1111
1105
|
var multiSelectId = utils.useRandomId('eds-multiselect');
|
|
1112
|
-
return
|
|
1106
|
+
return React.createElement(MultiSelectOldContext.Provider, {
|
|
1113
1107
|
value: {
|
|
1114
1108
|
isOpen: isOpen,
|
|
1115
1109
|
reset: reset,
|
|
@@ -1117,10 +1111,10 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1117
1111
|
openMenu: openMenu,
|
|
1118
1112
|
openOnFocus: openOnFocus
|
|
1119
1113
|
}
|
|
1120
|
-
},
|
|
1121
|
-
className:
|
|
1114
|
+
}, React.createElement("div", {
|
|
1115
|
+
className: classNames('eds-multiselect', 'eds-dropdown-wrapper', className),
|
|
1122
1116
|
style: style
|
|
1123
|
-
},
|
|
1117
|
+
}, React.createElement(form.BaseFormControl, {
|
|
1124
1118
|
label: label,
|
|
1125
1119
|
labelId: multiSelectId,
|
|
1126
1120
|
labelProps: getLabelProps(),
|
|
@@ -1129,20 +1123,20 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1129
1123
|
isFilled: selectedItems.length > 0 || isOpen,
|
|
1130
1124
|
disabled: disabled,
|
|
1131
1125
|
readOnly: readOnly,
|
|
1132
|
-
append:
|
|
1126
|
+
append: React.createElement(Appendix, {
|
|
1133
1127
|
hasSelected: clearable && selectedItems.length > 0,
|
|
1134
1128
|
loading: loading,
|
|
1135
1129
|
loadingText: loadingText,
|
|
1136
1130
|
readOnly: readOnly
|
|
1137
1131
|
})
|
|
1138
|
-
},
|
|
1132
|
+
}, React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1139
1133
|
style: {
|
|
1140
1134
|
textAlign: 'left'
|
|
1141
1135
|
},
|
|
1142
1136
|
type: 'button',
|
|
1143
1137
|
className: 'eds-form-control eds-multiselect__button'
|
|
1144
|
-
})), buttonText)),
|
|
1145
|
-
className:
|
|
1138
|
+
})), buttonText)), React.createElement("ul", _extends({
|
|
1139
|
+
className: classNames('eds-dropdown-list', {
|
|
1146
1140
|
'eds-dropdown-list--open': isOpen
|
|
1147
1141
|
})
|
|
1148
1142
|
}, getMenuProps({
|
|
@@ -1151,8 +1145,8 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1151
1145
|
top: tokens.space.extraLarge3 + tokens.space.extraSmall + "px"
|
|
1152
1146
|
}, listStyle)
|
|
1153
1147
|
})), isOpen && items.map(function (item, index) {
|
|
1154
|
-
return
|
|
1155
|
-
className:
|
|
1148
|
+
return React.createElement("li", _extends({
|
|
1149
|
+
className: classNames('eds-dropdown-list__item', {
|
|
1156
1150
|
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
1157
1151
|
'eds-dropdown-list__item--selected': isSelected(item)
|
|
1158
1152
|
}),
|
|
@@ -1164,18 +1158,18 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
|
1164
1158
|
style: {
|
|
1165
1159
|
display: 'flex'
|
|
1166
1160
|
}
|
|
1167
|
-
}),
|
|
1161
|
+
}), React.createElement("span", {
|
|
1168
1162
|
style: {
|
|
1169
1163
|
display: 'flex'
|
|
1170
1164
|
}
|
|
1171
|
-
},
|
|
1172
|
-
className:
|
|
1165
|
+
}, React.createElement("span", {
|
|
1166
|
+
className: classNames('eds-multiselect-checkbox', {
|
|
1173
1167
|
'eds-multiselect-checkbox--checked': isSelected(item)
|
|
1174
1168
|
})
|
|
1175
|
-
},
|
|
1169
|
+
}, React.createElement(CheckboxIcon, null)), React.createElement("span", {
|
|
1176
1170
|
className: "eds-multiselect__item-label"
|
|
1177
|
-
}, item.label)), item.icons &&
|
|
1178
|
-
return
|
|
1171
|
+
}, item.label)), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
1172
|
+
return React.createElement(Icon, {
|
|
1179
1173
|
key: index,
|
|
1180
1174
|
inline: true,
|
|
1181
1175
|
className: "eds-dropdown-list__item-icon"
|
|
@@ -1187,14 +1181,14 @@ var ClearButton = function ClearButton(_ref3) {
|
|
|
1187
1181
|
var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
|
1188
1182
|
var _useMultiSelectOldCon = useMultiSelectOldContext(),
|
|
1189
1183
|
reset = _useMultiSelectOldCon.reset;
|
|
1190
|
-
return
|
|
1184
|
+
return React.createElement(React.Fragment, null, React.createElement("button", _extends({
|
|
1191
1185
|
className: "eds-dropdown__clear-button",
|
|
1192
1186
|
type: "button",
|
|
1193
1187
|
tabIndex: -1,
|
|
1194
1188
|
onClick: function onClick() {
|
|
1195
1189
|
return reset();
|
|
1196
1190
|
}
|
|
1197
|
-
}, props),
|
|
1191
|
+
}, props), React.createElement(icons.CloseIcon, null)), React.createElement("div", {
|
|
1198
1192
|
className: "eds-dropdown__divider"
|
|
1199
1193
|
}));
|
|
1200
1194
|
};
|
|
@@ -1204,12 +1198,12 @@ var Appendix = function Appendix(_ref4) {
|
|
|
1204
1198
|
readOnly = _ref4.readOnly,
|
|
1205
1199
|
hasSelected = _ref4.hasSelected;
|
|
1206
1200
|
if (loading) {
|
|
1207
|
-
return
|
|
1201
|
+
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
1208
1202
|
}
|
|
1209
1203
|
if (readOnly) {
|
|
1210
1204
|
return null;
|
|
1211
1205
|
}
|
|
1212
|
-
return hasSelected ?
|
|
1206
|
+
return hasSelected ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
|
|
1213
1207
|
};
|
|
1214
1208
|
var DropdownToggleButton = function DropdownToggleButton() {
|
|
1215
1209
|
var _useMultiSelectOldCon2 = useMultiSelectOldContext(),
|
|
@@ -1217,8 +1211,8 @@ var DropdownToggleButton = function DropdownToggleButton() {
|
|
|
1217
1211
|
isOpen = _useMultiSelectOldCon2.isOpen,
|
|
1218
1212
|
openMenu = _useMultiSelectOldCon2.openMenu,
|
|
1219
1213
|
openOnFocus = _useMultiSelectOldCon2.openOnFocus;
|
|
1220
|
-
return
|
|
1221
|
-
className:
|
|
1214
|
+
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1215
|
+
className: classNames('eds-dropdown__toggle-button', {
|
|
1222
1216
|
'eds-dropdown__toggle-button--open': isOpen
|
|
1223
1217
|
}),
|
|
1224
1218
|
onFocus: function onFocus() {
|
|
@@ -1228,15 +1222,15 @@ var DropdownToggleButton = function DropdownToggleButton() {
|
|
|
1228
1222
|
}
|
|
1229
1223
|
}), {
|
|
1230
1224
|
type: "button"
|
|
1231
|
-
}),
|
|
1225
|
+
}), React.createElement(icons.DownArrowIcon, null));
|
|
1232
1226
|
};
|
|
1233
1227
|
var CheckboxIcon = function CheckboxIcon() {
|
|
1234
|
-
return
|
|
1228
|
+
return React.createElement("svg", {
|
|
1235
1229
|
className: "eds-checkbox-icon",
|
|
1236
1230
|
width: "11px",
|
|
1237
1231
|
height: "9px",
|
|
1238
1232
|
viewBox: "6 11 37 33"
|
|
1239
|
-
},
|
|
1233
|
+
}, React.createElement("path", {
|
|
1240
1234
|
className: "eds-checkbox-icon__path",
|
|
1241
1235
|
d: "M14.1 27.2l7.1 7.2 14.6-14.8",
|
|
1242
1236
|
fill: "none"
|
|
@@ -1294,7 +1288,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1294
1288
|
}
|
|
1295
1289
|
};
|
|
1296
1290
|
var selectAllListItemContent = function selectAllListItemContent() {
|
|
1297
|
-
return
|
|
1291
|
+
return React.createElement(React.Fragment, null, React.createElement(form.Checkbox, {
|
|
1298
1292
|
"aria-hidden": "true",
|
|
1299
1293
|
checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
|
|
1300
1294
|
className: "eds-dropdown__list__item__checkbox",
|
|
@@ -1302,13 +1296,13 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1302
1296
|
return;
|
|
1303
1297
|
},
|
|
1304
1298
|
tabIndex: -1
|
|
1305
|
-
}),
|
|
1299
|
+
}), React.createElement("span", {
|
|
1306
1300
|
className: "eds-dropdown__list__item__text",
|
|
1307
1301
|
"aria-label": ariaLabelSelectAll()
|
|
1308
1302
|
}, selectAllItem == null ? void 0 : selectAllItem.label));
|
|
1309
1303
|
};
|
|
1310
1304
|
var listItemContent = function listItemContent(item) {
|
|
1311
|
-
return
|
|
1305
|
+
return React.createElement(React.Fragment, null, React.createElement(form.Checkbox, {
|
|
1312
1306
|
"aria-hidden": "true",
|
|
1313
1307
|
checked: isItemSelected(item),
|
|
1314
1308
|
className: "eds-dropdown__list__item__checkbox",
|
|
@@ -1319,10 +1313,10 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1319
1313
|
display: 'none'
|
|
1320
1314
|
} : {},
|
|
1321
1315
|
tabIndex: -1
|
|
1322
|
-
}),
|
|
1316
|
+
}), React.createElement("span", {
|
|
1323
1317
|
className: "eds-dropdown__list__item__text"
|
|
1324
|
-
}, item.label,
|
|
1325
|
-
return
|
|
1318
|
+
}, item.label, React.createElement(a11y.VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), item.icons && React.createElement("span", null, item.icons.map(function (Icon) {
|
|
1319
|
+
return React.createElement(Icon, {
|
|
1326
1320
|
key: Icon.displayName,
|
|
1327
1321
|
inline: true,
|
|
1328
1322
|
className: "eds-dropdown__list__item__icon"
|
|
@@ -1331,7 +1325,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1331
1325
|
};
|
|
1332
1326
|
return (
|
|
1333
1327
|
// use popover from @entur/tooltip when that package upgrades to floating-ui
|
|
1334
|
-
|
|
1328
|
+
React.createElement("ul", _extends({}, getMenuProps(), {
|
|
1335
1329
|
className: "eds-dropdown__list",
|
|
1336
1330
|
style: _extends({
|
|
1337
1331
|
display: isOpen ? 'inline-block' : 'none'
|
|
@@ -1339,9 +1333,9 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1339
1333
|
}), listItems.length > 0 && listItems.map(function (item, index) {
|
|
1340
1334
|
var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
|
|
1341
1335
|
if (itemIsSelectAll && listItems.length <= 2) return null;
|
|
1342
|
-
return
|
|
1336
|
+
return React.createElement("li", _extends({
|
|
1343
1337
|
key: item.label + item.value,
|
|
1344
|
-
className:
|
|
1338
|
+
className: classNames('eds-dropdown__list__item', {
|
|
1345
1339
|
'eds-dropdown__list__item--select-all': itemIsSelectAll,
|
|
1346
1340
|
'eds-dropdown__list__item--highlighted': highlightedIndex === index,
|
|
1347
1341
|
'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
|
|
@@ -1351,10 +1345,10 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1351
1345
|
item: item,
|
|
1352
1346
|
index: index
|
|
1353
1347
|
})), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
|
|
1354
|
-
}), isNoMatches &&
|
|
1348
|
+
}), isNoMatches && React.createElement("li", {
|
|
1355
1349
|
key: "dropdown-list-no-match",
|
|
1356
1350
|
className: "eds-dropdown__list__item"
|
|
1357
|
-
}, noMatchesText), loading &&
|
|
1351
|
+
}, noMatchesText), loading && React.createElement("li", {
|
|
1358
1352
|
key: "dropdown-list-loading",
|
|
1359
1353
|
className: "eds-dropdown__list__item"
|
|
1360
1354
|
}, loadingText))
|
|
@@ -1378,8 +1372,8 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
|
|
|
1378
1372
|
index: index
|
|
1379
1373
|
})) != null ? _getSelectedItemProps : {},
|
|
1380
1374
|
selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
|
|
1381
|
-
return
|
|
1382
|
-
className:
|
|
1375
|
+
return React.createElement(chip.TagChip, _extends({
|
|
1376
|
+
className: classNames('eds-dropdown__selected-item-tag', {
|
|
1383
1377
|
'eds-dropdown__selected-item-tag--readonly': readOnly,
|
|
1384
1378
|
'eds-dropdown__selected-item-tag--disabled': disabled
|
|
1385
1379
|
})
|
|
@@ -1391,7 +1385,7 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
|
|
|
1391
1385
|
closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
|
|
1392
1386
|
key: selectedItem.value,
|
|
1393
1387
|
"aria-live": "polite"
|
|
1394
|
-
}),
|
|
1388
|
+
}), React.createElement("span", {
|
|
1395
1389
|
"aria-hidden": "true"
|
|
1396
1390
|
}, selectedItem.label));
|
|
1397
1391
|
};
|
|
@@ -1416,24 +1410,24 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
|
|
|
1416
1410
|
onClear = _ref3.onClear,
|
|
1417
1411
|
selectedItems = _ref3.selectedItems;
|
|
1418
1412
|
if (loading) {
|
|
1419
|
-
return
|
|
1413
|
+
return React.createElement("div", {
|
|
1420
1414
|
className: 'eds-dropdown-appendix__toggle-button--loading-dots'
|
|
1421
|
-
},
|
|
1415
|
+
}, React.createElement(loader.LoadingDots, {
|
|
1422
1416
|
"aria-label": loadingText
|
|
1423
1417
|
}));
|
|
1424
1418
|
}
|
|
1425
1419
|
if (disabled) {
|
|
1426
1420
|
return null;
|
|
1427
1421
|
}
|
|
1428
|
-
return
|
|
1422
|
+
return React.createElement("div", {
|
|
1429
1423
|
className: "eds-dropdown-appendix"
|
|
1430
|
-
}, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null &&
|
|
1424
|
+
}, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React.createElement(React.Fragment, null, React.createElement(ClearableButton, {
|
|
1431
1425
|
onClear: onClear,
|
|
1432
1426
|
focusable: true,
|
|
1433
1427
|
labelClearSelectedItems: labelClearSelectedItems
|
|
1434
|
-
}),
|
|
1428
|
+
}), React.createElement("div", {
|
|
1435
1429
|
className: "eds-dropdown-appendix__divider"
|
|
1436
|
-
})),
|
|
1430
|
+
})), React.createElement(ToggleButton, {
|
|
1437
1431
|
"aria-hidden": ariaHiddenToggleButton,
|
|
1438
1432
|
ariaLabelCloseList: ariaLabelCloseList,
|
|
1439
1433
|
ariaLabelOpenList: ariaLabelOpenList,
|
|
@@ -1448,18 +1442,18 @@ var ClearableButton = function ClearableButton(_ref4) {
|
|
|
1448
1442
|
labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
|
|
1449
1443
|
_ref4$focusable = _ref4.focusable,
|
|
1450
1444
|
focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
|
|
1451
|
-
return
|
|
1445
|
+
return React.createElement(tooltip.Tooltip, {
|
|
1452
1446
|
"aria-hidden": "true",
|
|
1453
1447
|
placement: "top",
|
|
1454
1448
|
content: labelClearSelectedItems,
|
|
1455
1449
|
className: "eds-dropdown-appendix__clear-button__tooltip"
|
|
1456
|
-
},
|
|
1450
|
+
}, React.createElement(button.IconButton, {
|
|
1457
1451
|
className: "eds-dropdown-appendix__clear-button",
|
|
1458
1452
|
type: "button",
|
|
1459
1453
|
tabIndex: focusable ? 0 : 1,
|
|
1460
1454
|
onClick: onClear,
|
|
1461
1455
|
"aria-label": labelClearSelectedItems
|
|
1462
|
-
},
|
|
1456
|
+
}, React.createElement(icons.CloseSmallIcon, {
|
|
1463
1457
|
"aria-hidden": "true"
|
|
1464
1458
|
})));
|
|
1465
1459
|
};
|
|
@@ -1474,8 +1468,8 @@ var ToggleButton = function ToggleButton(_ref5) {
|
|
|
1474
1468
|
ariaLabelOpenList = _ref5$ariaLabelOpenLi === void 0 ? 'Åpne liste med valg' : _ref5$ariaLabelOpenLi,
|
|
1475
1469
|
_ref5$focusable = _ref5.focusable,
|
|
1476
1470
|
focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
|
|
1477
|
-
return
|
|
1478
|
-
className:
|
|
1471
|
+
return React.createElement(button.IconButton, _extends({}, getToggleButtonProps({
|
|
1472
|
+
className: classNames('eds-dropdown-appendix__toggle-button', {
|
|
1479
1473
|
'eds-dropdown-appendix__toggle-button--open': isOpen
|
|
1480
1474
|
}),
|
|
1481
1475
|
'aria-labelledby': undefined
|
|
@@ -1484,7 +1478,7 @@ var ToggleButton = function ToggleButton(_ref5) {
|
|
|
1484
1478
|
"aria-label": ariaHidden ? undefined : isOpen ? ariaLabelCloseList : ariaLabelOpenList,
|
|
1485
1479
|
tabIndex: focusable ? 0 : -1,
|
|
1486
1480
|
type: "button"
|
|
1487
|
-
}),
|
|
1481
|
+
}), React.createElement(icons.DownArrowIcon, {
|
|
1488
1482
|
"aria-hidden": "true"
|
|
1489
1483
|
}));
|
|
1490
1484
|
};
|
|
@@ -1510,11 +1504,20 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
|
|
|
1510
1504
|
var listItemsWithoutSelectAll = listItems.filter(function (item) {
|
|
1511
1505
|
return item.value !== selectAll.value;
|
|
1512
1506
|
});
|
|
1513
|
-
var
|
|
1514
|
-
return !selectedItems.
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1507
|
+
var unselectedItemsInListItems = listItemsWithoutSelectAll.filter(function (listItem) {
|
|
1508
|
+
return !selectedItems.some(function (selectedItem) {
|
|
1509
|
+
return selectedItem.value === listItem.value;
|
|
1510
|
+
});
|
|
1511
|
+
});
|
|
1512
|
+
var allListItemsAreSelected = !listItemsWithoutSelectAll.some(function (listItem) {
|
|
1513
|
+
return !selectedItems.some(function (selectedItem) {
|
|
1514
|
+
return selectedItem.value === listItem.value;
|
|
1515
|
+
});
|
|
1516
|
+
});
|
|
1517
|
+
var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (listItem) {
|
|
1518
|
+
return selectedItems.some(function (selectedItem) {
|
|
1519
|
+
return selectedItem.value === listItem.value;
|
|
1520
|
+
});
|
|
1518
1521
|
});
|
|
1519
1522
|
var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
|
|
1520
1523
|
return onChange([].concat(selectedItems, [clickedItem]));
|
|
@@ -1555,14 +1558,15 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
|
|
|
1555
1558
|
return false;
|
|
1556
1559
|
};
|
|
1557
1560
|
var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
|
|
1558
|
-
onChange([].concat(selectedItems,
|
|
1559
|
-
return !selectedItems.includes(item);
|
|
1560
|
-
})));
|
|
1561
|
+
onChange([].concat(selectedItems, unselectedItemsInListItems));
|
|
1561
1562
|
};
|
|
1562
1563
|
var unselectAllListItems = function unselectAllListItems(onChange) {
|
|
1563
|
-
|
|
1564
|
-
return !listItemsWithoutSelectAll.
|
|
1565
|
-
|
|
1564
|
+
var selectedItemsWithoutItemsInListItems = selectedItems.filter(function (selectedItem) {
|
|
1565
|
+
return !listItemsWithoutSelectAll.some(function (listItem) {
|
|
1566
|
+
return listItem.value === selectedItem.value;
|
|
1567
|
+
});
|
|
1568
|
+
});
|
|
1569
|
+
onChange(selectedItemsWithoutItemsInListItems);
|
|
1566
1570
|
};
|
|
1567
1571
|
return {
|
|
1568
1572
|
addClickedItemToSelectedItems: addClickedItemToSelectedItems,
|
|
@@ -1614,8 +1618,8 @@ function getA11yRemovalMessage(options) {
|
|
|
1614
1618
|
if (removedItem.value === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen fjernet fra valgte.';
|
|
1615
1619
|
return itemToString(removedItem) + " fjernet fra valgte.";
|
|
1616
1620
|
}
|
|
1617
|
-
/**A VoiceOver click is always preformed in the center of the clicked element.
|
|
1618
|
-
This functions expolits that to check if the performed click likely is
|
|
1621
|
+
/**A VoiceOver click is always preformed in the center of the clicked element.
|
|
1622
|
+
This functions expolits that to check if the performed click likely is
|
|
1619
1623
|
made by VoiceOver. */
|
|
1620
1624
|
var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
|
|
1621
1625
|
var targetElementRect = clickEvent.currentTarget.getBoundingClientRect();
|
|
@@ -1665,7 +1669,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1665
1669
|
var _useState = React.useState(false),
|
|
1666
1670
|
hideSelectedItem = _useState[0],
|
|
1667
1671
|
setHideSelectedItem = _useState[1];
|
|
1668
|
-
var _React$useState =
|
|
1672
|
+
var _React$useState = React.useState(0),
|
|
1669
1673
|
lastHighlightedIndex = _React$useState[0],
|
|
1670
1674
|
setLastHighlightedIndex = _React$useState[1];
|
|
1671
1675
|
var inputRef = React.useRef(null);
|
|
@@ -1673,7 +1677,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1673
1677
|
normalizedItems = _useResolvedItems.items,
|
|
1674
1678
|
loading = _useResolvedItems.loading,
|
|
1675
1679
|
fetchItems = _useResolvedItems.fetchItems;
|
|
1676
|
-
var _React$useState2 =
|
|
1680
|
+
var _React$useState2 = React.useState(normalizedItems),
|
|
1677
1681
|
listItems = _React$useState2[0],
|
|
1678
1682
|
setListItems = _React$useState2[1];
|
|
1679
1683
|
var filterListItems = function filterListItems(_ref2) {
|
|
@@ -1689,12 +1693,12 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1689
1693
|
inputValue: inputValue != null ? inputValue : EMPTY_INPUT
|
|
1690
1694
|
});
|
|
1691
1695
|
};
|
|
1692
|
-
|
|
1696
|
+
React.useEffect(function () {
|
|
1693
1697
|
filterListItems({
|
|
1694
1698
|
inputValue: inputValue
|
|
1695
1699
|
});
|
|
1696
1700
|
}, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
1697
|
-
var stateReducer =
|
|
1701
|
+
var stateReducer = React.useCallback(function (_, _ref4) {
|
|
1698
1702
|
var type = _ref4.type,
|
|
1699
1703
|
changes = _ref4.changes;
|
|
1700
1704
|
if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
|
|
@@ -1785,11 +1789,11 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1785
1789
|
inputValue: inputValue
|
|
1786
1790
|
});
|
|
1787
1791
|
};
|
|
1788
|
-
return
|
|
1789
|
-
className:
|
|
1792
|
+
return React.createElement("div", {
|
|
1793
|
+
className: classNames('eds-dropdown__wrapper', className),
|
|
1790
1794
|
style: style
|
|
1791
|
-
},
|
|
1792
|
-
append:
|
|
1795
|
+
}, React.createElement(form.BaseFormControl, _extends({
|
|
1796
|
+
append: React.createElement(FieldAppend$1, {
|
|
1793
1797
|
ariaLabelCloseList: ariaLabelCloseList,
|
|
1794
1798
|
ariaLabelOpenList: ariaLabelOpenList,
|
|
1795
1799
|
clearable: clearable,
|
|
@@ -1814,16 +1818,16 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1814
1818
|
prepend: prepend,
|
|
1815
1819
|
readOnly: readOnly,
|
|
1816
1820
|
variant: variant
|
|
1817
|
-
}, rest), !hideSelectedItem && selectedItem && !inputValue &&
|
|
1821
|
+
}, rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
|
|
1818
1822
|
className: "eds-dropdown__selected-item__wrapper",
|
|
1819
1823
|
"aria-hidden": "true"
|
|
1820
|
-
},
|
|
1824
|
+
}, React.createElement("span", {
|
|
1821
1825
|
className: "eds-dropdown__selected-item",
|
|
1822
1826
|
onClick: function onClick() {
|
|
1823
1827
|
var _inputRef$current2;
|
|
1824
1828
|
return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
|
|
1825
1829
|
}
|
|
1826
|
-
}, selectedItem.label)),
|
|
1830
|
+
}, selectedItem.label)), React.createElement("input", _extends({
|
|
1827
1831
|
className: "eds-dropdown__input eds-form-control",
|
|
1828
1832
|
disabled: readOnly || disabled,
|
|
1829
1833
|
placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
|
|
@@ -1838,7 +1842,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1838
1842
|
setHideSelectedItem(true);
|
|
1839
1843
|
},
|
|
1840
1844
|
ref: inputRef
|
|
1841
|
-
})))),
|
|
1845
|
+
})))), React.createElement(DropdownList, {
|
|
1842
1846
|
isOpen: isOpen,
|
|
1843
1847
|
listItems: listItems,
|
|
1844
1848
|
listStyle: listStyle,
|
|
@@ -1904,10 +1908,10 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1904
1908
|
_ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
|
|
1905
1909
|
ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
|
|
1906
1910
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
1907
|
-
var _React$useState =
|
|
1911
|
+
var _React$useState = React.useState(0),
|
|
1908
1912
|
lastHighlightedIndex = _React$useState[0],
|
|
1909
1913
|
setLastHighlightedIndex = _React$useState[1];
|
|
1910
|
-
var _React$useState2 =
|
|
1914
|
+
var _React$useState2 = React.useState(undefined),
|
|
1911
1915
|
lastRemovedItem = _React$useState2[0],
|
|
1912
1916
|
setLastRemovedItem = _React$useState2[1];
|
|
1913
1917
|
var inputRef = React.useRef(null);
|
|
@@ -1923,7 +1927,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1923
1927
|
};
|
|
1924
1928
|
// special 'item' used as a replacement selected item tag for when
|
|
1925
1929
|
// there are more selected element than maxChips
|
|
1926
|
-
var summarySelectedItems =
|
|
1930
|
+
var summarySelectedItems = React.useMemo(function () {
|
|
1927
1931
|
return {
|
|
1928
1932
|
value: EMPTY_INPUT,
|
|
1929
1933
|
label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
|
|
@@ -1940,12 +1944,15 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1940
1944
|
};
|
|
1941
1945
|
var updateListItems = function updateListItems(_ref3) {
|
|
1942
1946
|
var inputValue = _ref3.inputValue;
|
|
1943
|
-
|
|
1947
|
+
var shouldRefetchItems =
|
|
1948
|
+
// fetch items only if user provides a function with inputValue argument as items
|
|
1949
|
+
typeof initialItems === 'function' && initialItems.length > 0; // Function.length == number of arguments
|
|
1950
|
+
if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
|
|
1944
1951
|
filterListItems({
|
|
1945
1952
|
inputValue: inputValue != null ? inputValue : EMPTY_INPUT
|
|
1946
1953
|
});
|
|
1947
1954
|
};
|
|
1948
|
-
|
|
1955
|
+
React.useEffect(function () {
|
|
1949
1956
|
filterListItems({
|
|
1950
1957
|
inputValue: inputValue
|
|
1951
1958
|
});
|
|
@@ -1985,7 +1992,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1985
1992
|
}),
|
|
1986
1993
|
getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
|
|
1987
1994
|
getDropdownProps = _useMultipleSelection.getDropdownProps;
|
|
1988
|
-
var stateReducer =
|
|
1995
|
+
var stateReducer = React.useCallback(function (_, _ref5) {
|
|
1989
1996
|
var changes = _ref5.changes,
|
|
1990
1997
|
type = _ref5.type;
|
|
1991
1998
|
if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
|
|
@@ -2110,11 +2117,11 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2110
2117
|
inputValue: inputValue
|
|
2111
2118
|
});
|
|
2112
2119
|
};
|
|
2113
|
-
return
|
|
2114
|
-
className:
|
|
2120
|
+
return React.createElement("div", {
|
|
2121
|
+
className: classNames('eds-dropdown__wrapper', className),
|
|
2115
2122
|
style: style
|
|
2116
|
-
},
|
|
2117
|
-
append:
|
|
2123
|
+
}, React.createElement(form.BaseFormControl, _extends({
|
|
2124
|
+
append: React.createElement(FieldAppend$1, {
|
|
2118
2125
|
ariaLabelCloseList: ariaLabelCloseList,
|
|
2119
2126
|
ariaLabelOpenList: ariaLabelOpenList,
|
|
2120
2127
|
selectedItems: selectedItems,
|
|
@@ -2137,21 +2144,21 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2137
2144
|
labelProps: getLabelProps(),
|
|
2138
2145
|
readOnly: readOnly,
|
|
2139
2146
|
variant: variant
|
|
2140
|
-
}, rest),
|
|
2141
|
-
className:
|
|
2147
|
+
}, rest), React.createElement("div", {
|
|
2148
|
+
className: classNames('eds-dropdown__selected-items-and-input', {
|
|
2142
2149
|
'eds-dropdown__selected-items-and-input--filled': hasSelectedItems
|
|
2143
2150
|
}),
|
|
2144
2151
|
onClick: function onClick(e) {
|
|
2145
2152
|
var _inputRef$current4;
|
|
2146
2153
|
if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
|
|
2147
2154
|
}
|
|
2148
|
-
}, selectedItems.length < maxChips ?
|
|
2155
|
+
}, selectedItems.length < maxChips ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(a11y.VisuallyHidden, {
|
|
2149
2156
|
onClick: function onClick() {
|
|
2150
2157
|
var _inputRef$current5;
|
|
2151
2158
|
return (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
|
|
2152
2159
|
}
|
|
2153
|
-
}, ariaLabelJumpToInput) :
|
|
2154
|
-
return
|
|
2160
|
+
}, ariaLabelJumpToInput) : React.createElement(React.Fragment, null), selectedItems.map(function (selectedItem, index) {
|
|
2161
|
+
return React.createElement(SelectedItemTag, {
|
|
2155
2162
|
ariaLabelChosen: ariaLabelChosenSingular,
|
|
2156
2163
|
ariaLabelRemoveSelected: ariaLabelRemoveSelected,
|
|
2157
2164
|
disabled: disabled,
|
|
@@ -2170,14 +2177,14 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2170
2177
|
},
|
|
2171
2178
|
selectedItem: selectedItem
|
|
2172
2179
|
});
|
|
2173
|
-
})) :
|
|
2180
|
+
})) : React.createElement(SelectedItemTag, {
|
|
2174
2181
|
ariaLabelRemoveSelected: labelClearAllItems,
|
|
2175
2182
|
ariaLabelChosen: "",
|
|
2176
2183
|
disabled: disabled,
|
|
2177
2184
|
readOnly: readOnly,
|
|
2178
2185
|
removeSelectedItem: handleOnClear,
|
|
2179
2186
|
selectedItem: summarySelectedItems
|
|
2180
|
-
}),
|
|
2187
|
+
}), React.createElement("input", _extends({
|
|
2181
2188
|
placeholder: placeholder,
|
|
2182
2189
|
className: "eds-dropdown__input eds-form-control",
|
|
2183
2190
|
disabled: readOnly || disabled
|
|
@@ -2188,7 +2195,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2188
2195
|
preventKeyAction: isOpen,
|
|
2189
2196
|
ref: inputRef,
|
|
2190
2197
|
value: inputValue != null ? inputValue : EMPTY_INPUT
|
|
2191
|
-
})))))),
|
|
2198
|
+
})))))), React.createElement(DropdownList, {
|
|
2192
2199
|
ariaLabelChosenSingular: ariaLabelChosenSingular,
|
|
2193
2200
|
ariaLabelSelectedItem: ariaLabelSelectedItem,
|
|
2194
2201
|
getItemProps: getItemProps,
|
|
@@ -2266,11 +2273,11 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2266
2273
|
getMenuProps = _useSelect.getMenuProps,
|
|
2267
2274
|
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
2268
2275
|
highlightedIndex = _useSelect.highlightedIndex;
|
|
2269
|
-
return
|
|
2270
|
-
className:
|
|
2276
|
+
return React.createElement("div", {
|
|
2277
|
+
className: classNames('eds-dropdown__wrapper', className),
|
|
2271
2278
|
style: style
|
|
2272
|
-
},
|
|
2273
|
-
append:
|
|
2279
|
+
}, React.createElement(form.BaseFormControl, _extends({
|
|
2280
|
+
append: React.createElement(FieldAppend$1, {
|
|
2274
2281
|
ariaHiddenToggleButton: true,
|
|
2275
2282
|
ariaLabelCloseList: ariaLabelCloseList,
|
|
2276
2283
|
ariaLabelOpenList: ariaLabelOpenList,
|
|
@@ -2287,7 +2294,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2287
2294
|
disabled: readOnly || disabled,
|
|
2288
2295
|
selectedItems: [selectedItem]
|
|
2289
2296
|
}),
|
|
2290
|
-
className:
|
|
2297
|
+
className: classNames('eds-dropdown', {
|
|
2291
2298
|
'eds-dropdown--not-filled': !isFilled
|
|
2292
2299
|
}),
|
|
2293
2300
|
disabled: disabled,
|
|
@@ -2300,15 +2307,15 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2300
2307
|
prepend: prepend,
|
|
2301
2308
|
readOnly: readOnly,
|
|
2302
2309
|
variant: variant
|
|
2303
|
-
}, rest),
|
|
2310
|
+
}, rest), React.createElement("div", _extends({
|
|
2304
2311
|
className: "eds-dropdown__selected-item-button"
|
|
2305
2312
|
}, getToggleButtonProps({
|
|
2306
2313
|
id: undefined
|
|
2307
|
-
})), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label :
|
|
2308
|
-
className:
|
|
2314
|
+
})), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
|
|
2315
|
+
className: classNames('eds-dropdown__selected-item-button__placeholder', {
|
|
2309
2316
|
'eds-dropdown__selected-item-button__placeholder--readonly': readOnly
|
|
2310
2317
|
})
|
|
2311
|
-
}, placeholder)) != null ? _ref3 : '')),
|
|
2318
|
+
}, placeholder)) != null ? _ref3 : '')), React.createElement(DropdownList, {
|
|
2312
2319
|
getItemProps: getItemProps,
|
|
2313
2320
|
getMenuProps: getMenuProps,
|
|
2314
2321
|
highlightedIndex: highlightedIndex,
|
|
@@ -2345,11 +2352,11 @@ var NativeDropdown = function NativeDropdown(_ref) {
|
|
|
2345
2352
|
normalizedItems = _useResolvedItems.items,
|
|
2346
2353
|
loading = _useResolvedItems.loading;
|
|
2347
2354
|
var nativeDropdownId = utils.useRandomId('eds-dropdown-native');
|
|
2348
|
-
return
|
|
2355
|
+
return React.createElement(form.BaseFormControl, {
|
|
2349
2356
|
disabled: disabled,
|
|
2350
2357
|
readOnly: readOnly,
|
|
2351
2358
|
prepend: prepend,
|
|
2352
|
-
append:
|
|
2359
|
+
append: React.createElement(FieldAppend, {
|
|
2353
2360
|
hidden: disabled || readOnly,
|
|
2354
2361
|
loading: loading,
|
|
2355
2362
|
loadingText: loadingText
|
|
@@ -2362,7 +2369,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
|
|
|
2362
2369
|
feedback: feedback,
|
|
2363
2370
|
disableLabelAnimation: disableLabelAnimation,
|
|
2364
2371
|
isFilled: true
|
|
2365
|
-
},
|
|
2372
|
+
}, React.createElement("select", _extends({
|
|
2366
2373
|
"aria-invalid": variant === 'error',
|
|
2367
2374
|
"aria-labelledby": nativeDropdownId,
|
|
2368
2375
|
"aria-busy": loading,
|
|
@@ -2380,7 +2387,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
|
|
|
2380
2387
|
},
|
|
2381
2388
|
value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined
|
|
2382
2389
|
}, rest), normalizedItems.map(function (item) {
|
|
2383
|
-
return
|
|
2390
|
+
return React.createElement("option", {
|
|
2384
2391
|
key: item.value,
|
|
2385
2392
|
value: item.value
|
|
2386
2393
|
}, item.label);
|
|
@@ -2391,16 +2398,16 @@ var FieldAppend = function FieldAppend(_ref3) {
|
|
|
2391
2398
|
loadingText = _ref3.loadingText,
|
|
2392
2399
|
hidden = _ref3.hidden;
|
|
2393
2400
|
if (loading) {
|
|
2394
|
-
return
|
|
2401
|
+
return React.createElement("div", {
|
|
2395
2402
|
className: "eds-dropdown-native__loading-dots"
|
|
2396
|
-
},
|
|
2403
|
+
}, React.createElement(loader.LoadingDots, {
|
|
2397
2404
|
"aria-label": loadingText
|
|
2398
2405
|
}));
|
|
2399
2406
|
}
|
|
2400
2407
|
if (hidden) {
|
|
2401
|
-
return
|
|
2408
|
+
return React.createElement(React.Fragment, null);
|
|
2402
2409
|
}
|
|
2403
|
-
return
|
|
2410
|
+
return React.createElement(icons.DownArrowIcon, {
|
|
2404
2411
|
inline: true
|
|
2405
2412
|
});
|
|
2406
2413
|
};
|