@elliemae/ds-global-header 3.70.0-next.61 → 3.70.0-next.63

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 { 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 {\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_DATA_TESTID,\n  GLOBAL_HEADER_SLOTS,\n  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} 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            // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n            //   consumer-supplied aria-label (via the textinput slot) overrides this.\n            aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\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          <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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",
+  "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 { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_DATA_TESTID,\n  GLOBAL_HEADER_SLOTS,\n  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.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: SearchToggleT.Props): JSX.Element => {\n  const {\n    componentProps,\n    label,\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\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    // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n    // documented contract and the runtime behaviour cannot drift apart.\n    ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n    // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n    // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n    // own whitelist, so they never reach the DOM.\n    ...restIncludingItemLevelGlobalAttributes\n  } = outOfTheBoxDrilledDownProps;\n\n  const {\n    isOpenUncontrolled,\n    containerRef,\n    handleToggleSearch,\n    handleContainerKeyDown,\n    handleChange,\n    handleTriggerRefs,\n    inputId,\n    panelId,\n  } = useSearchToggle(outOfTheBoxDrilledDownProps);\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  /*\n   * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n   * function-form slot props and nothing else, and none of the elements below carry render-time values\n   * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n   */\n  const noSlotArguments = React.useCallback(() => ({}), []);\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n  /*\n   * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n   * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n   *\n   *   - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n   *     is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n   *     wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n   *     forward less than the siblings do.\n   *   - The container is what this item type renders AS; the button is a child of it. Attributes describing\n   *     the toolbar item belong on the item's root.\n   *\n   * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n   * not on the icon button.\n   */\n  const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n    restIncludingItemLevelGlobalAttributes,\n  );\n\n  return (\n    <StyledNavSearchBoxContainer\n      // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n      // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n      // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n      // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n      // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n      // claims those keys.\n      {...itemLevelGlobalAttributes}\n      // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n      {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n      onKeyDown={handleContainerKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      isOpen={isOpen}\n    >\n      <StyledToggleBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\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={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n          getOwnerPropsArguments={noSlotArguments}\n          id={panelId}\n          alignItems=\"center\"\n          cols={['1fr', '1fr']}\n        >\n          <StyledSearchInput\n            getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n            getOwnerPropsArguments={noSlotArguments}\n            id={inputId}\n            // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n            //   consumer-supplied aria-label (via the textinput slot) overrides this.\n            aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\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            onClear={onClear}\n          />\n          <SearchToggleSpinButton\n            onNext={onNext}\n            onPrevious={onPrevious}\n            currentResultIndex={currentResultIndex}\n            totalResults={totalResults}\n            getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\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

@@ -37,7 +37,6 @@ 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,
@@ -81,17 +80,16 @@ const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
   height: 20px;
   border-right: 1px solid #a2a9b6;
 `;
-const StyledPrevBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+const StyledSpinbuttonPrevSlotBtn = (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, {
+const StyledSpinbuttonNextSlotBtn = (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 { onNext, onPrevious, currentResultIndex, totalResults, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = props;
   const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;
   const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;
   const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;
@@ -117,51 +115,63 @@ const SearchToggleSpinButton = import_react.default.memo((props) => {
     },
     [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-label": "Search results",
-        "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"] })
-      }
-    )
-  ] });
+  const noSlotArguments = import_react.default.useCallback(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledToolbarRightAddonsWrapper,
+    {
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledResultTracker,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            role: "spinbutton",
+            "aria-label": "Search results",
+            "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: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledSpinbuttonNextSlotBtn,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            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)(
+          StyledSpinbuttonPrevSlotBtn,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            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

@@ -1,7 +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: ${({ theme }) => theme.colors.neutral['500']};\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-label=\"Search results\"\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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",
+  "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 { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\nimport type { SearchToggleT } from './react-desc-prop-types.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: ${({ theme }) => theme.colors.neutral['500']};\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 StyledSpinbuttonPrevSlotBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV,\n})``;\nconst StyledSpinbuttonNextSlotBtn = 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  // Drilled through SearchToggle from DSGlobalHeader \u2014 the slot lookup table, never the hydrator.\n  getOwnerPropsAwareOfPropsPassedToGlobalHeader: SearchToggleT.Props['getOwnerPropsAwareOfPropsPassedToGlobalHeader'];\n}\n\nexport const SearchToggleSpinButton = React.memo((props: SearchToggleSpinButtonPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = props;\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  // Explicit and empty: none of the spinbutton elements have render-time values worth handing to a\n  // function-form slot prop. Stated rather than omitted.\n  const noSlotArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledToolbarRightAddonsWrapper\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n    >\n      <StyledResultTracker\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        role=\"spinbutton\"\n        aria-label=\"Search results\"\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\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n      />\n      <StyledSpinbuttonNextSlotBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\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      </StyledSpinbuttonNextSlotBtn>\n      <StyledSpinbuttonPrevSlotBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\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      </StyledSpinbuttonPrevSlotBtn>\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/react-desc-prop-types.js

@@ -0,0 +1,58 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  SearchTogglePropTypes: () => SearchTogglePropTypes,
+  SearchTogglePropTypesSchema: () => SearchTogglePropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const defaultProps = {
+  ariaLabelExpanded: "Close search"
+};
+const SearchTogglePropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  label: import_ds_props_helpers.PropTypes.string.description("Accessible name for the collapsed trigger, and the toolbar label").isRequired,
+  componentProps: import_ds_props_helpers.PropTypes.object.description(
+    "The consumer-authored search configuration: value, result counters and the change/clear/navigation handlers"
+  ).isRequired,
+  getOwnerPropsAwareOfPropsPassedToGlobalHeader: import_ds_props_helpers.PropTypes.func.description(
+    "Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead"
+  ).signature("(() => Partial<DSGlobalHeaderT.DefaultProps> )").isRequired,
+  setRef: import_ds_props_helpers.PropTypes.func.description("Registers the trigger node with the toolbar focus management for arrow-key navigation").signature("(( ref: HTMLButtonElement | null ) => void )").isRequired,
+  instanceUID: import_ds_props_helpers.PropTypes.string.description(
+    "Namespaces the input and panel DOM ids so multiple headers on a page do not collide on aria-controls"
+  ).isRequired,
+  ariaLabelExpanded: import_ds_props_helpers.PropTypes.string.description("Accessible name for the trigger once expanded (PUI-17852)").defaultValue("Close search")
+};
+const SearchTogglePropTypesSchema = SearchTogglePropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.ts", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.SearchToggleProps, per the convention every other part in the repo\n * follows. Consumed by SearchToggle.tsx, useSearchToggle.tsx and SearchToggleSpinButton.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Search Toggle.\n * It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarSearchToggleItem and, inside it, DSGlobalHeaderT.ToggleSearchComponentProps.\n * The two old names are the sharpest illustration of the problem this relocation solves:\n * `SearchToggleProps` (internal) and `ToggleSearchComponentProps` (consumer-authored) are near-anagrams\n * of each other, adjacent in the same public namespace, with opposite audiences.\n *\n * All three IoC layers present and wired, as on the siblings:\n *   1. item-level global attributes, forwarded onto this part's ROOT container\n *   2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader`\n *   3. `componentProps`, the search configuration's own contract\n *\n * Two things about layer 1 that differ from the siblings and are worth knowing when writing selectors:\n * the attributes land on the container rather than the trigger button, because the container is what\n * this item type renders as and the trigger is a DSButtonV3 whose own props collide with the HTML global\n * set (`shape` is ButtonShapesT there and the <area> attribute in GlobalAttributesT); and they are spread\n * BEFORE the internal props rather than after, so `onKeyDown` (Escape-collapses) and `innerRef` (the\n * consumer's searchContainerRef) cannot be clobbered. Both are stated at the spread site in\n * SearchToggle.tsx. Until PUI-18647 this layer was declared here and forwarded nowhere, so `data-public`\n * on a 'ds-search-toggle' item never reached the DOM at all; that is fixed and covered by\n * GlobalHeader.SearchToggle.pui-18647.test.js.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace SearchToggleT {\n  export interface RequiredProps {\n    /** Accessible name for the collapsed trigger, and the toolbar item's label. */\n    label: string;\n    /** The consumer-authored configuration object for this toolbar item. */\n    componentProps: DSGlobalHeaderT.ToggleSearchComponentProps;\n    /*\n     * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n     * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n     * full reasoning and the getPartProps mechanics behind the name.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n    setRef: (ref: HTMLButtonElement | null) => void;\n    /*\n     * Namespaces the input and panel DOM ids so multiple headers on one page cannot collide on the\n     * aria-controls relationship. Typed here rather than aliased from the parent's Context: this part\n     * only needs \"an id-safe string\", and coupling it to the parent's shape would tie the two together\n     * for no benefit.\n     */\n    instanceUID: string;\n  }\n\n  export interface DefaultProps {\n    /*\n     * Accessible name for the trigger once expanded. Defaults to the pre-PUI-17852 hardcoded string for\n     * backward compatibility; authors are encouraged to supply context-specific text.\n     */\n    ariaLabelExpanded: string;\n  }\n\n  export interface OptionalProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\n// Part-level defaultProps, per the part generator's shape. Consumed by SearchToggle.tsx so the\n// documented default and the runtime default cannot drift. The name intentionally matches the package's\n// own `defaultProps`; fallow's duplicate-export grouping for that convention is handled once in\n// fallow.internals.jsonc rather than suppressed per file.\nexport const defaultProps: SearchToggleT.DefaultProps = {\n  ariaLabelExpanded: 'Close search',\n};\n\nexport const SearchTogglePropTypes: DSPropTypesSchema<SearchToggleT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Accessible name for the collapsed trigger, and the toolbar label').isRequired,\n  componentProps: PropTypes.object.description(\n    'The consumer-authored search configuration: value, result counters and the change/clear/navigation handlers',\n  ).isRequired,\n  getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n    .description(\n      'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n    )\n    .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n  setRef: PropTypes.func\n    .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n    .signature('(( ref: HTMLButtonElement | null ) => void )').isRequired,\n  instanceUID: PropTypes.string.description(\n    'Namespaces the input and panel DOM ids so multiple headers on a page do not collide on aria-controls',\n  ).isRequired,\n  ariaLabelExpanded: PropTypes.string\n    .description('Accessible name for the trigger once expanded (PUI-17852)')\n    .defaultValue('Close search'),\n};\n\nexport const SearchTogglePropTypesSchema = SearchTogglePropTypes as unknown as ValidationMap<SearchToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAqFhE,MAAM,eAA2C;AAAA,EACtD,mBAAmB;AACrB;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,kEAAkE,EAAE;AAAA,EACxG,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,kCAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,8CAA8C,EAAE;AAAA,EAC7D,aAAa,kCAAU,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE;AAAA,EACF,mBAAmB,kCAAU,OAC1B,YAAY,2DAA2D,EACvE,aAAa,cAAc;AAChC;AAEO,MAAM,8BAA8B;",
+  "names": []
+}

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

