@elliemae/ds-menu 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/MenuItems/MenuItem.js

@@ -1,31 +1,178 @@
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import 'react-desc';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-truncated-tooltip-text';
-export { D as DSMenuItemWithSchema, g as default } from '../SubMenu-a25e69ec.js';
-import '../MenuContext.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-import 'react-spring/web.cjs';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=MenuItem.js.map
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useRef, useMemo } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { omit } from 'lodash';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { mergeRefs } from '@elliemae/ds-utilities/system';
+import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
+import { runAll } from '@elliemae/ds-utilities/utils';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { renderMenuItems } from './menuItemFactory.js';
+import SubMenu from './SubMenu.js';
+import MenuContext from '../MenuContext.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const noop = () => null;
+
+const blockName = 'menu-item';
+const Content = aggregatedClasses('div')(blockName, 'content');
+const Addon = aggregatedClasses('div')(blockName, 'addon', ({
+  empty,
+  fixedItem
+}) => ({
+  empty,
+  fixedItem
+}));
+
+const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
+  classProps: {
+    fixedItem
+  }
+}, addonId, addon);
+
+const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
+
+const Wrapper = aggregatedClasses('li')(blockName, null, ({
+  disabled,
+  disabledAddonInactive,
+  customRenderer,
+  fixedItem,
+  type
+}) => ({
+  disabled,
+  disabledAddonInactive,
+  customRenderer,
+  fixedItem,
+  ["menu-type-".concat(type)]: type
+}));
+
+const calculateSize = (length = 0) => {
+  if (length > 45) return 45 * 7;
+  return length * 7;
+};
+
+function MenuItem(props) {
+  const {
+    innerRef,
+    as = 'li',
+    role = 'menuitem',
+    leftAddon = null,
+    rightAddon = undefined,
+    disabledAddonInactive = undefined,
+    label = undefined,
+    children,
+    tabIndex = -1,
+    onKeyDown = noop,
+    fixedItem = false,
+    noAddon,
+    disabled = false,
+    customRenderer,
+    maxOption,
+    closeMenu,
+    style
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
+
+  const menuCxt = useContext(MenuContext);
+  const ref = useRef(null);
+  useFocusGroupItem(ref);
+
+  if (otherProps.subItems) {
+    return /*#__PURE__*/jsx(SubMenu, _objectSpread(_objectSpread({}, props), {}, {
+      closeMenu: menuCxt.closeMenu,
+      children: renderMenuItems(otherProps.subItems)
+    }));
+  }
+
+  const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);
+
+  const onClick = (...args) => {
+    if (wrapperProps.onClick) wrapperProps.onClick(...args);
+
+    if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
+      menuCxt.closeMenu(...args);
+    }
+  };
+
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
+    as: as,
+    classProps: {
+      disabled,
+      disabledAddonInactive,
+      customRenderer,
+      fixedItem,
+      type: otherProps.type
+    },
+    id: otherProps.id,
+    innerRef: otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef,
+    onKeyDown: !fixedItem && runAll(e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        e.target.dispatchEvent(new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: false
+        }));
+      }
+    }, onKeyDown),
+    role: role,
+    style: style,
+    tabIndex: tabIndex
+  }, wrapperProps), {}, {
+    onClick: onClick,
+    children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx(Content, {
+      style: maxOption > 0 ? {
+        width: "".concat(calculateSize(maxOption), "px"),
+        maxWidth: "".concat(calculateSize(maxOption), "px")
+      } : undefined
+    }, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: label
+    })), customRenderer, rightAddon && renderAddons(rightAddon), children]
+  }));
+}
+
+const props = {
+  /** Renders the MenuItem with a specific html element */
+  as: PropTypes.element.description('Renders the MenuItem with a specific html element'),
+
+  /**
+   * reference to the component
+   */
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('reference to the component'),
+
+  /** Renders the passed element to the left */
+  leftAddon: PropTypes.element.description('Renders the passed element to the left'),
+
+  /** Renders the passed element to the right */
+  rightAddon: PropTypes.element.description('Renders the passed element to the right'),
+
+  /** Label for the menu item */
+  label: PropTypes.string.description('Label for the menu item'),
+
+  /** style object for menu item wrapper */
+  style: PropTypes.object.description('style object for menu item wrapper'),
+
+  /** disable menu item */
+  disabled: PropTypes.bool.description('disable menu item'),
+
+  /** HTML tabindex to manage focus order */
+  tabindex: PropTypes.number.description('HTML tabindex to manage focus order'),
+
+  /** a11y role */
+  role: PropTypes.string.description('a11y role')
+};
+const DSMenuItemWithSchema = describe(MenuItem);
+DSMenuItemWithSchema.propTypes = props;
+
+export { DSMenuItemWithSchema, MenuItem as default };

