@wix/design-system 1.123.0 → 1.124.0

package/dist/esm/DropdownLayout/DropdownLayout.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, { PureComponent } from 'react';
 import Loader from '../Loader/Loader';
 import InfiniteScroll from '../utils/InfiniteScroll';
 import scrollIntoView from '../utils/scrollIntoView';
@@ -11,34 +11,40 @@ import { listItemSectionBuilder } from '../ListItemSection';
 import { listItemSelectBuilder } from '../ListItemSelect';
 import { listItemActionBuilder } from '../ListItemAction';
 import { isString } from '../utils/StringUtils';
-import { withOverlayScrollbar } from './withOverlayScrollbar';
+import { withOverlayScrollbar, } from './withOverlayScrollbar';
 import { DIVIDER_OPTION_VALUE, KEY, ListType, MOUSE_EVENTS_SUPPORTED, NOT_HOVERED_INDEX, Scrollbar, } from './DropdownLayout.constants';
 import { forkRef } from '../utils/forkRef';
 const modulus = (n, m) => ((n % m) + m) % m;
-const getUnit = value => (isString(value) ? value : `${value}px`);
-class DropdownLayout extends React.PureComponent {
+const getUnit = (value) => isString(value) ? value : `${value}px`;
+export class DropdownLayout extends PureComponent {
     constructor(props) {
         super(props);
-        this.setScrollElement = node => {
+        this.setScrollElement = (node) => {
             this.setState({ scrollElement: node });
         };
+        this.containerRef = React.createRef();
+        this.optionsRef = React.createRef();
+        this.loadedWithUndefinedOptions = false;
+        this._boundEvents = [];
         this.focusableItemsIdsList = [];
         this.savedOnClicks = [];
         this.children = {};
+        this.selectedOption = null;
         // Deprecated
-        this._onMouseEventsHandler = e => {
+        this._onMouseEventsHandler = (e) => {
             if (!this._checkIfEventOnElements(e, [ReactDOM.findDOMNode(this)])) {
                 this._onClickOutside(e);
             }
         };
-        this._onClickOutside = event => {
+        this._onClickOutside = (event) => {
             const { visible, onClickOutside } = this.props;
             if (visible && onClickOutside) {
                 onClickOutside(event);
             }
         };
         this._onSelect = (index, e) => {
-            const { options, onSelect, listType } = this.props;
+            const { onSelect, listType } = this.props;
+            const options = this.props.options || [];
             if (listType !== ListType.select) {
                 e.stopPropagation();
                 this._onClose();
@@ -57,24 +63,30 @@ class DropdownLayout extends React.PureComponent {
             }
             return !!onSelect && chosenOption;
         };
-        this._onActionClick = e => {
-            const onClick = this.savedOnClicks.find(({ id }) => id === e.id).onClick;
+        this._onActionClick = (e) => {
+            const onClick = this.savedOnClicks.find(({ id }) => id === e.id)?.onClick;
             onClick && onClick(e);
         };
         this._saveOnClicks = () => {
-            this.savedOnClicks = this.props.options.map(({ id, onClick }) => ({
+            const options = this.props.options || [];
+            this.savedOnClicks = options.map(({ id, 
+            // only builder options have onClick
+            // @ts-expect-error
+            onClick, }) => ({
                 id,
                 onClick,
             }));
         };
-        this._onMouseEnter = index => {
-            if (this._isSelectableOption(this.props.options[index])) {
+        this._onMouseEnter = (index) => {
+            const options = this.props.options || [];
+            if (this._isSelectableOption(options[index])) {
                 this._markOption(index);
             }
         };
         this._onMouseLeave = () => this._markOption(NOT_HOVERED_INDEX);
         this._focusOnOption = () => {
-            const { focusOnOption, options } = this.props;
+            const { focusOnOption } = this.props;
+            const options = this.props.options || [];
             const markedIndex = options.findIndex(option => option.id === focusOnOption);
             if (markedIndex !== -1) {
                 this._markOptionAtIndex(markedIndex);
@@ -84,16 +96,16 @@ class DropdownLayout extends React.PureComponent {
                 this._markOption(markedIndex);
             }
         };
-        this._markOptionAtIndex = markedIndex => {
+        this._markOptionAtIndex = (markedIndex) => {
             this._markOption(markedIndex);
             this._scrollIntoViewByIndex(markedIndex);
         };
-        this._scrollIntoViewByIndex = index => {
+        this._scrollIntoViewByIndex = (index) => {
             const { infiniteScroll } = this.props;
             const menuElement = this.optionsRef.current;
             const hoveredElement = infiniteScroll
-                ? this.optionsRef.current.childNodes[0].childNodes[index]
-                : this.optionsRef.current.childNodes[index];
+                ? this.optionsRef.current?.childNodes[0].childNodes[index]
+                : this.optionsRef.current?.childNodes[index];
             scrollIntoView(menuElement, hoveredElement);
         };
         /**
@@ -102,8 +114,10 @@ class DropdownLayout extends React.PureComponent {
          * @param {SyntheticEvent} event - The keydown event triggered by React
          * @returns {boolean} - Whether the event was handled by the component
          */
-        this._onSelectListKeyDown = event => {
+        this._onSelectListKeyDown = (event) => {
             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 !== ListType.select) {
                 return false;
@@ -164,7 +178,7 @@ class DropdownLayout extends React.PureComponent {
                 : focusableHOC
                     ? focusableHOC.innerComponentRef.focus
                     : () => ({});
-            this.setState({ focusedItemId }, () => callback());
+            this.setState({ focusedItemId }, () => callback?.());
         };
         this._handleActionListNavigation = (event, id) => {
             const length = this.focusableItemsIdsList.length;
@@ -220,7 +234,7 @@ class DropdownLayout extends React.PureComponent {
                 this.props.onClose();
             }
         };
-        this._wrapWithInfiniteScroll = scrollableElement => {
+        this._wrapWithInfiniteScroll = (scrollableElement) => {
             if (!this.optionsRef.current) {
                 this.loadedWithUndefinedOptions = true;
             }
@@ -238,10 +252,10 @@ class DropdownLayout extends React.PureComponent {
                 [DATA_DIRECTION]: dropDirectionUp
                     ? DROPDOWN_LAYOUT_DIRECTIONS.UP
                     : DROPDOWN_LAYOUT_DIRECTIONS.DOWN,
-            }, (key, value) => !!value);
+            }, (_, value) => !!value);
         };
         // For testing purposes only
-        this._getItemDataAttr = ({ hovered, selected, disabled }) => {
+        this._getItemDataAttr = ({ hovered, selected, disabled, }) => {
             const { itemHeight, selectedHighlight } = this.props;
             return filterObject({
                 [DATA_OPTION.DISABLED]: disabled,
@@ -249,7 +263,20 @@ class DropdownLayout extends React.PureComponent {
                 [DATA_OPTION.HOVERED]: hovered,
                 /* deprecated */
                 [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
+            const hasTitle = option.title;
+            return !this._isDivider(option) && !option.disabled && !hasTitle;
         };
         this.containerRef = React.createRef();
         this.optionsRef = React.createRef();
@@ -298,6 +325,8 @@ class DropdownLayout extends React.PureComponent {
         }
     }
     UNSAFE_componentWillReceiveProps(nextProps) {
+        const options = this.props.options || [];
+        const nextOptions = nextProps.options || [];
         if (this.props.visible !== nextProps.visible) {
             this._markOption(NOT_HOVERED_INDEX);
         }
@@ -306,10 +335,9 @@ class DropdownLayout extends React.PureComponent {
         }
         // make sure the same item is hovered if options changed
         if (this.state.hovered !== 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));
+            (!nextOptions[this.state.hovered] ||
+                options[this.state.hovered].id !== nextOptions[this.state.hovered].id)) {
+            this._markOption(this._findIndex(nextProps.options ?? [], item => item.id === options[this.state.hovered].id));
         }
         this._markOptionByProperty(nextProps);
     }
@@ -332,29 +360,32 @@ class DropdownLayout extends React.PureComponent {
         const { withArrow, visible } = this.props;
         return withArrow && visible ? (React.createElement("div", { "data-hook": DATA_HOOKS.TOP_ARROW, className: classes.arrow })) : null;
     }
-    _convertOptionToListItemSectionBuilder({ option, idx }) {
-        const { value, id, title: isTitle } = option;
-        if (value === DIVIDER_OPTION_VALUE) {
+    _convertOptionToListItemSectionBuilder({ option, idx, }) {
+        if (this._isDivider(option)) {
             return listItemSectionBuilder({
                 dataHook: OPTION_DATA_HOOKS.DIVIDER,
-                id: id || idx,
+                id: option.id || idx,
                 type: 'divider',
             });
         }
-        if (isTitle) {
+        else if (option.title) {
             return listItemSectionBuilder({
                 dataHook: 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({ option, idx }) {
+    _convertOptionToListItemActionBuilder({ option, idx, }) {
         const { id, value, disabled, optionTitle, title, ...rest } = option;
         return listItemActionBuilder({
             id: id !== undefined ? id : idx,
-            ref: ref => (this.children[id] = ref),
+            ref: (ref) => (this.children[id] = ref),
             tabIndex: id === this.state.focusedItemId && !disabled ? '0' : '-1',
             disabled,
             title: optionTitle,
@@ -367,7 +398,7 @@ class DropdownLayout extends React.PureComponent {
             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);
         }
     }
@@ -378,12 +409,16 @@ class DropdownLayout extends React.PureComponent {
     }
     _markOption(index, options) {
         const { onOptionMarked } = this.props;
-        options = options || this.props.options;
+        options = options || this.props.options || [];
         this.setState({ hovered: index });
-        onOptionMarked && onOptionMarked(options[index] || null);
+        if (onOptionMarked) {
+            const markedOption = options[index] || null;
+            // the type declaration was incorrect, casting to avoid breaking changes after TS conversion
+            onOptionMarked(markedOption);
+        }
     }
     _getMarkedIndex() {
-        const { options } = this.props;
+        const options = this.props.options || [];
         const useHoverIndex = this.state.hovered > NOT_HOVERED_INDEX;
         const useSelectedIdIndex = typeof this.state.selectedId !== 'undefined';
         let markedIndex;
@@ -399,7 +434,7 @@ class DropdownLayout extends React.PureComponent {
         return markedIndex;
     }
     _markNextStep(step) {
-        const { options } = this.props;
+        const options = this.props.options || [];
         if (!options.some(this._isSelectableOption)) {
             return;
         }
@@ -410,10 +445,11 @@ class DropdownLayout extends React.PureComponent {
         this._markOptionAtIndex(markedIndex);
     }
     _scrollToOption() {
-        const { scrollToOption, options } = this.props;
+        const { scrollToOption } = this.props;
+        const options = this.props.options || [];
         const optionIndex = options.findIndex(option => option.id === scrollToOption);
-        const optionNode = this.optionsRef.current.childNodes[optionIndex];
-        if (!optionNode) {
+        const optionNode = this.optionsRef.current?.childNodes[optionIndex];
+        if (!optionNode || !this.optionsRef.current) {
             return;
         }
         this.optionsRef.current.scrollTop = Math.max(optionNode.offsetTop - optionNode.offsetHeight, 0);
@@ -421,14 +457,14 @@ class DropdownLayout extends React.PureComponent {
     _renderNode(node) {
         return node ? React.createElement("div", null, node) : null;
     }
-    _convertCustomOptionToBuilder({ option }) {
+    _convertCustomOptionToBuilder({ option, }) {
         const { value, id, disabled, overrideOptionStyle, overrideStyle } = option;
         if (overrideStyle) {
             return {
                 id,
                 disabled,
                 overrideStyle,
-                value: () => React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value),
+                value: () => (React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value)),
             };
         }
         if (overrideOptionStyle) {
@@ -436,70 +472,89 @@ class DropdownLayout extends React.PureComponent {
                 id,
                 disabled,
                 overrideOptionStyle,
-                value: () => React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value),
+                value: () => (React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value)),
             };
         }
+        else {
+            // This should never happen but let's make TS happy
+            return undefined;
+        }
     }
-    _convertOptionToListItemSelectBuilder({ option }) {
+    _convertOptionToListItemSelectBuilder({ option, }) {
         const { value, id, disabled } = option;
         const { selectedId } = this.state;
         const { itemHeight, selectedHighlight } = this.props;
         return listItemSelectBuilder({
             id,
-            title: React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value),
+            title: (React.createElement("div", { "data-hook": DATA_HOOKS.OPTION }, value)),
             disabled,
             selected: id === selectedId && selectedHighlight,
             className: st(classes.selectableOption, { itemHeight }),
         });
     }
-    _isBuilderOption({ option }) {
+    _isBuilderOption(option) {
         const { value } = option;
         return typeof value === 'function';
     }
-    _isCustomOption({ option }) {
+    _isCustomOption(option) {
         const { overrideOptionStyle, overrideStyle } = option;
         return overrideOptionStyle || overrideStyle;
     }
-    _isActionOption({ option }) {
-        return option.value === ListType.action;
+    _isActionOption(option) {
+        return 'value' in option && option.value === ListType.action;
+    }
+    _isItemSection(option) {
+        // only DropdownLayoutValueOption type has title prop, which is deprecated
+        // therefore expecting error instead of dealing with it
+        // @ts-expect-error
+        const { title: isTitle } = option;
+        return this._isDivider(option) || isTitle;
     }
-    _isItemSection({ option }) {
-        const { value, title: isTitle } = option;
-        return value === DIVIDER_OPTION_VALUE || isTitle;
+    _isDivider(opt) {
+        return opt.value === 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 });
         }
         else {
             return this._convertOptionToListItemSelectBuilder({ option });
         }
     }
-    _renderOption({ option, idx }) {
+    _renderOption({ option, idx, }) {
+        const isValueOption = (opt) => 'id' in opt && 'value' in opt && typeof opt.value !== 'function';
         const builderOption = this._convertOptionToBuilder(option, idx);
+        const hasLink = isValueOption(option) && !!option.linkTo;
         const content = this._renderOptionContent({
             option: builderOption,
             idx,
-            hasLink: !!option.linkTo,
+            hasLink,
         });
         const isActionItem = this.props.listType === ListType.action;
-        return option.linkTo ? (React.createElement("a", { className: classes.linkItem, key: idx, "data-hook": DATA_HOOKS.LINK_ITEM, href: option.linkTo, role: isActionItem ? undefined : 'option', "aria-selected": isActionItem || option.disabled
+        return hasLink ? (React.createElement("a", { className: classes.linkItem, key: idx, "data-hook": DATA_HOOKS.LINK_ITEM, href: option.linkTo, role: isActionItem ? undefined : 'option', "aria-selected": isActionItem || option.disabled
                 ? undefined
                 : option.id === this.state.selectedId, "aria-hidden": option.disabled }, content)) : (content);
     }
-    _renderOptionContent({ option, idx, hasLink }) {
+    _renderOptionContent({ option, idx, hasLink, }) {
+        if (!option) {
+            return undefined;
+        }
         const { itemHeight, selectedHighlight, listType } = this.props;
         const { selectedId, hovered } = this.state;
-        const { id, disabled, overrideStyle, overrideOptionStyle } = option;
+        const { 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;
         const optionState = {
             selected: id === selectedId,
             hovered: idx === hovered,
@@ -516,40 +571,37 @@ class DropdownLayout extends React.PureComponent {
                     selected: optionState.selected && selectedHighlight,
                     itemHeight,
                     overrideStyle,
-                }), ref: node => this._setSelectedOptionNode(node, option), onClick: !disabled ? e => this._onSelect(idx, e) : null, key: idx, onMouseEnter: () => this._onMouseEnter(idx), onMouseLeave: this._onMouseLeave, "data-hook": `dropdown-item-${id}`, onKeyDown: e => this._onActionListKeyDown(e, id) }, option.value(optionState)));
+                }), ref: node => this._setSelectedOptionNode(node, option), onClick: !disabled ? e => this._onSelect(idx, e) : undefined, key: idx, onMouseEnter: () => this._onMouseEnter(idx), onMouseLeave: this._onMouseLeave, "data-hook": `dropdown-item-${id}`, onKeyDown: e => this._onActionListKeyDown(e, id) }, option?.value(optionState)));
     }
     _markOptionByProperty(props) {
+        const options = props.options || [];
         if (this.state.hovered === NOT_HOVERED_INDEX && props.markedOption) {
-            const selectableOptions = props.options.filter(this._isSelectableOption);
+            const selectableOptions = options.filter(this._isSelectableOption);
             if (selectableOptions.length) {
                 const 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 !== DIVIDER_OPTION_VALUE &&
-            !option.disabled &&
-            !option.title);
-    }
     _renderOptions() {
         this.focusableItemsIdsList = [];
         this._saveOnClicks();
-        return this.props.options.map((option, idx) => this._renderOption({ option, idx }));
+        const options = this.props.options || [];
+        return options.map((option, idx) => this._renderOption({ option, idx }));
     }
     render() {
-        const { className, visible, dropDirectionUp, tabIndex, onMouseEnter, onMouseLeave, onMouseDown, fixedHeader, withArrow, fixedFooter, inContainer, overflow, maxHeightPixels, minWidthPixels, infiniteScroll, dataHook, listType, } = this.props;
+        const { className, visible, dropDirectionUp, tabIndex, onMouseEnter, onMouseLeave, onMouseDown, fixedHeader, withArrow, fixedFooter, inContainer, overflow, maxHeightPixels = 260, minWidthPixels, infiniteScroll, dataHook, listType, overlayScrollbarProps, } = this.props;
         const renderedOptions = this._renderOptions();
-        const { OverlayScrollbarHostElement, OverlayScrollbarContentElement } = this.props.overlayScrollbarProps;
+        const OverlayScrollbarHostElement = overlayScrollbarProps?.OverlayScrollbarHostElement;
+        const OverlayScrollbarContentElement = overlayScrollbarProps?.OverlayScrollbarContentElement;
         const optionsContainerProps = {
             style: {
-                maxHeight: getUnit(parseInt(maxHeightPixels, 10) - 35),
+                maxHeight: getUnit(parseInt(String(maxHeightPixels), 10) - 35),
                 overflow,
             },
             'data-hook': DATA_HOOKS.DROPDOWN_LAYOUT_OPTIONS,
@@ -558,7 +610,9 @@ class DropdownLayout extends React.PureComponent {
         const options = infiniteScroll
             ? this._wrapWithInfiniteScroll(renderedOptions)
             : renderedOptions;
-        const optionsContainer = this.props.scrollbar === Scrollbar.OVERLAY ? (React.createElement(OverlayScrollbarHostElement, { className: classes.options, ...optionsContainerProps },
+        const optionsContainer = this.props.scrollbar === Scrollbar.OVERLAY &&
+            OverlayScrollbarHostElement &&
+            OverlayScrollbarContentElement ? (React.createElement(OverlayScrollbarHostElement, { className: classes.options, ...optionsContainerProps },
             React.createElement(OverlayScrollbarContentElement, { className: classes.optionsContent, ref: forkRef(this.optionsRef, this.setScrollElement) }, options))) : (React.createElement("div", { className: st(classes.options, classes.optionsContent), ref: forkRef(this.optionsRef, this.setScrollElement), ...optionsContainerProps }, options));
         return (React.createElement("div", { "data-list-type": listType, "data-hook": dataHook, className: st(classes.root, {
                 visible,
@@ -570,8 +624,8 @@ class DropdownLayout extends React.PureComponent {
             }, className), tabIndex: tabIndex, onKeyDown: this._onSelectListKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, ref: this.containerRef },
             React.createElement("div", { ...this._getDataAttributes(), className: classes.contentContainer, style: {
                     overflow,
-                    maxHeight: getUnit(maxHeightPixels),
-                    minWidth: getUnit(minWidthPixels),
+                    maxHeight: maxHeightPixels ? getUnit(maxHeightPixels) : undefined,
+                    minWidth: minWidthPixels ? getUnit(minWidthPixels) : undefined,
                 } },
                 this._renderNode(fixedHeader),
                 optionsContainer,
@@ -579,112 +633,39 @@ class DropdownLayout extends React.PureComponent {
             this._renderTopArrow()));
     }
 }
-const optionPropTypes = PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    value: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func])
-        .isRequired,
-    disabled: PropTypes.bool,
-    /** @deprecated*/
-    overrideStyle: PropTypes.bool,
-    /** @deprecated*/
-    title: PropTypes.bool,
-    overrideOptionStyle: PropTypes.bool,
-    /* the string displayed within the input when the option is selected */
-    label: PropTypes.string,
-});
-export function optionValidator(props, propName, componentName) {
-    const 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 === DIVIDER_OPTION_VALUE) {
-        return;
-    }
-    const optionError = PropTypes.checkPropTypes({ option: optionPropTypes }, { option }, 'option', componentName);
-    if (optionError) {
-        return optionError;
-    }
-}
 DropdownLayout.propTypes = {
-    /** A single CSS class name to be appended to the root element. */
-    className: PropTypes.string,
-    /** @deprecated */
-    dropDirectionUp: PropTypes.bool,
-    /** Scroll view to the selected option on opening the dropdown */
-    focusOnSelectedOption: PropTypes.bool,
-    /** Callback function called whenever the user press the `Escape` keyboard.*/
-    onClose: PropTypes.func,
-    /** Callback function called whenever the user selects a different option in the list */
-    onSelect: PropTypes.func,
-    /** Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. */
-    onOptionMarked: PropTypes.func,
-    /** Set overflow of container */
-    overflow: PropTypes.string,
-    /** Should show or hide the component */
-    visible: PropTypes.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.arrayOf(optionValidator),
-    /** The id of the selected option in the list  */
-    selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** Specifies the tab order of the component. */
-    tabIndex: PropTypes.number,
-    /** @deprecated Do not use this prop. */
-    onClickOutside: PropTypes.func,
-    /** A fixed header to the list */
-    fixedHeader: PropTypes.node,
-    /** A fixed footer to the list */
-    fixedFooter: PropTypes.node,
-    /** Set the max height of the dropdownLayout in pixels */
-    maxHeightPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** Set the min width of the dropdownLayout in pixels   */
-    minWidthPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** @deprecated Do not use this prop. */
-    withArrow: PropTypes.bool,
-    /** Closes DropdownLayout on option selection */
-    closeOnSelect: PropTypes.bool,
-    /** Callback function called whenever the user entered with the mouse to the dropdown layout.*/
-    onMouseEnter: PropTypes.func,
-    /** Callback function called whenever the user exited with the mouse from the dropdown layout.*/
-    onMouseLeave: PropTypes.func,
-    /** @deprecated Do not use this prop. */
-    itemHeight: PropTypes.oneOf(['small', 'big']),
-    /** Whether the selected option will be highlighted when dropdown reopened. */
-    selectedHighlight: PropTypes.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.bool,
-    /** Set this prop for lazy loading of the dropdown layout items.*/
-    infiniteScroll: PropTypes.bool,
-    /** A callback called when more items are requested to be rendered. */
-    loadMore: PropTypes.func,
-    /** Whether there are more items to be loaded. */
-    hasMore: PropTypes.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.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.number,
-    ]),
-    /** Marks (not selects) and scrolls view to the option on opening the dropdown by option id */
-    focusOnOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** Scrolls to the specified option when dropdown is opened without marking it */
-    scrollToOption: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /** Defines type of behavior applied in list */
-    listType: PropTypes.oneOf([ListType.action, ListType.select]),
-    /** Specifies whether first list item should be focused */
-    autoFocus: PropTypes.bool,
-    /** Controls which type of scrollbar to render */
-    scrollbar: PropTypes.oneOf(['overlay', 'fixed']),
+    className: PropTypes.any,
+    dropDirectionUp: PropTypes.any,
+    focusOnSelectedOption: PropTypes.any,
+    onClose: PropTypes.any,
+    onSelect: PropTypes.any,
+    onOptionMarked: PropTypes.any,
+    overflow: PropTypes.any,
+    visible: PropTypes.any,
+    options: PropTypes.any,
+    selectedId: PropTypes.any,
+    tabIndex: PropTypes.any,
+    onClickOutside: PropTypes.any,
+    fixedHeader: PropTypes.any,
+    fixedFooter: PropTypes.any,
+    maxHeightPixels: PropTypes.any,
+    minWidthPixels: PropTypes.any,
+    withArrow: PropTypes.any,
+    closeOnSelect: PropTypes.any,
+    onMouseEnter: PropTypes.any,
+    onMouseLeave: PropTypes.any,
+    itemHeight: PropTypes.any,
+    selectedHighlight: PropTypes.any,
+    inContainer: PropTypes.any,
+    infiniteScroll: PropTypes.any,
+    loadMore: PropTypes.any,
+    hasMore: PropTypes.any,
+    markedOption: PropTypes.any,
+    focusOnOption: PropTypes.any,
+    scrollToOption: PropTypes.any,
+    listType: PropTypes.any,
+    autoFocus: PropTypes.any,
+    scrollbar: PropTypes.any,
 };
 DropdownLayout.defaultProps = {
     options: [],
@@ -695,7 +676,7 @@ DropdownLayout.defaultProps = {
     selectedHighlight: true,
     inContainer: false,
     infiniteScroll: false,
-    loadMore: null,
+    loadMore: undefined,
     hasMore: false,
     markedOption: false,
     overflow: 'auto',