@entur/dropdown 7.2.0 → 7.2.2

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) {
@@ -1145,7 +1147,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 +1157,8 @@ 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: readOnly ? undefined : (_getInputProps2 = getInputProps()) == null ? void 0 : _getInputProps2.onClick,
+    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 +1179,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 +1519,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 +1762,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