@wix/design-system 1.123.0 → 1.124.0

package/dist/cjs/DropdownLayout/DropdownLayout.js

@@ -2,8 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
-exports.optionValidator = optionValidator;
+exports.default = exports.DropdownLayout = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -24,14 +23,14 @@ var _withOverlayScrollbar = require("./withOverlayScrollbar");
 var _DropdownLayout2 = require("./DropdownLayout.constants");
 var _forkRef = require("../utils/forkRef");
 var _excluded = ["id", "value", "disabled", "optionTitle", "title"];
-var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/DropdownLayout/DropdownLayout.js";
+var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/DropdownLayout/DropdownLayout.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var modulus = (n, m) => (n % m + m) % m;
 var getUnit = value => (0, _StringUtils.isString)(value) ? value : "".concat(value, "px");
-class DropdownLayout extends _react.default.PureComponent {
+class DropdownLayout extends _react.PureComponent {
   constructor(props) {
     super(props);
     this.setScrollElement = node => {
@@ -39,9 +38,14 @@ class DropdownLayout extends _react.default.PureComponent {
         scrollElement: node
       });
     };
+    this.containerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.loadedWithUndefinedOptions = false;
+    this._boundEvents = [];
     this.focusableItemsIdsList = [];
     this.savedOnClicks = [];
     this.children = {};
+    this.selectedOption = null;
     // Deprecated
     this._onMouseEventsHandler = e => {
       if (!this._checkIfEventOnElements(e, [_reactDom.default.findDOMNode(this)])) {
@@ -59,10 +63,10 @@ class DropdownLayout extends _react.default.PureComponent {
     };
     this._onSelect = (index, e) => {
       var {
-        options,
         onSelect,
         listType
       } = this.props;
+      var options = this.props.options || [];
       if (listType !== _DropdownLayout2.ListType.select) {
         e.stopPropagation();
         this._onClose();
@@ -84,18 +88,22 @@ class DropdownLayout extends _react.default.PureComponent {
       return !!onSelect && chosenOption;
     };
     this._onActionClick = e => {
-      var onClick = this.savedOnClicks.find(_ref => {
+      var _this$savedOnClicks$f;
+      var onClick = (_this$savedOnClicks$f = this.savedOnClicks.find(_ref => {
         var {
           id
         } = _ref;
         return id === e.id;
-      }).onClick;
+      })) == null ? void 0 : _this$savedOnClicks$f.onClick;
       onClick && onClick(e);
     };
     this._saveOnClicks = () => {
-      this.savedOnClicks = this.props.options.map(_ref2 => {
+      var options = this.props.options || [];
+      this.savedOnClicks = options.map(_ref2 => {
         var {
           id,
+          // only builder options have onClick
+          // @ts-expect-error
           onClick
         } = _ref2;
         return {
@@ -105,16 +113,17 @@ class DropdownLayout extends _react.default.PureComponent {
       });
     };
     this._onMouseEnter = index => {
-      if (this._isSelectableOption(this.props.options[index])) {
+      var options = this.props.options || [];
+      if (this._isSelectableOption(options[index])) {
         this._markOption(index);
       }
     };
     this._onMouseLeave = () => this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
     this._focusOnOption = () => {
       var {
-        focusOnOption,
-        options
+        focusOnOption
       } = this.props;
+      var options = this.props.options || [];
       var markedIndex = options.findIndex(option => option.id === focusOnOption);
       if (markedIndex !== -1) {
         this._markOptionAtIndex(markedIndex);
@@ -128,11 +137,12 @@ class DropdownLayout extends _react.default.PureComponent {
       this._scrollIntoViewByIndex(markedIndex);
     };
     this._scrollIntoViewByIndex = index => {
+      var _this$optionsRef$curr, _this$optionsRef$curr2;
       var {
         infiniteScroll
       } = this.props;
       var menuElement = this.optionsRef.current;
-      var hoveredElement = infiniteScroll ? this.optionsRef.current.childNodes[0].childNodes[index] : this.optionsRef.current.childNodes[index];
+      var hoveredElement = infiniteScroll ? (_this$optionsRef$curr = this.optionsRef.current) == null ? void 0 : _this$optionsRef$curr.childNodes[0].childNodes[index] : (_this$optionsRef$curr2 = this.optionsRef.current) == null ? void 0 : _this$optionsRef$curr2.childNodes[index];
       (0, _scrollIntoView.default)(menuElement, hoveredElement);
     };
     /**
@@ -142,7 +152,10 @@ class DropdownLayout extends _react.default.PureComponent {
      * @returns {boolean} - Whether the event was handled by the component
      */
     this._onSelectListKeyDown = event => {
-      if (!this.props.visible || this.props.isComposing || this.props.listType !== _DropdownLayout2.ListType.select) {
+      if (!this.props.visible ||
+      // such prop does not exist but let's avoid potential breaking change
+      // @ts-expect-error
+      this.props.isComposing || this.props.listType !== _DropdownLayout2.ListType.select) {
         return false;
       }
       switch (event.key) {
@@ -203,7 +216,7 @@ class DropdownLayout extends _react.default.PureComponent {
       var callback = native ? element.focus : focusableHOC ? focusableHOC.innerComponentRef.focus : () => ({});
       this.setState({
         focusedItemId
-      }, () => callback());
+      }, () => callback == null ? void 0 : callback());
     };
     this._handleActionListNavigation = (event, id) => {
       var length = this.focusableItemsIdsList.length;
@@ -273,7 +286,7 @@ class DropdownLayout extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 534,
+            lineNumber: 695,
             columnNumber: 11
           }
         }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
@@ -282,14 +295,14 @@ class DropdownLayout extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 535,
+            lineNumber: 696,
             columnNumber: 13
           }
         })),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 526,
+          lineNumber: 687,
           columnNumber: 7
         }
       }, scrollableElement);
@@ -308,7 +321,7 @@ class DropdownLayout extends _react.default.PureComponent {
         [_DataAttr.DATA_SHOWN]: visible,
         [_DataAttr.DATA_SELECTED_OPTION_ID]: selectedId === 0 ? "".concat(selectedId) : selectedId,
         [_DataAttr.DATA_DIRECTION]: dropDirectionUp ? _DataAttr.DROPDOWN_LAYOUT_DIRECTIONS.UP : _DataAttr.DROPDOWN_LAYOUT_DIRECTIONS.DOWN
-      }, (key, value) => !!value);
+      }, (_, value) => !!value);
     };
     // For testing purposes only
     this._getItemDataAttr = _ref3 => {
@@ -327,7 +340,21 @@ class DropdownLayout extends _react.default.PureComponent {
         [_DataAttr.DATA_OPTION.HOVERED]: hovered,
         /* deprecated */
         [_DataAttr.DATA_OPTION.SIZE]: itemHeight
-      }, (key, value) => !!value);
+      }, (_, value) => !!value);
+    };
+    this._isSelectableOption = option => {
+      if (!option) {
+        return false;
+      }
+      if (this._isDivider(option)) {
+        return false;
+      }
+
+      // only DropdownLayoutValueOption type has title prop, which is deprecated
+      // therefore expecting error instead of dealing with it
+      // @ts-expect-error
+      var hasTitle = option.title;
+      return !this._isDivider(option) && !option.disabled && !hasTitle;
     };
     this.containerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
