@elliemae/ds-global-header 3.70.0-next.7 → 3.70.0-next.71

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    ownerProps,\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      {...ownerProps}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST}\n        {...ownerProps}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          // inside a toolbar items needs to be navigable via arrow keys.\n          //  this setRef(index) is generating an index of references that can be \"focused\" when user is navigating with arrows\n          // NOTE:\n          //  focus management based on DOM nodes.focus() in react is problematic due to unpredictable timing of refs assignment and react rendering\n          //  we should be using the \"focus tracker\" approach where we keep track of \"what we want to focuse\",\n          //    then have the ref callback functions invoke the focus to the element AFTER the LAST element is rendered, not tracking the DOM nodes directly.\n          // We aren't changing this right now, but let's keep this in mind.\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  ownerProps={ownerProps}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <SearchToggle instanceUID={instanceUID} label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n              {...ownerProps}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n                {...ownerProps}\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPickerCTXRenderer, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n    /*\n     * The slot layer, split into its two genuinely separate halves.\n     *\n     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's\n     * slot prop, so it can only come from DSGlobalHeader \u2014 that is what the verbose drilled name says out\n     * loud when it reaches the out-of-the-box parts.\n     *\n     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,\n     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's\n     * own elements have render-time values worth passing. Stated rather than omitted, so \"what arguments\n     * does this slot get?\" always has a visible answer.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    noSlotArguments,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST}\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          /*\n           * Each branch below strips `type` rather than forwarding it. It is toolbar configuration, but it\n           * is ALSO a member of GlobalAttributesT \u2014 so any part that spreads item-level global attributes\n           * onto a non-button element renders `type=\"ds-search-toggle\"` into the DOM. The button-rooted\n           * parts escape that only incidentally, by re-declaring `type=\"button\"` after their spread.\n           * Stripping here is what stops the outcome depending on that accident.\n           */\n          // inside a toolbar items needs to be navigable via arrow keys.\n          //  this setRef(index) is generating an index of references that can be \"focused\" when user is navigating with arrows\n          // NOTE:\n          //  focus management based on DOM nodes.focus() in react is problematic due to unpredictable timing of refs assignment and react rendering\n          //  we should be using the \"focus tracker\" approach where we keep track of \"what we want to focuse\",\n          //    then have the ref callback functions invoke the focus to the element AFTER the LAST element is rendered, not tracking the DOM nodes directly.\n          // We aren't changing this right now, but let's keep this in mind.\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <AppPickerCTXRenderer\n                  label={label}\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <SearchToggle\n                  instanceUID={instanceUID}\n                  label={label}\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n              getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n              getOwnerPropsArguments={noSlotArguments}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_styles", "label", "otherProps"]
 }

package/dist/cjs/{utils/useCallbackAfterRender.js → parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTX.js}

