@elliemae/ds-menu 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/MenuItems/MenuItemRadio.js

@@ -0,0 +1,41 @@
+'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

@@ -0,0 +1,42 @@
+'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

@@ -0,0 +1,101 @@
+'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

@@ -0,0 +1,117 @@
+'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;

package/cjs/MenuItems/SelectionGroup.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
+var SearchableGroup = require('./SearchableGroup.js');
+var menuItemFactory = require('./menuItemFactory.js');
+var VirtualMenuList = require('../VirtualMenuList.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+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 = () => null;
+
+function SelectionGroup(_ref) {
+  let {
+    multi = false,
+    searchable = false,
+    focusOnOpen = false,
+    onSelect = noop,
+    children,
+    items = undefined,
+    active = multi ? [] : '',
+    width,
+    height,
+    maxOptions = 5
+  } = _ref;
+  const renderedItems = React.useMemo(() => items && items.map(item => {
+    const Component = menuItemFactory.menuItemFactory(multi ? 'checkbox' : 'radio');
+    return /*#__PURE__*/React.createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
+      key: item.name || item.id || item.key,
+      item: item,
+      name: item.id || item.name
+    }));
+  }), [items]);
+  const decoratedGroupChildren = CheckableGroup.useCheckableGroup({
+    children: renderedItems || children,
+    multi,
+    active,
+    onCheck: onSelect
+  });
+
+  if (searchable) {
+    return /*#__PURE__*/_jsx__default["default"](SearchableGroup["default"], {
+      focusOnOpen: focusOnOpen,
+      height: height,
+      items: items,
+      width: width
+    }, void 0, decoratedGroupChildren);
+  }
+
+  return /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
+    height: height,
+    items: decoratedGroupChildren,
+    width: width,
+    amountItemsInWindow: maxOptions
+  });
+}
+
+const props = {
+  /** toggle on multi select */
+  multi: reactDesc.PropTypes.bool.description('toggle on multi select'),
+
+  /** toggle on searchable behavior */
+  searchable: reactDesc.PropTypes.bool.description('toggle on searchable behavior'),
+
+  /** toggle to focus component on open */
+  focusOnOpen: reactDesc.PropTypes.bool.description('toggle to focus component on open'),
+
+  /** callback that triggers when select happens */
+  onSelect: reactDesc.PropTypes.func.description('callback that triggers when select happens'),
+  children: reactDesc.PropTypes.node.description(''),
+
+  /** selection group items  */
+  items: reactDesc.PropTypes.array.description('selection group items'),
+
+  /** array of values for multi and string for single selection */
+  active: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.array]).description('array of values for multi and string for single selection'),
+
+  /** selection group width */
+  width: reactDesc.PropTypes.number.description('selection group width'),
+
+  /** selection group height */
+  height: reactDesc.PropTypes.number.description('selection group height')
+};
+const DSMenuSelectionGroupWithSchema = reactDesc.describe(SelectionGroup);
+DSMenuSelectionGroupWithSchema.propTypes = props;
+
+exports.DSMenuSelectionGroupWithSchema = DSMenuSelectionGroupWithSchema;
+exports["default"] = SelectionGroup;

package/cjs/MenuItems/Separator.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSSeparator = require('@elliemae/ds-separator');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _DSSeparator;
+const blockName = 'menu-separator';
+const Li = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-aysbq3-0"
+})(["display:flex;align-items:flex-start;flex-direction:column;"]);
+const Title = dsClassnames.aggregatedClasses('h5')(blockName, 'title');
+
+const MenuSeparator = _ref => {
+  let {
+    title,
+    showSeparator = true
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {}))), title && /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title));
+};
+
+const props = {
+  /** menu separator h5 title */
+  title: reactDesc.PropTypes.string.description('menu separator h5 title'),
+
+  /** toggle separator on and off */
+  showSeparator: reactDesc.PropTypes.bool.description('toggle separator on and off')
+};
+const DSMenuSeparatorWithSchema = reactDesc.describe(MenuSeparator);
+DSMenuSeparatorWithSchema.propTypes = props;
+
+exports.DSMenuSeparatorWithSchema = DSMenuSeparatorWithSchema;
+exports["default"] = MenuSeparator;

package/cjs/MenuItems/SubMenu.js

