@elliemae/ds-menu-button 3.39.0-rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. package/dist/cjs/DSMenuButton.js +50 -0
  2. package/dist/cjs/DSMenuButton.js.map +7 -0
  3. package/dist/cjs/DSMenuButtonCTX.js +38 -0
  4. package/dist/cjs/DSMenuButtonCTX.js.map +7 -0
  5. package/dist/cjs/config/useMenuButton.js +55 -0
  6. package/dist/cjs/config/useMenuButton.js.map +7 -0
  7. package/dist/cjs/config/useValidateProps.js +40 -0
  8. package/dist/cjs/config/useValidateProps.js.map +7 -0
  9. package/dist/cjs/constants/index.js +43 -0
  10. package/dist/cjs/constants/index.js.map +7 -0
  11. package/dist/cjs/index.js +41 -0
  12. package/dist/cjs/index.js.map +7 -0
  13. package/dist/cjs/package.json +7 -0
  14. package/dist/cjs/parts/ItemFactory.js +66 -0
  15. package/dist/cjs/parts/ItemFactory.js.map +7 -0
  16. package/dist/cjs/parts/MenuButtonContent.js +157 -0
  17. package/dist/cjs/parts/MenuButtonContent.js.map +7 -0
  18. package/dist/cjs/parts/MenuItem.js +244 -0
  19. package/dist/cjs/parts/MenuItem.js.map +7 -0
  20. package/dist/cjs/parts/SubMenu.js +126 -0
  21. package/dist/cjs/parts/SubMenu.js.map +7 -0
  22. package/dist/cjs/react-desc-prop-types.js +64 -0
  23. package/dist/cjs/react-desc-prop-types.js.map +7 -0
  24. package/dist/cjs/styled.js +128 -0
  25. package/dist/cjs/styled.js.map +7 -0
  26. package/dist/esm/DSMenuButton.js +20 -0
  27. package/dist/esm/DSMenuButton.js.map +7 -0
  28. package/dist/esm/DSMenuButtonCTX.js +8 -0
  29. package/dist/esm/DSMenuButtonCTX.js.map +7 -0
  30. package/dist/esm/config/useMenuButton.js +25 -0
  31. package/dist/esm/config/useMenuButton.js.map +7 -0
  32. package/dist/esm/config/useValidateProps.js +10 -0
  33. package/dist/esm/config/useValidateProps.js.map +7 -0
  34. package/dist/esm/constants/index.js +13 -0
  35. package/dist/esm/constants/index.js.map +7 -0
  36. package/dist/esm/index.js +11 -0
  37. package/dist/esm/index.js.map +7 -0
  38. package/dist/esm/package.json +7 -0
  39. package/dist/esm/parts/ItemFactory.js +36 -0
  40. package/dist/esm/parts/ItemFactory.js.map +7 -0
  41. package/dist/esm/parts/MenuButtonContent.js +127 -0
  42. package/dist/esm/parts/MenuButtonContent.js.map +7 -0
  43. package/dist/esm/parts/MenuItem.js +227 -0
  44. package/dist/esm/parts/MenuItem.js.map +7 -0
  45. package/dist/esm/parts/SubMenu.js +96 -0
  46. package/dist/esm/parts/SubMenu.js.map +7 -0
  47. package/dist/esm/react-desc-prop-types.js +34 -0
  48. package/dist/esm/react-desc-prop-types.js.map +7 -0
  49. package/dist/esm/styled.js +98 -0
  50. package/dist/esm/styled.js.map +7 -0
  51. package/dist/types/DSMenuButton.d.ts +7 -0
  52. package/dist/types/DSMenuButtonCTX.d.ts +11 -0
  53. package/dist/types/config/useMenuButton.d.ts +9 -0
  54. package/dist/types/config/useValidateProps.d.ts +3 -0
  55. package/dist/types/constants/index.d.ts +5 -0
  56. package/dist/types/index.d.ts +3 -0
  57. package/dist/types/parts/ItemFactory.d.ts +14 -0
  58. package/dist/types/parts/MenuButtonContent.d.ts +1 -0
  59. package/dist/types/parts/MenuItem.d.ts +21 -0
  60. package/dist/types/parts/SubMenu.d.ts +14 -0
  61. package/dist/types/react-desc-prop-types.d.ts +51 -0
  62. package/dist/types/styled.d.ts +15 -0
  63. package/package.json +76 -0
