@elliemae/ds-menu 2.2.0-next.3 → 2.3.0-alpha.1

package/esm/MenuCombobox.js

@@ -1,48 +1,41 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import SearchableList from './MenuItems/SearchableList.js';
-import { Menu } from './Menu.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["dropdownFilterOptions", "options", "onSelectMenuItem", "innerRef", "maxOptions", "loading"];
-
-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(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 MenuCombobox(_ref) {
-  let {
-    dropdownFilterOptions = {},
-    options = [],
-    onSelectMenuItem = () => null,
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import { SearchableList } from "./MenuItems/SearchableList";
+import { Menu } from "./Menu";
+function MenuCombobox({
+  dropdownFilterOptions = {},
+  options = [],
+  onSelectMenuItem = () => null,
+  innerRef,
+  maxOptions = 10,
+  loading = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ React2.createElement(Menu, {
+    ...rest,
+    classProps: { menuComboBox: true },
     innerRef,
-    maxOptions = 10,
-    loading = false
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/jsx(Menu, _objectSpread(_objectSpread({}, rest), {}, {
-    classProps: {
-      menuComboBox: true
-    },
-    innerRef: innerRef,
-    visible: true,
-    children: /*#__PURE__*/_jsx(SearchableList, {
-      appendTermInList: true,
-      extraListProps: dropdownFilterOptions,
-      items: options,
-      onSelectMenuItem: onSelectMenuItem,
-      maxOptions: maxOptions,
-      loading: loading
-    })
+    visible: true
+  }, /* @__PURE__ */ React2.createElement(SearchableList, {
+    appendTermInList: true,
+    extraListProps: dropdownFilterOptions,
+    items: options,
+    onSelectMenuItem,
+    maxOptions,
+    loading
   }));
 }
-
-export { MenuCombobox as default };
+MenuCombobox.propTypes = {
+  dropdownFilterOptions: PropTypes.shape({}),
+  options: PropTypes.arrayOf(PropTypes.object),
+  onSelectMenuItem: PropTypes.func,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  maxOptions: PropTypes.number,
+  loading: PropTypes.bool
+};
+var MenuCombobox_default = MenuCombobox;
+export {
+  MenuCombobox_default as default
+};
+//# sourceMappingURL=MenuCombobox.js.map

package/esm/MenuCombobox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuCombobox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchableList } from './MenuItems/SearchableList';\nimport { Menu } from './Menu';\n\nfunction MenuCombobox({\n  dropdownFilterOptions = {},\n  options = [],\n  onSelectMenuItem = () => null,\n  innerRef,\n  maxOptions = 10,\n  loading = false,\n  ...rest\n}) {\n  return (\n    <Menu\n      {...rest}\n      classProps={{ menuComboBox: true }}\n      innerRef={innerRef}\n      visible\n    >\n      <SearchableList\n        appendTermInList\n        extraListProps={dropdownFilterOptions}\n        items={options}\n        onSelectMenuItem={onSelectMenuItem}\n        maxOptions={maxOptions}\n        loading={loading}\n      />\n    </Menu>\n  );\n}\n\nMenuCombobox.propTypes = {\n  /** Options */\n  dropdownFilterOptions: PropTypes.shape({}),\n  /** The option or menu items to render */\n  options: PropTypes.arrayOf(PropTypes.object),\n  /** Handler when a menu item is selected */\n  onSelectMenuItem: PropTypes.func,\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  /** Max options to display in the list */\n  maxOptions: PropTypes.number,\n  /** Is loading */\n  loading: PropTypes.bool,\n};\n\nexport default MenuCombobox;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,sBAAsB;AAAA,EACpB,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB,MAAM;AAAA,EACzB;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA,GACF;AACD,SACE,qCAAC,MAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,SAAO;AAAA,KAEP,qCAAC,gBAAD;AAAA,IACE,kBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,aAAa,YAAY;AAAA,EAEvB,uBAAuB,UAAU,MAAM;AAAA,EAEvC,SAAS,UAAU,QAAQ,UAAU;AAAA,EAErC,kBAAkB,UAAU;AAAA,EAE5B,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU;AAAA,EAEzD,YAAY,UAAU;AAAA,EAEtB,SAAS,UAAU;AAAA;AAGrB,IAAO,uBAAQ;",
+  "names": []
+}

package/esm/MenuContext.js

@@ -1,5 +1,9 @@
-import React from 'react';
-
-var MenuContext = /*#__PURE__*/React.createContext();
-
-export { MenuContext as default };
+import * as React from "react";
+import React2 from "react";
+const MenuContext = React2.createContext();
+var MenuContext_default = MenuContext;
+export {
+  MenuContext,
+  MenuContext_default as default
+};
+//# sourceMappingURL=MenuContext.js.map

package/esm/MenuContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst MenuContext = React.createContext();\nexport { MenuContext };\nexport default MenuContext;\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,cAAc,OAAM;AAE1B,IAAO,sBAAQ;",
+  "names": []
+}

package/esm/MenuExports.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./Menu";
+//# sourceMappingURL=MenuExports.js.map

package/esm/MenuExports.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuExports.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Menu';"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/MenuItems/CheckboxGroup.js

@@ -1,35 +1,23 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import CheckableGroup from '@elliemae/ds-shared/CheckableGroup';
-import { jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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(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 CheckboxGroup(props) {
-  return /*#__PURE__*/jsx(CheckableGroup, _objectSpread(_objectSpread({}, props), {}, {
-    multi: true
-  }));
-}
-
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { CheckableGroup } from "@elliemae/ds-shared/CheckableGroup";
+const CheckboxGroup = (props2) => /* @__PURE__ */ React2.createElement(CheckableGroup, {
+  ...props2,
+  multi: true
+});
 const props = {
-  /* The item (if multi false) or items (if multi true) selected */
-  active: PropTypes.arrayOf(PropTypes.string).description('The item (if multi false) or items (if multi true) selected'),
-
-  /* Whether is multi select or not */
-  multi: PropTypes.bool.description('Whether is multi select or not'),
-
-  /* Handler when a user checks an item */
-  onCheck: PropTypes.func.description('Handler when a user checks an item')
+  active: PropTypes.arrayOf(PropTypes.string).description("The item (if multi false) or items (if multi true) selected"),
+  multi: PropTypes.bool.description("Whether is multi select or not"),
+  onCheck: PropTypes.func.description("Handler when a user checks an item")
 };
+CheckboxGroup.propTypes = props;
 const DSMenuCheckboxGroupWithSchema = describe(CheckboxGroup);
 DSMenuCheckboxGroupWithSchema.propTypes = props;
-
-export { DSMenuCheckboxGroupWithSchema, CheckboxGroup as default };
+var CheckboxGroup_default = CheckboxGroup;
+export {
+  CheckboxGroup,
+  DSMenuCheckboxGroupWithSchema,
+  CheckboxGroup_default as default
+};
+//# sourceMappingURL=CheckboxGroup.js.map

package/esm/MenuItems/CheckboxGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/CheckboxGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { CheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\n\nconst CheckboxGroup = (props) => <CheckableGroup {...props} multi />;\n\nconst props = {\n  /* The item (if multi false) or items (if multi true) selected */\n  active: PropTypes.arrayOf(PropTypes.string).description(\n    'The item (if multi false) or items (if multi true) selected',\n  ),\n  /* Whether is multi select or not */\n  multi: PropTypes.bool.description('Whether is multi select or not'),\n  /* Handler when a user checks an item */\n  onCheck: PropTypes.func.description('Handler when a user checks an item'),\n};\n\nCheckboxGroup.propTypes = props;\n\nconst DSMenuCheckboxGroupWithSchema = describe(CheckboxGroup);\nDSMenuCheckboxGroupWithSchema.propTypes = props;\n\nexport { DSMenuCheckboxGroupWithSchema, CheckboxGroup };\nexport default CheckboxGroup;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,gBAAgB,CAAC,WAAU,qCAAC,gBAAD;AAAA,KAAoB;AAAA,EAAO,OAAK;AAAA;AAEjE,MAAM,QAAQ;AAAA,EAEZ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,YAC1C;AAAA,EAGF,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,cAAc,YAAY;AAE1B,MAAM,gCAAgC,SAAS;AAC/C,8BAA8B,YAAY;AAG1C,IAAO,wBAAQ;",
+  "names": []
+}

package/esm/MenuItems/MenuItem.js

@@ -1,87 +1,44 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useContext, useRef, useMemo } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { omit } from 'lodash';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { mergeRefs, runAll } from '@elliemae/ds-utilities';
-import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
-import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
-import { renderMenuItems } from './menuItemFactory.js';
-import SubMenu from './SubMenu.js';
-import MenuContext from '../MenuContext.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const _excluded = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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(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; }
-
+import * as React from "react";
+import React2, { useRef, useMemo, useContext } from "react";
+import { PropTypes, describe } from "react-desc";
+import { omit } from "lodash";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { mergeRefs, runAll } from "@elliemae/ds-utilities";
+import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup";
+import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { MenuContext } from "../MenuContext";
+import { registerMenuItem } from "./menuItemFactory";
+import { renderMenuItems } from "./renderMenuItems";
 const noop = () => null;
-
-const blockName = 'menu-item';
-const Content = aggregatedClasses('div')(blockName, 'content');
-const Addon = aggregatedClasses('div')(blockName, 'addon', _ref => {
-  let {
-    empty,
-    fixedItem
-  } = _ref;
-  return {
-    empty,
-    fixedItem
-  };
-});
-
-const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
-  classProps: {
-    fixedItem
-  }
-}, addonId, addon);
-
+const blockName = "menu-item";
+const Content = aggregatedClasses("div")(blockName, "content");
+const Addon = aggregatedClasses("div")(blockName, "addon", ({ empty, fixedItem }) => ({ empty, fixedItem }));
+const renderAddon = (addon, fixedItem, addonId) => /* @__PURE__ */ React2.createElement(Addon, {
+  key: addonId,
+  classProps: { fixedItem }
+}, addon);
 const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
-
-const Wrapper = 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;
+const Wrapper = aggregatedClasses("li")(blockName, null, ({ disabled, disabledAddonInactive, customRenderer, fixedItem, type }) => ({
+  disabled,
+  disabledAddonInactive,
+  customRenderer,
+  fixedItem,
+  [`menu-type-${type}`]: type
+}));
+const calculateSize = (length = 0) => {
+  if (length > 45)
+    return 45 * 7;
   return length * 7;
 };
-
-function MenuItem(props) {
+const MenuItem = (props2) => {
   const {
     innerRef,
-    as = 'li',
-    role = 'menuitem',
+    as = "li",
+    role = "menuitem",
     leftAddon = null,
-    rightAddon = undefined,
-    disabledAddonInactive = undefined,
-    label = undefined,
+    rightAddon = void 0,
+    disabledAddonInactive = void 0,
+    label = void 0,
     children,
     tabIndex = -1,
     onKeyDown = noop,
@@ -91,33 +48,28 @@ function MenuItem(props) {
     customRenderer,
     maxOption,
     closeMenu,
-    style
-  } = props,
-        otherProps = _objectWithoutProperties(props, _excluded);
-
+    style,
+    ...otherProps
+  } = props2;
   const menuCxt = useContext(MenuContext);
   const ref = useRef(null);
   useFocusGroupItem(ref);
-
   if (otherProps.subItems) {
-    return /*#__PURE__*/jsx(SubMenu, _objectSpread(_objectSpread({}, props), {}, {
-      closeMenu: menuCxt.closeMenu,
-      children: renderMenuItems(otherProps.subItems)
-    }));
+    return /* @__PURE__ */ React2.createElement(SubMenu, {
+      ...props2,
+      closeMenu: menuCxt.closeMenu
+    }, renderMenuItems(otherProps.subItems));
   }
-
-  const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);
-
-  const onClick = function () {
-    if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
-
+  const wrapperProps = useMemo(() => omit(otherProps, ["icon"]), [otherProps]);
+  const onClick = (...args) => {
+    if (wrapperProps.onClick)
+      wrapperProps.onClick(...args);
     if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
-      menuCxt.closeMenu(...arguments);
+      menuCxt.closeMenu(...args);
     }
   };
-
-  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
-    as: as,
+  return /* @__PURE__ */ React2.createElement(Wrapper, {
+    as,
     classProps: {
       disabled,
       disabledAddonInactive,
@@ -126,66 +78,50 @@ function MenuItem(props) {
       type: otherProps.type
     },
     id: otherProps.id,
-    innerRef: otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef,
-    onKeyDown: !fixedItem && runAll(e => {
-      if (e.key === ' ' || e.key === 'Enter') {
+    innerRef: otherProps.type !== "disabled" ? mergeRefs(innerRef, ref) : innerRef,
+    onKeyDown: !fixedItem && runAll((e) => {
+      if (e.key === " " || e.key === "Enter") {
         e.preventDefault();
-        e.target.dispatchEvent(new MouseEvent('click', {
+        e.target.dispatchEvent(new MouseEvent("click", {
           view: window,
           bubbles: true,
           cancelable: false
         }));
       }
     }, onKeyDown),
-    role: role,
-    style: style,
-    tabIndex: tabIndex
-  }, wrapperProps), {}, {
-    onClick: onClick,
-    children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx(Content, {
-      style: maxOption > 0 ? {
-        width: "".concat(calculateSize(maxOption), "px"),
-        maxWidth: "".concat(calculateSize(maxOption), "px")
-      } : undefined
-    }, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
-      value: label
-    })), customRenderer, rightAddon && renderAddons(rightAddon), children]
-  }));
-}
-
+    role,
+    style,
+    tabIndex,
+    ...wrapperProps,
+    onClick
+  }, !noAddon && renderAddons(leftAddon, fixedItem), label && /* @__PURE__ */ React2.createElement(Content, {
+    style: maxOption > 0 ? {
+      width: `${calculateSize(maxOption)}px`,
+      maxWidth: `${calculateSize(maxOption)}px`
+    } : void 0
+  }, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
+    value: label
+  })), customRenderer, rightAddon && renderAddons(rightAddon), children);
+};
 const props = {
-  /** Renders the MenuItem with a specific html element */
-  as: PropTypes.element.description('Renders the MenuItem with a specific html element'),
-
-  /**
-   * reference to the component
-   */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('reference to the component'),
-
-  /** Renders the passed element to the left */
-  leftAddon: PropTypes.element.description('Renders the passed element to the left'),
-
-  /** Renders the passed element to the right */
-  rightAddon: PropTypes.element.description('Renders the passed element to the right'),
-
-  /** Label for the menu item */
-  label: PropTypes.string.description('Label for the menu item'),
-
-  /** style object for menu item wrapper */
-  style: PropTypes.object.description('style object for menu item wrapper'),
-
-  /** disable menu item */
-  disabled: PropTypes.bool.description('disable menu item'),
-
-  /** HTML tabindex to manage focus order */
-  tabindex: PropTypes.number.description('HTML tabindex to manage focus order'),
-
-  /** a11y role */
-  role: PropTypes.string.description('a11y role')
+  as: PropTypes.element.description("Renders the MenuItem with a specific html element"),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("reference to the component"),
+  leftAddon: PropTypes.element.description("Renders the passed element to the left"),
+  rightAddon: PropTypes.element.description("Renders the passed element to the right"),
+  label: PropTypes.string.description("Label for the menu item"),
+  style: PropTypes.object.description("style object for menu item wrapper"),
+  disabled: PropTypes.bool.description("disable menu item"),
+  tabindex: PropTypes.number.description("HTML tabindex to manage focus order"),
+  role: PropTypes.string.description("a11y role")
 };
