@entur/dropdown 5.0.0-RC.0 → 5.0.0-RC.2

package/dist/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { VariantType } from '@entur/form';
 import { NormalizedDropdownItemType } from './useNormalizedItems';
 import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
@@ -9,7 +9,7 @@ export type DropdownProps = {
     /** Valgt verdi. Bruk null for ingen verdi. */
     selectedItem: NormalizedDropdownItemType | null;
     /** Callback ved valg som skal oppdatere selectedItem */
-    onChange?: (selectedItem: NormalizedDropdownItemType | null) => void;
+    onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
     /** Beskrivende tekst som forklarer feltet */
     label: string;
     /** Placeholder-tekst når ingenting er satt */

package/dist/MultiSelect.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { VariantType } from '@entur/form';
 import { NormalizedDropdownItemType } from './useNormalizedItems';
 import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
 import './Dropdown.scss';
 export type MultiSelectProps = {
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
     /** Tilgjengelige valg i MultiSelect */
     items: PotentiallyAsyncDropdownItemType;
     /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
@@ -11,13 +13,11 @@ export type MultiSelectProps = {
     selectedItems: NormalizedDropdownItemType[];
     /** Callback med alle valgte verdier.
      *  Bruk denne til å oppdatere selectedItems-listen */
-    onChange?: (selectedItems: NormalizedDropdownItemType[]) => void;
+    onChange?: (selectedItems: NormalizedDropdownItemType[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType[]>>;
     /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */
     itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
-    /** Beskrivende tekst som forklarer feltet */
-    label?: string;
     /** Hvilken valideringsvariant som gjelder */
     variant?: VariantType;
     /** Valideringsmelding, brukes sammen med `variant` */
@@ -51,7 +51,7 @@ export type MultiSelectProps = {
     /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
      * @default 10
      */
-    maxTags?: number;
+    maxChips?: number;
     /** Tekst eller ikon som kommer før MultiSelect */
     prepend?: React.ReactNode;
     /** Resetter input etter at et element er valgt i listen
@@ -108,4 +108,4 @@ export type MultiSelectProps = {
      */
     ariaLabelSelectedItem?: string;
 };
-export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, itemFilter, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxTags, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => JSX.Element;
+export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, itemFilter, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => JSX.Element;

package/dist/SearchableDropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { VariantType } from '@entur/form';
 import { NormalizedDropdownItemType } from './useNormalizedItems';
 import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
@@ -9,7 +9,7 @@ export type SearchableDropdownProps = {
     /** Valgt element. Bruk null for ingen verdi */
     selectedItem: NormalizedDropdownItemType | null;
     /** Callback ved valg som skal brukes til å oppdatere selectedItem */
-    onChange?: (value: NormalizedDropdownItemType | null) => void;
+    onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
     /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */

package/dist/dropdown.cjs.development.js

@@ -1450,8 +1450,9 @@ var ClearableButton = function ClearableButton(_ref4) {
     focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
   return React__default["default"].createElement(tooltip.Tooltip, {
     "aria-hidden": "true",
-    placement: "right",
-    content: labelClearSelectedItems
+    placement: "top",
+    content: labelClearSelectedItems,
+    className: "eds-dropdown-appendix__clear-button__tooltip"
   }, React__default["default"].createElement(button.IconButton, {
     className: "eds-dropdown-appendix__clear-button",
     type: "button",
@@ -1785,7 +1786,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     });
   };
   return React__default["default"].createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames__default["default"]('eds-dropdown__wrapper', className),
+    style: style
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
@@ -1801,7 +1803,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       onClear: handleOnClear,
       selectedItems: [selectedItem]
     }),
-    className: classNames__default["default"]('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -1811,7 +1813,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), !hideSelectedItem && selectedItem && !inputValue && React__default["default"].createElement("span", {
     className: "eds-dropdown__selected-item__wrapper",
@@ -1850,7 +1851,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxTags", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1875,8 +1876,8 @@ var MultiSelect = function MultiSelect(_ref) {
     labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    _ref$maxTags = _ref.maxTags,
-    maxTags = _ref$maxTags === void 0 ? 10 : _ref$maxTags,
+    _ref$maxChips = _ref.maxChips,
+    maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {
       return undefined;
@@ -1921,7 +1922,7 @@ var MultiSelect = function MultiSelect(_ref) {
     label: labelSelectAll
   };
   // special 'item' used as a replacement selected item tag for when
-  // there are more selected element than maxTags
+  // there are more selected element than maxChips
   var summarySelectedItems = React__default["default"].useMemo(function () {
     return {
       value: EMPTY_INPUT,
@@ -1960,6 +1961,20 @@ var MultiSelect = function MultiSelect(_ref) {
   var _useMultipleSelection = Downshift.useMultipleSelection({
       selectedItems: selectedItems,
       itemToString: itemToString,
+      onStateChange: function onStateChange(_ref4) {
+        var newSelectedItems = _ref4.selectedItems,
+          type = _ref4.type;
+        switch (type) {
+          case Downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+          case Downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          case Downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+          case Downshift.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+            {
+              if (newSelectedItems !== undefined) onChange(newSelectedItems);
+              break;
+            }
+        }
+      },
       // Accessibility
       getA11yRemovalMessage: function getA11yRemovalMessage$1(options) {
         return getA11yRemovalMessage(_extends({}, options, {
@@ -1970,9 +1985,9 @@ var MultiSelect = function MultiSelect(_ref) {
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
     getDropdownProps = _useMultipleSelection.getDropdownProps;
-  var stateReducer = React__default["default"].useCallback(function (_, _ref4) {
-    var changes = _ref4.changes,
-      type = _ref4.type;
+  var stateReducer = React__default["default"].useCallback(function (_, _ref5) {
+    var changes = _ref5.changes,
+      type = _ref5.type;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
@@ -2042,9 +2057,9 @@ var MultiSelect = function MultiSelect(_ref) {
       itemToString: itemToString,
       selectedItem: null,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref5) {
-        var type = _ref5.type,
-          clickedItem = _ref5.selectedItem;
+      onStateChange: function onStateChange(_ref6) {
+        var type = _ref6.type,
+          clickedItem = _ref6.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         switch (type) {
@@ -2096,7 +2111,8 @@ var MultiSelect = function MultiSelect(_ref) {
     });
   };
   return React__default["default"].createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames__default["default"]('eds-dropdown__wrapper', className),
+    style: style
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
@@ -2112,7 +2128,7 @@ var MultiSelect = function MultiSelect(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames__default["default"]('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
@@ -2120,7 +2136,6 @@ var MultiSelect = function MultiSelect(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React__default["default"].createElement("div", {
     className: classNames__default["default"]('eds-dropdown__selected-items-and-input', {
@@ -2130,7 +2145,7 @@ var MultiSelect = function MultiSelect(_ref) {
       var _inputRef$current4;
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     }
-  }, selectedItems.length < maxTags ? React__default["default"].createElement(React__default["default"].Fragment, null, selectedItems.length > 1 ? React__default["default"].createElement(a11y.VisuallyHidden, {
+  }, selectedItems.length < maxChips ? React__default["default"].createElement(React__default["default"].Fragment, null, selectedItems.length > 1 ? React__default["default"].createElement(a11y.VisuallyHidden, {
     onClick: function onClick() {
       var _inputRef$current5;
       return (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
@@ -2252,7 +2267,8 @@ var Dropdown = function Dropdown(_ref) {
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
   return React__default["default"].createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames__default["default"]('eds-dropdown__wrapper', className),
+    style: style
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(FieldAppend$1, {
       ariaHiddenToggleButton: true,
@@ -2271,7 +2287,7 @@ var Dropdown = function Dropdown(_ref) {
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
     }),
-    className: classNames__default["default"]('eds-dropdown', className, {
+    className: classNames__default["default"]('eds-dropdown', {
       'eds-dropdown--not-filled': !isFilled
     }),
     disabled: disabled,
@@ -2283,7 +2299,6 @@ var Dropdown = function Dropdown(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React__default["default"].createElement("div", _extends({
     className: "eds-dropdown__selected-item-button"