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

@elliemae/ds-global-header 3.60.0-next.9 → 3.61.0-rc.2

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 (137) hide show

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

@@ -41,14 +41,14 @@ var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_theming = require("../../exported-related/theming.js");
+var import_constants = require("../../constants/index.js");
 const StyledBreadcrumbContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.CONTAINER
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_CONTAINER
 })``;
 const StyledBreadcrumbList = (0, import_ds_system.styled)("ul", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.LIST
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_LIST
 })`
   display: grid;
   grid-auto-flow: column;
@@ -59,28 +59,28 @@ const StyledBreadcrumbList = (0, import_ds_system.styled)("ul", {
   height: 100%;
 `;
 const StyledPipe = (0, import_ds_system.styled)("span", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.PIPE
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_PIPE
 })`
   margin: 0 7px 0 0;
   border-left: ${({ theme, showIconOnly }) => showIconOnly ? "none" : `1px solid ${theme.colors.neutral["000"]}`};
   height: 20px;
 `;
 const StyledChevron = (0, import_ds_system.styled)(import_ds_icons.ChevronSmallRight, {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.CHEVRON
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_CHEVRON
 })`
   fill: ${({ theme }) => theme.colors.neutral["000"]};
 `;
 const StyledBreadcrumbItem = (0, import_ds_system.styled)("li", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.ITEM
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM
 })`
   display: flex;
   align-items: center;
   height: 3.077rem;
 `;
-const StyledLink = (0, import_ds_system.styled)("a", { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK })`
+const StyledLink = (0, import_ds_system.styled)("a", { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM_LINK })`
   width: fit-content;
   height: 3.077rem;
   display: grid;