package/esm/MenuItems/MenuItemCheckable.js

@@ -1,31 +1,102 @@
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import 'react-desc';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-utilities';
-export { b as DSMenuItemCheckeableWithSchema, h as default } from '../SubMenu-a25e69ec.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-truncated-tooltip-text';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '../MenuContext.js';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=MenuItemCheckable.js.map
+import { PropTypes, describe } from 'react-desc';
+import Checkmark from '@elliemae/ds-icons/Checkmark';
+import { runAll } from '@elliemae/ds-utilities/utils';
+import MenuItem from './MenuItem.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _div;
+
+const _excluded = ["role", "checked", "name", "checkIcon", "children", "leftAddon", "item"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useCheckable({
+  checked
+}) {
+  return {
+    checked,
+    'aria-checked': checked
+  };
+}
+/**
+ * Reuses the same props as the MenuItem
+ *
+ * @param root0
+ * @param root0.role
+ * @param root0.checked
+ * @param root0.name
+ * @param root0.checkIcon
+ * @param root0.children
+ * @param root0.leftAddon
+ * @param root0.item
+ */
+
+
+function MenuItemCheckable(_ref) {
+  let {
+    role = 'menuitemcheckbox',
+    checked = false,
+    name = '',
+    checkIcon = /*#__PURE__*/_jsx(Checkmark, {
+      color: ['brand-primary', 600]
+    }),
+    // eslint-disable-next-line react/prop-types
+    children,
+    leftAddon,
+    item = undefined
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const checkableProps = useCheckable({
+    checked,
+    name
+  });
+
+  const handleClick = () => runAll(otherProps.onClick, checkableProps.onClick)({
+    target: {
+      value: name,
+      checked
+    }
+  }, item);
+
+  const checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/_jsx("div", {
+    className: "checkable-mark"
+  }, void 0, checkIcon) : _div || (_div = /*#__PURE__*/_jsx("div", {})));
+  return /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, item), otherProps), checkableProps), {}, {
+    customRenderer: item && item.customRenderer ? item.customRenderer : () => {},
+    items: otherProps.subItems,
+    leftAddon: checkAddon,
+    onClick: handleClick,
+    role: role
+  }));
+}
+
+const props = {
+  /** Whether the item is checked or not */
+  checked: PropTypes.bool.description('Whether the item is checked or not'),
+
+  /** A custom item when the item is checked */
+  checkIcon: PropTypes.element.description('A custom item when the item is checked'),
+
+  /** form field name */
+  name: PropTypes.string.description('form field name'),
+
+  /** menu item object props */
+  item: PropTypes.object.description('menu item object props'),
+
+  /** a11y role */
+  role: PropTypes.string.description('a11y role'),
+
+  /** left addon component */
+  leftAddon: PropTypes.node.description('left addon component')
+};
+const DSMenuItemCheckeableWithSchema = describe(MenuItemCheckable);
+DSMenuItemCheckeableWithSchema.propTypes = props;
+
+export { DSMenuItemCheckeableWithSchema, MenuItemCheckable as default };

package/esm/MenuItems/MenuItemCheckbox.js

