@elliemae/ds-menu 2.2.2-rc.1 → 2.3.0-alpha.10

package/dist/esm/MenuItems/SearchableGroup.js

@@ -0,0 +1,68 @@
+import * as React from "react";
+import React2, { useEffect, useMemo, useState, useRef, useContext } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { focusGroupManagerHoc } from "@elliemae/ds-shared/FocusGroup";
+import { DSSearchBox } from "@elliemae/ds-form/SearchBox";
+import { PropTypes, describe } from "react-desc";
+import { VirtualMenuList } from "../VirtualMenuList";
+import { MenuContext } from "../MenuContext";
+const SearchBoxWrapper = aggregatedClasses("div")("menu-search-group", "search-wrapper");
+const NoOptionsWrapper = aggregatedClasses("div")("menu-search-group", "no-options");
+const SearchableGroup = ({
+  children,
+  amountItemsInWindow = 5,
+  searchTerm: searchTermProp = "",
+  noOptionsText = "No options",
+  height,
+  width,
+  focusOnOpen = false
+}) => {
+  const searchRef = useRef(null);
+  const [searchTerm, setSearchTerm] = useState(searchTermProp);
+  useEffect(() => {
+    if (searchRef.current)
+      searchRef.current.focus();
+  }, []);
+  const { visible } = useContext(MenuContext) || {};
+  useEffect(() => {
+    if (focusOnOpen && visible) {
+      setTimeout(() => {
+        if (searchRef.current)
+          searchRef.current.focus();
+      }, 0);
+    }
+  }, [focusOnOpen, visible]);
+  const filteredChildren = useMemo(() => children.filter((child) => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(SearchBoxWrapper, null, /* @__PURE__ */ React2.createElement(DSSearchBox, {
+    innerRef: searchRef,
+    onSearch: ({ value }) => setSearchTerm(value),
+    searchOnEnter: false,
+    showIcon: false,
+    value: searchTerm
+  })), !filteredChildren.length && /* @__PURE__ */ React2.createElement(NoOptionsWrapper, null, noOptionsText), /* @__PURE__ */ React2.createElement(VirtualMenuList, {
+    amountItemsInWindow,
+    height,
+    items: filteredChildren,
+    width
+  }));
+};
+const props = {
+  amountItemsInWindow: PropTypes.number.description("The amount of items that are going to be rendered in the group"),
+  searchTerm: PropTypes.string.description("A search term"),
+  noOptionsText: PropTypes.string.description("Text to show when there's no options to show"),
+  children: PropTypes.array.description("array of children for search list"),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("height for virtual list wrapper"),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("width for virtual list wrapper"),
+  focusOnOpen: PropTypes.bool.description("weather to focus on searchable group on open")
+};
+SearchableGroup.propTypes = props;
+const DSMenuSearchableGroupWithSchema = describe(SearchableGroup);
+DSMenuSearchableGroupWithSchema.propTypes = props;
+const SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);
+var SearchableGroup_default = SearchableGroupHOC;
+export {
+  DSMenuSearchableGroupWithSchema,
+  SearchableGroupHOC as SearchableGroup,
+  SearchableGroup_default as default
+};
+//# sourceMappingURL=SearchableGroup.js.map

package/dist/esm/MenuItems/SearchableGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form/SearchBox';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,kBAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,kBAAkB,OACzC,qBACA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY,iBAAiB;AAAA,EAC7B,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,MACV;AACJ,QAAM,YAAY,OAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,YAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,WAAW,gBAAgB;AAE/C,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,QACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,4DACE,qCAAC,kBAAD,MACE,qCAAC,aAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,qCAAC,kBAAD,MAAmB,gBAErB,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,UAAU,OAAO,YACpC;AAAA,EAGF,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,UAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,UAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAChE;AAAA,EAGF,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,UAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,SAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,qBAAqB;AAGhD,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/esm/MenuItems/SearchableList.js