@@ -0,0 +1,96 @@
1
+ import * as React from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import React2, { useState, useMemo, useCallback, useContext } from "react";
4
+ import { useKeyboardNavigation, DIRECTIONS } from "@elliemae/ds-hooks-keyboard-navigation";
5
+ import { MenuButtonContext } from "../DSMenuButtonCTX.js";
6
+ import { StyledMenu } from "../styled.js";
7
+ import { ItemFactory } from "./ItemFactory.js";
8
+ const SubMenu = (props) => {
9
+ const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;
10
+ const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);
11
+ const listRef = React2.useRef(null);
12
+ const rect = referenceElement?.getBoundingClientRect();
13
+ const [coords, setCoords] = useState({ x: rect?.width ?? 0, y: 0 });
14
+ React2.useLayoutEffect(() => {
15
+ const listRect = listRef?.current?.getBoundingClientRect();
16
+ if (!listRect) return;
17
+ if (level === 1) {
18
+ if (listRect.bottom < window.innerHeight) {
19
+ setCoords({ x: 0, y: rect?.height || 0 });
20
+ } else {
21
+ setCoords({ x: 0, y: -listRect.height });
22
+ }
23
+ return;
24
+ }
25
+ if (listRect.right > window.innerWidth) {
26
+ setCoords({ x: -(rect?.width || 0), y: 0 });
27
+ } else {
28
+ setCoords({ x: rect?.width || 0, y: 0 });
29
+ }
30
+ }, [level, rect?.height, rect?.width, referenceElement]);
31
+ const config = {
32
+ options: items.filter((item) => item.type !== "separator" && item.type !== "section").map((item) => item.dsId),
33
+ direction: DIRECTIONS.VERTICAL,
34
+ focusedOption,
35
+ setFocusedOption
36
+ };
37
+ const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);
38
+ const { onKeyDown, onBlur } = getWrapperProps();
39
+ const handleOnMenuKeyDown = useCallback(
40
+ (event) => {
41
+ if (event.key === "ArrowDown" || event.key === "ArrowUp") {
42
+ event.stopPropagation();
43
+ }
44
+ onKeyDown(event);
45
+ },
46
+ [onKeyDown]
47
+ );
48
+ const handleOnBlur = useCallback(
49
+ (e) => {
50
+ setTimeout(() => {
51
+ if (!listRef.current?.contains(document.activeElement)) {
52
+ setShowSubMenu(false);
53
+ }
54
+ });
55
+ onBlur(e);
56
+ },
57
+ [onBlur, setShowSubMenu]
58
+ );
59
+ console.log(minWidth, "minWidth");
60
+ const subMenuStyles = useMemo(
61
+ () => ({
62
+ position: "absolute",
63
+ top: coords.y,
64
+ left: coords.x,
65
+ zIndex: 1001 + level,
66
+ minWidth
67
+ }),
68
+ [coords, level, minWidth]
69
+ );
70
+ if (!referenceElement || !showSubMenu) return null;
71
+ return /* @__PURE__ */ jsx(
72
+ StyledMenu,
73
+ {
74
+ innerRef: listRef,
75
+ role: "menu",
76
+ onKeyDown: handleOnMenuKeyDown,
77
+ onBlur: handleOnBlur,
78
+ style: subMenuStyles,
79
+ children: items.map((item) => /* @__PURE__ */ jsx(
80
+ ItemFactory,
81
+ {
82
+ item,
83
+ selectionMode,
84
+ level,
85
+ parentId,
86
+ ...getItemProps(item.dsId)
87
+ },
88
+ item.dsId
89
+ ))
90
+ }
91
+ );
92
+ };
93
+ export {
94
+ SubMenu
95
+ };
96
+ //# sourceMappingURL=SubMenu.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SubMenu.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n referenceElement: HTMLElement | null;\n showSubMenu: boolean;\n selectionMode?: 'single' | 'multiple';\n setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n parentId?: string;\n level: number;\n items: MenuButtonT.Item[];\n minWidth?: string | number;\n}\n\nexport const SubMenu: React.FC<SubMenuProps> = (props) => {\n const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n const listRef = React.useRef<HTMLDivElement>(null);\n const rect = referenceElement?.getBoundingClientRect();\n const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n // this logic will be part of the new popper custom hook\n React.useLayoutEffect(() => {\n const listRect = listRef?.current?.getBoundingClientRect();\n if (!listRect) return;\n if (level === 1) {\n if (listRect.bottom < window.innerHeight) {\n setCoords({ x: 0, y: rect?.height || 0 });\n } else {\n setCoords({ x: 0, y: -listRect.height });\n }\n return;\n }\n if (listRect.right > window.innerWidth) {\n setCoords({ x: -(rect?.width || 0), y: 0 });\n } else {\n setCoords({ x: rect?.width || 0, y: 0 });\n }\n }, [level, rect?.height, rect?.width, referenceElement]);\n\n const config = {\n options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n direction: DIRECTIONS.VERTICAL,\n focusedOption,\n setFocusedOption,\n };\n\n const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n const { onKeyDown, onBlur } = getWrapperProps();\n\n const handleOnMenuKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n onKeyDown(event);\n },\n [onKeyDown],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n setTimeout(() => {\n if (!listRef.current?.contains(document.activeElement)) {\n setShowSubMenu(false);\n }\n });\n onBlur(e);\n },\n [onBlur, setShowSubMenu],\n );\n\n console.log(minWidth, 'minWidth');\n\n const subMenuStyles = useMemo(\n () => ({\n position: 'absolute',\n top: coords.y,\n left: coords.x,\n zIndex: 1001 + level,\n minWidth,\n }),\n [coords, level, minWidth],\n );\n\n if (!referenceElement || !showSubMenu) return null;\n\n return (\n <StyledMenu\n innerRef={listRef}\n role=\"menu\"\n onKeyDown={handleOnMenuKeyDown}\n onBlur={handleOnBlur}\n style={subMenuStyles}\n >\n {items.map((item) => (\n <ItemFactory\n key={item.dsId}\n item={item}\n selectionMode={selectionMode}\n level={level}\n parentId={parentId}\n {...getItemProps(item.dsId)}\n />\n ))}\n </StyledMenu>\n );\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["React"]
7
+ }
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
3
+ const defaultProps = {
4
+ selectedKeys: [],
5
+ onSelectionChange: () => {
6
+ }
7
+ };
8
+ const DSDMenuButtonPropTypes = {
9
+ ...globalAttributesPropTypes,
10
+ ...xstyledPropTypes,
11
+ items: PropTypes.arrayOf(
12
+ PropTypes.shape({
13
+ dsId: PropTypes.string.isRequired,
14
+ label: PropTypes.string,
15
+ type: PropTypes.oneOf(["separator", "section", "single", "multiple", void 0])
16
+ })
17
+ ).description("Array of items to be displayed in the dropdown").isRequired,
18
+ TriggerElement: PropTypes.node.description("Component to be used as the trigger element").isRequired,
19
+ selectedKeys: PropTypes.arrayOf(PropTypes.string).description("Array of selected keys"),
20
+ onSelectionChange: PropTypes.func.description("Function to be called when selection changes"),
21
+ triggerElementProps: PropTypes.object.description("Props to be passed to the trigger element"),
22
+ selectionMode: PropTypes.oneOf(["single", "multiple"]).description("Selection mode"),
23
+ menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
24
+ "Minimum width of the main dropdown"
25
+ ),
26
+ ItemRenderer: PropTypes.node.description("Component to be used to render the items")
27
+ };
28
+ const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes;
29
+ export {
30
+ DSDMenuButtonPropTypes,
31
+ DSDMenuButtonPropTypesSchema,
32
+ defaultProps
33
+ };
34
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace MenuButtonT {\n export interface RequiredProps {\n items: Item[];\n TriggerElement: React.ComponentType<TriggerElementProps>;\n }\n\n export interface DefaultProps {\n selectedKeys: string[];\n onSelectionChange: (selectedKeys: string[]) => void;\n }\n\n export interface OptionalProps<T extends object = object> {\n triggerElementProps?: T;\n selectionMode?: 'single' | 'multiple';\n menuMinWidth?: string | number;\n ItemRenderer?: React.ComponentType<{ item: Item; isSelected: boolean }>;\n }\n\n export interface Props<T extends object = object>\n extends Partial<DefaultProps>,\n OptionalProps<T>,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps<T extends object = object>\n extends DefaultProps,\n OptionalProps<T>,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export type Item = {\n dsId: string;\n label: string;\n type?: 'separator' | 'section';\n childrens?: Item[];\n subitems: Item[];\n selectionMode?: 'single' | 'multiple';\n minWidth?: string;\n };\n\n export interface TriggerElementProps {\n isOpen: boolean;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n attributes: {\n 'aria-haspopup': string;\n 'aria-expanded': boolean;\n };\n listeners: {\n onKeyDown: (e: React.KeyboardEvent) => void;\n };\n triggerElementProps?: OptionalProps['triggerElementProps'];\n }\n}\n\nexport const defaultProps: MenuButtonT.DefaultProps = {\n selectedKeys: [],\n onSelectionChange: () => {},\n};\n\nexport const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string.isRequired,\n label: PropTypes.string,\n type: PropTypes.oneOf(['separator', 'section', 'single', 'multiple', undefined]),\n }),\n ).description('Array of items to be displayed in the dropdown').isRequired,\n TriggerElement: PropTypes.node.description('Component to be used as the trigger element').isRequired,\n selectedKeys: PropTypes.arrayOf(PropTypes.string).description('Array of selected keys'),\n onSelectionChange: PropTypes.func.description('Function to be called when selection changes'),\n triggerElementProps: PropTypes.object.description('Props to be passed to the trigger element'),\n selectionMode: PropTypes.oneOf(['single', 'multiple']).description('Selection mode'),\n menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the main dropdown',\n ),\n ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n};\n\nexport const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes as unknown as WeakValidationMap<\n MenuButtonT.Props<object>\n>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA6DhE,MAAM,eAAyC;AAAA,EACpD,cAAc,CAAC;AAAA,EACf,mBAAmB,MAAM;AAAA,EAAC;AAC5B;AAEO,MAAM,yBAAuE;AAAA,EAClF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU;AAAA,IACf,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,OAAO;AAAA,MACvB,OAAO,UAAU;AAAA,MACjB,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,UAAU,YAAY,MAAS,CAAC;AAAA,IACjF,CAAC;AAAA,EACH,EAAE,YAAY,gDAAgD,EAAE;AAAA,EAChE,gBAAgB,UAAU,KAAK,YAAY,6CAA6C,EAAE;AAAA,EAC1F,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB;AAAA,EACtF,mBAAmB,UAAU,KAAK,YAAY,8CAA8C;AAAA,EAC5F,qBAAqB,UAAU,OAAO,YAAY,2CAA2C;AAAA,EAC7F,eAAe,UAAU,MAAM,CAAC,UAAU,UAAU,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnF,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AAAA,EACA,cAAc,UAAU,KAAK,YAAY,0CAA0C;AACrF;AAEO,MAAM,+BAA+B;",
6
+ "names": []
7
+ }
@@ -0,0 +1,98 @@
1
+ import * as React from "react";
2
+ import { xStyledCommonProps, styled } from "@elliemae/ds-system";
3
+ const StyledMenuButtonWrapper = styled("div")`
4
+ position: relative;
5
+ `;
6
+ const StyledMenu = styled("ul")`
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 1px;
10
+ list-style-type: none;
11
+ padding: 0;
12
+ margin: 0;
13
+ background-color: white;
14
+ /* height: 100%; */
15
+ ${xStyledCommonProps}
16
+ box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
17
+ 0 2px 4px rgba(16, 22, 26, 0.2),
18
+ 0 8px 24px rgba(16, 22, 26, 0.2);
19
+ `;
20
+ const StyledMenuItem = styled("li")`
21
+ position: relative;
22
+ background-color: white;
23
+ display: flex;
24
+ margin: 0;
25
+ min-height: 32px;
26
+ width: ${({ isVertical, level }) => !isVertical && level === 0 ? "auto" : "100%"};
27
+ cursor: pointer;
28
+
29
+ ul li {
30
+ min-width: 200px;
31
+ }
32
+
33
+ &:hover {
34
+ background-color: brand-200;
35
+ }
36
+
37
+ a:focus {
38
+ outline: 1px solid brand-500;
39
+ background-color: brand-200;
40
+ }
41
+
42
+ ${({ isOpen, theme }) => isOpen ? `background-color: ${theme.colors.brand["200"]}` : ""}
43
+ `;
44
+ const StyledMenuItemContent = styled("a")`
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: space-between;
48
+ width: 100%;
49
+ text-decoration: none;
50
+ color: black;
51
+ &:focus {
52
+ outline: none;
53
+ }
54
+ ${({ hasChildren }) => hasChildren ? "padding-left: 16px;" : "padding: 0 16px;"}
55
+ ${xStyledCommonProps}
56
+ `;
57
+ const StyledLeftContent = styled("div")`
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 4px;
61
+ height: 100%;
62
+ `;
63
+ const StyledRightContent = styled("div")`
64
+ display: flex;
65
+ align-items: center;
66
+ `;
67
+ const StyledSeparator = styled("hr")`
68
+ border: 0;
69
+ border-top: 1px solid #697489;
70
+ margin: 4px 0px;
71
+ padding: 0;
72
+ `;
73
+ const StyledSectionLabel = styled("div")`
74
+ color: neutral-500;
75
+ display: flex;
76
+ flex-direction: column;
77
+ gap: 1px;
78
+ padding: 0 16px;
79
+ min-height: 24px;
80
+ justify-content: center;
81
+ `;
82
+ const StyledSection = styled("div")`
83
+ display: flex;
84
+ flex-direction: column;
85
+ gap: 1px;
86
+ `;
87
+ export {
88
+ StyledLeftContent,
89
+ StyledMenu,
90
+ StyledMenuButtonWrapper,
91
+ StyledMenuItem,
92
+ StyledMenuItemContent,
93
+ StyledRightContent,
94
+ StyledSection,
95
+ StyledSectionLabel,
96
+ StyledSeparator
97
+ };
98
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { xStyledCommonProps, styled } from '@elliemae/ds-system';\n\nexport const StyledMenuButtonWrapper = styled('div')`\n position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n display: flex;\n flex-direction: column;\n gap: 1px;\n list-style-type: none;\n padding: 0;\n margin: 0;\n background-color: white;\n /* height: 100%; */\n ${xStyledCommonProps}\n box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n 0 2px 4px rgba(16, 22, 26, 0.2),\n 0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{ isVertical?: boolean; level?: number; isOpen?: boolean }>`\n position: relative;\n background-color: white;\n display: flex;\n margin: 0;\n min-height: 32px;\n width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n cursor: pointer;\n\n ul li {\n min-width: 200px;\n }\n\n &:hover {\n background-color: brand-200;\n }\n\n a:focus {\n outline: 1px solid brand-500;\n background-color: brand-200;\n }\n\n ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n text-decoration: none;\n color: black;\n &:focus {\n outline: none;\n }\n ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n display: flex;\n align-items: center;\n gap: 4px;\n height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n color: neutral-500;\n display: flex;\n flex-direction: column;\n gap: 1px;\n padding: 0 16px;\n min-height: 24px;\n justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n display: flex;\n flex-direction: column;\n gap: 1px;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,cAAc;AAEpC,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,iBAAiB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhF,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,wBAAwB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ import { type MenuButtonT } from './react-desc-prop-types.js';
2
+ declare const DSMenuButton: {
3
+ <T extends object = object>(props: MenuButtonT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
4
+ displayName: string;
5
+ };
6
+ declare const DSMenuButtonWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<MenuButtonT.Props<object>>;
7
+ export { DSMenuButton, DSMenuButtonWithSchema };
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import type { MenuButtonT } from './react-desc-prop-types.js';
3
+ interface MenuButtonContextProps<T extends object = object> {
4
+ focusedOption: string | null;
5
+ setFocusedOption: React.Dispatch<React.SetStateAction<string | null>>;
6
+ selectedKeys: string[];
7
+ onSelectionChange: (selectedKeys: string[], parentId: string, item: MenuButtonT.Item) => void;
8
+ propsWithDefault: MenuButtonT.InternalProps<T>;
9
+ }
10
+ export declare const MenuButtonContext: React.Context<MenuButtonContextProps<object>>;
11
+ export {};
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { type MenuButtonT } from '../react-desc-prop-types.js';
3
+ export declare const useDSMenuButton: <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {
4
+ propsWithDefault: MenuButtonT.InternalProps<T>;
5
+ focusedOption: string | null;
6
+ setFocusedOption: import("react").Dispatch<import("react").SetStateAction<string | null>>;
7
+ selectedKeys: string[];
8
+ onSelectionChange: (selectedKeys: string[]) => void;
9
+ };
@@ -0,0 +1,3 @@
1
+ import type { WeakValidationMap } from 'react';
2
+ import { type MenuButtonT } from '../react-desc-prop-types.js';
3
+ export declare const useValidateProps: <T extends object = object>(props: MenuButtonT.InternalProps<T>, propTypes: WeakValidationMap<unknown>) => void;
@@ -0,0 +1,5 @@
1
+ export declare const DSMenuButtonName = "DSMenuButton";
2
+ export declare const MENU_BUTTON_SLOTS: {
3
+ readonly root: "root";
4
+ };
5
+ export declare const MENU_BUTTON_DATATEST_ID: Record<string, string>;
@@ -0,0 +1,3 @@
1
+ export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';
2
+ export { type MenuButtonT } from './react-desc-prop-types.js';
3
+ export { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from './constants/index.js';
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
3
+ import type { MenuButtonT } from '../react-desc-prop-types.js';
4
+ interface ItemFactoryProps {
5
+ item: MenuButtonT.Item;
6
+ level: number;
7
+ selectionMode?: 'single' | 'multiple';
8
+ parentId?: string;
9
+ tabIndex: TypescriptHelpersT.WCAGTabIndex;
10
+ onFocus: React.FocusEventHandler;
11
+ innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
12
+ }
13
+ export declare const ItemFactory: React.FC<ItemFactoryProps>;
14
+ export {};
@@ -0,0 +1 @@
1
+ export declare const MenuButtonContent: () => import("react/jsx-runtime.js").JSX.Element;
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
3
+ import type { MenuButtonT } from '../react-desc-prop-types.js';
4
+ export declare const MenuItemAddon: React.MemoExoticComponent<({ level, isOpen }: {
5
+ level: number;
6
+ isOpen: boolean;
7
+ }) => import("react/jsx-runtime.js").JSX.Element>;
8
+ export declare const MenuItem: ({ innerRef, tabIndex, onFocus, selectionMode, item, level, parentId, isVertical, }: {
9
+ selectionMode?: 'single' | 'multiple';
10
+ item: MenuButtonT.Item;
11
+ level: number;
12
+ parentId: string | undefined;
13
+ isVertical?: boolean;
14
+ tabIndex: number;
15
+ onFocus: React.FocusEventHandler;
16
+ innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
17
+ }) => import("react/jsx-runtime.js").JSX.Element;
18
+ export declare const Separator: () => import("react/jsx-runtime.js").JSX.Element;
19
+ export declare const Section: ({ item }: {
20
+ item: MenuButtonT.Item;
21
+ }) => import("react/jsx-runtime.js").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import type { MenuButtonT } from '../react-desc-prop-types.js';
3
+ interface SubMenuProps {
4
+ referenceElement: HTMLElement | null;
5
+ showSubMenu: boolean;
6
+ selectionMode?: 'single' | 'multiple';
7
+ setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;
8
+ parentId?: string;
9
+ level: number;
10
+ items: MenuButtonT.Item[];
11
+ minWidth?: string | number;
12
+ }
13
+ export declare const SubMenu: React.FC<SubMenuProps>;
14
+ export {};
@@ -0,0 +1,51 @@
1
+ import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
2
+ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
3
+ import type { WeakValidationMap } from 'react';
4
+ export declare namespace MenuButtonT {
5
+ interface RequiredProps {
6
+ items: Item[];
7
+ TriggerElement: React.ComponentType<TriggerElementProps>;
8
+ }
9
+ interface DefaultProps {
10
+ selectedKeys: string[];
11
+ onSelectionChange: (selectedKeys: string[]) => void;
12
+ }
13
+ interface OptionalProps<T extends object = object> {
14
+ triggerElementProps?: T;
15
+ selectionMode?: 'single' | 'multiple';
16
+ menuMinWidth?: string | number;
17
+ ItemRenderer?: React.ComponentType<{
18
+ item: Item;
19
+ isSelected: boolean;
20
+ }>;
21
+ }
22
+ interface Props<T extends object = object> extends Partial<DefaultProps>, OptionalProps<T>, Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>, XstyledProps, RequiredProps {
23
+ }
24
+ interface InternalProps<T extends object = object> extends DefaultProps, OptionalProps<T>, Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>, XstyledProps, RequiredProps {
25
+ }
26
+ type Item = {
27
+ dsId: string;
28
+ label: string;
29
+ type?: 'separator' | 'section';
30
+ childrens?: Item[];
31
+ subitems: Item[];
32
+ selectionMode?: 'single' | 'multiple';
33
+ minWidth?: string;
34
+ };
35
+ interface TriggerElementProps {
36
+ isOpen: boolean;
37
+ innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
38
+ setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
39
+ attributes: {
40
+ 'aria-haspopup': string;
41
+ 'aria-expanded': boolean;
42
+ };
43
+ listeners: {
44
+ onKeyDown: (e: React.KeyboardEvent) => void;
45
+ };
46
+ triggerElementProps?: OptionalProps['triggerElementProps'];
47
+ }
48
+ }
49
+ export declare const defaultProps: MenuButtonT.DefaultProps;
50
+ export declare const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>>;
51
+ export declare const DSDMenuButtonPropTypesSchema: WeakValidationMap<MenuButtonT.Props<object>>;
@@ -0,0 +1,15 @@
1
+ export declare const StyledMenuButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
2
+ export declare const StyledMenu: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, import("@xstyled/styled-components").Props<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").TypographyProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@elliemae/ds-system").BoxShadowProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").FlexboxesProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").LayoutProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
3
+ export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, {
4
+ isVertical?: boolean | undefined;
5
+ level?: number | undefined;
6
+ isOpen?: boolean | undefined;
7
+ } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
8
+ export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, {
9
+ hasChildren?: boolean | undefined;
10
+ } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"a">, never>;
11
+ export declare const StyledLeftContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
12
+ export declare const StyledRightContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
13
+ export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"hr">, never>;
14
+ export declare const StyledSectionLabel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
15
+ export declare const StyledSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/package.json ADDED
@@ -0,0 +1,76 @@
1
+ {
2
+ "name": "@elliemae/ds-menu-button",
3
+ "version": "3.39.0-rc.1",
4
+ "license": "MIT",
5
+ "description": "ICE MT - Dimsum - Menu Button",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/types/index.d.ts",
15
+ "import": "./dist/esm/index.js",
16
+ "require": "./dist/cjs/index.js"
17
+ }
18
+ },
19
+ "sideEffects": [
20
+ "*.css",
21
+ "*.scss"
22
+ ],
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "https://git.elliemae.io/platform-ui/dimsum.git"
26
+ },
27
+ "engines": {
28
+ "pnpm": ">=6",
29
+ "node": ">=16"
30
+ },
31
+ "author": "ICE MT",
32
+ "jestSonar": {
33
+ "sonar56x": true,
34
+ "reportPath": "reports",
35
+ "reportFile": "tests.xml",
36
+ "indent": 4
37
+ },
38
+ "dependencies": {
39
+ "@xstyled/styled-components": "~3.6.0",
40
+ "uid": "^2.0.2",
41
+ "@elliemae/ds-button-v2": "3.39.0-rc.1",
42
+ "@elliemae/ds-grid": "3.39.0-rc.1",
43
+ "@elliemae/ds-hooks-keyboard-navigation": "3.39.0-rc.1",
44
+ "@elliemae/ds-icons": "3.39.0-rc.1",
45
+ "@elliemae/ds-system": "3.39.0-rc.1",
46
+ "@elliemae/ds-typescript-helpers": "3.39.0-rc.1",
47
+ "@elliemae/ds-typography": "3.39.0-rc.1",
48
+ "@elliemae/ds-props-helpers": "3.39.0-rc.1"
49
+ },
50
+ "devDependencies": {
51
+ "@elliemae/pui-cli": "9.0.0-next.50",
52
+ "@xstyled/system": "3.7.0",
53
+ "lodash": "^4.17.21",
54
+ "styled-components": "~5.3.9",
55
+ "@elliemae/ds-monorepo-devops": "3.39.0-rc.1"
56
+ },
57
+ "peerDependencies": {
58
+ "lodash": "^4.17.21",
59
+ "react": "^17.0.2",
60
+ "react-dom": "^17.0.2",
61
+ "styled-components": "~5.3.9"
62
+ },
63
+ "publishConfig": {
64
+ "access": "public",
65
+ "typeSafety": false
66
+ },
67
+ "scripts": {
68
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
69
+ "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
70
+ "lint": "node ../../../scripts/lint.mjs --fix",
71
+ "lint:strict": "node ../../../scripts/lint-strict.mjs",
72
+ "dts": "node ../../../scripts/dts.mjs",
73
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
74
+ "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
75
+ }
76
+ }