@@ -382,6 +409,8 @@ class DropdownLayout extends _react.default.PureComponent {
     }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
+    var options = this.props.options || [];
+    var nextOptions = nextProps.options || [];
     if (this.props.visible !== nextProps.visible) {
       this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
     }
@@ -392,8 +421,9 @@ class DropdownLayout extends _react.default.PureComponent {
     }
 
     // make sure the same item is hovered if options changed
-    if (this.state.hovered !== _DropdownLayout2.NOT_HOVERED_INDEX && (!nextProps.options[this.state.hovered] || this.props.options[this.state.hovered].id !== nextProps.options[this.state.hovered].id)) {
-      this._markOption(this._findIndex(nextProps.options, item => item.id === this.props.options[this.state.hovered].id));
+    if (this.state.hovered !== _DropdownLayout2.NOT_HOVERED_INDEX && (!nextOptions[this.state.hovered] || options[this.state.hovered].id !== nextOptions[this.state.hovered].id)) {
+      var _nextProps$options;
+      this._markOption(this._findIndex((_nextProps$options = nextProps.options) !== null && _nextProps$options !== void 0 ? _nextProps$options : [], item => item.id === options[this.state.hovered].id));
     }
     this._markOptionByProperty(nextProps);
   }
@@ -424,7 +454,7 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 166,
+        lineNumber: 280,
         columnNumber: 7
       }
     }) : null;
