@elliemae/ds-menu 3.0.0-next.0 → 3.0.0-next.4

package/cjs/MenuItems/MenuItem.js

@@ -1,203 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var reactDesc = require('react-desc');
-var lodash = require('lodash');
-var dsClassnames = require('@elliemae/ds-classnames');
-var dsUtilities = require('@elliemae/ds-utilities');
-var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
-var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var menuItemFactory = require('./menuItemFactory.js');
-var SubMenu = require('./SubMenu.js');
-var MenuContext = require('../MenuContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
-
-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); 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__default["default"](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; }
-
-const noop = () => null;
-
-const blockName = 'menu-item';
-const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content');
-const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon', _ref => {
-  let {
-    empty,
-    fixedItem
-  } = _ref;
-  return {
-    empty,
-    fixedItem
-  };
-});
-
-const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["default"](Addon, {
-  classProps: {
-    fixedItem
-  }
-}, addonId, addon);
-
-const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
-
-const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null, _ref2 => {
-  let {
-    disabled,
-    disabledAddonInactive,
-    customRenderer,
-    fixedItem,
-    type
-  } = _ref2;
-  return {
-    disabled,
-    disabledAddonInactive,
-    customRenderer,
-    fixedItem,
-    ["menu-type-".concat(type)]: type
-  };
-});
-
-const calculateSize = function () {
-  let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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__default["default"](props, _excluded);
-
-  const menuCxt = React.useContext(MenuContext);
-  const ref = React.useRef(null);
-  FocusGroup.useFocusGroupItem(ref);
-
-  if (otherProps.subItems) {
-    return /*#__PURE__*/jsxRuntime.jsx(SubMenu["default"], _objectSpread(_objectSpread({}, props), {}, {
-      closeMenu: menuCxt.closeMenu,
-      children: menuItemFactory.renderMenuItems(otherProps.subItems)
-    }));
-  }
-
-  const wrapperProps = React.useMemo(() => lodash.omit(otherProps, ['icon']), [otherProps]);
-
-  const onClick = function () {
-    if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
-
-    if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
-      menuCxt.closeMenu(...arguments);
-    }
-  };
-
-  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({
-    as: as,
-    classProps: {
-      disabled,
-      disabledAddonInactive,
-      customRenderer,
-      fixedItem,
-      type: otherProps.type
-    },
-    id: otherProps.id,
-    innerRef: otherProps.type !== 'disabled' ? dsUtilities.mergeRefs(innerRef, ref) : innerRef,
-    onKeyDown: !fixedItem && dsUtilities.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__default["default"](Content, {
-      style: maxOption > 0 ? {
-        width: "".concat(calculateSize(maxOption), "px"),
-        maxWidth: "".concat(calculateSize(maxOption), "px")
-      } : undefined
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
-      value: label
-    })), customRenderer, rightAddon && renderAddons(rightAddon), children]
-  }));
-}
-
-const props = {
-  /** Renders the MenuItem with a specific html element */
-  as: reactDesc.PropTypes.element.description('Renders the MenuItem with a specific html element'),
-
-  /**
-   * reference to the component
-   */
-  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
-    current: reactDesc.PropTypes.any
-  })]).description('reference to the component'),
-
-  /** Renders the passed element to the left */
-  leftAddon: reactDesc.PropTypes.element.description('Renders the passed element to the left'),
-
-  /** Renders the passed element to the right */
-  rightAddon: reactDesc.PropTypes.element.description('Renders the passed element to the right'),
-
-  /** Label for the menu item */
-  label: reactDesc.PropTypes.string.description('Label for the menu item'),
-
-  /** style object for menu item wrapper */
-  style: reactDesc.PropTypes.object.description('style object for menu item wrapper'),
-
-  /** disable menu item */
-  disabled: reactDesc.PropTypes.bool.description('disable menu item'),
-
-  /** HTML tabindex to manage focus order */
-  tabindex: reactDesc.PropTypes.number.description('HTML tabindex to manage focus order'),
-
-  /** a11y role */
-  role: reactDesc.PropTypes.string.description('a11y role')
-};
-const DSMenuItemWithSchema = reactDesc.describe(MenuItem);
-DSMenuItemWithSchema.propTypes = props;
-
-exports.DSMenuItemWithSchema = DSMenuItemWithSchema;
-exports["default"] = MenuItem;

package/cjs/MenuItems/MenuItemCheckable.js

