@elliemae/ds-global-header 3.60.0-next.9 → 3.70.0-next.1

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } 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 { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n  setRef,\n  componentProps,\n  label,\n  ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    searchContainerRef,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.key === 'Escape') {\n          setIsOpen(false);\n          schedule(focusTrigger);\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [focusTrigger, onKeyDown, schedule, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    const contains = containerRef.current?.contains(document.activeElement);\n    if (value === '' && !contains) setIsOpen(false);\n    schedule(focusTrigger);\n  }, [focusTrigger, schedule, value]);\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleOnKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      onBlur={handleOnBlur}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n    >\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={handleNavInputRefs}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <StyledButton\n      onClick={handleOnClick}\n      innerRef={handleTriggerRefs}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      aria-label={label}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <Search />\n    </StyledButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FjB;AA7FN,qBAA+B;AAC/B,sBAAuB;AACvB,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oBAA6B;AAC7B,IAAAA,iBAA4C;AAC5C,oCAAuC;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,uBAAmB,qBAAgC,IAAI;AAC7D,QAAM,yBAAqB,qBAAiC,IAAI;AAChE,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,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;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,yBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,sCAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAU,4BAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC5D,cAAY;AAAA,MACX,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
-  "names": ["import_styles"]
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_DATA_TESTID, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n  background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  position: relative;\n  padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n  margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n  && span.pseudo-border {\n    display: none;\n  }\n\n  // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &&:hover {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n  }\n\n  &&:focus-visible {\n    background-color: transparent;\n  }\n\n  &&:focus-visible::before {\n    content: '';\n    position: absolute;\n    z-index: 2;\n    top: 2px;\n    left: 2px;\n    width: calc(100% - 4px);\n    height: calc(100% - 4px);\n    border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n    border-radius: 4px;\n    pointer-events: none;\n  }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n  ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const {\n    componentProps,\n    label,\n    // added in https://jira.elliemae.io/browse/PUI-17852\n    //   keeping the default value as \"Close search\" for backward compatibility\n    //   we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n    ariaLabelExpanded = 'Close search',\n  } = outOfTheBoxDrilledDownProps;\n\n  const {\n    isOpenUncontrolled,\n    containerRef,\n    handleToggleSearch,\n    handleContainerKeyDown,\n    handleChange,\n    handleInputKeyDown,\n    handleTriggerRefs,\n    inputId,\n    panelId,\n  } = useSearchToggle(outOfTheBoxDrilledDownProps);\n  const { props: propsWithDefault } = React.useContext(DSGlobalHeaderContext);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    searchContainerRef,\n  } = componentProps;\n\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n\n  return (\n    <StyledNavSearchBoxContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onKeyDown={handleContainerKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      isOpen={isOpen}\n    >\n      <StyledToggleBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        innerRef={handleTriggerRefs}\n        aria-label={isOpen ? ariaLabelExpanded : label}\n        aria-expanded={isOpen}\n        aria-controls={panelId}\n        onClick={handleToggleSearch}\n        isOpen={isOpen}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n      >\n        <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n      </StyledToggleBtn>\n\n      {isOpen ? (\n        <StyledSearchNavContainer\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          id={panelId}\n          alignItems=\"center\"\n          cols={['1fr', '1fr']}\n        >\n          <StyledSearchInput\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            id={inputId}\n            placeholder={placeholder || 'Search...'}\n            value={value}\n            clearable\n            // passing onBlur as {undefined} breaks the input text focus ring management\n            //    if onBlur is not provided, we don't pass the prop at all\n            // this is not expected as confirmed in conversation with Gerardo\n            //    we are not going to implement the fix right now to avoid potential breaking changes,\n            //    but we will keep an eye on this behavior and consider a fix in the future if needed.\n            {...(onBlur && { onBlur })}\n            onChange={handleChange}\n            onKeyDown={handleInputKeyDown}\n            onClear={onClear}\n          />\n\n          <SearchToggleSpinButton\n            onNext={onNext}\n            onPrevious={onPrevious}\n            currentResultIndex={currentResultIndex}\n            totalResults={totalResults}\n          />\n        </StyledSearchNavContainer>\n      ) : null}\n    </StyledNavSearchBoxContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.js

