@elliemae/ds-menu 1.60.0 → 2.0.0-alpha.12

package/cjs/Menu.js

@@ -2,42 +2,194 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/defineProperty');
-require('react');
-require('react-desc');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('react-spring/web.cjs');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-hidden');
-var MenuItems_SelectionGroup = require('./SubMenu-22be0a18.js');
-require('./MenuItems/CheckboxGroup.js');
-require('./MenuItems/RadioGroup.js');
-require('./MenuItems/Separator.js');
-require('./MenuItems/SearchableGroup.js');
-require('./MenuContext.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('@elliemae/ds-truncated-tooltip-text');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./VirtualMenuList.js');
-require('react-window');
-require('./utils/useHeightByAmountOfItems.js');
-require('@elliemae/ds-form');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-form/SearchBox');
-
-
-
-exports.DSMenuWithSchema = MenuItems_SelectionGroup.DSMenuWithSchema;
-exports.Menu = MenuItems_SelectionGroup.Menu;
-exports.default = MenuItems_SelectionGroup.Menu;
-exports.menuItemFactory = MenuItems_SelectionGroup.menuItemFactory;
-exports.renderMenuItems = MenuItems_SelectionGroup.renderMenuItems;
-//# sourceMappingURL=Menu.js.map
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+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.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 web = require('react-spring/web');
+var hooks = require('@elliemae/ds-utilities/hooks');
+var system = require('@elliemae/ds-utilities/system');
+var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
+var dsHidden = require('@elliemae/ds-hidden');
+var MenuItemRadio = require('./MenuItems/MenuItemRadio.js');
+var MenuItemCheckbox = require('./MenuItems/MenuItemCheckbox.js');
+var CheckboxGroup = require('./MenuItems/CheckboxGroup.js');
+var RadioGroup = require('./MenuItems/RadioGroup.js');
+var Separator = require('./MenuItems/Separator.js');
+var MenuItem = require('./MenuItems/MenuItem.js');
+var SubMenu = require('./MenuItems/SubMenu.js');
+var SearchableGroup = require('./MenuItems/SearchableGroup.js');
+var SelectionGroup = require('./MenuItems/SelectionGroup.js');
+var menuItemFactory = require('./MenuItems/menuItemFactory.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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["containerProps", "innerRef", "as", "children", "onClickOutside", "visible", "focusOnOpen", "maxOption", "style", "minWidth", "maxWidth", "closeMenu", "responsiveHeight"],
+      _excluded2 = ["destroyed"];
+
+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__default["default"](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 RESPONSIVE_HEIHGT_MARGIN = 120;
+const blockName = 'menu';
+
+const noop = () => {};
+
+const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', _ref => {
+  let {
+    menuComboBox,
+    type
+  } = _ref;
+  return {
+    'menu-combo-box': menuComboBox,
+    ["type-".concat(type)]: type
+  };
+});
+/**
+ * todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can
+ * capture the context of the clicks on very nested components
+ */
+
+const isChildOfType = (child, type) => child.type.name === type;
+
+function DSMenu(_ref2) {
+  let {
+    containerProps = {},
+    innerRef,
+    as: MenuTag = web.animated.ul,
+    children = undefined,
+    onClickOutside = noop,
+    // handlers from hidden
+    visible = undefined,
+    focusOnOpen = false,
+    maxOption = 0,
+    style = {},
+    minWidth = undefined,
+    maxWidth = undefined,
+    closeMenu,
+    responsiveHeight = false
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+  const menuRef = React.useRef(null);
+  const {
+    focusFirst
+  } = React.useContext(FocusGroup.FocusGroupContext);
+
+  const _useHiddenTransition = dsHidden.useHiddenTransition({
+    visible,
+    style
+  }),
+        hiddenProps = _objectWithoutProperties__default["default"](_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
+
+
+  const nextChildren = React.useMemo(() => {
+    const forceLeftAddon = React__default["default"].Children.toArray(children).some(child => isChildOfType(child, 'SelectionGroup') || isChildOfType(child, 'MenuItemCheckbox') || isChildOfType(child, 'MenuItemRadio') || child.props.leftAddon);
+    return React__default["default"].Children.map(children, child => child && /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      noAddon: !forceLeftAddon ? true : undefined,
+      maxOption,
+      closeMenu
+    })));
+  }, [children]);
+  hooks.useOnClickOutside(menuRef, onClickOutside);
+  React.useEffect(() => {
+    if (focusOnOpen && visible) {
+      setTimeout(() => {
+        focusFirst();
+      }, 0);
+    }
+  }, [visible, focusOnOpen]); // todo: find out a better approach to this
+
+  return !hiddenProps.destroyed ? /*#__PURE__*/_jsx__default["default"](MenuContext.Provider, {
+    value: {
+      visible,
+      closeMenu
+    }
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    "data-testid": containerProps !== null && containerProps !== void 0 && containerProps['data-testid'] ? containerProps['data-testid'] : "em-ds-menu"
+  }, containerProps), {}, {
+    as: MenuTag,
+    classProps: _objectSpread(_objectSpread({}, otherProps.classProps || {}), {}, {
+      type: otherProps.type
+    }),
+    innerRef: system.mergeRefs(innerRef, menuRef),
+    role: "menu"
+  }, lodash.omit(otherProps, ['scheduleUpdate'])), hiddenProps), {}, {
+    children: /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "menu-component-internal-wrapper",
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        minWidth,
+        maxWidth
+      }, responsiveHeight ? {
+        overflowY: 'scroll',
+        maxHeight: responsiveHeight ? "".concat(window.innerHeight - RESPONSIVE_HEIHGT_MARGIN, "px") : undefined
+      } : {})
+    }, void 0, nextChildren)
+  }))) : null;
+}
+
+const Menu = FocusGroup.focusGroupManagerHoc(DSMenu, {
+  loop: true
+});
+const props = {
+  /** Injected props to wrapper element of component */
+  containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /** Renders the menu with a specific html element */
+  as: reactDesc.PropTypes.element.description('Renders the menu with a specific html element'),
+
+  /** Handler when a user clicks outside the menu */
+  onClickOutside: reactDesc.PropTypes.func.description('Handler when a user clicks outside the menu'),
+
+  /** Whether the menu is visible or not */
+  visible: reactDesc.PropTypes.bool.description('Whether the menu is visible or not'),
+
+  /** When set to true, it's going to focus the first item */
+  focusOnOpen: reactDesc.PropTypes.bool.description("When set to true, it's going to focus the first item"),
+
+  /** Customize menu minWidth. Can be undefined or 'number' */
+  minWidth: reactDesc.PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
+
+  /** Customize menu maxWidth. Can be undefined or 'number' */
+  maxWidth: reactDesc.PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
+};
+const DSMenuWithSchema = reactDesc.describe(DSMenu);
+DSMenuWithSchema.propTypes = props; // todo: add a handler to get this kind of exports for documentation
+
+Menu.Item = MenuItem["default"];
+Menu.ItemCheckbox = MenuItemCheckbox;
+Menu.ItemRadio = MenuItemRadio["default"];
+Menu.SubMenu = SubMenu["default"];
+Menu.Separator = Separator["default"];
+Menu.CheckboxGroup = CheckboxGroup["default"];
+Menu.RadioGroup = RadioGroup["default"];
+Menu.SearchableGroup = SearchableGroup["default"];
+Menu.SelectionGroup = SelectionGroup["default"];
+
+exports.menuItemFactory = menuItemFactory.menuItemFactory;
+exports.renderMenuItems = menuItemFactory.renderMenuItems;
+exports.DSMenuWithSchema = DSMenuWithSchema;
+exports.Menu = Menu;
+exports["default"] = Menu;