@@ -1,31 +1,29 @@
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import '@elliemae/ds-form';
-export { f as default } from '../SubMenu-a25e69ec.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-desc';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-truncated-tooltip-text';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '../MenuContext.js';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=MenuItemCheckbox.js.map
+import DSCheckbox from '@elliemae/ds-form/Checkbox';
+import MenuItemCheckable from './MenuItemCheckable.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["checked"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function MenuItemCheckbox(_ref) {
+  let {
+    checked
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(MenuItemCheckable, _objectSpread(_objectSpread({}, rest), {}, {
+    leftAddon: /*#__PURE__*/_jsx(DSCheckbox, {
+      checked: checked
+    }),
+    role: "menuitemcheckbox"
+  }));
+}
+
+export { MenuItemCheckbox as default };

package/esm/MenuItems/MenuItemRadio.js

@@ -1,31 +1,27 @@
-import '@babel/runtime/helpers/esm/extends';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
-import 'react-desc';
-export { c as DSMenuItemRadioWithSchema, i as default } from '../SubMenu-a25e69ec.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-truncated-tooltip-text';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '../MenuContext.js';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=MenuItemRadio.js.map
+import { PropTypes, describe } from 'react-desc';
+import MenuItemCheckable from './MenuItemCheckable.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function MenuItemRadio(props) {
+  return /*#__PURE__*/jsx(MenuItemCheckable, _objectSpread(_objectSpread({}, props), {}, {
+    role: "menuitemradio"
+  }));
+}
+
+const props = {
+  /** Whether the item is checked or not */
+  checked: PropTypes.bool.description('Whether the item is checked or not'),
+
+  /** A custom item when the item is checked */
+  checkIcon: PropTypes.element.description('A custom item when the item is checked')
+};
+const DSMenuItemRadioWithSchema = describe(MenuItemCheckable);
+DSMenuItemRadioWithSchema.propTypes = props;
+
+export { DSMenuItemRadioWithSchema, MenuItemRadio as default };

package/esm/MenuItems/RadioGroup.js