@@ -0,0 +1,166 @@
+"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 SearchToggleSpinButton_exports = {};
+__export(SearchToggleSpinButton_exports, {
+  SearchToggleSpinButton: () => SearchToggleSpinButton
+});
+module.exports = __toCommonJS(SearchToggleSpinButton_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_DSGlobalHeaderContext = require("../../../../DSGlobalHeaderContext.js");
+var import_constants = require("../../../../constants/index.js");
+const StyledToolbarRightAddonsWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_WRAPPER
+})`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative; // to position the focus-within outline
+  :focus-within {
+    ::after {
+      content: '';
+      position: absolute;
+      width: calc(100% - 2px);
+      height: 100%;
+      border: brand-700 2px solid;
+      margin: -1px;
+      pointer-events: none;
+    }
+  }
+  // we want to avoid the pseudo-border in the nested buttons
+  & button:focus .pseudo-border {
+    outline: none;
+    border: none;
+  }
+`;
+const StyledResultTracker = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT
+})`
+  padding: 0 8px;
+  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
+  white-space: nowrap;
+  word-spacing: 2px;
+  outline: none;
+`;
+const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_SEPARATOR
+})`
+  height: 20px;
+  border-right: 1px solid #a2a9b6;
+`;
+const StyledPrevBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV
+})``;
+const StyledNextBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT
+})``;
+const SearchToggleSpinButton = import_react.default.memo((props) => {
+  const { onNext, onPrevious, currentResultIndex, totalResults } = props;
+  const { props: propsWithDefault } = import_react.default.useContext(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;
+  const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;
+  const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;
+  let resultText = "n/a";
+  let ariaResultsText = "no research ongoing";
+  if (canShowFullResults) {
+    resultText = `${currentResultIndex + 1} / ${totalResults}`;
+    ariaResultsText = `result ${currentResultIndex + 1} of ${totalResults}`;
+  }
+  if (shouldFallbackToTotalResultsOnly) {
+    resultText = `${totalResults}`;
+    ariaResultsText = `${totalResults} total results`;
+  }
+  const handleKeyDown = import_react.default.useCallback(
+    (event) => {
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        onNext();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        onPrevious();
+      }
+    },
+    [onNext, onPrevious]
+  );
+  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledToolbarRightAddonsWrapper, { getOwnerProps, getOwnerPropsArguments, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledResultTracker,
+      {
+        getOwnerProps,
+        getOwnerPropsArguments,
+        role: "spinbutton",
+        "aria-valuenow": currentResultIndex + 1,
+        "aria-valuemin": 1,
+        "aria-valuemax": totalResults,
+        "aria-valuetext": ariaResultsText,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: resultText
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledVerticalSeparator, { getOwnerProps, getOwnerPropsArguments }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledPrevBtn,
+      {
+        getOwnerProps,
+        getOwnerPropsArguments,
+        buttonType: "icon",
+        onClick: onNext,
+        "aria-label": "Next search result",
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "800"] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledNextBtn,
+      {
+        getOwnerProps,
+        getOwnerPropsArguments,
+        buttonType: "icon",
+        onClick: onPrevious,
+        "aria-label": "Previous search result",
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronUp, { color: ["brand-primary", "800"] })
+      }
+    )
+  ] });
+});
+SearchToggleSpinButton.displayName = "SearchToggleSpinButton";
+//# sourceMappingURL=SearchToggleSpinButton.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronDown, ChevronUp } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\n\nconst StyledToolbarRightAddonsWrapper = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_WRAPPER,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative; // to position the focus-within outline\n  :focus-within {\n    ::after {\n      content: '';\n      position: absolute;\n      width: calc(100% - 2px);\n      height: 100%;\n      border: brand-700 2px solid;\n      margin: -1px;\n      pointer-events: none;\n    }\n  }\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n`;\nconst StyledResultTracker = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT,\n})`\n  padding: 0 8px;\n  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify\n  white-space: nowrap;\n  word-spacing: 2px;\n  outline: none;\n`;\nconst StyledVerticalSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_SEPARATOR,\n})`\n  height: 20px;\n  border-right: 1px solid #a2a9b6;\n`;\n// why? because when we add slots support, this should be a slot too, to customize aria-labels\nconst StyledPrevBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV,\n})``;\nconst StyledNextBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT,\n})``;\n\ninterface SearchToggleSpinButtonPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n}\n\nexport const SearchToggleSpinButton = React.memo((props: SearchToggleSpinButtonPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults } = props;\n  const { props: propsWithDefault } = React.useContext(DSGlobalHeaderContext);\n\n  const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;\n  const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;\n  const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;\n  let resultText = 'n/a';\n  let ariaResultsText = 'no research ongoing';\n  if (canShowFullResults) {\n    resultText = `${currentResultIndex + 1} / ${totalResults}`;\n    ariaResultsText = `result ${currentResultIndex + 1} of ${totalResults}`;\n  }\n  if (shouldFallbackToTotalResultsOnly) {\n    resultText = `${totalResults}`;\n    ariaResultsText = `${totalResults} total results`;\n  }\n\n  const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        onNext();\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        onPrevious();\n      }\n    },\n    [onNext, onPrevious],\n  );\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledToolbarRightAddonsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledResultTracker\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        role=\"spinbutton\"\n        aria-valuenow={currentResultIndex + 1}\n        aria-valuemin={1}\n        aria-valuemax={totalResults}\n        aria-valuetext={ariaResultsText}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n      >\n        {resultText}\n      </StyledResultTracker>\n      <StyledVerticalSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      <StyledPrevBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onNext}\n        aria-label=\"Next search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronDown color={['brand-primary', '800']} />\n      </StyledPrevBtn>\n      <StyledNextBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onPrevious}\n        aria-label=\"Previous search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronUp color={['brand-primary', '800']} />\n      </StyledNextBtn>\n    </StyledToolbarRightAddonsWrapper>\n  );\n});\n\nSearchToggleSpinButton.displayName = 'SearchToggleSpinButton';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/useSearchToggle.js

