@elliemae/ds-menu-button 3.57.0-next.12 → 3.57.0-next.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.js +7 -6
- package/dist/cjs/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.js +7 -6
- package/dist/esm/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.js.map +2 -2
- package/package.json +12 -13
|
@@ -45,6 +45,7 @@ const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
|
|
|
45
45
|
refs: { setReference }
|
|
46
46
|
} = floatingContext;
|
|
47
47
|
const focusedRegionPerformanceHelper = import_react.default.useRef(focusRegion);
|
|
48
|
+
const reRenderButtonToAllowFocus = focusRegion === import_constants.MENU_FOCUS_REGIONS.TRIGGER && focusedRegionPerformanceHelper.current !== focusRegion;
|
|
48
49
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
49
50
|
const mutableIsMenuOpen = import_react.default.useRef(isMenuOpen);
|
|
50
51
|
mutableIsMenuOpen.current = isMenuOpen;
|
|
@@ -68,15 +69,15 @@ const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
|
|
|
68
69
|
);
|
|
69
70
|
const handleFocusIfTriggerIsFocusRegion = import_react.default.useCallback(
|
|
70
71
|
(node) => {
|
|
72
|
+
if (reRenderButtonToAllowFocus && node) {
|
|
73
|
+
requestAnimationFrame(() => {
|
|
74
|
+
node.focus();
|
|
75
|
+
});
|
|
76
|
+
}
|
|
71
77
|
setReference(node);
|
|
72
78
|
if (innerRef) (0, import_resolveRef.resolveRef)(innerRef, node);
|
|
73
|
-
setTimeout(() => {
|
|
74
|
-
if (focusedRegionPerformanceHelper.current === import_constants.MENU_FOCUS_REGIONS.TRIGGER && node) {
|
|
75
|
-
node.focus();
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
79
|
},
|
|
79
|
-
[innerRef, setReference]
|
|
80
|
+
[innerRef, reRenderButtonToAllowFocus, setReference]
|
|
80
81
|
);
|
|
81
82
|
const handleTriggerKeyDown = import_react.default.useCallback(
|
|
82
83
|
(event, ...args) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { resolveRef } from '../../../utils/resolveRef.js';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n propsWithDefault: DSOpinionatedButtonT.InternalProps;\n floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n // =============================================================================\n // on click -> open the submenu\n // if the props already include an onClick, we will wrap it\n // =============================================================================\n const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n MenuBehaviouralContextProviderContext,\n );\n const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n const {\n refs: { setReference },\n } = floatingContext;\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const mutableIsMenuOpen = React.useRef(isMenuOpen);\n // this is a boolean, so a primitive value,\n // we don't need to useEffect to change it\n // because we don't need to ensure referencial equality\n mutableIsMenuOpen.current = isMenuOpen;\n\n const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n (e, ...args) => {\n if (onClick) onClick(e, ...args);\n // no reason to change this function reference every time the menu opens/closes\n // so we are using a mutable ref to optimize this\n if (mutableIsMenuOpen.current) {\n onOpinionatedClose();\n } else {\n onOpinionatedOpen();\n }\n },\n [onClick, onOpinionatedClose, onOpinionatedOpen],\n );\n const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n (e, ...args) => {\n if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n if (onFocus) onFocus(e, ...args);\n },\n [onFocus, trackFocusTrigger],\n );\n\n const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n (node) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,wBAA2B;AAC3B,+CAAsD;AACtD,uBAAmC;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAI,aAAAA,QAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;
|
|
4
|
+
"sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { resolveRef } from '../../../utils/resolveRef.js';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n propsWithDefault: DSOpinionatedButtonT.InternalProps;\n floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n // =============================================================================\n // on click -> open the submenu\n // if the props already include an onClick, we will wrap it\n // =============================================================================\n const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n MenuBehaviouralContextProviderContext,\n );\n const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n const {\n refs: { setReference },\n } = floatingContext;\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n // when the focus region is on the trigger, we need to re-render the button so it invokes the ref callback again to focus itself\n // we don't need to rerender at every focus region change, only when it changes to the trigger itself.\n // by checking the ref stored value against the current focus region, the flag will stay mostly false and change to true only when needed\n const reRenderButtonToAllowFocus =\n focusRegion === MENU_FOCUS_REGIONS.TRIGGER && focusedRegionPerformanceHelper.current !== focusRegion;\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const mutableIsMenuOpen = React.useRef(isMenuOpen);\n // this is a boolean, so a primitive value,\n // we don't need to useEffect to change it\n // because we don't need to ensure referencial equality\n mutableIsMenuOpen.current = isMenuOpen;\n\n const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n (e, ...args) => {\n if (onClick) onClick(e, ...args);\n // no reason to change this function reference every time the menu opens/closes\n // so we are using a mutable ref to optimize this\n if (mutableIsMenuOpen.current) {\n onOpinionatedClose();\n } else {\n onOpinionatedOpen();\n }\n },\n [onClick, onOpinionatedClose, onOpinionatedOpen],\n );\n const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n (e, ...args) => {\n if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n if (onFocus) onFocus(e, ...args);\n },\n [onFocus, trackFocusTrigger],\n );\n\n const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n (node) => {\n if (reRenderButtonToAllowFocus && node) {\n // when user presses \"Enter\" different things happen depending on top of what element the focus is\n // if it is in the trigger (this function) then it spawns the submenu and focuses the first item\n // if it is in a menu item, it activates the item and closes the menu, triggering this function again\n // So, why do we need the requestAnimationFrame?\n // pressing enter in an item will focus the trigger\n // -> current react behaviour means the menu button \"keyDown\" event will also trigger with \"Enter\"\n // -> which will open the menu again\n // as of react 18 and 28/october/2025, this requestAnimationFrame prevents the keyDown event from triggering on top of the button\n requestAnimationFrame(() => {\n node.focus();\n });\n }\n setReference(node);\n if (innerRef) resolveRef(innerRef, node);\n },\n [innerRef, reRenderButtonToAllowFocus, setReference],\n );\n\n /*\n * 13th August 2024:\n * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n * With focus on the button:\n * Enter: opens the menu and places focus on the first menu item.\n * Space: Opens the menu and places focus on the first menu item.\n * (Optional) Down Arrow: opens the menu and moves focus to the first menu item.\n * (Optional) Up Arrow: opens the menu and moves focus to the last menu item.\n */\n const handleTriggerKeyDown = React.useCallback<Required<DSButtonV3T.Props>['onKeyDown']>(\n (event, ...args) => {\n // DSButtonV3 triggers the onClick on Enter and Space, so we don't need to handle it here\n // if (event.key === 'Enter' || event.key === ' ') {\n // onOpinionatedOpen();\n // }\n if (event.key === 'ArrowDown') {\n onOpinionatedOpen();\n }\n if (event.key === 'ArrowUp') {\n onOpinionatedOpen({ focusLastChild: true });\n }\n if (event.key === 'Escape') {\n onOpinionatedClose();\n }\n if (onKeyDown) onKeyDown(event, ...args);\n },\n [onKeyDown, onOpinionatedOpen, onOpinionatedClose],\n );\n\n return React.useMemo(\n () => ({ handleTriggerKeyDown, handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion }),\n [handleFocusIfTriggerIsFocusRegion, handleOnClick, handleOnFocus, handleTriggerKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,wBAA2B;AAC3B,+CAAsD;AACtD,uBAAmC;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAI,aAAAA,QAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAI/D,QAAM,6BACJ,gBAAgB,oCAAmB,WAAW,+BAA+B,YAAY;AAC3F,iCAA+B,UAAU;AAEzC,QAAM,oBAAoB,aAAAA,QAAM,OAAO,UAAU;AAIjD,oBAAkB,UAAU;AAE5B,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAG/B,UAAI,kBAAkB,SAAS;AAC7B,2BAAmB;AAAA,MACrB,OAAO;AACL,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB;AAAA,EACjD;AACA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,+BAA+B,YAAY,oCAAmB,QAAS,mBAAkB;AAC7F,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oCAAoC,aAAAA,QAAM;AAAA,IAC9C,CAAC,SAAS;AACR,UAAI,8BAA8B,MAAM;AAStC,8BAAsB,MAAM;AAC1B,eAAK,MAAM;AAAA,QACb,CAAC;AAAA,MACH;AACA,mBAAa,IAAI;AACjB,UAAI,SAAU,mCAAW,UAAU,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU,4BAA4B,YAAY;AAAA,EACrD;AAWA,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,CAAC,UAAU,SAAS;AAKlB,UAAI,MAAM,QAAQ,aAAa;AAC7B,0BAAkB;AAAA,MACpB;AACA,UAAI,MAAM,QAAQ,WAAW;AAC3B,0BAAkB,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AACA,UAAI,MAAM,QAAQ,UAAU;AAC1B,2BAAmB;AAAA,MACrB;AACA,UAAI,UAAW,WAAU,OAAO,GAAG,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,WAAW,mBAAmB,kBAAkB;AAAA,EACnD;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,sBAAsB,eAAe,eAAe,kCAAkC;AAAA,IAC/F,CAAC,mCAAmC,eAAe,eAAe,oBAAoB;AAAA,EACxF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -12,6 +12,7 @@ const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
|
|
|
12
12
|
refs: { setReference }
|
|
13
13
|
} = floatingContext;
|
|
14
14
|
const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
|
|
15
|
+
const reRenderButtonToAllowFocus = focusRegion === MENU_FOCUS_REGIONS.TRIGGER && focusedRegionPerformanceHelper.current !== focusRegion;
|
|
15
16
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
16
17
|
const mutableIsMenuOpen = React2.useRef(isMenuOpen);
|
|
17
18
|
mutableIsMenuOpen.current = isMenuOpen;
|
|
@@ -35,15 +36,15 @@ const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
|
|
|
35
36
|
);
|
|
36
37
|
const handleFocusIfTriggerIsFocusRegion = React2.useCallback(
|
|
37
38
|
(node) => {
|
|
39
|
+
if (reRenderButtonToAllowFocus && node) {
|
|
40
|
+
requestAnimationFrame(() => {
|
|
41
|
+
node.focus();
|
|
42
|
+
});
|
|
43
|
+
}
|
|
38
44
|
setReference(node);
|
|
39
45
|
if (innerRef) resolveRef(innerRef, node);
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
if (focusedRegionPerformanceHelper.current === MENU_FOCUS_REGIONS.TRIGGER && node) {
|
|
42
|
-
node.focus();
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
46
|
},
|
|
46
|
-
[innerRef, setReference]
|
|
47
|
+
[innerRef, reRenderButtonToAllowFocus, setReference]
|
|
47
48
|
);
|
|
48
49
|
const handleTriggerKeyDown = React2.useCallback(
|
|
49
50
|
(event, ...args) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { resolveRef } from '../../../utils/resolveRef.js';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n propsWithDefault: DSOpinionatedButtonT.InternalProps;\n floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n // =============================================================================\n // on click -> open the submenu\n // if the props already include an onClick, we will wrap it\n // =============================================================================\n const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n MenuBehaviouralContextProviderContext,\n );\n const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n const {\n refs: { setReference },\n } = floatingContext;\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const mutableIsMenuOpen = React.useRef(isMenuOpen);\n // this is a boolean, so a primitive value,\n // we don't need to useEffect to change it\n // because we don't need to ensure referencial equality\n mutableIsMenuOpen.current = isMenuOpen;\n\n const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n (e, ...args) => {\n if (onClick) onClick(e, ...args);\n // no reason to change this function reference every time the menu opens/closes\n // so we are using a mutable ref to optimize this\n if (mutableIsMenuOpen.current) {\n onOpinionatedClose();\n } else {\n onOpinionatedOpen();\n }\n },\n [onClick, onOpinionatedClose, onOpinionatedOpen],\n );\n const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n (e, ...args) => {\n if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n if (onFocus) onFocus(e, ...args);\n },\n [onFocus, trackFocusTrigger],\n );\n\n const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n (node) => {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAIA,OAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiCA,OAAM,OAAO,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { resolveRef } from '../../../utils/resolveRef.js';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n propsWithDefault: DSOpinionatedButtonT.InternalProps;\n floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n // =============================================================================\n // on click -> open the submenu\n // if the props already include an onClick, we will wrap it\n // =============================================================================\n const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n MenuBehaviouralContextProviderContext,\n );\n const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n const {\n refs: { setReference },\n } = floatingContext;\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n // when the focus region is on the trigger, we need to re-render the button so it invokes the ref callback again to focus itself\n // we don't need to rerender at every focus region change, only when it changes to the trigger itself.\n // by checking the ref stored value against the current focus region, the flag will stay mostly false and change to true only when needed\n const reRenderButtonToAllowFocus =\n focusRegion === MENU_FOCUS_REGIONS.TRIGGER && focusedRegionPerformanceHelper.current !== focusRegion;\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const mutableIsMenuOpen = React.useRef(isMenuOpen);\n // this is a boolean, so a primitive value,\n // we don't need to useEffect to change it\n // because we don't need to ensure referencial equality\n mutableIsMenuOpen.current = isMenuOpen;\n\n const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n (e, ...args) => {\n if (onClick) onClick(e, ...args);\n // no reason to change this function reference every time the menu opens/closes\n // so we are using a mutable ref to optimize this\n if (mutableIsMenuOpen.current) {\n onOpinionatedClose();\n } else {\n onOpinionatedOpen();\n }\n },\n [onClick, onOpinionatedClose, onOpinionatedOpen],\n );\n const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n (e, ...args) => {\n if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n if (onFocus) onFocus(e, ...args);\n },\n [onFocus, trackFocusTrigger],\n );\n\n const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n (node) => {\n if (reRenderButtonToAllowFocus && node) {\n // when user presses \"Enter\" different things happen depending on top of what element the focus is\n // if it is in the trigger (this function) then it spawns the submenu and focuses the first item\n // if it is in a menu item, it activates the item and closes the menu, triggering this function again\n // So, why do we need the requestAnimationFrame?\n // pressing enter in an item will focus the trigger\n // -> current react behaviour means the menu button \"keyDown\" event will also trigger with \"Enter\"\n // -> which will open the menu again\n // as of react 18 and 28/october/2025, this requestAnimationFrame prevents the keyDown event from triggering on top of the button\n requestAnimationFrame(() => {\n node.focus();\n });\n }\n setReference(node);\n if (innerRef) resolveRef(innerRef, node);\n },\n [innerRef, reRenderButtonToAllowFocus, setReference],\n );\n\n /*\n * 13th August 2024:\n * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n * With focus on the button:\n * Enter: opens the menu and places focus on the first menu item.\n * Space: Opens the menu and places focus on the first menu item.\n * (Optional) Down Arrow: opens the menu and moves focus to the first menu item.\n * (Optional) Up Arrow: opens the menu and moves focus to the last menu item.\n */\n const handleTriggerKeyDown = React.useCallback<Required<DSButtonV3T.Props>['onKeyDown']>(\n (event, ...args) => {\n // DSButtonV3 triggers the onClick on Enter and Space, so we don't need to handle it here\n // if (event.key === 'Enter' || event.key === ' ') {\n // onOpinionatedOpen();\n // }\n if (event.key === 'ArrowDown') {\n onOpinionatedOpen();\n }\n if (event.key === 'ArrowUp') {\n onOpinionatedOpen({ focusLastChild: true });\n }\n if (event.key === 'Escape') {\n onOpinionatedClose();\n }\n if (onKeyDown) onKeyDown(event, ...args);\n },\n [onKeyDown, onOpinionatedOpen, onOpinionatedClose],\n );\n\n return React.useMemo(\n () => ({ handleTriggerKeyDown, handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion }),\n [handleFocusIfTriggerIsFocusRegion, handleOnClick, handleOnFocus, handleTriggerKeyDown],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAIA,OAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAI/D,QAAM,6BACJ,gBAAgB,mBAAmB,WAAW,+BAA+B,YAAY;AAC3F,iCAA+B,UAAU;AAEzC,QAAM,oBAAoBA,OAAM,OAAO,UAAU;AAIjD,oBAAkB,UAAU;AAE5B,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAG/B,UAAI,kBAAkB,SAAS;AAC7B,2BAAmB;AAAA,MACrB,OAAO;AACL,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB;AAAA,EACjD;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,+BAA+B,YAAY,mBAAmB,QAAS,mBAAkB;AAC7F,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oCAAoCA,OAAM;AAAA,IAC9C,CAAC,SAAS;AACR,UAAI,8BAA8B,MAAM;AAStC,8BAAsB,MAAM;AAC1B,eAAK,MAAM;AAAA,QACb,CAAC;AAAA,MACH;AACA,mBAAa,IAAI;AACjB,UAAI,SAAU,YAAW,UAAU,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU,4BAA4B,YAAY;AAAA,EACrD;AAWA,QAAM,uBAAuBA,OAAM;AAAA,IACjC,CAAC,UAAU,SAAS;AAKlB,UAAI,MAAM,QAAQ,aAAa;AAC7B,0BAAkB;AAAA,MACpB;AACA,UAAI,MAAM,QAAQ,WAAW;AAC3B,0BAAkB,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AACA,UAAI,MAAM,QAAQ,UAAU;AAC1B,2BAAmB;AAAA,MACrB;AACA,UAAI,UAAW,WAAU,OAAO,GAAG,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,WAAW,mBAAmB,kBAAkB;AAAA,EACnD;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,sBAAsB,eAAe,eAAe,kCAAkC;AAAA,IAC/F,CAAC,mCAAmC,eAAe,eAAe,oBAAoB;AAAA,EACxF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.57.0-next.
|
|
3
|
+
"version": "3.57.0-next.21",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -36,24 +36,23 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@
|
|
40
|
-
"@elliemae/ds-floating-context": "3.57.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-menu-items-commons": "3.57.0-next.
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-tree-model": "3.57.0-next.12"
|
|
39
|
+
"@elliemae/ds-button-v2": "3.57.0-next.21",
|
|
40
|
+
"@elliemae/ds-floating-context": "3.57.0-next.21",
|
|
41
|
+
"@elliemae/ds-grid": "3.57.0-next.21",
|
|
42
|
+
"@elliemae/ds-icons": "3.57.0-next.21",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.21",
|
|
44
|
+
"@elliemae/ds-menu-items-commons": "3.57.0-next.21",
|
|
45
|
+
"@elliemae/ds-system": "3.57.0-next.21",
|
|
46
|
+
"@elliemae/ds-tree-model": "3.57.0-next.21",
|
|
47
|
+
"@elliemae/ds-hooks-on-blur-out": "3.57.0-next.21"
|
|
49
48
|
},
|
|
50
49
|
"devDependencies": {
|
|
51
50
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
52
51
|
"@elliemae/pui-theme": "~2.13.0",
|
|
53
52
|
"jest": "~29.7.0",
|
|
54
53
|
"styled-components": "~5.3.9",
|
|
55
|
-
"@elliemae/ds-monorepo-devops": "3.57.0-next.
|
|
56
|
-
"@elliemae/ds-typescript-helpers": "3.57.0-next.
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.21",
|
|
55
|
+
"@elliemae/ds-typescript-helpers": "3.57.0-next.21"
|
|
57
56
|
},
|
|
58
57
|
"peerDependencies": {
|
|
59
58
|
"@testing-library/jest-dom": "^6.6.3",
|