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

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 (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
+ }