npm - @elliemae/ds-global-header - Versions diffs - 3.60.0-next.2 → 3.60.0-next.21 - Mend

@elliemae/ds-global-header 3.60.0-next.2 → 3.60.0-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/dist/cjs/exported-related/theming.js CHANGED Viewed

@@ -84,7 +84,6 @@ const DSGlobalHeaderSlotsFlattened = {
   MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,
   MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,
   MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,
-  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,
-  MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER
+  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL
 };
 //# sourceMappingURL=theming.js.map

package/dist/cjs/exported-related/theming.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSGlobalHeaderName = 'DSGlobalheader';\n\nexport const DSGlobalHeaderSlots = {\n  CONTAINER: 'root',\n  LOGO: {\n    CONTAINER: 'logo-container',\n  },\n  BREADCRUMB: {\n    CONTAINER: 'breadcrumb-container',\n    PIPE: 'breadcrumb-pipe',\n    CHEVRON: 'breadcrumb-chevron',\n    LIST: 'breadcrumb-list',\n    ITEM: 'breadcrumb-item',\n    ITEM_LINK: 'breadcrumb-item-link',\n    ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'menubar-container',\n    LIST: 'menubar-list',\n    ITEM: 'menubar-item',\n    ITEM_BUTTON: 'menubar-item-button',\n    POPUP_MENU: {\n      LIST: 'menubar-item-popupmenu-list',\n      ITEM: 'menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n      SEPARATOR: 'menubar-item-popupmenu-separator',\n      ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n    },\n    SEARCH_TOGGLE: {\n      CONTAINER: 'menubar-item-searchtoggle-container',\n    },\n  },\n};\n\nexport const DSGlobalHeaderSlotsFlattened = {\n  CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n  LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n  BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n  BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n  BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n  BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n  BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n  BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n  BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n  MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n  MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n  MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n  MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n  MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n  MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW;AAAA,MACX,mBAAmB;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;AAAA,EAC1C,WAAW,oBAAoB;AAAA,EAC/B,gBAAgB,oBAAoB,KAAK;AAAA,EACzC,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,oBAAoB,oBAAoB,WAAW;AAAA,EACnD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,4BAA4B,oBAAoB,WAAW;AAAA,EAC3D,mBAAmB,oBAAoB,QAAQ;AAAA,EAC/C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,qBAAqB,oBAAoB,QAAQ;AAAA,EACjD,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,gCAAgC,oBAAoB,QAAQ,WAAW;AAAA,EACvE,8BAA8B,oBAAoB,QAAQ,WAAW;AAAA,EACrE,sCAAsC,oBAAoB,QAAQ,WAAW;AAAA,EAC7E,iCAAiC,oBAAoB,QAAQ,cAAc;AAC7E;",
+  "sourcesContent": ["export const DSGlobalHeaderName = 'DSGlobalheader';\n\nexport const DSGlobalHeaderSlots = {\n  CONTAINER: 'root',\n  LOGO: {\n    CONTAINER: 'logo-container',\n  },\n  BREADCRUMB: {\n    CONTAINER: 'breadcrumb-container',\n    PIPE: 'breadcrumb-pipe',\n    CHEVRON: 'breadcrumb-chevron',\n    LIST: 'breadcrumb-list',\n    ITEM: 'breadcrumb-item',\n    ITEM_LINK: 'breadcrumb-item-link',\n    ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'menubar-container',\n    LIST: 'menubar-list',\n    ITEM: 'menubar-item',\n    ITEM_BUTTON: 'menubar-item-button',\n    POPUP_MENU: {\n      LIST: 'menubar-item-popupmenu-list',\n      ITEM: 'menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n      SEPARATOR: 'menubar-item-popupmenu-separator',\n      ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n    },\n    SEARCH_TOGGLE: {\n      CONTAINER: 'menubar-item-searchtoggle-container',\n    },\n  },\n};\n\nexport const DSGlobalHeaderSlotsFlattened = {\n  CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n  LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n  BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n  BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n  BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n  BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n  BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n  BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n  BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n  MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n  MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n  MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n  MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n  MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW;AAAA,MACX,mBAAmB;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;AAAA,EAC1C,WAAW,oBAAoB;AAAA,EAC/B,gBAAgB,oBAAoB,KAAK;AAAA,EACzC,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,oBAAoB,oBAAoB,WAAW;AAAA,EACnD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,4BAA4B,oBAAoB,WAAW;AAAA,EAC3D,mBAAmB,oBAAoB,QAAQ;AAAA,EAC/C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,qBAAqB,oBAAoB,QAAQ;AAAA,EACjD,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,gCAAgC,oBAAoB,QAAQ,WAAW;AAAA,EACvE,8BAA8B,oBAAoB,QAAQ,WAAW;AAAA,EACrE,sCAAsC,oBAAoB,QAAQ,WAAW;AAC/E;",
   "names": []
 }

package/dist/cjs/hooks/useOnClickOutside.js ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useOnClickOutside_exports = {};
+__export(useOnClickOutside_exports, {
+  useOnClickOutside: () => useOnClickOutside
+});
+module.exports = __toCommonJS(useOnClickOutside_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+function useOnClickOutside(ref, cb) {
+  const cbRef = import_react.default.useRef(cb);
+  (0, import_react.useEffect)(() => {
+    cbRef.current = cb;
+  }, [cb]);
+  (0, import_react.useEffect)(() => {
+    if (!ref) {
+      return () => {
+      };
+    }
+    const listener = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (ref.contains(target)) return;
+      cbRef.current(event);
+    };
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+    return () => {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    };
+  }, [ref]);
+}
+//# sourceMappingURL=useOnClickOutside.js.map

package/dist/cjs/hooks/useOnClickOutside.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useOnClickOutside.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void {\n  const cbRef = React.useRef(cb);\n\n  useEffect(() => {\n    cbRef.current = cb;\n  }, [cb]);\n\n  useEffect(() => {\n    if (!ref) {\n      return () => {};\n    }\n\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n\n      if (ref.contains(target)) return;\n\n      cbRef.current(event);\n    };\n\n    document.addEventListener('mousedown', listener, true);\n    document.addEventListener('touchstart', listener, true);\n\n    return () => {\n      document.removeEventListener('mousedown', listener, true);\n      document.removeEventListener('touchstart', listener, true);\n    };\n  }, [ref]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAE1B,SAAS,kBAAkC,KAAe,IAAkC;AACjG,QAAM,QAAQ,aAAAA,QAAM,OAAO,EAAE;AAE7B,8BAAU,MAAM;AACd,UAAM,UAAU;AAAA,EAClB,GAAG,CAAC,EAAE,CAAC;AAEP,8BAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AAEA,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AAEb,UAAI,IAAI,SAAS,MAAM,EAAG;AAE1B,YAAM,QAAQ,KAAK;AAAA,IACrB;AAEA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AAEtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js CHANGED Viewed

@@ -75,7 +75,8 @@ const GlobalHeaderBreadcrumb = () => {
               onKeyDown: onClick && handleOnKeyDown(onClick),
               ...(0, import_ds_props_helpers.getGlobalAttributes)(rest),
               onClick,
-              fullBreadcrumbListLength: breadcrumb.length
+              fullBreadcrumbListLength: breadcrumb.length,
+              ownerProps
             },
             `${instanceUID}-breadcrumb-item-${label}`
           );

package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } =\n    useGlobalHeaderBreadcrumb();\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n  return (\n    <StyledBreadcrumbContainer\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumb\"\n      cols={['auto', 'auto', '1fr']}\n      forwardedAs=\"nav\"\n      data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n      {...ownerProps}\n    >\n      <StyledPipe\n        showIconOnly={smalScreen}\n        aria-hidden\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE}\n        {...ownerProps}\n      />\n      <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST} {...ownerProps}>\n        {CustomNavigation !== undefined ? (\n          <CustomNavigation />\n        ) : (\n          breadcrumb?.map((item) => {\n            const { onClick, isSelected, label, hasNext, ...rest } = item;\n            return (\n              <PureBreadcrumb\n                label={label}\n                hasNext={hasNext}\n                isSelected={isSelected}\n                key={`${instanceUID}-breadcrumb-item-${label}`}\n                onKeyDown={onClick && handleOnKeyDown(onClick)}\n                {...getGlobalAttributes(rest)}\n                onClick={onClick}\n                fullBreadcrumbListLength={breadcrumb.length}\n              />\n            );\n          })\n        )}\n      </StyledBreadcrumbList>\n      <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n    </StyledBreadcrumbContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAfJ,uBAAiC;AACjC,8BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,aAAa,WAAW,QAC1G,4DAA0B;AAC5B,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,iDAAyB,WAAW;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAc;AAAA,YACd,eAAW;AAAA,YACX,eAAa,iDAAyB,WAAW;AAAA,YAChD,GAAG;AAAA;AAAA,QACN;AAAA,QACA,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MAAO,GAAG,YAC9E,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,OAAG,6CAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,0BAA0B,WAAW;AAAA;AAAA,YAJhC,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } =\n    useGlobalHeaderBreadcrumb();\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n  return (\n    <StyledBreadcrumbContainer\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumb\"\n      cols={['auto', 'auto', '1fr']}\n      forwardedAs=\"nav\"\n      data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n      {...ownerProps}\n    >\n      <StyledPipe\n        showIconOnly={smalScreen}\n        aria-hidden\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE}\n        {...ownerProps}\n      />\n      <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST} {...ownerProps}>\n        {CustomNavigation !== undefined ? (\n          <CustomNavigation />\n        ) : (\n          breadcrumb?.map((item) => {\n            const { onClick, isSelected, label, hasNext, ...rest } = item;\n            return (\n              <PureBreadcrumb\n                label={label}\n                hasNext={hasNext}\n                isSelected={isSelected}\n                key={`${instanceUID}-breadcrumb-item-${label}`}\n                onKeyDown={onClick && handleOnKeyDown(onClick)}\n                {...getGlobalAttributes(rest)}\n                onClick={onClick}\n                fullBreadcrumbListLength={breadcrumb.length}\n                ownerProps={ownerProps}\n              />\n            );\n          })\n        )}\n      </StyledBreadcrumbList>\n      <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n    </StyledBreadcrumbContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAfJ,uBAAiC;AACjC,8BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,aAAa,WAAW,QAC1G,4DAA0B;AAC5B,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,iDAAyB,WAAW;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAc;AAAA,YACd,eAAW;AAAA,YACX,eAAa,iDAAyB,WAAW;AAAA,YAChD,GAAG;AAAA;AAAA,QACN;AAAA,QACA,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MAAO,GAAG,YAC9E,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,OAAG,6CAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,0BAA0B,WAAW;AAAA,cACrC;AAAA;AAAA,YALK,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAM9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Breadcrumb/PureBreadcrumb.js CHANGED Viewed

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_exported_related = require("../../exported-related/index.js");
 var import_styles = require("./styles.js");
 const PureBreadcrumb = import_react.default.memo(
-  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBreadcrumbItem, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM, children: [
+  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ownerProps, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBreadcrumbItem, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM, ...ownerProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledLink,
       {
@@ -46,18 +46,20 @@ const PureBreadcrumb = import_react.default.memo(
         "aria-current": isSelected,
         tabIndex: 0,
         ...rest,
+        ...ownerProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styles.StyledLabel,
           {
             isSelected: !!isSelected,
             isOnlyItem: fullBreadcrumbListLength === 1,
             "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL,
+            ...ownerProps,
             children: label
           }
         )
       }
     ),
-    hasNext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChevron, { size: "m", "aria-hidden": true })
+    hasNext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChevron, { size: "m", "aria-hidden": true, ...ownerProps })
   ] })
 );
 //# sourceMappingURL=PureBreadcrumb.js.map

