@elliemae/ds-menu-button 3.40.0-rc.2 → 3.40.0-rc.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/parts/MenuItem.js +26 -28
- package/dist/cjs/parts/MenuItem.js.map +2 -2
- package/dist/cjs/styled.js +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/parts/MenuItem.js +27 -29
- package/dist/esm/parts/MenuItem.js.map +2 -2
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/package.json +10 -10
|
@@ -181,7 +181,7 @@ const MenuItem = ({
|
|
|
181
181
|
isVertical,
|
|
182
182
|
isDisabled: item.disabled,
|
|
183
183
|
children: [
|
|
184
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
185
185
|
import_styled.StyledMenuItemContent,
|
|
186
186
|
{
|
|
187
187
|
role,
|
|
@@ -195,16 +195,13 @@ const MenuItem = ({
|
|
|
195
195
|
onFocus,
|
|
196
196
|
tabIndex,
|
|
197
197
|
"aria-disabled": item.disabled ? "true" : "false",
|
|
198
|
-
children:
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
item,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
level
|
|
206
|
-
}
|
|
207
|
-
)
|
|
198
|
+
children: [
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftContent, { children: [
|
|
200
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionAddon, { selectionMode: selectionMode || item.type, item, selectedKeys }),
|
|
201
|
+
ItemRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { item, isSelected: selectedKeys.includes(item.dsId) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: item.label })
|
|
202
|
+
] }),
|
|
203
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContent, { children: item.subitems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
|
|
204
|
+
]
|
|
208
205
|
}
|
|
209
206
|
),
|
|
210
207
|
item.subitems && showSubMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -224,28 +221,29 @@ const MenuItem = ({
|
|
|
224
221
|
}
|
|
225
222
|
);
|
|
226
223
|
};
|
|
227
|
-
const MenuItemContent = import_react.default.memo(
|
|
228
|
-
({
|
|
229
|
-
item,
|
|
230
|
-
selectionMode,
|
|
231
|
-
selectedKeys,
|
|
232
|
-
showSubMenu,
|
|
233
|
-
level
|
|
234
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
235
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftContent, { children: [
|
|
236
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionAddon, { selectionMode, item, selectedKeys }),
|
|
237
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: item.label })
|
|
238
|
-
] }),
|
|
239
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContent, { children: item.subitems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
|
|
240
|
-
] })
|
|
241
|
-
);
|
|
242
224
|
const SelectionAddon = ({
|
|
243
225
|
item,
|
|
244
226
|
selectedKeys,
|
|
245
227
|
selectionMode
|
|
246
228
|
}) => {
|
|
247
|
-
if (selectionMode) {
|
|
248
|
-
return
|
|
229
|
+
if (selectionMode === "multiple" && selectedKeys.includes(item.dsId)) {
|
|
230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) });
|
|
231
|
+
}
|
|
232
|
+
if (selectionMode === "single" && selectedKeys.includes(item.dsId)) {
|
|
233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { width: "16px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
234
|
+
"div",
|
|
235
|
+
{
|
|
236
|
+
style: {
|
|
237
|
+
width: 8,
|
|
238
|
+
height: 8,
|
|
239
|
+
borderRadius: "50%",
|
|
240
|
+
backgroundColor: "#005EA2"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
) });
|
|
244
|
+
}
|
|
245
|
+
if ((selectionMode === "single" || selectionMode === "multiple") && selectedKeys[0] !== item.dsId) {
|
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 16 } });
|
|
249
247
|
}
|
|
250
248
|
return null;
|
|
251
249
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MenuItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n StyledMenuItem,\n StyledMenuItemContent,\n StyledLeftContent,\n StyledRightContent,\n StyledSeparator,\n StyledSection,\n} from '../styled.js';\nimport { Menu } from './Menu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n if (level === 0)\n return isOpen ? (\n <TriangleUpSmall color={['brand-primary', '600']} />\n ) : (\n <TriangleDownSmall color={['brand-primary', '600']} />\n );\n return isOpen ? (\n <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n ) : (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n );\n});\n\nexport const MenuItem = ({\n innerRef,\n tabIndex,\n onFocus,\n selectionMode,\n item,\n level,\n parentId,\n isVertical,\n}: {\n selectionMode?: 'single' | 'multiple';\n item: MenuButtonT.Item;\n level: number;\n parentId: string | undefined;\n isVertical?: boolean;\n tabIndex: number;\n onFocus: React.FocusEventHandler;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n const {\n setFocusedOption,\n focusedOption,\n selectedKeys,\n onSelectionChange,\n triggerElementRef,\n setIsOpen,\n propsWithDefault: { ItemRenderer },\n } = React.useContext(MenuButtonContext);\n const listRef = React.useRef(null);\n const [showSubMenu, setShowSubMenu] = useState(false);\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n if (node !== null) {\n if (focusedOption === item.dsId) node.focus();\n }\n return node;\n },\n [focusedOption, item.dsId],\n );\n\n const selectionLogic = useCallback(() => {\n if (item.disabled) return;\n if (selectionMode === 'single') {\n const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n if (selectionMode === 'multiple') {\n const newValue = selectedKeys.includes(item.dsId)\n ? selectedKeys.filter((key: string) => key !== item.dsId)\n : [...selectedKeys, item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (selectionMode !== 'single' || item.disabled) {\n e.stopPropagation();\n }\n selectionLogic();\n },\n [item.disabled, selectionLogic, selectionMode],\n );\n const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n (event) => {\n // Enter to close the menu and focus the trigger element\n if (event.key === 'Enter' && !item.disabled) {\n setIsOpen(false);\n triggerElementRef?.focus();\n }\n // selection\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n selectionLogic();\n }\n // open submenu logic\n if (\n ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n item.subitems\n ) {\n event.preventDefault();\n event.stopPropagation();\n setShowSubMenu(true);\n setFocusedOption(item.subitems[0].dsId);\n }\n\n // close submenu logic\n if (event.key === 'ArrowLeft' && level >= 2) {\n event.preventDefault();\n event.stopPropagation();\n if (parentId) setFocusedOption(parentId);\n }\n if (event.key === 'Escape' && level > 0) {\n if (parentId !== undefined) {\n setFocusedOption(parentId);\n }\n }\n },\n [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, selectionLogic, setFocusedOption, parentId],\n );\n\n const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // logic to close all submenus and focus on parent\n if (e.key === 'Enter') {\n setShowSubMenu(false);\n if (level === 0) {\n setFocusedOption(item.dsId);\n }\n }\n },\n [item.dsId, level, setFocusedOption],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n setShowSubMenu(true);\n setFocusedOption(item.dsId);\n }, [item.dsId, setFocusedOption]);\n\n const handleOnMouseLeave = useCallback(() => {\n setShowSubMenu(false);\n }, []);\n\n const ariaExpanded = useMemo(() => {\n if (item.subitems) {\n return showSubMenu ? 'true' : 'false';\n }\n return undefined;\n }, [item.subitems, showSubMenu]);\n\n const role = useMemo(() => {\n if (selectionMode === 'single') {\n return 'menuitemradio';\n }\n if (selectionMode === 'multiple') {\n return 'menuitemcheckbox';\n }\n return 'menuitem';\n }, [selectionMode]);\n\n const ariaChecked = useMemo(() => {\n if (selectionMode === 'multiple' || selectionMode === 'single') {\n return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n }\n return undefined;\n }, [item.dsId, selectionMode, selectedKeys]);\n\n return (\n <StyledMenuItem\n role=\"none\"\n innerRef={listRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onKeyDown={handleOnLIKeyDown}\n isOpen={showSubMenu}\n level={level}\n isVertical={isVertical}\n isDisabled={item.disabled}\n >\n <StyledMenuItemContent\n role={role}\n aria-checked={ariaChecked}\n aria-haspopup={item.subitems ? 'true' : 'false'}\n aria-expanded={ariaExpanded}\n innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n onKeyDown={onItemKeyDown}\n onClick={handleOnClick}\n hasChildren={item.subitems !== undefined}\n onFocus={onFocus}\n tabIndex={tabIndex}\n aria-disabled={item.disabled ? 'true' : 'false'}\n >\n {ItemRenderer ? (\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n StyledMenuItem,\n StyledMenuItemContent,\n StyledLeftContent,\n StyledRightContent,\n StyledSeparator,\n StyledSection,\n} from '../styled.js';\nimport { Menu } from './Menu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n if (level === 0)\n return isOpen ? (\n <TriangleUpSmall color={['brand-primary', '600']} />\n ) : (\n <TriangleDownSmall color={['brand-primary', '600']} />\n );\n return isOpen ? (\n <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n ) : (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n );\n});\n\nexport const MenuItem = ({\n innerRef,\n tabIndex,\n onFocus,\n selectionMode,\n item,\n level,\n parentId,\n isVertical,\n}: {\n selectionMode?: 'single' | 'multiple';\n item: MenuButtonT.Item;\n level: number;\n parentId: string | undefined;\n isVertical?: boolean;\n tabIndex: number;\n onFocus: React.FocusEventHandler;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n const {\n setFocusedOption,\n focusedOption,\n selectedKeys,\n onSelectionChange,\n triggerElementRef,\n setIsOpen,\n propsWithDefault: { ItemRenderer },\n } = React.useContext(MenuButtonContext);\n const listRef = React.useRef(null);\n const [showSubMenu, setShowSubMenu] = useState(false);\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n if (node !== null) {\n if (focusedOption === item.dsId) node.focus();\n }\n return node;\n },\n [focusedOption, item.dsId],\n );\n\n const selectionLogic = useCallback(() => {\n if (item.disabled) return;\n if (selectionMode === 'single') {\n const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n if (selectionMode === 'multiple') {\n const newValue = selectedKeys.includes(item.dsId)\n ? selectedKeys.filter((key: string) => key !== item.dsId)\n : [...selectedKeys, item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (selectionMode !== 'single' || item.disabled) {\n e.stopPropagation();\n }\n selectionLogic();\n },\n [item.disabled, selectionLogic, selectionMode],\n );\n const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n (event) => {\n // Enter to close the menu and focus the trigger element\n if (event.key === 'Enter' && !item.disabled) {\n setIsOpen(false);\n triggerElementRef?.focus();\n }\n // selection\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n selectionLogic();\n }\n // open submenu logic\n if (\n ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n item.subitems\n ) {\n event.preventDefault();\n event.stopPropagation();\n setShowSubMenu(true);\n setFocusedOption(item.subitems[0].dsId);\n }\n\n // close submenu logic\n if (event.key === 'ArrowLeft' && level >= 2) {\n event.preventDefault();\n event.stopPropagation();\n if (parentId) setFocusedOption(parentId);\n }\n if (event.key === 'Escape' && level > 0) {\n if (parentId !== undefined) {\n setFocusedOption(parentId);\n }\n }\n },\n [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, selectionLogic, setFocusedOption, parentId],\n );\n\n const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // logic to close all submenus and focus on parent\n if (e.key === 'Enter') {\n setShowSubMenu(false);\n if (level === 0) {\n setFocusedOption(item.dsId);\n }\n }\n },\n [item.dsId, level, setFocusedOption],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n setShowSubMenu(true);\n setFocusedOption(item.dsId);\n }, [item.dsId, setFocusedOption]);\n\n const handleOnMouseLeave = useCallback(() => {\n setShowSubMenu(false);\n }, []);\n\n const ariaExpanded = useMemo(() => {\n if (item.subitems) {\n return showSubMenu ? 'true' : 'false';\n }\n return undefined;\n }, [item.subitems, showSubMenu]);\n\n const role = useMemo(() => {\n if (selectionMode === 'single') {\n return 'menuitemradio';\n }\n if (selectionMode === 'multiple') {\n return 'menuitemcheckbox';\n }\n return 'menuitem';\n }, [selectionMode]);\n\n const ariaChecked = useMemo(() => {\n if (selectionMode === 'multiple' || selectionMode === 'single') {\n return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n }\n return undefined;\n }, [item.dsId, selectionMode, selectedKeys]);\n\n return (\n <StyledMenuItem\n role=\"none\"\n innerRef={listRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onKeyDown={handleOnLIKeyDown}\n isOpen={showSubMenu}\n level={level}\n isVertical={isVertical}\n isDisabled={item.disabled}\n >\n <StyledMenuItemContent\n role={role}\n aria-checked={ariaChecked}\n aria-haspopup={item.subitems ? 'true' : 'false'}\n aria-expanded={ariaExpanded}\n innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n onKeyDown={onItemKeyDown}\n onClick={handleOnClick}\n hasChildren={item.subitems !== undefined}\n onFocus={onFocus}\n tabIndex={tabIndex}\n aria-disabled={item.disabled ? 'true' : 'false'}\n >\n <StyledLeftContent>\n <SelectionAddon selectionMode={selectionMode || item.type} item={item} selectedKeys={selectedKeys} />\n {ItemRenderer ? (\n <ItemRenderer item={item} isSelected={selectedKeys.includes(item.dsId)} />\n ) : (\n <DSTypography variant=\"b1\">{item.label}</DSTypography>\n )}\n </StyledLeftContent>\n <StyledRightContent>\n {item.subitems ? <MenuItemAddon isOpen={showSubMenu} level={level} /> : null}\n </StyledRightContent>\n </StyledMenuItemContent>\n {item.subitems && showSubMenu && (\n <Menu\n level={level + 1}\n items={item.subitems}\n showSubMenu={showSubMenu}\n setShowSubMenu={setShowSubMenu}\n referenceElement={referenceElement}\n parentId={item.dsId}\n selectionMode={item.selectionMode}\n minWidth={item.minWidth}\n />\n )}\n </StyledMenuItem>\n );\n};\n\nconst SelectionAddon = ({\n item,\n selectedKeys,\n selectionMode,\n}: {\n item: MenuButtonT.Item;\n selectedKeys: string[];\n selectionMode?: 'single' | 'multiple';\n}) => {\n if (selectionMode === 'multiple' && selectedKeys.includes(item.dsId)) {\n return (\n <Grid>\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n </Grid>\n );\n }\n if (selectionMode === 'single' && selectedKeys.includes(item.dsId)) {\n return (\n <Grid width=\"16px\">\n <div\n style={{\n width: 8,\n height: 8,\n borderRadius: '50%',\n backgroundColor: '#005EA2',\n }}\n />\n </Grid>\n );\n }\n if ((selectionMode === 'single' || selectionMode === 'multiple') && selectedKeys[0] !== item.dsId) {\n return <div style={{ width: 16 }} />;\n }\n return null;\n};\n\nexport const Separator = () => (\n <li role=\"none\" style={{ padding: '0px 16px' }}>\n <StyledSeparator role=\"separator\" />\n </li>\n);\n\nexport const Section = ({ item }: { item: MenuButtonT.Item }) => (\n <li role=\"none\" style={{ padding: '0px 16px', minHeight: 24, display: 'flex', alignItems: 'center' }}>\n <StyledSection role=\"presentation\">{item.label}</StyledSection>\n </li>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AArBN,mBAAsD;AACtD,sBAAmG;AAEnG,2BAA6B;AAC7B,uBAA0B;AAC1B,qBAAqB;AACrB,6BAAkC;AAClC,oBAOO;AACP,kBAAqB;AAGd,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,OAAO,OAAO,MAA0C;AACjG,MAAI,UAAU;AACZ,WAAO,SACL,4CAAC,mCAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAElD,4CAAC,qCAAkB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAExD,SAAO,SACL,4CAAC,oCAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE5D,4CAAC,qCAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAEjE,CAAC;AAEM,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MASM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,aAAa;AAAA,EACnC,IAAI,aAAAA,QAAM,WAAW,wCAAiB;AACtC,QAAM,UAAU,aAAAA,QAAM,OAAO,IAAI;AACjC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,cAAU;AAAA,IACd,CAAC,SAA6B;AAC5B,UAAI,SAAS,MAAM;AACjB,YAAI,kBAAkB,KAAK,KAAM,MAAK,MAAM;AAAA,MAC9C;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,eAAe,KAAK,IAAI;AAAA,EAC3B;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,KAAK,SAAU;AACnB,QAAI,kBAAkB,UAAU;AAC9B,YAAM,WAAW,KAAK,SAAS,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI;AAChE,wBAAkB,UAAU,YAAY,QAAQ,IAAI;AAAA,IACtD;AACA,QAAI,kBAAkB,YAAY;AAChC,YAAM,WAAW,aAAa,SAAS,KAAK,IAAI,IAC5C,aAAa,OAAO,CAAC,QAAgB,QAAQ,KAAK,IAAI,IACtD,CAAC,GAAG,cAAc,KAAK,IAAI;AAC/B,wBAAkB,UAAU,YAAY,QAAQ,IAAI;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,MAAM,mBAAmB,UAAU,cAAc,aAAa,CAAC;AAEnE,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,UAAI,kBAAkB,YAAY,KAAK,UAAU;AAC/C,UAAE,gBAAgB;AAAA,MACpB;AACA,qBAAe;AAAA,IACjB;AAAA,IACA,CAAC,KAAK,UAAU,gBAAgB,aAAa;AAAA,EAC/C;AACA,QAAM,oBAA4C;AAAA,IAChD,CAAC,UAAU;AAET,UAAI,MAAM,QAAQ,WAAW,CAAC,KAAK,UAAU;AAC3C,kBAAU,KAAK;AACf,2BAAmB,MAAM;AAAA,MAC3B;AAEA,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAe;AACrB,uBAAe;AAAA,MACjB;AAEA,WACI,MAAM,QAAQ,eAAe,UAAU,KAAO,MAAM,QAAQ,gBAAgB,UAAU,MACxF,KAAK,UACL;AACA,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,IAAI;AACnB,yBAAiB,KAAK,SAAS,CAAC,EAAE,IAAI;AAAA,MACxC;AAGA,UAAI,MAAM,QAAQ,eAAe,SAAS,GAAG;AAC3C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,YAAI,SAAU,kBAAiB,QAAQ;AAAA,MACzC;AACA,UAAI,MAAM,QAAQ,YAAY,QAAQ,GAAG;AACvC,YAAI,aAAa,QAAW;AAC1B,2BAAiB,QAAQ;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,KAAK,UAAU,KAAK,UAAU,OAAO,WAAW,mBAAmB,gBAAgB,kBAAkB,QAAQ;AAAA,EAChH;AAEA,QAAM,wBAAgD;AAAA,IACpD,CAAC,MAAM;AAEL,UAAI,EAAE,QAAQ,SAAS;AACrB,uBAAe,KAAK;AACpB,YAAI,UAAU,GAAG;AACf,2BAAiB,KAAK,IAAI;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,KAAK,MAAM,OAAO,gBAAgB;AAAA,EACrC;AAEA,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,mBAAe,IAAI;AACnB,qBAAiB,KAAK,IAAI;AAAA,EAC5B,GAAG,CAAC,KAAK,MAAM,gBAAgB,CAAC;AAEhC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,KAAK,UAAU;AACjB,aAAO,cAAc,SAAS;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,UAAU,WAAW,CAAC;AAE/B,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,kBAAkB,UAAU;AAC9B,aAAO;AAAA,IACT;AACA,QAAI,kBAAkB,YAAY;AAChC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,kBAAkB,cAAc,kBAAkB,UAAU;AAC9D,aAAO,aAAa,SAAS,KAAK,IAAI,IAAI,SAAS;AAAA,IACrD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,MAAM,eAAe,YAAY,CAAC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,MAEjB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,gBAAc;AAAA,YACd,iBAAe,KAAK,WAAW,SAAS;AAAA,YACxC,iBAAe;AAAA,YACf,cAAU,4BAAU,UAAU,SAAS,mBAAmB;AAAA,YAC1D,WAAW;AAAA,YACX,SAAS;AAAA,YACT,aAAa,KAAK,aAAa;AAAA,YAC/B;AAAA,YACA;AAAA,YACA,iBAAe,KAAK,WAAW,SAAS;AAAA,YAExC;AAAA,2DAAC,mCACC;AAAA,4DAAC,kBAAe,eAAe,iBAAiB,KAAK,MAAM,MAAY,cAA4B;AAAA,gBAClG,eACC,4CAAC,gBAAa,MAAY,YAAY,aAAa,SAAS,KAAK,IAAI,GAAG,IAExE,4CAAC,qCAAa,SAAQ,MAAM,eAAK,OAAM;AAAA,iBAE3C;AAAA,cACA,4CAAC,oCACE,eAAK,WAAW,4CAAC,iBAAc,QAAQ,aAAa,OAAc,IAAK,MAC1E;AAAA;AAAA;AAAA,QACF;AAAA,QACC,KAAK,YAAY,eAChB;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,QAAQ;AAAA,YACf,OAAO,KAAK;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,KAAK;AAAA,YACf,eAAe,KAAK;AAAA,YACpB,UAAU,KAAK;AAAA;AAAA,QACjB;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,kBAAkB,cAAc,aAAa,SAAS,KAAK,IAAI,GAAG;AACpE,WACE,4CAAC,uBACC,sDAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GACvD;AAAA,EAEJ;AACA,MAAI,kBAAkB,YAAY,aAAa,SAAS,KAAK,IAAI,GAAG;AAClE,WACE,4CAAC,uBAAK,OAAM,QACV;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,iBAAiB;AAAA,QACnB;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACA,OAAK,kBAAkB,YAAY,kBAAkB,eAAe,aAAa,CAAC,MAAM,KAAK,MAAM;AACjG,WAAO,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,GAAG;AAAA,EACpC;AACA,SAAO;AACT;AAEO,MAAM,YAAY,MACvB,4CAAC,QAAG,MAAK,QAAO,OAAO,EAAE,SAAS,WAAW,GAC3C,sDAAC,iCAAgB,MAAK,aAAY,GACpC;AAGK,MAAM,UAAU,CAAC,EAAE,KAAK,MAC7B,4CAAC,QAAG,MAAK,QAAO,OAAO,EAAE,SAAS,YAAY,WAAW,IAAI,SAAS,QAAQ,YAAY,SAAS,GACjG,sDAAC,+BAAc,MAAK,gBAAgB,eAAK,OAAM,GACjD;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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')<{\n isVertical?: boolean;\n level?: number;\n isOpen?: boolean;\n isDisabled?: boolean;\n}>`\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 ${({ isDisabled, theme }) =>\n isDisabled &&\n `\n color: ${theme.colors.neutral[
|
|
4
|
+
"sourcesContent": ["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')<{\n isVertical?: boolean;\n level?: number;\n isOpen?: boolean;\n isDisabled?: boolean;\n}>`\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 ${({ isDisabled, theme }) =>\n isDisabled &&\n `\n color: ${theme.colors.neutral[300]};\n * {\n cursor: not-allowed;\n }\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: inherit;\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 color: neutral-500;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAEpC,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,iBAAa,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,mCAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,qBAAiB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhF,CAAC,EAAE,YAAY,MAAM,MACrB,cACA;AAAA,aACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,GAInC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,4BAAwB,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,sBAAkB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useState, useCallback, useMemo } from "react";
|
|
4
4
|
import { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from "@elliemae/ds-icons";
|
|
5
5
|
import { DSTypography } from "@elliemae/ds-typography";
|
|
@@ -152,7 +152,7 @@ const MenuItem = ({
|
|
|
152
152
|
isVertical,
|
|
153
153
|
isDisabled: item.disabled,
|
|
154
154
|
children: [
|
|
155
|
-
/* @__PURE__ */
|
|
155
|
+
/* @__PURE__ */ jsxs(
|
|
156
156
|
StyledMenuItemContent,
|
|
157
157
|
{
|
|
158
158
|
role,
|
|
@@ -166,16 +166,13 @@ const MenuItem = ({
|
|
|
166
166
|
onFocus,
|
|
167
167
|
tabIndex,
|
|
168
168
|
"aria-disabled": item.disabled ? "true" : "false",
|
|
169
|
-
children:
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
item,
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
level
|
|
177
|
-
}
|
|
178
|
-
)
|
|
169
|
+
children: [
|
|
170
|
+
/* @__PURE__ */ jsxs(StyledLeftContent, { children: [
|
|
171
|
+
/* @__PURE__ */ jsx(SelectionAddon, { selectionMode: selectionMode || item.type, item, selectedKeys }),
|
|
172
|
+
ItemRenderer ? /* @__PURE__ */ jsx(ItemRenderer, { item, isSelected: selectedKeys.includes(item.dsId) }) : /* @__PURE__ */ jsx(DSTypography, { variant: "b1", children: item.label })
|
|
173
|
+
] }),
|
|
174
|
+
/* @__PURE__ */ jsx(StyledRightContent, { children: item.subitems ? /* @__PURE__ */ jsx(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
|
|
175
|
+
]
|
|
179
176
|
}
|
|
180
177
|
),
|
|
181
178
|
item.subitems && showSubMenu && /* @__PURE__ */ jsx(
|
|
@@ -195,28 +192,29 @@ const MenuItem = ({
|
|
|
195
192
|
}
|
|
196
193
|
);
|
|
197
194
|
};
|
|
198
|
-
const MenuItemContent = React2.memo(
|
|
199
|
-
({
|
|
200
|
-
item,
|
|
201
|
-
selectionMode,
|
|
202
|
-
selectedKeys,
|
|
203
|
-
showSubMenu,
|
|
204
|
-
level
|
|
205
|
-
}) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
206
|
-
/* @__PURE__ */ jsxs(StyledLeftContent, { children: [
|
|
207
|
-
/* @__PURE__ */ jsx(SelectionAddon, { selectionMode, item, selectedKeys }),
|
|
208
|
-
/* @__PURE__ */ jsx(DSTypography, { variant: "b1", children: item.label })
|
|
209
|
-
] }),
|
|
210
|
-
/* @__PURE__ */ jsx(StyledRightContent, { children: item.subitems ? /* @__PURE__ */ jsx(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
|
|
211
|
-
] })
|
|
212
|
-
);
|
|
213
195
|
const SelectionAddon = ({
|
|
214
196
|
item,
|
|
215
197
|
selectedKeys,
|
|
216
198
|
selectionMode
|
|
217
199
|
}) => {
|
|
218
|
-
if (selectionMode) {
|
|
219
|
-
return
|
|
200
|
+
if (selectionMode === "multiple" && selectedKeys.includes(item.dsId)) {
|
|
201
|
+
return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) });
|
|
202
|
+
}
|
|
203
|
+
if (selectionMode === "single" && selectedKeys.includes(item.dsId)) {
|
|
204
|
+
return /* @__PURE__ */ jsx(Grid, { width: "16px", children: /* @__PURE__ */ jsx(
|
|
205
|
+
"div",
|
|
206
|
+
{
|
|
207
|
+
style: {
|
|
208
|
+
width: 8,
|
|
209
|
+
height: 8,
|
|
210
|
+
borderRadius: "50%",
|
|
211
|
+
backgroundColor: "#005EA2"
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
) });
|
|
215
|
+
}
|
|
216
|
+
if ((selectionMode === "single" || selectionMode === "multiple") && selectedKeys[0] !== item.dsId) {
|
|
217
|
+
return /* @__PURE__ */ jsx("div", { style: { width: 16 } });
|
|
220
218
|
}
|
|
221
219
|
return null;
|
|
222
220
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n StyledMenuItem,\n StyledMenuItemContent,\n StyledLeftContent,\n StyledRightContent,\n StyledSeparator,\n StyledSection,\n} from '../styled.js';\nimport { Menu } from './Menu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n if (level === 0)\n return isOpen ? (\n <TriangleUpSmall color={['brand-primary', '600']} />\n ) : (\n <TriangleDownSmall color={['brand-primary', '600']} />\n );\n return isOpen ? (\n <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n ) : (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n );\n});\n\nexport const MenuItem = ({\n innerRef,\n tabIndex,\n onFocus,\n selectionMode,\n item,\n level,\n parentId,\n isVertical,\n}: {\n selectionMode?: 'single' | 'multiple';\n item: MenuButtonT.Item;\n level: number;\n parentId: string | undefined;\n isVertical?: boolean;\n tabIndex: number;\n onFocus: React.FocusEventHandler;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n const {\n setFocusedOption,\n focusedOption,\n selectedKeys,\n onSelectionChange,\n triggerElementRef,\n setIsOpen,\n propsWithDefault: { ItemRenderer },\n } = React.useContext(MenuButtonContext);\n const listRef = React.useRef(null);\n const [showSubMenu, setShowSubMenu] = useState(false);\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n if (node !== null) {\n if (focusedOption === item.dsId) node.focus();\n }\n return node;\n },\n [focusedOption, item.dsId],\n );\n\n const selectionLogic = useCallback(() => {\n if (item.disabled) return;\n if (selectionMode === 'single') {\n const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n if (selectionMode === 'multiple') {\n const newValue = selectedKeys.includes(item.dsId)\n ? selectedKeys.filter((key: string) => key !== item.dsId)\n : [...selectedKeys, item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (selectionMode !== 'single' || item.disabled) {\n e.stopPropagation();\n }\n selectionLogic();\n },\n [item.disabled, selectionLogic, selectionMode],\n );\n const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n (event) => {\n // Enter to close the menu and focus the trigger element\n if (event.key === 'Enter' && !item.disabled) {\n setIsOpen(false);\n triggerElementRef?.focus();\n }\n // selection\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n selectionLogic();\n }\n // open submenu logic\n if (\n ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n item.subitems\n ) {\n event.preventDefault();\n event.stopPropagation();\n setShowSubMenu(true);\n setFocusedOption(item.subitems[0].dsId);\n }\n\n // close submenu logic\n if (event.key === 'ArrowLeft' && level >= 2) {\n event.preventDefault();\n event.stopPropagation();\n if (parentId) setFocusedOption(parentId);\n }\n if (event.key === 'Escape' && level > 0) {\n if (parentId !== undefined) {\n setFocusedOption(parentId);\n }\n }\n },\n [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, selectionLogic, setFocusedOption, parentId],\n );\n\n const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // logic to close all submenus and focus on parent\n if (e.key === 'Enter') {\n setShowSubMenu(false);\n if (level === 0) {\n setFocusedOption(item.dsId);\n }\n }\n },\n [item.dsId, level, setFocusedOption],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n setShowSubMenu(true);\n setFocusedOption(item.dsId);\n }, [item.dsId, setFocusedOption]);\n\n const handleOnMouseLeave = useCallback(() => {\n setShowSubMenu(false);\n }, []);\n\n const ariaExpanded = useMemo(() => {\n if (item.subitems) {\n return showSubMenu ? 'true' : 'false';\n }\n return undefined;\n }, [item.subitems, showSubMenu]);\n\n const role = useMemo(() => {\n if (selectionMode === 'single') {\n return 'menuitemradio';\n }\n if (selectionMode === 'multiple') {\n return 'menuitemcheckbox';\n }\n return 'menuitem';\n }, [selectionMode]);\n\n const ariaChecked = useMemo(() => {\n if (selectionMode === 'multiple' || selectionMode === 'single') {\n return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n }\n return undefined;\n }, [item.dsId, selectionMode, selectedKeys]);\n\n return (\n <StyledMenuItem\n role=\"none\"\n innerRef={listRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onKeyDown={handleOnLIKeyDown}\n isOpen={showSubMenu}\n level={level}\n isVertical={isVertical}\n isDisabled={item.disabled}\n >\n <StyledMenuItemContent\n role={role}\n aria-checked={ariaChecked}\n aria-haspopup={item.subitems ? 'true' : 'false'}\n aria-expanded={ariaExpanded}\n innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n onKeyDown={onItemKeyDown}\n onClick={handleOnClick}\n hasChildren={item.subitems !== undefined}\n onFocus={onFocus}\n tabIndex={tabIndex}\n aria-disabled={item.disabled ? 'true' : 'false'}\n >\n {ItemRenderer ? (\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyBjB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n StyledMenuItem,\n StyledMenuItemContent,\n StyledLeftContent,\n StyledRightContent,\n StyledSeparator,\n StyledSection,\n} from '../styled.js';\nimport { Menu } from './Menu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n if (level === 0)\n return isOpen ? (\n <TriangleUpSmall color={['brand-primary', '600']} />\n ) : (\n <TriangleDownSmall color={['brand-primary', '600']} />\n );\n return isOpen ? (\n <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n ) : (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n );\n});\n\nexport const MenuItem = ({\n innerRef,\n tabIndex,\n onFocus,\n selectionMode,\n item,\n level,\n parentId,\n isVertical,\n}: {\n selectionMode?: 'single' | 'multiple';\n item: MenuButtonT.Item;\n level: number;\n parentId: string | undefined;\n isVertical?: boolean;\n tabIndex: number;\n onFocus: React.FocusEventHandler;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n const {\n setFocusedOption,\n focusedOption,\n selectedKeys,\n onSelectionChange,\n triggerElementRef,\n setIsOpen,\n propsWithDefault: { ItemRenderer },\n } = React.useContext(MenuButtonContext);\n const listRef = React.useRef(null);\n const [showSubMenu, setShowSubMenu] = useState(false);\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n if (node !== null) {\n if (focusedOption === item.dsId) node.focus();\n }\n return node;\n },\n [focusedOption, item.dsId],\n );\n\n const selectionLogic = useCallback(() => {\n if (item.disabled) return;\n if (selectionMode === 'single') {\n const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n if (selectionMode === 'multiple') {\n const newValue = selectedKeys.includes(item.dsId)\n ? selectedKeys.filter((key: string) => key !== item.dsId)\n : [...selectedKeys, item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (selectionMode !== 'single' || item.disabled) {\n e.stopPropagation();\n }\n selectionLogic();\n },\n [item.disabled, selectionLogic, selectionMode],\n );\n const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n (event) => {\n // Enter to close the menu and focus the trigger element\n if (event.key === 'Enter' && !item.disabled) {\n setIsOpen(false);\n triggerElementRef?.focus();\n }\n // selection\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n selectionLogic();\n }\n // open submenu logic\n if (\n ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n item.subitems\n ) {\n event.preventDefault();\n event.stopPropagation();\n setShowSubMenu(true);\n setFocusedOption(item.subitems[0].dsId);\n }\n\n // close submenu logic\n if (event.key === 'ArrowLeft' && level >= 2) {\n event.preventDefault();\n event.stopPropagation();\n if (parentId) setFocusedOption(parentId);\n }\n if (event.key === 'Escape' && level > 0) {\n if (parentId !== undefined) {\n setFocusedOption(parentId);\n }\n }\n },\n [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, selectionLogic, setFocusedOption, parentId],\n );\n\n const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // logic to close all submenus and focus on parent\n if (e.key === 'Enter') {\n setShowSubMenu(false);\n if (level === 0) {\n setFocusedOption(item.dsId);\n }\n }\n },\n [item.dsId, level, setFocusedOption],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n setShowSubMenu(true);\n setFocusedOption(item.dsId);\n }, [item.dsId, setFocusedOption]);\n\n const handleOnMouseLeave = useCallback(() => {\n setShowSubMenu(false);\n }, []);\n\n const ariaExpanded = useMemo(() => {\n if (item.subitems) {\n return showSubMenu ? 'true' : 'false';\n }\n return undefined;\n }, [item.subitems, showSubMenu]);\n\n const role = useMemo(() => {\n if (selectionMode === 'single') {\n return 'menuitemradio';\n }\n if (selectionMode === 'multiple') {\n return 'menuitemcheckbox';\n }\n return 'menuitem';\n }, [selectionMode]);\n\n const ariaChecked = useMemo(() => {\n if (selectionMode === 'multiple' || selectionMode === 'single') {\n return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n }\n return undefined;\n }, [item.dsId, selectionMode, selectedKeys]);\n\n return (\n <StyledMenuItem\n role=\"none\"\n innerRef={listRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onKeyDown={handleOnLIKeyDown}\n isOpen={showSubMenu}\n level={level}\n isVertical={isVertical}\n isDisabled={item.disabled}\n >\n <StyledMenuItemContent\n role={role}\n aria-checked={ariaChecked}\n aria-haspopup={item.subitems ? 'true' : 'false'}\n aria-expanded={ariaExpanded}\n innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n onKeyDown={onItemKeyDown}\n onClick={handleOnClick}\n hasChildren={item.subitems !== undefined}\n onFocus={onFocus}\n tabIndex={tabIndex}\n aria-disabled={item.disabled ? 'true' : 'false'}\n >\n <StyledLeftContent>\n <SelectionAddon selectionMode={selectionMode || item.type} item={item} selectedKeys={selectedKeys} />\n {ItemRenderer ? (\n <ItemRenderer item={item} isSelected={selectedKeys.includes(item.dsId)} />\n ) : (\n <DSTypography variant=\"b1\">{item.label}</DSTypography>\n )}\n </StyledLeftContent>\n <StyledRightContent>\n {item.subitems ? <MenuItemAddon isOpen={showSubMenu} level={level} /> : null}\n </StyledRightContent>\n </StyledMenuItemContent>\n {item.subitems && showSubMenu && (\n <Menu\n level={level + 1}\n items={item.subitems}\n showSubMenu={showSubMenu}\n setShowSubMenu={setShowSubMenu}\n referenceElement={referenceElement}\n parentId={item.dsId}\n selectionMode={item.selectionMode}\n minWidth={item.minWidth}\n />\n )}\n </StyledMenuItem>\n );\n};\n\nconst SelectionAddon = ({\n item,\n selectedKeys,\n selectionMode,\n}: {\n item: MenuButtonT.Item;\n selectedKeys: string[];\n selectionMode?: 'single' | 'multiple';\n}) => {\n if (selectionMode === 'multiple' && selectedKeys.includes(item.dsId)) {\n return (\n <Grid>\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n </Grid>\n );\n }\n if (selectionMode === 'single' && selectedKeys.includes(item.dsId)) {\n return (\n <Grid width=\"16px\">\n <div\n style={{\n width: 8,\n height: 8,\n borderRadius: '50%',\n backgroundColor: '#005EA2',\n }}\n />\n </Grid>\n );\n }\n if ((selectionMode === 'single' || selectionMode === 'multiple') && selectedKeys[0] !== item.dsId) {\n return <div style={{ width: 16 }} />;\n }\n return null;\n};\n\nexport const Separator = () => (\n <li role=\"none\" style={{ padding: '0px 16px' }}>\n <StyledSeparator role=\"separator\" />\n </li>\n);\n\nexport const Section = ({ item }: { item: MenuButtonT.Item }) => (\n <li role=\"none\" style={{ padding: '0px 16px', minHeight: 24, display: 'flex', alignItems: 'center' }}>\n <StyledSection role=\"presentation\">{item.label}</StyledSection>\n </li>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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')<{\n isVertical?: boolean;\n level?: number;\n isOpen?: boolean;\n isDisabled?: boolean;\n}>`\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 ${({ isDisabled, theme }) =>\n isDisabled &&\n `\n color: ${theme.colors.neutral[
|
|
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')<{\n isVertical?: boolean;\n level?: number;\n isOpen?: boolean;\n isDisabled?: boolean;\n}>`\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 ${({ isDisabled, theme }) =>\n isDisabled &&\n `\n color: ${theme.colors.neutral[300]};\n * {\n cursor: not-allowed;\n }\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: inherit;\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 color: neutral-500;\n`;\n"],
|
|
5
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,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhF,CAAC,EAAE,YAAY,MAAM,MACrB,cACA;AAAA,aACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,GAInC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,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;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.40.0-rc.
|
|
3
|
+
"version": "3.40.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -38,21 +38,21 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.6.0",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.40.0-rc.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-system": "3.40.0-rc.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.40.0-rc.
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-typography": "3.40.0-rc.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.40.0-rc.3",
|
|
42
|
+
"@elliemae/ds-grid": "3.40.0-rc.3",
|
|
43
|
+
"@elliemae/ds-icons": "3.40.0-rc.3",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.40.0-rc.3",
|
|
45
|
+
"@elliemae/ds-system": "3.40.0-rc.3",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.40.0-rc.3",
|
|
47
|
+
"@elliemae/ds-hooks-keyboard-navigation": "3.40.0-rc.3",
|
|
48
|
+
"@elliemae/ds-typography": "3.40.0-rc.3"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
52
52
|
"@xstyled/system": "3.7.0",
|
|
53
53
|
"lodash": "^4.17.21",
|
|
54
54
|
"styled-components": "~5.3.9",
|
|
55
|
-
"@elliemae/ds-monorepo-devops": "3.40.0-rc.
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.40.0-rc.3"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"lodash": "^4.17.21",
|