@elliemae/ds-menu 2.2.0-alpha.4 → 3.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/cjs/Menu.js +181 -137
  2. package/cjs/MenuCombobox.js +53 -67
  3. package/cjs/MenuContext.js +11 -38
  4. package/cjs/MenuItems/CheckboxGroup.js +42 -49
  5. package/cjs/MenuItems/MenuItem.js +163 -116
  6. package/cjs/MenuItems/MenuItemCheckable.js +108 -77
  7. package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
  8. package/cjs/MenuItems/MenuItemRadio.js +38 -50
  9. package/cjs/MenuItems/RadioGroup.js +39 -48
  10. package/cjs/MenuItems/SearchableGroup.js +92 -88
  11. package/cjs/MenuItems/SearchableList.js +95 -92
  12. package/cjs/MenuItems/SelectionGroup.js +90 -85
  13. package/cjs/MenuItems/Separator.js +40 -55
  14. package/cjs/MenuItems/SubMenu.js +160 -143
  15. package/cjs/MenuItems/menuItemFactory.js +68 -38
  16. package/cjs/VirtualMenuList.js +39 -69
  17. package/cjs/index.js +36 -63
  18. package/cjs/utils/useHeightByAmountOfItems.js +14 -43
  19. package/esm/Menu.js +149 -91
  20. package/esm/MenuCombobox.js +45 -38
  21. package/esm/MenuContext.js +5 -9
  22. package/esm/MenuItems/CheckboxGroup.js +31 -19
  23. package/esm/MenuItems/MenuItem.js +148 -84
  24. package/esm/MenuItems/MenuItemCheckable.js +96 -47
  25. package/esm/MenuItems/MenuItemCheckbox.js +33 -18
  26. package/esm/MenuItems/MenuItemRadio.js +28 -20
  27. package/esm/MenuItems/RadioGroup.js +28 -18
  28. package/esm/MenuItems/SearchableGroup.js +76 -53
  29. package/esm/MenuItems/SearchableList.js +82 -59
  30. package/esm/MenuItems/SelectionGroup.js +78 -54
  31. package/esm/MenuItems/Separator.js +29 -26
  32. package/esm/MenuItems/SubMenu.js +140 -107
  33. package/esm/MenuItems/menuItemFactory.js +60 -10
  34. package/esm/VirtualMenuList.js +32 -39
  35. package/esm/index.js +13 -34
  36. package/esm/utils/useHeightByAmountOfItems.js +11 -13
  37. package/package.json +11 -19
  38. package/types/Menu.d.ts +2 -3
  39. package/types/MenuContext.d.ts +2 -3
  40. package/types/MenuItems/CheckboxGroup.d.ts +5 -5
  41. package/types/MenuItems/MenuItem.d.ts +5 -5
  42. package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
  43. package/types/MenuItems/MenuItemCheckbox.d.ts +2 -3
  44. package/types/MenuItems/MenuItemRadio.d.ts +5 -5
  45. package/types/MenuItems/RadioGroup.d.ts +5 -5
  46. package/types/MenuItems/SearchableGroup.d.ts +3 -3
  47. package/types/MenuItems/SearchableList.d.ts +16 -16
  48. package/types/MenuItems/SelectionGroup.d.ts +16 -16
  49. package/types/MenuItems/Separator.d.ts +1 -2
  50. package/types/MenuItems/SubMenu.d.ts +18 -18
  51. package/types/MenuItems/menuItemFactory.d.ts +3 -2
  52. package/types/VirtualMenuList.d.ts +1 -3
  53. package/types/index.d.ts +2 -3
  54. package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
  55. package/cjs/Menu.js.map +0 -7
  56. package/cjs/MenuCombobox.js.map +0 -7
  57. package/cjs/MenuContext.js.map +0 -7
  58. package/cjs/MenuExports.js +0 -28
  59. package/cjs/MenuExports.js.map +0 -7
  60. package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
  61. package/cjs/MenuItems/MenuItem.js.map +0 -7
  62. package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
  63. package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
  64. package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
  65. package/cjs/MenuItems/RadioGroup.js.map +0 -7
  66. package/cjs/MenuItems/SearchableGroup.js.map +0 -7
  67. package/cjs/MenuItems/SearchableList.js.map +0 -7
  68. package/cjs/MenuItems/SelectionGroup.js.map +0 -7
  69. package/cjs/MenuItems/Separator.js.map +0 -7
  70. package/cjs/MenuItems/SubMenu.js.map +0 -7
  71. package/cjs/MenuItems/menuItemFactory.js.map +0 -7
  72. package/cjs/MenuItems/renderMenuItems.js +0 -53
  73. package/cjs/MenuItems/renderMenuItems.js.map +0 -7
  74. package/cjs/VirtualMenuList.js.map +0 -7
  75. package/cjs/index.js.map +0 -7
  76. package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
  77. package/esm/Menu.js.map +0 -7
  78. package/esm/MenuCombobox.js.map +0 -7
  79. package/esm/MenuContext.js.map +0 -7
  80. package/esm/MenuExports.js +0 -3
  81. package/esm/MenuExports.js.map +0 -7
  82. package/esm/MenuItems/CheckboxGroup.js.map +0 -7
  83. package/esm/MenuItems/MenuItem.js.map +0 -7
  84. package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
  85. package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
  86. package/esm/MenuItems/MenuItemRadio.js.map +0 -7
  87. package/esm/MenuItems/RadioGroup.js.map +0 -7
  88. package/esm/MenuItems/SearchableGroup.js.map +0 -7
  89. package/esm/MenuItems/SearchableList.js.map +0 -7
  90. package/esm/MenuItems/SelectionGroup.js.map +0 -7
  91. package/esm/MenuItems/Separator.js.map +0 -7
  92. package/esm/MenuItems/SubMenu.js.map +0 -7
  93. package/esm/MenuItems/menuItemFactory.js.map +0 -7
  94. package/esm/MenuItems/renderMenuItems.js +0 -24
  95. package/esm/MenuItems/renderMenuItems.js.map +0 -7
  96. package/esm/VirtualMenuList.js.map +0 -7
  97. package/esm/index.js.map +0 -7
  98. package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
  99. package/types/MenuExports.d.ts +0 -1
  100. package/types/MenuItems/renderMenuItems.d.ts +0 -1
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/MenuItems/SubMenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\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 styled from 'styled-components';\nimport { Menu } 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);\n\nconst DSSubMenuWithSchema = describe(SubMenu);\n\nDSSubMenuWithSchema.propTypes = props;\n\nexport { DSSubMenuWithSchema, SubMenu };\nexport default SubMenu;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/MenuItems/menuItemFactory.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,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;",
6
- "names": []
7
- }
@@ -1,53 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var renderMenuItems_exports = {};
29
- __export(renderMenuItems_exports, {
30
- renderMenuItems: () => renderMenuItems
31
- });
32
- var React = __toESM(require("react"));
33
- var import_react = __toESM(require("react"));
34
- var import_ds_utilities = require("@elliemae/ds-utilities");
35
- const renderMenuItems = (options, factory) => options.map((option, index) => {
36
- if ((0, import_ds_utilities.isFunction)(option.renderer)) {
37
- return option.renderer({
38
- key: option.id,
39
- item: option
40
- });
41
- }
42
- const ItemComponent = factory(option.type);
43
- const children = option.subItems && renderMenuItems(option.subItems, factory);
44
- return /* @__PURE__ */ import_react.default.createElement(ItemComponent, {
45
- ...option,
46
- key: option.id || index,
47
- item: option,
48
- onClick: null,
49
- onMouseDown: option.onClick
50
- }, children);
51
- });
52
- module.exports = __toCommonJS(renderMenuItems_exports);
53
- //# sourceMappingURL=renderMenuItems.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/MenuItems/renderMenuItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable import/no-cycle */\nimport React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\n\nexport const renderMenuItems = (options, factory) =>\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAA2B;AAEpB,MAAM,kBAAkB,CAAC,SAAS,YACvC,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC7B,MAAI,oCAAW,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,mDAAC,eAAD;AAAA,OACM;AAAA,IACJ,KAAK,OAAO,MAAM;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,aAAa,OAAO;AAAA,KAGnB;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/VirtualMenuList.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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;", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAsC;AACtC,sCAAyC;AAEzC,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,YAC/B,mDAAC,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,8DAAyB;AAAA,IAClD,aAAa;AAAA,IACb;AAAA,IACA;AAAA;AAGF,SACE,mDAAC,mCAAD;AAAA,IACE,QAAQ,UAAU;AAAA,IAClB,WAAW,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAMP,IAAO,0BAAQ;",
6
- "names": []
7
- }
package/cjs/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export { DSMenuItemWithSchema } from './MenuItems/MenuItem';\nexport { DSSubMenuWithSchema } from './MenuItems/SubMenu';\nexport { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup';\nexport { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable';\nexport { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio';\nexport { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup';\nexport { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup';\nexport { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList';\nexport { DSMenuSeparatorWithSchema } from './MenuItems/Separator';\nexport { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup';\n\nexport { default as MenuCombobox } from './MenuCombobox';\nexport { menuItemFactory } from './MenuItems/menuItemFactory';\nexport { renderMenuItems } from './MenuItems/renderMenuItems';\nexport { DSMenuWithSchema, Menu, Menu as default } from './Menu';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAqC;AACrC,qBAAoC;AACpC,2BAA8C;AAC9C,+BAA+C;AAC/C,2BAA0C;AAC1C,wBAA2C;AAC3C,6BAAgD;AAChD,4BAA+C;AAC/C,uBAA0C;AAC1C,4BAA+C;AAE/C,0BAAwC;AACxC,6BAAgC;AAChC,6BAAgC;AAChC,kBAAwD;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/utils/useHeightByAmountOfItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useMemo } from 'react';\n\nconst calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {\n const realAmountItemsInWindow =\n itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;\n return itemHeight * realAmountItemsInWindow;\n};\n\nfunction useHeightByAmountOfItems({\n itemHeight,\n amountItems,\n items,\n}) {\n const calculatedHeight = useMemo(\n () => calculateHeight(itemHeight, amountItems, items.length),\n [amountItems, items],\n );\n\n return calculatedHeight;\n}\n\nexport { useHeightByAmountOfItems };\nexport default useHeightByAmountOfItems;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,MAAM,kBAAkB,CAAC,YAAY,qBAAqB,gBAAgB;AACxE,QAAM,0BACJ,cAAc,sBAAsB,cAAc;AACpD,SAAO,aAAa;AAAA;AAGtB,kCAAkC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,GACC;AACD,QAAM,mBAAmB,0BACvB,MAAM,gBAAgB,YAAY,aAAa,MAAM,SACrD,CAAC,aAAa;AAGhB,SAAO;AAAA;AAIT,IAAO,mCAAQ;",
6
- "names": []
7
- }
package/esm/Menu.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Menu.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { animated } from 'react-spring/web';\nimport { useOnClickOutside } from '@elliemae/ds-utilities/hooks';\nimport { mergeRefs } from '@elliemae/ds-utilities/system';\nimport { focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';\nimport { useHiddenTransition } from '@elliemae/ds-hidden';\nimport { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\nimport { MenuContext } from './MenuContext';\n\nconst RESPONSIVE_HEIHGT_MARGIN = 120;\n\nconst blockName = 'menu';\n\nconst noop = () => {};\n\nconst MenuComponent = aggregatedClasses('div')(blockName, '', ({ menuComboBox, type }) => ({\n 'menu-combo-box': menuComboBox,\n [`type-${type}`]: type,\n}));\n\n/**\n * todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can\n * capture the context of the clicks on very nested components\n */\n\nconst isChildOfType = (child, type) => child.type.name === type;\n\nconst DSMenu = ({\n containerProps = {},\n innerRef,\n as: MenuTag = animated.ul,\n children = undefined,\n onClickOutside = noop,\n // handlers from hidden\n visible = undefined,\n focusOnOpen = false,\n maxOption = 0,\n style = {},\n minWidth = undefined,\n maxWidth = undefined,\n closeMenu,\n responsiveHeight = false,\n ...otherProps\n}) => {\n const menuRef = useRef(null);\n const { focusFirst } = useContext(FocusGroupContext);\n const { destroyed, ...hiddenProps } = useHiddenTransition({ visible, style });\n\n // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup\n const nextChildren = useMemo(() => {\n const forceLeftAddon = React.Children.toArray(children).some(\n (child) =>\n isChildOfType(child, 'SelectionGroup') ||\n isChildOfType(child, 'MenuItemCheckbox') ||\n isChildOfType(child, 'MenuItemRadio') ||\n child.props.leftAddon,\n );\n\n return React.Children.map(\n children,\n (child) =>\n child &&\n React.cloneElement(child, {\n ...child.props,\n noAddon: !forceLeftAddon ? true : undefined,\n maxOption,\n closeMenu,\n }),\n );\n }, [children]);\n\n useOnClickOutside(menuRef, onClickOutside);\n\n useEffect(() => {\n if (focusOnOpen && visible) {\n setTimeout(() => {\n focusFirst();\n }, 0);\n }\n }, [visible, focusOnOpen]);\n // todo: find out a better approach to this\n return !hiddenProps.destroyed ? (\n <MenuContext.Provider value={{ visible, closeMenu }}>\n <MenuComponent\n data-testid={containerProps?.['data-testid'] ? containerProps['data-testid'] : 'em-ds-menu'}\n {...containerProps}\n as={MenuTag}\n classProps={{ ...(otherProps.classProps || {}), type: otherProps.type }}\n innerRef={mergeRefs(innerRef, menuRef)}\n role=\"menu\"\n {...omit(otherProps, ['scheduleUpdate'])}\n {...hiddenProps}\n >\n {/* eslint-disable indent */}\n <div\n className=\"menu-component-internal-wrapper\"\n style={{\n ...style,\n minWidth,\n maxWidth,\n ...(responsiveHeight\n ? {\n overflowY: 'scroll',\n maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : undefined,\n }\n : {}),\n }}\n >\n {/* eslint-enable indent */}\n {nextChildren}\n </div>\n </MenuComponent>\n </MenuContext.Provider>\n ) : null;\n};\n\nconst Menu = focusGroupManagerHoc(DSMenu, { loop: true });\n\nconst props = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** Renders the menu with a specific html element */\n as: PropTypes.element.description('Renders the menu with a specific html element'),\n /** Handler when a user clicks outside the menu */\n onClickOutside: PropTypes.func.description('Handler when a user clicks outside the menu'),\n /** Whether the menu is visible or not */\n visible: PropTypes.bool.description('Whether the menu is visible or not'),\n /** When set to true, it's going to focus the first item */\n focusOnOpen: PropTypes.bool.description(\"When set to true, it's going to focus the first item\"),\n /** Customize menu minWidth. Can be undefined or 'number' */\n minWidth: PropTypes.number.description(\"Customize menu minWidth. Can be undefined or 'number'\"),\n /** Customize menu maxWidth. Can be undefined or 'number' */\n maxWidth: PropTypes.number.description(\"Customize menu maxWidth. Can be undefined or 'number'\"),\n};\n\nDSMenu.propTypes = props;\n\nconst DSMenuWithSchema = describe(DSMenu);\n\nDSMenuWithSchema.propTypes = props;\n// todo: add a handler to get this kind of exports for documentation\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuCombobox.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst MenuContext = React.createContext();\nexport { MenuContext };\nexport default MenuContext;\n"],
5
- "mappings": "AAAA;ACAA;AAEA,MAAM,cAAc,OAAM;AAE1B,IAAO,sBAAQ;",
6
- "names": []
7
- }
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- export * from "./Menu";
3
- //# sourceMappingURL=MenuExports.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuExports.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Menu';"],
5
- "mappings": "AAAA;ACAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/CheckboxGroup.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItem.tsx"],
4
- "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"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItemCheckable.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { runAll } from '@elliemae/ds-utilities';\nimport { MenuItem } from './MenuItem';\n\n// TODO: where to move this?\nfunction useCheckable({ checked }) {\n return {\n checked,\n 'aria-checked': checked,\n };\n}\n\n/**\n * Reuses the same props as the MenuItem\n *\n * @param root0\n * @param root0.role\n * @param root0.checked\n * @param root0.name\n * @param root0.checkIcon\n * @param root0.children\n * @param root0.leftAddon\n * @param root0.item\n */\nconst MenuItemCheckable = ({\n role = 'menuitemcheckbox',\n checked = false,\n name = '',\n checkIcon = <Checkmark color={['brand-primary', 600]} />,\n // eslint-disable-next-line react/prop-types\n children,\n leftAddon,\n item = undefined,\n ...otherProps\n}) => {\n const checkableProps = useCheckable({ checked, name });\n const handleClick = () =>\n runAll(otherProps.onClick, checkableProps.onClick)({ target: { value: name, checked } }, item);\n\n const checkAddon =\n leftAddon || (checkableProps.checked ? <div className=\"checkable-mark\">{checkIcon}</div> : <div />);\n return (\n <MenuItem\n {...item}\n {...otherProps}\n {...checkableProps}\n customRenderer={item && item.customRenderer ? item.customRenderer : () => {}}\n items={otherProps.subItems}\n leftAddon={checkAddon}\n onClick={handleClick}\n role={role}\n />\n );\n};\n\nconst props = {\n /** Whether the item is checked or not */\n checked: PropTypes.bool.description('Whether the item is checked or not'),\n /** A custom item when the item is checked */\n checkIcon: PropTypes.element.description('A custom item when the item is checked'),\n /** form field name */\n name: PropTypes.string.description('form field name'),\n /** menu item object props */\n item: PropTypes.object.description('menu item object props'),\n /** a11y role */\n role: PropTypes.string.description('a11y role'),\n /** left addon component */\n leftAddon: PropTypes.node.description('left addon component'),\n};\n\nMenuItemCheckable.propTypes = props;\n\nconst DSMenuItemCheckeableWithSchema = describe(MenuItemCheckable);\nDSMenuItemCheckeableWithSchema.propTypes = props;\n\nexport { DSMenuItemCheckeableWithSchema, MenuItemCheckable };\nexport default MenuItemCheckable;\n"],
5
- "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAGA,sBAAsB,EAAE,WAAW;AACjC,SAAO;AAAA,IACL;AAAA,IACA,gBAAgB;AAAA;AAAA;AAgBpB,MAAM,oBAAoB,CAAC;AAAA,EACzB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY,qCAAC,WAAD;AAAA,IAAW,OAAO,CAAC,iBAAiB;AAAA;AAAA,EAEhD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,KACJ;AAAA,MACC;AACJ,QAAM,iBAAiB,aAAa,EAAE,SAAS;AAC/C,QAAM,cAAc,MAClB,OAAO,WAAW,SAAS,eAAe,SAAS,EAAE,QAAQ,EAAE,OAAO,MAAM,aAAa;AAE3F,QAAM,aACJ,aAAc,gBAAe,UAAU,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KAAkB,aAAmB,qCAAC,OAAD;AAC7F,SACE,qCAAC,UAAD;AAAA,OACM;AAAA,OACA;AAAA,OACA;AAAA,IACJ,gBAAgB,QAAQ,KAAK,iBAAiB,KAAK,iBAAiB,MAAM;AAAA;AAAA,IAC1E,OAAO,WAAW;AAAA,IAClB,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA;AAAA;AAKN,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,WAAW,UAAU,QAAQ,YAAY;AAAA,EAEzC,MAAM,UAAU,OAAO,YAAY;AAAA,EAEnC,MAAM,UAAU,OAAO,YAAY;AAAA,EAEnC,MAAM,UAAU,OAAO,YAAY;AAAA,EAEnC,WAAW,UAAU,KAAK,YAAY;AAAA;AAGxC,kBAAkB,YAAY;AAE9B,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,4BAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItemCheckbox.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemCheckbox = ({ checked, ...rest }) => (\n <MenuItemCheckable {...rest} leftAddon={<DSCheckbox checked={checked} />} role=\"menuitemcheckbox\" />\n);\n\nregisterMenuItem('checkbox', MenuItemCheckbox);\nexport { MenuItemCheckbox };\nexport default MenuItemCheckbox;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,CAAC,EAAE,YAAY,WACtC,qCAAC,mBAAD;AAAA,KAAuB;AAAA,EAAM,WAAW,qCAAC,YAAD;AAAA,IAAY;AAAA;AAAA,EAAsB,MAAK;AAAA;AAGjF,iBAAiB,YAAY;AAE7B,IAAO,2BAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItemRadio.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemRadio = (props) => <MenuItemCheckable {...props} role=\"menuitemradio\" />;\n\nconst props = {\n /** Whether the item is checked or not */\n checked: PropTypes.bool.description('Whether the item is checked or not'),\n /** A custom item when the item is checked */\n checkIcon: PropTypes.element.description('A custom item when the item is checked'),\n};\n\nMenuItemRadio.propTypes = props;\nregisterMenuItem('radio', MenuItemRadio);\n\nconst DSMenuItemRadioWithSchema = describe(MenuItemCheckable);\nDSMenuItemRadioWithSchema.propTypes = props;\n\nexport { DSMenuItemRadioWithSchema, MenuItemRadio };\nexport default MenuItemRadio;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,CAAC,WAAU,qCAAC,mBAAD;AAAA,KAAuB;AAAA,EAAO,MAAK;AAAA;AAEpE,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,WAAW,UAAU,QAAQ,YAAY;AAAA;AAG3C,cAAc,YAAY;AAC1B,iBAAiB,SAAS;AAE1B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;AAGtC,IAAO,wBAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/RadioGroup.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { CheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\n\nconst RadioGroup = (props) => <CheckableGroup {...props} multi={false} />;\n\nconst props = {\n /* The item selected */\n active: PropTypes.arrayOf(PropTypes.string).description('the item selected'),\n /* Handler when a user checks an item */\n onCheck: PropTypes.func.description('Handler when a user checks an item'),\n};\n\nRadioGroup.propTypes = props;\n\nconst DSMenuRadioGroupWithSchema = describe(RadioGroup);\n\nDSMenuRadioGroupWithSchema.propTypes = props;\n\nexport { DSMenuRadioGroupWithSchema, RadioGroup };\nexport default RadioGroup;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,aAAa,CAAC,WAAU,qCAAC,gBAAD;AAAA,KAAoB;AAAA,EAAO,OAAO;AAAA;AAEhE,MAAM,QAAQ;AAAA,EAEZ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAExD,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,WAAW,YAAY;AAEvB,MAAM,6BAA6B,SAAS;AAE5C,2BAA2B,YAAY;AAGvC,IAAO,qBAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableGroup.tsx"],
4
- "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';\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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableList.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SelectionGroup.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/Separator.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SubMenu.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\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 styled from 'styled-components';\nimport { Menu } 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);\n\nconst DSSubMenuWithSchema = describe(SubMenu);\n\nDSSubMenuWithSchema.propTypes = props;\n\nexport { DSSubMenuWithSchema, SubMenu };\nexport default SubMenu;\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/menuItemFactory.tsx"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,24 +0,0 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import { isFunction } from "@elliemae/ds-utilities";
4
- const renderMenuItems = (options, factory) => options.map((option, index) => {
5
- if (isFunction(option.renderer)) {
6
- return option.renderer({
7
- key: option.id,
8
- item: option
9
- });
10
- }
11
- const ItemComponent = factory(option.type);
12
- const children = option.subItems && renderMenuItems(option.subItems, factory);
13
- return /* @__PURE__ */ React2.createElement(ItemComponent, {
14
- ...option,
15
- key: option.id || index,
16
- item: option,
17
- onClick: null,
18
- onMouseDown: option.onClick
19
- }, children);
20
- });
21
- export {
22
- renderMenuItems
23
- };
24
- //# sourceMappingURL=renderMenuItems.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/renderMenuItems.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\n\nexport const renderMenuItems = (options, factory) =>\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"],
5
- "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,kBAAkB,CAAC,SAAS,YACvC,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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/VirtualMenuList.tsx"],
4
- "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;"],
5
- "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;",
6
- "names": []
7
- }
package/esm/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSMenuItemWithSchema } from './MenuItems/MenuItem';\nexport { DSSubMenuWithSchema } from './MenuItems/SubMenu';\nexport { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup';\nexport { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable';\nexport { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio';\nexport { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup';\nexport { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup';\nexport { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList';\nexport { DSMenuSeparatorWithSchema } from './MenuItems/Separator';\nexport { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup';\n\nexport { default as MenuCombobox } from './MenuCombobox';\nexport { menuItemFactory } from './MenuItems/menuItemFactory';\nexport { renderMenuItems } from './MenuItems/renderMenuItems';\nexport { DSMenuWithSchema, Menu, Menu as default } from './Menu';\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useHeightByAmountOfItems.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\n\nconst calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {\n const realAmountItemsInWindow =\n itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;\n return itemHeight * realAmountItemsInWindow;\n};\n\nfunction useHeightByAmountOfItems({\n itemHeight,\n amountItems,\n items,\n}) {\n const calculatedHeight = useMemo(\n () => calculateHeight(itemHeight, amountItems, items.length),\n [amountItems, items],\n );\n\n return calculatedHeight;\n}\n\nexport { useHeightByAmountOfItems };\nexport default useHeightByAmountOfItems;\n"],
5
- "mappings": "AAAA;ACAA;AAEA,MAAM,kBAAkB,CAAC,YAAY,qBAAqB,gBAAgB;AACxE,QAAM,0BACJ,cAAc,sBAAsB,cAAc;AACpD,SAAO,aAAa;AAAA;AAGtB,kCAAkC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,GACC;AACD,QAAM,mBAAmB,QACvB,MAAM,gBAAgB,YAAY,aAAa,MAAM,SACrD,CAAC,aAAa;AAGhB,SAAO;AAAA;AAIT,IAAO,mCAAQ;",
6
- "names": []
7
- }
@@ -1 +0,0 @@
1
- export * from './Menu';
@@ -1 +0,0 @@
1
- export declare const renderMenuItems: (options: any, factory: any) => any;