@@ -0,0 +1,85 @@
+import * as React from "react";
+import React2, { useCallback, useMemo, useState } from "react";
+import { PropTypes, describe } from "react-desc";
+import { uniqBy } from "@elliemae/ds-utilities";
+import { DSComboBox2 as DSComboBox } from "@elliemae/ds-form/ComboBox/v2/Combobox";
+const noop = () => {
+};
+const SearchableList = ({
+  onSelectMenuItem = noop,
+  components = {},
+  searchTerm: searchTermProp = "",
+  items = [],
+  dropdownFilterOptions = {},
+  returnValue,
+  extraListProps = {},
+  appendTermInList = false,
+  maxOptions = 10,
+  loading = false
+}) => {
+  const [searchTerm, setInputValue] = useState(searchTermProp);
+  const handleInputChange = useCallback((value, args) => {
+    const action = args ? args.action : null;
+    if (action === "input-blur" || action === "menu-close")
+      return;
+    setInputValue(value);
+  }, [searchTerm]);
+  const handleFilterByText = useCallback(() => {
+    if (searchTerm)
+      onSelectMenuItem(searchTerm);
+  }, [searchTerm]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "ArrowRight") {
+      handleFilterByText();
+    }
+  }, [searchTerm]);
+  const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([
+    {
+      id: searchTerm,
+      label: searchTerm
+    }
+  ].concat(items), (item) => item.label) : items, [searchTerm, appendTermInList]);
+  return /* @__PURE__ */ React2.createElement(DSComboBox, {
+    autoFocus: true,
+    components: { DropdownIndicator: null, ...components },
+    customMenuItemOptions: {
+      useTruncatedText: true
+    },
+    inlineMenu: true,
+    inputValue: searchTerm,
+    menuIsOpen: true,
+    onChange: onSelectMenuItem,
+    onFilterByInputText: handleFilterByText,
+    onInputChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    options,
+    returnValue,
+    valueProperty: "id",
+    maxOptions,
+    loading,
+    ...extraListProps,
+    ...dropdownFilterOptions
+  });
+};
+const props = {
+  onSelectMenuItem: PropTypes.func.description("callback after item gets selected"),
+  components: PropTypes.shape({}).description("Object with custom components for react-select"),
+  searchTerm: PropTypes.string.description("search term to filter for"),
+  items: PropTypes.array.description("item options"),
+  dropdownFilterOptions: PropTypes.shape({}).description("options"),
+  returnValue: PropTypes.bool.description("Whether the combo box is has value to return or not"),
+  extraListProps: PropTypes.shape({}).description("extra props to pass down to combo"),
+  appendTermInList: PropTypes.bool.description("append search term as item on the list"),
+  maxOptions: PropTypes.number.description("maxoptions for combobox"),
+  loading: PropTypes.bool.description("loading flag")
+};
+SearchableList.propTypes = props;
+const DSMenuSearchableListWithSchema = describe(SearchableList);
+DSMenuSearchableListWithSchema.propTypes = props;
+var SearchableList_default = SearchableList;
+export {
+  DSMenuSearchableListWithSchema,
+  SearchableList,
+  SearchableList_default as default
+};
+//# sourceMappingURL=SearchableList.js.map