@@ -26,22 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useCallbackAfterRender_exports = {};
-__export(useCallbackAfterRender_exports, {
-  useCallbackAfterRender: () => useCallbackAfterRender
+var AppPickerCTX_exports = {};
+__export(AppPickerCTX_exports, {
+  AppPickerCtx: () => AppPickerCtx
 });
-module.exports = __toCommonJS(useCallbackAfterRender_exports);
+module.exports = __toCommonJS(AppPickerCTX_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const useCallbackAfterRender = (isLayout = false) => {
-  const lastRun = (0, import_react.useRef)(null);
-  const effect = (0, import_react.useMemo)(() => isLayout ? import_react.useLayoutEffect : import_react.useEffect, [isLayout]);
-  effect(() => {
-    lastRun.current?.();
-    lastRun.current = null;
-  });
-  return (callback) => {
-    lastRun.current = callback;
-  };
-};
-//# sourceMappingURL=useCallbackAfterRender.js.map
+const defaultContext = {};
+const AppPickerCtx = (0, import_react.createContext)(defaultContext);
+//# sourceMappingURL=AppPickerCTX.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTX.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { useAppPickerCTX } from './useAppPickerCTX.js';\n\nexport interface AppPickerCTX extends ReturnType<typeof useAppPickerCTX> {}\n\n// `{} as AppPickerCTX` rather than `null`, matching DSAppPickerContext and DSGlobalHeaderContext: the\n// provider always wraps the consumers, so a nullable context would only buy every reader a null check\n// that can never be true.\nconst defaultContext = {} as AppPickerCTX;\n\nexport const AppPickerCtx = createContext<AppPickerCTX>(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAQ9B,MAAM,iBAAiB,CAAC;AAEjB,MAAM,mBAAe,4BAA4B,cAAc;",
+  "names": []
+}

package/dist/cjs/{hooks/useOnClickOutside.js → parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTXRenderer.js}

@@ -26,35 +26,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useOnClickOutside_exports = {};
-__export(useOnClickOutside_exports, {
-  useOnClickOutside: () => useOnClickOutside
+var AppPickerCTXRenderer_exports = {};
+__export(AppPickerCTXRenderer_exports, {
+  AppPickerCTXRenderer: () => AppPickerCTXRenderer
 });
-module.exports = __toCommonJS(useOnClickOutside_exports);
+module.exports = __toCommonJS(AppPickerCTXRenderer_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-function useOnClickOutside(ref, cb) {
-  const cbRef = import_react.default.useRef(cb);
-  (0, import_react.useEffect)(() => {
-    cbRef.current = cb;
-  }, [cb]);
-  (0, import_react.useEffect)(() => {
-    if (!ref) {
-      return () => {
-      };
-    }
-    const listener = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (ref.contains(target)) return;
-      cbRef.current(event);
-    };
-    document.addEventListener("mousedown", listener, true);
-    document.addEventListener("touchstart", listener, true);
-    return () => {
-      document.removeEventListener("mousedown", listener, true);
-      document.removeEventListener("touchstart", listener, true);
-    };
-  }, [ref]);
-}
-//# sourceMappingURL=useOnClickOutside.js.map
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_AppPickerRenderer = require("./AppPickerRenderer.js");
+var import_useAppPickerCTX = require("./useAppPickerCTX.js");
+var import_AppPickerCTX = require("./AppPickerCTX.js");
+const AppPickerCTXRenderer = (appPickerProps) => {
+  const appPickerCTX = (0, import_useAppPickerCTX.useAppPickerCTX)(appPickerProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPickerCTX.AppPickerCtx.Provider, { value: appPickerCTX, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPickerRenderer.AppPickerRenderer, {}) });
+};
+//# sourceMappingURL=AppPickerCTXRenderer.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTXRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTXRenderer.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { AppPickerRenderer } from './AppPickerRenderer.js';\nimport type { AppPickerT } from './react-desc-prop-types.js';\nimport { useAppPickerCTX } from './useAppPickerCTX.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\nexport const AppPickerCTXRenderer = (appPickerProps: AppPickerT.Props): JSX.Element => {\n  const appPickerCTX = useAppPickerCTX(appPickerProps);\n\n  return (\n    <AppPickerCtx.Provider value={appPickerCTX}>\n      <AppPickerRenderer />\n    </AppPickerCtx.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUjB;AAVN,+BAAkC;AAElC,6BAAgC;AAChC,0BAA6B;AAEtB,MAAM,uBAAuB,CAAC,mBAAkD;AACrF,QAAM,mBAAe,wCAAgB,cAAc;AAEnD,SACE,4CAAC,iCAAa,UAAb,EAAsB,OAAO,cAC5B,sDAAC,8CAAkB,GACrB;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js

@@ -0,0 +1,53 @@
+"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 AppPickerRenderer_exports = {};
+__export(AppPickerRenderer_exports, {
+  AppPickerRenderer: () => AppPickerRenderer
+});
+module.exports = __toCommonJS(AppPickerRenderer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_app_picker = require("@elliemae/ds-app-picker");
+var import_react = __toESM(require("react"));
+var import_AppPickerCTX = require("./AppPickerCTX.js");
+var import_TriggerDefaultComponent = require("./TriggerDefaultComponent.js");
+const AppPickerRenderer = () => {
+  const { contractProps, id } = import_react.default.useContext(import_AppPickerCTX.AppPickerCtx);
+  const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_app_picker.DSAppPicker,
+    {
+      openAndFocusOnArrowKeys: true,
+      ...consumerOwnsTheTrigger ? {} : { TriggerComponent: import_TriggerDefaultComponent.TriggerDefaultComponent },
+      ...id ? { id } : {},
+      ...contractProps
+    }
+  );
+};
+//# sourceMappingURL=AppPickerRenderer.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n  const { contractProps, id } = React.useContext(AppPickerCtx);\n\n  /*\n   * Our default trigger applies only when the consumer supplied neither trigger API.\n   *\n   * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n   * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n   * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n   * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n   * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n   * trigger APIs working through the toolbar config.\n   */\n  const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n  return (\n    <DSAppPicker\n      // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n      // it, so anything they put in `componentProps` wins and becomes theirs to own.\n      // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n      // never erases a default here.\n      //\n      // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n      // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n      // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n      // useAppPickerCTX for the full statement.\n      //\n      // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n      // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n      // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n      // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n      // consumer turn it off through `componentProps`.\n      openAndFocusOnArrowKeys\n      // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n      // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n      // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n      {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n      /*\n       * PUI-18985 \u2014 the item-level `id` names the App Picker, and DSAppPicker derives every id in the\n       * widget from it: the root takes it unchanged, the trigger becomes `getIdForAppPickerTrigger(id)`, and the\n       * dialog's `aria-labelledby` points at that same trigger id. Handing it over here is what makes\n       * those three agree.\n       *\n       * Before this, `id` rode along in `otherProps` and was spread onto the trigger AFTER the id\n       * DSAppPicker had supplied, so the trigger carried the bare item id while the dialog still pointed\n       * at the generated one \u2014 a pointer to no element, and a dialog with no accessible name (axe\n       * `aria-dialog-name`, serious). useAppPickerCTX now reads `id` out of `otherProps` so only this\n       * route exists.\n       *\n       * Consumers who addressed the trigger by the bare item id migrate to `getIdForAppPickerTrigger`, exported by\n       * ds-app-picker; the bare id now selects the picker root. Omitted when unset, so DSAppPicker's own\n       * generated instance id is untouched.\n       */\n      {...(id ? { id } : {})}\n      {...contractProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,2BAA4B;AAC5B,mBAAkB;AAClB,0BAA6B;AAC7B,qCAAwC;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,eAAe,GAAG,IAAI,aAAAA,QAAM,WAAW,gCAAY;AAY3D,QAAM,yBAAyB,QAAQ,cAAc,iBAAiB,cAAc,gBAAgB;AAEpG,SACE;AAAA,IAAC;AAAA;AAAA,MAgBC,yBAAuB;AAAA,MAItB,GAAI,yBAAyB,CAAC,IAAI,EAAE,kBAAkB,uDAAwB;AAAA,MAiB9E,GAAI,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,MACnB,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js

@@ -0,0 +1,84 @@
+"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 TriggerDefaultComponent_exports = {};
+__export(TriggerDefaultComponent_exports, {
+  TriggerDefaultComponent: () => TriggerDefaultComponent
+});
+module.exports = __toCommonJS(TriggerDefaultComponent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_constants = require("../../../../constants/index.js");
+var import_styles = require("../../../styles.js");
+var import_AppPickerCTX = require("./AppPickerCTX.js");
+const TriggerDefaultComponent = ({
+  innerRef,
+  id,
+  onClick: appPickerOnClick,
+  onKeyDown: appPickerOnKeyDown,
+  "aria-haspopup": ariaHasPopup
+}) => {
+  const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = import_react.default.useContext(import_AppPickerCTX.AppPickerCtx);
+  const handleTriggerRefs = import_react.default.useCallback(
+    (buttonRef) => {
+      setRef(buttonRef);
+      (0, import_ds_system.mergeRefs)(triggerRef, innerRef)(buttonRef);
+    },
+    [setRef, triggerRef, innerRef]
+  );
+  const handleOnClickComposed = import_react.default.useCallback(
+    (e) => {
+      appPickerOnClick(e);
+      triggerOnClick?.(e);
+    },
+    [appPickerOnClick, triggerOnClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledButton,
+    {
+      id,
+      onClick: handleOnClickComposed,
+      onKeyDown: appPickerOnKeyDown,
+      innerRef: handleTriggerRefs,
+      "aria-label": label,
+      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
+      "aria-haspopup": ariaHasPopup,
+      ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
+      ...(0, import_ds_props_helpers.getXstyledProps)(otherProps),
+      type: "button",
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: () => ({}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, { width: 20.73, height: 20.73 })
+    }
+  );
+};
+//# sourceMappingURL=TriggerDefaultComponent.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n *   1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n *      fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n *      (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n *      it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n *      detect at runtime.\n *   2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n *      It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n  innerRef,\n  id,\n  onClick: appPickerOnClick,\n  onKeyDown: appPickerOnKeyDown,\n  'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n  const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n    React.useContext(AppPickerCtx);\n\n  /*\n   * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n   * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n   * `innerRef` here silently strands focus when the panel closes.\n   *\n   * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n   * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n   */\n  const handleTriggerRefs = React.useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      setRef(buttonRef);\n      mergeRefs(triggerRef, innerRef)(buttonRef);\n    },\n    [setRef, triggerRef, innerRef],\n  );\n\n  /*\n   * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n   * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n   * always run.\n   *\n   * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n   * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n   * picker controlled and renders its internal flip inert.\n   */\n  const handleOnClickComposed = React.useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      appPickerOnClick(e);\n      triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n    },\n    [appPickerOnClick, triggerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      onClick={handleOnClickComposed}\n      onKeyDown={appPickerOnKeyDown}\n      innerRef={handleTriggerRefs}\n      aria-label={label}\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n      aria-haspopup={ariaHasPopup}\n      // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n      // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n      // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n      // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n      // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n      // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n      // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n      // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n      // picker unless the consumer opens it themselves.\n      //\n      // `id` is the one global attribute that cannot reach this spread: useAppPickerCTX reads it out by\n      // name and AppPickerRenderer hands it to DSAppPicker, which owns every id in this widget and derives\n      // the `id` above from it. Left in here it would take that key back and strand the dialog's\n      // `aria-labelledby` \u2014 PUI-18985.\n      {...getGlobalAttributes(otherProps)}\n      // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n      {...getXstyledProps(otherProps)}\n      type=\"button\"\n      // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n      // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n      // data-dimsum-slot.\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n      // \"what arguments does this slot get?\" always has a visible answer at the call site.\n      getOwnerPropsArguments={() => ({})}\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGjB;AAnGN,sBAA2B;AAC3B,8BAAqD;AACrD,uBAA0B;AAC1B,mBAAkB;AAClB,uBAA0C;AAC1C,oBAA6B;AAC7B,0BAA6B;AAetB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AACnB,MAAuD;AACrD,QAAM,EAAE,gBAAgB,QAAQ,YAAY,OAAO,YAAY,8CAA8C,IAC3G,aAAAA,QAAM,WAAW,gCAAY;AAU/B,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,aAAO,SAAS;AAChB,sCAAU,YAAY,QAAQ,EAAE,SAAS;AAAA,IAC3C;AAAA,IACA,CAAC,QAAQ,YAAY,QAAQ;AAAA,EAC/B;AAWA,QAAM,wBAAwB,aAAAA,QAAM;AAAA,IAClC,CAAC,MAA8C;AAC7C,uBAAiB,CAAC;AAClB,uBAAiB,CAAwC;AAAA,IAC3D;AAAA,IACA,CAAC,kBAAkB,cAAc;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,2CAA0B;AAAA,MACvC,iBAAe;AAAA,MAed,OAAG,6CAAoB,UAAU;AAAA,MAEjC,OAAG,yCAAgB,UAAU;AAAA,MAC9B,MAAK;AAAA,MAIL,eAAe;AAAA,MAGf,wBAAwB,OAAO,CAAC;AAAA,MAEhC,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAEJ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,50 @@
+"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, {
+  AppPickerPropTypes: () => AppPickerPropTypes,
+  AppPickerPropTypesSchema: () => AppPickerPropTypesSchema
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const AppPickerPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  label: import_ds_props_helpers.PropTypes.string.description("Accessible name for the trigger button, and the toolbar label").isRequired,
+  componentProps: import_ds_props_helpers.PropTypes.object.description(
+    "The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps"
+  ).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: HTMLElement ) => void )").isRequired
+};
+const AppPickerPropTypesSchema = AppPickerPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.ts", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import 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.AppPickerProps, per the convention every other part in the repo\n * follows. Consumed by useAppPickerCTX / AppPickerCTXRenderer.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box App Picker\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarAppPickerItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.AppPickerComponentProps. The wrapper is an opinionated pre-configuration that\n * offloads work from the app developer onto Dimsum, so it generates props the developer never sees\n * (`setRef`, `getOwnerPropsAwareOfPropsPassedToGlobalHeader`) and is not meant to know about unless they\n * drop to atomic composition and render DSAppPicker themselves.\n *\n * The three IoC layers an out-of-the-box item is meant to expose are all present here:\n *   1. item-level global attributes, forwarded onto the rendered trigger \u2014 except `id`, which\n *      useAppPickerCTX reads out by name and AppPickerRenderer hands to DSAppPicker, because that is\n *      the component that owns every id this widget renders (PUI-18985)\n *   2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (parent-owned slots \u2014 see the\n *      no-slots note below)\n *   3. `componentProps`, the wrapped component's own contract\n *\n * No slots of its own: every styled element this part renders is declared under the PARENT's name and\n * GLOBAL_HEADER_SLOTS, and those slot values are a published data-dimsum-slot / data-testid surface \u2014\n * re-declaring them here would change them, which the QA stability rule forbids. So, as with\n * ds-data-table-filters' FilterPopover, this file carries no PropsForGlobalOnSlots and no\n * getPropsPerSlotPropTypes. Consumers reach these slots through DSGlobalHeader, where they already do.\n *\n * KNOWN GAP (shared by all four out-of-the-box parts, no decision pending on this file) \u2014 `XstyledProps`\n * is declared below and `xstyledPropTypes` is spread into the schema, but no part forwards xstyled props\n * to any element. Global attributes ARE forwarded, via getGlobalAttributes in TriggerDefaultComponent.\n * The declaration comes from the part-generator template and the FilterPopover precedent; making it true\n * needs a styled target per part, which PopupMenu's bare-<div> root does not currently have.\n */\nexport declare namespace AppPickerT {\n  export interface RequiredProps {\n    /** Accessible name for the trigger, and the toolbar item's label. */\n    label: string;\n    /** The consumer-authored configuration object. Forwarded to DSAppPicker by its own contract. */\n    componentProps: DSGlobalHeaderT.AppPickerComponentProps;\n    /*\n     * The slot IoC layer, and the ONLY half of it that may be drilled down.\n     *\n     * `getPartProps` uses this as the lookup table: it indexes the returned object by the styled\n     * element's `data-dimsum-slot` (falling back to `data-testid`) to find the consumer's slot prop.\n     * That table can therefore only come from DSGlobalHeader, because only DSGlobalHeader holds the\n     * props the consumer passed \u2014 hence the deliberately verbose name. It is also what gates slot\n     * generation at all: `styledFunction` sets `didDefinedGetOwnerProps: !!getOwnerProps`, and\n     * `getPartProps` short-circuits to `{}` without it.\n     *\n     * Its former companion `getOwnerPropsArguments` is deliberately NOT here. That one is the hydrator\n     * for function-form slot props \u2014 `getPartProps` calls `elementProps(getOwnerPropsArguments())` and\n     * uses it for nothing else \u2014 so it must be defined by whichever element is rendering the slot,\n     * which is the only place that knows the render-time values worth passing. Bundling the two forced\n     * every slot in the package to share one hydrator; see ds-chat-bubble's ChatBubbleArrow and\n     * ds-fast-list's List for what per-site hydration is actually for.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n    setRef: (ref: HTMLElement) => void;\n  }\n\n  /*\n   * Intentionally empty, and intentionally still declared: `never` is a statement, not an oversight \u2014\n   * \"this part has no default props, do not expect them\". Keeping the member present preserves\n   * at-a-glance parity with every other part's namespace and makes adding a default a one-line change.\n   */\n  export interface DefaultProps {}\n\n  export interface OptionalProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n        keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n        keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const AppPickerPropTypes: DSPropTypesSchema<AppPickerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Accessible name for the trigger button, and the toolbar label').isRequired,\n  componentProps: PropTypes.object.description(\n    'The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps',\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: HTMLElement ) => void )').isRequired,\n};\n\nexport const AppPickerPropTypesSchema = AppPickerPropTypes as unknown as ValidationMap<AppPickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAiGhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,+DAA+D,EAAE;AAAA,EACrG,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,iCAAiC,EAAE;AAClD;AAEO,MAAM,2BAA2B;",
+  "names": []
+}

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js

@@ -0,0 +1,66 @@
+"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 useAppPickerCTX_exports = {};
+__export(useAppPickerCTX_exports, {
+  useAppPickerCTX: () => useAppPickerCTX
+});
+module.exports = __toCommonJS(useAppPickerCTX_exports);
+var React = __toESM(require("react"));
+var import_ds_app_picker = require("@elliemae/ds-app-picker");
+var import_react = __toESM(require("react"));
+const useAppPickerCTX = (config) => {
+  const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;
+  const { triggerRef, triggerOnClick } = componentProps;
+  const contractProps = import_react.default.useMemo(() => (0, import_ds_app_picker.getDSAppPickerContractProps)(componentProps), [componentProps]);
+  return import_react.default.useMemo(
+    () => ({
+      id,
+      label,
+      componentProps,
+      otherProps,
+      getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      setRef,
+      contractProps,
+      triggerRef,
+      triggerOnClick
+    }),
+    [
+      id,
+      label,
+      componentProps,
+      otherProps,
+      getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      setRef,
+      contractProps,
+      triggerRef,
+      triggerOnClick
+    ]
+  );
+};
+//# sourceMappingURL=useAppPickerCTX.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n *   - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n *     picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n *     sibling items keep the attribute because a menu and a disclosure region are what it is for.\n *   - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n *     picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n *     no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n  /*\n   * Read by name: only what this part needs for its own behaviour. `otherProps` is the item-level global\n   * attributes, which reach the trigger via getGlobalAttributes. Everything a consumer put in\n   * `componentProps` reaches DSAppPicker through `contractProps` instead \u2014 do not cherry-pick from\n   * componentProps here, that is what the contract filter is for.\n   *\n   * `id` is read out by name so it does NOT stay in `otherProps` (PUI-18985). It is a member of\n   * GlobalAttributesT, so left in there it would be spread onto the trigger and take the key back from\n   * DSAppPicker \u2014 which owns every id this widget puts in the DOM and derives them all from this one\n   * value. Naming the App Picker is what the item-level `id` means here; the trigger's own id is\n   * `getIdForAppPickerTrigger(id)`, exported by ds-app-picker for exactly this reason.\n   */\n  const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;\n  const { triggerRef, triggerOnClick } = componentProps;\n\n  // `componentProps` is declared as DSAppPicker's own props plus this part's `triggerOnClick`, so every\n  // DSAppPicker prop a consumer puts there is part of the contract \u2014 including all nine slot props.\n  // Deriving the forwardable set from DSAppPicker's own contract is what keeps the two from drifting, and\n  // it strips the one key in that object that belongs to this part rather than to DSAppPicker:\n  // `triggerOnClick`. (`setRef` is a sibling field of `componentProps`, not inside it, so it never\n  // reaches the filter.)\n  const contractProps = React.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);\n\n  return React.useMemo(\n    () => ({\n      id,\n      label,\n      componentProps,\n      otherProps,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      setRef,\n      contractProps,\n      triggerRef,\n      triggerOnClick,\n    }),\n    [\n      id,\n      label,\n      componentProps,\n      otherProps,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      setRef,\n      contractProps,\n      triggerRef,\n      triggerOnClick,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA4C;AAC5C,mBAAkB;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;AAa3D,QAAM,EAAE,OAAO,gBAAgB,+CAA+C,QAAQ,IAAI,GAAG,WAAW,IAAI;AAC5G,QAAM,EAAE,YAAY,eAAe,IAAI;AAQvC,QAAM,gBAAgB,aAAAA,QAAM,QAAQ,UAAM,kDAA4B,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvG,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,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}