@@ -107,8 +107,8 @@ const StyledLink = (0, import_ds_system.styled)("a", { name: import_theming.DSGl
   }
 `;
 const StyledLabel = (0, import_ds_system.styled)("span", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM_LINK_LABEL
 })`
   color: ${({ theme }) => theme.colors.neutral["000"]};
   ${({ theme, isSelected }) => `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral["000"] : "transparent"}`};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\ninterface PipeT {\n  showIconOnly: boolean;\n}\n\ninterface ChevronT {\n  size: string;\n}\n\ninterface LabelT {\n  isSelected: boolean;\n  isOnlyItem: boolean;\n}\n\nexport const StyledBreadcrumbContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n})``;\n\nexport const StyledBreadcrumbList = styled('ul', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n})`\n  display: grid;\n  grid-auto-flow: column;\n  min-width: fit-content;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n`;\n\nexport const StyledPipe = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n})<PipeT>`\n  margin: 0 7px 0 0;\n  border-left: ${({ theme, showIconOnly }) => (showIconOnly ? 'none' : `1px solid ${theme.colors.neutral['000']}`)};\n  height: 20px;\n`;\n\nexport const StyledChevron = styled(ChevronSmallRight, {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n})<ChevronT>`\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledBreadcrumbItem = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n})`\n  display: flex;\n  align-items: center;\n  height: 3.077rem;\n`;\n\nexport const StyledLink = styled('a', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK })`\n  width: fit-content;\n  height: 3.077rem;\n  display: grid;\n  place-items: center;\n  margin: 0;\n  padding: 0;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: -5px;\n      width: calc(100% + 10px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n})<LabelT>`\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  ${({ theme, isSelected }) =>\n    `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`};\n  font-size: 1.231rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n  }\n  display: block;\n  line-height: 1;\n  text-transform: uppercase;\n  border-bottom: ${({ theme, isSelected, isOnlyItem }) =>\n    `2px solid ${isSelected && !isOnlyItem ? theme.colors.neutral['000'] : 'transparent'}`};\n  margin: 3px 5px 0 5px;\n  :hover {\n    ${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,sBAAkC;AAClC,qBAAwD;AAejD,MAAM,gCAA4B,yBAAO,qBAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAEM,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM,MAAM,iBAAa,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,OAAO,aAAa,MAAO,eAAe,SAAS,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAG;AAAA;AAAA;AAI3G,MAAM,oBAAgB,yBAAO,mCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,UACS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG7C,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iBAAa,yBAAO,KAAK,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAqBxF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACjD,CAAC,EAAE,OAAO,WAAW,MACrB,+BAA+B,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,aAAa,EAAE;AAAA;AAAA,uBAEtE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,EAAE,OAAO,YAAY,WAAW,MAChD,aAAa,cAAc,CAAC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,aAAa,EAAE;AAAA;AAAA;AAAA,MAGpF,CAAC,EAAE,MAAM,MAAM,8BAA8B,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAE;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../constants/index.js';\n\ninterface PipeT {\n  showIconOnly: boolean;\n}\n\ninterface ChevronT {\n  size: string;\n}\n\ninterface LabelT {\n  isSelected: boolean;\n  isOnlyItem: boolean;\n}\n\nexport const StyledBreadcrumbContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_CONTAINER,\n})``;\n\nexport const StyledBreadcrumbList = styled('ul', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_LIST,\n})`\n  display: grid;\n  grid-auto-flow: column;\n  min-width: fit-content;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n`;\n\nexport const StyledPipe = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_PIPE,\n})<PipeT>`\n  margin: 0 7px 0 0;\n  border-left: ${({ theme, showIconOnly }) => (showIconOnly ? 'none' : `1px solid ${theme.colors.neutral['000']}`)};\n  height: 20px;\n`;\n\nexport const StyledChevron = styled(ChevronSmallRight, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_CHEVRON,\n})<ChevronT>`\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledBreadcrumbItem = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM,\n})`\n  display: flex;\n  align-items: center;\n  height: 3.077rem;\n`;\n\nexport const StyledLink = styled('a', { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM_LINK })`\n  width: fit-content;\n  height: 3.077rem;\n  display: grid;\n  place-items: center;\n  margin: 0;\n  padding: 0;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: -5px;\n      width: calc(100% + 10px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.BREADCRUMB_ITEM_LINK_LABEL,\n})<LabelT>`\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  ${({ theme, isSelected }) =>\n    `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`};\n  font-size: 1.231rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n  }\n  display: block;\n  line-height: 1;\n  text-transform: uppercase;\n  border-bottom: ${({ theme, isSelected, isOnlyItem }) =>\n    `2px solid ${isSelected && !isOnlyItem ? theme.colors.neutral['000'] : 'transparent'}`};\n  margin: 3px 5px 0 5px;\n  :hover {\n    ${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,sBAAkC;AAClC,uBAAwD;AAejD,MAAM,gCAA4B,yBAAO,qBAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAEM,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM,MAAM,iBAAa,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,OAAO,aAAa,MAAO,eAAe,SAAS,aAAa,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAG;AAAA;AAAA;AAI3G,MAAM,oBAAgB,yBAAO,mCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,UACS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG7C,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iBAAa,yBAAO,KAAK,EAAE,MAAM,qCAAoB,MAAM,qCAAoB,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAqBxF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACjD,CAAC,EAAE,OAAO,WAAW,MACrB,+BAA+B,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,aAAa,EAAE;AAAA;AAAA,uBAEtE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,EAAE,OAAO,YAAY,WAAW,MAChD,aAAa,cAAc,CAAC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,aAAa,EAAE;AAAA;AAAA;AAAA,MAGpF,CAAC,EAAE,MAAM,MAAM,8BAA8B,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAE;AAAA;AAAA;",
   "names": []
 }

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

@@ -33,7 +33,7 @@ __export(useGlobalHeaderBreadcrumb_exports, {
 module.exports = __toCommonJS(useGlobalHeaderBreadcrumb_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_constants = require("../../config/constants.js");
+var import_constants = require("../../constants/index.js");
 var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
 const useGlobalHeaderBreadcrumb = () => {
   const {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (\n    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void,\n  ) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n  ownerProps: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    getOwnerPropsArguments: () => object;\n  };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n  const {\n    props: { breadcrumb, CustomNavigation },\n    ownerProps,\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const breakpointRef = useRef<number | null>(null);\n  const flexRegionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (\n        (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n        fontDetector === FONT_DETECTOR.LARGE ||\n        fontDetector === FONT_DETECTOR.MEDIUM\n      ) {\n        setShowIconOnly(true);\n        breakpointRef.current = window.innerWidth;\n      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n        setShowIconOnly(false);\n        breakpointRef.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n  const handleOnKeyDown = useCallback(\n    (onClick: (event: React.MouseEvent | React.KeyboardEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick(e);\n      }\n    },\n    [],\n  );\n\n  return {\n    breadcrumb,\n    CustomNavigation,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n    ownerProps,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport { FONT_DETECTOR } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (\n    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void,\n  ) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n  ownerProps: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    getOwnerPropsArguments: () => object;\n  };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n  const {\n    props: { breadcrumb, CustomNavigation },\n    ownerProps,\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const breakpointRef = useRef<number | null>(null);\n  const flexRegionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (\n        (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n        fontDetector === FONT_DETECTOR.LARGE ||\n        fontDetector === FONT_DETECTOR.MEDIUM\n      ) {\n        setShowIconOnly(true);\n        breakpointRef.current = window.innerWidth;\n      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n        setShowIconOnly(false);\n        breakpointRef.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n  const handleOnKeyDown = useCallback(\n    (onClick: (event: React.MouseEvent | React.KeyboardEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick(e);\n      }\n    },\n    [],\n  );\n\n  return {\n    breadcrumb,\n    CustomNavigation,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n    ownerProps,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2D;AAC3D,uBAA8B;AAC9B,mCAAsC;AAkB/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,+BAAc,SAC/B,iBAAiB,+BAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,sBAAkB;AAAA,IACtB,CAAC,YAAqE,CAAC,MAA2B;AAChG,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/Logo/GlobalHeaderLogo.js CHANGED Viewed

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
 var import_styles = require("./styles.js");
-var import_exported_related = require("../../exported-related/index.js");
+var import_constants = require("../../constants/index.js");
 const GlobalHeaderLogo = () => {
   const {
     props: { Logo, LogoWithBrand },
@@ -53,7 +53,7 @@ const GlobalHeaderLogo = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.StyledLogoContainer,
     {
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.LOGO.CONTAINER,
+      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.LOGO_CONTAINER,
       alignItems: "center",
       pr: smalScreen ? "0px" : "36px",
       cols: smalScreen ? ["auto"] : ["auto", "1fr"],

package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Logo/GlobalHeaderLogo.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n  const {\n    props: { Logo, LogoWithBrand },\n    showIconOnly,\n    ownerProps,\n  } = useContext(DSGlobalHeaderContext);\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = React.useMemo(() => {\n    if (!layoutMode) return showIconOnly;\n    if (layoutMode === 'xs' || layoutMode === 's') return true;\n    return false;\n  }, [layoutMode, showIconOnly]);\n\n  return (\n    <StyledLogoContainer\n      data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n      alignItems=\"center\"\n      pr={smalScreen ? '0px' : '36px'}\n      cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n      {...ownerProps}\n    >\n      {Logo && smalScreen && <Logo />}\n      {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n    </StyledLogoContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAkC;AAClC,uBAAiC;AACjC,mCAAsC;AACtC,oBAAoC;AACpC,8BAAyC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AACpC,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBAAQ,cAAc,4CAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,4CAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n  const {\n    props: { Logo, LogoWithBrand },\n    showIconOnly,\n    ownerProps,\n  } = useContext(DSGlobalHeaderContext);\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = React.useMemo(() => {\n    if (!layoutMode) return showIconOnly;\n    if (layoutMode === 'xs' || layoutMode === 's') return true;\n    return false;\n  }, [layoutMode, showIconOnly]);\n\n  return (\n    <StyledLogoContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.LOGO_CONTAINER}\n      alignItems=\"center\"\n      pr={smalScreen ? '0px' : '36px'}\n      cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n      {...ownerProps}\n    >\n      {Logo && smalScreen && <Logo />}\n      {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n    </StyledLogoContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAkC;AAClC,uBAAiC;AACjC,mCAAsC;AACtC,oBAAoC;AACpC,uBAA0C;AAEnC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AACpC,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,2CAA0B;AAAA,MACvC,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBAAQ,cAAc,4CAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,4CAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/Logo/styles.js CHANGED Viewed

@@ -34,10 +34,10 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_theming = require("../../exported-related/theming.js");
+var import_constants = require("../../constants/index.js");
 const StyledLogoContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.LOGO.CONTAINER
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.LOGO_CONTAINER
 })`
   min-height: 40px;
 `;

package/dist/cjs/parts/Logo/styles.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Logo/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.LOGO.CONTAINER,\n})`\n  min-height: 40px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mCAAoB,KAAK;AACjC,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../constants/index.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.LOGO_CONTAINER,\n})`\n  min-height: 40px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAwD;AAEjD,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

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

@@ -35,9 +35,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
-var import_constants = require("../../config/constants.js");
+var import_constants = require("../../constants/index.js");
 var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
-var import_exported_related = require("../../exported-related/index.js");
 var import_styles = require("../styles.js");
 var import_outOfTheBox = require("./outOfTheBox/index.js");
 var import_styles2 = require("./styles.js");
@@ -54,7 +53,7 @@ const GlobalHeaderToolbar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles2.StyledMenubarContainer,
     {
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER,
+      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER,
       "aria-label": "menubar",
       withSpan: fontDetector > import_constants.FONT_DETECTOR.SMALL,
       ...ownerProps,
@@ -69,7 +68,7 @@ const GlobalHeaderToolbar = () => {
           role: "menubar",
           onKeyDown: keyboardNavigation,
           innerRef: listRef,
-          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
+          "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST,
           ...ownerProps,
           children: toolbar.map((item, index) => {
             const { type } = item;
@@ -80,14 +79,15 @@ const GlobalHeaderToolbar = () => {
                 import_styles2.StyledToolbarItem,
                 {
                   role: "menuitem",
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
                   ...ownerProps,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_outOfTheBox.PopupMenu,
                     {
                       title: label2,
                       setRef: setRefIndex,
-                      ...otherProps2
+                      ...otherProps2,
+                      ownerProps
                     }
                   )
                 },
@@ -100,7 +100,7 @@ const GlobalHeaderToolbar = () => {
                 import_styles2.StyledToolbarItem,
                 {
                   role: "menuitem",
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
                   ...ownerProps,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.AppPicker, { label: label2, setRef: setRefIndex, ...otherProps2 })
                 },
@@ -113,9 +113,9 @@ const GlobalHeaderToolbar = () => {
                 import_styles2.StyledToolbarItem,
                 {
                   role: "menuitem",
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
                   ...ownerProps,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.SearchToggle, { label: label2, setRef: setRefIndex, ...otherProps2 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.SearchToggle, { instanceUID, label: label2, setRef: setRefIndex, ...otherProps2 })
                 },
                 `${instanceUID}-ds-toolbar-item-${label2}`
               );
@@ -127,7 +127,7 @@ const GlobalHeaderToolbar = () => {
                 import_styles2.StyledToolbarItem,
                 {
                   role: "menuitem",
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
                   ...ownerProps,
                   children: CustomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { item, setRef: setRefIndex })
                 },
@@ -139,16 +139,17 @@ const GlobalHeaderToolbar = () => {
               import_styles2.StyledToolbarItem,
               {
                 role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
                 ...ownerProps,
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_styles.StyledButton,
                   {
                     title: label,
-                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+                    "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
                     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": "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",
+  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.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={GLOBAL_HEADER_DATA_TESTID.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={GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST}\n        {...ownerProps}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          // inside a toolbar items needs to be navigable via arrow keys.\n          //  this setRef(index) is generating an index of references that can be \"focused\" when user is navigating with arrows\n          // NOTE:\n          //  focus management based on DOM nodes.focus() in react is problematic due to unpredictable timing of refs assignment and react rendering\n          //  we should be using the \"focus tracker\" approach where we keep track of \"what we want to focuse\",\n          //    then have the ref callback functions invoke the focus to the element AFTER the LAST element is rendered, not tracking the DOM nodes directly.\n          // We aren't changing this right now, but let's keep this in mind.\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={GLOBAL_HEADER_DATA_TESTID.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={GLOBAL_HEADER_DATA_TESTID.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={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <SearchToggle instanceUID={instanceUID} 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={GLOBAL_HEADER_DATA_TESTID.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={GLOBAL_HEADER_DATA_TESTID.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={GLOBAL_HEADER_DATA_TESTID.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/AppPicker/AppPicker.js CHANGED Viewed

@@ -38,7 +38,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
-var import_exported_related = require("../../../../exported-related/index.js");
+var import_constants = require("../../../../constants/index.js");
 var import_useCallbackAfterRender = require("../../../../utils/useCallbackAfterRender.js");
 var import_styles = require("../../../styles.js");
 const AppPicker = ({ label, setRef, componentProps, ...otherProps }) => {
@@ -98,7 +98,7 @@ const AppPicker = ({ label, setRef, componentProps, ...otherProps }) => {
         (0, import_ds_system.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
       },
       "aria-label": label,
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
       "aria-haspopup": true,
       "aria-expanded": userIsOpen ?? isOpen,
       ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { useCallbackAfterRender } from '../../../../utils/useCallbackAfterRender.js';\nimport { StyledButton } from '../../../styles.js';\n\ntype AppPickerOutOfTheBoxProps =\n  // what comes from\n  //   the prop toolbar (array)\n  //     specifically only if the type is 'ds-app-picker' so they give us the correct interface\n  DSGlobalHeaderT.AppPickerProps & {\n    // this interface is an addition that comes from our own implementation\n    // GlobalHeaderToolbar -> useGlobalHeaderToolbar\n    //   is handling focus management for the user when using our out of the box\n    setRef: (ref: HTMLElement) => void;\n  };\n\nexport const AppPicker = ({ label, setRef, componentProps, ...otherProps }: AppPickerOutOfTheBoxProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  // const appPickerRef = useRef(null);\n  // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [focusTrigger, schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n        else actionRef?.current?.focusWrapper();\n      }, 10);\n    },\n    [actionRef],\n  );\n\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      innerRef={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n      aria-haspopup\n      aria-expanded={userIsOpen ?? isOpen}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={userRenderTrigger || TriggerDefaultComponent}\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+FjB;AA/FN,2BAA4B;AAC5B,sBAA2B;AAC3B,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oCAAuC;AACvC,oBAA6B;AAatB,MAAM,YAAY,CAAC,EAAE,OAAO,QAAQ,gBAAgB,GAAG,WAAW,MAA8C;AACrH,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,EAAG,YAAW,SAAS,gCAAgC;AAAA,YACnE,YAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAGA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,wCAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC5B,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { useCallbackAfterRender } from '../../../../utils/useCallbackAfterRender.js';\nimport { StyledButton } from '../../../styles.js';\n\ntype AppPickerOutOfTheBoxProps =\n  // what comes from\n  //   the prop toolbar (array)\n  //     specifically only if the type is 'ds-app-picker' so they give us the correct interface\n  DSGlobalHeaderT.AppPickerProps & {\n    // this interface is an addition that comes from our own implementation\n    // GlobalHeaderToolbar -> useGlobalHeaderToolbar\n    //   is handling focus management for the user when using our out of the box\n    setRef: (ref: HTMLElement) => void;\n  };\n\nexport const AppPicker = ({ label, setRef, componentProps, ...otherProps }: AppPickerOutOfTheBoxProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  // const appPickerRef = useRef(null);\n  // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [focusTrigger, schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n        else actionRef?.current?.focusWrapper();\n      }, 10);\n    },\n    [actionRef],\n  );\n\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      innerRef={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n      aria-haspopup\n      aria-expanded={userIsOpen ?? isOpen}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={userRenderTrigger || TriggerDefaultComponent}\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+FjB;AA/FN,2BAA4B;AAC5B,sBAA2B;AAC3B,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,uBAA0C;AAE1C,oCAAuC;AACvC,oBAA6B;AAatB,MAAM,YAAY,CAAC,EAAE,OAAO,QAAQ,gBAAgB,GAAG,WAAW,MAA8C;AACrH,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,EAAG,YAAW,SAAS,gCAAgC;AAAA,YACnE,YAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAGA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,wCAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,2CAA0B;AAAA,MACvC,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC5B,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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_constants = require("../../../../constants/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,71 +62,88 @@ 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,
       {
         onClick: handleTriggerOnClick,
         onKeyDown: handleOnKeyDown,
         innerRef: handleRefs,
-        "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+        "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
         "aria-haspopup": true,
         "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 { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/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={GLOBAL_HEADER_DATA_TESTID.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": []
 }