@@ -0,0 +1,203 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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');
+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 dsIcons = require('@elliemae/ds-icons');
+var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
+var dsHidden = require('@elliemae/ds-hidden');
+var DSButton = require('@elliemae/ds-button');
+var DSPopper = require('@elliemae/ds-popper');
+var styled = require('styled-components');
+var Menu = require('../Menu.js');
+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 DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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 ChevronRightComp = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1qhp1z-0"
+})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
+
+function SubMenu(_ref) {
+  let {
+    noAddon,
+    leftAddon = undefined,
+    label = undefined,
+    interactionType = 'hover',
+    children: subitems,
+    rightAddonType,
+    disabledAddonInactive,
+    checkableProps = {},
+    customRenderer,
+    onClick,
+    closeMenu,
+    id
+  } = _ref;
+  const itemRef = React.useRef(null);
+  const focusOnOpen = React.useRef(false);
+  const [isAddonHovered, setIsAddonHovered] = React.useState(false);
+  const {
+    visible = false,
+    onShow,
+    onHide
+  } = dsHidden.useHiddenController(undefined, {
+    interaction: 'click'
+  });
+  const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
+  const {
+    focusItemByNode
+  } = FocusGroup.useFocusGroupItem(); // todo: create a menu state to handle all related menu things
+
+  const handleShowSubItemsWithMouse = e => {
+    e.stopPropagation();
+    onShow();
+    focusOnOpen.current = true;
+  };
+
+  const handleShowWithMouse = e => {
+    if (onClick) onClick(e);
+  };
+
+  const handleShowWithMouseHover = () => {
+    setIsAddonHovered(true);
+    onShow();
+    focusOnOpen.current = false;
+  };
+
+  const handleShowWithKeyboard = () => {
+    onShow();
+    focusOnOpen.current = true;
+  };
+
+  const handleOnMouseEnter = React.useCallback(() => {
+    setIsAddonHovered(true);
+  }, []);
+  const handleOnMouseLeave = React.useCallback(() => {
+    setIsAddonHovered(false);
+  }, []);
+  const hoverHandlers = interaction === 'hover' ? {
+    onMouseEnter: handleShowWithMouseHover,
+    onMouseLeave: () => {
+      onHide();
+      setIsAddonHovered(false);
+    }
+  } : {
+    onClick: handleShowWithMouse
+  };
+  const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    "aria-label": "vertical-elipsis",
+    "data-testid": "vertical-elipsis",
+    buttonType: "text",
+    leftIcon: /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
+      className: "submenu-arrow",
+      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+      size: "s"
+    }),
+    onClick: e => handleShowSubItemsWithMouse(e),
+    size: "m",
+    variant: DSButton.BUTTON_VARIANT.DEFAULT
+  }) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
+    "data-testid": "chevron-right",
+    className: "submenu-arrow",
+    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+    size: "sm"
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+      contentComponent: /*#__PURE__*/jsxRuntime.jsx(Menu.Menu, _objectSpread(_objectSpread({
+        focusKeyBindings: {
+          ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit']
+        },
+        focusOnOpen: focusOnOpen.current,
+        onExitFocusGroup: onHide
+      }, hoverHandlers), {}, {
+        closeMenu: closeMenu,
+        visible: visible,
+        children: subitems
+      })),
+      interactionType: interactionType,
+      isOpen: visible,
+      onOpen: opening => opening ? onShow() : onHide(),
+      placement: "right-start",
+      showArrow: false,
+      triggerComponent: /*#__PURE__*/jsxRuntime.jsx(MenuItem["default"], _objectSpread(_objectSpread({
+        customRenderer: customRenderer,
+        disabledAddonInactive: disabledAddonInactive,
+        id: id,
+        innerRef: itemRef,
+        label: label,
+        leftAddon: leftAddon,
+        noAddon: noAddon,
+        onFocus: handleOnMouseEnter,
+        onBlur: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave
+      }, hoverHandlers), {}, {
+        onKeyDown: e => {
+          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
+            handleShowWithKeyboard();
+          }
+        },
+        rightAddon: rightAddon
+      }, checkableProps))
+    })
+  });
+}
+
+const props = {
+  /** dont show addon for submenu */
+  noAddon: reactDesc.PropTypes.bool.description('dont show addon for submenu'),
+
+  /** left addon */
+  leftAddon: reactDesc.PropTypes.node.description('left addon'),
+
+  /** submenu label */
+  label: reactDesc.PropTypes.string.description('submenu label'),
+
+  /** A type indicating how to open/close the tooltip */
+  interactionType: reactDesc.PropTypes.oneOf(DSPopper.interactions).description('A type indicating how to open/close the tooltip'),
+
+  /** sub menu items */
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.node]).description('sub menu items'),
+
+  /** right addon, ellipsis or undefined */
+  rightAddonType: reactDesc.PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
+  disabledAddonInactive: reactDesc.PropTypes.bool.description(''),
+
+  /** props passed to MenuItem component */
+  checkableProps: reactDesc.PropTypes.object.description('props passed to MenuItem component'),
+
+  /** custom renderer for menu item */
+  customRenderer: reactDesc.PropTypes.func.description('custom renderer for menu item'),
+
+  /** on click handler */
+  onClick: reactDesc.PropTypes.func.description('on click handler'),
+  closeMenu: reactDesc.PropTypes.any.description(''),
+
+  /** component id */
+  id: reactDesc.PropTypes.string.description('component id')
+};
+const DSSubMenuWithSchema = reactDesc.describe(SubMenu);
+DSSubMenuWithSchema.propTypes = props;
+
+exports.DSSubMenuWithSchema = DSSubMenuWithSchema;
+exports["default"] = SubMenu;