@elliemae/ds-menu-button 3.46.0-rc.7 → 3.46.0-rc.8
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 +10 -9
- package/dist/cjs/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +112 -0
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +7 -0
- package/dist/esm/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js +19 -18
- package/dist/esm/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +82 -0
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +7 -0
- package/dist/types/parts/DSMenuItemRendererFactory/SkeletonMenuItem.d.ts +5 -0
- package/dist/types/parts/DSOpinionatedButton/config/useOpinionatedButton.d.ts +1 -1
- package/package.json +12 -12
|
@@ -35,20 +35,21 @@ module.exports = __toCommonJS(DSMenuItemRendererFactory_exports);
|
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
|
-
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
38
|
var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
|
|
39
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
-
var
|
|
42
|
-
var import_constants = require("./constants/index.js");
|
|
43
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
|
+
var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
|
|
44
42
|
var import_ActivableMenuItem = require("./ActivableMenuItem.js");
|
|
43
|
+
var import_ActivableWithSubmenuMenuItem = require("./ActivableWithSubmenuMenuItem.js");
|
|
44
|
+
var import_MultipleSelectMenuItem = require("./MultipleSelectMenuItem.js");
|
|
45
|
+
var import_MultipleSelectWithSubmenuMenuItem = require("./MultipleSelectWithSubmenuMenuItem.js");
|
|
45
46
|
var import_SingleSelectMenuItem = require("./SingleSelectMenuItem.js");
|
|
46
47
|
var import_SingleSelectWithSubmenuMenuItem = require("./SingleSelectWithSubmenuMenuItem.js");
|
|
47
|
-
var
|
|
48
|
+
var import_SkeletonMenuItem = require("./SkeletonMenuItem.js");
|
|
48
49
|
var import_WithSubmenuMenuItem = require("./WithSubmenuMenuItem.js");
|
|
49
|
-
var
|
|
50
|
-
var
|
|
51
|
-
var
|
|
50
|
+
var import_useMenuItemRendererFactory = require("./config/useMenuItemRendererFactory.js");
|
|
51
|
+
var import_constants = require("./constants/index.js");
|
|
52
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
52
53
|
const StyledGroupLabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
53
54
|
name: import_constants.DSMenuItemRendererFactoryName,
|
|
54
55
|
slot: import_constants.MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER
|
|
@@ -67,7 +68,7 @@ const DSMenuItemRendererFactory = (props) => {
|
|
|
67
68
|
if (ItemRenderer) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { itemNode });
|
|
68
69
|
if ((0, import_nodesTypeguardsAndGetters.isSeparatorNode)(itemNode))
|
|
69
70
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledSeparatorWrapper, { as: "div", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledSeparator, {}) });
|
|
70
|
-
if ((0, import_nodesTypeguardsAndGetters.isSkeletonNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
+
if ((0, import_nodesTypeguardsAndGetters.isSkeletonNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonMenuItem.SkeletonMenuItem, { itemNode });
|
|
71
72
|
if ((0, import_nodesTypeguardsAndGetters.isActivableNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActivableMenuItem.ActivableMenuItem, { itemNode });
|
|
72
73
|
if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectOnlyNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectMenuItem.MultipleSelectMenuItem, { itemNode });
|
|
73
74
|
if ((0, import_nodesTypeguardsAndGetters.isSingleSelectOnlyNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SingleSelectMenuItem.SingleSelectMenuItem, { itemNode });
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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,qBACvC,6BAAmB,4CAAC,iCAA+B,iBAAM,IAAmC,OAC/F;AAAA,SACF,IACE;AAAA,MACH,SAAS,SAAS,IAAI,CAAC,gBACtB;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA;AAAA,QAFK,gBAAgB,YAAY,IAAI,IAAI,WAAW;AAAA,MAGtD,CACD;AAAA,OACH;AAAA,EAEJ;AAYA,QAAM,IAAI,MAAM,sBAAsB,KAAK,UAAU,QAAQ,CAAC,EAAE;AAClE;AAEA,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var SkeletonMenuItem_exports = {};
|
|
30
|
+
__export(SkeletonMenuItem_exports, {
|
|
31
|
+
SkeletonMenuItem: () => SkeletonMenuItem
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(SkeletonMenuItem_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
|
|
37
|
+
var import_ds_skeleton = require("@elliemae/ds-skeleton");
|
|
38
|
+
var import_react = __toESM(require("react"));
|
|
39
|
+
var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
|
|
40
|
+
var import_constants = require("../DSMenuBehaviouralContextProvider/constants/index.js");
|
|
41
|
+
var import_focusNodeRacingConditionSolved = require("./focusNodeRacingConditionSolved.js");
|
|
42
|
+
const firstBoxWidth = "16px";
|
|
43
|
+
const gridLayout = [firstBoxWidth, "1fr"];
|
|
44
|
+
const SkeletonMenuItem = ({
|
|
45
|
+
itemNode
|
|
46
|
+
}) => {
|
|
47
|
+
const { dsId, plainItem } = itemNode;
|
|
48
|
+
const { minWidth } = plainItem;
|
|
49
|
+
const {
|
|
50
|
+
focusRegion,
|
|
51
|
+
menuItemEventsHandlers: {
|
|
52
|
+
handleFocusableMenuItemKeyDown,
|
|
53
|
+
handleFocusableMenuItemOnMouseEnter,
|
|
54
|
+
handleFocusableMenuItemNativeFocusEvent
|
|
55
|
+
}
|
|
56
|
+
} = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
|
|
57
|
+
const focusedRegionPerformanceHelper = import_react.default.useRef(focusRegion);
|
|
58
|
+
focusedRegionPerformanceHelper.current = focusRegion;
|
|
59
|
+
const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
60
|
+
const handleFocusOnRender = import_react.default.useCallback(
|
|
61
|
+
(node) => {
|
|
62
|
+
if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
|
|
63
|
+
(0, import_focusNodeRacingConditionSolved.focusNodeRacingConditionSolved)(node);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
// we need to change the callback reference every time the focusRegion changes or else the focus will not be set
|
|
67
|
+
[dsId, focusRegion]
|
|
68
|
+
// we are using the "as='div'", typescript is not able to infer the correct type
|
|
69
|
+
// the logic here actually receives a ref to a HTMLDivElement,
|
|
70
|
+
// but the component must think this is a HTMLLIElement ref callback
|
|
71
|
+
);
|
|
72
|
+
const handleOnMouseEnter = import_react.default.useCallback(() => {
|
|
73
|
+
handleFocusableMenuItemOnMouseEnter(itemNode);
|
|
74
|
+
}, [handleFocusableMenuItemOnMouseEnter, itemNode]);
|
|
75
|
+
const handleOnFocus = import_react.default.useCallback(
|
|
76
|
+
(e) => {
|
|
77
|
+
handleFocusableMenuItemNativeFocusEvent(itemNode, e);
|
|
78
|
+
},
|
|
79
|
+
[handleFocusableMenuItemNativeFocusEvent, itemNode]
|
|
80
|
+
);
|
|
81
|
+
const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
|
|
82
|
+
const firstBoxAndGutterWidth = 16 + 8;
|
|
83
|
+
const secondBoxWidth = minWidth ? `calc(${minWidth} - ${firstBoxAndGutterWidth})` : `${150 - firstBoxAndGutterWidth}px`;
|
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_ds_menu_items_commons.StyledGlobalMenuItemWrapper,
|
|
86
|
+
{
|
|
87
|
+
innerRef: handleFocusOnRender,
|
|
88
|
+
onKeyDown: handleFocusableMenuItemKeyDown,
|
|
89
|
+
onMouseEnter: handleOnMouseEnter,
|
|
90
|
+
onFocus: handleOnFocus,
|
|
91
|
+
as: "div",
|
|
92
|
+
id: `${spacelessDsIdForDom}`,
|
|
93
|
+
role: "menuitem",
|
|
94
|
+
tabIndex: isFocused ? 0 : -1,
|
|
95
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
96
|
+
import_ds_menu_items_commons.StyledContentWrapper,
|
|
97
|
+
{
|
|
98
|
+
cols: gridLayout,
|
|
99
|
+
minHeight: "16px",
|
|
100
|
+
gutter: "xxs",
|
|
101
|
+
alignItems: "center",
|
|
102
|
+
minWidth: minWidth ?? "150px",
|
|
103
|
+
children: [
|
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: firstBoxWidth }),
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: secondBoxWidth })
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=SkeletonMenuItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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';\n\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 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 tabIndex={isFocused ? 0 : -1}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\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;ADsEjB;AArEN,mCAAkE;AAClE,yBAA2B;AAC3B,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAE/C,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,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,UAAU,YAAY,IAAI;AAAA,MAE1B;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAEtB;AAAA,wDAAC,iCAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,YACxD,4CAAC,iCAAW,SAAQ,eAAc,OAAO,gBAAgB;AAAA;AAAA;AAAA,MAC3D;AAAA;AAAA,EACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -1,31 +1,32 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
4
|
import { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from "@elliemae/ds-menu-items-commons";
|
|
5
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { styled } from "@elliemae/ds-system";
|
|
7
|
-
import { useMenuItemRendererFactory } from "./config/useMenuItemRendererFactory.js";
|
|
8
|
-
import { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from "./constants/index.js";
|
|
9
|
-
import { DSMenuItemRendererFactoryPropTypesSchema } from "./react-desc-prop-types.js";
|
|
10
|
-
import { ActivableMenuItem } from "./ActivableMenuItem.js";
|
|
11
|
-
import { SingleSelectMenuItem } from "./SingleSelectMenuItem.js";
|
|
12
|
-
import { SingleSelectWithSubmenuMenuItem } from "./SingleSelectWithSubmenuMenuItem.js";
|
|
13
|
-
import { MultipleSelectMenuItem } from "./MultipleSelectMenuItem.js";
|
|
14
|
-
import { WithSubmenuMenuItem } from "./WithSubmenuMenuItem.js";
|
|
15
|
-
import { MultipleSelectWithSubmenuMenuItem } from "./MultipleSelectWithSubmenuMenuItem.js";
|
|
16
|
-
import { ActivableWithSubmenuMenuItem } from "./ActivableWithSubmenuMenuItem.js";
|
|
17
7
|
import {
|
|
18
8
|
isActivableNode,
|
|
19
|
-
|
|
9
|
+
isActivableWithSubmenuNode,
|
|
10
|
+
isGroup,
|
|
20
11
|
isMultipleSelectOnlyNode,
|
|
21
|
-
|
|
12
|
+
isMultipleSelectWithSubmenuNode,
|
|
22
13
|
isSeparatorNode,
|
|
23
|
-
isGroup,
|
|
24
|
-
isWithSubmenuOnlyNode,
|
|
25
14
|
isSingleSelectNodeWithSubmenu,
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
isSingleSelectOnlyNode,
|
|
16
|
+
isSkeletonNode,
|
|
17
|
+
isWithSubmenuOnlyNode
|
|
28
18
|
} from "../../utils/nodesTypeguardsAndGetters.js";
|
|
19
|
+
import { ActivableMenuItem } from "./ActivableMenuItem.js";
|
|
20
|
+
import { ActivableWithSubmenuMenuItem } from "./ActivableWithSubmenuMenuItem.js";
|
|
21
|
+
import { MultipleSelectMenuItem } from "./MultipleSelectMenuItem.js";
|
|
22
|
+
import { MultipleSelectWithSubmenuMenuItem } from "./MultipleSelectWithSubmenuMenuItem.js";
|
|
23
|
+
import { SingleSelectMenuItem } from "./SingleSelectMenuItem.js";
|
|
24
|
+
import { SingleSelectWithSubmenuMenuItem } from "./SingleSelectWithSubmenuMenuItem.js";
|
|
25
|
+
import { SkeletonMenuItem } from "./SkeletonMenuItem.js";
|
|
26
|
+
import { WithSubmenuMenuItem } from "./WithSubmenuMenuItem.js";
|
|
27
|
+
import { useMenuItemRendererFactory } from "./config/useMenuItemRendererFactory.js";
|
|
28
|
+
import { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from "./constants/index.js";
|
|
29
|
+
import { DSMenuItemRendererFactoryPropTypesSchema } from "./react-desc-prop-types.js";
|
|
29
30
|
const StyledGroupLabelWrapper = styled(Grid, {
|
|
30
31
|
name: DSMenuItemRendererFactoryName,
|
|
31
32
|
slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER
|
|
@@ -44,7 +45,7 @@ const DSMenuItemRendererFactory = (props) => {
|
|
|
44
45
|
if (ItemRenderer) return /* @__PURE__ */ jsx(ItemRenderer, { itemNode });
|
|
45
46
|
if (isSeparatorNode(itemNode))
|
|
46
47
|
return /* @__PURE__ */ jsx(StyledSeparatorWrapper, { as: "div", role: "presentation", children: /* @__PURE__ */ jsx(StyledSeparator, {}) });
|
|
47
|
-
if (isSkeletonNode(itemNode)) return /* @__PURE__ */ jsx(
|
|
48
|
+
if (isSkeletonNode(itemNode)) return /* @__PURE__ */ jsx(SkeletonMenuItem, { itemNode });
|
|
48
49
|
if (isActivableNode(itemNode)) return /* @__PURE__ */ jsx(ActivableMenuItem, { itemNode });
|
|
49
50
|
if (isMultipleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(MultipleSelectMenuItem, { itemNode });
|
|
50
51
|
if (isSingleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(SingleSelectMenuItem, { itemNode });
|
|
@@ -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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { StyledContentWrapper, StyledGlobalMenuItemWrapper } from "@elliemae/ds-menu-items-commons";
|
|
4
|
+
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
5
|
+
import React2 from "react";
|
|
6
|
+
import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
|
|
7
|
+
import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
|
|
8
|
+
import { focusNodeRacingConditionSolved } from "./focusNodeRacingConditionSolved.js";
|
|
9
|
+
const firstBoxWidth = "16px";
|
|
10
|
+
const gridLayout = [firstBoxWidth, "1fr"];
|
|
11
|
+
const SkeletonMenuItem = ({
|
|
12
|
+
itemNode
|
|
13
|
+
}) => {
|
|
14
|
+
const { dsId, plainItem } = itemNode;
|
|
15
|
+
const { minWidth } = plainItem;
|
|
16
|
+
const {
|
|
17
|
+
focusRegion,
|
|
18
|
+
menuItemEventsHandlers: {
|
|
19
|
+
handleFocusableMenuItemKeyDown,
|
|
20
|
+
handleFocusableMenuItemOnMouseEnter,
|
|
21
|
+
handleFocusableMenuItemNativeFocusEvent
|
|
22
|
+
}
|
|
23
|
+
} = React2.useContext(MenuBehaviouralContextProviderContext);
|
|
24
|
+
const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
|
|
25
|
+
focusedRegionPerformanceHelper.current = focusRegion;
|
|
26
|
+
const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
27
|
+
const handleFocusOnRender = React2.useCallback(
|
|
28
|
+
(node) => {
|
|
29
|
+
if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
|
|
30
|
+
focusNodeRacingConditionSolved(node);
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
// we need to change the callback reference every time the focusRegion changes or else the focus will not be set
|
|
34
|
+
[dsId, focusRegion]
|
|
35
|
+
// we are using the "as='div'", typescript is not able to infer the correct type
|
|
36
|
+
// the logic here actually receives a ref to a HTMLDivElement,
|
|
37
|
+
// but the component must think this is a HTMLLIElement ref callback
|
|
38
|
+
);
|
|
39
|
+
const handleOnMouseEnter = React2.useCallback(() => {
|
|
40
|
+
handleFocusableMenuItemOnMouseEnter(itemNode);
|
|
41
|
+
}, [handleFocusableMenuItemOnMouseEnter, itemNode]);
|
|
42
|
+
const handleOnFocus = React2.useCallback(
|
|
43
|
+
(e) => {
|
|
44
|
+
handleFocusableMenuItemNativeFocusEvent(itemNode, e);
|
|
45
|
+
},
|
|
46
|
+
[handleFocusableMenuItemNativeFocusEvent, itemNode]
|
|
47
|
+
);
|
|
48
|
+
const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
|
|
49
|
+
const firstBoxAndGutterWidth = 16 + 8;
|
|
50
|
+
const secondBoxWidth = minWidth ? `calc(${minWidth} - ${firstBoxAndGutterWidth})` : `${150 - firstBoxAndGutterWidth}px`;
|
|
51
|
+
return /* @__PURE__ */ jsx(
|
|
52
|
+
StyledGlobalMenuItemWrapper,
|
|
53
|
+
{
|
|
54
|
+
innerRef: handleFocusOnRender,
|
|
55
|
+
onKeyDown: handleFocusableMenuItemKeyDown,
|
|
56
|
+
onMouseEnter: handleOnMouseEnter,
|
|
57
|
+
onFocus: handleOnFocus,
|
|
58
|
+
as: "div",
|
|
59
|
+
id: `${spacelessDsIdForDom}`,
|
|
60
|
+
role: "menuitem",
|
|
61
|
+
tabIndex: isFocused ? 0 : -1,
|
|
62
|
+
children: /* @__PURE__ */ jsxs(
|
|
63
|
+
StyledContentWrapper,
|
|
64
|
+
{
|
|
65
|
+
cols: gridLayout,
|
|
66
|
+
minHeight: "16px",
|
|
67
|
+
gutter: "xxs",
|
|
68
|
+
alignItems: "center",
|
|
69
|
+
minWidth: minWidth ?? "150px",
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: firstBoxWidth }),
|
|
72
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: secondBoxWidth })
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
export {
|
|
80
|
+
SkeletonMenuItem
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=SkeletonMenuItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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';\n\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 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 tabIndex={isFocused ? 0 : -1}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\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;ACsEjB,SAOE,KAPF;AArEN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAE/C,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,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,UAAU,YAAY,IAAI;AAAA,MAE1B;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAEtB;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,YACxD,oBAAC,cAAW,SAAQ,eAAc,OAAO,gBAAgB;AAAA;AAAA;AAAA,MAC3D;AAAA;AAAA,EACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -31,7 +31,7 @@ export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.
|
|
|
31
31
|
context: {
|
|
32
32
|
withoutPortal: boolean;
|
|
33
33
|
withoutAnimation: boolean;
|
|
34
|
-
portalDOMContainer: HTMLElement;
|
|
34
|
+
portalDOMContainer: HTMLElement | undefined;
|
|
35
35
|
animationDuration: number;
|
|
36
36
|
};
|
|
37
37
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.46.0-rc.
|
|
3
|
+
"version": "3.46.0-rc.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -37,21 +37,21 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.6.0",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.46.0-rc.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-hooks-on-blur-out": "3.46.0-rc.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.46.0-rc.8",
|
|
41
|
+
"@elliemae/ds-grid": "3.46.0-rc.8",
|
|
42
|
+
"@elliemae/ds-floating-context": "3.46.0-rc.8",
|
|
43
|
+
"@elliemae/ds-hooks-on-blur-out": "3.46.0-rc.8",
|
|
44
|
+
"@elliemae/ds-icons": "3.46.0-rc.8",
|
|
45
|
+
"@elliemae/ds-menu-items-commons": "3.46.0-rc.8",
|
|
46
|
+
"@elliemae/ds-system": "3.46.0-rc.8",
|
|
47
|
+
"@elliemae/ds-tree-model": "3.46.0-rc.8",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.46.0-rc.8"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.46.0-rc.
|
|
54
|
-
"@elliemae/ds-typescript-helpers": "3.46.0-rc.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.46.0-rc.8",
|
|
54
|
+
"@elliemae/ds-typescript-helpers": "3.46.0-rc.8"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"@testing-library/jest-dom": "~5.16.4",
|