@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/selects/BaseDropdownMenu.js

@@ -1,377 +1,255 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classname from 'classnames';
-import isEqual from 'lodash/fp/isEqual';
-import ownerDocument from '../../utils/ownerDocument';
-import addEventListener from '../../utils/addEventListener';
-import getDropDirection from '../../utils/getDropDirection';
-import scrollItemIntoView, { UP, DOWN } from '../../utils/scrollItemIntoView';
-import DropdownHeader from './DropdownHeader';
-
-// const UP = 'up';
-// const DOWN = 'down';
-var DATA_ATTRIBUTE_ID = 'data-item-id';
-var DATA_ATTRIBUTE_INDEX = 'data-item-index';
-var DEFAULT_FOCUSED_ITEM_INDEX = -1;
-var HIGHLIGHT_CLASS = 'focus';
-export var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
-  _inherits(BaseDropdownMenu, _Component);
-  var _super = _createSuper(BaseDropdownMenu);
-  function BaseDropdownMenu(props) {
-    var _this;
-    _classCallCheck(this, BaseDropdownMenu);
-    _this = _super.call(this, props);
-    _this.state = {
-      dropup: false,
-      pullRight: props.pullRight,
-      focusedItemIndex: _this.props.focusedItemIndex,
-      keyboardUsed: _this.props.keyboardUsed,
-      itemDOMValues: []
-    };
-    _this.handleOptionChange = _this.handleOptionChange.bind(_assertThisInitialized(_this));
-    _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(BaseDropdownMenu, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // all available items need to be rendered in order to know their DOM value
-      // which will be used for filtering in the parent component
-      var itemDOMValues = this.setItemDOMValues();
-      this.setState(function () {
-        return {
-          itemDOMValues: itemDOMValues
-        };
-      });
-      this.props.updateDOMValues(itemDOMValues);
-    }
-
-    // eslint-disable-next-line camelcase
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-      if (nextProps) {
-        if (!this.props.isOpen && nextProps.isOpen) {
-          this.openMenu(nextProps);
-        } else if (this.props.isOpen && !nextProps.isOpen) {
-          this.closeMenu();
-        }
-        if (!isEqual(nextProps.options, this.props.options)) {
-          this.setState(function () {
-            return {
-              options: nextProps.options
-            };
-          });
-
-          // Workaround to put the update of DOM values into a setTimeout to have the component
-          // re-rendered to fetch the DOM items.
-          // This should be refactored when reworking the component as functional component
-          setTimeout(function () {
-            // Only update the DOM values if it is explicitly requested
-            // otherwise it will reduce the dom values to the filtered options
-            if (nextProps.requestItemDOMValues) {
-              var items = _this2.setItemDOMValues();
-              _this2.props.updateDOMValues(items);
-              _this2.setState(function () {
-                return {
-                  itemDOMValues: items ? items : _this2.state.itemDOMValues
-                };
-              });
-            }
-          }, 0);
-        }
-      }
-    }
-  }, {
-    key: "handleKeydown",
-    value: function handleKeydown(event) {
-      switch (event.keyCode) {
-        case 27:
-          {
-            // close on esc key or on tab
-            this.closeMenu();
-            break;
-          }
-        case 9:
-          {
-            // close on tab
-            this.closeMenu();
-            break;
-          }
-        case 13:
-          {
-            // select on enter
-            this.selectOptionOnEnter(event);
-            break;
-          }
-        case 38:
-          {
-            // prevent scrolling the page when dropdown menu is open
-            event.preventDefault();
-
-            // select above on arrow up key
-            this.focusOption(UP);
-            scrollItemIntoView(UP, this.getDropdownDOMNode(), this.getFocusedOptionNode());
-            break;
-          }
-        case 40:
-          {
-            // prevent scrolling the page when dropdown menu is open
-            event.preventDefault();
-
-            // select below on arrow down key
-            this.focusOption(DOWN);
-            scrollItemIntoView(DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
-            break;
-          }
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "focusOption",
-    value: function focusOption(direction) {
-      var nextFocusedItem = 0;
-      var focusedItemIndex = this.state.focusedItemIndex;
-      switch (direction) {
-        case UP:
-          {
-            nextFocusedItem = focusedItemIndex === 0 ? focusedItemIndex : focusedItemIndex - 1;
-            break;
-          }
-        case DOWN:
-          {
-            nextFocusedItem = focusedItemIndex === this.props.options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
-            break;
-          }
-        default:
-          break;
-      }
-      this.setState(function () {
-        return {
-          focusedItemIndex: nextFocusedItem,
-          keyboardUsed: true
-        };
-      });
-    }
-  }, {
-    key: "getDropdownDOMNode",
-    value: function getDropdownDOMNode() {
-      return ReactDOM.findDOMNode(this.refDropdownMenu);
-    }
-  }, {
-    key: "getOptionNodes",
-    value: function getOptionNodes() {
-      var node = ReactDOM.findDOMNode(this.refDropdownMenu);
-      if (!node) {
-        return [];
-      }
-      return node.getElementsByTagName('a') || [];
-    }
-  }, {
-    key: "setItemDOMValues",
-    value: function setItemDOMValues() {
-      if (this.refDropdownMenu) {
-        var optionNodes = this.getOptionNodes();
-        var itemDOMValues = _toConsumableArray(optionNodes).map(function (item) {
-          return {
-            id: item.getAttribute(DATA_ATTRIBUTE_ID),
-            text: item.textContent
-          };
-        });
-        return itemDOMValues;
-      }
-    }
-  }, {
-    key: "getFocusedOptionNode",
-    value: function getFocusedOptionNode() {
-      var optionNodes = this.getOptionNodes();
-      return _toConsumableArray(optionNodes).find(function (item) {
-        return item.className.includes(HIGHLIGHT_CLASS);
-      });
-    }
-  }, {
-    key: "selectOptionOnEnter",
-    value: function selectOptionOnEnter(event) {
-      event.preventDefault();
-
-      // When no filter result was found, avoid selecting anything
-      if (!this.props.options.length) {
-        return;
-      }
-      var match = this.getFocusedOptionNode();
-      if (match) {
-        var selectedItem = this.props.options.find(function (option) {
-          return option.id === match.getAttribute(DATA_ATTRIBUTE_ID);
-        });
-        this.props.onSelect(event, selectedItem);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var _this$props = this.props,
-        pullRight = _this$props.pullRight,
-        noItemMessage = _this$props.noItemMessage,
-        dropdownClassName = _this$props.dropdownClassName;
-      var isPullRight = this.isAutoDropActive() ? this.state.pullRight : pullRight;
-      var dropdownMenuClasses = classname('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
-
-      // Dont show dropdown, when no match are found when filtering unless there is a not found message
-      if (!this.props.options.length) {
-        // In case a message is provided when nothing matched, show it
-        if (noItemMessage) {
-          return /*#__PURE__*/React.createElement("ul", {
-            className: dropdownMenuClasses
-          }, /*#__PURE__*/React.createElement("li", {
-            className: "no-item-message disabled",
-            disabled: true
-          }, /*#__PURE__*/React.createElement("a", {
-            role: "button"
-          }, /*#__PURE__*/React.createElement("i", null, noItemMessage))));
-        }
-        return null;
-      }
-      return /*#__PURE__*/React.createElement("ul", {
-        className: dropdownMenuClasses,
-        ref: function ref(node) {
-          return _this3.refDropdownMenu = node;
-        }
-      }, this.props.options.map(function (option, index) {
-        return _this3.renderMenuOption(option, index);
-      }));
-    }
-  }, {
-    key: "renderMenuOption",
-    value: function renderMenuOption(option, index) {
-      if (option.header) {
-        return /*#__PURE__*/React.createElement(DropdownHeader, {
-          key: option.id,
-          id: option.id,
-          icon: option.icon,
-          label: option.label,
-          type: "dropdown"
-        });
-      }
-
-      // Show focused style only when keyboard is in use
-      var anchorClassNames = this.state.keyboardUsed && this.state.focusedItemIndex === index ? HIGHLIGHT_CLASS : '';
-      var classNames = classname(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
-      return /*#__PURE__*/React.createElement("li", {
-        key: option.id,
-        className: classNames
-      }, /*#__PURE__*/React.createElement("a", {
-        role: "button",
-        className: anchorClassNames,
-        "data-item-id": option.id,
-        "data-item-index": index,
-        onClick: !option.disabled ? this.handleOptionChange : undefined
-      }, /*#__PURE__*/React.createElement("span", null, option.icon && /*#__PURE__*/React.createElement("span", {
-        className: "margin-right-5"
-      }, option.icon), option.label), /*#__PURE__*/React.createElement("input", {
-        type: "hidden",
-        value: option.id
-      })));
-    }
-  }, {
-    key: "getSelectedFocusedItemIndex",
-    value: function getSelectedFocusedItemIndex() {
-      return event.currentTarget.getAttribute(DATA_ATTRIBUTE_INDEX) || -1;
-    }
-  }, {
-    key: "handleOptionChange",
-    value: function handleOptionChange(event) {
-      event.preventDefault();
-      var optionId = event.currentTarget.getElementsByTagName('input')[0].value;
-      var selectedItem = this.props.options.find(function (option) {
-        return option.id === optionId;
-      });
-      this.props.onSelect(event, selectedItem);
-    }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-  }, {
-    key: "openMenu",
-    value: function openMenu(nextProps) {
-      var _this$props2 = this.props,
-        options = _this$props2.options,
-        onOpen = _this$props2.onOpen;
-      var doc = ownerDocument(this);
-      this.onDocumentKeydownListener = addEventListener(doc, 'keydown', this.handleKeydown);
-      var dropDirection = options.length && this.isAutoDropActive() ? getDropDirection(this.refDropdownMenu.parentNode, this.refDropdownMenu) : {};
-      this.setState(function () {
-        return _objectSpread({
-          isOpen: nextProps.isOpen,
-          keyboardUsed: nextProps.keyboardUsed
-        }, dropDirection);
-      });
-
-      // Tell the parent whether it's dropup or not as it might need to set the respective class
-      // to the wrapping element
-      onOpen(dropDirection.dropup);
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      if (this.onDocumentKeydownListener) {
-        this.onDocumentKeydownListener.remove();
-      }
-      this.props.onClose();
-    }
-  }]);
-  return BaseDropdownMenu;
-}(Component);
-BaseDropdownMenu.defaultProps = {
-  isOpen: false,
-  updateDOMValues: function updateDOMValues() {},
-  onOpen: function onOpen() {},
-  onSelect: function onSelect() {},
-  onClose: function onClose() {},
-  options: [],
-  autoDropDirection: false,
-  pullRight: false,
-  useActiveClass: false,
-  keyboardUsed: false,
-  focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX
-};
-BaseDropdownMenu.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired /* Identify an option */,
-    label: PropTypes.any.isRequired /* A label to show in body */,
-    icon: PropTypes.object /* An icon to show in body */,
-    selected: PropTypes.bool,
-    disabled: PropTypes.bool,
-    header: PropTypes.bool
-  })),
-  isOpen: PropTypes.bool,
-  updateDOMValues: PropTypes.func,
-  onOpen: PropTypes.func,
-  onSelect: PropTypes.func,
-  onClose: PropTypes.func,
-  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  dropup: PropTypes.bool,
-  pullRight: PropTypes.bool,
-  autoDropDirection: PropTypes.bool,
-  noItemMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  focusedItemIndex: PropTypes.number.isRequired,
-  dropdownClassName: PropTypes.string,
-  requestItemDOMValues: PropTypes.bool
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import isEqual from 'lodash/fp/isEqual';
+import ownerDocument from '../../utils/ownerDocument';
+import addEventListener from '../../utils/addEventListener';
+import getDropDirection from '../../utils/getDropDirection';
+import { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';
+import DropdownHeader from './DropdownHeader';
+// const UP = 'up';
+// const DOWN = 'down';
+const DATA_ATTRIBUTE_ID = 'data-item-id';
+const DATA_ATTRIBUTE_INDEX = 'data-item-index';
+const DEFAULT_FOCUSED_ITEM_INDEX = -1;
+const HIGHLIGHT_CLASS = 'focus';
+export class BaseDropdownMenu extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dropup: false,
+            pullRight: props.pullRight,
+            focusedItemIndex: this.props.focusedItemIndex,
+            keyboardUsed: this.props.keyboardUsed,
+            itemDOMValues: [],
+        };
+        this.handleOptionChange = this.handleOptionChange.bind(this);
+        this.handleKeydown = this.handleKeydown.bind(this);
+    }
+    componentDidMount() {
+        // all available items need to be rendered in order to know their DOM value
+        // which will be used for filtering in the parent component
+        const itemDOMValues = this.setItemDOMValues();
+        this.setState(() => ({
+            itemDOMValues,
+        }));
+        this.props.updateDOMValues(itemDOMValues);
+    }
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (nextProps) {
+            if (!this.props.isOpen && nextProps.isOpen) {
+                this.openMenu(nextProps);
+            }
+            else if (this.props.isOpen && !nextProps.isOpen) {
+                this.closeMenu();
+            }
+            if (!isEqual(nextProps.options, this.props.options)) {
+                this.setState(() => ({
+                    options: nextProps.options,
+                }));
+                // Workaround to put the update of DOM values into a setTimeout to have the component
+                // re-rendered to fetch the DOM items.
+                // This should be refactored when reworking the component as functional component
+                setTimeout(() => {
+                    // Only update the DOM values if it is explicitly requested
+                    // otherwise it will reduce the dom values to the filtered options
+                    if (nextProps.requestItemDOMValues) {
+                        const items = this.setItemDOMValues();
+                        this.props.updateDOMValues(items);
+                        this.setState(() => ({
+                            itemDOMValues: items ? items : this.state.itemDOMValues,
+                        }));
+                    }
+                }, 0);
+            }
+        }
+    }
+    handleKeydown(event) {
+        switch (event.keyCode) {
+            case 27: {
+                // close on esc key or on tab
+                this.closeMenu();
+                break;
+            }
+            case 9: {
+                // close on tab
+                this.closeMenu();
+                break;
+            }
+            case 13: {
+                // select on enter
+                this.selectOptionOnEnter(event);
+                break;
+            }
+            case 38: {
+                // prevent scrolling the page when dropdown menu is open
+                event.preventDefault();
+                // select above on arrow up key
+                this.focusOption(UP);
+                scrollItemIntoView(UP, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+                break;
+            }
+            case 40: {
+                // prevent scrolling the page when dropdown menu is open
+                event.preventDefault();
+                // select below on arrow down key
+                this.focusOption(DOWN);
+                scrollItemIntoView(DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    focusOption(direction) {
+        let nextFocusedItem = 0;
+        const focusedItemIndex = this.state.focusedItemIndex;
+        switch (direction) {
+            case UP: {
+                nextFocusedItem = focusedItemIndex === 0 ? focusedItemIndex : focusedItemIndex - 1;
+                break;
+            }
+            case DOWN: {
+                nextFocusedItem =
+                    focusedItemIndex === this.props.options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
+                break;
+            }
+            default:
+                break;
+        }
+        this.setState(() => ({
+            focusedItemIndex: nextFocusedItem,
+            keyboardUsed: true,
+        }));
+    }
+    getDropdownDOMNode() {
+        return ReactDOM.findDOMNode(this.refDropdownMenu);
+    }
+    getOptionNodes() {
+        const node = ReactDOM.findDOMNode(this.refDropdownMenu);
+        if (!node) {
+            return [];
+        }
+        return node.getElementsByTagName('a') || [];
+    }
+    setItemDOMValues() {
+        if (this.refDropdownMenu) {
+            const optionNodes = this.getOptionNodes();
+            const itemDOMValues = [...optionNodes].map(item => {
+                return {
+                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
+                    text: item.textContent,
+                };
+            });
+            return itemDOMValues;
+        }
+    }
+    getFocusedOptionNode() {
+        const optionNodes = this.getOptionNodes();
+        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));
+    }
+    selectOptionOnEnter(event) {
+        event.preventDefault();
+        // When no filter result was found, avoid selecting anything
+        if (!this.props.options.length) {
+            return;
+        }
+        const match = this.getFocusedOptionNode();
+        if (match) {
+            const selectedItem = this.props.options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));
+            this.props.onSelect(event, selectedItem);
+        }
+    }
+    render() {
+        const { pullRight, noItemMessage, dropdownClassName } = this.props;
+        const isPullRight = this.isAutoDropActive() ? this.state.pullRight : pullRight;
+        const dropdownMenuClasses = classNames('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
+        // Dont show dropdown, when no match are found when filtering unless there is a not found message
+        if (!this.props.options.length) {
+            // In case a message is provided when nothing matched, show it
+            if (noItemMessage) {
+                return (_jsx("ul", Object.assign({ className: dropdownMenuClasses }, { children: _jsx("li", Object.assign({ className: 'no-item-message disabled', disabled: true }, { children: _jsx("a", Object.assign({ role: 'button' }, { children: _jsx("i", { children: noItemMessage }) })) })) })));
+            }
+            return null;
+        }
+        return (_jsx("ul", Object.assign({ className: dropdownMenuClasses, ref: node => (this.refDropdownMenu = node) }, { children: this.props.options.map((option, index) => this.renderMenuOption(option, index)) })));
+    }
+    renderMenuOption(option, index) {
+        if (option.header) {
+            return (_jsx(DropdownHeader, { id: option.id, icon: option.icon, label: option.label, type: 'dropdown' }, option.id));
+        }
+        // Show focused style only when keyboard is in use
+        const anchorClassNames = this.state.keyboardUsed && this.state.focusedItemIndex === index ? HIGHLIGHT_CLASS : '';
+        const wrapperClassNames = classNames(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
+        return (_jsx("li", Object.assign({ className: wrapperClassNames }, { children: _jsxs("a", Object.assign({ role: 'button', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, onClick: !option.disabled ? this.handleOptionChange : undefined }, { children: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
+    }
+    getSelectedFocusedItemIndex() {
+        return event.currentTarget.getAttribute(DATA_ATTRIBUTE_INDEX) || -1;
+    }
+    handleOptionChange(event) {
+        event.preventDefault();
+        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;
+        const selectedItem = this.props.options.find(option => option.id === optionId);
+        this.props.onSelect(event, selectedItem);
+    }
+    isAutoDropActive() {
+        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+    }
+    openMenu(nextProps) {
+        const { options, onOpen } = this.props;
+        const doc = ownerDocument(this);
+        this.onDocumentKeydownListener = addEventListener(doc, 'keydown', this.handleKeydown);
+        const dropDirection = options.length && this.isAutoDropActive()
+            ? getDropDirection(this.refDropdownMenu.parentNode, this.refDropdownMenu)
+            : {};
+        this.setState(() => (Object.assign({ isOpen: nextProps.isOpen, keyboardUsed: nextProps.keyboardUsed }, dropDirection)));
+        // Tell the parent whether it's dropup or not as it might need to set the respective class
+        // to the wrapping element
+        onOpen(dropDirection.dropup);
+    }
+    closeMenu() {
+        if (this.onDocumentKeydownListener) {
+            this.onDocumentKeydownListener.remove();
+        }
+        this.props.onClose();
+    }
+}
+BaseDropdownMenu.defaultProps = {
+    isOpen: false,
+    updateDOMValues: () => { },
+    onOpen: () => { },
+    onSelect: () => { },
+    onClose: () => { },
+    options: [],
+    autoDropDirection: false,
+    pullRight: false,
+    useActiveClass: false,
+    keyboardUsed: false,
+    focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
+};
+BaseDropdownMenu.propTypes = {
+    options: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired /* Identify an option */,
+        label: PropTypes.any.isRequired /* A label to show in body */,
+        icon: PropTypes.object /* An icon to show in body */,
+        selected: PropTypes.bool,
+        disabled: PropTypes.bool,
+        header: PropTypes.bool,
+    })),
+    isOpen: PropTypes.bool,
+    updateDOMValues: PropTypes.func,
+    onOpen: PropTypes.func,
+    onSelect: PropTypes.func,
+    onClose: PropTypes.func,
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    dropup: PropTypes.bool,
+    pullRight: PropTypes.bool,
+    autoDropDirection: PropTypes.bool,
+    noItemMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    focusedItemIndex: PropTypes.number.isRequired,
+    dropdownClassName: PropTypes.string,
+    requestItemDOMValues: PropTypes.bool,
+};