@elliemae/ds-menu 2.3.0-alpha.1 → 2.3.0-alpha.6

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 (118) hide show
  1. package/{cjs/Menu.js → dist/cjs/DSMenu.js} +5 -29
  2. package/dist/cjs/DSMenu.js.map +7 -0
  3. package/dist/cjs/Menu.js +60 -0
  4. package/dist/cjs/Menu.js.map +7 -0
  5. package/{cjs → dist/cjs}/MenuCombobox.js +2 -2
  6. package/dist/cjs/MenuCombobox.js.map +7 -0
  7. package/{cjs → dist/cjs}/MenuContext.js +0 -0
  8. package/{cjs → dist/cjs}/MenuContext.js.map +0 -0
  9. package/{cjs → dist/cjs}/MenuExports.js +9 -1
  10. package/dist/cjs/MenuExports.js.map +7 -0
  11. package/{cjs → dist/cjs}/MenuItems/CheckboxGroup.js +0 -0
  12. package/{cjs → dist/cjs}/MenuItems/CheckboxGroup.js.map +0 -0
  13. package/{cjs → dist/cjs}/MenuItems/MenuItem.js +0 -0
  14. package/{cjs → dist/cjs}/MenuItems/MenuItem.js.map +0 -0
  15. package/{cjs → dist/cjs}/MenuItems/MenuItemCheckable.js +0 -0
  16. package/{cjs → dist/cjs}/MenuItems/MenuItemCheckable.js.map +0 -0
  17. package/{cjs → dist/cjs}/MenuItems/MenuItemCheckbox.js +2 -2
  18. package/dist/cjs/MenuItems/MenuItemCheckbox.js.map +7 -0
  19. package/{cjs → dist/cjs}/MenuItems/MenuItemRadio.js +0 -0
  20. package/{cjs → dist/cjs}/MenuItems/MenuItemRadio.js.map +0 -0
  21. package/{cjs → dist/cjs}/MenuItems/RadioGroup.js +0 -0
  22. package/{cjs → dist/cjs}/MenuItems/RadioGroup.js.map +0 -0
  23. package/{cjs → dist/cjs}/MenuItems/SearchableGroup.js +2 -2
  24. package/dist/cjs/MenuItems/SearchableGroup.js.map +7 -0
  25. package/{cjs → dist/cjs}/MenuItems/SearchableList.js +0 -0
  26. package/{cjs → dist/cjs}/MenuItems/SearchableList.js.map +0 -0
  27. package/{cjs → dist/cjs}/MenuItems/SelectionGroup.js +0 -0
  28. package/{cjs → dist/cjs}/MenuItems/SelectionGroup.js.map +0 -0
  29. package/{cjs → dist/cjs}/MenuItems/Separator.js +0 -0
  30. package/{cjs → dist/cjs}/MenuItems/Separator.js.map +0 -0
  31. package/{cjs → dist/cjs}/MenuItems/SubMenu.js +2 -2
  32. package/dist/cjs/MenuItems/SubMenu.js.map +7 -0
  33. package/{cjs → dist/cjs}/MenuItems/menuItemFactory.js +0 -0
  34. package/{cjs → dist/cjs}/MenuItems/menuItemFactory.js.map +0 -0
  35. package/{cjs → dist/cjs}/MenuItems/renderMenuItems.js +0 -0
  36. package/{cjs → dist/cjs}/MenuItems/renderMenuItems.js.map +0 -0
  37. package/{cjs → dist/cjs}/VirtualMenuList.js +0 -0
  38. package/{cjs → dist/cjs}/VirtualMenuList.js.map +0 -0
  39. package/{cjs → dist/cjs}/index.js +0 -0
  40. package/{cjs → dist/cjs}/index.js.map +0 -0
  41. package/{cjs → dist/cjs}/utils/useHeightByAmountOfItems.js +0 -0
  42. package/{cjs → dist/cjs}/utils/useHeightByAmountOfItems.js.map +0 -0
  43. package/{esm/Menu.js → dist/esm/DSMenu.js} +2 -26
  44. package/dist/esm/DSMenu.js.map +7 -0
  45. package/dist/esm/Menu.js +31 -0
  46. package/dist/esm/Menu.js.map +7 -0
  47. package/{esm → dist/esm}/MenuCombobox.js +1 -1
  48. package/dist/esm/MenuCombobox.js.map +7 -0
  49. package/{esm → dist/esm}/MenuContext.js +0 -0
  50. package/{esm → dist/esm}/MenuContext.js.map +0 -0
  51. package/dist/esm/MenuExports.js +7 -0
  52. package/{esm → dist/esm}/MenuExports.js.map +1 -1
  53. package/{esm → dist/esm}/MenuItems/CheckboxGroup.js +0 -0
  54. package/{esm → dist/esm}/MenuItems/CheckboxGroup.js.map +0 -0
  55. package/{esm → dist/esm}/MenuItems/MenuItem.js +0 -0
  56. package/{esm → dist/esm}/MenuItems/MenuItem.js.map +0 -0
  57. package/{esm → dist/esm}/MenuItems/MenuItemCheckable.js +0 -0
  58. package/{esm → dist/esm}/MenuItems/MenuItemCheckable.js.map +0 -0
  59. package/{esm → dist/esm}/MenuItems/MenuItemCheckbox.js +1 -1
  60. package/{esm → dist/esm}/MenuItems/MenuItemCheckbox.js.map +1 -1
  61. package/{esm → dist/esm}/MenuItems/MenuItemRadio.js +0 -0
  62. package/{esm → dist/esm}/MenuItems/MenuItemRadio.js.map +0 -0
  63. package/{esm → dist/esm}/MenuItems/RadioGroup.js +0 -0
  64. package/{esm → dist/esm}/MenuItems/RadioGroup.js.map +0 -0
  65. package/{esm → dist/esm}/MenuItems/SearchableGroup.js +1 -1
  66. package/dist/esm/MenuItems/SearchableGroup.js.map +7 -0
  67. package/{esm → dist/esm}/MenuItems/SearchableList.js +0 -0
  68. package/{esm → dist/esm}/MenuItems/SearchableList.js.map +0 -0
  69. package/{esm → dist/esm}/MenuItems/SelectionGroup.js +0 -0
  70. package/{esm → dist/esm}/MenuItems/SelectionGroup.js.map +0 -0
  71. package/{esm → dist/esm}/MenuItems/Separator.js +0 -0
  72. package/{esm → dist/esm}/MenuItems/Separator.js.map +0 -0
  73. package/{esm → dist/esm}/MenuItems/SubMenu.js +1 -1
  74. package/dist/esm/MenuItems/SubMenu.js.map +7 -0
  75. package/{esm → dist/esm}/MenuItems/menuItemFactory.js +0 -0
  76. package/{esm → dist/esm}/MenuItems/menuItemFactory.js.map +0 -0
  77. package/{esm → dist/esm}/MenuItems/renderMenuItems.js +0 -0
  78. package/{esm → dist/esm}/MenuItems/renderMenuItems.js.map +0 -0
  79. package/{esm → dist/esm}/VirtualMenuList.js +0 -0
  80. package/{esm → dist/esm}/VirtualMenuList.js.map +0 -0
  81. package/{esm → dist/esm}/index.js +0 -0
  82. package/{esm → dist/esm}/index.js.map +0 -0
  83. package/{esm → dist/esm}/utils/useHeightByAmountOfItems.js +0 -0
  84. package/{esm → dist/esm}/utils/useHeightByAmountOfItems.js.map +0 -0
  85. package/package.json +72 -66
  86. package/cjs/Menu.js.map +0 -7
  87. package/cjs/MenuCombobox.js.map +0 -7
  88. package/cjs/MenuExports.js.map +0 -7
  89. package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
  90. package/cjs/MenuItems/SearchableGroup.js.map +0 -7
  91. package/cjs/MenuItems/SubMenu.js.map +0 -7
  92. package/esm/Menu.js.map +0 -7
  93. package/esm/MenuCombobox.js.map +0 -7
  94. package/esm/MenuExports.js +0 -3
  95. package/esm/MenuItems/SearchableGroup.js.map +0 -7
  96. package/esm/MenuItems/SubMenu.js.map +0 -7
  97. package/types/Menu.d.ts +0 -12
  98. package/types/MenuCombobox.d.ts +0 -28
  99. package/types/MenuContext.d.ts +0 -4
  100. package/types/MenuExports.d.ts +0 -1
  101. package/types/MenuItems/CheckboxGroup.d.ts +0 -32
  102. package/types/MenuItems/MenuItem.d.ts +0 -79
  103. package/types/MenuItems/MenuItemCheckable.d.ts +0 -78
  104. package/types/MenuItems/MenuItemCheckbox.d.ts +0 -7
  105. package/types/MenuItems/MenuItemRadio.d.ts +0 -28
  106. package/types/MenuItems/RadioGroup.d.ts +0 -26
  107. package/types/MenuItems/SearchableGroup.d.ts +0 -10
  108. package/types/MenuItems/SearchableList.d.ts +0 -95
  109. package/types/MenuItems/SelectionGroup.d.ts +0 -87
  110. package/types/MenuItems/Separator.d.ts +0 -32
  111. package/types/MenuItems/SubMenu.d.ts +0 -109
  112. package/types/MenuItems/menuItemFactory.d.ts +0 -2
  113. package/types/MenuItems/renderMenuItems.d.ts +0 -1
  114. package/types/VirtualMenuList.d.ts +0 -10
  115. package/types/index.d.ts +0 -14
  116. package/types/tests/Menu.test.d.ts +0 -1
  117. package/types/tests/MenuItem.test.d.ts +0 -1
  118. package/types/utils/useHeightByAmountOfItems.d.ts +0 -7
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import React2, { useEffect, useMemo, useState, useRef, useContext } from "react";
3
3
  import { aggregatedClasses } from "@elliemae/ds-classnames";