@@ -434,25 +464,22 @@ class DropdownLayout extends _react.default.PureComponent {
       option,
       idx
     } = _ref4;
-    var {
-      value,
-      id,
-      title: isTitle
-    } = option;
-    if (value === _DropdownLayout2.DIVIDER_OPTION_VALUE) {
+    if (this._isDivider(option)) {
       return (0, _ListItemSection.listItemSectionBuilder)({
         dataHook: _DataAttr.OPTION_DATA_HOOKS.DIVIDER,
-        id: id || idx,
+        id: option.id || idx,
         type: 'divider'
       });
-    }
-    if (isTitle) {
+    } else if (option.title) {
       return (0, _ListItemSection.listItemSectionBuilder)({
         dataHook: _DataAttr.OPTION_DATA_HOOKS.TITLE,
-        id,
+        id: option.id,
         type: 'subheader',
-        title: value
+        title: option.value
       });
+    } else {
+      // This should never happen but let's make TS happy
+      return undefined;
     }
   }
   _convertOptionToListItemActionBuilder(_ref5) {
@@ -481,7 +508,7 @@ class DropdownLayout extends _react.default.PureComponent {
     return typeof this.props.selectedId !== 'undefined' && typeof this.props.onSelect !== 'undefined';
   }
   _focusOnSelectedOption() {
-    if (this.selectedOption) {
+    if (this.selectedOption && this.optionsRef.current) {
       this.optionsRef.current.scrollTop = Math.max(this.selectedOption.offsetTop - this.selectedOption.offsetHeight, 0);
     }
   }
@@ -494,16 +521,18 @@ class DropdownLayout extends _react.default.PureComponent {
     var {
       onOptionMarked
     } = this.props;
-    options = options || this.props.options;
+    options = options || this.props.options || [];
     this.setState({
       hovered: index
     });
-    onOptionMarked && onOptionMarked(options[index] || null);
+    if (onOptionMarked) {
+      var markedOption = options[index] || null;
+      // the type declaration was incorrect, casting to avoid breaking changes after TS conversion
+      onOptionMarked(markedOption);
+    }
   }
   _getMarkedIndex() {
-    var {
-      options
-    } = this.props;
+    var options = this.props.options || [];
     var useHoverIndex = this.state.hovered > _DropdownLayout2.NOT_HOVERED_INDEX;
     var useSelectedIdIndex = typeof this.state.selectedId !== 'undefined';
     var markedIndex;
@@ -517,9 +546,7 @@ class DropdownLayout extends _react.default.PureComponent {
     return markedIndex;
   }
   _markNextStep(step) {
-    var {
-      options
-    } = this.props;
+    var options = this.props.options || [];
     if (!options.some(this._isSelectableOption)) {
       return;
     }
@@ -530,13 +557,14 @@ class DropdownLayout extends _react.default.PureComponent {
     this._markOptionAtIndex(markedIndex);
   }
   _scrollToOption() {
+    var _this$optionsRef$curr3;
     var {
-      scrollToOption,
-      options
+      scrollToOption
     } = this.props;
+    var options = this.props.options || [];
     var optionIndex = options.findIndex(option => option.id === scrollToOption);
-    var optionNode = this.optionsRef.current.childNodes[optionIndex];
-    if (!optionNode) {
+    var optionNode = (_this$optionsRef$curr3 = this.optionsRef.current) == null ? void 0 : _this$optionsRef$curr3.childNodes[optionIndex];
+    if (!optionNode || !this.optionsRef.current) {
       return;
     }
     this.optionsRef.current.scrollTop = Math.max(optionNode.offsetTop - optionNode.offsetHeight, 0);
@@ -546,7 +574,7 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 517,
+        lineNumber: 678,
         columnNumber: 19
       }
     }, node) : null;
@@ -572,8 +600,8 @@ class DropdownLayout extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 571,
-            columnNumber: 22
+            lineNumber: 737,
+            columnNumber: 11
           }
         }, _value)
       };