package/dist/esm/MenuItems/SearchableList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { uniqBy } from '@elliemae/ds-utilities';\nimport { DSComboBox2 as DSComboBox } from '@elliemae/ds-form/ComboBox/v2/Combobox';\n\nconst noop = () => {};\n\nconst SearchableList = ({\n  onSelectMenuItem = noop,\n  components = {},\n  searchTerm: searchTermProp = '',\n  items = [],\n  dropdownFilterOptions = {},\n  returnValue,\n  extraListProps = {},\n  appendTermInList = false,\n  maxOptions = 10,\n  loading = false,\n}) => {\n  const [searchTerm, setInputValue] = useState(searchTermProp);\n\n  const handleInputChange = useCallback(\n    (value, args) => {\n      const action = args ? args.action : null;\n      if (action === 'input-blur' || action === 'menu-close') return;\n      setInputValue(value);\n    },\n    [searchTerm],\n  );\n\n  const handleFilterByText = useCallback(() => {\n    if (searchTerm) onSelectMenuItem(searchTerm);\n  }, [searchTerm]);\n\n  const handleKeyDown = useCallback(\n    (e) => {\n      if (e.key === 'ArrowRight') {\n        handleFilterByText();\n      }\n    },\n    [searchTerm],\n  );\n\n  const options = useMemo(\n    () =>\n      searchTerm && appendTermInList\n        ? uniqBy(\n            [\n              {\n                id: searchTerm,\n                label: searchTerm,\n              },\n            ].concat(items),\n            (item) => item.label,\n          )\n        : items,\n    [searchTerm, appendTermInList],\n  );\n\n  return (\n    <DSComboBox\n      autoFocus\n      components={{ DropdownIndicator: null, ...components }}\n      customMenuItemOptions={{\n        useTruncatedText: true,\n      }}\n      inlineMenu\n      inputValue={searchTerm}\n      menuIsOpen\n      onChange={onSelectMenuItem}\n      onFilterByInputText={handleFilterByText}\n      onInputChange={handleInputChange}\n      onKeyDown={handleKeyDown}\n      options={options}\n      returnValue={returnValue}\n      valueProperty=\"id\"\n      maxOptions={maxOptions}\n      loading={loading}\n      {...extraListProps}\n      {...dropdownFilterOptions}\n    />\n  );\n};\n\nconst props = {\n  /** callback after item gets selected */\n  onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),\n  /** Object with custom components for react-select */\n  components: PropTypes.shape({}).description('Object with custom components for react-select'),\n  /** search term to filter for */\n  searchTerm: PropTypes.string.description('search term to filter for'),\n  /** item options */\n  items: PropTypes.array.description('item options'),\n  /** options */\n  dropdownFilterOptions: PropTypes.shape({}).description('options'),\n  /** Whether the combo box is has value to return or not */\n  returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),\n  /** extra props to pass down to combo */\n  extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),\n  /** append search term as item on the list */\n  appendTermInList: PropTypes.bool.description('append search term as item on the list'),\n  /** maxoptions for combobox */\n  maxOptions: PropTypes.number.description('maxoptions for combobox'),\n  /**  loading flag */\n  loading: PropTypes.bool.description('loading flag'),\n};\n\nSearchableList.propTypes = props;\n\nconst DSMenuSearchableListWithSchema = describe(SearchableList);\n\nDSMenuSearchableListWithSchema.propTypes = props;\n\nexport { DSMenuSearchableListWithSchema, SearchableList };\nexport default SearchableList;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,wBAAwB;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,UAAU;AAAA,MACN;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,QAAM,oBAAoB,YACxB,CAAC,OAAO,SAAS;AACf,UAAM,SAAS,OAAO,KAAK,SAAS;AACpC,QAAI,WAAW,gBAAgB,WAAW;AAAc;AACxD,kBAAc;AAAA,KAEhB,CAAC;AAGH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI;AAAY,uBAAiB;AAAA,KAChC,CAAC;AAEJ,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,EAAE,QAAQ,cAAc;AAC1B;AAAA;AAAA,KAGJ,CAAC;AAGH,QAAM,UAAU,QACd,MACE,cAAc,mBACV,OACE;AAAA,IACE;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA;AAAA,IAET,OAAO,QACT,CAAC,SAAS,KAAK,SAEjB,OACN,CAAC,YAAY;AAGf,SACE,qCAAC,YAAD;AAAA,IACE,WAAS;AAAA,IACT,YAAY,EAAE,mBAAmB,SAAS;AAAA,IAC1C,uBAAuB;AAAA,MACrB,kBAAkB;AAAA;AAAA,IAEpB,YAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAU;AAAA,IACV,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAc;AAAA,IACd;AAAA,IACA;AAAA,OACI;AAAA,OACA;AAAA;AAAA;AAKV,MAAM,QAAQ;AAAA,EAEZ,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,MAAM,IAAI,YAAY;AAAA,EAE5C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,uBAAuB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEvD,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEhD,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,eAAe,YAAY;AAE3B,MAAM,iCAAiC,SAAS;AAEhD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/esm/MenuItems/SelectionGroup.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { PropTypes, describe } from "react-desc";
+import { useCheckableGroup } from "@elliemae/ds-shared/CheckableGroup";
+import { SearchableGroup } from "./SearchableGroup";
+import { registerMenuItem, menuItemFactory } from "./menuItemFactory";
+import { VirtualMenuList } from "../VirtualMenuList";
+const noop = () => null;
+const SelectionGroup = ({
+  multi = false,
+  searchable = false,
+  focusOnOpen = false,
+  onSelect = noop,
+  children,
+  items = void 0,
+  active = multi ? [] : "",
+  width,
+  height,
+  maxOptions = 5
+}) => {
+  const renderedItems = useMemo(() => items && items.map((item) => {
+    const Component = menuItemFactory(multi ? "checkbox" : "radio");
+    return /* @__PURE__ */ React2.createElement(Component, {
+      ...item,
+      key: item.name || item.id || item.key,
+      item,
+      name: item.id || item.name
+    });
+  }), [items]);
+  const decoratedGroupChildren = useCheckableGroup({
+    children: renderedItems || children,
+    multi,
+    active,
+    onCheck: onSelect
+  });
+  if (searchable) {
+    return /* @__PURE__ */ React2.createElement(SearchableGroup, {
+      focusOnOpen,
+      height,
+      items,
+      width
+    }, decoratedGroupChildren);
+  }
+  return /* @__PURE__ */ React2.createElement(VirtualMenuList, {
+    height,
+    items: decoratedGroupChildren,
+    width,
+    amountItemsInWindow: maxOptions
+  });
+};
+const props = {
+  multi: PropTypes.bool.description("toggle on multi select"),
+  searchable: PropTypes.bool.description("toggle on searchable behavior"),
+  focusOnOpen: PropTypes.bool.description("toggle to focus component on open"),
+  onSelect: PropTypes.func.description("callback that triggers when select happens"),
+  children: PropTypes.node.description(""),
+  items: PropTypes.array.description("selection group items"),
+  active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description("array of values for multi and string for single selection"),
+  width: PropTypes.number.description("selection group width"),
+  height: PropTypes.number.description("selection group height")
+};
+SelectionGroup.propTypes = props;
+registerMenuItem("selectiongroup", SelectionGroup);
+registerMenuItem("SelectionGroup", SelectionGroup);
+const DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
+DSMenuSelectionGroupWithSchema.propTypes = props;
+var SelectionGroup_default = SelectionGroup;
+export {
+  DSMenuSelectionGroupWithSchema,
+  SelectionGroup,
+  SelectionGroup_default as default
+};
+//# sourceMappingURL=SelectionGroup.js.map

package/dist/esm/MenuItems/SelectionGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SelectionGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\nimport { SearchableGroup } from './SearchableGroup';\nimport { registerMenuItem, menuItemFactory } from './menuItemFactory';\nimport { VirtualMenuList } from '../VirtualMenuList';\n\nconst noop = () => null;\n\nconst SelectionGroup = ({\n  multi = false,\n  searchable = false,\n  focusOnOpen = false,\n  onSelect = noop,\n  children,\n  items = undefined,\n  active = multi ? [] : '',\n  width,\n  height,\n  maxOptions = 5,\n}) => {\n  const renderedItems = useMemo(\n    () =>\n      items &&\n      items.map((item) => {\n        const Component = menuItemFactory(multi ? 'checkbox' : 'radio');\n        return <Component {...item} key={item.name || item.id || item.key} item={item} name={item.id || item.name} />;\n      }),\n    [items],\n  );\n  const decoratedGroupChildren = useCheckableGroup({\n    children: renderedItems || children,\n    multi,\n    active,\n    onCheck: onSelect,\n  });\n\n  if (searchable) {\n    return (\n      <SearchableGroup focusOnOpen={focusOnOpen} height={height} items={items} width={width}>\n        {decoratedGroupChildren}\n      </SearchableGroup>\n    );\n  }\n  return (\n    <VirtualMenuList height={height} items={decoratedGroupChildren} width={width} amountItemsInWindow={maxOptions} />\n  );\n};\n\nconst props = {\n  /** toggle on multi select */\n  multi: PropTypes.bool.description('toggle on multi select'),\n  /** toggle on searchable behavior */\n  searchable: PropTypes.bool.description('toggle on searchable behavior'),\n  /** toggle to focus component on open */\n  focusOnOpen: PropTypes.bool.description('toggle to focus component on open'),\n  /** callback that triggers when select happens */\n  onSelect: PropTypes.func.description('callback that triggers when select happens'),\n  children: PropTypes.node.description(''),\n  /** selection group items  */\n  items: PropTypes.array.description('selection group items'),\n  /** array of values for multi and string for single selection */\n  active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description(\n    'array of values for multi and string for single selection',\n  ),\n  /** selection group width */\n  width: PropTypes.number.description('selection group width'),\n  /** selection group height */\n  height: PropTypes.number.description('selection group height'),\n};\n\nSelectionGroup.propTypes = props;\nregisterMenuItem('selectiongroup', SelectionGroup);\nregisterMenuItem('SelectionGroup', SelectionGroup);\n\nconst DSMenuSelectionGroupWithSchema = describe(SelectionGroup);\nDSMenuSelectionGroupWithSchema.propTypes = props;\n\nexport { DSMenuSelectionGroupWithSchema, SelectionGroup };\nexport default SelectionGroup;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR,SAAS,QAAQ,KAAK;AAAA,EACtB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,MACT;AACJ,QAAM,gBAAgB,QACpB,MACE,SACA,MAAM,IAAI,CAAC,SAAS;AAClB,UAAM,YAAY,gBAAgB,QAAQ,aAAa;AACvD,WAAO,qCAAC,WAAD;AAAA,SAAe;AAAA,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK;AAAA,MAAK;AAAA,MAAY,MAAM,KAAK,MAAM,KAAK;AAAA;AAAA,MAEzG,CAAC;AAEH,QAAM,yBAAyB,kBAAkB;AAAA,IAC/C,UAAU,iBAAiB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,SAAS;AAAA;AAGX,MAAI,YAAY;AACd,WACE,qCAAC,iBAAD;AAAA,MAAiB;AAAA,MAA0B;AAAA,MAAgB;AAAA,MAAc;AAAA,OACtE;AAAA;AAIP,SACE,qCAAC,iBAAD;AAAA,IAAiB;AAAA,IAAgB,OAAO;AAAA,IAAwB;AAAA,IAAc,qBAAqB;AAAA;AAAA;AAIvG,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,YAC/D;AAAA,EAGF,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,QAAQ,UAAU,OAAO,YAAY;AAAA;AAGvC,eAAe,YAAY;AAC3B,iBAAiB,kBAAkB;AACnC,iBAAiB,kBAAkB;AAEnC,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/esm/MenuItems/Separator.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2 from "react";
+import { describe, PropTypes } from "react-desc";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { DSSeparator } from "@elliemae/ds-separator";
+import styled from "styled-components";
+import { registerMenuItem } from "./menuItemFactory";
+const blockName = "menu-separator";
+const Li = styled.li`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+`;
+const Title = aggregatedClasses("h5")(blockName, "title");
+const MenuSeparator = ({ title, showSeparator = true }) => /* @__PURE__ */ React2.createElement(Li, null, showSeparator && /* @__PURE__ */ React2.createElement(DSSeparator, null), title && /* @__PURE__ */ React2.createElement(Title, null, title));
+const props = {
+  title: PropTypes.string.description("menu separator h5 title"),
+  showSeparator: PropTypes.bool.description("toggle separator on and off")
+};
+MenuSeparator.propTypes = props;
+registerMenuItem("separator", MenuSeparator);
+const DSMenuSeparatorWithSchema = describe(MenuSeparator);
+DSMenuSeparatorWithSchema.propTypes = props;
+var Separator_default = MenuSeparator;
+export {
+  DSMenuSeparatorWithSchema,
+  MenuSeparator,
+  Separator_default as default
+};
+//# sourceMappingURL=Separator.js.map

package/dist/esm/MenuItems/Separator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/Separator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport styled from 'styled-components';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst blockName = 'menu-separator';\nconst Li = styled.li`\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n`;\n\nconst Title = aggregatedClasses('h5')(blockName, 'title');\nconst MenuSeparator = ({ title, showSeparator = true }) => (\n  <Li>\n    {showSeparator && <DSSeparator />}\n    {title && <Title>{title}</Title>}\n  </Li>\n);\n\nconst props = {\n  /** menu separator h5 title */\n  title: PropTypes.string.description('menu separator h5 title'),\n  /** toggle separator on and off */\n  showSeparator: PropTypes.bool.description('toggle separator on and off'),\n};\n\nMenuSeparator.propTypes = props;\nregisterMenuItem('separator', MenuSeparator);\n\nconst DSMenuSeparatorWithSchema = describe(MenuSeparator);\nDSMenuSeparatorWithSchema.propTypes = props;\n\nexport { DSMenuSeparatorWithSchema, MenuSeparator };\nexport default MenuSeparator;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,QAAQ,kBAAkB,MAAM,WAAW;AACjD,MAAM,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,WAC9C,qCAAC,IAAD,MACG,iBAAiB,qCAAC,aAAD,OACjB,SAAS,qCAAC,OAAD,MAAQ;AAItB,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,eAAe,UAAU,KAAK,YAAY;AAAA;AAG5C,cAAc,YAAY;AAC1B,iBAAiB,aAAa;AAE9B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
+  "names": []
+}

package/dist/esm/MenuItems/SubMenu.js

@@ -0,0 +1,158 @@
+import * as React from "react";
+import React2, { useCallback, useRef, useState } from "react";
+import { PropTypes, describe } from "react-desc";
+import styled from "styled-components";
+import { ChevronSmallRight, MoreOptionsVert } from "@elliemae/ds-icons";
+import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup";
+import { useHiddenController } from "@elliemae/ds-hidden";
+import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
+import { DSPopper, interactions } from "@elliemae/ds-popper";
+import { Menu, setSubMenu } from "../Menu";
+import { MenuItem } from "./MenuItem";
+import { registerMenuItem } from "./menuItemFactory";
+const ChevronRightComp = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px; // same width as the ellipsis button
+`;
+const SubMenu = ({
+  noAddon,
+  leftAddon = void 0,
+  label = void 0,
+  interactionType = "hover",
+  children: subitems,
+  rightAddonType,
+  disabledAddonInactive,
+  checkableProps = {},
+  customRenderer,
+  onClick,
+  closeMenu,
+  id
+}) => {
+  const itemRef = useRef(null);
+  const focusOnOpen = useRef(false);
+  const [isAddonHovered, setIsAddonHovered] = useState(false);
+  const {
+    visible = false,
+    onShow,
+    onHide
+  } = useHiddenController(void 0, {
+    interaction: "click"
+  });
+  const interaction = rightAddonType === "elipsis" ? "click" : "hover";
+  const { focusItemByNode } = useFocusGroupItem();
+  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 = useCallback(() => {
+    setIsAddonHovered(true);
+  }, []);
+  const handleOnMouseLeave = useCallback(() => {
+    setIsAddonHovered(false);
+  }, []);
+  const hoverHandlers = interaction === "hover" ? {
+    onMouseEnter: handleShowWithMouseHover,
+    onMouseLeave: () => {
+      onHide();
+      setIsAddonHovered(false);
+    }
+  } : { onClick: handleShowWithMouse };
+  const rightAddon = rightAddonType === "elipsis" ? /* @__PURE__ */ React2.createElement(DSButton, {
+    "aria-label": "vertical-elipsis",
+    "data-testid": "vertical-elipsis",
+    buttonType: "text",
+    leftIcon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
+      className: "submenu-arrow",
+      color: visible || isAddonHovered ? ["brand-primary", 800] : ["neutral", 500],
+      size: "s"
+    }),
+    onClick: (e) => handleShowSubItemsWithMouse(e),
+    size: "m",
+    variant: BUTTON_VARIANT.DEFAULT
+  }) : /* @__PURE__ */ React2.createElement(ChevronRightComp, null, /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
+    "data-testid": "chevron-right",
+    className: "submenu-arrow",
+    color: visible || isAddonHovered ? ["brand-primary", 800] : ["neutral", 500],
+    size: "sm"
+  }));
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSPopper, {
+    contentComponent: /* @__PURE__ */ React2.createElement(Menu, {
+      focusKeyBindings: {
+        ArrowLeft: [() => focusItemByNode(itemRef.current), "exit"]
+      },
+      focusOnOpen: focusOnOpen.current,
+      onExitFocusGroup: onHide,
+      ...hoverHandlers,
+      closeMenu,
+      visible
+    }, subitems),
+    interactionType,
+    isOpen: visible,
+    onOpen: (opening) => opening ? onShow() : onHide(),
+    placement: "right-start",
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ React2.createElement(MenuItem, {
+      customRenderer,
+      disabledAddonInactive,
+      id,
+      innerRef: itemRef,
+      label,
+      leftAddon,
+      noAddon,
+      onFocus: handleOnMouseEnter,
+      onBlur: handleOnMouseLeave,
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      ...hoverHandlers,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowRight" || e.key === "Enter" || e.keyCode === 32) {
+          handleShowWithKeyboard();
+        }
+      },
+      rightAddon,
+      ...checkableProps
+    })
+  }));
+};
+const props = {
+  noAddon: PropTypes.bool.description("dont show addon for submenu"),
+  leftAddon: PropTypes.node.description("left addon"),
+  label: PropTypes.string.description("submenu label"),
+  interactionType: PropTypes.oneOf(interactions).description("A type indicating how to open/close the tooltip"),
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description("sub menu items"),
+  rightAddonType: PropTypes.oneOf(["ellipsis"]).description("right addon, ellipsis or undefined"),
+  disabledAddonInactive: PropTypes.bool.description(""),
+  checkableProps: PropTypes.object.description("props passed to MenuItem component"),
+  customRenderer: PropTypes.func.description("custom renderer for menu item"),
+  onClick: PropTypes.func.description("on click handler"),
+  closeMenu: PropTypes.any.description(""),
+  id: PropTypes.string.description("component id")
+};
+SubMenu.propTypes = props;
+registerMenuItem("submenu", SubMenu);
+setSubMenu(SubMenu);
+const DSSubMenuWithSchema = describe(SubMenu);
+DSSubMenuWithSchema.propTypes = props;
+var SubMenu_default = SubMenu;
+export {
+  DSSubMenuWithSchema,
+  SubMenu,
+  SubMenu_default as default
+};
+//# sourceMappingURL=SubMenu.js.map

package/dist/esm/MenuItems/SubMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SubMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport React, { useCallback, useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { ChevronSmallRight, MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';\nimport { useHiddenController } from '@elliemae/ds-hidden';\nimport { DSButton, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DSPopper, interactions } from '@elliemae/ds-popper';\nimport { Menu, setSubMenu } from '../Menu';\nimport { MenuItem } from './MenuItem';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst ChevronRightComp = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 28px; // same width as the ellipsis button\n`;\n\nconst SubMenu = ({\n  noAddon,\n  leftAddon = undefined,\n  label = undefined,\n  interactionType = 'hover',\n  children: subitems,\n  rightAddonType,\n  disabledAddonInactive,\n  checkableProps = {},\n  customRenderer,\n  onClick,\n  closeMenu,\n  id,\n}) => {\n  const itemRef = useRef(null);\n  const focusOnOpen = useRef(false);\n  const [isAddonHovered, setIsAddonHovered] = useState<boolean>(false);\n  const {\n    visible = false,\n    onShow,\n    onHide,\n  } = useHiddenController(undefined, {\n    interaction: 'click',\n  });\n\n  const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';\n\n  const { focusItemByNode } = useFocusGroupItem();\n  // todo: create a menu state to handle all related menu things\n  const handleShowSubItemsWithMouse = (e) => {\n    e.stopPropagation();\n    onShow();\n    focusOnOpen.current = true;\n  };\n  const handleShowWithMouse = (e) => {\n    if (onClick) onClick(e);\n  };\n  const handleShowWithMouseHover = () => {\n    setIsAddonHovered(true);\n    onShow();\n    focusOnOpen.current = false;\n  };\n\n  const handleShowWithKeyboard = () => {\n    onShow();\n    focusOnOpen.current = true;\n  };\n\n  const handleOnMouseEnter = useCallback(() => {\n    setIsAddonHovered(true);\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    setIsAddonHovered(false);\n  }, []);\n\n  const hoverHandlers =\n    interaction === 'hover'\n      ? {\n          onMouseEnter: handleShowWithMouseHover,\n          onMouseLeave: () => {\n            onHide();\n            setIsAddonHovered(false);\n          },\n        }\n      : { onClick: handleShowWithMouse };\n\n  const rightAddon =\n    rightAddonType === 'elipsis' ? (\n      <DSButton\n        aria-label=\"vertical-elipsis\"\n        data-testid=\"vertical-elipsis\"\n        buttonType=\"text\"\n        leftIcon={\n          <MoreOptionsVert\n            className=\"submenu-arrow\"\n            color={visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500]}\n            size=\"s\"\n          />\n        }\n        onClick={(e) => handleShowSubItemsWithMouse(e)}\n        size=\"m\"\n        variant={BUTTON_VARIANT.DEFAULT}\n      />\n    ) : (\n      <ChevronRightComp>\n        <ChevronSmallRight\n          data-testid=\"chevron-right\"\n          className=\"submenu-arrow\"\n          color={visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500]}\n          size=\"sm\"\n        />\n      </ChevronRightComp>\n    );\n\n  return (\n    <>\n      <DSPopper\n        contentComponent={\n          <Menu\n            focusKeyBindings={{\n              ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit'],\n            }}\n            focusOnOpen={focusOnOpen.current}\n            onExitFocusGroup={onHide}\n            {...hoverHandlers}\n            closeMenu={closeMenu}\n            visible={visible}\n          >\n            {subitems}\n          </Menu>\n        }\n        interactionType={interactionType}\n        isOpen={visible}\n        onOpen={(opening) => (opening ? onShow() : onHide())}\n        placement=\"right-start\"\n        showArrow={false}\n        triggerComponent={\n          <MenuItem\n            customRenderer={customRenderer}\n            disabledAddonInactive={disabledAddonInactive}\n            id={id}\n            innerRef={itemRef}\n            label={label}\n            leftAddon={leftAddon}\n            noAddon={noAddon}\n            onFocus={handleOnMouseEnter}\n            onBlur={handleOnMouseLeave}\n            onMouseEnter={handleOnMouseEnter}\n            onMouseLeave={handleOnMouseLeave}\n            {...hoverHandlers}\n            onKeyDown={(e) => {\n              if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {\n                handleShowWithKeyboard();\n              }\n            }}\n            rightAddon={rightAddon}\n            {...checkableProps}\n          />\n        }\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** dont show addon for submenu */\n  noAddon: PropTypes.bool.description('dont show addon for submenu'),\n  /** left addon */\n  leftAddon: PropTypes.node.description('left addon'),\n  /** submenu label */\n  label: PropTypes.string.description('submenu label'),\n  /** A type indicating how to open/close the tooltip */\n  interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip'),\n  /** sub menu items */\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description('sub menu items'),\n  /** right addon, ellipsis or undefined */\n  rightAddonType: PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),\n  disabledAddonInactive: PropTypes.bool.description(''),\n  /** props passed to MenuItem component */\n  checkableProps: PropTypes.object.description('props passed to MenuItem component'),\n  /** custom renderer for menu item */\n  customRenderer: PropTypes.func.description('custom renderer for menu item'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  closeMenu: PropTypes.any.description(''),\n  /** component id */\n  id: PropTypes.string.description('component id'),\n};\n\nSubMenu.propTypes = props;\nregisterMenuItem('submenu', SubMenu);\nsetSubMenu(SubMenu);\nconst DSSubMenuWithSchema = describe(SubMenu);\n\nDSSubMenuWithSchema.propTypes = props;\n\nexport { DSSubMenuWithSchema, SubMenu };\nexport default SubMenu;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/MenuItems/menuItemFactory.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const itemTypes = {};
+const menuItemFactory = (type = "", items, defaultItem = itemTypes.menuitem) => {
+  const itemsObject = items || itemTypes;
+  return itemsObject[type] || itemsObject[type.toLowerCase()] || defaultItem;
+};
+const registerMenuItem = (type, item) => itemTypes[type] = item;
+export {
+  menuItemFactory,
+  registerMenuItem
+};
+//# sourceMappingURL=menuItemFactory.js.map