+MenuItem.propTypes = props;
+registerMenuItem("menuitem", MenuItem);
 const DSMenuItemWithSchema = describe(MenuItem);
 DSMenuItemWithSchema.propTypes = props;
-
-export { DSMenuItemWithSchema, MenuItem as default };
+var MenuItem_default = MenuItem;
+export {
+  DSMenuItemWithSchema,
+  MenuItem,
+  MenuItem_default as default
+};
+//# sourceMappingURL=MenuItem.js.map

package/esm/MenuItems/MenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/no-cycle */\nimport React, { useRef, useMemo, useContext } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs, runAll } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { MenuContext } from '../MenuContext';\nimport { registerMenuItem } from './menuItemFactory';\nimport { renderMenuItems } from './renderMenuItems';\n\nconst noop = () => null;\n\nconst blockName = 'menu-item';\n\nconst Content = aggregatedClasses('div')(blockName, 'content');\nconst Addon = aggregatedClasses('div')(blockName, 'addon', ({ empty, fixedItem }) => ({ empty, fixedItem }));\n\nconst renderAddon = (addon, fixedItem, addonId) => (\n  <Addon key={addonId} classProps={{ fixedItem }}>\n    {addon}\n  </Addon>\n);\n\nconst renderAddons = (addons, fixedItem) =>\n  Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);\n\nconst Wrapper = aggregatedClasses('li')(\n  blockName,\n  null,\n  ({ disabled, disabledAddonInactive, customRenderer, fixedItem, type }) => ({\n    disabled,\n    disabledAddonInactive,\n    customRenderer,\n    fixedItem,\n    [`menu-type-${type}`]: type,\n  }),\n);\nconst calculateSize = (length = 0) => {\n  if (length > 45) return 45 * 7;\n  return length * 7;\n};\n\nconst MenuItem = (props) => {\n  const {\n    innerRef,\n    as = 'li',\n    role = 'menuitem',\n    leftAddon = null,\n    rightAddon = undefined,\n    disabledAddonInactive = undefined,\n    label = undefined,\n    children,\n    tabIndex = -1,\n    onKeyDown = noop,\n    fixedItem = false,\n    noAddon,\n    disabled = false,\n    customRenderer,\n    maxOption,\n    closeMenu,\n    style,\n    ...otherProps\n  } = props;\n\n  const menuCxt = useContext(MenuContext);\n  const ref = useRef(null);\n  useFocusGroupItem(ref);\n  if (otherProps.subItems) {\n    return (\n      <SubMenu {...props} closeMenu={menuCxt.closeMenu}>\n        {renderMenuItems(otherProps.subItems)}\n      </SubMenu>\n    );\n  }\n\n  const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);\n\n  const onClick = (...args) => {\n    if (wrapperProps.onClick) wrapperProps.onClick(...args);\n    if (wrapperProps.closeOnClick && menuCxt.closeMenu) {\n      menuCxt.closeMenu(...args);\n    }\n  };\n\n  return (\n    <Wrapper\n      as={as}\n      classProps={{\n        disabled,\n        disabledAddonInactive,\n        customRenderer,\n        fixedItem,\n        type: otherProps.type,\n      }}\n      id={otherProps.id}\n      innerRef={otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef}\n      onKeyDown={\n        !fixedItem &&\n        runAll((e) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            e.target.dispatchEvent(\n              new MouseEvent('click', {\n                view: window,\n                bubbles: true,\n                cancelable: false,\n              }),\n            );\n          }\n        }, onKeyDown)\n      }\n      role={role}\n      style={style}\n      tabIndex={tabIndex}\n      {...wrapperProps}\n      onClick={onClick}\n    >\n      {!noAddon && renderAddons(leftAddon, fixedItem)}\n      {label && (\n        <Content\n          style={\n            maxOption > 0\n              ? {\n                  width: `${calculateSize(maxOption)}px`,\n                  maxWidth: `${calculateSize(maxOption)}px`,\n                }\n              : undefined\n          }\n        >\n          <DSTruncatedTooltipText value={label} />\n        </Content>\n      )}\n      {customRenderer}\n      {rightAddon && renderAddons(rightAddon)}\n      {children}\n    </Wrapper>\n  );\n};\n\nconst props = {\n  /** Renders the MenuItem with a specific html element */\n  as: PropTypes.element.description('Renders the MenuItem with a specific html element'),\n  /**\n   * reference to the component\n   */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n  /** Renders the passed element to the left */\n  leftAddon: PropTypes.element.description('Renders the passed element to the left'),\n  /** Renders the passed element to the right */\n  rightAddon: PropTypes.element.description('Renders the passed element to the right'),\n  /** Label for the menu item */\n  label: PropTypes.string.description('Label for the menu item'),\n  /** style object for menu item wrapper */\n  style: PropTypes.object.description('style object for menu item wrapper'),\n  /** disable menu item */\n  disabled: PropTypes.bool.description('disable menu item'),\n  /** HTML tabindex to manage focus order */\n  tabindex: PropTypes.number.description('HTML tabindex to manage focus order'),\n  /** a11y role */\n  role: PropTypes.string.description('a11y role'),\n};\n\nMenuItem.propTypes = props;\nregisterMenuItem('menuitem', MenuItem);\n\nconst DSMenuItemWithSchema = describe(MenuItem);\nDSMenuItemWithSchema.propTypes = props;\n\nexport { DSMenuItemWithSchema, MenuItem };\nexport default MenuItem;\n"],
+  "mappings": "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",
+  "names": []
+}