@@ -1,24 +1,27 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import CheckableGroup from '@elliemae/ds-shared/CheckableGroup';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function RadioGroup(props) {
-  return /*#__PURE__*/React.createElement(CheckableGroup, _extends({}, props, {
+  return /*#__PURE__*/jsx(CheckableGroup, _objectSpread(_objectSpread({}, props), {}, {
     multi: false
   }));
 }
 
-var props = {
+const props = {
   /* The item selected */
   active: PropTypes.arrayOf(PropTypes.string).description('the item selected'),
 
   /* Handler when a user checks an item */
   onCheck: PropTypes.func.description('Handler when a user checks an item')
 };
-RadioGroup.propTypes = props;
-var DSMenuRadioGroupWithSchema = describe(RadioGroup);
+const DSMenuRadioGroupWithSchema = describe(RadioGroup);
 DSMenuRadioGroupWithSchema.propTypes = props;
 
 export { DSMenuRadioGroupWithSchema, RadioGroup as default };
-//# sourceMappingURL=RadioGroup.js.map

package/esm/MenuItems/SearchableGroup.js

@@ -1,73 +1,61 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useEffect, useContext, useMemo } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useEffect, useContext, useMemo } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';
 import DSSearchBox from '@elliemae/ds-form/SearchBox';
 import { PropTypes, describe } from 'react-desc';
 import VirtualMenuList from '../VirtualMenuList.js';
 import MenuContext from '../MenuContext.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-var SearchBoxWrapper = aggregatedClasses('div')('menu-search-group', 'search-wrapper');
-var NoOptionsWrapper = aggregatedClasses('div')('menu-search-group', 'no-options');
+const SearchBoxWrapper = aggregatedClasses('div')('menu-search-group', 'search-wrapper');
+const NoOptionsWrapper = aggregatedClasses('div')('menu-search-group', 'no-options');
 
-function SearchableGroup(_ref) {
-  var children = _ref.children,
-      _ref$amountItemsInWin = _ref.amountItemsInWindow,
-      amountItemsInWindow = _ref$amountItemsInWin === void 0 ? 5 : _ref$amountItemsInWin,
-      _ref$searchTerm = _ref.searchTerm,
-      searchTermProp = _ref$searchTerm === void 0 ? '' : _ref$searchTerm,
-      _ref$noOptionsText = _ref.noOptionsText,
-      noOptionsText = _ref$noOptionsText === void 0 ? 'No options' : _ref$noOptionsText,
-      height = _ref.height,
-      width = _ref.width,
-      _ref$focusOnOpen = _ref.focusOnOpen,
-      focusOnOpen = _ref$focusOnOpen === void 0 ? false : _ref$focusOnOpen;
-  var searchRef = useRef(null);
-
-  var _useState = useState(searchTermProp),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
-
-  useEffect(function () {
+function SearchableGroup({
+  children,
+  amountItemsInWindow = 5,
+  searchTerm: searchTermProp = '',
+  noOptionsText = 'No options',
+  height,
+  width,
+  focusOnOpen = false
+}) {
+  const searchRef = useRef(null);
+  const [searchTerm, setSearchTerm] = useState(searchTermProp);
+  useEffect(() => {
     if (searchRef.current) searchRef.current.focus();
   }, []);
-
-  var _ref2 = useContext(MenuContext) || {},
-      visible = _ref2.visible;
-
-  useEffect(function () {
+  const {
+    visible
+  } = useContext(MenuContext) || {};
+  useEffect(() => {
     if (focusOnOpen && visible) {
-      setTimeout(function () {
+      setTimeout(() => {
         if (searchRef.current) searchRef.current.focus();
       }, 0);
     }
   }, [focusOnOpen, visible]);
-  var filteredChildren = useMemo(function () {
-    return children.filter(function (child) {
-      return !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase());
-    });
-  }, [children, searchTerm]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchBoxWrapper, null, /*#__PURE__*/React.createElement(DSSearchBox, {
-    innerRef: searchRef,
-    onSearch: function onSearch(_ref3) {
-      var value = _ref3.value;
-      return setSearchTerm(value);
-    },
-    searchOnEnter: false,
-    showIcon: false,
-    value: searchTerm
-  })), !filteredChildren.length && /*#__PURE__*/React.createElement(NoOptionsWrapper, null, noOptionsText), /*#__PURE__*/React.createElement(VirtualMenuList, {
-    amountItemsInWindow: amountItemsInWindow,
-    height: height,
-    items: filteredChildren,
-    width: width
-  }));
+  const filteredChildren = useMemo(() => children.filter(child => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
+      innerRef: searchRef,
+      onSearch: ({
+        value
+      }) => setSearchTerm(value),
+      searchOnEnter: false,
+      showIcon: false,
+      value: searchTerm
+    })), !filteredChildren.length && /*#__PURE__*/_jsx(NoOptionsWrapper, {}, void 0, noOptionsText), /*#__PURE__*/_jsx(VirtualMenuList, {
+      amountItemsInWindow: amountItemsInWindow,
+      height: height,
+      items: filteredChildren,
+      width: width
+    })]
+  });
 }
 
-var props = {
+const props = {
   /** The amount of items that are going to be rendered in the group */
   amountItemsInWindow: PropTypes.number.description('The amount of items that are going to be rendered in the group'),
 
@@ -89,10 +77,8 @@ var props = {
   /** weather to focus on searchable group on open */
   focusOnOpen: PropTypes.bool.description('weather to focus on searchable group on open')
 };
-SearchableGroup.propTypes = props;
-var DSMenuSearchableGroupWithSchema = describe(SearchableGroup);
+const DSMenuSearchableGroupWithSchema = describe(SearchableGroup);
 DSMenuSearchableGroupWithSchema.propTypes = props;
 var SearchableGroup$1 = focusGroupManagerHoc(SearchableGroup);
 
 export { DSMenuSearchableGroupWithSchema, SearchableGroup$1 as default };
-//# sourceMappingURL=SearchableGroup.js.map