@elliemae/ds-menu-button 3.46.0-rc.7 → 3.46.0-rc.8
Sign up to get free protection for your applications and to get access to all the features.
- 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",
|