@@ -588,11 +616,14 @@ class DropdownLayout extends _react.default.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 580,
-            columnNumber: 22
+            lineNumber: 748,
+            columnNumber: 11
           }
         }, _value)
       };
+    } else {
+      // This should never happen but let's make TS happy
+      return undefined;
     }
   }
   _convertOptionToListItemSelectBuilder(_ref8) {
@@ -618,8 +649,8 @@ class DropdownLayout extends _react.default.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 592,
-          columnNumber: 14
+          lineNumber: 769,
+          columnNumber: 9
         }
       }, value),
       disabled,
@@ -629,63 +660,48 @@ class DropdownLayout extends _react.default.PureComponent {
       })
     });
   }
-  _isBuilderOption(_ref9) {
-    var {
-      option
-    } = _ref9;
+  _isBuilderOption(option) {
     var {
       value
     } = option;
     return typeof value === 'function';
   }
-  _isCustomOption(_ref10) {
-    var {
-      option
-    } = _ref10;
+  _isCustomOption(option) {
     var {
       overrideOptionStyle,
       overrideStyle
     } = option;
     return overrideOptionStyle || overrideStyle;
   }
-  _isActionOption(_ref11) {
-    var {
-      option
-    } = _ref11;
-    return option.value === _DropdownLayout2.ListType.action;
+  _isActionOption(option) {
+    return 'value' in option && option.value === _DropdownLayout2.ListType.action;
   }
-  _isItemSection(_ref12) {
+  _isItemSection(option) {
+    // only DropdownLayoutValueOption type has title prop, which is deprecated
+    // therefore expecting error instead of dealing with it
+    // @ts-expect-error
     var {
-      option
-    } = _ref12;
-    var {
-      value,
       title: isTitle
     } = option;
-    return value === _DropdownLayout2.DIVIDER_OPTION_VALUE || isTitle;
+    return this._isDivider(option) || isTitle;
+  }
+  _isDivider(opt) {
+    return opt.value === _DropdownLayout2.DIVIDER_OPTION_VALUE;
   }
   _convertOptionToBuilder(option, idx) {
-    if (this._isBuilderOption({
-      option
-    })) {
+    if (this._isBuilderOption(option)) {
       return option;
-    } else if (this._isActionOption({
-      option
-    })) {
+    } else if (this._isActionOption(option)) {
       return this._convertOptionToListItemActionBuilder({
         option,
         idx
       });
-    } else if (this._isItemSection({
-      option
-    })) {
+    } else if (this._isItemSection(option)) {
       return this._convertOptionToListItemSectionBuilder({
         option,
         idx
       });
-    } else if (this._isCustomOption({
-      option
-    })) {
+    } else if (this._isCustomOption(option)) {
       return this._convertCustomOptionToBuilder({
         option
       });
@@ -695,19 +711,21 @@ class DropdownLayout extends _react.default.PureComponent {
       });
     }
   }
-  _renderOption(_ref13) {
+  _renderOption(_ref9) {
     var {
       option,
       idx
-    } = _ref13;
+    } = _ref9;
+    var isValueOption = opt => 'id' in opt && 'value' in opt && typeof opt.value !== 'function';
     var builderOption = this._convertOptionToBuilder(option, idx);
+    var hasLink = isValueOption(option) && !!option.linkTo;
     var content = this._renderOptionContent({
       option: builderOption,
       idx,
-      hasLink: !!option.linkTo
+      hasLink
     });
     var isActionItem = this.props.listType === _DropdownLayout2.ListType.action;
-    return option.linkTo ? /*#__PURE__*/_react.default.createElement("a", {
+    return hasLink ? /*#__PURE__*/_react.default.createElement("a", {
       className: _DropdownLayoutSt.classes.linkItem,
       key: idx,
       "data-hook": _DataAttr.DATA_HOOKS.LINK_ITEM,
@@ -718,17 +736,20 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 644,
+        lineNumber: 849,
         columnNumber: 7
       }
     }, content) : content;
   }
-  _renderOptionContent(_ref14) {
+  _renderOptionContent(_ref10) {
     var {
       option,
       idx,
       hasLink
-    } = _ref14;
+    } = _ref10;
+    if (!option) {
+      return undefined;
+    }
     var {
       itemHeight,
       selectedHighlight,
@@ -741,6 +762,9 @@ class DropdownLayout extends _react.default.PureComponent {
     var {
       id,
       disabled,
+      // only ConvertedCustomOption type has overrideStyle prop, which is deprecated
+      // therefore expecting error instead of dealing with it
+      // @ts-expect-error
       overrideStyle,
       overrideOptionStyle
     } = option;
@@ -764,7 +788,7 @@ class DropdownLayout extends _react.default.PureComponent {
         overrideStyle
       })),
       ref: node => this._setSelectedOptionNode(node, option),
-      onClick: !disabled ? e => this._onSelect(idx, e) : null,
+      onClick: !disabled ? e => this._onSelect(idx, e) : undefined,
       key: idx,
       onMouseEnter: () => this._onMouseEnter(idx),
       onMouseLeave: this._onMouseLeave,
@@ -773,30 +797,29 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 699,
+        lineNumber: 931,
         columnNumber: 7
       }
-    }), option.value(optionState));
+    }), option == null ? void 0 : option.value(optionState));
   }
   _markOptionByProperty(props) {
+    var options = props.options || [];
     if (this.state.hovered === _DropdownLayout2.NOT_HOVERED_INDEX && props.markedOption) {
-      var selectableOptions = props.options.filter(this._isSelectableOption);
+      var selectableOptions = options.filter(this._isSelectableOption);
       if (selectableOptions.length) {
         var idToMark = props.markedOption === true ? selectableOptions[0].id : props.markedOption;
-        this._markOption(this._findIndex(props.options, item => item.id === idToMark), props.options);
+        this._markOption(this._findIndex(options, item => item.id === idToMark), props.options);
       }
     }
   }
   _findIndex(arr, predicate) {
     return (Array.isArray(arr) ? arr : []).findIndex(predicate);
   }
