@elliemae/ds-menu-button 3.51.0-next.9 → 3.51.0-rc.1
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/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +10 -9
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +10 -9
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +10 -9
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +10 -9
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js +6 -5
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/cjs/parts/DSOpinionatedButton/config/useOpinionatedButton.js +3 -2
- package/dist/cjs/parts/DSOpinionatedButton/config/useOpinionatedButton.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +10 -9
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +10 -9
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +10 -9
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +10 -9
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js +6 -5
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/config/useOpinionatedButton.js +3 -2
- package/dist/esm/parts/DSOpinionatedButton/config/useOpinionatedButton.js.map +2 -2
- package/dist/types/parts/DSOpinionatedButton/config/useOpinionatedButton.d.ts +2 -1
- package/package.json +12 -12
|
@@ -50,15 +50,6 @@ const placementOrderPreference = [
|
|
|
50
50
|
const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
51
51
|
const { dsId, plainItem } = itemNode;
|
|
52
52
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
53
|
-
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
54
|
-
placement: placementOrderPreference[0],
|
|
55
|
-
placementOrderPreference,
|
|
56
|
-
animationDuration: 100,
|
|
57
|
-
customOffset: [0, 0]
|
|
58
|
-
});
|
|
59
|
-
const {
|
|
60
|
-
refs: { setReference }
|
|
61
|
-
} = floatingContext;
|
|
62
53
|
const {
|
|
63
54
|
focusRegion,
|
|
64
55
|
openedSubItems,
|
|
@@ -78,6 +69,16 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
|
|
|
78
69
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
79
70
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
80
71
|
const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
72
|
+
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
73
|
+
placement: placementOrderPreference[0],
|
|
74
|
+
placementOrderPreference,
|
|
75
|
+
animationDuration: 100,
|
|
76
|
+
customOffset: [0, 0],
|
|
77
|
+
externallyControlledIsOpen: isExpanded
|
|
78
|
+
});
|
|
79
|
+
const {
|
|
80
|
+
refs: { setReference }
|
|
81
|
+
} = floatingContext;
|
|
81
82
|
const handleFocusOnRender = import_react.default.useCallback(
|
|
82
83
|
(node) => {
|
|
83
84
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n if (secondaryLabel) cols.push('auto');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitem\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -54,15 +54,6 @@ const LeftBoxlessCheckbox = import_react.default.memo(({ isSelected }) => /* @__
|
|
|
54
54
|
const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
55
55
|
const { dsId, plainItem } = itemNode;
|
|
56
56
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
57
|
-
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
58
|
-
placement: placementOrderPreference[0],
|
|
59
|
-
placementOrderPreference,
|
|
60
|
-
animationDuration: 100,
|
|
61
|
-
customOffset: [0, 0]
|
|
62
|
-
});
|
|
63
|
-
const {
|
|
64
|
-
refs: { setReference }
|
|
65
|
-
} = floatingContext;
|
|
66
57
|
const {
|
|
67
58
|
focusRegion,
|
|
68
59
|
propsWithDefault,
|
|
@@ -91,6 +82,16 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
|
|
|
91
82
|
() => (0, import_multipleSelectionHelpers.getIsMultipleSelectNodeWithSubmenuSelected)({ itemNode, selectedNodes }),
|
|
92
83
|
[itemNode, selectedNodes]
|
|
93
84
|
);
|
|
85
|
+
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
86
|
+
placement: placementOrderPreference[0],
|
|
87
|
+
placementOrderPreference,
|
|
88
|
+
animationDuration: 100,
|
|
89
|
+
customOffset: [0, 0],
|
|
90
|
+
externallyControlledIsOpen: isExpanded
|
|
91
|
+
});
|
|
92
|
+
const {
|
|
93
|
+
refs: { setReference }
|
|
94
|
+
} = floatingContext;
|
|
94
95
|
const handleFocusOnRender = import_react.default.useCallback(
|
|
95
96
|
(node) => {
|
|
96
97
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n <Grid width=\"16px\">\n {isSelected ? (\n isSelected === 'mixed' ? (\n <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n ) : (\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n )\n ) : (\n <div />\n )}\n </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA7BR,iCAAgE;AAChE,qBAAqB;AACrB,sBAAgE;AAChE,mCAKO;AACP,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AAEnC,sCAA2D;AAC3D,4CAA+C;AAE/C,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsB,aAAAA,QAAM,KAAK,CAAC,EAAE,WAAW,MACnD,4CAAC,uBAAK,OAAM,QACT,uBACC,eAAe,UACb,4CAAC,qCAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE7D,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAGvD,4CAAC,SAAI,GAET,CACD;AACM,MAAM,oCAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n <Grid width=\"16px\">\n {isSelected ? (\n isSelected === 'mixed' ? (\n <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n ) : (\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n )\n ) : (\n <div />\n )}\n </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n propsWithDefault,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const { selectedNodes } = propsWithDefault;\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n const isSelected = React.useMemo<'mixed' | boolean>(\n // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n // useAdvancedValidation guarantees the non-null in this component\n () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes: selectedNodes! }),\n [itemNode, selectedNodes],\n );\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitemcheckbox\"\n aria-checked={isSelected}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n <LeftBoxlessCheckbox isSelected={isSelected} />\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -60,15 +60,6 @@ const LeftBoxlessRadio = import_react.default.memo(({ isSelected }) => /* @__PUR
|
|
|
60
60
|
const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
61
61
|
const { dsId, plainItem } = itemNode;
|
|
62
62
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
63
|
-
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
64
|
-
placement: placementOrderPreference[0],
|
|
65
|
-
placementOrderPreference,
|
|
66
|
-
animationDuration: 100,
|
|
67
|
-
customOffset: [0, 0]
|
|
68
|
-
});
|
|
69
|
-
const {
|
|
70
|
-
refs: { setReference }
|
|
71
|
-
} = floatingContext;
|
|
72
63
|
const {
|
|
73
64
|
focusRegion,
|
|
74
65
|
propsWithDefault,
|
|
@@ -92,6 +83,16 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
|
|
|
92
83
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
93
84
|
const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
94
85
|
const isSelected = selectedNodes.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
|
|
86
|
+
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
87
|
+
placement: placementOrderPreference[0],
|
|
88
|
+
placementOrderPreference,
|
|
89
|
+
animationDuration: 100,
|
|
90
|
+
customOffset: [0, 0],
|
|
91
|
+
externallyControlledIsOpen: isExpanded
|
|
92
|
+
});
|
|
93
|
+
const {
|
|
94
|
+
refs: { setReference }
|
|
95
|
+
} = floatingContext;
|
|
95
96
|
const handleFocusOnRender = import_react.default.useCallback(
|
|
96
97
|
(node) => {
|
|
97
98
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst StyledRadioDotIndicator = styled('div')`\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCY;AAjCnC,qBAAqB;AACrB,sBAAkC;AAClC,iCAAgE;AAChE,mCAKO;AACP,uBAAuB;AACvB,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AAEnC,4CAA+C;AAE/C,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,mBAAmB,aAAAA,QAAM,KAAK,CAAC,EAAE,WAAW,MAChD,4CAAC,uBAAK,OAAM,QAAQ,uBAAa,4CAAC,2BAAwB,IAAK,4CAAC,SAAI,GAAG,CACxE;AACM,MAAM,kCAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst StyledRadioDotIndicator = styled('div')`\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n propsWithDefault,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const { selectedNodes } = propsWithDefault;\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n // useAdvancedValidation guarantees the non-null in this component\n const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitemradio\"\n aria-checked={isSelected}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n <LeftBoxlessRadio isSelected={isSelected} />\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCY;AAjCnC,qBAAqB;AACrB,sBAAkC;AAClC,iCAAgE;AAChE,mCAKO;AACP,uBAAuB;AACvB,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AAEnC,4CAA+C;AAE/C,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,mBAAmB,aAAAA,QAAM,KAAK,CAAC,EAAE,WAAW,MAChD,4CAAC,uBAAK,OAAM,QAAQ,uBAAa,4CAAC,2BAAwB,IAAK,4CAAC,SAAI,GAAG,CACxE;AACM,MAAM,kCAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,eAAe,MAAM,IAAI,CAAC,eAAe,MAAM;AAC/F,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,aAAa,eAAe,KAAK,CAAC,wBAAwB,oBAAoB,SAAS,IAAI;AACjG,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAGtE,QAAM,aAAa,cAAe,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAEnG,QAAM,sBAAkB,+CAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B;AAAA,EAC9B,CAAC;AACD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,mBAAa,IAAI;AACjB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,aAAa,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC;AAEA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAc;AAAA,QACd,SAAS;AAAA,QACT,IAAG;AAAA,QACH,IAAI,GAAG,mBAAmB;AAAA,QAC1B,UAAU,YAAY,IAAI;AAAA,QAC1B,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,SAAS,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACpG;AAAA;AAAA,QAEN,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,mBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAW;AAAA,YACX,UAAU,YAAY;AAAA,YAEtB;AAAA,0DAAC,oBAAiB,YAAwB;AAAA,cACzC,mBAAmB,4CAAC,oBAAiB,IAAK;AAAA,cAC3C,4CAAC,mDAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,4CAAC,4DAA4B,UAAqB,0BAAe;AAAA,cAEnE,4CAAC,qCAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QACrC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -51,15 +51,6 @@ const placementOrderPreference = [
|
|
|
51
51
|
const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
52
52
|
const { dsId, plainItem } = itemNode;
|
|
53
53
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
54
|
-
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
55
|
-
placement: placementOrderPreference[0],
|
|
56
|
-
placementOrderPreference,
|
|
57
|
-
animationDuration: 100,
|
|
58
|
-
customOffset: [0, 0]
|
|
59
|
-
});
|
|
60
|
-
const {
|
|
61
|
-
refs: { setReference }
|
|
62
|
-
} = floatingContext;
|
|
63
54
|
const {
|
|
64
55
|
focusRegion,
|
|
65
56
|
openedSubItems,
|
|
@@ -80,6 +71,16 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
|
80
71
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
81
72
|
const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
82
73
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
74
|
+
const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
|
|
75
|
+
placement: placementOrderPreference[0],
|
|
76
|
+
placementOrderPreference,
|
|
77
|
+
animationDuration: 100,
|
|
78
|
+
customOffset: [0, 0],
|
|
79
|
+
externallyControlledIsOpen: isExpanded
|
|
80
|
+
});
|
|
81
|
+
const {
|
|
82
|
+
refs: { setReference }
|
|
83
|
+
} = floatingContext;
|
|
83
84
|
const handleFocusOnRender = import_react.default.useCallback(
|
|
84
85
|
(node) => {
|
|
85
86
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -49,15 +49,16 @@ var import_DSFlyoutMenu = require("../DSFlyoutMenu/index.js");
|
|
|
49
49
|
var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
|
|
50
50
|
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSOpinionatedButtonName, slot: import_constants.OPINIONATED_BUTTON_SLOTS.ROOT })``;
|
|
51
51
|
const DSOpinionatedButton = (props) => {
|
|
52
|
+
const globalMenuContext = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
|
|
53
|
+
const {
|
|
54
|
+
isMenuOpen,
|
|
55
|
+
propsWithDefault: { optionsTree }
|
|
56
|
+
} = globalMenuContext;
|
|
52
57
|
const {
|
|
53
58
|
propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },
|
|
54
59
|
eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },
|
|
55
60
|
floatingContext
|
|
56
|
-
} = (0, import_useOpinionatedButton.useOpinionatedButton)(props);
|
|
57
|
-
const {
|
|
58
|
-
isMenuOpen,
|
|
59
|
-
propsWithDefault: { optionsTree }
|
|
60
|
-
} = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
|
|
61
|
+
} = (0, import_useOpinionatedButton.useOpinionatedButton)(props, globalMenuContext);
|
|
61
62
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
62
63
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
64
|
StyledButton,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const globalMenuContext = React.useContext(MenuBehaviouralContextProviderContext);\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = globalMenuContext;\n\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props, globalMenuContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-expanded={isMenuOpen}\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAAA;AAAA;AAAA;AAAA;AAhCJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAuB;AACvB,0BAA2B;AAC3B,mCAA8E;AAC9E,kCAAqC;AACrC,uBAAkE;AAClE,0BAA6B;AAC7B,+CAAsD;AAGtD,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,0CAAyB,MAAM,0CAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoB,aAAAA,QAAM,WAAW,8EAAqC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI;AAEJ,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,QAAI,kDAAqB,OAAO,iBAAiB;AAEjD,SAGE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,QAEN,iBAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QAErC,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,oCAAgC,kCAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -52,7 +52,7 @@ const placementOrderPreference = [
|
|
|
52
52
|
"top-end",
|
|
53
53
|
"top"
|
|
54
54
|
];
|
|
55
|
-
const useOpinionatedButton = (propsFromUser) => {
|
|
55
|
+
const useOpinionatedButton = (propsFromUser, globalMenuContext) => {
|
|
56
56
|
const propsWithDefault = import_react.default.useMemo(
|
|
57
57
|
() => ({
|
|
58
58
|
...import_react_desc_prop_types.defaultProps,
|
|
@@ -66,7 +66,8 @@ const useOpinionatedButton = (propsFromUser) => {
|
|
|
66
66
|
placement: placementOrderPreference[0],
|
|
67
67
|
placementOrderPreference,
|
|
68
68
|
animationDuration: 100,
|
|
69
|
-
customOffset: [0, 0]
|
|
69
|
+
customOffset: [0, 0],
|
|
70
|
+
externallyControlledIsOpen: globalMenuContext.isMenuOpen
|
|
70
71
|
});
|
|
71
72
|
const eventsHandlers = (0, import_useTriggerEventsHandlers.useTriggerEventsHandlers)({ propsWithDefault, floatingContext });
|
|
72
73
|
return import_react.default.useMemo(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSOpinionatedButton/config/useOpinionatedButton.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n DSOpinionatedButtonPropTypesSchema,\n defaultProps,\n type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n 'top-start',\n 'top-end',\n 'top',\n];\n\nexport const useOpinionatedButton = (propsFromUser: DSOpinionatedButtonT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n // the component deals with HTML DOM elements,\n // Deep compare of HTML DOM elements is pointless and extremely costly\n // for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n const propsWithDefault = React.useMemo(\n () => ({\n ...defaultProps,\n ...propsFromUser,\n }),\n [propsFromUser],\n ) as DSOpinionatedButtonT.InternalProps;\n useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n });\n const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n instanceUid,\n eventsHandlers,\n floatingContext,\n }),\n [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAgE;AAChE,mBAAkB;AAClB,iBAAoB;AACpB,mCAIO;AACP,sCAAyC;AACzC,8BAAiC;
|
|
4
|
+
"sourcesContent": ["import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n DSOpinionatedButtonPropTypesSchema,\n defaultProps,\n type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport type { MenuBehaviouralContextProviderCTX } from '../../DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n 'top-start',\n 'top-end',\n 'top',\n];\n\nexport const useOpinionatedButton = (\n propsFromUser: DSOpinionatedButtonT.Props,\n globalMenuContext: MenuBehaviouralContextProviderCTX,\n) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n // the component deals with HTML DOM elements,\n // Deep compare of HTML DOM elements is pointless and extremely costly\n // for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n const propsWithDefault = React.useMemo(\n () => ({\n ...defaultProps,\n ...propsFromUser,\n }),\n [propsFromUser],\n ) as DSOpinionatedButtonT.InternalProps;\n useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: globalMenuContext.isMenuOpen,\n });\n const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n instanceUid,\n eventsHandlers,\n floatingContext,\n }),\n [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAgE;AAChE,mBAAkB;AAClB,iBAAoB;AACpB,mCAIO;AACP,sCAAyC;AACzC,8BAAiC;AAGjC,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB,CAClC,eACA,sBACG;AAOH,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,gDAAiB,kBAAkB,+DAAkC;AAUrE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,6BAAyB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAE7E,QAAM,sBAAkB,+CAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B,kBAAkB;AAAA,EAChD,CAAC;AACD,QAAM,qBAAiB,0DAAyB,EAAE,kBAAkB,gBAAgB,CAAC;AAErF,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,eAAe;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -22,15 +22,6 @@ const placementOrderPreference = [
|
|
|
22
22
|
const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
23
23
|
const { dsId, plainItem } = itemNode;
|
|
24
24
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
25
|
-
const floatingContext = useFloatingContext({
|
|
26
|
-
placement: placementOrderPreference[0],
|
|
27
|
-
placementOrderPreference,
|
|
28
|
-
animationDuration: 100,
|
|
29
|
-
customOffset: [0, 0]
|
|
30
|
-
});
|
|
31
|
-
const {
|
|
32
|
-
refs: { setReference }
|
|
33
|
-
} = floatingContext;
|
|
34
25
|
const {
|
|
35
26
|
focusRegion,
|
|
36
27
|
openedSubItems,
|
|
@@ -50,6 +41,16 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
|
|
|
50
41
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
51
42
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
52
43
|
const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
44
|
+
const floatingContext = useFloatingContext({
|
|
45
|
+
placement: placementOrderPreference[0],
|
|
46
|
+
placementOrderPreference,
|
|
47
|
+
animationDuration: 100,
|
|
48
|
+
customOffset: [0, 0],
|
|
49
|
+
externallyControlledIsOpen: isExpanded
|
|
50
|
+
});
|
|
51
|
+
const {
|
|
52
|
+
refs: { setReference }
|
|
53
|
+
} = floatingContext;
|
|
53
54
|
const handleFocusOnRender = React2.useCallback(
|
|
54
55
|
(node) => {
|
|
55
56
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n if (secondaryLabel) cols.push('auto');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitem\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -26,15 +26,6 @@ const LeftBoxlessCheckbox = React2.memo(({ isSelected }) => /* @__PURE__ */ jsx(
|
|
|
26
26
|
const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
27
27
|
const { dsId, plainItem } = itemNode;
|
|
28
28
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
29
|
-
const floatingContext = useFloatingContext({
|
|
30
|
-
placement: placementOrderPreference[0],
|
|
31
|
-
placementOrderPreference,
|
|
32
|
-
animationDuration: 100,
|
|
33
|
-
customOffset: [0, 0]
|
|
34
|
-
});
|
|
35
|
-
const {
|
|
36
|
-
refs: { setReference }
|
|
37
|
-
} = floatingContext;
|
|
38
29
|
const {
|
|
39
30
|
focusRegion,
|
|
40
31
|
propsWithDefault,
|
|
@@ -63,6 +54,16 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
|
|
|
63
54
|
() => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes }),
|
|
64
55
|
[itemNode, selectedNodes]
|
|
65
56
|
);
|
|
57
|
+
const floatingContext = useFloatingContext({
|
|
58
|
+
placement: placementOrderPreference[0],
|
|
59
|
+
placementOrderPreference,
|
|
60
|
+
animationDuration: 100,
|
|
61
|
+
customOffset: [0, 0],
|
|
62
|
+
externallyControlledIsOpen: isExpanded
|
|
63
|
+
});
|
|
64
|
+
const {
|
|
65
|
+
refs: { setReference }
|
|
66
|
+
} = floatingContext;
|
|
66
67
|
const handleFocusOnRender = React2.useCallback(
|
|
67
68
|
(node) => {
|
|
68
69
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n <Grid width=\"16px\">\n {isSelected ? (\n isSelected === 'mixed' ? (\n <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n ) : (\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n )\n ) : (\n <div />\n )}\n </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+Bf,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n <Grid width=\"16px\">\n {isSelected ? (\n isSelected === 'mixed' ? (\n <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n ) : (\n <Checkmark size=\"s\" color={['brand-primary', '600']} />\n )\n ) : (\n <div />\n )}\n </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n propsWithDefault,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const { selectedNodes } = propsWithDefault;\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n const isSelected = React.useMemo<'mixed' | boolean>(\n // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n // useAdvancedValidation guarantees the non-null in this component\n () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes: selectedNodes! }),\n [itemNode, selectedNodes],\n );\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitemcheckbox\"\n aria-checked={isSelected}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n <LeftBoxlessCheckbox isSelected={isSelected} />\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -32,15 +32,6 @@ const LeftBoxlessRadio = React2.memo(({ isSelected }) => /* @__PURE__ */ jsx(Gri
|
|
|
32
32
|
const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
33
33
|
const { dsId, plainItem } = itemNode;
|
|
34
34
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
35
|
-
const floatingContext = useFloatingContext({
|
|
36
|
-
placement: placementOrderPreference[0],
|
|
37
|
-
placementOrderPreference,
|
|
38
|
-
animationDuration: 100,
|
|
39
|
-
customOffset: [0, 0]
|
|
40
|
-
});
|
|
41
|
-
const {
|
|
42
|
-
refs: { setReference }
|
|
43
|
-
} = floatingContext;
|
|
44
35
|
const {
|
|
45
36
|
focusRegion,
|
|
46
37
|
propsWithDefault,
|
|
@@ -64,6 +55,16 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
|
|
|
64
55
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
65
56
|
const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
66
57
|
const isSelected = selectedNodes.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
|
|
58
|
+
const floatingContext = useFloatingContext({
|
|
59
|
+
placement: placementOrderPreference[0],
|
|
60
|
+
placementOrderPreference,
|
|
61
|
+
animationDuration: 100,
|
|
62
|
+
customOffset: [0, 0],
|
|
63
|
+
externallyControlledIsOpen: isExpanded
|
|
64
|
+
});
|
|
65
|
+
const {
|
|
66
|
+
refs: { setReference }
|
|
67
|
+
} = floatingContext;
|
|
67
68
|
const handleFocusOnRender = React2.useCallback(
|
|
68
69
|
(node) => {
|
|
69
70
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst StyledRadioDotIndicator = styled('div')`\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkCY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nconst StyledRadioDotIndicator = styled('div')`\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n propsWithDefault,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const { selectedNodes } = propsWithDefault;\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n // useAdvancedValidation guarantees the non-null in this component\n const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitemradio\"\n aria-checked={isSelected}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n <LeftBoxlessRadio isSelected={isSelected} />\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -23,15 +23,6 @@ const placementOrderPreference = [
|
|
|
23
23
|
const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
24
24
|
const { dsId, plainItem } = itemNode;
|
|
25
25
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
26
|
-
const floatingContext = useFloatingContext({
|
|
27
|
-
placement: placementOrderPreference[0],
|
|
28
|
-
placementOrderPreference,
|
|
29
|
-
animationDuration: 100,
|
|
30
|
-
customOffset: [0, 0]
|
|
31
|
-
});
|
|
32
|
-
const {
|
|
33
|
-
refs: { setReference }
|
|
34
|
-
} = floatingContext;
|
|
35
26
|
const {
|
|
36
27
|
focusRegion,
|
|
37
28
|
openedSubItems,
|
|
@@ -52,6 +43,16 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
|
52
43
|
focusedRegionPerformanceHelper.current = focusRegion;
|
|
53
44
|
const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
|
|
54
45
|
const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
|
|
46
|
+
const floatingContext = useFloatingContext({
|
|
47
|
+
placement: placementOrderPreference[0],
|
|
48
|
+
placementOrderPreference,
|
|
49
|
+
animationDuration: 100,
|
|
50
|
+
customOffset: [0, 0],
|
|
51
|
+
externallyControlledIsOpen: isExpanded
|
|
52
|
+
});
|
|
53
|
+
const {
|
|
54
|
+
refs: { setReference }
|
|
55
|
+
} = floatingContext;
|
|
55
56
|
const handleFocusOnRender = React2.useCallback(
|
|
56
57
|
(node) => {
|
|
57
58
|
setReference(node);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n focusRegion,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n >\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2FnB,mBAmC0B,KAPtB,YA5BJ;AA3FJ,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAEnC,SAAS,sCAAsC;AAE/C,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,sBAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AACtE,QAAM,aAAa,eAAe,KAAK,CAAC,wBAAwB,oBAAoB,SAAS,IAAI;AAEjG,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B;AAAA,EAC9B,CAAC;AACD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,mBAAa,IAAI;AACjB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,aAAa,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC;AAEA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAc;AAAA,QACd,SAAS;AAAA,QACT,IAAG;AAAA,QACH,IAAI,GAAG,mBAAmB;AAAA,QAC1B,UAAU,YAAY,IAAI;AAAA,QAC1B,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,SAAS,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACpG;AAAA;AAAA,QAEN,iBAAe;AAAA,QACf,mBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAW;AAAA,YACX,UAAU,YAAY;AAAA,YAErB;AAAA,iCAAmB,oBAAC,oBAAiB,IAAK;AAAA,cAC3C,oBAAC,sBAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,oBAAC,+BAA4B,UAAqB,0BAAe;AAAA,cAEnE,oBAAC,qBAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QACrC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -11,15 +11,16 @@ import { DSFlyoutMenu } from "../DSFlyoutMenu/index.js";
|
|
|
11
11
|
import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
|
|
12
12
|
const StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;
|
|
13
13
|
const DSOpinionatedButton = (props) => {
|
|
14
|
+
const globalMenuContext = React2.useContext(MenuBehaviouralContextProviderContext);
|
|
15
|
+
const {
|
|
16
|
+
isMenuOpen,
|
|
17
|
+
propsWithDefault: { optionsTree }
|
|
18
|
+
} = globalMenuContext;
|
|
14
19
|
const {
|
|
15
20
|
propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },
|
|
16
21
|
eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },
|
|
17
22
|
floatingContext
|
|
18
|
-
} = useOpinionatedButton(props);
|
|
19
|
-
const {
|
|
20
|
-
isMenuOpen,
|
|
21
|
-
propsWithDefault: { optionsTree }
|
|
22
|
-
} = React2.useContext(MenuBehaviouralContextProviderContext);
|
|
23
|
+
} = useOpinionatedButton(props, globalMenuContext);
|
|
23
24
|
return (
|
|
24
25
|
// onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE
|
|
25
26
|
// all the functions are being wrapped in a custom logic, they also invoke the original ones
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const globalMenuContext = React.useContext(MenuBehaviouralContextProviderContext);\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = globalMenuContext;\n\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props, globalMenuContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-expanded={isMenuOpen}\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgCnB,mBACE,KADF;AAhCJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAGtD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoBA,OAAM,WAAW,qCAAqC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI;AAEJ,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,OAAO,iBAAiB;AAEjD;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,UAEN,iBAAe;AAAA,UAEd;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,gBAAgB,gBAAgB;AAAA,UAChC,gBAAgB,gBAAgB,KAAK;AAAA,UAErC,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -22,7 +22,7 @@ const placementOrderPreference = [
|
|
|
22
22
|
"top-end",
|
|
23
23
|
"top"
|
|
24
24
|
];
|
|
25
|
-
const useOpinionatedButton = (propsFromUser) => {
|
|
25
|
+
const useOpinionatedButton = (propsFromUser, globalMenuContext) => {
|
|
26
26
|
const propsWithDefault = React2.useMemo(
|
|
27
27
|
() => ({
|
|
28
28
|
...defaultProps,
|
|
@@ -36,7 +36,8 @@ const useOpinionatedButton = (propsFromUser) => {
|
|
|
36
36
|
placement: placementOrderPreference[0],
|
|
37
37
|
placementOrderPreference,
|
|
38
38
|
animationDuration: 100,
|
|
39
|
-
customOffset: [0, 0]
|
|
39
|
+
customOffset: [0, 0],
|
|
40
|
+
externallyControlledIsOpen: globalMenuContext.isMenuOpen
|
|
40
41
|
});
|
|
41
42
|
const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });
|
|
42
43
|
return React2.useMemo(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/config/useOpinionatedButton.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n DSOpinionatedButtonPropTypesSchema,\n defaultProps,\n type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n 'top-start',\n 'top-end',\n 'top',\n];\n\nexport const useOpinionatedButton = (propsFromUser: DSOpinionatedButtonT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n // the component deals with HTML DOM elements,\n // Deep compare of HTML DOM elements is pointless and extremely costly\n // for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n const propsWithDefault = React.useMemo(\n () => ({\n ...defaultProps,\n ...propsFromUser,\n }),\n [propsFromUser],\n ) as DSOpinionatedButtonT.InternalProps;\n useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n });\n const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n instanceUid,\n eventsHandlers,\n floatingContext,\n }),\n [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n DSOpinionatedButtonPropTypesSchema,\n defaultProps,\n type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport type { MenuBehaviouralContextProviderCTX } from '../../DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n 'top-start',\n 'top-end',\n 'top',\n];\n\nexport const useOpinionatedButton = (\n propsFromUser: DSOpinionatedButtonT.Props,\n globalMenuContext: MenuBehaviouralContextProviderCTX,\n) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n // the component deals with HTML DOM elements,\n // Deep compare of HTML DOM elements is pointless and extremely costly\n // for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n const propsWithDefault = React.useMemo(\n () => ({\n ...defaultProps,\n ...propsFromUser,\n }),\n [propsFromUser],\n ) as DSOpinionatedButtonT.InternalProps;\n useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: globalMenuContext.isMenuOpen,\n });\n const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n instanceUid,\n eventsHandlers,\n floatingContext,\n }),\n [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAGjC,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB,CAClC,eACA,sBACG;AAOH,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,kCAAkC;AAUrE,QAAM,cAAcA,OAAM,QAAQ,MAAM,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAE7E,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B,kBAAkB;AAAA,EAChD,CAAC;AACD,QAAM,iBAAiB,yBAAyB,EAAE,kBAAkB,gBAAgB,CAAC;AAErF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,eAAe;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';
|
|
3
|
-
|
|
3
|
+
import type { MenuBehaviouralContextProviderCTX } from '../../DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js';
|
|
4
|
+
export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.Props, globalMenuContext: MenuBehaviouralContextProviderCTX) => {
|
|
4
5
|
propsWithDefault: DSOpinionatedButtonT.InternalProps;
|
|
5
6
|
instanceUid: string;
|
|
6
7
|
eventsHandlers: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.51.0-
|
|
3
|
+
"version": "3.51.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.7.3",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.51.0-
|
|
41
|
-
"@elliemae/ds-floating-context": "3.51.0-
|
|
42
|
-
"@elliemae/ds-grid": "3.51.0-
|
|
43
|
-
"@elliemae/ds-hooks-on-blur-out": "3.51.0-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-tree-model": "3.51.0-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.51.0-rc.1",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.51.0-rc.1",
|
|
42
|
+
"@elliemae/ds-grid": "3.51.0-rc.1",
|
|
43
|
+
"@elliemae/ds-hooks-on-blur-out": "3.51.0-rc.1",
|
|
44
|
+
"@elliemae/ds-menu-items-commons": "3.51.0-rc.1",
|
|
45
|
+
"@elliemae/ds-system": "3.51.0-rc.1",
|
|
46
|
+
"@elliemae/ds-icons": "3.51.0-rc.1",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.51.0-rc.1",
|
|
48
|
+
"@elliemae/ds-tree-model": "3.51.0-rc.1"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
52
52
|
"@elliemae/pui-theme": "~2.10.0",
|
|
53
53
|
"jest": "~29.7.0",
|
|
54
54
|
"styled-components": "~5.3.9",
|
|
55
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-
|
|
56
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-rc.1",
|
|
56
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-rc.1"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@testing-library/jest-dom": "^6.6.3",
|