package/dist/cjs/parts/Breadcrumb/PureBreadcrumb.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/PureBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\nimport { StyledBreadcrumbItem, StyledChevron, StyledLabel, StyledLink } from './styles.js';\n\ntype PureBreadcrumbProps = DSGlobalHeaderT.BreadcrumbItem & { fullBreadcrumbListLength: number };\n\nexport const PureBreadcrumb = React.memo(\n  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ...rest }: PureBreadcrumbProps) => (\n    <StyledBreadcrumbItem data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM}>\n      <StyledLink\n        onClick={onClick}\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK}\n        aria-current={isSelected}\n        tabIndex={0}\n        {...rest}\n      >\n        <StyledLabel\n          isSelected={!!isSelected}\n          isOnlyItem={fullBreadcrumbListLength === 1}\n          data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL}\n        >\n          {label}\n        </StyledLabel>\n      </StyledLink>\n      {hasNext && <StyledChevron size=\"m\" aria-hidden />}\n    </StyledBreadcrumbItem>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSnB;AATJ,mBAAkB;AAClB,8BAAyC;AAEzC,oBAA6E;AAItE,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,EAAE,SAAS,YAAY,0BAA0B,OAAO,SAAS,GAAG,KAAK,MACxE,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,iDAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,6BAA6B;AAAA,YACzC,eAAa,iDAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\nimport { StyledBreadcrumbItem, StyledChevron, StyledLabel, StyledLink } from './styles.js';\n\ntype PureBreadcrumbProps = DSGlobalHeaderT.BreadcrumbItem & {\n  fullBreadcrumbListLength: number;\n  ownerProps?: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    getOwnerPropsArguments: () => object;\n  };\n};\n\nexport const PureBreadcrumb = React.memo(\n  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ownerProps, ...rest }: PureBreadcrumbProps) => (\n    <StyledBreadcrumbItem data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM} {...ownerProps}>\n      <StyledLink\n        onClick={onClick}\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK}\n        aria-current={isSelected}\n        tabIndex={0}\n        {...rest}\n        {...ownerProps}\n      >\n        <StyledLabel\n          isSelected={!!isSelected}\n          isOnlyItem={fullBreadcrumbListLength === 1}\n          data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL}\n          {...ownerProps}\n        >\n          {label}\n        </StyledLabel>\n      </StyledLink>\n      {hasNext && <StyledChevron size=\"m\" aria-hidden {...ownerProps} />}\n    </StyledBreadcrumbItem>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAfJ,mBAAkB;AAClB,8BAAyC;AAEzC,oBAA6E;AAUtE,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,EAAE,SAAS,YAAY,0BAA0B,OAAO,SAAS,YAAY,GAAG,KAAK,MACpF,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MAAO,GAAG,YAC/E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,iDAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,6BAA6B;AAAA,YACzC,eAAa,iDAAyB,WAAW;AAAA,YAChD,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAE,GAAG,YAAY;AAAA,KAClE;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js CHANGED Viewed

@@ -87,7 +87,8 @@ const GlobalHeaderToolbar = () => {
                     {
                       title: label2,
                       setRef: setRefIndex,
-                      ...otherProps2
+                      ...otherProps2,
+                      ownerProps
                     }
                   )
                 },
