@elliemae/ds-menu-button 3.70.0-next.27 → 3.70.0-next.28
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.
- package/dist/cjs/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js +1 -1
- package/dist/cjs/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js +1 -1
- package/dist/esm/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +2 -2
- package/package.json +12 -12
|
@@ -92,7 +92,7 @@ const DSMenuItemRendererFactory = (props) => {
|
|
|
92
92
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "group", "aria-labelledby": spacelessIdForGroup, style: minWidth ? { minWidth } : {}, children: [
|
|
93
93
|
label ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledGroupLabelWrapper, { cols: LeftDecComponent ? ["min-content", "1fr"] : ["1fr"], children: [
|
|
94
94
|
LeftDecComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftDecComponent, {}) : null,
|
|
95
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledGroupLabel, { role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLabelWithLeftDecWrapper, { children: label }) : label })
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledGroupLabel, { variant: "b3-strong", component: "span", role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLabelWithLeftDecWrapper, { children: label }) : label })
|
|
96
96
|
] }) : null,
|
|
97
97
|
itemNode.children.map((subItemNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
98
|
DSMenuItemRendererFactory,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n isActivableNode,\n isActivableWithSubmenuNode,\n isGroup,\n isMultipleSelectOnlyNode,\n isMultipleSelectWithSubmenuNode,\n isSeparatorNode,\n isSingleSelectNodeWithSubmenu,\n isSingleSelectOnlyNode,\n isSkeletonNode,\n isWithSubmenuOnlyNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { SkeletonMenuItem } from './SkeletonMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n if (isSeparatorNode(itemNode))\n return (\n <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n <StyledSeparator />\n </StyledSeparatorWrapper>\n );\n if (isSkeletonNode(itemNode)) return <SkeletonMenuItem itemNode={itemNode} />;\n if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n if (isWithSubmenuOnlyNode(itemNode))\n return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n if (isSingleSelectNodeWithSubmenu(itemNode))\n return (\n <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n if (isMultipleSelectWithSubmenuNode(itemNode))\n return (\n <MultipleSelectWithSubmenuMenuItem\n itemNode={itemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n );\n if (isActivableWithSubmenuNode(itemNode))\n return (\n <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n\n // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n // if we eventually move this to a separate file,\n // we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n if (isGroup(itemNode)) {\n const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n return (\n <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n {label ? (\n <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyledGroupLabel role=\"presentation\" id={spacelessIdForGroup}>\n {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n </StyledGroupLabel>\n </StyledGroupLabelWrapper>\n ) : null}\n {itemNode.children.map((subItemNode) => (\n <DSMenuItemRendererFactory\n key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n itemNode={subItemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n ))}\n </div>\n );\n }\n\n // if we get here either\n // - a new type of item has been added and this component wasn't updated\n // -> update this component to handle the new type\n // - developer provided an invalid type for the item\n // -> developer should fix the item type\n // ----------\n // the following rule is disabled because this is LITERALLY an error throwing section,\n // of course typescript thinks type is never, that's why we are throwing an error...\n // ----------\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDI;AA/C3B,qBAAqB;AACrB,mCAA0E;AAC1E,8BAAyB;AACzB,uBAAuB;AAEvB,uCAWO;AACP,+BAAkC;AAClC,0CAA6C;AAC7C,oCAAuC;AACvC,+CAAkD;AAClD,kCAAqC;AACrC,6CAAgD;AAChD,8BAAiC;AACjC,iCAAoC;AACpC,wCAA2C;AAC3C,uBAAgF;AAChF,mCAA0F;AAE1F,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAG7E,MAAM,oCAAgC,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,kBACiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAGhD,MAAM,4BAAmF,CAAC,UAAU;AAClG,QAAM,EAAE,kBAAkB,YAAY,QAAI,8DAA2B,KAAK;AAC1E,QAAM,EAAE,UAAU,cAAc,4BAA4B,IAAI;AAEhE,MAAI,aAAc,QAAO,4CAAC,gBAAa,UAAoB;AAE3D,UAAI,kDAAgB,QAAQ;AAC1B,WACE,4CAAC,uDAAuB,IAAG,OAAM,MAAK,gBACpC,sDAAC,gDAAgB,GACnB;AAEJ,UAAI,iDAAe,QAAQ,EAAG,QAAO,4CAAC,4CAAiB,UAAoB;AAC3E,UAAI,kDAAgB,QAAQ,EAAG,QAAO,4CAAC,8CAAkB,UAAoB;AAC7E,UAAI,2DAAyB,QAAQ,EAAG,QAAO,4CAAC,wDAAuB,UAAoB;AAC3F,UAAI,yDAAuB,QAAQ,EAAG,QAAO,4CAAC,oDAAqB,UAAoB;AAEvF,UAAI,wDAAsB,QAAQ;AAChC,WAAO,4CAAC,kDAAoB,UAAoB,6BAA0D;AAC5G,UAAI,gEAA8B,QAAQ;AACxC,WACE,4CAAC,0EAAgC,UAAoB,6BAA0D;AAEnH,UAAI,kEAAgC,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,UAAI,6DAA2B,QAAQ;AACrC,WACE,4CAAC,oEAA6B,UAAoB,6BAA0D;AAMhH,UAAI,0CAAQ,QAAQ,GAAG;AACrB,UAAM,EAAE,gBAAgB,kBAAkB,OAAO,SAAS,IAAI,SAAS;AACvE,UAAM,sBAAsB,QAAQ,SAAS,MAAM,QAAQ,OAAO,EAAE,CAAC,KAAK;AAE1E,WACE,6CAAC,SAAI,MAAK,SAAQ,mBAAiB,qBAAqB,OAAO,WAAW,EAAE,SAAS,IAAI,CAAC,GACvF;AAAA,cACC,6CAAC,2BAAwB,MAAM,mBAAmB,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,GAC9E;AAAA,2BAAmB,4CAAC,oBAAiB,IAAK;AAAA,QAC3C,4CAAC,iDAAiB,MAAK,gBAAe,IAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n isActivableNode,\n isActivableWithSubmenuNode,\n isGroup,\n isMultipleSelectOnlyNode,\n isMultipleSelectWithSubmenuNode,\n isSeparatorNode,\n isSingleSelectNodeWithSubmenu,\n isSingleSelectOnlyNode,\n isSkeletonNode,\n isWithSubmenuOnlyNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { SkeletonMenuItem } from './SkeletonMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n if (isSeparatorNode(itemNode))\n return (\n <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n <StyledSeparator />\n </StyledSeparatorWrapper>\n );\n if (isSkeletonNode(itemNode)) return <SkeletonMenuItem itemNode={itemNode} />;\n if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n if (isWithSubmenuOnlyNode(itemNode))\n return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n if (isSingleSelectNodeWithSubmenu(itemNode))\n return (\n <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n if (isMultipleSelectWithSubmenuNode(itemNode))\n return (\n <MultipleSelectWithSubmenuMenuItem\n itemNode={itemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n );\n if (isActivableWithSubmenuNode(itemNode))\n return (\n <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n\n // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n // if we eventually move this to a separate file,\n // we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n if (isGroup(itemNode)) {\n const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n return (\n <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n {label ? (\n <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyledGroupLabel variant=\"b3-strong\" component=\"span\" role=\"presentation\" id={spacelessIdForGroup}>\n {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n </StyledGroupLabel>\n </StyledGroupLabelWrapper>\n ) : null}\n {itemNode.children.map((subItemNode) => (\n <DSMenuItemRendererFactory\n key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n itemNode={subItemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n ))}\n </div>\n );\n }\n\n // if we get here either\n // - a new type of item has been added and this component wasn't updated\n // -> update this component to handle the new type\n // - developer provided an invalid type for the item\n // -> developer should fix the item type\n // ----------\n // the following rule is disabled because this is LITERALLY an error throwing section,\n // of course typescript thinks type is never, that's why we are throwing an error...\n // ----------\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -111,8 +111,8 @@ const SkeletonMenuItem = ({
|
|
|
111
111
|
getOwnerProps,
|
|
112
112
|
getOwnerPropsArguments,
|
|
113
113
|
children: [
|
|
114
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: firstBoxWidth }),
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: secondBoxWidth })
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: firstBoxWidth, height: "16px", bg: "neutral-080", borderRadius: "1px" }),
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: secondBoxWidth, height: "16px", bg: "neutral-080", borderRadius: "1px" })
|
|
116
116
|
]
|
|
117
117
|
}
|
|
118
118
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/SkeletonMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n itemNode,\n}) => {\n const { dsId, plainItem } = itemNode;\n const { minWidth } = plainItem;\n\n const {\n focusRegion,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n const firstBoxAndGutterWidth = 16 + 8;\n const secondBoxWidth = minWidth\n ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n : `${150 - firstBoxAndGutterWidth}px`;\n return (\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n role=\"menuitem\"\n aria-label=\"Loading\"\n tabIndex={isFocused ? 0 : -1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} />\n <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EjB;AA9EN,mCAAkE;AAClE,yBAA2B;AAC3B,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAC/C,0CAA0C;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAI,aAAAA,QAAM,WAAW,6DAAyB;AAE9C,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,iCAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n itemNode,\n}) => {\n const { dsId, plainItem } = itemNode;\n const { minWidth } = plainItem;\n\n const {\n focusRegion,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n const firstBoxAndGutterWidth = 16 + 8;\n const secondBoxWidth = minWidth\n ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n : `${150 - firstBoxAndGutterWidth}px`;\n return (\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n role=\"menuitem\"\n aria-label=\"Loading\"\n tabIndex={isFocused ? 0 : -1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EjB;AA9EN,mCAAkE;AAClE,yBAA2B;AAC3B,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAC/C,0CAA0C;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAI,aAAAA,QAAM,WAAW,6DAAyB;AAE9C,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,iCAAW,SAAQ,eAAc,OAAO,eAAe,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA,YAC1G,4CAAC,iCAAW,SAAQ,eAAc,OAAO,gBAAgB,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -69,7 +69,7 @@ const DSMenuItemRendererFactory = (props) => {
|
|
|
69
69
|
return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": spacelessIdForGroup, style: minWidth ? { minWidth } : {}, children: [
|
|
70
70
|
label ? /* @__PURE__ */ jsxs(StyledGroupLabelWrapper, { cols: LeftDecComponent ? ["min-content", "1fr"] : ["1fr"], children: [
|
|
71
71
|
LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
|
|
72
|
-
/* @__PURE__ */ jsx(StyledGroupLabel, { role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ jsx(StyledLabelWithLeftDecWrapper, { children: label }) : label })
|
|
72
|
+
/* @__PURE__ */ jsx(StyledGroupLabel, { variant: "b3-strong", component: "span", role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ jsx(StyledLabelWithLeftDecWrapper, { children: label }) : label })
|
|
73
73
|
] }) : null,
|
|
74
74
|
itemNode.children.map((subItemNode) => /* @__PURE__ */ jsx(
|
|
75
75
|
DSMenuItemRendererFactory,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n isActivableNode,\n isActivableWithSubmenuNode,\n isGroup,\n isMultipleSelectOnlyNode,\n isMultipleSelectWithSubmenuNode,\n isSeparatorNode,\n isSingleSelectNodeWithSubmenu,\n isSingleSelectOnlyNode,\n isSkeletonNode,\n isWithSubmenuOnlyNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { SkeletonMenuItem } from './SkeletonMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n if (isSeparatorNode(itemNode))\n return (\n <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n <StyledSeparator />\n </StyledSeparatorWrapper>\n );\n if (isSkeletonNode(itemNode)) return <SkeletonMenuItem itemNode={itemNode} />;\n if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n if (isWithSubmenuOnlyNode(itemNode))\n return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n if (isSingleSelectNodeWithSubmenu(itemNode))\n return (\n <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n if (isMultipleSelectWithSubmenuNode(itemNode))\n return (\n <MultipleSelectWithSubmenuMenuItem\n itemNode={itemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n );\n if (isActivableWithSubmenuNode(itemNode))\n return (\n <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n\n // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n // if we eventually move this to a separate file,\n // we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n if (isGroup(itemNode)) {\n const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n return (\n <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n {label ? (\n <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyledGroupLabel role=\"presentation\" id={spacelessIdForGroup}>\n {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n </StyledGroupLabel>\n </StyledGroupLabelWrapper>\n ) : null}\n {itemNode.children.map((subItemNode) => (\n <DSMenuItemRendererFactory\n key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n itemNode={subItemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n ))}\n </div>\n );\n }\n\n // if we get here either\n // - a new type of item has been added and this component wasn't updated\n // -> update this component to handle the new type\n // - developer provided an invalid type for the item\n // -> developer should fix the item type\n // ----------\n // the following rule is disabled because this is LITERALLY an error throwing section,\n // of course typescript thinks type is never, that's why we are throwing an error...\n // ----------\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgDI,cAyCjB,YAzCiB;AA/C3B,SAAS,YAAY;AACrB,SAAS,kBAAkB,iBAAiB,8BAA8B;AAC1E,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,yCAAyC;AAClD,SAAS,4BAA4B;AACrC,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B,wCAAwC;AAChF,SAAS,gDAAiF;AAE1F,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iCAAiC;AACzC,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAG7E,MAAM,gCAAgC,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,iCAAiC;AACzC,CAAC;AAAA,kBACiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAGhD,MAAM,4BAAmF,CAAC,UAAU;AAClG,QAAM,EAAE,kBAAkB,YAAY,IAAI,2BAA2B,KAAK;AAC1E,QAAM,EAAE,UAAU,cAAc,4BAA4B,IAAI;AAEhE,MAAI,aAAc,QAAO,oBAAC,gBAAa,UAAoB;AAE3D,MAAI,gBAAgB,QAAQ;AAC1B,WACE,oBAAC,0BAAuB,IAAG,OAAM,MAAK,gBACpC,8BAAC,mBAAgB,GACnB;AAEJ,MAAI,eAAe,QAAQ,EAAG,QAAO,oBAAC,oBAAiB,UAAoB;AAC3E,MAAI,gBAAgB,QAAQ,EAAG,QAAO,oBAAC,qBAAkB,UAAoB;AAC7E,MAAI,yBAAyB,QAAQ,EAAG,QAAO,oBAAC,0BAAuB,UAAoB;AAC3F,MAAI,uBAAuB,QAAQ,EAAG,QAAO,oBAAC,wBAAqB,UAAoB;AAEvF,MAAI,sBAAsB,QAAQ;AAChC,WAAO,oBAAC,uBAAoB,UAAoB,6BAA0D;AAC5G,MAAI,8BAA8B,QAAQ;AACxC,WACE,oBAAC,mCAAgC,UAAoB,6BAA0D;AAEnH,MAAI,gCAAgC,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,MAAI,2BAA2B,QAAQ;AACrC,WACE,oBAAC,gCAA6B,UAAoB,6BAA0D;AAMhH,MAAI,QAAQ,QAAQ,GAAG;AACrB,UAAM,EAAE,gBAAgB,kBAAkB,OAAO,SAAS,IAAI,SAAS;AACvE,UAAM,sBAAsB,QAAQ,SAAS,MAAM,QAAQ,OAAO,EAAE,CAAC,KAAK;AAE1E,WACE,qBAAC,SAAI,MAAK,SAAQ,mBAAiB,qBAAqB,OAAO,WAAW,EAAE,SAAS,IAAI,CAAC,GACvF;AAAA,cACC,qBAAC,2BAAwB,MAAM,mBAAmB,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,GAC9E;AAAA,2BAAmB,oBAAC,oBAAiB,IAAK;AAAA,QAC3C,oBAAC,oBAAiB,MAAK,gBAAe,IAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n isActivableNode,\n isActivableWithSubmenuNode,\n isGroup,\n isMultipleSelectOnlyNode,\n isMultipleSelectWithSubmenuNode,\n isSeparatorNode,\n isSingleSelectNodeWithSubmenu,\n isSingleSelectOnlyNode,\n isSkeletonNode,\n isWithSubmenuOnlyNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { SkeletonMenuItem } from './SkeletonMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n name: DSMenuItemRendererFactoryName,\n slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n if (isSeparatorNode(itemNode))\n return (\n <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n <StyledSeparator />\n </StyledSeparatorWrapper>\n );\n if (isSkeletonNode(itemNode)) return <SkeletonMenuItem itemNode={itemNode} />;\n if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n if (isWithSubmenuOnlyNode(itemNode))\n return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n if (isSingleSelectNodeWithSubmenu(itemNode))\n return (\n <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n if (isMultipleSelectWithSubmenuNode(itemNode))\n return (\n <MultipleSelectWithSubmenuMenuItem\n itemNode={itemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n );\n if (isActivableWithSubmenuNode(itemNode))\n return (\n <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n );\n\n // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n // if we eventually move this to a separate file,\n // we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n if (isGroup(itemNode)) {\n const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n return (\n <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n {label ? (\n <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyledGroupLabel variant=\"b3-strong\" component=\"span\" role=\"presentation\" id={spacelessIdForGroup}>\n {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n </StyledGroupLabel>\n </StyledGroupLabelWrapper>\n ) : null}\n {itemNode.children.map((subItemNode) => (\n <DSMenuItemRendererFactory\n key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n itemNode={subItemNode}\n FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n />\n ))}\n </div>\n );\n }\n\n // if we get here either\n // - a new type of item has been added and this component wasn't updated\n // -> update this component to handle the new type\n // - developer provided an invalid type for the item\n // -> developer should fix the item type\n // ----------\n // the following rule is disabled because this is LITERALLY an error throwing section,\n // of course typescript thinks type is never, that's why we are throwing an error...\n // ----------\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -78,8 +78,8 @@ const SkeletonMenuItem = ({
|
|
|
78
78
|
getOwnerProps,
|
|
79
79
|
getOwnerPropsArguments,
|
|
80
80
|
children: [
|
|
81
|
-
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: firstBoxWidth }),
|
|
82
|
-
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: secondBoxWidth })
|
|
81
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: firstBoxWidth, height: "16px", bg: "neutral-080", borderRadius: "1px" }),
|
|
82
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: secondBoxWidth, height: "16px", bg: "neutral-080", borderRadius: "1px" })
|
|
83
83
|
]
|
|
84
84
|
}
|
|
85
85
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SkeletonMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n itemNode,\n}) => {\n const { dsId, plainItem } = itemNode;\n const { minWidth } = plainItem;\n\n const {\n focusRegion,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n const firstBoxAndGutterWidth = 16 + 8;\n const secondBoxWidth = minWidth\n ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n : `${150 - firstBoxAndGutterWidth}px`;\n return (\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n role=\"menuitem\"\n aria-label=\"Loading\"\n tabIndex={isFocused ? 0 : -1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} />\n <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+EjB,SASE,KATF;AA9EN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAE9C,QAAM,yBAAyBA,OAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n itemNode,\n}) => {\n const { dsId, plainItem } = itemNode;\n const { minWidth } = plainItem;\n\n const {\n focusRegion,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n const firstBoxAndGutterWidth = 16 + 8;\n const secondBoxWidth = minWidth\n ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n : `${150 - firstBoxAndGutterWidth}px`;\n return (\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n role=\"menuitem\"\n aria-label=\"Loading\"\n tabIndex={isFocused ? 0 : -1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+EjB,SASE,KATF;AA9EN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAE9C,QAAM,yBAAyBA,OAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA,YAC1G,oBAAC,cAAW,SAAQ,eAAc,OAAO,gBAAgB,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.28",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-hooks-on-blur-out": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-menu-items-commons": "3.70.0-next.
|
|
44
|
-
"@elliemae/ds-icons": "3.70.0-next.
|
|
45
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.70.0-next.28",
|
|
40
|
+
"@elliemae/ds-grid": "3.70.0-next.28",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.70.0-next.28",
|
|
42
|
+
"@elliemae/ds-hooks-on-blur-out": "3.70.0-next.28",
|
|
43
|
+
"@elliemae/ds-menu-items-commons": "3.70.0-next.28",
|
|
44
|
+
"@elliemae/ds-icons": "3.70.0-next.28",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.28",
|
|
46
|
+
"@elliemae/ds-system": "3.70.0-next.28",
|
|
47
|
+
"@elliemae/ds-tree-model": "3.70.0-next.28"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@elliemae/pui-theme": "~2.13.0",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.28",
|
|
54
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.28"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"@testing-library/jest-dom": "^6.6.3",
|