@@ -0,0 +1,122 @@
+"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 useSearchToggle_exports = {};
+__export(useSearchToggle_exports, {
+  useSearchToggle: () => useSearchToggle
+});
+module.exports = __toCommonJS(useSearchToggle_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+const useSearchToggle = (outOfTheBoxDrilledDownProps) => {
+  const { setRef, componentProps, instanceUID } = outOfTheBoxDrilledDownProps;
+  const { onChange, onClear, isOpen: userIsOpen, onKeyDown, onClick, triggerRef } = componentProps;
+  const [isOpenUncontrolled, setIsOpenUncontrolled] = import_react.default.useState(false);
+  const internalInputRef = import_react.default.useRef(null);
+  const containerRef = import_react.default.useRef(null);
+  const internalTriggerRef = import_react.default.useRef(null);
+  const isControlled = userIsOpen !== void 0;
+  const isOpen = userIsOpen ?? isOpenUncontrolled;
+  const openUncontrolled = import_react.default.useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(true);
+  }, [isControlled]);
+  const closeUncontrolled = import_react.default.useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(false);
+    internalTriggerRef.current?.focus();
+    onClear();
+  }, [isControlled, onClear]);
+  const handleToggleSearch = import_react.default.useCallback(
+    (e) => {
+      if (isOpen) {
+        closeUncontrolled();
+      } else {
+        openUncontrolled();
+      }
+      onClick?.(e);
+    },
+    [closeUncontrolled, isOpen, onClick, openUncontrolled]
+  );
+  const handleContainerKeyDown = import_react.default.useCallback(
+    (e) => {
+      if (!isControlled && e.key === "Escape" && isOpen) closeUncontrolled();
+      onKeyDown?.(e);
+    },
+    [closeUncontrolled, isControlled, isOpen, onKeyDown]
+  );
+  const handleChange = import_react.default.useCallback(
+    (e) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+  const handleInputKeyDown = import_react.default.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onClear();
+        closeUncontrolled();
+      }
+    },
+    [onClear, closeUncontrolled]
+  );
+  const handleTriggerRefs = import_react.default.useCallback(
+    (buttonRef) => {
+      (0, import_ds_system.mergeRefs)(triggerRef, internalTriggerRef)(buttonRef);
+      setRef(buttonRef);
+    },
+    [setRef, triggerRef]
+  );
+  const inputId = `${instanceUID}-nav-searchbox-input`;
+  const panelId = `${instanceUID}-nav-searchbox-panel`;
+  return import_react.default.useMemo(
+    () => ({
+      isOpenUncontrolled,
+      internalInputRef,
+      containerRef,
+      handleToggleSearch,
+      handleContainerKeyDown,
+      handleChange,
+      handleInputKeyDown,
+      handleTriggerRefs,
+      inputId,
+      panelId
+    }),
+    [
+      isOpenUncontrolled,
+      containerRef,
+      handleToggleSearch,
+      handleContainerKeyDown,
+      handleChange,
+      handleInputKeyDown,
+      handleTriggerRefs,
+      inputId,
+      panelId
+    ]
+  );
+};
+//# sourceMappingURL=useSearchToggle.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/useSearchToggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/useSearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\nexport const useSearchToggle = (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps) => {\n  const { setRef, componentProps, instanceUID } = outOfTheBoxDrilledDownProps;\n  const { onChange, onClear, isOpen: userIsOpen, onKeyDown, onClick, triggerRef } = componentProps;\n\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = React.useState<boolean>(false);\n  const internalInputRef = React.useRef<HTMLInputElement | null>(null);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const internalTriggerRef = React.useRef<HTMLButtonElement | null>(null);\n\n  const isControlled = userIsOpen !== undefined;\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n\n  const openUncontrolled = React.useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(true);\n  }, [isControlled]);\n\n  const closeUncontrolled = React.useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(false);\n    internalTriggerRef.current?.focus();\n    onClear();\n  }, [isControlled, onClear]);\n\n  const handleToggleSearch = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (isOpen) {\n        closeUncontrolled();\n      } else {\n        openUncontrolled();\n      }\n\n      onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n    },\n    [closeUncontrolled, isOpen, onClick, openUncontrolled],\n  );\n\n  const handleContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!isControlled && e.key === 'Escape' && isOpen) closeUncontrolled();\n      onKeyDown?.(e);\n    },\n    [closeUncontrolled, isControlled, isOpen, onKeyDown],\n  );\n\n  const handleChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      onChange?.(e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleInputKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (e.key === 'Escape') {\n        onClear();\n        closeUncontrolled();\n      }\n    },\n    [onClear, closeUncontrolled],\n  );\n\n  const handleTriggerRefs = React.useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef); // this is used for left/arrow navigation in the region.\n    },\n    [setRef, triggerRef],\n  );\n\n  const inputId = `${instanceUID}-nav-searchbox-input`;\n  const panelId = `${instanceUID}-nav-searchbox-panel`;\n  return React.useMemo(\n    () => ({\n      isOpenUncontrolled,\n      internalInputRef,\n      containerRef,\n      handleToggleSearch,\n      handleContainerKeyDown,\n      handleChange,\n      handleInputKeyDown,\n      handleTriggerRefs,\n      inputId,\n      panelId,\n    }),\n    [\n      isOpenUncontrolled,\n      containerRef,\n      handleToggleSearch,\n      handleContainerKeyDown,\n      handleChange,\n      handleInputKeyDown,\n      handleTriggerRefs,\n      inputId,\n      panelId,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAC1B,mBAAkB;AAGX,MAAM,kBAAkB,CAAC,gCAAmE;AACjG,QAAM,EAAE,QAAQ,gBAAgB,YAAY,IAAI;AAChD,QAAM,EAAE,UAAU,SAAS,QAAQ,YAAY,WAAW,SAAS,WAAW,IAAI;AAElF,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,aAAAA,QAAM,SAAkB,KAAK;AACjF,QAAM,mBAAmB,aAAAA,QAAM,OAAgC,IAAI;AACnE,QAAM,eAAe,aAAAA,QAAM,OAA8B,IAAI;AAC7D,QAAM,qBAAqB,aAAAA,QAAM,OAAiC,IAAI;AAEtE,QAAM,eAAe,eAAe;AACpC,QAAM,SAAS,cAAc;AAE7B,QAAM,mBAAmB,aAAAA,QAAM,YAAY,MAAM;AAC/C,QAAI,CAAC,aAAc,uBAAsB,IAAI;AAAA,EAC/C,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,oBAAoB,aAAAA,QAAM,YAAY,MAAM;AAChD,QAAI,CAAC,aAAc,uBAAsB,KAAK;AAC9C,uBAAmB,SAAS,MAAM;AAClC,YAAQ;AAAA,EACV,GAAG,CAAC,cAAc,OAAO,CAAC;AAE1B,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAgG;AAC/F,UAAI,QAAQ;AACV,0BAAkB;AAAA,MACpB,OAAO;AACL,yBAAiB;AAAA,MACnB;AAEA,gBAAU,CAAoD;AAAA,IAChE;AAAA,IACA,CAAC,mBAAmB,QAAQ,SAAS,gBAAgB;AAAA,EACvD;AAEA,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AACL,UAAI,CAAC,gBAAgB,EAAE,QAAQ,YAAY,OAAQ,mBAAkB;AACrE,kBAAY,CAAC;AAAA,IACf;AAAA,IACA,CAAC,mBAAmB,cAAc,QAAQ,SAAS;AAAA,EACrD;AAEA,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,CAAC,MAAM;AACL,iBAAW,EAAE,OAAO,KAAK;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,UAAI,EAAE,QAAQ,UAAU;AACtB,gBAAQ;AACR,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,sCAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,UAAU,GAAG,WAAW;AAC9B,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Toolbar/styles.js