@@ -149,6 +150,7 @@ const GlobalHeaderToolbar = () => {
                     innerRef: setRefIndex,
                     ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
                     type: "button",
+                    ...ownerProps,
                     children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
                   }
                 )

package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    ownerProps,\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      {...ownerProps}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n        {...ownerProps}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <SearchToggle label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n              {...ownerProps}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDP;AArDhB,8BAAoC;AACpC,mBAA2B;AAC3B,uBAA8B;AAC9B,mCAAsC;AACtC,8BAAyC;AACzC,oBAA6B;AAC7B,yBAAmD;AACnD,IAAAA,iBAAsE;AACtE,oCAAuC;AAEhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,sDAAuB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,cAAW;AAAA,MACX,UAAU,eAAe,+BAAc;AAAA,MACtC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UACP,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,QAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW;AAAA,UACX,UAAU;AAAA,UACV,eAAa,iDAAyB,QAAQ;AAAA,UAC7C,GAAG;AAAA,UAEH,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,kBAAM,EAAE,KAAK,IAAI;AACjB,kBAAM,cAAc,OAAO,KAAK;AAEhC,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAC,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAOD;AAAA,sBACP,QAAQ;AAAA,sBACP,GAAGC;AAAA;AAAA,kBACN;AAAA;AAAA,gBARK,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAS9C;AAAA,YAEJ;AACA,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,sDAAC,gCAAU,OAAOD,QAAO,QAAQ,aAAc,GAAGC,aAAY;AAAA;AAAA,gBAJzD,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAK9C;AAAA,YAEJ;AACA,gBAAI,SAAS,oBAAoB;AAC/B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,sDAAC,mCAAa,OAAOD,QAAO,QAAQ,aAAc,GAAGC,aAAY;AAAA;AAAA,gBAJ5D,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAK9C;AAAA,YAEJ;AACA,gBAAI,SAAS,UAAU;AACrB,oBAAM,EAAE,OAAAA,QAAO,gBAAgB,IAAI;AACnC,kBAAI,CAAC,gBAAiB,QAAO;AAC7B,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEH,6BAAmB,4CAAC,mBAAgB,MAAY,QAAQ,aAAa;AAAA;AAAA,gBAJjE,GAAG,WAAW,oBAAoBA,MAAK;AAAA,cAK9C;AAAA,YAEJ;AAEA,kBAAM,EAAE,OAAO,MAAM,GAAG,WAAW,IAAI;AACvC,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAC7C,GAAG;AAAA,gBAEJ;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP,eAAa,iDAAyB,QAAQ;AAAA,oBAC9C,UAAU;AAAA,oBACT,OAAG,6CAAoB,UAAU;AAAA,oBAClC,MAAK;AAAA,oBAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,gBAC1B;AAAA;AAAA,cAZK,GAAG,WAAW,oBAAoB,KAAK;AAAA,YAa9C;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    ownerProps,\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      {...ownerProps}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n        {...ownerProps}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  ownerProps={ownerProps}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                <SearchToggle label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                {...ownerProps}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n              {...ownerProps}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n                {...ownerProps}\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_styles", "label", "otherProps"]
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js CHANGED Viewed

