@entur/dropdown 6.0.8 → 6.0.9
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/MultiSelect.d.ts +3 -1
- package/dist/components/DropdownList.d.ts +2 -2
- package/dist/dropdown.cjs.development.js +20 -14
- 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 +20 -14
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +148 -146
- package/package.json +12 -12
package/dist/MultiSelect.d.ts
CHANGED
|
@@ -33,6 +33,8 @@ export type MultiSelectProps<ValueType> = {
|
|
|
33
33
|
* @default true
|
|
34
34
|
*/
|
|
35
35
|
clearable?: boolean;
|
|
36
|
+
/** Plasserer ledeteksten statisk på toppen av inputfeltet */
|
|
37
|
+
disableLabelAnimation?: boolean;
|
|
36
38
|
/** Placeholder-tekst når ingenting er satt */
|
|
37
39
|
placeholder?: string;
|
|
38
40
|
/** En tekst som beskriver hva som skjer når man venter på items
|
|
@@ -120,5 +122,5 @@ export type MultiSelectProps<ValueType> = {
|
|
|
120
122
|
*/
|
|
121
123
|
ariaLabelSelectedItem?: string;
|
|
122
124
|
};
|
|
123
|
-
export declare const MultiSelect: <ValueType extends unknown>({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, labelTooltip, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps<ValueType>) => React.JSX.Element;
|
|
125
|
+
export declare const MultiSelect: <ValueType extends unknown>({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, disableLabelAnimation, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, labelTooltip, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps<ValueType>) => React.JSX.Element;
|
|
124
126
|
export {};
|
|
@@ -10,7 +10,7 @@ type DropdownListProps<ValueType> = {
|
|
|
10
10
|
highlightedIndex: number;
|
|
11
11
|
isOpen: boolean;
|
|
12
12
|
listItems: NormalizedDropdownItemType<ValueType | string>[];
|
|
13
|
-
|
|
13
|
+
floatingStyles: {
|
|
14
14
|
[key: string]: any;
|
|
15
15
|
} | undefined;
|
|
16
16
|
setListRef: (node: HTMLElement | null) => void;
|
|
@@ -22,5 +22,5 @@ type DropdownListProps<ValueType> = {
|
|
|
22
22
|
selectedItems: NormalizedDropdownItemType<ValueType>[];
|
|
23
23
|
[key: string]: any;
|
|
24
24
|
};
|
|
25
|
-
export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems,
|
|
25
|
+
export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
|
|
26
26
|
export {};
|
|
@@ -1239,7 +1239,7 @@ function SelectedItemsLabel(items) {
|
|
|
1239
1239
|
}).toString() : items.length + " elementer valgt";
|
|
1240
1240
|
}
|
|
1241
1241
|
|
|
1242
|
-
var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "
|
|
1242
|
+
var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
|
|
1243
1243
|
var DropdownList = function DropdownList(_ref) {
|
|
1244
1244
|
var _listItems$;
|
|
1245
1245
|
var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
|
|
@@ -1251,7 +1251,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1251
1251
|
isOpen = _ref.isOpen,
|
|
1252
1252
|
highlightedIndex = _ref.highlightedIndex,
|
|
1253
1253
|
listItems = _ref.listItems,
|
|
1254
|
-
|
|
1254
|
+
floatingStyles = _ref.floatingStyles,
|
|
1255
1255
|
setListRef = _ref.setListRef,
|
|
1256
1256
|
_ref$loading = _ref.loading,
|
|
1257
1257
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
@@ -1334,16 +1334,17 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1334
1334
|
};
|
|
1335
1335
|
return (
|
|
1336
1336
|
// use popover from @entur/tooltip when that package upgrades to floating-ui
|
|
1337
|
-
React.createElement("
|
|
1337
|
+
React.createElement("div", {
|
|
1338
|
+
className: "eds-dropdown__list__floating-container",
|
|
1339
|
+
style: _extends({
|
|
1340
|
+
display: isOpen ? undefined : 'none'
|
|
1341
|
+
}, floatingStyles),
|
|
1342
|
+
ref: setListRef
|
|
1343
|
+
}, React.createElement("ul", _extends({}, getMenuProps({
|
|
1338
1344
|
'aria-multiselectable': isMultiselect
|
|
1339
|
-
}, {
|
|
1340
|
-
suppressRefError: true
|
|
1341
1345
|
}), {
|
|
1342
|
-
ref: setListRef,
|
|
1343
1346
|
className: "eds-dropdown__list",
|
|
1344
|
-
style: _extends({
|
|
1345
|
-
display: isOpen ? 'inline-block' : 'none'
|
|
1346
|
-
}, rest.style, listStyle)
|
|
1347
|
+
style: _extends({}, rest.style)
|
|
1347
1348
|
}), !loading && listItems.length > 0 && listItems.map(function (item, index) {
|
|
1348
1349
|
var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
|
|
1349
1350
|
if (itemIsSelectAll && listItems.length <= 2) return null;
|
|
@@ -1368,7 +1369,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1368
1369
|
}, noMatchesText), loading && React.createElement("li", {
|
|
1369
1370
|
key: "dropdown-list-loading",
|
|
1370
1371
|
className: "eds-dropdown__list__item"
|
|
1371
|
-
}, loadingText))
|
|
1372
|
+
}, loadingText)))
|
|
1372
1373
|
);
|
|
1373
1374
|
};
|
|
1374
1375
|
|
|
@@ -1893,12 +1894,13 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1893
1894
|
}))), React.createElement(DropdownList, {
|
|
1894
1895
|
ariaLabelChosenSingular: ariaLabelChosenSingular,
|
|
1895
1896
|
ariaLabelSelectedItem: ariaLabelSelectedItem,
|
|
1897
|
+
floatingStyles: floatingStyles,
|
|
1896
1898
|
getItemProps: getItemProps,
|
|
1897
1899
|
getMenuProps: getMenuProps,
|
|
1898
1900
|
highlightedIndex: highlightedIndex,
|
|
1899
1901
|
isOpen: isOpen,
|
|
1900
1902
|
listItems: listItems,
|
|
1901
|
-
|
|
1903
|
+
style: listStyle,
|
|
1902
1904
|
setListRef: refs.setFloating,
|
|
1903
1905
|
loading: loading,
|
|
1904
1906
|
loadingText: loadingText,
|
|
@@ -1907,7 +1909,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1907
1909
|
}));
|
|
1908
1910
|
};
|
|
1909
1911
|
|
|
1910
|
-
var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
|
|
1912
|
+
var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
|
|
1911
1913
|
var MultiSelect = function MultiSelect(_ref) {
|
|
1912
1914
|
var className = _ref.className,
|
|
1913
1915
|
_ref$clearable = _ref.clearable,
|
|
@@ -1917,6 +1919,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1917
1919
|
debounceTimeout = _ref.debounceTimeout,
|
|
1918
1920
|
_ref$disabled = _ref.disabled,
|
|
1919
1921
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1922
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
1920
1923
|
feedback = _ref.feedback,
|
|
1921
1924
|
_ref$hideSelectAll = _ref.hideSelectAll,
|
|
1922
1925
|
hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
|
|
@@ -2196,6 +2199,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2196
2199
|
'eds-dropdown--has-tooltip': labelTooltip !== undefined
|
|
2197
2200
|
}),
|
|
2198
2201
|
disabled: disabled,
|
|
2202
|
+
disableLabelAnimation: disableLabelAnimation,
|
|
2199
2203
|
feedback: feedback,
|
|
2200
2204
|
isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
|
|
2201
2205
|
label: label,
|
|
@@ -2272,13 +2276,14 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2272
2276
|
})))))), React.createElement(DropdownList, {
|
|
2273
2277
|
ariaLabelChosenSingular: ariaLabelChosenSingular,
|
|
2274
2278
|
ariaLabelSelectedItem: ariaLabelSelectedItem,
|
|
2279
|
+
floatingStyles: floatingStyles,
|
|
2275
2280
|
getItemProps: getItemProps,
|
|
2276
2281
|
getMenuProps: getMenuProps,
|
|
2277
2282
|
highlightedIndex: highlightedIndex,
|
|
2278
2283
|
inputValue: inputValue,
|
|
2279
2284
|
isOpen: isOpen,
|
|
2280
2285
|
listItems: listItems,
|
|
2281
|
-
|
|
2286
|
+
style: listStyle,
|
|
2282
2287
|
setListRef: refs.setFloating,
|
|
2283
2288
|
loading: loading,
|
|
2284
2289
|
loadingText: loadingText,
|
|
@@ -2428,12 +2433,13 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2428
2433
|
}, placeholder)) != null ? _ref3 : ''), React.createElement(DropdownList, {
|
|
2429
2434
|
ariaLabelChosenSingular: ariaLabelChosenSingular,
|
|
2430
2435
|
ariaLabelSelectedItem: ariaLabelSelectedItem,
|
|
2436
|
+
floatingStyles: floatingStyles,
|
|
2431
2437
|
getItemProps: getItemProps,
|
|
2432
2438
|
getMenuProps: getMenuProps,
|
|
2433
2439
|
highlightedIndex: highlightedIndex,
|
|
2434
2440
|
isOpen: isOpen,
|
|
2435
2441
|
listItems: normalizedItems,
|
|
2436
|
-
|
|
2442
|
+
style: listStyle,
|
|
2437
2443
|
setListRef: refs.setFloating,
|
|
2438
2444
|
loading: loading,
|
|
2439
2445
|
loadingText: loadingText,
|