package/cjs/MenuCombobox.js

@@ -1,98 +1,56 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
+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');
-var React = require('react');
-var PropTypes = require('prop-types');
-var MenuItems_SearchableList = require('./MenuItems/SearchableList.js');
-var MenuItems_SelectionGroup = require('./SubMenu-22be0a18.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/slicedToArray');
-require('react-desc');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-form');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-hidden');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('react-spring/web.cjs');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./MenuItems/Separator.js');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./MenuItems/SearchableGroup.js');
-require('@elliemae/ds-form/SearchBox');
-require('./VirtualMenuList.js');
-require('react-window');
-require('./utils/useHeightByAmountOfItems.js');
-require('./MenuContext.js');
-require('./MenuItems/CheckboxGroup.js');
-require('./MenuItems/RadioGroup.js');
+require('react');
+var SearchableList = require('./MenuItems/SearchableList.js');
+var Menu = require('./Menu.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["dropdownFilterOptions", "options", "onSelectMenuItem", "innerRef", "maxOptions", "loading"];
+const _excluded = ["dropdownFilterOptions", "options", "onSelectMenuItem", "innerRef", "maxOptions", "loading"];
 
-function MenuCombobox(_ref) {
-  var _ref$dropdownFilterOp = _ref.dropdownFilterOptions,
-      dropdownFilterOptions = _ref$dropdownFilterOp === void 0 ? {} : _ref$dropdownFilterOp,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$onSelectMenuItem = _ref.onSelectMenuItem,
-      onSelectMenuItem = _ref$onSelectMenuItem === void 0 ? function () {
-    return null;
-  } : _ref$onSelectMenuItem,
-      innerRef = _ref.innerRef,
-      _ref$maxOptions = _ref.maxOptions,
-      maxOptions = _ref$maxOptions === void 0 ? 10 : _ref$maxOptions,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+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__default["default"](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; }
 
-  return /*#__PURE__*/React__default['default'].createElement(MenuItems_SelectionGroup.Menu, _extends__default['default']({}, rest, {
+function MenuCombobox(_ref) {
+  let {
+    dropdownFilterOptions = {},
+    options = [],
+    onSelectMenuItem = () => null,
+    innerRef,
+    maxOptions = 10,
+    loading = false
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Menu.Menu, _objectSpread(_objectSpread({}, rest), {}, {
     classProps: {
       menuComboBox: true
     },
     innerRef: innerRef,
-    visible: true
-  }), /*#__PURE__*/React__default['default'].createElement(MenuItems_SearchableList['default'], {
-    appendTermInList: true,
-    extraListProps: dropdownFilterOptions,
-    items: options,
-    onSelectMenuItem: onSelectMenuItem,
-    maxOptions: maxOptions,
-    loading: loading
+    visible: true,
+    children: /*#__PURE__*/_jsx__default["default"](SearchableList["default"], {
+      appendTermInList: true,
+      extraListProps: dropdownFilterOptions,
+      items: options,
+      onSelectMenuItem: onSelectMenuItem,
+      maxOptions: maxOptions,
+      loading: loading
+    })
   }));
 }
 
-MenuCombobox.propTypes = {
-  /** Options */
-  dropdownFilterOptions: PropTypes__default['default'].shape({}),
-
-  /** The option or menu items to render */
-  options: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
-
-  /** Handler when a menu item is selected */
-  onSelectMenuItem: PropTypes__default['default'].func,
-
-  /** Internal ref */
-  innerRef: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].object]),
-
-  /** Max options to display in the list */
-  maxOptions: PropTypes__default['default'].number,
-
-  /** Is loading */
-  loading: PropTypes__default['default'].bool
-};
-
 module.exports = MenuCombobox;
-//# sourceMappingURL=MenuCombobox.js.map

package/cjs/MenuContext.js

@@ -6,7 +6,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var MenuContext = /*#__PURE__*/React__default['default'].createContext();
+var MenuContext = /*#__PURE__*/React__default["default"].createContext();
 
 module.exports = MenuContext;
-//# sourceMappingURL=MenuContext.js.map

package/cjs/MenuItems/CheckboxGroup.js

@@ -2,24 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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); 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__default["default"](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 CheckboxGroup(props) {
-  return /*#__PURE__*/React__default['default'].createElement(CheckableGroup__default['default'], _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(CheckableGroup__default["default"], _objectSpread(_objectSpread({}, props), {}, {
     multi: true
   }));
 }
 
-var props = {
+const props = {
   /* The item (if multi false) or items (if multi true) selected */
   active: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('The item (if multi false) or items (if multi true) selected'),
 
@@ -29,10 +38,8 @@ var props = {
   /* Handler when a user checks an item */
   onCheck: reactDesc.PropTypes.func.description('Handler when a user checks an item')
 };
-CheckboxGroup.propTypes = props;
-var DSMenuCheckboxGroupWithSchema = reactDesc.describe(CheckboxGroup);
+const DSMenuCheckboxGroupWithSchema = reactDesc.describe(CheckboxGroup);
 DSMenuCheckboxGroupWithSchema.propTypes = props;
 
 exports.DSMenuCheckboxGroupWithSchema = DSMenuCheckboxGroupWithSchema;
-exports['default'] = CheckboxGroup;
-//# sourceMappingURL=CheckboxGroup.js.map
+exports["default"] = CheckboxGroup;