package/dist/esm/MenuItems/menuItemFactory.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/menuItemFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst itemTypes = {};\n\nexport const menuItemFactory = (type = '', items, defaultItem = itemTypes.menuitem) => {\n  const itemsObject = items || itemTypes;\n  return itemsObject[type] || itemsObject[type.toLowerCase()] || defaultItem;\n};\n\nexport const registerMenuItem = (type, item) => (itemTypes[type] = item);\n"],
+  "mappings": "AAAA;ACEA,MAAM,YAAY;AAEX,MAAM,kBAAkB,CAAC,OAAO,IAAI,OAAO,cAAc,UAAU,aAAa;AACrF,QAAM,cAAc,SAAS;AAC7B,SAAO,YAAY,SAAS,YAAY,KAAK,kBAAkB;AAAA;AAG1D,MAAM,mBAAmB,CAAC,MAAM,SAAU,UAAU,QAAQ;",
+  "names": []
+}

package/dist/esm/MenuItems/renderMenuItems.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import React2 from "react";
+import { isFunction } from "@elliemae/ds-utilities";
+import { menuItemFactory } from "./menuItemFactory";
+const renderMenuItems = (options, factory = menuItemFactory) => options.map((option, index) => {
+  if (isFunction(option.renderer)) {
+    return option.renderer({
+      key: option.id,
+      item: option
+    });
+  }
+  const ItemComponent = factory(option.type);
+  const children = option.subItems && renderMenuItems(option.subItems, factory);
+  return /* @__PURE__ */ React2.createElement(ItemComponent, {
+    ...option,
+    key: option.id || index,
+    item: option,
+    onClick: null,
+    onMouseDown: option.onClick
+  }, children);
+});
+export {
+  renderMenuItems
+};
+//# sourceMappingURL=renderMenuItems.js.map

