@elliemae/ds-menu-items-submenu 3.27.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/cjs/DSMenuItemsSubmenu.js +151 -0
  2. package/dist/cjs/DSMenuItemsSubmenu.js.map +7 -0
  3. package/dist/cjs/config/getChevronHandlers.js +72 -0
  4. package/dist/cjs/config/getChevronHandlers.js.map +7 -0
  5. package/dist/cjs/config/getEllipsisHandlers.js +64 -0
  6. package/dist/cjs/config/getEllipsisHandlers.js.map +7 -0
  7. package/dist/cjs/config/useGetSubmenuHandlers.js +46 -0
  8. package/dist/cjs/config/useGetSubmenuHandlers.js.map +7 -0
  9. package/dist/cjs/config/useMenuItemsSubmenu.js +62 -0
  10. package/dist/cjs/config/useMenuItemsSubmenu.js.map +7 -0
  11. package/dist/cjs/config/useValidateProps.js +41 -0
  12. package/dist/cjs/config/useValidateProps.js.map +7 -0
  13. package/dist/cjs/constants/index.js +25 -0
  14. package/dist/cjs/constants/index.js.map +7 -0
  15. package/dist/cjs/index.js +38 -0
  16. package/dist/cjs/index.js.map +7 -0
  17. package/dist/cjs/package.json +7 -0
  18. package/dist/cjs/react-desc-prop-types.js +121 -0
  19. package/dist/cjs/react-desc-prop-types.js.map +7 -0
  20. package/dist/esm/DSMenuItemsSubmenu.js +129 -0
  21. package/dist/esm/DSMenuItemsSubmenu.js.map +7 -0
  22. package/dist/esm/config/getChevronHandlers.js +42 -0
  23. package/dist/esm/config/getChevronHandlers.js.map +7 -0
  24. package/dist/esm/config/getEllipsisHandlers.js +34 -0
  25. package/dist/esm/config/getEllipsisHandlers.js.map +7 -0
  26. package/dist/esm/config/useGetSubmenuHandlers.js +16 -0
  27. package/dist/esm/config/useGetSubmenuHandlers.js.map +7 -0
  28. package/dist/esm/config/useMenuItemsSubmenu.js +32 -0
  29. package/dist/esm/config/useMenuItemsSubmenu.js.map +7 -0
  30. package/dist/esm/config/useValidateProps.js +11 -0
  31. package/dist/esm/config/useValidateProps.js.map +7 -0
  32. package/dist/esm/constants/index.js +2 -0
  33. package/dist/esm/constants/index.js.map +7 -0
  34. package/dist/esm/index.js +8 -0
  35. package/dist/esm/index.js.map +7 -0
  36. package/dist/esm/package.json +7 -0
  37. package/dist/esm/react-desc-prop-types.js +94 -0
  38. package/dist/esm/react-desc-prop-types.js.map +7 -0
  39. package/dist/types/DSMenuItemsSubmenu.d.ts +5 -0
  40. package/dist/types/config/getChevronHandlers.d.ts +7 -0
  41. package/dist/types/config/getEllipsisHandlers.d.ts +8 -0
  42. package/dist/types/config/useGetSubmenuHandlers.d.ts +8 -0
  43. package/dist/types/config/useMenuItemsSubmenu.d.ts +22 -0
  44. package/dist/types/config/useValidateProps.d.ts +3 -0
  45. package/dist/types/constants/index.d.ts +0 -0
  46. package/dist/types/index.d.ts +2 -0
  47. package/dist/types/react-desc-prop-types.d.ts +43 -0
  48. package/package.json +75 -0
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var react_desc_prop_types_exports = {};
30
+ __export(react_desc_prop_types_exports, {
31
+ DSMenuItemsSubmenuPropTypes: () => DSMenuItemsSubmenuPropTypes,
32
+ DSMenuItemsSubmenuPropTypesSchema: () => DSMenuItemsSubmenuPropTypesSchema,
33
+ defaultProps: () => defaultProps
34
+ });
35
+ module.exports = __toCommonJS(react_desc_prop_types_exports);
36
+ var React = __toESM(require("react"));
37
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
+ var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
39
+ const defaultProps = {
40
+ ...import_ds_menu_items_commons.DSMenuItemsCommonsDefaultProps,
41
+ label: "",
42
+ isActive: false,
43
+ disabled: false,
44
+ isSubmenuOpened: false,
45
+ onSubmenuOpen: () => {
46
+ },
47
+ rightAddon: "chevron",
48
+ optionsShouldHavePadding: false,
49
+ Dropdown: () => null,
50
+ dropdownProps: {
51
+ options: [],
52
+ onSubmenuToggle: () => {
53
+ },
54
+ openedSubmenus: {},
55
+ selectedOptions: {},
56
+ onKeyDown: () => {
57
+ },
58
+ onOptionClick: () => {
59
+ },
60
+ onClickOutside: () => {
61
+ },
62
+ minWidth: "auto",
63
+ maxHeight: "auto"
64
+ }
65
+ };
66
+ const DSMenuItemsSubmenuPropTypes = {
67
+ // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps
68
+ // they are NOT inherited from a common element from ds-menu-items-commons
69
+ ...import_ds_props_helpers.globalAttributesPropTypes,
70
+ ...import_ds_props_helpers.xstyledPropTypes,
71
+ ...import_ds_menu_items_commons.DSMenuItemsCommonsPropTypes,
72
+ // TODO - add support to PropTypes.oneOf for typeof number
73
+ // currently PropTypes.oneOf([0, -1]) is not supported
74
+ tabIndex: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description(
75
+ "The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed."
76
+ ),
77
+ label: import_ds_props_helpers.PropTypes.string.description("The label of the menu item."),
78
+ value: import_ds_props_helpers.PropTypes.any.description("The value of the menu item."),
79
+ isActive: import_ds_props_helpers.PropTypes.bool.description("Whether the menu item is active.").defaultValue(defaultProps.isActive),
80
+ optionsShouldHavePadding: import_ds_props_helpers.PropTypes.bool.description("Whether the menu item should have padding. This is used in the context of a menu with options.").defaultValue(defaultProps.optionsShouldHavePadding),
81
+ secondaryLabel: import_ds_props_helpers.PropTypes.string.description("The secondary label of the menu item."),
82
+ isSubmenuOpened: import_ds_props_helpers.PropTypes.bool.description("Whether the submenu is opened or not.").defaultValue(defaultProps.isSubmenuOpened),
83
+ onSubmenuOpen: import_ds_props_helpers.PropTypes.func.description("Callback fired when the user tries to open the submenu."),
84
+ onSubmenuClose: import_ds_props_helpers.PropTypes.func.description("Callback fired when the user tries to close the submenu."),
85
+ rightAddon: import_ds_props_helpers.PropTypes.oneOf(["ellipsis", "chevron"]).description(
86
+ "The visual element to display on the right side of the menu item."
87
+ ),
88
+ Dropdown: import_ds_props_helpers.PropTypes.func.description("The Dropdown component to use to render the submenu."),
89
+ /* TODO - the validation detects "empty" even if the object is not empty...
90
+ we need to fix the validator for "shape"...
91
+
92
+ .shape({
93
+ options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),
94
+ onSubmenuToggle: PropTypes.func
95
+ .description(
96
+ 'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',
97
+ )
98
+ .signature(
99
+ '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',
100
+ ),
101
+ openedSubmenus: PropTypes.object.description('The opened submenus.'),
102
+ selectedOptions: PropTypes.object.description('The selected options.'),
103
+ onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),
104
+ onOptionClick: PropTypes.func
105
+ .description(
106
+ 'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',
107
+ )
108
+ .signature(
109
+ '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',
110
+ ),
111
+ onClickOutside: PropTypes.func
112
+ .description('Callback fired when the user clicks outside the submenu.')
113
+ .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),
114
+ minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),
115
+ maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),
116
+ })
117
+ */
118
+ dropdownProps: import_ds_props_helpers.PropTypes.object.description("The props to pass to the Dropdown component.")
119
+ };
120
+ const DSMenuItemsSubmenuPropTypesSchema = DSMenuItemsSubmenuPropTypes;
121
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport {\n type DSMenuItemsCommonsT,\n DSMenuItemsCommonsPropTypes,\n DSMenuItemsCommonsDefaultProps,\n} from '@elliemae/ds-menu-items-commons';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsSubmenuT {\n // typescript inheritance has no syntax support for \"interfaces\", we have to use union types instead...\n export type RequiredProps = DSMenuItemsCommonsT.RequiredProps;\n\n export type DefaultProps = DSMenuItemsCommonsT.DefaultProps & {\n label: string;\n isActive: boolean;\n disabled: boolean;\n isSubmenuOpened: boolean;\n onSubmenuOpen: React.MouseEventHandler;\n rightAddon: 'ellipsis' | 'chevron';\n optionsShouldHavePadding: boolean;\n Dropdown: React.ComponentType<React.PropsWithChildren<DSMenuItemsSubmenuT.DefaultProps['dropdownProps']>>;\n dropdownProps: {\n options: unknown[];\n onSubmenuToggle: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: unknown,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus: Record<string, boolean>;\n selectedOptions: Record<string, boolean>;\n onKeyDown: React.KeyboardEventHandler;\n onOptionClick: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: unknown,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth: SizingProps['minWidth'];\n maxHeight: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n };\n\n export type OptionalProps = DSMenuItemsCommonsT.OptionalProps<DSMenuItemsSubmenuT.InternalProps> & {\n secondaryLabel?: string;\n onSubmenuClose?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n };\n\n // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n // they are NOT inherited from a common element from ds-menu-items-commons\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemsSubmenuT.DefaultProps = {\n ...DSMenuItemsCommonsDefaultProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: () => {},\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: () => null,\n dropdownProps: {\n options: [],\n onSubmenuToggle: () => {},\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: () => {},\n onOptionClick: () => {},\n onClickOutside: () => {},\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const DSMenuItemsSubmenuPropTypes: DSPropTypesSchema<DSMenuItemsSubmenuT.InternalProps> = {\n // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n // they are NOT inherited from a common element from ds-menu-items-commons\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...DSMenuItemsCommonsPropTypes,\n\n // TODO - add support to PropTypes.oneOf for typeof number\n // currently PropTypes.oneOf([0, -1]) is not supported\n tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n 'The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed.',\n ),\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.').defaultValue(defaultProps.isActive),\n optionsShouldHavePadding: PropTypes.bool\n .description('Whether the menu item should have padding. This is used in the context of a menu with options.')\n .defaultValue(defaultProps.optionsShouldHavePadding),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isSubmenuOpened: PropTypes.bool\n .description('Whether the submenu is opened or not.')\n .defaultValue(defaultProps.isSubmenuOpened),\n onSubmenuOpen: PropTypes.func.description('Callback fired when the user tries to open the submenu.'),\n onSubmenuClose: PropTypes.func.description('Callback fired when the user tries to close the submenu.'),\n rightAddon: PropTypes.oneOf(['ellipsis', 'chevron']).description(\n 'The visual element to display on the right side of the menu item.',\n ),\n Dropdown: PropTypes.func.description('The Dropdown component to use to render the submenu.'),\n /* TODO - the validation detects \"empty\" even if the object is not empty...\n we need to fix the validator for \"shape\"...\n\n .shape({\n options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),\n onSubmenuToggle: PropTypes.func\n .description(\n 'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',\n )\n .signature(\n '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n ),\n openedSubmenus: PropTypes.object.description('The opened submenus.'),\n selectedOptions: PropTypes.object.description('The selected options.'),\n onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),\n onOptionClick: PropTypes.func\n .description(\n 'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',\n )\n .signature(\n '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n ),\n onClickOutside: PropTypes.func\n .description('Callback fired when the user clicks outside the submenu.')\n .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),\n minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),\n maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),\n })\n */\n dropdownProps: PropTypes.object.description('The props to pass to the Dropdown component.'),\n};\n\nexport const DSMenuItemsSubmenuPropTypesSchema =\n DSMenuItemsSubmenuPropTypes as unknown as WeakValidationMap<DSMenuItemsSubmenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AAEvE,mCAIO;AAsEA,MAAM,eAAiD;AAAA,EAC5D,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW,MAAM;AAAA,IAAC;AAAA,IAClB,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,8BAAoF;AAAA;AAAA;AAAA,EAG/F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA,EAIH,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,OAAO,kCAAU,IAAI,YAAY,6BAA6B;AAAA,EAC9D,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,aAAa,QAAQ;AAAA,EAC3G,0BAA0B,kCAAU,KACjC,YAAY,gGAAgG,EAC5G,aAAa,aAAa,wBAAwB;AAAA,EACrD,gBAAgB,kCAAU,OAAO,YAAY,uCAAuC;AAAA,EACpF,iBAAiB,kCAAU,KACxB,YAAY,uCAAuC,EACnD,aAAa,aAAa,eAAe;AAAA,EAC5C,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,EACnG,gBAAgB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACrG,YAAY,kCAAU,MAAM,CAAC,YAAY,SAAS,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,sDAAsD;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;AAAA;AAAA;AAAA;AAAA,EA8B3F,eAAe,kCAAU,OAAO,YAAY,8CAA8C;AAC5F;AAEO,MAAM,oCACX;",
6
+ "names": []
7
+ }
@@ -0,0 +1,129 @@
1
+ import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import React2 from "react";
4
+ import { describe } from "@elliemae/ds-props-helpers";
5
+ import { MoreOptionsVert, ChevronRight } from "@elliemae/ds-icons";
6
+ import {
7
+ StyledGlobalMenuItemWrapper,
8
+ StyledContentWrapper,
9
+ StyleMenuItemLabel,
10
+ StyleMenuItemSecondaryLabel,
11
+ StyledIconContainer,
12
+ StyledVerticalSeparator,
13
+ StyledEllipsisButton
14
+ } from "@elliemae/ds-menu-items-commons";
15
+ import { DSMenuItemsSubmenuPropTypesSchema } from "./react-desc-prop-types.js";
16
+ import { useMenuItemsSubmenu } from "./config/useMenuItemsSubmenu.js";
17
+ const DSMenuItemsSubmenu = (props) => {
18
+ const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);
19
+ const {
20
+ dsId,
21
+ label,
22
+ secondaryLabel,
23
+ isActive,
24
+ disabled,
25
+ isSubmenuOpened,
26
+ rightAddon,
27
+ innerRef,
28
+ wrapperStyles,
29
+ optionsShouldHavePadding,
30
+ render: Render,
31
+ Dropdown,
32
+ dropdownProps: {
33
+ options,
34
+ openedSubmenus,
35
+ onSubmenuToggle,
36
+ selectedOptions,
37
+ onKeyDown,
38
+ onOptionClick,
39
+ onClickOutside,
40
+ minWidth,
41
+ maxHeight
42
+ }
43
+ } = propsWithDefault;
44
+ const [delayedIsOpened, setDelayedIsOpened] = React2.useState(false);
45
+ React2.useEffect(() => {
46
+ setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));
47
+ }, [isSubmenuOpened]);
48
+ const gridLayout = React2.useMemo(() => {
49
+ const cols = ["auto"];
50
+ if (secondaryLabel !== void 0)
51
+ cols.push("min-content");
52
+ cols.push("min-content");
53
+ return cols;
54
+ }, [secondaryLabel]);
55
+ const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;
56
+ const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;
57
+ const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;
58
+ return /* @__PURE__ */ jsx(
59
+ Dropdown,
60
+ {
61
+ isOpened: delayedIsOpened,
62
+ options: options ?? [],
63
+ onOptionClick,
64
+ startPlacementPreference: "right-start",
65
+ placementOrderPreference: ["right-start", "right-end", "left-start", "left-end"],
66
+ selectedOptions,
67
+ openedSubmenus,
68
+ onSubmenuToggle,
69
+ onKeyDown,
70
+ onClickOutside,
71
+ customOffset: [-4, 1],
72
+ wrapperStyles: { ...wrapperStyles, w: "100%" },
73
+ as: "li",
74
+ role: "option",
75
+ minWidth,
76
+ maxHeight,
77
+ "aria-selected": isSubmenuOpened,
78
+ "aria-describedby": `dropdownmenu-submenu-${dsId}`,
79
+ "data-popover-label": label,
80
+ id: dsId,
81
+ onMouseEnter: onMouseEnterHandler,
82
+ onMouseLeave: onMouseLeaveHandler,
83
+ onMouseDown: onMouseDownHandler,
84
+ ...restGlobalAttributes,
85
+ ...restXStyled,
86
+ children: /* @__PURE__ */ jsxs(
87
+ StyledGlobalMenuItemWrapper,
88
+ {
89
+ pr: 0,
90
+ isSelected: isSubmenuOpened,
91
+ isActive,
92
+ onMouseEnter: onMouseEnterHandler,
93
+ onMouseLeave: onMouseLeaveHandler,
94
+ innerRef,
95
+ disabled,
96
+ pl: optionsShouldHavePadding ? 40 : 16,
97
+ as: "div",
98
+ "data-type": "submenu",
99
+ children: [
100
+ Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
101
+ /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
102
+ secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
103
+ /* @__PURE__ */ jsxs(StyledIconContainer, { children: [
104
+ /* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
105
+ rightAddon === "ellipsis" ? /* @__PURE__ */ jsx(StyledEllipsisButton, { tabIndex: -1, onClick: onEllipsisClick, disabled, children: /* @__PURE__ */ jsx(
106
+ MoreOptionsVert,
107
+ {
108
+ className: "ds-dropdown-menu-v2-more-options",
109
+ color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
110
+ size: "s"
111
+ }
112
+ ) }) : /* @__PURE__ */ jsx(ChevronRight, { color: disabled ? ["neutral", "500"] : ["brand-primary", "600"], size: "s" })
113
+ ] })
114
+ ] }),
115
+ /* @__PURE__ */ jsx("span", { id: `dropdownmenu-submenu-${dsId}`, style: { display: "none" }, children: "submenu, to open this submenu press the Right Arrow key" })
116
+ ]
117
+ }
118
+ )
119
+ }
120
+ );
121
+ };
122
+ DSMenuItemsSubmenu.displayName = "DSMenuItemSubmenu";
123
+ const DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);
124
+ DSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;
125
+ export {
126
+ DSMenuItemsSubmenu,
127
+ DSMenuItemsSubmenuWithSchema
128
+ };
129
+ //# sourceMappingURL=DSMenuItemsSubmenu.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuItemsSubmenu.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n StyledGlobalMenuItemWrapper,\n StyledContentWrapper,\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledVerticalSeparator,\n StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n Dropdown,\n dropdownProps: {\n options,\n openedSubmenus,\n onSubmenuToggle,\n selectedOptions,\n onKeyDown,\n onOptionClick,\n onClickOutside,\n minWidth,\n maxHeight,\n },\n } = propsWithDefault;\n\n // If we don't delay the opening of the poppers, the position will not be placed correctly\n // That why we delay it for the next render using the useEffect hook\n // TODO -- @carusox move this to utilities as a hook\n const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['auto'];\n if (secondaryLabel !== undefined) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n // i dont think there is a workaround for this at the moment\n // we need a complete refactor in how we build the submenus\n // eslint-disable-next-line no-unused-vars\n const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n // eslint-disable-next-line no-unused-vars\n const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n return (\n <Dropdown\n isOpened={delayedIsOpened}\n options={options ?? []}\n onOptionClick={onOptionClick}\n startPlacementPreference=\"right-start\"\n placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n selectedOptions={selectedOptions}\n openedSubmenus={openedSubmenus}\n onSubmenuToggle={onSubmenuToggle}\n onKeyDown={onKeyDown}\n onClickOutside={onClickOutside}\n customOffset={[-4, 1]}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n as=\"li\"\n role=\"option\"\n minWidth={minWidth}\n maxHeight={maxHeight}\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n data-popover-label={label}\n id={dsId}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseDown={onMouseDownHandler}\n {...restGlobalAttributes}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n isSelected={isSubmenuOpened}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n innerRef={innerRef}\n disabled={disabled}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof JSX.IntrinsicElements}\n data-type=\"submenu\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n )}\n </StyledIconContainer>\n </StyledContentWrapper>\n )}\n <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n submenu, to open this submenu press the Right Arrow key\n </span>\n </StyledGlobalMenuItemWrapper>\n </Dropdown>\n );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n"],
5
+ "mappings": "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",
6
+ "names": ["React"]
7
+ }
@@ -0,0 +1,42 @@
1
+ import * as React from "react";
2
+ const getChevronHandlers = ({
3
+ isSubmenuOpened,
4
+ onMouseEnter,
5
+ onSubmenuOpen,
6
+ onSubmenuClose,
7
+ onMouseLeave,
8
+ onMouseDown,
9
+ disabled
10
+ }) => {
11
+ const timeoutRef = { current: null };
12
+ const onMouseEnterHandler = (e) => {
13
+ if (timeoutRef.current !== null)
14
+ clearTimeout(timeoutRef.current);
15
+ else if (!isSubmenuOpened)
16
+ onSubmenuOpen?.(e);
17
+ timeoutRef.current = null;
18
+ onMouseEnter?.(e);
19
+ };
20
+ const onMouseLeaveHandler = (e) => {
21
+ if (timeoutRef.current === null) {
22
+ timeoutRef.current = setTimeout(() => {
23
+ timeoutRef.current = null;
24
+ onSubmenuClose?.(e);
25
+ }, 300);
26
+ }
27
+ onMouseLeave?.(e);
28
+ };
29
+ const onMouseDownHandler = (e) => {
30
+ if (disabled)
31
+ return;
32
+ onMouseDown?.(e);
33
+ };
34
+ const onEllipsisClick = () => {
35
+ throw new Error("Invoking onEllipsisClick from chevron handlers... this should never happen");
36
+ };
37
+ return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
38
+ };
39
+ export {
40
+ getChevronHandlers
41
+ };
42
+ //# sourceMappingURL=getChevronHandlers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/getChevronHandlers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n// onMouseEnter -> open submenu\n// onMouseLeave -> close submenu\n// onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n// - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n// (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n// - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n// we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n// - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n// this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n// when this comment has been written,\n// onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n// the logic for this is implemented in ds-dropdownmenu,\n// we had a bug in which we were invoking a stale callback,\n// we monkeypatching it by ensuring the callback never changes\n// in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n isSubmenuOpened,\n onMouseEnter,\n onSubmenuOpen,\n onSubmenuClose,\n onMouseLeave,\n onMouseDown,\n disabled,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n const onMouseEnterHandler = (e: React.MouseEvent) => {\n if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n timeoutRef.current = null;\n onMouseEnter?.(e);\n };\n\n const onMouseLeaveHandler = (e: React.MouseEvent) => {\n if (timeoutRef.current === null) {\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null;\n onSubmenuClose?.(e);\n }, 300);\n }\n onMouseLeave?.(e);\n };\n\n const onMouseDownHandler = (e: React.MouseEvent) => {\n if (disabled) return;\n onMouseDown?.(e);\n };\n\n const onEllipsisClick = () => {\n throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n };\n\n return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY;AAAM,mBAAa,WAAW,OAAO;AAAA,aACvD,CAAC;AAAiB,sBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,qBAAqB,CAAC,MAAwB;AAClD,QAAI;AAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
6
+ "names": []
7
+ }
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ const getEllipsisHandlers = ({
3
+ disabled,
4
+ isSubmenuOpened,
5
+ onMouseEnter,
6
+ onSubmenuOpen,
7
+ onSubmenuClose,
8
+ onMouseLeave,
9
+ onMouseDown
10
+ }) => {
11
+ const onMouseEnterHandler = (e) => onMouseEnter?.(e);
12
+ const onMouseLeaveHandler = (e) => onMouseLeave?.(e);
13
+ const onMouseDownHandler = (e) => {
14
+ if (disabled) {
15
+ e.preventDefault();
16
+ return;
17
+ }
18
+ onMouseDown?.(e);
19
+ };
20
+ const onEllipsisClick = (e) => {
21
+ if (disabled)
22
+ return;
23
+ e.stopPropagation();
24
+ if (isSubmenuOpened)
25
+ onSubmenuClose?.(e);
26
+ else
27
+ onSubmenuOpen(e);
28
+ };
29
+ return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
30
+ };
31
+ export {
32
+ getEllipsisHandlers
33
+ };
34
+ //# sourceMappingURL=getEllipsisHandlers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/getEllipsisHandlers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n// onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n// onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n// onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n// - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n// this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n disabled,\n isSubmenuOpened,\n onMouseEnter,\n onSubmenuOpen,\n onSubmenuClose,\n onMouseLeave,\n onMouseDown,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n // why not just onMouseEnterHandler = onMouseEnter?\n // we expect onMouseEnterHandler/onMouseLeaveHandler\n // to always exist even if onMouseEnter/onMouseLeave are undefined\n // also, if in the future we need custom logic for these handlers, we can add it here\n const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n const onMouseDownHandler: React.MouseEventHandler = (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n };\n const onEllipsisClick: React.MouseEventHandler = (e) => {\n if (disabled) return;\n e.stopPropagation();\n if (isSubmenuOpened) onSubmenuClose?.(e);\n else onSubmenuOpen(e);\n };\n\n return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AAKvC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,qBAA8C,CAAC,MAAM;AACzD,QAAI,UAAU;AACZ,QAAE,eAAe;AACjB;AAAA,IACF;AACA,kBAAc,CAAC;AAAA,EACjB;AACA,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,uBAAiB,CAAC;AAAA;AAClC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
6
+ "names": []
7
+ }
@@ -0,0 +1,16 @@
1
+ import * as React from "react";
2
+ import { useMemo } from "react";
3
+ import { getEllipsisHandlers } from "./getEllipsisHandlers.js";
4
+ import { getChevronHandlers } from "./getChevronHandlers.js";
5
+ const useGetSubmenuHandlers = (propsWithDefault) => {
6
+ const { rightAddon } = propsWithDefault;
7
+ return useMemo(() => {
8
+ if (rightAddon === "ellipsis")
9
+ return getEllipsisHandlers(propsWithDefault);
10
+ return getChevronHandlers(propsWithDefault);
11
+ }, [propsWithDefault, rightAddon]);
12
+ };
13
+ export {
14
+ useGetSubmenuHandlers
15
+ };
16
+ //# sourceMappingURL=useGetSubmenuHandlers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetSubmenuHandlers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n// Ellipsis case:\n// onMouseEnter -> open submenu\n// onMouseLeave -> close submenu\n// onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n// Chevron case:\n// onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n// onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n// onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n// - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n// specifically speaking this is trying to solve the\n// \"rightAddons\" is \"ellipsis\" case\n// at the same time as the\n// \"rightAddons\" is \"chevron\" case\n// they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n// I am removing one layer of abstraction,\n// ellipsis gets it's own logical flow\n// as does chevron\n// if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (propsWithDefault: DSMenuItemsSubmenuT.InternalProps) => {\n const { rightAddon } = propsWithDefault;\n return useMemo(() => {\n if (rightAddon === 'ellipsis') return getEllipsisHandlers(propsWithDefault);\n return getChevronHandlers(propsWithDefault);\n }, [propsWithDefault, rightAddon]);\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAyB5B,MAAM,wBAAwB,CAAC,qBAAwD;AAC5F,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,QAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,aAAO,oBAAoB,gBAAgB;AAC1E,WAAO,mBAAmB,gBAAgB;AAAA,EAC5C,GAAG,CAAC,kBAAkB,UAAU,CAAC;AACnC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,32 @@
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { omit } from "lodash";
4
+ import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
5
+ import { DSMenuItemsSubmenuPropTypes, defaultProps } from "../react-desc-prop-types.js";
6
+ import { useValidateProps } from "./useValidateProps.js";
7
+ import { useGetSubmenuHandlers } from "./useGetSubmenuHandlers.js";
8
+ const useMenuItemsSubmenu = (propsFromUser) => {
9
+ const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
10
+ useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);
11
+ const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;
12
+ const globalProps = omit(useGetGlobalAttributes(sourceGlobalProps), [
13
+ "cols",
14
+ "rows",
15
+ "wrap"
16
+ ]);
17
+ const xstyledProps = useGetXstyledProps(sourceGlobalProps);
18
+ const eventHandlers = useGetSubmenuHandlers(propsWithDefault);
19
+ return React2.useMemo(
20
+ () => ({
21
+ propsWithDefault,
22
+ globalProps,
23
+ xstyledProps,
24
+ eventHandlers
25
+ }),
26
+ [propsWithDefault, globalProps, xstyledProps, eventHandlers]
27
+ );
28
+ };
29
+ export {
30
+ useMenuItemsSubmenu
31
+ };
32
+ //# sourceMappingURL=useMenuItemsSubmenu.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuItemsSubmenu.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\n\nexport interface MenuItemsSubmenuCTX {\n propsWithDefault: DSMenuItemsSubmenuT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n eventHandlers: ReturnType<typeof useGetSubmenuHandlers>;\n}\n\nexport const useMenuItemsSubmenu = (propsFromUser: DSMenuItemsSubmenuT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemsSubmenuT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n\n // some menu items use original prop from dsdropdownmenu or dscombobox\n // We may want to review if this is required or makes sense, but for now we will keep it to avoid breaking changes\n const sourceGlobalProps =\n (propsWithDefault.original as unknown as DSMenuItemsSubmenuT.InternalProps) ?? propsWithDefault;\n\n const globalProps = omit(useGetGlobalAttributes<DSMenuItemsSubmenuT.InternalProps>(sourceGlobalProps), [\n 'cols',\n 'rows',\n 'wrap',\n ]);\n const xstyledProps = useGetXstyledProps(sourceGlobalProps);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const eventHandlers = useGetSubmenuHandlers(propsWithDefault);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n eventHandlers,\n }),\n [propsWithDefault, globalProps, xstyledProps, eventHandlers],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAS/B,MAAM,sBAAsB,CAAC,kBAA6C;AAI/E,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAO9D,QAAM,oBACH,iBAAiB,YAA6D;AAEjF,QAAM,cAAc,KAAK,uBAA0D,iBAAiB,GAAG;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,mBAAmB,iBAAiB;AAKzD,QAAM,gBAAgB,sBAAsB,gBAAgB;AAE5D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa;AAAA,EAC7D;AACF;",
6
+ "names": ["React"]
7
+ }
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
3
+ import { DSMenuItemName } from "@elliemae/ds-menu-items-commons";
4
+ const DSMenuItemsSubmenuName = `${DSMenuItemName}Submenu`;
5
+ const useValidateProps = (props, propTypes) => {
6
+ useValidateTypescriptPropTypes(props, propTypes, DSMenuItemsSubmenuName);
7
+ };
8
+ export {
9
+ useValidateProps
10
+ };
11
+ //# sourceMappingURL=useValidateProps.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSMenuItemName } from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// because this is inherited from the common props, we do not want to put this in the /constants/index.ts file\n// this is strictly defined here because this is meant to strictly influence ONLY the ERROR layer\n// this is 100% decoupled from ds-slots & data-testid\n// this constants only affect the shown error message as of 21/december/2023\nconst DSMenuItemsSubmenuName = `${DSMenuItemName}Submenu`;\n\nexport const useValidateProps = (\n props: DSMenuItemsSubmenuT.InternalProps,\n propTypes: WeakValidationMap<unknown>,\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSMenuItemsSubmenuName);\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,sBAAsB;AAO/B,MAAM,yBAAyB,GAAG;AAE3B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,sBAAsB;AACzE;",
6
+ "names": []
7
+ }
@@ -0,0 +1,2 @@
1
+ import * as React from "react";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;",
6
+ "names": []
7
+ }
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ import { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema } from "./DSMenuItemsSubmenu.js";
3
+ import {} from "./react-desc-prop-types.js";
4
+ export {
5
+ DSMenuItemsSubmenu,
6
+ DSMenuItemsSubmenuWithSchema
7
+ };
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema } from './DSMenuItemsSubmenu.js';\nexport { type DSMenuItemsSubmenuT } from './react-desc-prop-types.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,oBAAoB,oCAAoC;AACjE,eAAyC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "type": "module",
3
+ "sideEffects": [
4
+ "*.css",
5
+ "*.scss"
6
+ ]
7
+ }