-  _isSelectableOption(option) {
-    return option && option.value !== _DropdownLayout2.DIVIDER_OPTION_VALUE && !option.disabled && !option.title;
-  }
   _renderOptions() {
     this.focusableItemsIdsList = [];
     this._saveOnClicks();
-    return this.props.options.map((option, idx) => this._renderOption({
+    var options = this.props.options || [];
+    return options.map((option, idx) => this._renderOption({
       option,
       idx
     }));
@@ -815,33 +838,32 @@ class DropdownLayout extends _react.default.PureComponent {
       fixedFooter,
       inContainer,
       overflow,
-      maxHeightPixels,
+      maxHeightPixels = 260,
       minWidthPixels,
       infiniteScroll,
       dataHook,
-      listType
+      listType,
+      overlayScrollbarProps
     } = this.props;
     var renderedOptions = this._renderOptions();
-    var {
-      OverlayScrollbarHostElement,
-      OverlayScrollbarContentElement
-    } = this.props.overlayScrollbarProps;
+    var OverlayScrollbarHostElement = overlayScrollbarProps == null ? void 0 : overlayScrollbarProps.OverlayScrollbarHostElement;
+    var OverlayScrollbarContentElement = overlayScrollbarProps == null ? void 0 : overlayScrollbarProps.OverlayScrollbarContentElement;
     var optionsContainerProps = {
       style: {
-        maxHeight: getUnit(parseInt(maxHeightPixels, 10) - 35),
+        maxHeight: getUnit(parseInt(String(maxHeightPixels), 10) - 35),
         overflow
       },
       'data-hook': _DataAttr.DATA_HOOKS.DROPDOWN_LAYOUT_OPTIONS,
       role: listType === _DropdownLayout2.ListType.select ? 'listbox' : 'menu'
     };
     var options = infiniteScroll ? this._wrapWithInfiniteScroll(renderedOptions) : renderedOptions;
-    var optionsContainer = this.props.scrollbar === _DropdownLayout2.Scrollbar.OVERLAY ? /*#__PURE__*/_react.default.createElement(OverlayScrollbarHostElement, (0, _extends2.default)({
+    var optionsContainer = this.props.scrollbar === _DropdownLayout2.Scrollbar.OVERLAY && OverlayScrollbarHostElement && OverlayScrollbarContentElement ? /*#__PURE__*/_react.default.createElement(OverlayScrollbarHostElement, (0, _extends2.default)({
       className: _DropdownLayoutSt.classes.options
     }, optionsContainerProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 808,
+        lineNumber: 1060,
         columnNumber: 9
       }
     }), /*#__PURE__*/_react.default.createElement(OverlayScrollbarContentElement, {
@@ -850,7 +872,7 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 812,
+        lineNumber: 1064,
         columnNumber: 11
       }
     }, options)) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -860,7 +882,7 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 820,
+        lineNumber: 1075,
         columnNumber: 9
       }
     }), options);
