@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.
- package/dist/cjs/DSMenuButton.js +50 -0
- package/dist/cjs/DSMenuButton.js.map +7 -0
- package/dist/cjs/DSMenuButtonCTX.js +38 -0
- package/dist/cjs/DSMenuButtonCTX.js.map +7 -0
- package/dist/cjs/config/useMenuButton.js +55 -0
- package/dist/cjs/config/useMenuButton.js.map +7 -0
- package/dist/cjs/config/useValidateProps.js +40 -0
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/constants/index.js +43 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +41 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/parts/ItemFactory.js +66 -0
- package/dist/cjs/parts/ItemFactory.js.map +7 -0
- package/dist/cjs/parts/MenuButtonContent.js +157 -0
- package/dist/cjs/parts/MenuButtonContent.js.map +7 -0
- package/dist/cjs/parts/MenuItem.js +244 -0
- package/dist/cjs/parts/MenuItem.js.map +7 -0
- package/dist/cjs/parts/SubMenu.js +126 -0
- package/dist/cjs/parts/SubMenu.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +64 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled.js +128 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/DSMenuButton.js +20 -0
- package/dist/esm/DSMenuButton.js.map +7 -0
- package/dist/esm/DSMenuButtonCTX.js +8 -0
- package/dist/esm/DSMenuButtonCTX.js.map +7 -0
- package/dist/esm/config/useMenuButton.js +25 -0
- package/dist/esm/config/useMenuButton.js.map +7 -0
- package/dist/esm/config/useValidateProps.js +10 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +13 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +11 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/package.json +7 -0
- package/dist/esm/parts/ItemFactory.js +36 -0
- package/dist/esm/parts/ItemFactory.js.map +7 -0
- package/dist/esm/parts/MenuButtonContent.js +127 -0
- package/dist/esm/parts/MenuButtonContent.js.map +7 -0
- package/dist/esm/parts/MenuItem.js +227 -0
- package/dist/esm/parts/MenuItem.js.map +7 -0
- package/dist/esm/parts/SubMenu.js +96 -0
- package/dist/esm/parts/SubMenu.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +34 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled.js +98 -0
- package/dist/esm/styled.js.map +7 -0
- package/dist/types/DSMenuButton.d.ts +7 -0
- package/dist/types/DSMenuButtonCTX.d.ts +11 -0
- package/dist/types/config/useMenuButton.d.ts +9 -0
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants/index.d.ts +5 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/parts/ItemFactory.d.ts +14 -0
- package/dist/types/parts/MenuButtonContent.d.ts +1 -0
- package/dist/types/parts/MenuItem.d.ts +21 -0
- package/dist/types/parts/SubMenu.d.ts +14 -0
- package/dist/types/react-desc-prop-types.d.ts +51 -0
- package/dist/types/styled.d.ts +15 -0
- 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,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
|
+
}
|