@@ -33,21 +33,27 @@ __export(PopupMenu_exports, {
 module.exports = __toCommonJS(PopupMenu_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
 var import_exported_related = require("../../../../exported-related/index.js");
 var import_styles = require("../../../styles.js");
 var import_PopupMenuContent = require("./menuContent/PopupMenuContent.js");
+var import_useOnClickOutside = require("../../../../hooks/useOnClickOutside.js");
 const PopupMenu = ({
   Icon,
   onClick,
   setRef,
   componentProps,
+  ownerProps,
   ...otherProps
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const [buttonRef, setButtonRef] = (0, import_react.useState)(null);
+  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: componentProps.isOpen,
+    placement: "bottom",
+    withoutAnimation: true,
+    withoutPortal: true
+  });
   const {
     onClickOutside = () => null,
     onKeyPress,
@@ -56,39 +62,52 @@ const PopupMenu = ({
     options,
     closeOnClick
   } = componentProps;
+  const boundaryRef = (0, import_react.useRef)(null);
   const handleOnKeyDown = (0, import_react.useCallback)(
     (e) => {
       if (e.code === "ArrowDown") {
-        setIsOpen(true);
+        showTooltip();
       }
       if (onKeyPress) onKeyPress(e);
     },
-    [onKeyPress]
+    [onKeyPress, showTooltip]
   );
   const handleOnClose = (0, import_react.useCallback)(() => {
     if (userIsOpen === void 0) {
-      setIsOpen(false);
+      hideTooltip();
     }
-    buttonRef?.focus();
-  }, [buttonRef, userIsOpen]);
+    refs.reference?.focus();
+  }, [hideTooltip, refs.reference, userIsOpen]);
   const handleTriggerOnClick = (0, import_react.useCallback)(
     (e) => {
-      if (userIsOpen === void 0) setIsOpen(true);
+      if (userIsOpen === void 0) showTooltip();
       if (onClick) onClick(e);
     },
-    [onClick, userIsOpen]
+    [onClick, userIsOpen, showTooltip]
   );
   const handleItemClick = (0, import_react.useCallback)(() => {
     if (closeOnClick && userIsOpen === void 0) handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
+  const handleOutside = (0, import_react.useCallback)(
+    (event) => {
+      onClickOutside(event);
+      const actuallyOpen = userIsOpen ?? isOpen;
+      if (!actuallyOpen) return;
+      if (userIsOpen === void 0) {
+        handleOnClose();
+      }
+    },
+    [handleOnClose, isOpen, onClickOutside, userIsOpen]
+  );
+  (0, import_useOnClickOutside.useOnClickOutside)(userIsOpen ?? isOpen ? boundaryRef.current : null, handleOutside);
   const handleRefs = (0, import_react.useCallback)(
     (ref) => {
       setRef(ref);
-      setButtonRef(ref);
+      refs.setReference(ref);
     },
-    [setRef]
+    [refs, setRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: boundaryRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledButton,
       {
@@ -100,27 +119,31 @@ const PopupMenu = ({
         "aria-expanded": userIsOpen ?? isOpen,
         ...(0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps),
         type: "button",
+        ...ownerProps,
         children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
       }
     ),
-    buttonRef ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ds_popperjs.DSPopperJS,
+    refs.reference ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_floating_context.FloatingWrapper,
       {
-        referenceElement: buttonRef,
-        showPopover: userIsOpen ?? isOpen,
-        closeContextMenu: handleOnClose,
-        onClickOutside,
-        withoutPortal: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_PopupMenuContent.PopupMenuContent,
-          {
-            options,
-            onItemClick: handleItemClick,
-            onClose: handleOnClose,
-            setIsOpen,
-            popupOnKeyPress
-          }
-        )
+        innerRef: refs.setFloating,
+        isOpen: userIsOpen ?? isOpen,
+        floatingStyles,
+        context,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_PopupMenuContent.PopupMenuContent,
+            {
+              options,
+              onItemClick: handleItemClick,
+              onClose: handleOnClose,
+              setIsOpen: hideTooltip,
+              popupOnKeyPress,
+              ownerProps
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+        ]
       }
     ) : null
   ] });

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\n\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderT.PopupProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        setIsOpen(true);\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      setIsOpen(false);\n    }\n    buttonRef?.focus();\n  }, [buttonRef, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const handleRefs = useCallback(\n    (ref: HTMLButtonElement) => {\n      setRef(ref);\n      setButtonRef(ref);\n    },\n    [setRef],\n  );\n\n  return (\n    <>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        innerRef={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        {...useGetGlobalAttributes(otherProps)}\n        type=\"button\"\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n      {buttonRef ? (\n        <DSPopperJS\n          referenceElement={buttonRef}\n          showPopover={userIsOpen ?? isOpen}\n          closeContextMenu={handleOnClose}\n          onClickOutside={onClickOutside}\n          withoutPortal\n        >\n          <PopupMenuContent\n            options={options}\n            onItemClick={handleItemClick}\n            onClose={handleOnClose}\n            setIsOpen={setIsOpen}\n            popupOnKeyPress={popupOnKeyPress}\n          />\n        </DSPopperJS>\n      ) : null}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEnB;AAjEJ,yBAA2B;AAC3B,8BAAuC;AACvC,mBAA6C;AAC7C,8BAAyC;AAEzC,oBAA6B;AAC7B,8BAAiC;AAE1B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+C;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI,WAAY,YAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB,0BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe,OAAW,eAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,iBAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,iDAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC5B,OAAG,gDAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
+  "sourcesContent": ["import { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useRef } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { useOnClickOutside } from '../../../../hooks/useOnClickOutside.js';\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  setRef,\n  componentProps,\n  ownerProps,\n  ...otherProps\n}: DSGlobalHeaderT.PopupProps): JSX.Element => {\n  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = useFloatingContext({\n    externallyControlledIsOpen: componentProps.isOpen,\n    placement: 'bottom',\n    withoutAnimation: true,\n    withoutPortal: true,\n  });\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  /**\n   * We want \"outside\" to mean: outside BOTH the trigger and the floating panel.\n   * So wrap them in a single DOM node and use that as the boundary.\n   */\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        showTooltip();\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress, showTooltip],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      hideTooltip();\n    }\n    (refs.reference as HTMLElement)?.focus();\n  }, [hideTooltip, refs.reference, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) showTooltip();\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen, showTooltip],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  // Close on outside click, but:\n  // - always notify consumer via onClickOutside\n  // - only actually close when uncontrolled (userIsOpen === undefined)\n  // - only run while open\n  const handleOutside = useCallback(\n    (event: Event) => {\n      onClickOutside(event as MouseEvent | TouchEvent);\n\n      const actuallyOpen = userIsOpen ?? isOpen;\n      if (!actuallyOpen) return;\n\n      if (userIsOpen === undefined) {\n        handleOnClose();\n      }\n    },\n    [handleOnClose, isOpen, onClickOutside, userIsOpen],\n  );\n\n  // If you only want to listen when open, pass `null` when closed\n  useOnClickOutside((userIsOpen ?? isOpen) ? boundaryRef.current : null, handleOutside);\n\n  const handleRefs = useCallback(\n    (ref: HTMLButtonElement) => {\n      setRef(ref);\n      refs.setReference(ref);\n    },\n    [refs, setRef],\n  );\n  return (\n    <div ref={boundaryRef}>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        innerRef={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        {...useGetGlobalAttributes(otherProps)}\n        type=\"button\"\n        {...ownerProps}\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n\n      {refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={userIsOpen ?? isOpen}\n          floatingStyles={floatingStyles}\n          context={context}\n        >\n          <PopupMenuContent\n            options={options}\n            onItemClick={handleItemClick}\n            onClose={handleOnClose}\n            setIsOpen={hideTooltip}\n            popupOnKeyPress={popupOnKeyPress}\n            ownerProps={ownerProps}\n          />\n          <PopoverArrow {...arrowStyles} />\n        </FloatingWrapper>\n      ) : null}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js CHANGED Viewed

@@ -45,80 +45,102 @@ const PopupMenuContent = import_react.default.memo(
     onItemClick,
     onClose,
     popupOnKeyPress,
-    setIsOpen
+    setIsOpen,
+    ownerProps
   }) => {
     const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
     const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { innerRef: menuRef, role: "menu", "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
-      const { type, Icon, label = "", onClick, Content, ...rest } = option;
-      const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
-      const handleClick = (e) => {
-        onItemClick();
-        if (onClick) onClick(e);
-      };
-      const handleKeyDown = (e) => {
-        keyboardNavigation(e);
-        if (e.code === "Escape") onClose();
-        if (popupOnKeyPress) popupOnKeyPress(e);
-      };
-      switch (type) {
-        case "separator":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledSeparator,
-            {
-              role: "none",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR,
-              ...globalAttrs
-            },
-            `${instanceUID}-separator-${label}`
-          );
-        case "custom":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledItemContainer,
-            {
-              role: "menuitem",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_styles.StyledItemButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles.StyledList,
+      {
+        innerRef: menuRef,
+        role: "menu",
+        "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST,
+        ...ownerProps,
+        children: options.map((option) => {
+          const { type, Icon, label = "", onClick, Content, ...rest } = option;
+          const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
+          const handleClick = (e) => {
+            onItemClick();
+            if (onClick) onClick(e);
+          };
+          const handleKeyDown = (e) => {
+            keyboardNavigation(e);
+            if (e.code === "Escape") onClose();
+            if (popupOnKeyPress) popupOnKeyPress(e);
+          };
+          switch (type) {
+            case "separator":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledSeparator,
                 {
-                  innerRef: setRef,
-                  onClick: handleClick,
-                  onKeyDown: handleKeyDown,
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
+                  role: "none",
+                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR,
                   ...globalAttrs,
-                  type: "button",
-                  children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
-                }
-              )
-            },
-            `${instanceUID}-popup-${label}`
-          );
-        default:
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledItemContainer,
-            {
-              role: "menuitem",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_styles.StyledItemButton,
+                  ...ownerProps
+                },
+                `${instanceUID}-separator-${label}`
+              );
+            case "custom":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledItemContainer,
                 {
-                  innerRef: setRef,
-                  onClick: handleClick,
-                  onKeyDown: handleKeyDown,
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
-                  ...globalAttrs,
-                  type: "button",
-                  children: [
-                    Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
-                    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL, children: label })
-                  ]
-                }
-              )
-            },
-            `${instanceUID}-popup-${label}`
-          );
+                  role: "menuitem",
+                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styles.StyledItemButton,
+                    {
+                      innerRef: setRef,
+                      onClick: handleClick,
+                      onKeyDown: handleKeyDown,
+                      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
+                      ...globalAttrs,
+                      type: "button",
+                      ...ownerProps,
+                      children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
+                    }
+                  )
+                },
+                `${instanceUID}-popup-${label}`
+              );
+            default:
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledItemContainer,
+                {
+                  role: "menuitem",
+                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_styles.StyledItemButton,
+                    {
+                      innerRef: setRef,
+                      onClick: handleClick,
+                      onKeyDown: handleKeyDown,
+                      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
+                      ...globalAttrs,
+                      type: "button",
+                      ...ownerProps,
+                      children: [
+                        Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
+                        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_styles.StyledLabel,
+                          {
+                            "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,
+                            ...ownerProps,
+                            children: label
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                `${instanceUID}-popup-${label}`
+              );
+          }
+        })
       }
-    }) });
+    );
   }
 );
 //# sourceMappingURL=PopupMenuContent.js.map