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

package/cjs/MenuItems/SearchableGroup.js

@@ -2,7 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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');
@@ -10,74 +14,64 @@ var DSSearchBox = require('@elliemae/ds-form/SearchBox');
 var reactDesc = require('react-desc');
 var VirtualMenuList = require('../VirtualMenuList.js');
 var MenuContext = require('../MenuContext.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
 
-var SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
-var NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
+const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
+const NoOptionsWrapper = dsClassnames.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 = React.useRef(null);
-
-  var _useState = React.useState(searchTermProp),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
-
-  React.useEffect(function () {
+  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();
   }, []);
-
-  var _ref2 = React.useContext(MenuContext) || {},
-      visible = _ref2.visible;
-
-  React.useEffect(function () {
+  const {
+    visible
+  } = React.useContext(MenuContext) || {};
+  React.useEffect(() => {
     if (focusOnOpen && visible) {
-      setTimeout(function () {
+      setTimeout(() => {
         if (searchRef.current) searchRef.current.focus();
       }, 0);
     }
   }, [focusOnOpen, visible]);
-  var filteredChildren = React.useMemo(function () {
-    return children.filter(function (child) {
-      return !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase());
-    });
-  }, [children, searchTerm]);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SearchBoxWrapper, null, /*#__PURE__*/React__default['default'].createElement(DSSearchBox__default['default'], {
-    innerRef: searchRef,
-    onSearch: function onSearch(_ref3) {
-      var value = _ref3.value;
-      return setSearchTerm(value);
-    },
-    searchOnEnter: false,
-    showIcon: false,
-    value: searchTerm
-  })), !filteredChildren.length && /*#__PURE__*/React__default['default'].createElement(NoOptionsWrapper, null, noOptionsText), /*#__PURE__*/React__default['default'].createElement(VirtualMenuList, {
-    amountItemsInWindow: amountItemsInWindow,
-    height: height,
-    items: filteredChildren,
-    width: width
-  }));
+  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
+    })]
+  });
 }
 
-var props = {
+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'),
 
@@ -99,11 +93,9 @@ var props = {
   /** weather to focus on searchable group on open */
   focusOnOpen: reactDesc.PropTypes.bool.description('weather to focus on searchable group on open')
 };
-SearchableGroup.propTypes = props;
-var DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
+const DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
 DSMenuSearchableGroupWithSchema.propTypes = props;
 var SearchableGroup$1 = FocusGroup.focusGroupManagerHoc(SearchableGroup);
 
 exports.DSMenuSearchableGroupWithSchema = DSMenuSearchableGroupWithSchema;
-exports['default'] = SearchableGroup$1;
-//# sourceMappingURL=SearchableGroup.js.map
+exports["default"] = SearchableGroup$1;

package/cjs/MenuItems/SearchableList.js

@@ -2,75 +2,61 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 _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; }
 