@@ -36,38 +36,57 @@ 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 {
+    onChange,
+    onClear,
+    isOpen: userIsOpen,
+    onKeyDown,
+    onClick,
+    triggerRef,
+    onExpand,
+    onCollapse
+  } = 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 expand = import_react.default.useCallback(
+    (info) => {
+      if (!isControlled) setIsOpenUncontrolled(true);
+      onExpand?.(info);
+    },
+    [isControlled, onExpand]
+  );
+  const collapse = import_react.default.useCallback(
+    (info) => {
+      if (!isControlled) {
+        setIsOpenUncontrolled(false);
+        internalTriggerRef.current?.focus();
+        onClear();
+      }
+      onCollapse?.(info);
+    },
+    [isControlled, onClear, onCollapse]
+  );
   const handleToggleSearch = import_react.default.useCallback(
     (e) => {
       if (isOpen) {
-        closeUncontrolled();
+        collapse({ reason: "trigger", event: e });
       } else {
-        openUncontrolled();
+        expand({ reason: "trigger", event: e });
       }
       onClick?.(e);
     },
-    [closeUncontrolled, isOpen, onClick, openUncontrolled]
+    [collapse, expand, isOpen, onClick]
   );
   const handleContainerKeyDown = import_react.default.useCallback(
     (e) => {
-      if (!isControlled && e.key === "Escape" && isOpen) closeUncontrolled();
+      if (e.key === "Escape" && isOpen) collapse({ reason: "escape", event: e });
       onKeyDown?.(e);
     },
-    [closeUncontrolled, isControlled, isOpen, onKeyDown]
+    [collapse, isOpen, onKeyDown]
   );
   const handleChange = import_react.default.useCallback(
     (e) => {
@@ -75,15 +94,6 @@ const useSearchToggle = (outOfTheBoxDrilledDownProps) => {
     },
     [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);
@@ -101,7 +111,6 @@ const useSearchToggle = (outOfTheBoxDrilledDownProps) => {
       handleToggleSearch,
       handleContainerKeyDown,
       handleChange,
-      handleInputKeyDown,
       handleTriggerRefs,
       inputId,
       panelId
@@ -112,7 +121,6 @@ const useSearchToggle = (outOfTheBoxDrilledDownProps) => {
       handleToggleSearch,
       handleContainerKeyDown,
       handleChange,
-      handleInputKeyDown,
       handleTriggerRefs,
       inputId,
       panelId

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport type { SearchToggleT } from './react-desc-prop-types.js';\n\nexport const useSearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props) => {\n  const { setRef, componentProps, instanceUID } = outOfTheBoxDrilledDownProps;\n  const {\n    onChange,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    onExpand,\n    onCollapse,\n  } = 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  /*\n   * The notification fires for BOTH modes \u2014 that is the point of a passive signal \u2014 while everything that\n   * ACTS on the transition stays behind `!isControlled`.\n   *\n   * That gate covers the focus return and the clear, not just the state flip. For a controlled consumer\n   * the flip is inert, so their region can stay expanded; moving focus to the trigger and wiping their\n   * search value at that moment would be acting on a transition that did not happen. They own the\n   * collapse, so they own the refocus and the clear \u2014 `onCollapse` is where they hook both.\n   */\n  const expand = React.useCallback(\n    (info: DSGlobalHeaderT.SearchToggleExpandChange) => {\n      if (!isControlled) setIsOpenUncontrolled(true);\n      onExpand?.(info);\n    },\n    [isControlled, onExpand],\n  );\n\n  const collapse = React.useCallback(\n    (info: DSGlobalHeaderT.SearchToggleExpandChange) => {\n      if (!isControlled) {\n        setIsOpenUncontrolled(false);\n        internalTriggerRef.current?.focus();\n        onClear();\n      }\n      onCollapse?.(info);\n    },\n    [isControlled, onClear, onCollapse],\n  );\n\n  const handleToggleSearch = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (isOpen) {\n        collapse({ reason: 'trigger', event: e });\n      } else {\n        expand({ reason: 'trigger', event: e });\n      }\n\n      onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n    },\n    [collapse, expand, isOpen, onClick],\n  );\n\n  /*\n   * The ONE Escape handler for this item. It sits on the container, so it also catches an Escape typed\n   * in the search input by bubbling \u2014 the input deliberately has no handler of its own. Two handlers\n   * meant every input Escape collapsed twice, and now would notify twice as well.\n   */\n  const handleContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      // No `!isControlled` here any more: `collapse` gates the acting half itself, and a controlled\n      // consumer should still be TOLD that Escape asked for a collapse.\n      if (e.key === 'Escape' && isOpen) collapse({ reason: 'escape', event: e });\n      onKeyDown?.(e);\n    },\n    [collapse, 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 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      handleTriggerRefs,\n      inputId,\n      panelId,\n    }),\n    [\n      isOpenUncontrolled,\n      containerRef,\n      handleToggleSearch,\n      handleContainerKeyDown,\n      handleChange,\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;AAIX,MAAM,kBAAkB,CAAC,gCAAqD;AACnF,QAAM,EAAE,QAAQ,gBAAgB,YAAY,IAAI;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,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;AAW7B,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,CAAC,SAAmD;AAClD,UAAI,CAAC,aAAc,uBAAsB,IAAI;AAC7C,iBAAW,IAAI;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,WAAW,aAAAA,QAAM;AAAA,IACrB,CAAC,SAAmD;AAClD,UAAI,CAAC,cAAc;AACjB,8BAAsB,KAAK;AAC3B,2BAAmB,SAAS,MAAM;AAClC,gBAAQ;AAAA,MACV;AACA,mBAAa,IAAI;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,SAAS,UAAU;AAAA,EACpC;AAEA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAgG;AAC/F,UAAI,QAAQ;AACV,iBAAS,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAAA,MAC1C,OAAO;AACL,eAAO,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAAA,MACxC;AAEA,gBAAU,CAAoD;AAAA,IAChE;AAAA,IACA,CAAC,UAAU,QAAQ,QAAQ,OAAO;AAAA,EACpC;AAOA,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,MAAM;AAGL,UAAI,EAAE,QAAQ,YAAY,OAAQ,UAAS,EAAE,QAAQ,UAAU,OAAO,EAAE,CAAC;AACzE,kBAAY,CAAC;AAAA,IACf;AAAA,IACA,CAAC,UAAU,QAAQ,SAAS;AAAA,EAC9B;AAEA,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,CAAC,MAAM;AACL,iBAAW,EAAE,OAAO,KAAK;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;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,IACF;AAAA,IACA;AAAA,MACE;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/outOfTheBox/index.js

@@ -5,6 +5,10 @@ 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))
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -24,9 +27,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var outOfTheBox_exports = {};
+__export(outOfTheBox_exports, {
+  AppPickerCTXRenderer: () => import_AppPickerCTXRenderer.AppPickerCTXRenderer,
+  PopupMenu: () => import_PopupMenu.PopupMenu,
+  SearchToggle: () => import_SearchToggle.SearchToggle
+});
 module.exports = __toCommonJS(outOfTheBox_exports);
 var React = __toESM(require("react"));