@@ -882,131 +904,59 @@ class DropdownLayout extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 830,
+        lineNumber: 1085,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, this._getDataAttributes(), {
       className: _DropdownLayoutSt.classes.contentContainer,
       style: {
         overflow,
-        maxHeight: getUnit(maxHeightPixels),
-        minWidth: getUnit(minWidthPixels)
+        maxHeight: maxHeightPixels ? getUnit(maxHeightPixels) : undefined,
+        minWidth: minWidthPixels ? getUnit(minWidthPixels) : undefined
       },
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 852,
+        lineNumber: 1107,
         columnNumber: 9
       }
     }), this._renderNode(fixedHeader), optionsContainer, this._renderNode(fixedFooter)), this._renderTopArrow());
   }
 }
-var optionPropTypes = _propTypes.default.shape({
-  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string, _propTypes.default.func]).isRequired,
-  disabled: _propTypes.default.bool,
-  /** @deprecated*/
-  overrideStyle: _propTypes.default.bool,
-  /** @deprecated*/
-  title: _propTypes.default.bool,
-  overrideOptionStyle: _propTypes.default.bool,
-  /* the string displayed within the input when the option is selected */
-  label: _propTypes.default.string
-});
-function optionValidator(props, propName, componentName) {
-  var option = props[propName];
-
-  // Notice: We don't use Proptypes.oneOf() to check for either option OR divider, because then the failure message would be less informative.
-  if (typeof option === 'object' && option.value === _DropdownLayout2.DIVIDER_OPTION_VALUE) {
-    return;
-  }
-  var optionError = _propTypes.default.checkPropTypes({
-    option: optionPropTypes
-  }, {
-    option
-  }, 'option', componentName);
-  if (optionError) {
-    return optionError;
-  }
-}
+exports.DropdownLayout = DropdownLayout;
 DropdownLayout.propTypes = {
-  /** A single CSS class name to be appended to the root element. */
-  className: _propTypes.default.string,
-  /** @deprecated */
-  dropDirectionUp: _propTypes.default.bool,
-  /** Scroll view to the selected option on opening the dropdown */
-  focusOnSelectedOption: _propTypes.default.bool,
-  /** Callback function called whenever the user press the `Escape` keyboard.*/
-  onClose: _propTypes.default.func,
-  /** Callback function called whenever the user selects a different option in the list */
-  onSelect: _propTypes.default.func,
-  /** Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. */
-  onOptionMarked: _propTypes.default.func,
-  /** Set overflow of container */
-  overflow: _propTypes.default.string,
-  /** Should show or hide the component */
-  visible: _propTypes.default.bool,
-  /** Array of objects:
-   * - id `<string / number>` *required*: the id of the option, should be unique.
-   * - value `<function / string / node>` *required*: can be a string, react element or a builder function.
-   * - disabled `<bool>` *default value- false*: whether this option is disabled or not
-   * - linkTo `<string>`: when provided the option will be an anchor to the given value
-   * - title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title.
-   * - overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles.
-   * - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself.
-   * - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
-   */
-  options: _propTypes.default.arrayOf(optionValidator),
-  /** The id of the selected option in the list  */
-  selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** Specifies the tab order of the component. */
-  tabIndex: _propTypes.default.number,
-  /** @deprecated Do not use this prop. */
-  onClickOutside: _propTypes.default.func,
-  /** A fixed header to the list */
-  fixedHeader: _propTypes.default.node,
-  /** A fixed footer to the list */
-  fixedFooter: _propTypes.default.node,
-  /** Set the max height of the dropdownLayout in pixels */
-  maxHeightPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** Set the min width of the dropdownLayout in pixels   */
-  minWidthPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** @deprecated Do not use this prop. */
-  withArrow: _propTypes.default.bool,
-  /** Closes DropdownLayout on option selection */
-  closeOnSelect: _propTypes.default.bool,
-  /** Callback function called whenever the user entered with the mouse to the dropdown layout.*/
-  onMouseEnter: _propTypes.default.func,
-  /** Callback function called whenever the user exited with the mouse from the dropdown layout.*/
-  onMouseLeave: _propTypes.default.func,
-  /** @deprecated Do not use this prop. */
-  itemHeight: _propTypes.default.oneOf(['small', 'big']),
-  /** Whether the selected option will be highlighted when dropdown reopened. */
-  selectedHighlight: _propTypes.default.bool,
-  /** Whether the `<DropdownLayout/>` is in a container component. If `true`, some styles such as shadows, positioning and padding will be added the the component contentContainer. */
-  inContainer: _propTypes.default.bool,
-  /** Set this prop for lazy loading of the dropdown layout items.*/
-  infiniteScroll: _propTypes.default.bool,
-  /** A callback called when more items are requested to be rendered. */
-  loadMore: _propTypes.default.func,
-  /** Whether there are more items to be loaded. */
-  hasMore: _propTypes.default.bool,
-  /** Sets the default hover behavior when:
-   *  1. `false` means no default
-   *  2. `true` means to hover the first selectable option
-   *  3. Any number/string represents the id of option to hover
-   */
-  markedOption: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.number]),
-  /** Marks (not selects) and scrolls view to the option on opening the dropdown by option id */
-  focusOnOption: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** Scrolls to the specified option when dropdown is opened without marking it */
-  scrollToOption: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  /** Defines type of behavior applied in list */
-  listType: _propTypes.default.oneOf([_DropdownLayout2.ListType.action, _DropdownLayout2.ListType.select]),
-  /** Specifies whether first list item should be focused */
-  autoFocus: _propTypes.default.bool,
-  /** Controls which type of scrollbar to render */
-  scrollbar: _propTypes.default.oneOf(['overlay', 'fixed'])
+  className: _propTypes.default.any,
+  dropDirectionUp: _propTypes.default.any,
+  focusOnSelectedOption: _propTypes.default.any,
+  onClose: _propTypes.default.any,
+  onSelect: _propTypes.default.any,
+  onOptionMarked: _propTypes.default.any,
+  overflow: _propTypes.default.any,
+  visible: _propTypes.default.any,
+  options: _propTypes.default.any,
+  selectedId: _propTypes.default.any,
+  tabIndex: _propTypes.default.any,
+  onClickOutside: _propTypes.default.any,
+  fixedHeader: _propTypes.default.any,
+  fixedFooter: _propTypes.default.any,
+  maxHeightPixels: _propTypes.default.any,
+  minWidthPixels: _propTypes.default.any,
+  withArrow: _propTypes.default.any,
+  closeOnSelect: _propTypes.default.any,
+  onMouseEnter: _propTypes.default.any,
+  onMouseLeave: _propTypes.default.any,
+  itemHeight: _propTypes.default.any,
+  selectedHighlight: _propTypes.default.any,
+  inContainer: _propTypes.default.any,
+  infiniteScroll: _propTypes.default.any,
+  loadMore: _propTypes.default.any,
+  hasMore: _propTypes.default.any,
+  markedOption: _propTypes.default.any,
+  focusOnOption: _propTypes.default.any,
+  scrollToOption: _propTypes.default.any,
+  listType: _propTypes.default.any,
+  autoFocus: _propTypes.default.any,
+  scrollbar: _propTypes.default.any
 };
 DropdownLayout.defaultProps = {
   options: [],
@@ -1017,7 +967,7 @@ DropdownLayout.defaultProps = {
   selectedHighlight: true,
   inContainer: false,
   infiniteScroll: false,
-  loadMore: null,
+  loadMore: undefined,
   hasMore: false,
   markedOption: false,
   overflow: 'auto',