@elliemae/ds-menu-button 3.60.0-next.15 → 3.60.0-next.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/cjs/index.js +9 -0
  2. package/dist/cjs/index.js.map +3 -3
  3. package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js +1 -0
  4. package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +2 -2
  5. package/dist/cjs/parts/DSFlyoutMenu/constants/index.js +4 -1
  6. package/dist/cjs/parts/DSFlyoutMenu/constants/index.js.map +2 -2
  7. package/dist/esm/index.js +12 -0
  8. package/dist/esm/index.js.map +2 -2
  9. package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js +1 -0
  10. package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +2 -2
  11. package/dist/esm/parts/DSFlyoutMenu/constants/index.js +4 -1
  12. package/dist/esm/parts/DSFlyoutMenu/constants/index.js.map +2 -2
  13. package/dist/types/config/useSplitInherithedProps.d.ts +1 -1
  14. package/dist/types/index.d.ts +3 -0
  15. package/dist/types/parts/DSFlyoutMenu/constants/index.d.ts +1 -1
  16. package/package.json +12 -12
package/dist/cjs/index.js CHANGED
@@ -28,14 +28,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
  var index_exports = {};
30
30
  __export(index_exports, {
31
+ DSFlyoutMenuName: () => import_constants3.DSFlyoutMenuName,
31
32
  DSMenuButton: () => import_DSMenuButton.DSMenuButton,
32
33
  DSMenuButtonName: () => import_constants.DSMenuButtonName,
33
34
  DSMenuButtonPropTypes: () => import_react_desc_prop_types.DSMenuButtonPropTypes,
34
35
  DSMenuButtonWithSchema: () => import_DSMenuButton.DSMenuButtonWithSchema,
36
+ DSMenuItemRendererFactoryName: () => import_constants4.DSMenuItemRendererFactoryName,
37
+ DSOpinionatedButtonName: () => import_constants2.DSOpinionatedButtonName,
38
+ FLYOUT_MENU_SLOTS: () => import_constants3.FLYOUT_MENU_SLOTS,
35
39
  MENU_BUTTON_DATA_TESTID: () => import_constants.MENU_BUTTON_DATA_TESTID,
36
40
  MENU_BUTTON_SLOTS: () => import_constants.MENU_BUTTON_SLOTS,
37
41
  MENU_BUTTON_WITH_PARTS_SLOTS: () => import_constants.MENU_BUTTON_WITH_PARTS_SLOTS,
38
42
  MENU_ITEMS_TYPES: () => import_constants.MENU_ITEMS_TYPES,
43
+ MENU_ITEM_RENDERER_FACTORY_SLOTS: () => import_constants4.MENU_ITEM_RENDERER_FACTORY_SLOTS,
44
+ OPINIONATED_BUTTON_SLOTS: () => import_constants2.OPINIONATED_BUTTON_SLOTS,
39
45
  isFocusableNode: () => import_nodesTypeguardsAndGetters.isFocusableNode,
40
46
  useOptionsArrayToDsTree: () => import_useOptionsArrayToDsTree.useOptionsArrayToDsTree
41
47
  });
@@ -44,6 +50,9 @@ var React = __toESM(require("react"));
44
50
  var import_DSMenuButton = require("./DSMenuButton.js");
45
51
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
46
52
  var import_constants = require("./constants/index.js");
53
+ var import_constants2 = require("./parts/DSOpinionatedButton/constants/index.js");
54
+ var import_constants3 = require("./parts/DSFlyoutMenu/constants/index.js");
55
+ var import_constants4 = require("./parts/DSMenuItemRendererFactory/constants/index.js");
47
56
  var import_nodesTypeguardsAndGetters = require("./utils/nodesTypeguardsAndGetters.js");
48
57
  var import_useOptionsArrayToDsTree = require("./utils/useOptionsArrayToDsTree.js");