@@ -36,16 +36,16 @@ 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 StyledMenubarContainer = (0, import_ds_system.styled)("div", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.CONTAINER
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_CONTAINER
 })`
   ${({ withSpan, theme }) => withSpan && !theme.layoutMode ? "grid-column: span 2;" : ""}
 `;
-const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.MENUBAR.LIST })`
+const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_LIST })`
   padding: 0;
   margin: 0;
 `;
-const StyledToolbarItem = (0, import_ds_system.styled)("div", { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.MENUBAR.ITEM })``;
+const StyledToolbarItem = (0, import_ds_system.styled)("div", { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_ITEM })``;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/parts/Toolbar/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Toolbar/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 StyledMenubarContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n  ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;",
+  "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 StyledMenubarContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_CONTAINER,\n})<{ withSpan: boolean }>`\n  ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_LIST })`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM })``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAwD;AAEjD,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,qCAAoB,MAAM,qCAAoB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,qCAAoB,MAAM,qCAAoB,aAAa,CAAC;",
   "names": []
 }

package/dist/cjs/parts/styles.js

@@ -35,16 +35,16 @@ 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");
-const Container = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.CONTAINER })`
+var import_constants = require("../constants/index.js");
+const Container = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.CONTAINER })`
   ${({ bg, backgroundColor }) => bg || backgroundColor ? "" : "background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);"}
   color: ${({ theme }) => theme.colors.neutral["000"]};
   min-height: 40px;
   padding: 0 24px 0 12px;
 `;
 const StyledButton = (0, import_ds_system.styled)("button", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_BUTTON
 })`
   height: 3.077rem;
   width: 3.077rem;

package/dist/cjs/parts/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/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 { DSGlobalHeaderSlots, DSGlobalHeaderName } from '../exported-related/theming.js';\n\nexport const Container = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  min-height: 40px;\n  padding: 0 24px 0 12px;\n`;\n\nexport const StyledButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n})`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,gBAAY,yBAAO,qBAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,UAAU,CAAC;AAAA,IACnG,CAAC,EAAE,IAAI,gBAAgB,MACvB,MAAM,kBAAkB,KAAK,kFAAkF;AAAA,WACxG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAK9C,MAAM,mBAAe,yBAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,wBAG9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { GLOBAL_HEADER_SLOTS, DSGlobalHeaderName } from '../constants/index.js';\n\nexport const Container = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  min-height: 40px;\n  padding: 0 24px 0 12px;\n`;\n\nexport const StyledButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_BUTTON,\n})`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAwD;AAEjD,MAAM,gBAAY,yBAAO,qBAAM,EAAE,MAAM,qCAAoB,MAAM,qCAAoB,UAAU,CAAC;AAAA,IACnG,CAAC,EAAE,IAAI,gBAAgB,MACvB,MAAM,kBAAkB,KAAK,kFAAkF;AAAA,WACxG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAK9C,MAAM,mBAAe,yBAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,wBAG9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -36,6 +36,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
 const noop = () => null;
 const defaultProps = {
   breadcrumb: [],
@@ -44,6 +45,7 @@ const defaultProps = {
   Logo: noop
 };
 const DSGlobalHeaderPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSGlobalHeaderName, import_constants.GLOBAL_HEADER_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   CustomNavigation: import_ds_props_helpers.PropTypes.func.description(

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  /* *************************************************************************************\n                      \"Breadcrumb widget\" configuration types\n  ****************************************************************************************\n  The breadcrumb items ARE SPREADING GLOBAL PROPS!!!\n    + The breadcrumb items have a logic that force the onClick to be invoked on spacebar/enter too\n    forcing it even if not the standard browser behaviour as per our buttons too\n  ************************************************************************************** */\n  export interface BreadcrumbItemOptionals {\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n  export interface BreadcrumbItemRequired {\n    label: string;\n  }\n  export interface BreadcrumbItemOptionalsGlobals\n    extends Omit<GlobalAttributesT, keyof BreadcrumbItemOptionals | keyof BreadcrumbItemRequired> {}\n\n  export interface BreadcrumbItem\n    extends BreadcrumbItemRequired,\n      BreadcrumbItemOptionals,\n      BreadcrumbItemOptionalsGlobals {}\n  /* *************************************************************************************\n                      \"Toolbar widget\" configuration types\n  ****************************************************************************************\n    The toolbar item can be mainly of 4 different types\n    - app-picker \n        more or less map to ds-app-picker interface\n    - popup-menu\n        should more less map to dropdownmenu-v2 but should be changed to menu-button when possible\n    - search-toggle\n        a custom ad hoc implementation that expands in place and expose an input text,\n        kinda problematic and force-added due to unrestrained \"yes man\" attitude with PM/PO\n        we will be suggesting against using it officially in the later releases and try to find a better solution.\n    - custom\n        a way to allow app to provide their own render props along other pre-configured widgets out of the box\n  ************************************************************************************** */\n\n  /* *************************************************************************************\n      toolbar -> type === 'custom'\n  ************************************************************************************** */\n  export interface ToolbarCustomComponentProps {\n    item: Record<string, unknown> & {\n      type: 'custom';\n      CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n    };\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarCustomItem extends Record<string, unknown> {\n    type: 'custom';\n    label: string;\n    CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-search-toggle'\n  ************************************************************************************** */\n  // this props are actually required for the out-of-the-box to actually do what it needs to do\n  //    it's meant to be provided from the application, so this is kind of a weird way to do controlled components\n  export interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: () => void;\n    onBlur: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  export interface SearchToggleProps extends GlobalAttributesT {\n    setRef: (ref: HTMLElement) => void;\n    componentProps: ToggleSearchComponentProps;\n  }\n  export interface ToolbarSearchToggleItem {\n    type: 'ds-search-toggle';\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-popup-menu'\n  ************************************************************************************** */\n\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuContentItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type?: 'separator' | 'custom';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n  export interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n  // this is the only type that was pre-existing (even if differently defined)\n  //  and that's why it doesn't include Toolbar at the start\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type: 'ds-popup-menu';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    componentProps: PopupMenuComponentProps;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuContentItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupProps extends Omit<GlobalAttributesT, 'title' | 'label' | 'onClick'> {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    onClick?: (event: React.MouseEvent) => void;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: PopupMenuComponentProps;\n    title?: string; // this was probably not intended, but removing this means the HTML will not print the title={label}\n    // keeping this for now, if A11y says otherwise we will do the proper steps to remove it\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === 'ds-app-picker'\n  ************************************************************************************** */\n  export type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface AppPickerProps extends Omit<GlobalAttributesT, 'label'> {\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarAppPickerItem extends Omit<GlobalAttributesT, 'type' | 'label'> {\n    type: 'ds-app-picker';\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === undefined (fallback default)\n  ************************************************************************************** */\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarItemTypelessDefault extends Omit<GlobalAttributesT, 'label'> {\n    type?: undefined;\n    label: string;\n    Icon: React.ComponentType<{ fill?: string; size?: string }>;\n  }\n\n  export type ToolbarItem =\n    | ToolbarCustomItem\n    | ToolbarSearchToggleItem\n    | ToolbarAppPickerItem\n    | PopupMenuItem // this is the only type that was pre-existing and that's why it doesn't include Toolbar at the start\n    | ToolbarItemTypelessDefault;\n\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n  export type Props = Partial<DSGlobalHeaderT.DefaultProps>;\n\n  export interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n}\n\nexport const DSGlobalHeaderPropTypes: DSPropTypesSchema<DSGlobalHeaderT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  CustomNavigation: PropTypes.func\n    .description(\n      'Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios',\n    )\n    .defaultValue('() => JSX.Element'),\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('breadrcrumb item label'),\n      hasNext: PropTypes.bool.description('whether the item has a child or not'),\n      isSelected: PropTypes.bool.description('whether the item is selected or not'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('title tag description'),\n      type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n        'use to select one of the out-of-the-box types of items',\n      ),\n      componentProps: PropTypes.object.description('props of out-of-the-box component'),\n      Icon: PropTypes.func.description('Icon to display'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n// kept for legacy reasons, this is now named differently, but we want no breaking changes.\nexport const propTypes = DSGlobalHeaderPropTypes;\n\nexport const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes as unknown as ValidationMap<DSGlobalHeaderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AA4MO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,kBAAkB,kCAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,kCAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,kCAAU;AAAA,IACpB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,kCAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,kCAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,kCAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  getPropsPerSlotPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from './constants/index.js';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n  /* *************************************************************************************\n                      \"Breadcrumb widget\" configuration types\n  ****************************************************************************************\n  The breadcrumb items ARE SPREADING GLOBAL PROPS!!!\n    + The breadcrumb items have a logic that force the onClick to be invoked on spacebar/enter too\n    forcing it even if not the standard browser behaviour as per our buttons too\n  ************************************************************************************** */\n  export interface BreadcrumbItemOptionals {\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n  export interface BreadcrumbItemRequired {\n    label: string;\n  }\n  export interface BreadcrumbItemOptionalsGlobals\n    extends Omit<GlobalAttributesT, keyof BreadcrumbItemOptionals | keyof BreadcrumbItemRequired> {}\n\n  export interface BreadcrumbItem\n    extends BreadcrumbItemRequired,\n      BreadcrumbItemOptionals,\n      BreadcrumbItemOptionalsGlobals {}\n  /* *************************************************************************************\n                      \"Toolbar widget\" configuration types\n  ****************************************************************************************\n    The toolbar item can be mainly of 4 different types\n    - app-picker \n        more or less map to ds-app-picker interface\n    - popup-menu\n        should more less map to dropdownmenu-v2 but should be changed to menu-button when possible\n    - search-toggle\n        a custom ad hoc implementation that expands in place and expose an input text,\n        kinda problematic and force-added due to unrestrained \"yes man\" attitude with PM/PO\n        we will be suggesting against using it officially in the later releases and try to find a better solution.\n    - custom\n        a way to allow app to provide their own render props along other pre-configured widgets out of the box\n  ************************************************************************************** */\n\n  /* *************************************************************************************\n      toolbar -> type === 'custom'\n  ************************************************************************************** */\n  export interface ToolbarCustomComponentProps {\n    item: Record<string, unknown> & {\n      type: 'custom';\n      CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n    };\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarCustomItem extends Record<string, unknown> {\n    type: 'custom';\n    label: string;\n    CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-search-toggle'\n  ************************************************************************************** */\n  // this props are actually required for the out-of-the-box to actually do what it needs to do\n  //    it's meant to be provided from the application, so this is kind of a weird way to do controlled components\n  export interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: (value: string) => void;\n    onBlur?: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  export interface SearchToggleProps extends GlobalAttributesT {\n    setRef: (ref: HTMLButtonElement | null) => void;\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n    // https://jira.elliemae.io/browse/PUI-17852\n    //   - Generic aria-labels\n    //     -> allows users to specify a custom aria-label when the search toggle is expanded\n    //     -> it's an incremental change, so its \"optional\", we fall back to the previous hardcoded \"Close search\" if not provided\n    //         but authors are encouraged to improve the Aria-label with context-specific information when possible, to improve the overall accessibility of the component.\n    ariaLabelExpanded?: string;\n    // aria-controls needs to point to a DOM id, we need to make sure there are no conflicts in case of multiple search toggles on the same page\n    instanceUID: Context['instanceUID'];\n  }\n  export interface ToolbarSearchToggleItem {\n    type: 'ds-search-toggle';\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-popup-menu'\n  ************************************************************************************** */\n\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuContentItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type?: 'separator' | 'custom';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n  export interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n  // this is the only type that was pre-existing (even if differently defined)\n  //  and that's why it doesn't include Toolbar at the start\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type: 'ds-popup-menu';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    componentProps: PopupMenuComponentProps;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuContentItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupProps extends Omit<GlobalAttributesT, 'title' | 'label' | 'onClick'> {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    onClick?: (event: React.MouseEvent) => void;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: PopupMenuComponentProps;\n    title?: string; // this was probably not intended, but removing this means the HTML will not print the title={label}\n    // keeping this for now, if A11y says otherwise we will do the proper steps to remove it\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === 'ds-app-picker'\n  ************************************************************************************** */\n  export type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface AppPickerProps extends Omit<GlobalAttributesT, 'label'> {\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarAppPickerItem extends Omit<GlobalAttributesT, 'type' | 'label'> {\n    type: 'ds-app-picker';\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === undefined (fallback default)\n  ************************************************************************************** */\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarItemTypelessDefault extends Omit<GlobalAttributesT, 'label'> {\n    type?: undefined;\n    label: string;\n    Icon: React.ComponentType<{ fill?: string; size?: string }>;\n  }\n\n  export type ToolbarItem =\n    | ToolbarCustomItem\n    | ToolbarSearchToggleItem\n    | ToolbarAppPickerItem\n    | PopupMenuItem // this is the only type that was pre-existing and that's why it doesn't include Toolbar at the start\n    | ToolbarItemTypelessDefault;\n\n  export type SlotFunctionArguments = {\n    dsGlobalheaderRoot: () => Record<string, never>;\n    dsGlobalheaderLogoContainer: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbContainer: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbPipe: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbChevron: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbList: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItem: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItemLink: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItemLinkLabel: () => Record<string, never>;\n    dsGlobalheaderMenubarContainer: () => Record<string, never>;\n    dsGlobalheaderMenubarList: () => Record<string, never>;\n    dsGlobalheaderMenubarItem: () => Record<string, never>;\n    dsGlobalheaderMenubarItemButton: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuList: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItem: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItemButton: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuSeparator: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItemLabel: () => Record<string, never>;\n    dsGlobalheaderMenubarItemSearchtoggleContainer: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonWrapper: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonText: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonSeparator: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonPrev: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonNext: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleTextinput: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleTriggerButton: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleExpandedContentWrapper: () => Record<string, never>;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSGlobalHeaderName, typeof GLOBAL_HEADER_SLOTS> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSGlobalHeaderPropTypes: DSPropTypesSchema<DSGlobalHeaderT.Props> = {\n  ...getPropsPerSlotPropTypes(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  CustomNavigation: PropTypes.func\n    .description(\n      'Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios',\n    )\n    .defaultValue('() => JSX.Element'),\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('breadrcrumb item label'),\n      hasNext: PropTypes.bool.description('whether the item has a child or not'),\n      isSelected: PropTypes.bool.description('whether the item is selected or not'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('title tag description'),\n      type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n        'use to select one of the out-of-the-box types of items',\n      ),\n      componentProps: PropTypes.object.description('props of out-of-the-box component'),\n      Icon: PropTypes.func.description('Icon to display'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n// kept for legacy reasons, this is now named differently, but we want no breaking changes.\nexport const propTypes = DSGlobalHeaderPropTypes;\n\nexport const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes as unknown as ValidationMap<DSGlobalHeaderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAGP,uBAAwD;AAExD,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AAyQO,MAAM,0BAAoE;AAAA,EAC/E,OAAG,kDAAyB,qCAAoB,oCAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,kBAAkB,kCAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,kCAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,kCAAU;AAAA,IACpB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,kCAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,kCAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,kCAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
   "names": []
 }

package/dist/esm/DSGlobalHeader.js

@@ -1,19 +1,18 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
+import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { useGetLayoutMode } from "@elliemae/ds-system";
-import { useGetGlobalAttributes, useGetXstyledProps, describe } from "@elliemae/ds-props-helpers";
-import { DSGlobalHeaderPropTypesSchema } from "./react-desc-prop-types.js";
-import { GlobalHeaderLogo } from "./parts/Logo/GlobalHeaderLogo.js";
-import { GlobalHeaderBreadcrumb } from "./parts/Breadcrumb/GlobalHeaderBreadcrumb.js";
-import { GlobalHeaderToolbar } from "./parts/Toolbar/GlobalHeaderToolbar.js";
+import { useMemo } from "react";
 import { DSGlobalHeaderContext } from "./DSGlobalHeaderContext.js";
 import { useGlobalHeader } from "./config/useGlobalHeader.js";
 import { useValidateProps } from "./config/useValidateProps.js";
-import { DSGlobalHeaderName } from "./exported-related/index.js";
-import { FONT_DETECTOR } from "./config/constants.js";
+import { DSGlobalHeaderName, FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from "./constants/index.js";
+import { GlobalHeaderBreadcrumb } from "./parts/Breadcrumb/GlobalHeaderBreadcrumb.js";
+import { GlobalHeaderLogo } from "./parts/Logo/GlobalHeaderLogo.js";
+import { GlobalHeaderToolbar } from "./parts/Toolbar/GlobalHeaderToolbar.js";
 import { Container } from "./parts/styles.js";
+import { DSGlobalHeaderPropTypesSchema } from "./react-desc-prop-types.js";
 const DSGlobalHeader = (props) => {
   useValidateProps(props);
   const ctx = useGlobalHeader(props);
@@ -54,7 +53,7 @@ const DSGlobalHeader = (props) => {
       ...xstyledAttrs,
       ...ownerProps,
       forwardedAs: "header",
-      "data-testid": "ds-global-header",
+      "data-testid": GLOBAL_HEADER_DATA_TESTID.CONTAINER,
       cols: cols2,
       children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
         /* @__PURE__ */ jsxs(Grid, { cols, children: [