@elliemae/ds-menu-button 3.51.0-next.0 → 3.51.0-next.11
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/config/useSplitInherithedProps.js.map +1 -1
- package/dist/cjs/constants/index.js +1 -1
- package/dist/cjs/constants/index.js.map +1 -1
- package/dist/cjs/parts/DSFlyoutMenu/constants/index.js +1 -1
- package/dist/cjs/parts/DSFlyoutMenu/constants/index.js.map +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/constants/index.js +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/constants/index.js.map +1 -1
- package/dist/cjs/parts/DSMenuItemRendererFactory/constants/index.js +1 -1
- package/dist/cjs/parts/DSMenuItemRendererFactory/constants/index.js.map +1 -1
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js +1 -0
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/cjs/parts/DSOpinionatedButton/constants/index.js +1 -1
- package/dist/cjs/parts/DSOpinionatedButton/constants/index.js.map +1 -1
- package/dist/esm/config/useSplitInherithedProps.js +1 -1
- package/dist/esm/config/useSplitInherithedProps.js.map +2 -2
- package/dist/esm/constants/index.js +1 -1
- package/dist/esm/constants/index.js.map +1 -1
- package/dist/esm/parts/DSFlyoutMenu/constants/index.js +1 -1
- package/dist/esm/parts/DSFlyoutMenu/constants/index.js.map +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/constants/index.js +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/constants/index.js.map +1 -1
- package/dist/esm/parts/DSMenuItemRendererFactory/constants/index.js +1 -1
- package/dist/esm/parts/DSMenuItemRendererFactory/constants/index.js.map +1 -1
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js +1 -0
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/constants/index.js +1 -1
- package/dist/esm/parts/DSOpinionatedButton/constants/index.js.map +1 -1
- package/dist/types/constants/index.d.ts +1 -1
- package/dist/types/parts/DSFlyoutMenu/constants/index.d.ts +1 -1
- package/dist/types/parts/DSMenuBehaviouralContextProvider/constants/index.d.ts +1 -1
- package/dist/types/parts/DSMenuItemRendererFactory/constants/index.d.ts +1 -1
- package/dist/types/parts/DSOpinionatedButton/config/useOpinionatedButton.d.ts +2 -0
- package/dist/types/parts/DSOpinionatedButton/constants/index.d.ts +1 -1
- package/package.json +15 -15
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useSplitInherithedProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n * About This Pattern:\n * A menu button is a button\n * that opens a menu\n * (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n * so it has the same props,\n * BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport {
|
|
4
|
+
"sourcesContent": ["/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n * About This Pattern:\n * A menu button is a button\n * that opens a menu\n * (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n * so it has the same props,\n * BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport type {} from '@elliemae/ds-system';\nimport type {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isObjectAMenuNode, isSelectionableNode } from '../utils/nodesTypeguardsAndGetters.js';\nimport { resolveRef } from '../utils/resolveRef.js';\n\n/**\n * Converts selected options to a map of selected nodes.\n * @param {DSMenuButtonT.SelectionableMenuNodes[]} selectedItems - The selected options, as provided by the user (either items or nodes).\n * @param {DSMenuButtonT.MenuNode} treeRootNode - The root node of the menu tree.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - The map of selected nodes.\n * @throws Will throw an error if a selected option is not found in the tree.\n */\nconst convertSelectedOptionsToNodes = (\n selectedItems: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[],\n treeRootNode: DSMenuButtonT.MenuNode,\n): DSMenuButtonT.SelectionableMenuNodes[] => {\n const convertedSelection: DSMenuButtonT.SelectionableMenuNodes[] = [];\n\n selectedItems.forEach((selectedItem) => {\n const needsConversion = !isObjectAMenuNode(selectedItem);\n if (!needsConversion) {\n convertedSelection.push(selectedItem);\n return;\n }\n\n const { dsId } = selectedItem;\n const selectedNode = treeRootNode.findNode((node: DSMenuButtonT.MenuNode) => node.dsId === dsId);\n if (!selectedNode) {\n throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);\n }\n if (!isSelectionableNode(selectedNode)) {\n // eslint-disable-next-line no-console\n console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);\n return;\n }\n convertedSelection.push(selectedNode);\n });\n\n return convertedSelection;\n};\n\ntype UseSplitInherithedPropsConfig = {\n propsWithDefault: DSMenuButtonT.InternalProps;\n focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n propsWithDefault,\n focusableNodes,\n treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n // when this component has been wrote\n // =============================================================================\n // MENU BUTTON props are:\n // Required\n // optionsTree, menuSpecificProps\n // Default (we already have a value because props for this hook are already merged with default props)\n // onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n // Optional (may or may not be present)\n // ItemRenderer\n // =============================================================================\n // Props for the DSMenuBehaviouralContextProvider\n // =============================================================================\n // Required\n // selectedItems, onItemSelected, onActivateItem,\n // Optional\n // onDisplayedSubmenuChange, onOpen, onClose\n\n const {\n options,\n onClickOutside,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n isLoading,\n isSkeleton,\n ItemRenderer,\n innerRef,\n selectedItems,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n maxHeight, // this is not shared with anything at all, it's instead a property of the \"root\" node, each node (with a submenu) can have its own maxHeight\n ...buttonInheritedProps\n } = propsWithDefault;\n\n // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n // so we create a functional ref to do both\n const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n (node: HTMLButtonElement) => {\n buttonDOMNodeRef.current = node;\n if (innerRef) {\n resolveRef(innerRef, node);\n }\n },\n [innerRef],\n );\n // in the WIDGET API, the user can provide selectedItems as an array of \"items\" or an array of \"nodes\"\n // the component needs the \"nodes\" to handle the logic and rendering & accessibility\n // if the user provides \"items\", we convert them to \"nodes\" here\n const selectedNodesMap = React.useMemo(() => {\n if (selectedItems) {\n return convertSelectedOptionsToNodes(selectedItems, treeRootNode);\n }\n return [];\n }, [selectedItems, treeRootNode]);\n\n const menuSpecificProps = React.useMemo(\n () => ({\n options,\n onClickOutside,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n isLoading,\n isSkeleton,\n ItemRenderer,\n }),\n [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer],\n );\n\n return React.useMemo(\n () => ({\n menuBehaviouralLayerProps: {\n buttonDOMNodeRef,\n selectedNodes: selectedNodesMap,\n focusableNodes,\n optionsTree: treeRootNode,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n },\n opinionatedButtonProps: {\n ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n innerRef: innerRefSnatchingNode,\n menuSpecificProps,\n },\n }),\n [\n selectedNodesMap,\n focusableNodes,\n treeRootNode,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n buttonInheritedProps,\n innerRefSnatchingNode,\n menuSpecificProps,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBvB,mBAAkB;AAElB,uCAAuD;AACvD,wBAA2B;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,KAAC,oDAAkB,YAAY;AACvD,QAAI,CAAC,iBAAiB;AACpB,yBAAmB,KAAK,YAAY;AACpC;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,eAAe,aAAa,SAAS,CAAC,SAAiC,KAAK,SAAS,IAAI;AAC/F,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,6BAA6B,IAAI,8BAA8B;AAAA,IACjF;AACA,QAAI,KAAC,sDAAoB,YAAY,GAAG;AAEtC,cAAQ,KAAK,6BAA6B,IAAI,mDAAmD;AACjG;AAAA,IACF;AACA,uBAAmB,KAAK,YAAY;AAAA,EACtC,CAAC;AAED,SAAO;AACT;AAOO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmB,aAAAA,QAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,0CAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmB,aAAAA,QAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,gBAAgB,eAAe,gBAAgB,iBAAiB,WAAW,YAAY,YAAY;AAAA,EAC/G;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,wBAAwB;AAAA,QACtB,GAAI;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ __export(constants_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(constants_exports);
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
const DSMenuButtonName = "
|
|
39
|
+
const DSMenuButtonName = "DSMenubutton";
|
|
40
40
|
const MENU_ITEMS_TYPES = {
|
|
41
41
|
SEPARATOR: "separator",
|
|
42
42
|
ACTIVABLE_ITEM: "activable-item",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = '
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenubutton';\n\nexport const MENU_ITEMS_TYPES = {\n SEPARATOR: 'separator',\n ACTIVABLE_ITEM: 'activable-item',\n ACTIVABLE_WITH_SUBMENU_ITEM: 'activable-with-submenu-item',\n SKELETON_ITEM: 'skeleton-item',\n MULTIPLE_SELECT_ITEM: 'multiple-select-item',\n MULTIPLE_SELECT_WITH_SUBMENU_ITEM: 'multiple-select-with-submenu-item',\n WITH_SUBMENU_ITEM: 'with-submenu-item',\n SINGLE_SELECT_ITEM: 'single-select-item',\n SINGLE_SELECT_WITH_SUBMENU_ITEM: 'single-select-with-submenu-item',\n GROUP: 'group',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,6BAA6B;AAAA,EAC7B,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,mCAAmC;AAAA,EACnC,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iCAAiC;AAAA,EACjC,OAAO;AACT;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ __export(constants_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(constants_exports);
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
const DSFlyoutMenuName = "
|
|
39
|
+
const DSFlyoutMenuName = "DSFlyoutmenu";
|
|
40
40
|
const EXAMPLE_CONSTANTS = {};
|
|
41
41
|
const FLYOUT_MENU_SLOTS = {
|
|
42
42
|
ROOT: "root",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSFlyoutMenu/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = '
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(constants_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(constants_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
const DSMenuBehaviouralContextProviderName = "
|
|
36
|
+
const DSMenuBehaviouralContextProviderName = "DSMenubehaviouralcontextprovider";
|
|
37
37
|
const MENU_FOCUS_REGIONS = {
|
|
38
38
|
TRIGGER: "trigger",
|
|
39
39
|
// eslint thinks this is unnecceary, but this forces the string format, without it, it would be a generic string
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nexport const DSMenuBehaviouralContextProviderName = '
|
|
4
|
+
"sourcesContent": ["import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nexport const DSMenuBehaviouralContextProviderName = 'DSMenubehaviouralcontextprovider';\n\nexport const MENU_FOCUS_REGIONS = {\n TRIGGER: 'trigger',\n // eslint thinks this is unnecceary, but this forces the string format, without it, it would be a generic string\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ITEM_BY_DSID: (dsId: DSMenuButtonT.MenuNode['dsId']) =>\n `item-${dsId}` as `item-dsid-${DSMenuButtonT.MenuNode['dsId']}`,\n RESET: '',\n} as const;\n\n/* **************************************************************** */\n// THIS HAS NO STYLES/SLOTS/DOM, IT'S A PURE LOGIC CONTEXT PROVIDER\n/* **************************************************************** */\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n// export const MENU_BEHAVIOURAL_CONTEXT_PROVIDER_SLOTS = {\n// ROOT: 'root',\n// } as const;\n\n// // we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\n// export const MENU_BEHAVIOURAL_CONTEXT_PROVIDER_DATA_TESTID = slotObjectToDataTestIds(DSMenuBehaviouralContextProviderName, MENU_BEHAVIOURAL_CONTEXT_PROVIDER_SLOTS)\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADChB,MAAM,uCAAuC;AAE7C,MAAM,qBAAqB;AAAA,EAChC,SAAS;AAAA;AAAA;AAAA,EAGT,cAAc,CAAC,SACb,QAAQ,IAAI;AAAA,EACd,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ __export(constants_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(constants_exports);
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
const DSMenuItemRendererFactoryName = "
|
|
39
|
+
const DSMenuItemRendererFactoryName = "DSMenuitemrendererfactory";
|
|
40
40
|
const EXAMPLE_CONSTANTS = {};
|
|
41
41
|
const MENU_ITEM_RENDERER_FACTORY_SLOTS = {
|
|
42
42
|
ROOT: "root",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSMenuItemRendererFactory/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = '
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = 'DSMenuitemrendererfactory';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_SLOTS = {\n ROOT: 'root',\n GROUP_LABEL_WRAPPER: 'group-label-wrapper',\n LABEL_WITH_LEFT_DEC_WRAPPER: 'group-label-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_DATA_TESTID = slotObjectToDataTestIds(\n DSMenuItemRendererFactoryName,\n MENU_ITEM_RENDERER_FACTORY_SLOTS,\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,gCAAgC;AAEtC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,mCAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,6BAA6B;AAC/B;AAGO,MAAM,6CAAyC;AAAA,EACpD;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -78,6 +78,7 @@ const DSOpinionatedButton = (props) => {
|
|
|
78
78
|
* ******************************************************************************************************************** */
|
|
79
79
|
isMenuOpen ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
|
|
80
80
|
),
|
|
81
|
+
"aria-expanded": isMenuOpen,
|
|
81
82
|
children
|
|
82
83
|
}
|
|
83
84
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props);\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AAAA;AAAA;AAAA;AAAA;AA9BJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAuB;AACvB,0BAA2B;AAC3B,mCAA8E;AAC9E,kCAAqC;AACrC,uBAAkE;AAClE,0BAA6B;AAC7B,+CAAsD;AAGtD,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,0CAAyB,MAAM,0CAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,QAAI,kDAAqB,KAAK;AAI9B,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,SAGE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props);\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-expanded={isMenuOpen}\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AAAA;AAAA;AAAA;AAAA;AA9BJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAuB;AACvB,0BAA2B;AAC3B,mCAA8E;AAC9E,kCAAqC;AACrC,uBAAkE;AAClE,0BAA6B;AAC7B,+CAAsD;AAGtD,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,0CAAyB,MAAM,0CAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,QAAI,kDAAqB,KAAK;AAI9B,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,SAGE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,QAEN,iBAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QAErC,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,oCAAgC,kCAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ __export(constants_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(constants_exports);
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
const DSOpinionatedButtonName = "
|
|
39
|
+
const DSOpinionatedButtonName = "DSOpinionatedbutton";
|
|
40
40
|
const EXAMPLE_CONSTANTS = {};
|
|
41
41
|
const OPINIONATED_BUTTON_SLOTS = {
|
|
42
42
|
ROOT: "root"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSOpinionatedButton/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = '
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = 'DSOpinionatedbutton';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const OPINIONATED_BUTTON_SLOTS = {\n ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const OPINIONATED_BUTTON_DATA_TESTID = slotObjectToDataTestIds(\n DSOpinionatedButtonName,\n OPINIONATED_BUTTON_SLOTS,\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,0BAA0B;AAEhC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,2BAA2B;AAAA,EACtC,MAAM;AACR;AAGO,MAAM,qCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { isObjectAMenuNode, isSelectionableNode } from "../utils/nodesTypeguardsAndGetters.js";
|
|
4
4
|
import { resolveRef } from "../utils/resolveRef.js";
|
|
5
5
|
const convertSelectedOptionsToNodes = (selectedItems, treeRootNode) => {
|
|
6
6
|
const convertedSelection = [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSplitInherithedProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n * About This Pattern:\n * A menu button is a button\n * that opens a menu\n * (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n * so it has the same props,\n * BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsBvB,OAAOA,YAAW;AAElB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n * About This Pattern:\n * A menu button is a button\n * that opens a menu\n * (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n * so it has the same props,\n * BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport type {} from '@elliemae/ds-system';\nimport type {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isObjectAMenuNode, isSelectionableNode } from '../utils/nodesTypeguardsAndGetters.js';\nimport { resolveRef } from '../utils/resolveRef.js';\n\n/**\n * Converts selected options to a map of selected nodes.\n * @param {DSMenuButtonT.SelectionableMenuNodes[]} selectedItems - The selected options, as provided by the user (either items or nodes).\n * @param {DSMenuButtonT.MenuNode} treeRootNode - The root node of the menu tree.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - The map of selected nodes.\n * @throws Will throw an error if a selected option is not found in the tree.\n */\nconst convertSelectedOptionsToNodes = (\n selectedItems: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[],\n treeRootNode: DSMenuButtonT.MenuNode,\n): DSMenuButtonT.SelectionableMenuNodes[] => {\n const convertedSelection: DSMenuButtonT.SelectionableMenuNodes[] = [];\n\n selectedItems.forEach((selectedItem) => {\n const needsConversion = !isObjectAMenuNode(selectedItem);\n if (!needsConversion) {\n convertedSelection.push(selectedItem);\n return;\n }\n\n const { dsId } = selectedItem;\n const selectedNode = treeRootNode.findNode((node: DSMenuButtonT.MenuNode) => node.dsId === dsId);\n if (!selectedNode) {\n throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);\n }\n if (!isSelectionableNode(selectedNode)) {\n // eslint-disable-next-line no-console\n console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);\n return;\n }\n convertedSelection.push(selectedNode);\n });\n\n return convertedSelection;\n};\n\ntype UseSplitInherithedPropsConfig = {\n propsWithDefault: DSMenuButtonT.InternalProps;\n focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n propsWithDefault,\n focusableNodes,\n treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n // when this component has been wrote\n // =============================================================================\n // MENU BUTTON props are:\n // Required\n // optionsTree, menuSpecificProps\n // Default (we already have a value because props for this hook are already merged with default props)\n // onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n // Optional (may or may not be present)\n // ItemRenderer\n // =============================================================================\n // Props for the DSMenuBehaviouralContextProvider\n // =============================================================================\n // Required\n // selectedItems, onItemSelected, onActivateItem,\n // Optional\n // onDisplayedSubmenuChange, onOpen, onClose\n\n const {\n options,\n onClickOutside,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n isLoading,\n isSkeleton,\n ItemRenderer,\n innerRef,\n selectedItems,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n maxHeight, // this is not shared with anything at all, it's instead a property of the \"root\" node, each node (with a submenu) can have its own maxHeight\n ...buttonInheritedProps\n } = propsWithDefault;\n\n // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n // so we create a functional ref to do both\n const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n (node: HTMLButtonElement) => {\n buttonDOMNodeRef.current = node;\n if (innerRef) {\n resolveRef(innerRef, node);\n }\n },\n [innerRef],\n );\n // in the WIDGET API, the user can provide selectedItems as an array of \"items\" or an array of \"nodes\"\n // the component needs the \"nodes\" to handle the logic and rendering & accessibility\n // if the user provides \"items\", we convert them to \"nodes\" here\n const selectedNodesMap = React.useMemo(() => {\n if (selectedItems) {\n return convertSelectedOptionsToNodes(selectedItems, treeRootNode);\n }\n return [];\n }, [selectedItems, treeRootNode]);\n\n const menuSpecificProps = React.useMemo(\n () => ({\n options,\n onClickOutside,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n isLoading,\n isSkeleton,\n ItemRenderer,\n }),\n [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer],\n );\n\n return React.useMemo(\n () => ({\n menuBehaviouralLayerProps: {\n buttonDOMNodeRef,\n selectedNodes: selectedNodesMap,\n focusableNodes,\n optionsTree: treeRootNode,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n },\n opinionatedButtonProps: {\n ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n innerRef: innerRefSnatchingNode,\n menuSpecificProps,\n },\n }),\n [\n selectedNodesMap,\n focusableNodes,\n treeRootNode,\n onDisplayedSubmenuChange,\n onItemSelected,\n onActivateItem,\n onOpen,\n onClose,\n buttonInheritedProps,\n innerRefSnatchingNode,\n menuSpecificProps,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsBvB,OAAOA,YAAW;AAElB,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,kBAAkB;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,CAAC,kBAAkB,YAAY;AACvD,QAAI,CAAC,iBAAiB;AACpB,yBAAmB,KAAK,YAAY;AACpC;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,eAAe,aAAa,SAAS,CAAC,SAAiC,KAAK,SAAS,IAAI;AAC/F,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,6BAA6B,IAAI,8BAA8B;AAAA,IACjF;AACA,QAAI,CAAC,oBAAoB,YAAY,GAAG;AAEtC,cAAQ,KAAK,6BAA6B,IAAI,mDAAmD;AACjG;AAAA,IACF;AACA,uBAAmB,KAAK,YAAY;AAAA,EACtC,CAAC;AAED,SAAO;AACT;AAOO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmBA,OAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmEA,OAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,mBAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmBA,OAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,gBAAgB,eAAe,gBAAgB,iBAAiB,WAAW,YAAY,YAAY;AAAA,EAC/G;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,wBAAwB;AAAA,QACtB,GAAI;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
-
const DSMenuButtonName = "
|
|
3
|
+
const DSMenuButtonName = "DSMenubutton";
|
|
4
4
|
const MENU_ITEMS_TYPES = {
|
|
5
5
|
SEPARATOR: "separator",
|
|
6
6
|
ACTIVABLE_ITEM: "activable-item",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenubutton';\n\nexport const MENU_ITEMS_TYPES = {\n SEPARATOR: 'separator',\n ACTIVABLE_ITEM: 'activable-item',\n ACTIVABLE_WITH_SUBMENU_ITEM: 'activable-with-submenu-item',\n SKELETON_ITEM: 'skeleton-item',\n MULTIPLE_SELECT_ITEM: 'multiple-select-item',\n MULTIPLE_SELECT_WITH_SUBMENU_ITEM: 'multiple-select-with-submenu-item',\n WITH_SUBMENU_ITEM: 'with-submenu-item',\n SINGLE_SELECT_ITEM: 'single-select-item',\n SINGLE_SELECT_WITH_SUBMENU_ITEM: 'single-select-with-submenu-item',\n GROUP: 'group',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,6BAA6B;AAAA,EAC7B,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,mCAAmC;AAAA,EACnC,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iCAAiC;AAAA,EACjC,OAAO;AACT;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const DSMenuBehaviouralContextProviderName = "
|
|
2
|
+
const DSMenuBehaviouralContextProviderName = "DSMenubehaviouralcontextprovider";
|
|
3
3
|
const MENU_FOCUS_REGIONS = {
|
|
4
4
|
TRIGGER: "trigger",
|
|
5
5
|
// eslint thinks this is unnecceary, but this forces the string format, without it, it would be a generic string
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nexport const DSMenuBehaviouralContextProviderName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nexport const DSMenuBehaviouralContextProviderName = 'DSMenubehaviouralcontextprovider';\n\nexport const MENU_FOCUS_REGIONS = {\n TRIGGER: 'trigger',\n // eslint thinks this is unnecceary, but this forces the string format, without it, it would be a generic string\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ITEM_BY_DSID: (dsId: DSMenuButtonT.MenuNode['dsId']) =>\n `item-${dsId}` as `item-dsid-${DSMenuButtonT.MenuNode['dsId']}`,\n RESET: '',\n} as const;\n\n/* **************************************************************** */\n// THIS HAS NO STYLES/SLOTS/DOM, IT'S A PURE LOGIC CONTEXT PROVIDER\n/* **************************************************************** */\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n// export const MENU_BEHAVIOURAL_CONTEXT_PROVIDER_SLOTS = {\n// ROOT: 'root',\n// } as const;\n\n// // we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\n// export const MENU_BEHAVIOURAL_CONTEXT_PROVIDER_DATA_TESTID = slotObjectToDataTestIds(DSMenuBehaviouralContextProviderName, MENU_BEHAVIOURAL_CONTEXT_PROVIDER_SLOTS)\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACChB,MAAM,uCAAuC;AAE7C,MAAM,qBAAqB;AAAA,EAChC,SAAS;AAAA;AAAA;AAAA,EAGT,cAAc,CAAC,SACb,QAAQ,IAAI;AAAA,EACd,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
-
const DSMenuItemRendererFactoryName = "
|
|
3
|
+
const DSMenuItemRendererFactoryName = "DSMenuitemrendererfactory";
|
|
4
4
|
const EXAMPLE_CONSTANTS = {};
|
|
5
5
|
const MENU_ITEM_RENDERER_FACTORY_SLOTS = {
|
|
6
6
|
ROOT: "root",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuItemRendererFactory/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = 'DSMenuitemrendererfactory';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_SLOTS = {\n ROOT: 'root',\n GROUP_LABEL_WRAPPER: 'group-label-wrapper',\n LABEL_WITH_LEFT_DEC_WRAPPER: 'group-label-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_DATA_TESTID = slotObjectToDataTestIds(\n DSMenuItemRendererFactoryName,\n MENU_ITEM_RENDERER_FACTORY_SLOTS,\n);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,gCAAgC;AAEtC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,mCAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,6BAA6B;AAC/B;AAGO,MAAM,yCAAyC;AAAA,EACpD;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ const DSOpinionatedButton = (props) => {
|
|
|
43
43
|
* ******************************************************************************************************************** */
|
|
44
44
|
isMenuOpen ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
|
|
45
45
|
),
|
|
46
|
+
"aria-expanded": isMenuOpen,
|
|
46
47
|
children
|
|
47
48
|
}
|
|
48
49
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props);\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8BnB,mBACE,KADF;AA9BJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAGtD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,KAAK;AAI9B,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAIA,OAAM,WAAW,qCAAqC;AAE1D;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props);\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-expanded={isMenuOpen}\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BnB,mBACE,KADF;AA9BJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAGtD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,KAAK;AAI9B,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAIA,OAAM,WAAW,qCAAqC;AAE1D;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,UAEN,iBAAe;AAAA,UAEd;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,gBAAgB,gBAAgB;AAAA,UAChC,gBAAgB,gBAAgB,KAAK;AAAA,UAErC,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
-
const DSOpinionatedButtonName = "
|
|
3
|
+
const DSOpinionatedButtonName = "DSOpinionatedbutton";
|
|
4
4
|
const EXAMPLE_CONSTANTS = {};
|
|
5
5
|
const OPINIONATED_BUTTON_SLOTS = {
|
|
6
6
|
ROOT: "root"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = 'DSOpinionatedbutton';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const OPINIONATED_BUTTON_SLOTS = {\n ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const OPINIONATED_BUTTON_DATA_TESTID = slotObjectToDataTestIds(\n DSOpinionatedButtonName,\n OPINIONATED_BUTTON_SLOTS,\n);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,0BAA0B;AAEhC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,2BAA2B;AAAA,EACtC,MAAM;AACR;AAGO,MAAM,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';
|
|
2
|
-
export declare const DSMenuBehaviouralContextProviderName = "
|
|
2
|
+
export declare const DSMenuBehaviouralContextProviderName = "DSMenubehaviouralcontextprovider";
|
|
3
3
|
export declare const MENU_FOCUS_REGIONS: {
|
|
4
4
|
readonly TRIGGER: "trigger";
|
|
5
5
|
readonly ITEM_BY_DSID: (dsId: DSMenuButtonT.MenuNode['dsId']) => `item-dsid-${string}` | `item-dsid-${number}`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const DSMenuItemRendererFactoryName = "
|
|
1
|
+
export declare const DSMenuItemRendererFactoryName = "DSMenuitemrendererfactory";
|
|
2
2
|
export declare const EXAMPLE_CONSTANTS: {};
|
|
3
3
|
export declare const MENU_ITEM_RENDERER_FACTORY_SLOTS: {
|
|
4
4
|
readonly ROOT: "root";
|
|
@@ -13,6 +13,8 @@ export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.
|
|
|
13
13
|
refs: {
|
|
14
14
|
setReference: (node: HTMLElement | null) => void;
|
|
15
15
|
setFloating: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
|
|
16
|
+
floating: HTMLElement | null;
|
|
17
|
+
reference: Element | null;
|
|
16
18
|
};
|
|
17
19
|
floatingStyles: import("styled-components").CSSProperties;
|
|
18
20
|
handlers: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.51.0-next.
|
|
3
|
+
"version": "3.51.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.7.3",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.51.0-next.
|
|
41
|
-
"@elliemae/ds-floating-context": "3.51.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-tree-model": "3.51.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.51.0-next.11",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.51.0-next.11",
|
|
42
|
+
"@elliemae/ds-hooks-on-blur-out": "3.51.0-next.11",
|
|
43
|
+
"@elliemae/ds-grid": "3.51.0-next.11",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.11",
|
|
45
|
+
"@elliemae/ds-system": "3.51.0-next.11",
|
|
46
|
+
"@elliemae/ds-menu-items-commons": "3.51.0-next.11",
|
|
47
|
+
"@elliemae/ds-icons": "3.51.0-next.11",
|
|
48
|
+
"@elliemae/ds-tree-model": "3.51.0-next.11"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
51
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
52
52
|
"@elliemae/pui-theme": "~2.10.0",
|
|
53
53
|
"jest": "~29.7.0",
|
|
54
54
|
"styled-components": "~5.3.9",
|
|
55
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
56
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-next.
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.11",
|
|
56
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-next.11"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@testing-library/jest-dom": "^6.6.3",
|