49
58
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport {\n MENU_BUTTON_SLOTS,\n DSMenuButtonName,\n MENU_BUTTON_DATA_TESTID,\n MENU_ITEMS_TYPES,\n MENU_BUTTON_WITH_PARTS_SLOTS,\n} from './constants/index.js';\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AACrD,mCAA0D;AAC1D,uBAMO;AACP,uCAAgC;AAChC,qCAAwC;",
6
- "names": []
4
+ "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport {\n MENU_BUTTON_SLOTS,\n DSMenuButtonName,\n MENU_BUTTON_DATA_TESTID,\n MENU_ITEMS_TYPES,\n MENU_BUTTON_WITH_PARTS_SLOTS,\n} from './constants/index.js';\n\nexport { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from './parts/DSOpinionatedButton/constants/index.js';\nexport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './parts/DSFlyoutMenu/constants/index.js';\nexport {\n DSMenuItemRendererFactoryName,\n MENU_ITEM_RENDERER_FACTORY_SLOTS,\n} from './parts/DSMenuItemRendererFactory/constants/index.js';\n\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AACrD,mCAA0D;AAC1D,uBAMO;AAEP,IAAAA,oBAAkE;AAClE,IAAAA,oBAAoD;AACpD,IAAAA,oBAGO;AAEP,uCAAgC;AAChC,qCAAwC;",
6
+ "names": ["import_constants"]
7
7
  }