@@ -1,119 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('react');
-var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
-var dsUtilities = require('@elliemae/ds-utilities');
-var MenuItem = require('./MenuItem.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-
-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); 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__default["default"](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 useCheckable(_ref) {
-  let {
-    checked
-  } = _ref;
-  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(_ref2) {
-  let {
-    role = 'menuitemcheckbox',
-    checked = false,
-    name = '',
-    checkIcon = /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
-      color: ['brand-primary', 600]
-    }),
-    // eslint-disable-next-line react/prop-types
-    children,
-    leftAddon,
-    item = undefined
-  } = _ref2,
-      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
-
-  const checkableProps = useCheckable({
-    checked,
-    name
-  });
-
-  const handleClick = () => dsUtilities.runAll(otherProps.onClick, checkableProps.onClick)({
-    target: {
-      value: name,
-      checked
-    }
-  }, item);
-
-  const checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/_jsx__default["default"]("div", {
-    className: "checkable-mark"
-  }, void 0, checkIcon) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})));
-  return /*#__PURE__*/jsxRuntime.jsx(MenuItem["default"], _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: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
-
-  /** A custom item when the item is checked */
-  checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked'),
-
-  /** form field name */
-  name: reactDesc.PropTypes.string.description('form field name'),
-
-  /** menu item object props */
-  item: reactDesc.PropTypes.object.description('menu item object props'),
-
-  /** a11y role */
-  role: reactDesc.PropTypes.string.description('a11y role'),
-
-  /** left addon component */
-  leftAddon: reactDesc.PropTypes.node.description('left addon component')
-};
-const DSMenuItemCheckeableWithSchema = reactDesc.describe(MenuItemCheckable);
-DSMenuItemCheckeableWithSchema.propTypes = props;
-
-exports.DSMenuItemCheckeableWithSchema = DSMenuItemCheckeableWithSchema;
-exports["default"] = MenuItemCheckable;

package/cjs/MenuItems/MenuItemCheckbox.js

@@ -1,42 +0,0 @@
-'use strict';
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('react');
-var dsForm = require('@elliemae/ds-form');
-var MenuItemCheckable = require('./MenuItemCheckable.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-
-const _excluded = ["checked"];
-
-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__default["default"](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 MenuItemCheckbox(_ref) {
-  let {
-    checked
-  } = _ref,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, rest), {}, {
-    leftAddon: /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
-      checked: checked
-    }),
-    role: "menuitemcheckbox"
-  }));
-}
-
-module.exports = MenuItemCheckbox;

package/cjs/MenuItems/MenuItemRadio.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('react');
-var reactDesc = require('react-desc');
-var MenuItemCheckable = require('./MenuItemCheckable.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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 MenuItemRadio(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, props), {}, {
-    role: "menuitemradio"
-  }));
-}
-
-const props = {
-  /** Whether the item is checked or not */
-  checked: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
-
-  /** A custom item when the item is checked */
-  checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked')
-};
-const DSMenuItemRadioWithSchema = reactDesc.describe(MenuItemCheckable["default"]);
-DSMenuItemRadioWithSchema.propTypes = props;
-
-exports.DSMenuItemRadioWithSchema = DSMenuItemRadioWithSchema;
-exports["default"] = MenuItemRadio;

package/cjs/MenuItems/RadioGroup.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('react');
-var reactDesc = require('react-desc');
-var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var CheckableGroup__default = /*#__PURE__*/_interopDefaultLegacy(CheckableGroup);
-
-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__default["default"](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 RadioGroup(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(CheckableGroup__default["default"], _objectSpread(_objectSpread({}, props), {}, {
-    multi: false
-  }));
-}
-
-const props = {
-  /* The item selected */
-  active: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('the item selected'),
-
-  /* Handler when a user checks an item */
-  onCheck: reactDesc.PropTypes.func.description('Handler when a user checks an item')
-};
-const DSMenuRadioGroupWithSchema = reactDesc.describe(RadioGroup);
-DSMenuRadioGroupWithSchema.propTypes = props;
-
-exports.DSMenuRadioGroupWithSchema = DSMenuRadioGroupWithSchema;
-exports["default"] = RadioGroup;

package/cjs/MenuItems/SearchableGroup.js

@@ -1,101 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-var React = require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
-var DSSearchBox = require('@elliemae/ds-form/SearchBox');
-var reactDesc = require('react-desc');
-var VirtualMenuList = require('../VirtualMenuList.js');
-var MenuContext = require('../MenuContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
-
-const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
-const NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
-
-function SearchableGroup(_ref) {
-  let {
-    children,
-    amountItemsInWindow = 5,
-    searchTerm: searchTermProp = '',
-    noOptionsText = 'No options',
-    height,
-    width,
-    focusOnOpen = false
-  } = _ref;
-  const searchRef = React.useRef(null);
-  const [searchTerm, setSearchTerm] = React.useState(searchTermProp);
-  React.useEffect(() => {
-    if (searchRef.current) searchRef.current.focus();
-  }, []);
-  const {
-    visible
-  } = React.useContext(MenuContext) || {};
-  React.useEffect(() => {
-    if (focusOnOpen && visible) {
-      setTimeout(() => {
-        if (searchRef.current) searchRef.current.focus();
-      }, 0);
-    }
-  }, [focusOnOpen, visible]);
-  const filteredChildren = React.useMemo(() => children.filter(child => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSSearchBox__default["default"], {
-      innerRef: searchRef,
-      onSearch: _ref2 => {
-        let {
-          value
-        } = _ref2;
-        return setSearchTerm(value);
-      },
-      searchOnEnter: false,
-      showIcon: false,
-      value: searchTerm
-    })), !filteredChildren.length && /*#__PURE__*/_jsx__default["default"](NoOptionsWrapper, {}, void 0, noOptionsText), /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
-      amountItemsInWindow: amountItemsInWindow,
-      height: height,
-      items: filteredChildren,
-      width: width
-    })]
-  });
-}
-
-const props = {
-  /** The amount of items that are going to be rendered in the group */
-  amountItemsInWindow: reactDesc.PropTypes.number.description('The amount of items that are going to be rendered in the group'),
-
-  /** A search term */
-  searchTerm: reactDesc.PropTypes.string.description('A search term'),
-
-  /** Text to show when there's no options to show */
-  noOptionsText: reactDesc.PropTypes.string.description("Text to show when there's no options to show"),
-
-  /** array of children for search list */
-  children: reactDesc.PropTypes.array.description('array of children for search list'),
-
-  /** height for virtual list wrapper */
-  height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('height for virtual list wrapper'),
-
-  /** width for virtual list wrapper */
-  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('width for virtual list wrapper'),
-
-  /** weather to focus on searchable group on open */
-  focusOnOpen: reactDesc.PropTypes.bool.description('weather to focus on searchable group on open')
-};
-const DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
-DSMenuSearchableGroupWithSchema.propTypes = props;
-var SearchableGroup$1 = FocusGroup.focusGroupManagerHoc(SearchableGroup);
-
-exports.DSMenuSearchableGroupWithSchema = DSMenuSearchableGroupWithSchema;
-exports["default"] = SearchableGroup$1;