-__reExport(outOfTheBox_exports, require("./AppPicker/AppPicker.js"), module.exports);
-__reExport(outOfTheBox_exports, require("./PopupMenu/PopupMenu.js"), module.exports);
-__reExport(outOfTheBox_exports, require("./SearchToggle/SearchToggle.js"), module.exports);
+var import_AppPickerCTXRenderer = require("./AppPicker/AppPickerCTXRenderer.js");
+var import_PopupMenu = require("./PopupMenu/PopupMenu.js");
+var import_SearchToggle = require("./SearchToggle/SearchToggle.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Toolbar/outOfTheBox/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './AppPicker/AppPicker.js';\nexport * from './PopupMenu/PopupMenu.js';\nexport * from './SearchToggle/SearchToggle.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAAc,qCAAd;AACA,gCAAc,qCADd;AAEA,gCAAc,2CAFd;",
+  "sourcesContent": ["export { AppPickerCTXRenderer } from './AppPicker/AppPickerCTXRenderer.js';\nexport { PopupMenu } from './PopupMenu/PopupMenu.js';\nexport { SearchToggle } from './SearchToggle/SearchToggle.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kCAAqC;AACrC,uBAA0B;AAC1B,0BAA6B;",
   "names": []
 }

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

@@ -30,12 +30,13 @@ var styles_exports = {};
 __export(styles_exports, {
   StyledList: () => StyledList,
   StyledMenubarContainer: () => StyledMenubarContainer,
+  StyledPopupMenuContainer: () => StyledPopupMenuContainer,
   StyledToolbarItem: () => StyledToolbarItem
 });
 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_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
 const StyledMenubarContainer = (0, import_ds_system.styled)("div", {
   name: import_constants.DSGlobalHeaderName,
@@ -48,4 +49,8 @@ const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: imp
   margin: 0;
 `;
 const StyledToolbarItem = (0, import_ds_system.styled)("div", { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_ITEM })``;
+const StyledPopupMenuContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_POPUPMENU_CONTAINER
+})``;
 //# 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, 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;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\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\n// PUI-18647 \u2014 the popup menu item's own root. It was a bare unstyled `<div>`, which left this\n// out-of-the-box type without a root injection point: no slot for consumers to target, no data-testid,\n// and no styled element to forward xstyled props to. A Grid rather than a plain div so it participates in\n// the same layout vocabulary as its siblings; no styles of its own, so replacing the div changes nothing\n// visually \u2014 a `<div>` and an unstyled `display: block` Grid lay out identically here.\nexport const StyledPopupMenuContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_POPUPMENU_CONTAINER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;AACvB,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;AAO5G,MAAM,+BAA2B,yBAAO,qBAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;",
   "names": []
 }