package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js CHANGED
@@ -105,6 +105,7 @@ const DSFlyoutMenu = (props) => {
105
105
  onAnimationEnd: handleAnimationEnd,
106
106
  getOwnerProps,
107
107
  getOwnerPropsArguments,
108
+ "data-testid": "ds-floating-wrapper-root",
108
109
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps, getOwnerPropsArguments, ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
109
110
  StyledMenu,
110
111
  {
package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledWrapper = styled(Grid, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n min-width: 1px;\n background-color: white;\n padding: ${({ theme }) => theme.space.xxxs} 0;\n ${xStyledCommonProps}\n`;\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER,\n})``;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n $maxHeight: string | number;\n}>`\n max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n overflow-y: auto;\n padding: 0;\n margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n const {\n ownerProps: { getOwnerProps, getOwnerPropsArguments },\n } = React.useContext(MenuButtonContextProvider);\n const {\n instanceUid,\n globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n const handleRefChange = React.useCallback(\n (node: HTMLDivElement) => {\n if (isRootNode(itemNode)) {\n mainMenuRef.current = node;\n return;\n }\n handleSubmenusRefChange(node, itemNode.dsId);\n },\n [handleSubmenusRefChange, itemNode, mainMenuRef],\n );\n\n const handleAnimationStartTrigger = React.useCallback(() => {\n setDidAnimationEnd(false);\n }, []);\n const handleAnimationEnd = React.useCallback(() => {\n setDidAnimationEnd(true);\n }, []);\n\n return (\n <StyledFloatingWrapper\n innerRef={setFloatingRef}\n floatingStyles={floatingStyles}\n isOpen={isMenuOpen}\n context={floatingContext}\n onAnimationStartTriggered={handleAnimationStartTrigger}\n onAnimationEnd={handleAnimationEnd}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} {...xstyledProps}>\n <StyledMenu\n role=\"menu\"\n innerRef={handleRefChange}\n $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {itemNode.children.map((optionNode) => (\n <DSMenuItemRendererFactory\n key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n itemNode={optionNode as DSMenuButtonT.MenuNode}\n ItemRenderer={ItemRenderer}\n // we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n // this solves the circular-ish dependency\n // the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n />\n ))}\n </StyledMenu>\n </StyledWrapper>\n </StyledFloatingWrapper>\n );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0FX;AA1FZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAE3C,mBAAkB;AAClB,mCAA6D;AAC7D,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,IAAAA,gCAAgE;AAChE,uCAA2B;AAC3B,0CAA0C;AAC1C,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAI,aAAAC,QAAM,WAAW,6DAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,cAAI,6CAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MAEA,sDAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,sDAAyB;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledWrapper = styled(Grid, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n min-width: 1px;\n background-color: white;\n padding: ${({ theme }) => theme.space.xxxs} 0;\n ${xStyledCommonProps}\n`;\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER,\n})``;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n $maxHeight: string | number;\n}>`\n max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n overflow-y: auto;\n padding: 0;\n margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n const {\n ownerProps: { getOwnerProps, getOwnerPropsArguments },\n } = React.useContext(MenuButtonContextProvider);\n const {\n instanceUid,\n globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n const handleRefChange = React.useCallback(\n (node: HTMLDivElement) => {\n if (isRootNode(itemNode)) {\n mainMenuRef.current = node;\n return;\n }\n handleSubmenusRefChange(node, itemNode.dsId);\n },\n [handleSubmenusRefChange, itemNode, mainMenuRef],\n );\n\n const handleAnimationStartTrigger = React.useCallback(() => {\n setDidAnimationEnd(false);\n }, []);\n const handleAnimationEnd = React.useCallback(() => {\n setDidAnimationEnd(true);\n }, []);\n\n return (\n <StyledFloatingWrapper\n innerRef={setFloatingRef}\n floatingStyles={floatingStyles}\n isOpen={isMenuOpen}\n context={floatingContext}\n onAnimationStartTriggered={handleAnimationStartTrigger}\n onAnimationEnd={handleAnimationEnd}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n // Adding a data-testid for legacy e2e tests\n data-testid=\"ds-floating-wrapper-root\"\n >\n <StyledWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} {...xstyledProps}>\n <StyledMenu\n role=\"menu\"\n innerRef={handleRefChange}\n $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {itemNode.children.map((optionNode) => (\n <DSMenuItemRendererFactory\n key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n itemNode={optionNode as DSMenuButtonT.MenuNode}\n ItemRenderer={ItemRenderer}\n // we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n // this solves the circular-ish dependency\n // the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n />\n ))}\n </StyledMenu>\n </StyledWrapper>\n </StyledFloatingWrapper>\n );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4FX;AA5FZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAE3C,mBAAkB;AAClB,mCAA6D;AAC7D,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,IAAAA,gCAAgE;AAChE,uCAA2B;AAC3B,0CAA0C;AAC1C,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAI,aAAAC,QAAM,WAAW,6DAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,cAAI,6CAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MAEA,eAAY;AAAA,MAEZ,sDAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,sDAAyB;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["import_react_desc_prop_types", "React"]
7
7
  }
package/dist/cjs/parts/DSFlyoutMenu/constants/index.js CHANGED
@@ -43,5 +43,8 @@ const FLYOUT_MENU_SLOTS = {
43
43
  ROOT: "root",
44
44
  LIST_WRAPPER: "list-wrapper"
45
45
  };
46
- const FLYOUT_MENU_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);
46
+ const FLYOUT_MENU_DATA_TESTID = {
47
+ ...(0, import_ds_system.slotObjectToDataTestIds)(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),
48
+ FLOATING_WRAPPER: "ds-floating-wrapper-root"
49
+ };
47
50
  //# sourceMappingURL=index.js.map
package/dist/cjs/parts/DSFlyoutMenu/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/DSFlyoutMenu/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n FLOATING_WRAPPER: 'floating-wrapper',\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n FLOATING_WRAPPER: 'floating-wrapper',\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n FLOATING_WRAPPER: 'ds-floating-wrapper-root',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B;AAAA,EACrC,OAAG,0CAAwB,kBAAkB,iBAAiB;AAAA,EAC9D,kBAAkB;AACpB;",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js CHANGED
@@ -8,17 +8,29 @@ import {
8
8
  MENU_ITEMS_TYPES,
9
9
  MENU_BUTTON_WITH_PARTS_SLOTS
10
10
  } from "./constants/index.js";
11
+ import { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from "./parts/DSOpinionatedButton/constants/index.js";
12
+ import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./parts/DSFlyoutMenu/constants/index.js";
13
+ import {
14
+ DSMenuItemRendererFactoryName,
15
+ MENU_ITEM_RENDERER_FACTORY_SLOTS
16
+ } from "./parts/DSMenuItemRendererFactory/constants/index.js";
11
17
  import { isFocusableNode } from "./utils/nodesTypeguardsAndGetters.js";
12
18
  import { useOptionsArrayToDsTree } from "./utils/useOptionsArrayToDsTree.js";
13
19
  export {
20
+ DSFlyoutMenuName,
14
21
  DSMenuButton,
15
22
  DSMenuButtonName,
16
23
  DSMenuButtonPropTypes,
17
24
  DSMenuButtonWithSchema,
25
+ DSMenuItemRendererFactoryName,
26
+ DSOpinionatedButtonName,
27
+ FLYOUT_MENU_SLOTS,
18
28
  MENU_BUTTON_DATA_TESTID,
19
29
  MENU_BUTTON_SLOTS,
20
30
  MENU_BUTTON_WITH_PARTS_SLOTS,
21
31
  MENU_ITEMS_TYPES,
32
+ MENU_ITEM_RENDERER_FACTORY_SLOTS,
33
+ OPINIONATED_BUTTON_SLOTS,
22
34
  isFocusableNode,
23
35
  useOptionsArrayToDsTree
24
36
  };
package/dist/esm/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport {\n MENU_BUTTON_SLOTS,\n DSMenuButtonName,\n MENU_BUTTON_DATA_TESTID,\n MENU_ITEMS_TYPES,\n MENU_BUTTON_WITH_PARTS_SLOTS,\n} from './constants/index.js';\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,cAAc,8BAA8B;AACrD,SAA6B,6BAA6B;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport {\n MENU_BUTTON_SLOTS,\n DSMenuButtonName,\n MENU_BUTTON_DATA_TESTID,\n MENU_ITEMS_TYPES,\n MENU_BUTTON_WITH_PARTS_SLOTS,\n} from './constants/index.js';\n\nexport { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from './parts/DSOpinionatedButton/constants/index.js';\nexport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './parts/DSFlyoutMenu/constants/index.js';\nexport {\n DSMenuItemRendererFactoryName,\n MENU_ITEM_RENDERER_FACTORY_SLOTS,\n} from './parts/DSMenuItemRendererFactory/constants/index.js';\n\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,cAAc,8BAA8B;AACrD,SAA6B,6BAA6B;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB,gCAAgC;AAClE,SAAS,kBAAkB,yBAAyB;AACpD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js CHANGED
@@ -71,6 +71,7 @@ const DSFlyoutMenu = (props) => {
71
71
  onAnimationEnd: handleAnimationEnd,
72
72
  getOwnerProps,
73
73
  getOwnerPropsArguments,
74
+ "data-testid": "ds-floating-wrapper-root",
74
75
  children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps, getOwnerPropsArguments, ...xstyledProps, children: /* @__PURE__ */ jsx(
75
76
  StyledMenu,
76
77
  {
package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledWrapper = styled(Grid, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n min-width: 1px;\n background-color: white;\n padding: ${({ theme }) => theme.space.xxxs} 0;\n ${xStyledCommonProps}\n`;\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER,\n})``;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n $maxHeight: string | number;\n}>`\n max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n overflow-y: auto;\n padding: 0;\n margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n const {\n ownerProps: { getOwnerProps, getOwnerPropsArguments },\n } = React.useContext(MenuButtonContextProvider);\n const {\n instanceUid,\n globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n const handleRefChange = React.useCallback(\n (node: HTMLDivElement) => {\n if (isRootNode(itemNode)) {\n mainMenuRef.current = node;\n return;\n }\n handleSubmenusRefChange(node, itemNode.dsId);\n },\n [handleSubmenusRefChange, itemNode, mainMenuRef],\n );\n\n const handleAnimationStartTrigger = React.useCallback(() => {\n setDidAnimationEnd(false);\n }, []);\n const handleAnimationEnd = React.useCallback(() => {\n setDidAnimationEnd(true);\n }, []);\n\n return (\n <StyledFloatingWrapper\n innerRef={setFloatingRef}\n floatingStyles={floatingStyles}\n isOpen={isMenuOpen}\n context={floatingContext}\n onAnimationStartTriggered={handleAnimationStartTrigger}\n onAnimationEnd={handleAnimationEnd}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} {...xstyledProps}>\n <StyledMenu\n role=\"menu\"\n innerRef={handleRefChange}\n $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {itemNode.children.map((optionNode) => (\n <DSMenuItemRendererFactory\n key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n itemNode={optionNode as DSMenuButtonT.MenuNode}\n ItemRenderer={ItemRenderer}\n // we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n // this solves the circular-ish dependency\n // the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n />\n ))}\n </StyledMenu>\n </StyledWrapper>\n </StyledFloatingWrapper>\n );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0FX;AA1FZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAE3C,OAAOA,YAAW;AAClB,SAA6B,gCAAgC;AAC7D,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAED,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MAEA,8BAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,yBAAyB;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledWrapper = styled(Grid, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n min-width: 1px;\n background-color: white;\n padding: ${({ theme }) => theme.space.xxxs} 0;\n ${xStyledCommonProps}\n`;\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSFlyoutMenuName,\n slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER,\n})``;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n $maxHeight: string | number;\n}>`\n max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n overflow-y: auto;\n padding: 0;\n margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n const {\n ownerProps: { getOwnerProps, getOwnerPropsArguments },\n } = React.useContext(MenuButtonContextProvider);\n const {\n instanceUid,\n globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n const handleRefChange = React.useCallback(\n (node: HTMLDivElement) => {\n if (isRootNode(itemNode)) {\n mainMenuRef.current = node;\n return;\n }\n handleSubmenusRefChange(node, itemNode.dsId);\n },\n [handleSubmenusRefChange, itemNode, mainMenuRef],\n );\n\n const handleAnimationStartTrigger = React.useCallback(() => {\n setDidAnimationEnd(false);\n }, []);\n const handleAnimationEnd = React.useCallback(() => {\n setDidAnimationEnd(true);\n }, []);\n\n return (\n <StyledFloatingWrapper\n innerRef={setFloatingRef}\n floatingStyles={floatingStyles}\n isOpen={isMenuOpen}\n context={floatingContext}\n onAnimationStartTriggered={handleAnimationStartTrigger}\n onAnimationEnd={handleAnimationEnd}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n // Adding a data-testid for legacy e2e tests\n data-testid=\"ds-floating-wrapper-root\"\n >\n <StyledWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} {...xstyledProps}>\n <StyledMenu\n role=\"menu\"\n innerRef={handleRefChange}\n $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {itemNode.children.map((optionNode) => (\n <DSMenuItemRendererFactory\n key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n itemNode={optionNode as DSMenuButtonT.MenuNode}\n ItemRenderer={ItemRenderer}\n // we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n // this solves the circular-ish dependency\n // the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n />\n ))}\n </StyledMenu>\n </StyledWrapper>\n </StyledFloatingWrapper>\n );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4FX;AA5FZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAE3C,OAAOA,YAAW;AAClB,SAA6B,gCAAgC;AAC7D,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAED,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MAEA,eAAY;AAAA,MAEZ,8BAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,yBAAyB;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/DSFlyoutMenu/constants/index.js CHANGED
@@ -7,7 +7,10 @@ const FLYOUT_MENU_SLOTS = {
7
7
  ROOT: "root",
8
8
  LIST_WRAPPER: "list-wrapper"
9
9
  };
10
- const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);
10
+ const FLYOUT_MENU_DATA_TESTID = {
11
+ ...slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),
12
+ FLOATING_WRAPPER: "ds-floating-wrapper-root"
13
+ };
11
14
  export {
12
15
  DSFlyoutMenuName,
13
16
  EXAMPLE_CONSTANTS,
package/dist/esm/parts/DSFlyoutMenu/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/constants/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n FLOATING_WRAPPER: 'floating-wrapper',\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n FLOATING_WRAPPER: 'floating-wrapper',\n ROOT: 'root',\n LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n FLOATING_WRAPPER: 'ds-floating-wrapper-root',\n} as const;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B;AAAA,EACrC,GAAG,wBAAwB,kBAAkB,iBAAiB;AAAA,EAC9D,kBAAkB;AACpB;",
6
6
  "names": []
7
7
  }
package/dist/types/config/useSplitInherithedProps.d.ts CHANGED
@@ -38,6 +38,7 @@ export declare const useSplitInherithedProps: ({ propsWithDefault, focusableNode
38
38
  isSkeleton: boolean;
39
39
  ItemRenderer: DSMenuButtonT.ItemRendererT | undefined;
40
40
  };
41
+ list?: string | undefined | undefined;
41
42
  type?: import("@elliemae/ds-button-v2").DSButtonT.HTMLButtonTypeProp | undefined;
42
43
  label?: string | undefined | undefined;
43
44
  minWidth?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/system").Theme> | undefined;
@@ -52,7 +53,6 @@ export declare const useSplitInherithedProps: ({ propsWithDefault, focusableNode
52
53
  applyAriaDisabled?: boolean | undefined;
53
54
  dsButtonRoot?: object | import("@elliemae/ds-typescript-helpers").TypescriptHelpersT.GenericFunc<unknown, object> | undefined;
54
55
  form?: string | undefined | undefined;
55
- list?: string | undefined | undefined;
56
56
  "aria-activedescendant"?: string | undefined | undefined;
57
57
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
58
58
  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
package/dist/types/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';
2
2
  export { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';
3
3
  export { MENU_BUTTON_SLOTS, DSMenuButtonName, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES, MENU_BUTTON_WITH_PARTS_SLOTS, } from './constants/index.js';
4
+ export { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from './parts/DSOpinionatedButton/constants/index.js';
5
+ export { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './parts/DSFlyoutMenu/constants/index.js';
6
+ export { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS, } from './parts/DSMenuItemRendererFactory/constants/index.js';
4
7
  export { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';
5
8
  export { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';
package/dist/types/parts/DSFlyoutMenu/constants/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const FLYOUT_MENU_SLOTS: {
6
6
  readonly LIST_WRAPPER: "list-wrapper";
7
7
  };
8
8
  export declare const FLYOUT_MENU_DATA_TESTID: {
9
- readonly FLOATING_WRAPPER: "ds-flyoutmenu-floating-wrapper";
9
+ readonly FLOATING_WRAPPER: "ds-floating-wrapper-root";
10
10
  readonly ROOT: "ds-flyoutmenu-root";
11
11
  readonly LIST_WRAPPER: "ds-flyoutmenu-list-wrapper";
12
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-menu-button",
3
- "version": "3.60.0-next.15",
3
+ "version": "3.60.0-next.17",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Menu Button",
6
6
  "files": [
@@ -36,22 +36,22 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-button-v2": "3.60.0-next.15",
40
- "@elliemae/ds-grid": "3.60.0-next.15",
41
- "@elliemae/ds-floating-context": "3.60.0-next.15",
42
- "@elliemae/ds-hooks-on-blur-out": "3.60.0-next.15",
43
- "@elliemae/ds-icons": "3.60.0-next.15",
44
- "@elliemae/ds-system": "3.60.0-next.15",
45
- "@elliemae/ds-props-helpers": "3.60.0-next.15",
46
- "@elliemae/ds-menu-items-commons": "3.60.0-next.15",
47
- "@elliemae/ds-tree-model": "3.60.0-next.15"
39
+ "@elliemae/ds-button-v2": "3.60.0-next.17",
40
+ "@elliemae/ds-hooks-on-blur-out": "3.60.0-next.17",
41
+ "@elliemae/ds-floating-context": "3.60.0-next.17",
42
+ "@elliemae/ds-props-helpers": "3.60.0-next.17",
43
+ "@elliemae/ds-menu-items-commons": "3.60.0-next.17",
44
+ "@elliemae/ds-icons": "3.60.0-next.17",
45
+ "@elliemae/ds-system": "3.60.0-next.17",
46
+ "@elliemae/ds-tree-model": "3.60.0-next.17",
47
+ "@elliemae/ds-grid": "3.60.0-next.17"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@elliemae/pui-theme": "~2.13.0",
51
51
  "jest": "^30.0.0",
52
52
  "styled-components": "~5.3.9",
53
- "@elliemae/ds-monorepo-devops": "3.60.0-next.15",
54
- "@elliemae/ds-typescript-helpers": "3.60.0-next.15"
53
+ "@elliemae/ds-monorepo-devops": "3.60.0-next.17",
54
+ "@elliemae/ds-typescript-helpers": "3.60.0-next.17"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@testing-library/jest-dom": "^6.6.3",