package/cjs/MenuItems/SearchableList.js

@@ -1,117 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var reactDesc = require('react-desc');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsForm = require('@elliemae/ds-form');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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; }
-
-const noop = () => {};
-
-function SearchableList(_ref) {
-  let {
-    onSelectMenuItem = noop,
-    components = {},
-    searchTerm: searchTermProp = '',
-    items = [],
-    dropdownFilterOptions = {},
-    returnValue,
-    extraListProps = {},
-    appendTermInList = false,
-    maxOptions = 10,
-    loading = false
-  } = _ref;
-  const [searchTerm, setInputValue] = React.useState(searchTermProp);
-  const handleInputChange = React.useCallback((value, args) => {
-    const action = args ? args.action : null;
-    if (action === 'input-blur' || action === 'menu-close') return;
-    setInputValue(value);
-  }, [searchTerm]);
-  const handleFilterByText = React.useCallback(() => {
-    if (searchTerm) onSelectMenuItem(searchTerm);
-  }, [searchTerm]);
-  const handleKeyDown = React.useCallback(e => {
-    if (e.key === 'ArrowRight') {
-      handleFilterByText();
-    }
-  }, [searchTerm]);
-  const options = React.useMemo(() => searchTerm && appendTermInList ? dsUtilities.uniqBy([{
-    id: searchTerm,
-    label: searchTerm
-  }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({
-    autoFocus: true,
-    components: _objectSpread({
-      DropdownIndicator: null
-    }, components),
-    customMenuItemOptions: {
-      useTruncatedText: true
-    },
-    inlineMenu: true,
-    inputValue: searchTerm,
-    menuIsOpen: true,
-    onChange: onSelectMenuItem,
-    onFilterByInputText: handleFilterByText,
-    onInputChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    options: options,
-    returnValue: returnValue,
-    valueProperty: "id",
-    maxOptions: maxOptions,
-    loading: loading
-  }, extraListProps), dropdownFilterOptions));
-}
-
-const props = {
-  /** callback after item gets selected */
-  onSelectMenuItem: reactDesc.PropTypes.func.description('callback after item gets selected'),
-
-  /** Object with custom components for react-select */
-  components: reactDesc.PropTypes.shape({}).description('Object with custom components for react-select'),
-
-  /** search term to filter for */
-  searchTerm: reactDesc.PropTypes.string.description('search term to filter for'),
-
-  /** item options */
-  items: reactDesc.PropTypes.array.description('item options'),
-
-  /** options */
-  dropdownFilterOptions: reactDesc.PropTypes.shape({}).description('options'),
-
-  /** Whether the combo box is has value to return or not */
-  returnValue: reactDesc.PropTypes.bool.description('Whether the combo box is has value to return or not'),
-
-  /** extra props to pass down to combo */
-  extraListProps: reactDesc.PropTypes.shape({}).description('extra props to pass down to combo'),
-
-  /** append search term as item on the list */
-  appendTermInList: reactDesc.PropTypes.bool.description('append search term as item on the list'),
-
-  /** maxoptions for combobox */
-  maxOptions: reactDesc.PropTypes.number.description('maxoptions for combobox'),
-
-  /**  loading flag */
-  loading: reactDesc.PropTypes.bool.description('loading flag')
-};
-const DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
-DSMenuSearchableListWithSchema.propTypes = props;
-
-exports.DSMenuSearchableListWithSchema = DSMenuSearchableListWithSchema;
-exports["default"] = SearchableList;