@elliemae/ds-menu-button 3.46.0-rc.2 → 3.46.0-rc.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/config/useMenuButton.js +6 -2
- package/dist/cjs/config/useMenuButton.js.map +2 -2
- package/dist/cjs/config/useSplitInherithedProps.js +33 -15
- package/dist/cjs/config/useSplitInherithedProps.js.map +2 -2
- package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js +36 -12
- package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +3 -3
- package/dist/cjs/parts/DSFlyoutMenu/react-desc-prop-types.js +1 -1
- package/dist/cjs/parts/DSFlyoutMenu/react-desc-prop-types.js.map +3 -3
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.js +4 -4
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.js.map +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js +40 -30
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js.map +2 -2
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js.map +2 -2
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js +7 -7
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js.map +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.js +3 -0
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js +14 -14
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js.map +1 -1
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js +2 -2
- package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js.map +1 -1
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js +4 -5
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +4 -5
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js +6 -7
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +7 -8
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js +6 -7
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +6 -7
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +4 -5
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js +1 -1
- package/dist/cjs/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/focusNodeRacingConditionSolved.js +43 -0
- package/dist/cjs/parts/DSMenuItemRendererFactory/focusNodeRacingConditionSolved.js.map +7 -0
- package/dist/cjs/parts/DSMenuItemRendererFactory/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSOpinionatedButton/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +10 -11
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/utils/nodesTypeguardsAndGetters.js +18 -56
- package/dist/cjs/utils/nodesTypeguardsAndGetters.js.map +2 -2
- package/dist/cjs/utils/useOptionsArrayToDsTree.js +10 -3
- package/dist/cjs/utils/useOptionsArrayToDsTree.js.map +2 -2
- package/dist/esm/config/useMenuButton.js +7 -3
- package/dist/esm/config/useMenuButton.js.map +2 -2
- package/dist/esm/config/useSplitInherithedProps.js +33 -15
- package/dist/esm/config/useSplitInherithedProps.js.map +2 -2
- package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js +34 -10
- package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +2 -2
- package/dist/esm/parts/DSFlyoutMenu/react-desc-prop-types.js +1 -4
- package/dist/esm/parts/DSFlyoutMenu/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.js +4 -4
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.js.map +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js +40 -30
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js.map +2 -2
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js.map +2 -2
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js +7 -7
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js.map +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.js +3 -0
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js +14 -14
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js.map +1 -1
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js +2 -2
- package/dist/esm/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js.map +1 -1
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js +4 -5
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +4 -5
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js +6 -7
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +7 -8
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js +6 -7
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +6 -7
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +4 -5
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js +1 -1
- package/dist/esm/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/focusNodeRacingConditionSolved.js +13 -0
- package/dist/esm/parts/DSMenuItemRendererFactory/focusNodeRacingConditionSolved.js.map +7 -0
- package/dist/esm/parts/DSMenuItemRendererFactory/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/react-desc-prop-types.js +1 -1
- package/dist/esm/parts/DSOpinionatedButton/react-desc-prop-types.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +10 -11
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/nodesTypeguardsAndGetters.js +18 -56
- package/dist/esm/utils/nodesTypeguardsAndGetters.js.map +2 -2
- package/dist/esm/utils/useOptionsArrayToDsTree.js +10 -3
- package/dist/esm/utils/useOptionsArrayToDsTree.js.map +2 -2
- package/dist/types/config/useSplitInherithedProps.d.ts +3 -4
- package/dist/types/parts/DSFlyoutMenu/react-desc-prop-types.d.ts +1 -1
- package/dist/types/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.d.ts +6 -6
- package/dist/types/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.d.ts +1 -0
- package/dist/types/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.d.ts +3 -3
- package/dist/types/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.d.ts +2 -2
- package/dist/types/parts/DSMenuItemRendererFactory/focusNodeRacingConditionSolved.d.ts +2 -0
- package/dist/types/parts/DSMenuItemRendererFactory/react-desc-prop-types.d.ts +2 -2
- package/dist/types/parts/DSOpinionatedButton/react-desc-prop-types.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +10 -4
- package/dist/types/utils/nodesTypeguardsAndGetters.d.ts +113 -1
- package/dist/types/utils/useOptionsArrayToDsTree.d.ts +2 -1
- package/package.json +12 -13
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport type { DSFlyoutMenuT } from '../DSFlyoutMenu/react-desc-prop-types.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\n\nexport declare namespace DSMenuItemRendererFactoryT {\n /*\n * everything that is specifically added in this namespace declaration and is not part of the original component\n * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n * as such, the widget generates those interfaces,\n * but the app developer is not supposed to know about them\n * untill they go atomic composition (this namespace)\n */\n export interface RequiredProps {\n itemNode: DSMenuButtonT.MenuNode;\n FlyoutMenuCircularDepInject: React.ComponentType<DSFlyoutMenuT.Props>;\n }\n\n export interface DefaultProps {}\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSMenuItemRendererFactoryName,\n typeof MENU_ITEM_RENDERER_FACTORY_SLOTS\n > {\n ItemRenderer?: DSMenuButtonT.ItemRendererT;\n }\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLLIElement>, keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLLIElement>, keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemRendererFactoryT.DefaultProps = {};\n\nexport const DSMenuItemRendererFactoryPropTypes: DSPropTypesSchema<DSMenuItemRendererFactoryT.Props> = {\n ...getPropsPerSlotPropTypes(DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n itemNode: PropTypes.object.description('The polymorphic item to render').isRequired,\n ItemRenderer: PropTypes.func.description('The custom item renderer'),\n FlyoutMenuCircularDepInject: PropTypes.func.description(\n 'Flyout menu component, passed to the factory to avoid circular dependency',\n ),\n};\n\nexport const DSMenuItemRendererFactoryPropTypesSchema =\n DSMenuItemRendererFactoryPropTypes as unknown as ValidationMap<DSMenuItemRendererFactoryT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAIP,uBAAgF;AAuCzE,MAAM,eAAwD,CAAC;AAE/D,MAAM,qCAA0F;AAAA,EACrG,OAAG,kDAAyB,gDAA+B,iDAAgC;AAAA,EAC3F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,OAAO,YAAY,gCAAgC,EAAE;AAAA,EACzE,cAAc,kCAAU,KAAK,YAAY,0BAA0B;AAAA,EACnE,6BAA6B,kCAAU,KAAK;AAAA,IAC1C;AAAA,EACF;AACF;AAEO,MAAM,2CACX;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../src/parts/DSOpinionatedButton/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { DSButtonV3DefaultProps, DSButtonV3PropTypes } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { DSMenuSpecificPropTypes, type DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from './constants/index.js';\n\nexport declare namespace DSOpinionatedButtonT {\n /*\n * everything that is specifically added in this namespace declaration and is not part of the original component\n * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n * as such, the widget generates those interfaces,\n * but the app developer is not supposed to know about them\n * untill they go atomic composition (this namespace)\n */\n export interface RequiredProps extends DSMenuButtonT.ButtonInheritedRequiredProps {\n menuSpecificProps: DSMenuButtonT.MenuSpecificProps;\n }\n\n export interface DefaultProps extends DSMenuButtonT.ButtonInheiredDefaultProps {}\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSOpinionatedButtonName, typeof OPINIONATED_BUTTON_SLOTS>,\n DSMenuButtonT.ButtonInheritedOptionalProps {}\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n // this is where global/xstyled props are inherited from DSButtonV3\n DSMenuButtonT.ButtonInheritedProps {\n innerRef: React.RefCallback<HTMLButtonElement>;\n }\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n // this is where global/xstyled props are inherited from DSButtonV3\n DSMenuButtonT.ButtonInheritedInternalProps {\n innerRef: React.RefCallback<HTMLButtonElement>;\n }\n}\n\nexport const defaultProps: DSOpinionatedButtonT.DefaultProps = {\n ...DSButtonV3DefaultProps,\n};\n\nexport const DSOpinionatedButtonPropTypes: DSPropTypesSchema<DSOpinionatedButtonT.Props> = {\n ...getPropsPerSlotPropTypes(DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS),\n ...DSButtonV3PropTypes,\n menuSpecificProps: PropTypes.shape(DSMenuSpecificPropTypes).description('Props for the main flyout menu').isRequired,\n innerRef: PropTypes.func.description(\n 'Ref callback for the button, if not provided how is the flyout menu being positioned?',\n ).isRequired,\n};\n\nexport const DSOpinionatedButtonPropTypesSchema =\n DSOpinionatedButtonPropTypes as unknown as ValidationMap<DSOpinionatedButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA4D;AAE5D,8BAAoD;AAGpD,mCAA4D;AAC5D,uBAAkE;AAuC3D,MAAM,eAAkD;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,+BAA8E;AAAA,EACzF,OAAG,kDAAyB,0CAAyB,yCAAwB;AAAA,EAC7E,GAAG;AAAA,EACH,mBAAmB,kCAAU,MAAM,oDAAuB,EAAE,YAAY,gCAAgC,EAAE;AAAA,EAC1G,UAAU,kCAAU,KAAK;AAAA,IACvB;AAAA,EACF,EAAE;AACJ;AAEO,MAAM,qCACX;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -32,26 +32,24 @@ __export(react_desc_prop_types_exports, {
|
|
32
32
|
DSMenuButtonPropTypesSchema: () => DSMenuButtonPropTypesSchema,
|
33
33
|
DSMenuSpecificPropTypes: () => DSMenuSpecificPropTypes,
|
34
34
|
MenuBehaviouralLayerPropTypes: () => MenuBehaviouralLayerPropTypes,
|
35
|
-
|
35
|
+
menuSpecificDefaultProps: () => menuSpecificDefaultProps
|
36
36
|
});
|
37
37
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
38
38
|
var React = __toESM(require("react"));
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
40
40
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
41
41
|
var import_constants = require("./constants/index.js");
|
42
|
-
const
|
43
|
-
selectedOptions: {},
|
42
|
+
const menuSpecificDefaultProps = {
|
44
43
|
onClickOutside: () => null,
|
45
44
|
onOptionClick: () => null,
|
46
45
|
openedSubmenus: {},
|
47
46
|
onSubmenuToggle: () => null,
|
48
47
|
isLoading: false,
|
49
|
-
isSkeleton: false
|
48
|
+
isSkeleton: false,
|
49
|
+
maxHeight: "256px"
|
50
|
+
// was available in dropdownmenu-v2, have to provide for retrocompatibility
|
50
51
|
};
|
51
52
|
const MenuBehaviouralLayerPropTypes = {
|
52
|
-
selectedItems: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
|
53
|
-
"an array of tree-nodes that have to be marked as selected in the GUI, required if the menu has selectionable items"
|
54
|
-
),
|
55
53
|
onItemSelected: import_ds_props_helpers.PropTypes.func.description(
|
56
54
|
"IoC function in charge of handling the selection of a menu item, required if the menu has selectionable items"
|
57
55
|
).signature(`((
|
@@ -74,9 +72,6 @@ const MenuBehaviouralLayerPropTypes = {
|
|
74
72
|
const DSMenuSpecificPropTypes = {
|
75
73
|
ItemRenderer: import_ds_props_helpers.PropTypes.node.description("Component to be used to render the items"),
|
76
74
|
onClickOutside: import_ds_props_helpers.PropTypes.func.description("Callback executed when you click outside the dropdown menu, or press the Esc key").defaultValue(() => null),
|
77
|
-
selectedOptions: import_ds_props_helpers.PropTypes.object.description(
|
78
|
-
"Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu"
|
79
|
-
).defaultValue({}),
|
80
75
|
onOptionClick: import_ds_props_helpers.PropTypes.func.description(
|
81
76
|
"Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order"
|
82
77
|
).defaultValue(() => null),
|
@@ -87,12 +82,16 @@ const DSMenuSpecificPropTypes = {
|
|
87
82
|
"((nextOpenedSubmenus: Record<string, boolean>, submenu: Item, e: React.MouseEvent | React.KeyboardEvent) => void)"
|
88
83
|
).defaultValue(() => null),
|
89
84
|
isLoading: import_ds_props_helpers.PropTypes.bool.description("Whether the flyout menu should render the loading indicator").defaultValue(false),
|
90
|
-
isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether the flyout menu should render the skeleton").defaultValue(false)
|
85
|
+
isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether the flyout menu should render the skeleton").defaultValue(false),
|
86
|
+
maxHeight: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("The maximum height of the flyout menu").defaultValue("256px")
|
91
87
|
};
|
92
88
|
const DSMenuButtonPropTypes = {
|
93
89
|
options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).description(
|
94
90
|
"Array of options to display in the menu or a DSTree node to build branches from"
|
95
91
|
).isRequired,
|
92
|
+
selectedItems: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
|
93
|
+
"an array of tree-nodes or tree-items that have to be marked as selected in the GUI, required if the menu has selectionable items"
|
94
|
+
),
|
96
95
|
...import_ds_button_v2.DSButtonV3PropTypes,
|
97
96
|
...MenuBehaviouralLayerPropTypes,
|
98
97
|
...DSMenuSpecificPropTypes,
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV3PropTypes } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\n\nimport { DSMenuButtonName, MENU_BUTTON_SLOTS, type MENU_ITEMS_TYPES } from './constants/index.js';\nexport declare namespace DSMenuButtonT {\n /* *******************************************************\n * YURI's NOTE:\n *\n * This polymorphic interface \"looks similar\" between the diffent types\n * but it's actually different upon closer inspection\n *\n * If you are smarter then me, you can probably find a way to make this more DRY\n * but I prefeer AHA (Avoid Hasty Abstractions) that gives me an easier to mantain code\n * ESPECIALLY when the types are so similar but not the same & in typescript (polymorphism is hard in TS)\n *\n * So I'm going to keep them separate and explicit\n * key difference is what's required to exist and what is required to explicitly NOT exist\n *\n * If someone's review this and make this DRY, I'm NOT going to mantain this code moving forward\n * whoever makes this TS DRY will be responsible for it and own it.\n ******************************************************* */\n\n /* **************************************************************************************************************\n *********************************** POLYMORPHIC INTERFACES FOR MENU ITEMS *************************************\n ************************************************************************************************************** */\n export interface RootItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: 'ROOT_ITEM'; // HARDCODED BECAUSE THIS IS NOT A MENU ITEM, IT'S EXCLUSIVE TO THE ROOT NODE\n dsId: string;\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n minWidth?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface SeparatorItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SEPARATOR'];\n dsId: string;\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n minWidth?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface ActivableItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface ActionableWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SkeletonItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SKELETON_ITEM'];\n dsId: string;\n minWidth?: string | number;\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface MultipleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n\n export interface MultiSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface WithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SingleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SingleSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n\n export interface GroupItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['GROUP'];\n dsId: string;\n label?: string; // if present, add a title to the group\n leftDecoration?: React.ComponentType; // if present, a label must also be present\n minWidth?: string | number;\n }\n\n export type MenuItemInterface =\n | SeparatorItem\n | ActivableItem\n | ActionableWithSubmenuItem\n | SkeletonItem\n | MultipleSelectItem\n | MultiSelectWithSubmenuItem\n | WithSubmenuItem\n | GroupItem;\n\n export type PseudoFocusableItemInterface =\n | ActivableItem\n | ActionableWithSubmenuItem\n | SkeletonItem\n | MultipleSelectItem\n | MultiSelectWithSubmenuItem\n | WithSubmenuItem\n | SingleSelectItem\n | SingleSelectWithSubmenuItem;\n\n /* **************************************************************************************************************\n *************************** POLYMORPHIC INTERFACES FOR ITEMS USING DSTREE *************************************\n ************************************************************************************************************** */\n // Define MenuNode types directly\n export type MenuNodeRootItem = UseDSTreeT.TreeNode<RootItem>; // MenuNodesAllowedToHaveChildren is the only expected reference to this type\n export type MenuNodeSeparatorItem = UseDSTreeT.TreeNode<SeparatorItem>;\n export type MenuNodeActivableItem = UseDSTreeT.TreeNode<ActivableItem>;\n export type MenuNodeActivableWithSubmenuItem = UseDSTreeT.TreeNode<ActionableWithSubmenuItem>;\n export type MenuNodeSkeletonItem = UseDSTreeT.TreeNode<SkeletonItem>;\n export type MenuNodeMultipleSelectItem = UseDSTreeT.TreeNode<MultipleSelectItem>;\n export type MenuNodeMultipleSelectWithSubmenuItem = UseDSTreeT.TreeNode<MultiSelectWithSubmenuItem>;\n export type MenuNodeWithSubmenuItem = UseDSTreeT.TreeNode<WithSubmenuItem>;\n export type MenuNodeSingleSelectItem = UseDSTreeT.TreeNode<SingleSelectItem>;\n export type MenuNodeSingleSelectWithSubmenuItem = UseDSTreeT.TreeNode<SingleSelectWithSubmenuItem>;\n export type MenuNodeGroupItem = UseDSTreeT.TreeNode<GroupItem>;\n\n // in the future we want to better describe the polymorphic nature of the MenuNode\n // having each type be able to have it's own \"subitems\" type that isn't necessarily the same as the parent\n // but currenctly the DS tree model typescript definitions don't support this\n // will be addresssed via PUI-XXXX\n export type MenuNode =\n // DO NOT ADD MenuNodeRootItem HERE, WILL BREAK THE SUBTREES\n | MenuNodeSeparatorItem\n | MenuNodeActivableItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeSkeletonItem\n | MenuNodeMultipleSelectItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeWithSubmenuItem\n | MenuNodeSingleSelectItem\n | MenuNodeSingleSelectWithSubmenuItem\n | MenuNodeGroupItem;\n\n export type PseudoFocusableMenuNodes =\n | MenuNodeActivableItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeSkeletonItem\n | MenuNodeSingleSelectItem\n | MenuNodeMultipleSelectItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeWithSubmenuItem\n | MenuNodeSingleSelectWithSubmenuItem;\n\n export type MenuNodesAllowedToHaveChildren =\n | MenuNodeRootItem\n | MenuNodeWithSubmenuItem\n | MenuNodeGroupItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeSingleSelectWithSubmenuItem;\n\n export type SelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type MultipleSelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n\n export type SingleSelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeSingleSelectItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type WithSubmenuMenuNodes =\n | DSMenuButtonT.MenuNodeWithSubmenuItem\n | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type SelectionablesWithSubmenuMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n /* **************************************************************************************************************\n ********************************** PROPS/INTERNAL PROPS DEFINITIONS *******************************************\n ************************************************************************************************************** */\n\n export type ItemRendererT = React.ComponentType<{ itemNode: MenuNode }>;\n\n /* **************************************************************************************************************\n ******************************************* \"REQUIRED\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificRequiredProps {}\n /* *******************************************************\n * Required Props + Inherited Required Props\n * - We inherit the required props from the button\n * - We add the required props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedRequiredProps\n // by using Omit, we remove the keys that are present in the MenuSpecificRequiredProps to ensure collision are handled as expected\n extends Omit<DSButtonV3T.RequiredProps, keyof MenuSpecificRequiredProps> {}\n // the final RequiredProps will be the combination of the two with proper collision handling\n export interface RequiredProps\n extends MenuSpecificRequiredProps,\n ButtonInheritedRequiredProps,\n MenuBehaviouralLayerRequiredProps {\n // it's the Menu Widget sole responsibility to receive the options and convert them to a tree\n options: MenuItemInterface[] | MenuNode;\n }\n\n /* **************************************************************************************************************\n ******************************************** \"DEFAULT\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerDefaultProps {}\n export interface MenuSpecifiDefaultProps {\n onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n onOptionClick: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: MenuItemInterface,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus: Record<string, boolean>;\n onSubmenuToggle: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: MenuItemInterface,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n isLoading: boolean;\n isSkeleton: boolean;\n selectedOptions: Record<string, boolean>;\n }\n\n /* *******************************************************\n * Default Props + Inherited Default Props\n * - We inherit the default props from the button\n * - We add the default props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n // by using Omit, we remove the keys that are present in the MenuSpecificDefaultProps to ensure collision are handled as expected\n export interface ButtonInheiredDefaultProps extends Omit<DSButtonV3T.DefaultProps, keyof MenuSpecifiDefaultProps> {}\n // the final DefaultProps will be the combination of the two with proper collision handling\n export interface DefaultProps\n extends MenuSpecifiDefaultProps,\n ButtonInheiredDefaultProps,\n MenuBehaviouralLayerDefaultProps {}\n\n /* **************************************************************************************************************\n ******************************************* \"OPTIONAL\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerOptionalProps {\n // **********************************************************************************************\n // IoC Pattern\n // - in scenarios where not \"selectionable\" items are present,\n // - the \"selectedItems\" prop is not required\n // - the \"onItemSelected\" prop is not required\n // - in scenarios where no \"activation\" items are present,\n // - the \"onActivateItem\" prop is not required\n // AFAIK Typescipt doesn't support this kind of \"conditional\" required props\n // so we will rely on javascript error throwing to handle this + documentation\n // **********************************************************************************************\n selectedItems?: SelectionableMenuNodes[];\n onItemSelected?: (\n newSelection: SelectionableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n onActivateItem?: (\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void;\n // **********************************************************************************************\n onOpen?: () => void;\n onClose?: () => void;\n onDisplayedSubmenuChange?: (\n newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[],\n metainfo: {\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes | null;\n event?: React.SyntheticEvent | FocusEvent | TouchEvent;\n },\n ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.WithSubmenuMenuNodes[]>;\n }\n export interface MenuSpecificOptionalProps {\n ItemRenderer?: ItemRendererT;\n }\n /* *******************************************************\n * Optional Props + Inherited Optional Props\n * - We inherit the optional props from the button\n * - We add the optional props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedOptionalProps\n // by using Omit, we remove the keys that are present in the MenuSpecificOptionalProps to ensure collision are handled as expected\n extends Omit<DSButtonV3T.OptionalProps, keyof MenuSpecificOptionalProps> {}\n export interface OptionalProps\n extends MenuSpecificOptionalProps,\n ButtonInheritedOptionalProps,\n MenuBehaviouralLayerOptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSMenuButtonName, typeof MENU_BUTTON_SLOTS> {}\n\n /* **************************************************************************************************************\n ************************************************ PROPS *******************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerProps\n extends Partial<MenuBehaviouralLayerDefaultProps>,\n MenuBehaviouralLayerOptionalProps,\n MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificProps\n extends Partial<MenuSpecifiDefaultProps>,\n MenuSpecificOptionalProps,\n MenuSpecificRequiredProps {}\n /* *******************************************************\n * Props + Inherited Props\n * - We inherit the props from the button\n * - We add the props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n // by using Omit, we remove the keys that are present in the MenuSpecificProps to ensure collision are handled as expected\n // THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n export interface ButtonInheritedProps extends Omit<DSButtonV3T.Props, keyof MenuSpecificProps> {}\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n // to properly inherith button's global & xstyled props, we need to also include the following\n Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n\n /* **************************************************************************************************************\n ******************************************** INTERNAL PROPS ***************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerInternalProps\n extends MenuBehaviouralLayerDefaultProps,\n MenuBehaviouralLayerOptionalProps,\n MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificInternalProps\n extends MenuSpecifiDefaultProps,\n MenuSpecificOptionalProps,\n MenuSpecificRequiredProps {}\n\n /* *******************************************************\n * Internal Props\n * - We inherit the internal props from the button\n * - We add the internal props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedInternalProps\n // by using Omit, we remove the keys that are present in the MenuSpecificInternalProps to ensure collision are handled as expected\n // THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n extends Omit<DSButtonV3T.InternalProps, keyof MenuSpecificInternalProps> {}\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n // to properly inherith button's global & xstyled props, we need to also include the following\n Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSMenuButtonT.MenuSpecifiDefaultProps = {\n selectedOptions: {},\n onClickOutside: () => null,\n onOptionClick: () => null,\n openedSubmenus: {},\n onSubmenuToggle: () => null,\n isLoading: false,\n isSkeleton: false,\n};\n/* *******************************************************\n * We are building a widget composed of 3 ATOMIC composition components\n * - Button\n * - Menu\n * - Behavioural Layer\n * The final API facing the users is a sum of all 3 interfaces\n * THOSE INTERFACES ARE NOT EQUAL TO THE FINAL \"PARTS\" INTERFACES\n * The widget embeds \"assumptions\" (as all widgets do) that are AGNOSTIC to the \"parts\" interfaces\n * The \"Parts\" interfaces \"mostly\" inherit the following interfaces, but with meaningful meant and planned differences\n * (E.G. the widget accepts an array of options, but the Menu part accepts a DSTree only)\n ******************************************************* */\nexport const MenuBehaviouralLayerPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuBehaviouralLayerProps> = {\n selectedItems: PropTypes.arrayOf(PropTypes.object).description(\n 'an array of tree-nodes that have to be marked as selected in the GUI, required if the menu has selectionable items',\n ),\n onItemSelected: PropTypes.func.description(\n 'IoC function in charge of handling the selection of a menu item, required if the menu has selectionable items',\n ).signature(`((\n newSelection: DSMenuButtonT.PseudoFocusableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n\n onActivateItem: PropTypes.func.description(\n 'IoC function in charge of handling the activation (NOT INVOKED ON SELECTION) of a menu item, required if the menu has activable items',\n ).signature(`((\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n\n onOpen: PropTypes.func.description('function triggered when the widget opens the menu').signature(`(()=>void)`),\n onClose: PropTypes.func.description('function triggered when the widget closes the menu').signature(`(()=>void)`),\n onDisplayedSubmenuChange: PropTypes.func.description(\"function triggered when the widget's closes or opens a submenu\")\n .signature(`((\n newOpenedItems: DSMenuButtonT.PseudoFocusableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n};\n\nexport const DSMenuSpecificPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuSpecificProps> = {\n ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n onClickOutside: PropTypes.func\n .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n .defaultValue(() => null),\n selectedOptions: PropTypes.object\n .description(\n 'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n )\n .defaultValue({}),\n onOptionClick: PropTypes.func\n .description(\n 'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n )\n .defaultValue(() => null),\n openedSubmenus: PropTypes.object\n .description(\n 'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n )\n .defaultValue({}),\n onSubmenuToggle: PropTypes.func\n .description('Callback triggered when a submenu is opened or closed.')\n .signature(\n '((nextOpenedSubmenus: Record<string, boolean>, submenu: Item, e: React.MouseEvent | React.KeyboardEvent) => void)',\n )\n .defaultValue(() => null),\n isLoading: PropTypes.bool\n .description('Whether the flyout menu should render the loading indicator')\n .defaultValue(false),\n isSkeleton: PropTypes.bool.description('Whether the flyout menu should render the skeleton').defaultValue(false),\n};\n\nexport const DSMenuButtonPropTypes: DSPropTypesSchema<DSMenuButtonT.Props> = {\n options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description(\n 'Array of options to display in the menu or a DSTree node to build branches from',\n ).isRequired,\n ...DSButtonV3PropTypes,\n ...MenuBehaviouralLayerPropTypes,\n ...DSMenuSpecificPropTypes,\n ...getPropsPerSlotPropTypes(DSMenuButtonName, MENU_BUTTON_SLOTS),\n};\n\nexport const DSMenuButtonPropTypesSchema = DSMenuButtonPropTypes as unknown as ValidationMap<DSMenuButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAoD;AACpD,0BAAoC;AAMpC,uBAA2E;
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV3PropTypes } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\n\nimport { DSMenuButtonName, MENU_BUTTON_SLOTS, type MENU_ITEMS_TYPES } from './constants/index.js';\nexport declare namespace DSMenuButtonT {\n /* *******************************************************\n * YURI's NOTE:\n *\n * This polymorphic interface \"looks similar\" between the diffent types\n * but it's actually different upon closer inspection\n *\n * If you are smarter then me, you can probably find a way to make this more DRY\n * but I prefeer AHA (Avoid Hasty Abstractions) that gives me an easier to mantain code\n * ESPECIALLY when the types are so similar but not the same & in typescript (polymorphism is hard in TS)\n *\n * So I'm going to keep them separate and explicit\n * key difference is what's required to exist and what is required to explicitly NOT exist\n *\n * If someone's review this and make this DRY, I'm NOT going to mantain this code moving forward\n * whoever makes this TS DRY will be responsible for it and own it.\n ******************************************************* */\n\n /* **************************************************************************************************************\n *********************************** POLYMORPHIC INTERFACES FOR MENU ITEMS *************************************\n ************************************************************************************************************** */\n export interface RootItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: 'ROOT_ITEM'; // HARDCODED BECAUSE THIS IS NOT A MENU ITEM, IT'S EXCLUSIVE TO THE ROOT NODE\n dsId: string;\n maxHeight?: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n minWidth?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface SeparatorItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SEPARATOR'];\n dsId: string;\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n minWidth?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface ActivableItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface ActionableWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n maxHeight?: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SkeletonItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SKELETON_ITEM'];\n dsId: string;\n minWidth?: string | number;\n label?: undefined;\n secondaryLabel?: undefined;\n leftDecoration?: undefined;\n disabled?: undefined;\n onClick?: undefined;\n onKeyDown?: undefined;\n }\n export interface MultipleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n\n export interface MultiSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n maxHeight?: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface WithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n maxHeight?: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SingleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n export interface SingleSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_WITH_SUBMENU_ITEM'];\n dsId: string;\n label: string;\n secondaryLabel?: string;\n leftDecoration?: React.ComponentType;\n minWidth?: string | number;\n maxHeight: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n disabled?: boolean;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => null;\n }\n\n export interface GroupItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n type: (typeof MENU_ITEMS_TYPES)['GROUP'];\n dsId: string;\n label?: string; // if present, add a title to the group\n leftDecoration?: React.ComponentType; // if present, a label must also be present\n minWidth?: string | number;\n }\n\n export type MenuItemInterface =\n | SeparatorItem\n | ActivableItem\n | ActionableWithSubmenuItem\n | SkeletonItem\n | MultipleSelectItem\n | MultiSelectWithSubmenuItem\n | WithSubmenuItem\n | GroupItem\n | SingleSelectItem\n | SingleSelectWithSubmenuItem;\n\n export type PseudoFocusableItemInterface =\n | ActivableItem\n | ActionableWithSubmenuItem\n | SkeletonItem\n | MultipleSelectItem\n | MultiSelectWithSubmenuItem\n | WithSubmenuItem\n | SingleSelectItem\n | SingleSelectWithSubmenuItem;\n\n export type SelectionableMenuItemInterface =\n | MultipleSelectItem\n | MultiSelectWithSubmenuItem\n | SingleSelectItem\n | SingleSelectWithSubmenuItem;\n\n /* **************************************************************************************************************\n *************************** POLYMORPHIC INTERFACES FOR ITEMS USING DSTREE *************************************\n ************************************************************************************************************** */\n // Define MenuNode types directly\n export type MenuNodeRootItem = UseDSTreeT.TreeNode<RootItem>; // MenuNodesAllowedToHaveChildren is the only expected reference to this type\n export type MenuNodeSeparatorItem = UseDSTreeT.TreeNode<SeparatorItem>;\n export type MenuNodeActivableItem = UseDSTreeT.TreeNode<ActivableItem>;\n export type MenuNodeActivableWithSubmenuItem = UseDSTreeT.TreeNode<ActionableWithSubmenuItem>;\n export type MenuNodeSkeletonItem = UseDSTreeT.TreeNode<SkeletonItem>;\n export type MenuNodeMultipleSelectItem = UseDSTreeT.TreeNode<MultipleSelectItem>;\n export type MenuNodeMultipleSelectWithSubmenuItem = UseDSTreeT.TreeNode<MultiSelectWithSubmenuItem>;\n export type MenuNodeWithSubmenuItem = UseDSTreeT.TreeNode<WithSubmenuItem>;\n export type MenuNodeSingleSelectItem = UseDSTreeT.TreeNode<SingleSelectItem>;\n export type MenuNodeSingleSelectWithSubmenuItem = UseDSTreeT.TreeNode<SingleSelectWithSubmenuItem>;\n export type MenuNodeGroupItem = UseDSTreeT.TreeNode<GroupItem>;\n\n // in the future we want to better describe the polymorphic nature of the MenuNode\n // having each type be able to have it's own \"subitems\" type that isn't necessarily the same as the parent\n // but currenctly the DS tree model typescript definitions don't support this\n // will be addresssed via PUI-XXXX\n export type MenuNode =\n // DO NOT ADD MenuNodeRootItem HERE, WILL BREAK THE SUBTREES\n | MenuNodeSeparatorItem\n | MenuNodeActivableItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeSkeletonItem\n | MenuNodeMultipleSelectItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeWithSubmenuItem\n | MenuNodeSingleSelectItem\n | MenuNodeSingleSelectWithSubmenuItem\n | MenuNodeGroupItem;\n\n export type PseudoFocusableMenuNodes =\n | MenuNodeActivableItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeSkeletonItem\n | MenuNodeSingleSelectItem\n | MenuNodeMultipleSelectItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeWithSubmenuItem\n | MenuNodeSingleSelectWithSubmenuItem;\n\n export type MenuNodesAllowedToHaveChildren =\n | MenuNodeRootItem\n | MenuNodeWithSubmenuItem\n | MenuNodeGroupItem\n | MenuNodeActivableWithSubmenuItem\n | MenuNodeMultipleSelectWithSubmenuItem\n | MenuNodeSingleSelectWithSubmenuItem;\n\n export type SelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type MultipleSelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n\n export type SingleSelectionableMenuNodes =\n | DSMenuButtonT.MenuNodeSingleSelectItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type WithSubmenuMenuNodes =\n | DSMenuButtonT.MenuNodeWithSubmenuItem\n | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n export type SelectionablesWithSubmenuMenuNodes =\n | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n /* **************************************************************************************************************\n ********************************** PROPS/INTERNAL PROPS DEFINITIONS *******************************************\n ************************************************************************************************************** */\n\n export type ItemRendererT = React.ComponentType<{ itemNode: MenuNode }>;\n\n /* **************************************************************************************************************\n ******************************************* \"REQUIRED\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificRequiredProps {}\n /* *******************************************************\n * Required Props + Inherited Required Props\n * - We inherit the required props from the button\n * - We add the required props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedRequiredProps\n // by using Omit, we remove the keys that are present in the MenuSpecificRequiredProps to ensure collision are handled as expected\n extends Omit<DSButtonV3T.RequiredProps, keyof MenuSpecificRequiredProps> {}\n // the final RequiredProps will be the combination of the two with proper collision handling\n export interface RequiredProps\n extends MenuSpecificRequiredProps,\n ButtonInheritedRequiredProps,\n MenuBehaviouralLayerRequiredProps {\n // it's the Menu Widget sole responsibility to receive the options and convert them to a tree\n options: MenuItemInterface[] | MenuNode;\n }\n\n /* **************************************************************************************************************\n ******************************************** \"DEFAULT\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerDefaultProps {}\n export interface MenuSpecifiDefaultProps {\n onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n onOptionClick: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: MenuItemInterface,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus: Record<string, boolean>;\n onSubmenuToggle: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: MenuItemInterface,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n isLoading: boolean;\n isSkeleton: boolean;\n maxHeight: string | number; // was available in dropdownmenu-v2, have to provide for retrocompatibility\n }\n\n /* *******************************************************\n * Default Props + Inherited Default Props\n * - We inherit the default props from the button\n * - We add the default props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n // by using Omit, we remove the keys that are present in the MenuSpecificDefaultProps to ensure collision are handled as expected\n export interface ButtonInheiredDefaultProps extends Omit<DSButtonV3T.DefaultProps, keyof MenuSpecifiDefaultProps> {}\n // the final DefaultProps will be the combination of the two with proper collision handling\n export interface DefaultProps\n extends MenuSpecifiDefaultProps,\n ButtonInheiredDefaultProps,\n MenuBehaviouralLayerDefaultProps {}\n\n /* **************************************************************************************************************\n ******************************************* \"OPTIONAL\" PROPS **************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerOptionalProps {\n // **********************************************************************************************\n // IoC Pattern\n // - in scenarios where not \"selectionable\" items are present,\n // - the \"selectedItems\" prop is not required\n // - the \"onItemSelected\" prop is not required\n // - in scenarios where no \"activation\" items are present,\n // - the \"onActivateItem\" prop is not required\n // AFAIK Typescipt doesn't support this kind of \"conditional\" required props\n // so we will rely on javascript error throwing to handle this + documentation\n // **********************************************************************************************\n onItemSelected?: (\n newSelection: SelectionableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n onActivateItem?: (\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void;\n // **********************************************************************************************\n onOpen?: () => void;\n onClose?: () => void;\n onDisplayedSubmenuChange?: (\n newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[],\n metainfo: {\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes | null;\n event?: React.SyntheticEvent | FocusEvent | TouchEvent;\n },\n ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.WithSubmenuMenuNodes[]>;\n }\n export interface MenuSpecificOptionalProps {\n ItemRenderer?: ItemRendererT;\n }\n /* *******************************************************\n * Optional Props + Inherited Optional Props\n * - We inherit the optional props from the button\n * - We add the optional props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedOptionalProps\n // by using Omit, we remove the keys that are present in the MenuSpecificOptionalProps to ensure collision are handled as expected\n extends Omit<DSButtonV3T.OptionalProps, keyof MenuSpecificOptionalProps> {}\n export interface OptionalProps\n extends MenuSpecificOptionalProps,\n ButtonInheritedOptionalProps,\n // we convert the (selected) options to a Nodes as part of the widget's logic\n MenuBehaviouralLayerOptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSMenuButtonName, typeof MENU_BUTTON_SLOTS> {\n // we convert the (selected) options to a Nodes as part of the widget's logic\n selectedItems?: SelectionableMenuNodes[] | SelectionableMenuItemInterface[];\n }\n\n /* **************************************************************************************************************\n ************************************************ PROPS *******************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerProps\n extends Partial<MenuBehaviouralLayerDefaultProps>,\n MenuBehaviouralLayerOptionalProps,\n MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificProps\n extends Partial<MenuSpecifiDefaultProps>,\n MenuSpecificOptionalProps,\n MenuSpecificRequiredProps {}\n /* *******************************************************\n * Props + Inherited Props\n * - We inherit the props from the button\n * - We add the props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n // by using Omit, we remove the keys that are present in the MenuSpecificProps to ensure collision are handled as expected\n // THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n export interface ButtonInheritedProps extends Omit<DSButtonV3T.Props, keyof MenuSpecificProps> {}\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n // to properly inherith button's global & xstyled props, we need to also include the following\n Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n\n /* **************************************************************************************************************\n ******************************************** INTERNAL PROPS ***************************************************\n ************************************************************************************************************** */\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 export interface MenuBehaviouralLayerInternalProps\n extends MenuBehaviouralLayerDefaultProps,\n MenuBehaviouralLayerOptionalProps,\n MenuBehaviouralLayerRequiredProps {}\n export interface MenuSpecificInternalProps\n extends MenuSpecifiDefaultProps,\n MenuSpecificOptionalProps,\n MenuSpecificRequiredProps {}\n\n /* *******************************************************\n * Internal Props\n * - We inherit the internal props from the button\n * - We add the internal props for the menu\n *\n * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n ******************************************************* */\n export interface ButtonInheritedInternalProps\n // by using Omit, we remove the keys that are present in the MenuSpecificInternalProps to ensure collision are handled as expected\n // THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n extends Omit<DSButtonV3T.InternalProps, keyof MenuSpecificInternalProps> {}\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n // to properly inherith button's global & xstyled props, we need to also include the following\n Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const menuSpecificDefaultProps: DSMenuButtonT.MenuSpecifiDefaultProps = {\n onClickOutside: () => null,\n onOptionClick: () => null,\n openedSubmenus: {},\n onSubmenuToggle: () => null,\n isLoading: false,\n isSkeleton: false,\n maxHeight: '256px', // was available in dropdownmenu-v2, have to provide for retrocompatibility\n};\n/* *******************************************************\n * We are building a widget composed of 3 ATOMIC composition components\n * - Button\n * - Menu\n * - Behavioural Layer\n * The final API facing the users is a sum of all 3 interfaces\n * THOSE INTERFACES ARE NOT EQUAL TO THE FINAL \"PARTS\" INTERFACES\n * The widget embeds \"assumptions\" (as all widgets do) that are AGNOSTIC to the \"parts\" interfaces\n * The \"Parts\" interfaces \"mostly\" inherit the following interfaces, but with meaningful meant and planned differences\n * (E.G. the widget accepts an array of options, but the Menu part accepts a DSTree only)\n ******************************************************* */\nexport const MenuBehaviouralLayerPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuBehaviouralLayerProps> = {\n onItemSelected: PropTypes.func.description(\n 'IoC function in charge of handling the selection of a menu item, required if the menu has selectionable items',\n ).signature(`((\n newSelection: DSMenuButtonT.PseudoFocusableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n\n onActivateItem: PropTypes.func.description(\n 'IoC function in charge of handling the activation (NOT INVOKED ON SELECTION) of a menu item, required if the menu has activable items',\n ).signature(`((\n itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n\n onOpen: PropTypes.func.description('function triggered when the widget opens the menu').signature(`(()=>void)`),\n onClose: PropTypes.func.description('function triggered when the widget closes the menu').signature(`(()=>void)`),\n onDisplayedSubmenuChange: PropTypes.func.description(\"function triggered when the widget's closes or opens a submenu\")\n .signature(`((\n newOpenedItems: DSMenuButtonT.PseudoFocusableMenuNodes[],\n metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n ) => void)`),\n};\n\nexport const DSMenuSpecificPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuSpecificProps> = {\n ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n onClickOutside: PropTypes.func\n .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n .defaultValue(() => null),\n onOptionClick: PropTypes.func\n .description(\n 'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n )\n .defaultValue(() => null),\n openedSubmenus: PropTypes.object\n .description(\n 'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n )\n .defaultValue({}),\n onSubmenuToggle: PropTypes.func\n .description('Callback triggered when a submenu is opened or closed.')\n .signature(\n '((nextOpenedSubmenus: Record<string, boolean>, submenu: Item, e: React.MouseEvent | React.KeyboardEvent) => void)',\n )\n .defaultValue(() => null),\n isLoading: PropTypes.bool\n .description('Whether the flyout menu should render the loading indicator')\n .defaultValue(false),\n isSkeleton: PropTypes.bool.description('Whether the flyout menu should render the skeleton').defaultValue(false),\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('The maximum height of the flyout menu')\n .defaultValue('256px'),\n};\n\nexport const DSMenuButtonPropTypes: DSPropTypesSchema<DSMenuButtonT.Props> = {\n options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description(\n 'Array of options to display in the menu or a DSTree node to build branches from',\n ).isRequired,\n selectedItems: PropTypes.arrayOf(PropTypes.object).description(\n 'an array of tree-nodes or tree-items that have to be marked as selected in the GUI, required if the menu has selectionable items',\n ),\n ...DSButtonV3PropTypes,\n ...MenuBehaviouralLayerPropTypes,\n ...DSMenuSpecificPropTypes,\n ...getPropsPerSlotPropTypes(DSMenuButtonName, MENU_BUTTON_SLOTS),\n};\n\nexport const DSMenuButtonPropTypesSchema = DSMenuButtonPropTypes as unknown as ValidationMap<DSMenuButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAoD;AACpD,0BAAoC;AAMpC,uBAA2E;AAwdpE,MAAM,2BAAkE;AAAA,EAC7E,gBAAgB,MAAM;AAAA,EACtB,eAAe,MAAM;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA;AACb;AAYO,MAAM,gCAA4F;AAAA,EACvG,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,QAAQ,kCAAU,KAAK,YAAY,mDAAmD,EAAE,UAAU,YAAY;AAAA,EAC9G,SAAS,kCAAU,KAAK,YAAY,oDAAoD,EAAE,UAAU,YAAY;AAAA,EAChH,0BAA0B,kCAAU,KAAK,YAAY,gEAAgE,EAClH,UAAU;AAAA;AAAA;AAAA,eAGA;AACf;AAEO,MAAM,0BAA8E;AAAA,EACzF,cAAc,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACnF,gBAAgB,kCAAU,KACvB,YAAY,kFAAkF,EAC9F,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,kCAAU,OACvB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,KACxB,YAAY,wDAAwD,EACpE;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,WAAW,kCAAU,KAClB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,YAAY,kCAAU,KAAK,YAAY,oDAAoD,EAAE,aAAa,KAAK;AAAA,EAC/G,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAChE,YAAY,uCAAuC,EACnD,aAAa,OAAO;AACzB;AAEO,MAAM,wBAAgE;AAAA,EAC3E,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAAE;AAAA,IAChE;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,mCAAkB,kCAAiB;AACjE;AAEO,MAAM,8BAA8B;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -39,6 +39,7 @@ __export(nodesTypeguardsAndGetters_exports, {
|
|
39
39
|
isMultipleSelectNode: () => isMultipleSelectNode,
|
40
40
|
isMultipleSelectOnlyNode: () => isMultipleSelectOnlyNode,
|
41
41
|
isMultipleSelectWithSubmenuNode: () => isMultipleSelectWithSubmenuNode,
|
42
|
+
isObjectAMenuNode: () => isObjectAMenuNode,
|
42
43
|
isRootNode: () => isRootNode,
|
43
44
|
isSelectionableNode: () => isSelectionableNode,
|
44
45
|
isSelectionableWithSubmenuNode: () => isSelectionableWithSubmenuNode,
|
@@ -53,71 +54,32 @@ __export(nodesTypeguardsAndGetters_exports, {
|
|
53
54
|
module.exports = __toCommonJS(nodesTypeguardsAndGetters_exports);
|
54
55
|
var React = __toESM(require("react"));
|
55
56
|
var import_constants = require("../constants/index.js");
|
56
|
-
const
|
57
|
+
const isObjectAMenuNode = (item) => {
|
57
58
|
const node = item;
|
58
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type
|
59
|
-
};
|
60
|
-
const isActivableWithSubmenuNode = (item) => {
|
61
|
-
const node = item;
|
62
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;
|
63
|
-
};
|
64
|
-
const isSkeletonNode = (item) => {
|
65
|
-
const node = item;
|
66
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM;
|
67
|
-
};
|
68
|
-
const isMultipleSelectOnlyNode = (item) => {
|
69
|
-
const node = item;
|
70
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;
|
71
|
-
};
|
72
|
-
const isMultipleSelectWithSubmenuNode = (item) => {
|
73
|
-
const node = item;
|
74
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;
|
59
|
+
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type !== void 0 && node.dsId !== void 0;
|
75
60
|
};
|
61
|
+
const isActivableNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_ITEM;
|
62
|
+
const isSkeletonNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM;
|
63
|
+
const isMultipleSelectOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;
|
64
|
+
const isMultipleSelectWithSubmenuNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;
|
76
65
|
const isMultipleSelectNode = (item) => isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);
|
77
|
-
const isSingleSelectOnlyNode = (item) =>
|
78
|
-
|
79
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;
|
80
|
-
};
|
81
|
-
const isSingleSelectNodeWithSubmenu = (item) => {
|
82
|
-
const node = item;
|
83
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;
|
84
|
-
};
|
66
|
+
const isSingleSelectOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;
|
67
|
+
const isSingleSelectNodeWithSubmenu = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;
|
85
68
|
const isSingleSelectNode = (item) => isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);
|
86
69
|
const isSelectionableNode = (item) => isMultipleSelectNode(item) || isSingleSelectNode(item);
|
87
|
-
const getSelectionableNodes = (tree) =>
|
88
|
-
|
89
|
-
return flattenNodes.filter(isSelectionableNode);
|
90
|
-
};
|
91
|
-
const isWithSubmenuOnlyNode = (item) => {
|
92
|
-
const node = item;
|
93
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;
|
94
|
-
};
|
70
|
+
const getSelectionableNodes = (tree) => tree.flatten().filter(isSelectionableNode);
|
71
|
+
const isWithSubmenuOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;
|
95
72
|
const isSelectionableWithSubmenuNode = (item) => isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);
|
96
|
-
const
|
97
|
-
const
|
98
|
-
|
99
|
-
|
100
|
-
};
|
101
|
-
const isFocusableNode = (item) => {
|
102
|
-
const node = item;
|
103
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && typeof node.plainItem.type === "string" && (node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM);
|
104
|
-
};
|
73
|
+
const isActivableWithSubmenuNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;
|
74
|
+
const isWithSubmenuNode = (item) => isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
|
75
|
+
const getWithSubmenuNodes = (tree) => tree.flatten().filter(isWithSubmenuNode);
|
76
|
+
const isFocusableNode = (item) => isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);
|
105
77
|
const getFocusableNodes = (tree) => {
|
106
78
|
const flattenNodes = tree.flatten();
|
107
79
|
return flattenNodes.filter(isFocusableNode);
|
108
80
|
};
|
109
|
-
const isSeparatorNode = (item) =>
|
110
|
-
|
111
|
-
|
112
|
-
};
|
113
|
-
const isGroup = (item) => {
|
114
|
-
const node = item;
|
115
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.GROUP;
|
116
|
-
};
|
117
|
-
const isRootNode = (item) => {
|
118
|
-
const node = item;
|
119
|
-
return typeof item === "object" && item !== null && typeof node.plainItem === "object" && // hardcoded string because the root item is not a renderable item and must always be treated with special care
|
120
|
-
node.plainItem?.type === "ROOT_ITEM";
|
121
|
-
};
|
81
|
+
const isSeparatorNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SEPARATOR;
|
82
|
+
const isGroup = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.GROUP;
|
83
|
+
const isRootNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === "ROOT_ITEM";
|
122
84
|
const isMenuNodeAllowedToHaveChildren = (item) => isRootNode(item) || isWithSubmenuNode(item) || isGroup(item) || isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
|
123
85
|
//# sourceMappingURL=nodesTypeguardsAndGetters.js.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/utils/nodesTypeguardsAndGetters.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n// =============================================================================\n// Focusable nodes\n// =============================================================================\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM\n );\n};\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM\n );\n};\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM\n );\n};\n// =============================================================================\n// Focusable but more specifically specifically selectable nodes\n// =============================================================================\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM\n );\n};\n\nexport const isMultipleSelectWithSubmenuNode = (\n item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM\n );\n};\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM\n );\n};\n\nexport const isSingleSelectNodeWithSubmenu = (\n item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM\n );\n};\n\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n isMultipleSelectNode(item) || isSingleSelectNode(item);\n\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] => {\n const flattenNodes = tree.flatten();\n return flattenNodes.filter(isSelectionableNode);\n};\n\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM\n );\n};\n\nexport const isSelectionableWithSubmenuNode = (\n item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n isWithSubmenuOnlyNode(item) ||\n isSingleSelectNodeWithSubmenu(item) ||\n isMultipleSelectWithSubmenuNode(item) ||\n isActivableWithSubmenuNode(item);\n\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n const flattenNodes = tree.flatten();\n return flattenNodes.filter(isWithSubmenuNode);\n};\n\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n typeof node.plainItem.type === 'string' &&\n (node.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM ||\n node.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM)\n );\n};\n\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n const flattenNodes = tree.flatten();\n return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR\n );\n};\n\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type === MENU_ITEMS_TYPES.GROUP\n );\n};\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem => {\n const node = item as { plainItem?: { type?: unknown } };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n // hardcoded string because the root item is not a renderable item and must always be treated with special care\n node.plainItem?.type === 'ROOT_ITEM'\n );\n};\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n// (the node not necessarily needs to be focusable or a submenu)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n isRootNode(item) ||\n isWithSubmenuNode(item) ||\n isGroup(item) ||\n isSingleSelectNodeWithSubmenu(item) ||\n isMultipleSelectWithSubmenuNode(item) ||\n isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n\n/**\n * Heuristic to determine if the selected item is an item or a node.\n * Not perfect because JavaScript is not typed.\n * If app devs provide an object that matches all of those conditions, it's an edge case the app devs should handle.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is (heuristically) a menu node, false otherwise.\n */\nexport const isObjectAMenuNode = (item: unknown): item is DSMenuButtonT.MenuNode => {\n const node = item as { plainItem?: { type?: unknown }; dsId?: unknown };\n return (\n typeof item === 'object' &&\n item !== null &&\n typeof node.plainItem === 'object' &&\n node.plainItem?.type !== undefined &&\n node.dsId !== undefined\n );\n};\n\n// =============================================================================\n// Focusable nodes\n// =============================================================================\n/**\n * Checks if the item is an activable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node, false otherwise.\n */\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM;\n\n/**\n * Checks if the item is a skeleton node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a skeleton node, false otherwise.\n */\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM;\n\n// =============================================================================\n// Focusable but more specifically selectable nodes\n// =============================================================================\n\n/**\n * Checks if the item is a multiple select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select only node, false otherwise.\n */\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a multiple select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node with a submenu, false otherwise.\n */\nexport const isMultipleSelectWithSubmenuNode = (\n item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a multiple select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node, false otherwise.\n */\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\n/**\n * Checks if the item is a single select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select only node, false otherwise.\n */\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a single select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node with a submenu, false otherwise.\n */\nexport const isSingleSelectNodeWithSubmenu = (\n item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a single select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node, false otherwise.\n */\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\n/**\n * Checks if the item is a selectionable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node, false otherwise.\n */\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n isMultipleSelectNode(item) || isSingleSelectNode(item);\n\n/**\n * Gets all selectionable nodes from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - An array of selectionable nodes.\n */\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] =>\n tree.flatten().filter(isSelectionableNode);\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\n/**\n * Checks if the item is a node with a submenu (and nothing else).\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a selectionable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node with a submenu, false otherwise.\n */\nexport const isSelectionableWithSubmenuNode = (\n item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n/**\n * Checks if the item is an activable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node with a submenu, false otherwise.\n */\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);\n\n/**\n * Gets all nodes with a submenu from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes with a submenu.\n */\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] =>\n tree.flatten().filter(isWithSubmenuNode);\n/**\n * Checks if the item is a node that can be focused.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node that can be focused, false otherwise.\n */\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes =>\n isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);\n\n/**\n * Gets all nodes that can be focused from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n */\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n const flattenNodes = tree.flatten();\n return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\n/**\n * Checks if the item is a separator node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a separator node, false otherwise.\n */\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR;\n/**\n * Checks if the item is a group node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a group node, false otherwise.\n */\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem =>\n isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.GROUP;\n\n/**\n * Checks if the given item is a root node of the menu.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n * @remarks\n * The root item is not a renderable item and must always be treated with special care.\n *\n * This function uses a hardcoded string to identify the root item.\n */\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem =>\n isObjectAMenuNode(item) && (item.plainItem?.type as string) === 'ROOT_ITEM';\n\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n// (the node not necessarily needs to be focusable or a submenu, E.G. a group)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n isRootNode(item) ||\n isWithSubmenuNode(item) ||\n isGroup(item) ||\n isSingleSelectNodeWithSubmenu(item) ||\n isMultipleSelectWithSubmenuNode(item) ||\n isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;AAS1B,MAAM,oBAAoB,CAAC,SAAkD;AAClF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,UACzB,KAAK,SAAS;AAElB;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iBAAiB,CAAC,SAC7B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,2BAA2B,CAAC,SACvC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,kCAAkC,CAC7C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,uBAAuB,CAAC,SACnC,yBAAyB,IAAI,KAAK,gCAAgC,IAAI;AAOjE,MAAM,yBAAyB,CAAC,SACrC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,gCAAgC,CAC3C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,qBAAqB,CAAC,SACjC,uBAAuB,IAAI,KAAK,8BAA8B,IAAI;AAO7D,MAAM,sBAAsB,CAAC,SAClC,qBAAqB,IAAI,KAAK,mBAAmB,IAAI;AAOhD,MAAM,wBAAwB,CAAC,SACpC,KAAK,QAAQ,EAAE,OAAO,mBAAmB;AASpC,MAAM,wBAAwB,CAAC,SACpC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iCAAiC,CAC5C,SAEA,8BAA8B,IAAI,KAAK,gCAAgC,IAAI;AAMtE,MAAM,6BAA6B,CAAC,SACzC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,oBAAoB,CAAC,SAChC,sBAAsB,IAAI,KAAK,+BAA+B,IAAI,KAAK,2BAA2B,IAAI;AAOjG,MAAM,sBAAsB,CAAC,SAClC,KAAK,QAAQ,EAAE,OAAO,iBAAiB;AAMlC,MAAM,kBAAkB,CAAC,SAC9B,oBAAoB,IAAI,KAAK,gBAAgB,IAAI,KAAK,kBAAkB,IAAI,KAAK,eAAe,IAAI;AAO/F,MAAM,oBAAoB,CAAC,SAA2E;AAC3G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,eAAe;AAC5C;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAMhE,MAAM,UAAU,CAAC,SACtB,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,aAAa,CAAC,SACzB,kBAAkB,IAAI,KAAM,KAAK,WAAW,SAAoB;AAM3D,MAAM,kCAAkC,CAAC,SAC9C,WAAW,IAAI,KACf,kBAAkB,IAAI,KACtB,QAAQ,IAAI,KACZ,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -34,21 +34,28 @@ module.exports = __toCommonJS(useOptionsArrayToDsTree_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
35
35
|
var import_react = __toESM(require("react"));
|
36
36
|
var import_ds_tree_model = require("@elliemae/ds-tree-model");
|
37
|
+
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
37
38
|
const useDsTreeOpts = {
|
38
39
|
getUniqueId: (item) => item.dsId
|
39
40
|
};
|
40
|
-
const useOptionsArrayToDsTree = ({
|
41
|
+
const useOptionsArrayToDsTree = ({
|
42
|
+
options,
|
43
|
+
instanceUid,
|
44
|
+
propsWithDefault
|
45
|
+
}) => {
|
46
|
+
const { maxHeight } = propsWithDefault || import_react_desc_prop_types.menuSpecificDefaultProps;
|
41
47
|
const rootNode = import_react.default.useMemo(
|
42
48
|
() => ({
|
43
49
|
dsId: `root-${instanceUid}`,
|
44
50
|
type: "ROOT_ITEM",
|
45
|
-
subitems: options
|
51
|
+
subitems: options,
|
52
|
+
maxHeight
|
46
53
|
// as unknown as RootNodeType is because currently
|
47
54
|
// the DS tree model doesn't support the type of the root node being different from the subitems
|
48
55
|
// in practice, this is fine because the root node is never rendered & the subitems are the only thing that matters
|
49
56
|
// will be addresssed via PUI-XXXX
|
50
57
|
}),
|
51
|
-
[instanceUid, options]
|
58
|
+
[instanceUid, maxHeight, options]
|
52
59
|
);
|
53
60
|
return (0, import_ds_tree_model.useDSTree)(rootNode, useDsTreeOpts);
|
54
61
|
};
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/utils/useOptionsArrayToDsTree.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useDSTree } from '@elliemae/ds-tree-model';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nconst useDsTreeOpts: UseDSTreeT.SecondParameter<DSMenuButtonT.MenuItemInterface> = {\n getUniqueId: (item) => item.dsId,\n};\n\ntype UseOptionsArrayToDsTreeRootNodeConfig = {\n options: DSMenuButtonT.MenuItemInterface[];\n instanceUid: string;\n};\n\ntype RootNodeType = UseDSTreeT.Item<DSMenuButtonT.MenuItemInterface>;\n\nexport const useOptionsArrayToDsTree = ({
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,2BAA0B;
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useDSTree } from '@elliemae/ds-tree-model';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../react-desc-prop-types.js';\n\nconst useDsTreeOpts: UseDSTreeT.SecondParameter<DSMenuButtonT.MenuItemInterface> = {\n getUniqueId: (item) => item.dsId,\n};\n\ntype UseOptionsArrayToDsTreeRootNodeConfig = {\n options: DSMenuButtonT.MenuItemInterface[];\n instanceUid: string;\n propsWithDefault?: DSMenuButtonT.MenuSpecifiDefaultProps;\n};\n\ntype RootNodeType = UseDSTreeT.Item<DSMenuButtonT.MenuItemInterface>;\n\nexport const useOptionsArrayToDsTree = ({\n options,\n instanceUid,\n propsWithDefault,\n}: UseOptionsArrayToDsTreeRootNodeConfig) => {\n const { maxHeight } = propsWithDefault || menuSpecificDefaultProps;\n // we need to create the root node that the app dev doesn't need to worry about\n const rootNode = React.useMemo<RootNodeType>(\n () =>\n ({\n dsId: `root-${instanceUid}`,\n type: 'ROOT_ITEM',\n subitems: options,\n maxHeight,\n // as unknown as RootNodeType is because currently\n // the DS tree model doesn't support the type of the root node being different from the subitems\n // in practice, this is fine because the root node is never rendered & the subitems are the only thing that matters\n // will be addresssed via PUI-XXXX\n }) as unknown as RootNodeType,\n [instanceUid, maxHeight, options],\n );\n return useDSTree<DSMenuButtonT.MenuItemInterface>(rootNode, useDsTreeOpts);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,2BAA0B;AAE1B,mCAA6D;AAE7D,MAAM,gBAA6E;AAAA,EACjF,aAAa,CAAC,SAAS,KAAK;AAC9B;AAUO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,EAAE,UAAU,IAAI,oBAAoB;AAE1C,QAAM,WAAW,aAAAA,QAAM;AAAA,IACrB,OACG;AAAA,MACC,MAAM,QAAQ,WAAW;AAAA,MACzB,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAKF;AAAA,IACF,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AACA,aAAO,gCAA2C,UAAU,aAAa;AAC3E;",
|
6
6
|
"names": ["React"]
|
7
7
|
}
|
@@ -2,13 +2,16 @@ import * as React from "react";
|
|
2
2
|
import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
3
3
|
import React2 from "react";
|
4
4
|
import { uid } from "uid";
|
5
|
-
import { DSMenuButtonPropTypes,
|
5
|
+
import { DSMenuButtonPropTypes, menuSpecificDefaultProps } from "../react-desc-prop-types.js";
|
6
6
|
import { getFocusableNodes } from "../utils/nodesTypeguardsAndGetters.js";
|
7
7
|
import { useOptionsArrayToDsTree } from "../utils/useOptionsArrayToDsTree.js";
|
8
8
|
import { useSplitInherithedProps } from "./useSplitInherithedProps.js";
|
9
9
|
import { useValidateProps } from "./useValidateProps.js";
|
10
10
|
const useMenuButton = (propsFromUser) => {
|
11
|
-
const propsWithDefault = useMemoMergePropsWithDefault(
|
11
|
+
const propsWithDefault = useMemoMergePropsWithDefault(
|
12
|
+
propsFromUser,
|
13
|
+
menuSpecificDefaultProps
|
14
|
+
);
|
12
15
|
useValidateProps(propsWithDefault, DSMenuButtonPropTypes);
|
13
16
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
14
17
|
const instanceUid = React2.useMemo(() => `menu-button${uid(5)}`, []);
|
@@ -16,7 +19,8 @@ const useMenuButton = (propsFromUser) => {
|
|
16
19
|
const optionsArray = Array.isArray(appOptions) ? appOptions : [];
|
17
20
|
const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({
|
18
21
|
options: optionsArray,
|
19
|
-
instanceUid
|
22
|
+
instanceUid,
|
23
|
+
propsWithDefault
|
20
24
|
// this typecast is a safe type reconciliation, typescript checks they are compatible
|
21
25
|
// this typecast let us avoid to have to do the ` | OtherCompatibleType` dance
|
22
26
|
}).getRoot();
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuButton.ts"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSMenuButtonPropTypes,
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAoB,oCAAoC;AACjE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,uBAAuB,
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSMenuButtonPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useValidateProps } from './useValidateProps.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n propsWithDefault: DSMenuButtonT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(\n propsFromUser,\n menuSpecificDefaultProps,\n );\n useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n\n // =============================================================================\n // React hooks can't be invoked conditionally...\n // =============================================================================\n\n // As per intended WIDGET API, user can provide options as an array of \"items\" or an array of \"nodes\"\n // we do the conversion from \"items\" to \"nodes\" here,\n // because the `parts` require the \"nodes\" extra properties to handle the logic and rendering\n const { options: appOptions } = propsWithDefault;\n const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n options: optionsArray,\n instanceUid,\n propsWithDefault,\n // this typecast is a safe type reconciliation, typescript checks they are compatible\n // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n }).getRoot() as DSMenuButtonT.MenuNode;\n const treeRootNode = React.useMemo(\n () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n [appOptions, treeRootNodeFromOptionsArrayIfArray],\n );\n\n // =============================================================================\n // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n // =============================================================================\n const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n const splitInherithedProps = useSplitInherithedProps({\n propsWithDefault,\n focusableNodes,\n treeRootNode,\n });\n\n return React.useMemo<MenuButtonCTX>(\n () => ({\n propsWithDefault,\n xstyledProps,\n instanceUid,\n ...splitInherithedProps,\n }),\n [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAoB,oCAAoC;AACjE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,uBAAuB,gCAAoD;AACpF,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,qBAAqB;AAIxD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAYlE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,sCAAsC,wBAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAeA,OAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM,kBAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,uBAAuB,wBAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
|
6
6
|
"names": ["React"]
|
7
7
|
}
|