-var noop = function noop() {};
+const noop = () => {};
 
 function SearchableList(_ref) {
-  var _ref$onSelectMenuItem = _ref.onSelectMenuItem,
-      onSelectMenuItem = _ref$onSelectMenuItem === void 0 ? noop : _ref$onSelectMenuItem,
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? {} : _ref$components,
-      _ref$searchTerm = _ref.searchTerm,
-      searchTermProp = _ref$searchTerm === void 0 ? '' : _ref$searchTerm,
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items,
-      _ref$dropdownFilterOp = _ref.dropdownFilterOptions,
-      dropdownFilterOptions = _ref$dropdownFilterOp === void 0 ? {} : _ref$dropdownFilterOp,
-      returnValue = _ref.returnValue,
-      _ref$extraListProps = _ref.extraListProps,
-      extraListProps = _ref$extraListProps === void 0 ? {} : _ref$extraListProps,
-      _ref$appendTermInList = _ref.appendTermInList,
-      appendTermInList = _ref$appendTermInList === void 0 ? false : _ref$appendTermInList,
-      _ref$maxOptions = _ref.maxOptions,
-      maxOptions = _ref$maxOptions === void 0 ? 10 : _ref$maxOptions,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading;
-
-  var _useState = React.useState(searchTermProp),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      searchTerm = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var handleInputChange = React.useCallback(function (value, args) {
-    var action = args ? args.action : null;
+  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]);
-  var handleFilterByText = React.useCallback(function () {
+  const handleFilterByText = React.useCallback(() => {
     if (searchTerm) onSelectMenuItem(searchTerm);
   }, [searchTerm]);
-  var handleKeyDown = React.useCallback(function (e) {
+  const handleKeyDown = React.useCallback(e => {
     if (e.key === 'ArrowRight') {
       handleFilterByText();
     }
   }, [searchTerm]);
-  var options = React.useMemo(function () {
-    return searchTerm && appendTermInList ? dsUtilities.uniqBy([{
-      id: searchTerm,
-      label: searchTerm
-    }].concat(items), function (item) {
-      return item.label;
-    }) : items;
-  }, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/React__default['default'].createElement(dsForm.DSComboBox, _extends__default['default']({
+  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
@@ -90,10 +76,10 @@ function SearchableList(_ref) {
     valueProperty: "id",
     maxOptions: maxOptions,
     loading: loading
-  }, extraListProps, dropdownFilterOptions));
+  }, extraListProps), dropdownFilterOptions));
 }
 
-var props = {
+const props = {
   /** callback after item gets selected */
   onSelectMenuItem: reactDesc.PropTypes.func.description('callback after item gets selected'),
 
@@ -124,10 +110,8 @@ var props = {
   /**  loading flag */
   loading: reactDesc.PropTypes.bool.description('loading flag')
 };
-SearchableList.propTypes = props;
-var DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
+const DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
 DSMenuSearchableListWithSchema.propTypes = props;
 
 exports.DSMenuSearchableListWithSchema = DSMenuSearchableListWithSchema;
-exports['default'] = SearchableList;
-//# sourceMappingURL=SearchableList.js.map
+exports["default"] = SearchableList;

package/cjs/MenuItems/SelectionGroup.js

@@ -2,39 +2,106 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@babel/runtime/helpers/extends');
-require('react');
-require('react-desc');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./SearchableGroup.js');
-var MenuItems_SelectionGroup = require('../SubMenu-22be0a18.js');
-require('../VirtualMenuList.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-form/SearchBox');
-require('../MenuContext.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-hidden');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/defineProperty');
-require('lodash');
-require('react-spring/web.cjs');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./Separator.js');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-form');
-require('./CheckboxGroup.js');
-require('./RadioGroup.js');
-
-
-
-exports.DSMenuSelectionGroupWithSchema = MenuItems_SelectionGroup.DSMenuSelectionGroupWithSchema;
-exports.default = MenuItems_SelectionGroup.SelectionGroup;
-//# sourceMappingURL=SelectionGroup.js.map
+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); 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 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

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+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');
@@ -10,34 +11,34 @@ var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var blockName = 'menu-separator';
-var Li = /*#__PURE__*/styled__default['default'].li.withConfig({
+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;"]);
-var Title = dsClassnames.aggregatedClasses('h5')(blockName, 'title');
-
-var MenuSeparator = function MenuSeparator(_ref) {
-  var title = _ref.title,
-      _ref$showSeparator = _ref.showSeparator,
-      showSeparator = _ref$showSeparator === void 0 ? true : _ref$showSeparator;
-  return /*#__PURE__*/React__default['default'].createElement(Li, null, showSeparator && /*#__PURE__*/React__default['default'].createElement(DSSeparator__default['default'], null), title && /*#__PURE__*/React__default['default'].createElement(Title, null, title));
+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));
 };
 
-var props = {
+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')
 };
-MenuSeparator.propTypes = props;
-var DSMenuSeparatorWithSchema = reactDesc.describe(MenuSeparator);
+const DSMenuSeparatorWithSchema = reactDesc.describe(MenuSeparator);
 DSMenuSeparatorWithSchema.propTypes = props;
 
 exports.DSMenuSeparatorWithSchema = DSMenuSeparatorWithSchema;
-exports['default'] = MenuSeparator;
-//# sourceMappingURL=Separator.js.map
+exports["default"] = MenuSeparator;