@entur/dropdown 7.2.1 → 7.2.3-beta.0

package/dist/components/DropdownList.d.ts

@@ -21,6 +21,7 @@ type DropdownListProps<ValueType> = {
     selectAllItem?: NormalizedDropdownItemType<string>;
     selectedItems: NormalizedDropdownItemType<ValueType>[];
     style?: React.CSSProperties;
+    readOnly?: boolean;
 };
-export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, readOnly, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/dropdown.cjs.development.js

@@ -361,7 +361,7 @@ function _regeneratorRuntime() {
   }, e;
 }
 
-var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "readOnly"];
 var DropdownList = function DropdownList(_ref) {
   var _listItems$;
   var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
@@ -384,6 +384,8 @@ var DropdownList = function DropdownList(_ref) {
     selectAllCheckboxState = _ref.selectAllCheckboxState,
     selectAllItem = _ref.selectAllItem,
     selectedItems = _ref.selectedItems,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var isMultiselect = selectAllItem !== undefined;
   var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null || (_listItems$ = listItems[0]) == null ? void 0 : _listItems$.value) === (selectAllItem == null ? void 0 : selectAllItem.value));
@@ -458,10 +460,10 @@ var DropdownList = function DropdownList(_ref) {
       ref: setListRef,
       className: 'eds-dropdown__list',
       style: _extends({}, floatingStyles, {
-        display: isOpen ? undefined : 'none'
+        display: isOpen && !readOnly ? undefined : 'none'
       }, rest.style)
     })), function () {
-      if (!isOpen) {
+      if (!isOpen || readOnly) {
         return null;
       }
       if (loading) {
@@ -878,7 +880,7 @@ function getA11yStatusMessage(options) {
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document, _getInputProps2, _selectedItem$label;
+  var _document, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
     _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
     ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
@@ -1116,9 +1118,6 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
-    onBlur: function onBlur() {
-      return setInputValue('');
-    },
     onClick: function onClick(e) {
       if (e.target === e.currentTarget) {
         var _getInputProps;
@@ -1145,7 +1144,8 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       loading: loading != null ? loading : resolvedItemsLoading,
       loadingText: loadingText,
       noMatchesText: noMatchesText,
-      selectedItems: selectedItem !== null ? [selectedItem] : []
+      selectedItems: selectedItem !== null ? [selectedItem] : [],
+      readOnly: readOnly
     })
   }, rest, {
     // Append is not supported as of now
@@ -1154,8 +1154,14 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
-    "aria-hidden": "true",
-    onClick: (_getInputProps2 = getInputProps()) == null ? void 0 : _getInputProps2.onClick
+    onClick: function onClick(event) {
+      if (!disabled && !readOnly) {
+        var _inputRef$current2, _getInputProps2;
+        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
+        (_getInputProps2 = getInputProps()) == null || _getInputProps2.onClick == null || _getInputProps2.onClick(event);
+      }
+    },
+    tabIndex: readOnly ? 0 : -1
   }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
       'eds-dropdown__input--hidden': showSelectedItem
@@ -1176,7 +1182,9 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       if (selectedItem !== null) setShowSelectedItem(true);
     },
     onFocus: function onFocus() {
-      setShowSelectedItem(false);
+      if (!readOnly) {
+        setShowSelectedItem(false);
+      }
     },
     disabled: disabled,
     readOnly: readOnly,
@@ -1514,7 +1522,8 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       noMatchesText: noMatchesText,
       selectAllCheckboxState: selectAllCheckboxState,
       selectAllItem: selectAll,
-      selectedItems: selectedItems
+      selectedItems: selectedItems,
+      readOnly: readOnly
     })
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
@@ -1756,7 +1765,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setListRef: refs.setFloating,
       loading: loading != null ? loading : resolvedItemsLoading,
       loadingText: loadingText,
-      selectedItems: selectedItem !== null ? [selectedItem] : []
+      selectedItems: selectedItem !== null ? [selectedItem] : [],
+      readOnly: readOnly
     })
   }, rest, {
     // Append is not supported as of now