package/dist/esm/MenuItems/renderMenuItems.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/renderMenuItems.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { menuItemFactory } from './menuItemFactory';\n\nexport const renderMenuItems = (options, factory = menuItemFactory) =>\n  options.map((option, index) => {\n    if (isFunction(option.renderer)) {\n      return option.renderer({\n        key: option.id,\n        item: option,\n      });\n    }\n    const ItemComponent = factory(option.type);\n    const children = option.subItems && renderMenuItems(option.subItems, factory);\n    return (\n      <ItemComponent\n        {...option}\n        key={option.id || index}\n        item={option}\n        onClick={null}\n        onMouseDown={option.onClick}\n        // onClick callback called in onMouseDown due to events order issue\n      >\n        {children}\n      </ItemComponent>\n    );\n  });\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,kBAAkB,CAAC,SAAS,UAAU,oBACjD,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC7B,MAAI,WAAW,OAAO,WAAW;AAC/B,WAAO,OAAO,SAAS;AAAA,MACrB,KAAK,OAAO;AAAA,MACZ,MAAM;AAAA;AAAA;AAGV,QAAM,gBAAgB,QAAQ,OAAO;AACrC,QAAM,WAAW,OAAO,YAAY,gBAAgB,OAAO,UAAU;AACrE,SACE,qCAAC,eAAD;AAAA,OACM;AAAA,IACJ,KAAK,OAAO,MAAM;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,aAAa,OAAO;AAAA,KAGnB;AAAA;",
+  "names": []
+}

package/dist/esm/VirtualMenuList.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import React2 from "react";
+import { FixedSizeList as List } from "react-window";
+import { useHeightByAmountOfItems } from "./utils/useHeightByAmountOfItems";
+const MenuItem = ({ data, index, style }) => /* @__PURE__ */ React2.createElement("div", {
+  key: index,
+  style
+}, data && data[index] ? data[index] : "");
+function resolveComputation(items, cb, timeout = 1e3) {
+  return () => new Promise((resolve) => {
+    const doResolve = (result2) => {
+      cb(result2);
+      resolve(result2);
+    };
+    let result = 0;
+    const timer = setTimeout(() => doResolve(result), timeout);
+    items.forEach((option) => {
+      result = option.props.label.length > result ? option.props.label.length : result;
+    });
+    clearTimeout(timer);
+    doResolve(result);
+  });
+}
+function VirtualMenuList({
+  items,
+  itemHeight = 32,
+  amountItemsInWindow = 5,
+  width,
+  height
+}) {
+  const computedListHeight = useHeightByAmountOfItems({
+    amountItems: amountItemsInWindow,
+    itemHeight,
+    items
+  });
+  return /* @__PURE__ */ React2.createElement(List, {
+    height: height || computedListHeight,
+    itemCount: items.length,
+    itemData: items,
+    itemSize: itemHeight,
+    width
+  }, MenuItem);
+}
+var VirtualMenuList_default = VirtualMenuList;
+export {
+  VirtualMenuList,
+  VirtualMenuList_default as default
+};
+//# sourceMappingURL=VirtualMenuList.js.map

package/dist/esm/VirtualMenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/VirtualMenuList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FixedSizeList as List } from 'react-window';\nimport { useHeightByAmountOfItems } from './utils/useHeightByAmountOfItems';\n\nconst MenuItem = ({ data, index, style }) => (\n  <div key={index} style={style}>\n    {data && data[index] ? data[index] : ''}\n  </div>\n);\n\n// eslint-disable-next-line no-unused-vars\nfunction resolveComputation(items, cb, timeout = 1000) {\n  return () =>\n    new Promise(resolve => {\n      const doResolve = result => {\n        cb(result);\n        resolve(result);\n      };\n      let result = 0;\n      const timer = setTimeout(() => doResolve(result), timeout);\n      items.forEach(option => {\n        result =\n          option.props.label.length > result\n            ? option.props.label.length\n            : result;\n      });\n\n      clearTimeout(timer);\n      doResolve(result);\n    });\n}\n\nfunction VirtualMenuList({\n  items,\n  itemHeight = 32,\n  amountItemsInWindow = 5,\n  width,\n  height,\n}) {\n  const computedListHeight = useHeightByAmountOfItems({\n    amountItems: amountItemsInWindow,\n    itemHeight,\n    items,\n  });\n\n  return (\n    <List\n      height={height || computedListHeight}\n      itemCount={items.length}\n      itemData={items}\n      itemSize={itemHeight}\n      width={width}\n    >\n      {MenuItem}\n    </List>\n  );\n}\n\nexport { VirtualMenuList };\nexport default VirtualMenuList;"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,YAC/B,qCAAC,OAAD;AAAA,EAAK,KAAK;AAAA,EAAO;AAAA,GACd,QAAQ,KAAK,SAAS,KAAK,SAAS;AAKzC,4BAA4B,OAAO,IAAI,UAAU,KAAM;AACrD,SAAO,MACL,IAAI,QAAQ,aAAW;AACrB,UAAM,YAAY,aAAU;AAC1B,SAAG;AACH,cAAQ;AAAA;AAEV,QAAI,SAAS;AACb,UAAM,QAAQ,WAAW,MAAM,UAAU,SAAS;AAClD,UAAM,QAAQ,YAAU;AACtB,eACE,OAAO,MAAM,MAAM,SAAS,SACxB,OAAO,MAAM,MAAM,SACnB;AAAA;AAGR,iBAAa;AACb,cAAU;AAAA;AAAA;AAIhB,yBAAyB;AAAA,EACvB;AAAA,EACA,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,GACC;AACD,QAAM,qBAAqB,yBAAyB;AAAA,IAClD,aAAa;AAAA,IACb;AAAA,IACA;AAAA;AAGF,SACE,qCAAC,MAAD;AAAA,IACE,QAAQ,UAAU;AAAA,IAClB,WAAW,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAMP,IAAO,0BAAQ;",
+  "names": []
+}