4
4
  import { focusGroupManagerHoc } from "@elliemae/ds-shared/FocusGroup";
5
- import { DSSearchBox } from "@elliemae/ds-form";
5
+ import { DSSearchBox } from "@elliemae/ds-form/SearchBox";
6
6
  import { PropTypes, describe } from "react-desc";
7
7
  import { VirtualMenuList } from "../VirtualMenuList";
8
8
  import { MenuContext } from "../MenuContext";
@@ -0,0 +1,7 @@
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/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"],
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
+ }
File without changes
File without changes
File without changes
File without changes
@@ -7,7 +7,7 @@ import { useHiddenController } from "@elliemae/ds-hidden";
7
7
  import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
8
8
  import { DSPopper, interactions } from "@elliemae/ds-popper";
9
9
  import styled from "styled-components";
10
- import { Menu } from "../Menu";
10
+ import { Menu } from "../DSMenu";
11
11
  import { MenuItem } from "./MenuItem";
12
12
  import { registerMenuItem } from "./menuItemFactory";
13
13
  const ChevronRightComp = styled.div`
@@ -0,0 +1,7 @@
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 */\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 '../DSMenu';\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
+ }
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
package/package.json CHANGED
@@ -1,91 +1,98 @@
1
1
  {
2
2
  "name": "@elliemae/ds-menu",
3
- "version": "2.3.0-alpha.1",
3
+ "version": "2.3.0-alpha.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Menu",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
9
12
  "exports": {
10
13
  ".": {
11
- "import": "./esm/index.js",
12
- "require": "./cjs/index.js"
14
+ "import": "./dist/esm/index.js",
15
+ "require": "./dist/cjs/index.js"
13
16
  },
14
17
  "./VirtualMenuList": {
15
- "import": "./esm/VirtualMenuList.js",
16
- "require": "./cjs/VirtualMenuList.js"
18
+ "import": "./dist/esm/VirtualMenuList.js",
19
+ "require": "./dist/cjs/VirtualMenuList.js"
17
20
  },
18
21
  "./utils/useHeightByAmountOfItems": {
19
- "import": "./esm/utils/useHeightByAmountOfItems.js",
20
- "require": "./cjs/utils/useHeightByAmountOfItems.js"
22
+ "import": "./dist/esm/utils/useHeightByAmountOfItems.js",
23
+ "require": "./dist/cjs/utils/useHeightByAmountOfItems.js"
21
24
  },
22
25
  "./MenuItems/SubMenu": {
23
- "import": "./esm/MenuItems/SubMenu.js",
24
- "require": "./cjs/MenuItems/SubMenu.js"
26
+ "import": "./dist/esm/MenuItems/SubMenu.js",
27
+ "require": "./dist/cjs/MenuItems/SubMenu.js"
25
28
  },
26
29
  "./MenuItems/Separator": {
27
- "import": "./esm/MenuItems/Separator.js",
28
- "require": "./cjs/MenuItems/Separator.js"
30
+ "import": "./dist/esm/MenuItems/Separator.js",
31
+ "require": "./dist/cjs/MenuItems/Separator.js"
29
32
  },
30
33
  "./MenuItems/SelectionGroup": {
31
- "import": "./esm/MenuItems/SelectionGroup.js",
32
- "require": "./cjs/MenuItems/SelectionGroup.js"
34
+ "import": "./dist/esm/MenuItems/SelectionGroup.js",
35
+ "require": "./dist/cjs/MenuItems/SelectionGroup.js"
33
36
  },
34
37
  "./MenuItems/SearchableList": {
35
- "import": "./esm/MenuItems/SearchableList.js",
36
- "require": "./cjs/MenuItems/SearchableList.js"
38
+ "import": "./dist/esm/MenuItems/SearchableList.js",
39
+ "require": "./dist/cjs/MenuItems/SearchableList.js"
37
40
  },
38
41
  "./MenuItems/SearchableGroup": {
39
- "import": "./esm/MenuItems/SearchableGroup.js",
40
- "require": "./cjs/MenuItems/SearchableGroup.js"
42
+ "import": "./dist/esm/MenuItems/SearchableGroup.js",
43
+ "require": "./dist/cjs/MenuItems/SearchableGroup.js"
41
44
  },
42
45
  "./MenuItems/renderMenuItems": {
43
- "import": "./esm/MenuItems/renderMenuItems.js",
44
- "require": "./cjs/MenuItems/renderMenuItems.js"
46
+ "import": "./dist/esm/MenuItems/renderMenuItems.js",
47
+ "require": "./dist/cjs/MenuItems/renderMenuItems.js"
45
48
  },
46
49
  "./MenuItems/RadioGroup": {
47
- "import": "./esm/MenuItems/RadioGroup.js",
48
- "require": "./cjs/MenuItems/RadioGroup.js"
50
+ "import": "./dist/esm/MenuItems/RadioGroup.js",
51
+ "require": "./dist/cjs/MenuItems/RadioGroup.js"
49
52
  },
50
53
  "./MenuItems/MenuItemRadio": {
51
- "import": "./esm/MenuItems/MenuItemRadio.js",
52
- "require": "./cjs/MenuItems/MenuItemRadio.js"
54
+ "import": "./dist/esm/MenuItems/MenuItemRadio.js",
55
+ "require": "./dist/cjs/MenuItems/MenuItemRadio.js"
53
56
  },
54
57
  "./MenuItems/menuItemFactory": {
55
- "import": "./esm/MenuItems/menuItemFactory.js",
56
- "require": "./cjs/MenuItems/menuItemFactory.js"
58
+ "import": "./dist/esm/MenuItems/menuItemFactory.js",
59
+ "require": "./dist/cjs/MenuItems/menuItemFactory.js"
57
60
  },
58
61
  "./MenuItems/MenuItemCheckbox": {
59
- "import": "./esm/MenuItems/MenuItemCheckbox.js",
60
- "require": "./cjs/MenuItems/MenuItemCheckbox.js"
62
+ "import": "./dist/esm/MenuItems/MenuItemCheckbox.js",
63
+ "require": "./dist/cjs/MenuItems/MenuItemCheckbox.js"
61
64
  },
62
65
  "./MenuItems/MenuItemCheckable": {
63
- "import": "./esm/MenuItems/MenuItemCheckable.js",
64
- "require": "./cjs/MenuItems/MenuItemCheckable.js"
66
+ "import": "./dist/esm/MenuItems/MenuItemCheckable.js",
67
+ "require": "./dist/cjs/MenuItems/MenuItemCheckable.js"
65
68
  },
66
69
  "./MenuItems/MenuItem": {
67
- "import": "./esm/MenuItems/MenuItem.js",
68
- "require": "./cjs/MenuItems/MenuItem.js"
70
+ "import": "./dist/esm/MenuItems/MenuItem.js",
71
+ "require": "./dist/cjs/MenuItems/MenuItem.js"
69
72
  },
70
73
  "./MenuItems/CheckboxGroup": {
71
- "import": "./esm/MenuItems/CheckboxGroup.js",
72
- "require": "./cjs/MenuItems/CheckboxGroup.js"
74
+ "import": "./dist/esm/MenuItems/CheckboxGroup.js",
75
+ "require": "./dist/cjs/MenuItems/CheckboxGroup.js"
73
76
  },
74
77
  "./MenuExports": {
75
- "import": "./esm/MenuExports.js",
76
- "require": "./cjs/MenuExports.js"
78
+ "import": "./dist/esm/MenuExports.js",
79
+ "require": "./dist/cjs/MenuExports.js"
77
80
  },
78
81
  "./MenuContext": {
79
- "import": "./esm/MenuContext.js",
80
- "require": "./cjs/MenuContext.js"
82
+ "import": "./dist/esm/MenuContext.js",
83
+ "require": "./dist/cjs/MenuContext.js"
81
84
  },
82
85
  "./MenuCombobox": {
83
- "import": "./esm/MenuCombobox.js",
84
- "require": "./cjs/MenuCombobox.js"
86
+ "import": "./dist/esm/MenuCombobox.js",
87
+ "require": "./dist/cjs/MenuCombobox.js"
85
88
  },
86
89
  "./Menu": {
87
- "import": "./esm/Menu.js",
88
- "require": "./cjs/Menu.js"
90
+ "import": "./dist/esm/Menu.js",
91
+ "require": "./dist/cjs/Menu.js"
92
+ },
93
+ "./DSMenu": {
94
+ "import": "./dist/esm/DSMenu.js",
95
+ "require": "./dist/cjs/DSMenu.js"
89
96
  }
90
97
  },
91
98
  "sideEffects": [
@@ -97,36 +104,30 @@
97
104
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
98
105
  },
99
106
  "engines": {
100
- "npm": ">=7",
101
- "node": ">=14"
107
+ "pnpm": ">=6",
108
+ "node": ">=16"
102
109
  },
103
110
  "author": "ICE MT",
104
- "scripts": {
105
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
106
- "prebuild": "exit 0",
107
- "predev": "exit 0",
108
- "build": "node ../../scripts/build/build.js"
109
- },
110
111
  "dependencies": {
111
- "@elliemae/ds-button": "2.3.0-alpha.1",
112
- "@elliemae/ds-classnames": "2.3.0-alpha.1",
113
- "@elliemae/ds-form": "2.3.0-alpha.1",
114
- "@elliemae/ds-hidden": "2.3.0-alpha.1",
115
- "@elliemae/ds-icons": "2.3.0-alpha.1",
116
- "@elliemae/ds-popper": "2.3.0-alpha.1",
117
- "@elliemae/ds-separator": "2.3.0-alpha.1",
118
- "@elliemae/ds-shared": "2.3.0-alpha.1",
119
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.1",
120
- "@elliemae/ds-utilities": "2.3.0-alpha.1",
112
+ "@elliemae/ds-button": "2.3.0-alpha.6",
113
+ "@elliemae/ds-classnames": "2.3.0-alpha.6",
114
+ "@elliemae/ds-form": "2.3.0-alpha.6",
115
+ "@elliemae/ds-hidden": "2.3.0-alpha.6",
116
+ "@elliemae/ds-icons": "2.3.0-alpha.6",
117
+ "@elliemae/ds-popper": "2.3.0-alpha.6",
118
+ "@elliemae/ds-separator": "2.3.0-alpha.6",
119
+ "@elliemae/ds-shared": "2.3.0-alpha.6",
120
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.6",
121
+ "@elliemae/ds-utilities": "2.3.0-alpha.6",
121
122
  "prop-types": "~15.7.2",
122
123
  "react-desc": "~4.1.3",
123
124
  "react-spring": "~8.0.27",
124
125
  "react-window": "~1.8.6"
125
126
  },
126
127
  "devDependencies": {
127
- "@testing-library/jest-dom": "~5.15.0",
128
+ "@testing-library/jest-dom": "~5.15.1",
128
129
  "@testing-library/react": "~12.1.2",
129
- "jest-styled-components": "~7.0.6",
130
+ "jest-styled-components": "~7.0.8",
130
131
  "styled-components": "~5.3.3"
131
132
  },
132
133
  "peerDependencies": {
@@ -137,7 +138,12 @@
137
138
  },
138
139
  "publishConfig": {
139
140
  "access": "public",
140
- "directory": "dist",
141
- "generateSubmodules": true
141
+ "typeSafety": false
142
+ },
143
+ "scripts": {
144
+ "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
145
+ "prebuild": "exit 0",
146
+ "predev": "exit 0",
147
+ "build": "node ../../scripts/build/build.js"
142
148
  }
143
149
  }
package/cjs/Menu.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/Menu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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", "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/MenuCombobox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,4BAA+B;AAC/B,kBAAqB;AAErB,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,mDAAC,kBAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,SAAO;AAAA,KAEP,mDAAC,sCAAD;AAAA,IACE,kBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,aAAa,YAAY;AAAA,EAEvB,uBAAuB,0BAAU,MAAM;AAAA,EAEvC,SAAS,0BAAU,QAAQ,0BAAU;AAAA,EAErC,kBAAkB,0BAAU;AAAA,EAE5B,UAAU,0BAAU,UAAU,CAAC,0BAAU,MAAM,0BAAU;AAAA,EAEzD,YAAY,0BAAU;AAAA,EAEtB,SAAS,0BAAU;AAAA;AAGrB,IAAO,uBAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/MenuExports.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export * from './Menu';", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,gCAAc;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/MenuItems/MenuItemCheckbox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,qBAA2B;AAC3B,+BAAkC;AAClC,6BAAiC;AAEjC,MAAM,mBAAmB,CAAC,EAAE,YAAY,WACtC,mDAAC,4CAAD;AAAA,KAAuB;AAAA,EAAM,WAAW,mDAAC,2BAAD;AAAA,IAAY;AAAA;AAAA,EAAsB,MAAK;AAAA;AAGjF,6CAAiB,YAAY;AAE7B,IAAO,2BAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/MenuItems/SearchableGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwE;AACxE,2BAAkC;AAClC,wBAAqC;AACrC,qBAA4B;AAC5B,wBAAoC;AACpC,6BAAgC;AAChC,yBAA4B;AAE5B,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,4CAAkB,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,yBAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,6BAAW,mCAAgB;AAE/C,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,0BACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,wFACE,mDAAC,kBAAD,MACE,mDAAC,4BAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,mDAAC,kBAAD,MAAmB,gBAErB,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,4BAAU,OAAO,YACpC;AAAA,EAGF,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,4BAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,4BAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAChE;AAAA,EAGF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,4BAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,gCAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,4CAAqB;AAGhD,IAAO,0BAAQ;",
6
- "names": []
7
- }
@@ -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
- }
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,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/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/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
- }
package/types/Menu.d.ts DELETED
@@ -1,12 +0,0 @@
1
- /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
- /// <reference types="react" />
3
- import { menuItemFactory } from './MenuItems/menuItemFactory';
4
- import { renderMenuItems } from './MenuItems/renderMenuItems';
5
- declare const Menu: any;
6
- declare const DSMenuWithSchema: {
7
- (props?: unknown): JSX.Element;
8
- propTypes: unknown;
9
- toTypescript: () => import("react-desc").TypescriptSchema;
10
- };
11
- export { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };
12
- export default Menu;
@@ -1,28 +0,0 @@
1
- /// <reference types="react" />
2
- import PropTypes from 'prop-types';
3
- declare function MenuCombobox({ dropdownFilterOptions, options, onSelectMenuItem, innerRef, maxOptions, loading, ...rest }: {
4
- [x: string]: any;
5
- dropdownFilterOptions?: {} | undefined;
6
- options?: never[] | undefined;
7
- onSelectMenuItem?: (() => null) | undefined;
8
- innerRef: any;
9
- maxOptions?: number | undefined;
10
- loading?: boolean | undefined;
11
- }): JSX.Element;
12
- declare namespace MenuCombobox {
13
- var propTypes: {
14
- /** Options */
15
- dropdownFilterOptions: PropTypes.Requireable<PropTypes.InferProps<{}>>;
16
- /** The option or menu items to render */
17
- options: PropTypes.Requireable<(object | null | undefined)[]>;
18
- /** Handler when a menu item is selected */
19
- onSelectMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
20
- /** Internal ref */
21
- innerRef: PropTypes.Requireable<object>;
22
- /** Max options to display in the list */
23
- maxOptions: PropTypes.Requireable<number>;
24
- /** Is loading */
25
- loading: PropTypes.Requireable<boolean>;
26
- };
27
- }
28
- export default MenuCombobox;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- declare const MenuContext: React.Context<unknown>;
3
- export { MenuContext };
4
- export default MenuContext;
@@ -1 +0,0 @@
1
- export * from './Menu';