@elliemae/ds-app-picker 3.70.0-next.52 → 3.70.0-next.54

package/dist/cjs/util/getChipId.js

@@ -0,0 +1,36 @@
+"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 getChipId_exports = {};
+__export(getChipId_exports, {
+  getChipId: () => getChipId
+});
+module.exports = __toCommonJS(getChipId_exports);
+var React = __toESM(require("react"));
+const getChipId = (app, flatIndex) => app.id ?? `${app.label}-${flatIndex}`;
+//# sourceMappingURL=getChipId.js.map

package/dist/cjs/util/getChipId.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/util/getChipId.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSAppPickerT } from '../react-desc-prop-types.js';\n\n// Chip identity, assigned top-down from data the parent already holds: the app's own `id`, or a\n// deterministic `${label}-${flatIndex}` fallback for id-less apps (the flat index disambiguates\n// duplicate labels). Both the parent (the focus tracker's track* handlers) and the child\n// (AppPickerItem, via the `chipId` prop threaded through AppSection) derive identity through THIS\n// single function, so the parent can compute the exact region string a chip will match without the\n// chip generating an id and reporting it back up. That determinism removes the child\u2192parent\n// dependency entirely: focus can be addressed by identity alone, with no registry to keep in sync\n// and no wait for the child to mount and register.\n//\n// Kept as a standalone leaf util (depends only on a type) so both the hook and the parts can import\n// it without routing through the hook module \u2014 avoids any import cycle risk.\nexport const getChipId = (app: DSAppPickerT.AppItem, flatIndex: number): string =>\n  app.id ?? `${app.label}-${flatIndex}`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADahB,MAAM,YAAY,CAAC,KAA2B,cACnD,IAAI,MAAM,GAAG,IAAI,KAAK,IAAI,SAAS;",
+  "names": []
+}

package/dist/cjs/util/getChipRegionId.js

@@ -0,0 +1,37 @@
+"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 getChipRegionId_exports = {};
+__export(getChipRegionId_exports, {
+  getChipRegionId: () => getChipRegionId
+});
+module.exports = __toCommonJS(getChipRegionId_exports);
+var React = __toESM(require("react"));
+var import_constants = require("../constants/index.js");
+const getChipRegionId = (chipId) => `${import_constants.CHIP_REGION_PREFIX}${chipId}`;
+//# sourceMappingURL=getChipRegionId.js.map

package/dist/cjs/util/getChipRegionId.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/util/getChipRegionId.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { CHIP_REGION_PREFIX } from '../constants/index.js';\n\n// Maps a chipId (see getChipId) to its focus-region identifier. Standalone leaf util \u2014 depends only\n// on the constants module \u2014 so the hook and the parts can share it without importing through the\n// hook, keeping the dependency graph acyclic.\nexport const getChipRegionId = (chipId: string): string => `${CHIP_REGION_PREFIX}${chipId}`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AAK5B,MAAM,kBAAkB,CAAC,WAA2B,GAAG,mCAAkB,GAAG,MAAM;",
+  "names": []
+}

package/dist/esm/DSAppPicker.js

@@ -1,74 +1,16 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { PopoverArrow } from "@elliemae/ds-floating-context";
-import { AppPanel } from "./parts/AppPanel.js";
-import { DSAppPickerPropTypesSchema } from "./react-desc-prop-types.js";
-import { DSAppPickerName } from "./constants/index.js";
+import React2 from "react";
 import { useAppPicker } from "./config/useAppPicker.js";
-import { useAppPickerBehavior } from "./config/useAppPickerBehavior.js";
+import { DSAppPickerName } from "./constants/index.js";
 import { DSAppPickerContext } from "./DSAppPickerCTX.js";
-import { StyledAppPickerFloating } from "./parts/style.js";
-import { Trigger } from "./parts/Trigger.js";
+import { AppPickerContent } from "./parts/AppPickerFloatingContext/AppPickerContent.js";
+import { DSAppPickerPropTypesSchema } from "./react-desc-prop-types.js";
 const DSAppPicker = (props) => {
   const appPickerConfig = useAppPicker(props);
-  const {
-    Icon,
-    renderTrigger,
-    resolvedIsOpen,
-    floatingStyles,
-    arrowStyles,
-    floatingContext,
-    ownerPropsConfig,
-    defaultTriggerRef,
-    triggerRef,
-    wasOpenedByKeyboardRef,
-    handleClose,
-    handleTriggerRef,
-    handleTriggerClick,
-    floatingInnerRef,
-    focusTracker
-  } = useAppPickerBehavior(appPickerConfig);
-  return /* @__PURE__ */ jsxs(DSAppPickerContext.Provider, { value: focusTracker, children: [
-    /* @__PURE__ */ jsx(
-      Trigger,
-      {
-        Icon,
-        isOpen: resolvedIsOpen,
-        setRef: handleTriggerRef,
-        ownerProps: ownerPropsConfig,
-        onClick: handleTriggerClick,
-        renderTrigger
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      StyledAppPickerFloating,
-      {
-        innerRef: floatingInnerRef,
-        isOpen: resolvedIsOpen,
-        floatingStyles,
-        context: floatingContext,
-        getOwnerProps: ownerPropsConfig.getOwnerProps,
-        getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
-        children: [
-          /* @__PURE__ */ jsx(
-            AppPanel,
-            {
-              ...appPickerConfig.propsWithDefault,
-              ownerPropsConfig,
-              globalAttributes: appPickerConfig.globalAttributes,
-              xstyledProps: appPickerConfig.xstyledProps,
-              close: handleClose,
-              triggerRef: triggerRef || defaultTriggerRef,
-              triggerIsInternal: !renderTrigger,
-              wasOpenedByKeyboardRef
-            }
-          ),
-          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
-        ]
-      }
-    )
-  ] });
+  const ctx = React2.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);
+  return /* @__PURE__ */ jsx(DSAppPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(AppPickerContent, {}) });
 };
 DSAppPicker.displayName = DSAppPickerName;
 const AppPickerWithSchema = describe(DSAppPicker);

package/dist/esm/DSAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { PopoverArrow } from '@elliemae/ds-floating-context';\nimport { AppPanel } from './parts/AppPanel.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypesSchema } from './react-desc-prop-types.js';\nimport { DSAppPickerName } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\nimport { useAppPickerBehavior } from './config/useAppPickerBehavior.js';\nimport { DSAppPickerContext } from './DSAppPickerCTX.js';\nimport { StyledAppPickerFloating } from './parts/style.js';\nimport { Trigger } from './parts/Trigger.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n  const appPickerConfig = useAppPicker(props);\n  const {\n    Icon,\n    renderTrigger,\n    resolvedIsOpen,\n    floatingStyles,\n    arrowStyles,\n    floatingContext,\n    ownerPropsConfig,\n    defaultTriggerRef,\n    triggerRef,\n    wasOpenedByKeyboardRef,\n    handleClose,\n    handleTriggerRef,\n    handleTriggerClick,\n    floatingInnerRef,\n    focusTracker,\n  } = useAppPickerBehavior(appPickerConfig);\n\n  return (\n    <DSAppPickerContext.Provider value={focusTracker}>\n      <Trigger\n        Icon={Icon}\n        isOpen={resolvedIsOpen}\n        setRef={handleTriggerRef}\n        ownerProps={ownerPropsConfig}\n        onClick={handleTriggerClick}\n        renderTrigger={renderTrigger}\n      />\n      <StyledAppPickerFloating\n        innerRef={floatingInnerRef}\n        isOpen={resolvedIsOpen}\n        floatingStyles={floatingStyles}\n        context={floatingContext}\n        getOwnerProps={ownerPropsConfig.getOwnerProps}\n        getOwnerPropsArguments={ownerPropsConfig.getOwnerPropsArguments}\n      >\n        <AppPanel\n          {...appPickerConfig.propsWithDefault}\n          ownerPropsConfig={ownerPropsConfig}\n          globalAttributes={appPickerConfig.globalAttributes}\n          xstyledProps={appPickerConfig.xstyledProps}\n          close={handleClose}\n          triggerRef={triggerRef || defaultTriggerRef}\n          triggerIsInternal={!renderTrigger}\n          wasOpenedByKeyboardRef={wasOpenedByKeyboardRef}\n        />\n        <PopoverArrow {...arrowStyles} />\n      </StyledAppPickerFloating>\n    </DSAppPickerContext.Provider>\n  );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypesSchema;\n\nexport { DSAppPicker, AppPickerWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmCjB,cAQA,YARA;AAlCN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,eAAe;AAExB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,kBAAkB,aAAa,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB,eAAe;AAExC,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAClC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,QAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QACT,eAAe,iBAAiB;AAAA,QAChC,wBAAwB,iBAAiB;AAAA,QAEzC;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,gBAAgB;AAAA,cACpB;AAAA,cACA,kBAAkB,gBAAgB;AAAA,cAClC,cAAc,gBAAgB;AAAA,cAC9B,OAAO;AAAA,cACP,YAAY,cAAc;AAAA,cAC1B,mBAAmB,CAAC;AAAA,cACpB;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useAppPicker } from './config/useAppPicker.js';\nimport { DSAppPickerName } from './constants/index.js';\nimport { DSAppPickerContext, type DSAppPickerCTX } from './DSAppPickerCTX.js';\nimport { AppPickerContent } from './parts/AppPickerFloatingContext/AppPickerContent.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n  const appPickerConfig = useAppPicker(props);\n  const ctx: DSAppPickerCTX = React.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);\n\n  return (\n    <DSAppPickerContext.Provider value={ctx}>\n      <AppPickerContent />\n    </DSAppPickerContext.Provider>\n  );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypesSchema;\n\nexport { AppPickerWithSchema, DSAppPicker };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACejB;AAfN,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,0BAA+C;AACxD,SAAS,wBAAwB;AAEjC,SAAS,kCAAkC;AAE3C,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,kBAAkB,aAAa,KAAK;AAC1C,QAAM,MAAsBA,OAAM,QAAQ,OAAO,EAAE,GAAG,gBAAgB,IAAI,CAAC,eAAe,CAAC;AAE3F,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,8BAAC,oBAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;",
+  "names": ["React"]
 }

package/dist/esm/DSAppPickerCTX.js

@@ -1,27 +1,7 @@
 import * as React from "react";
 import { createContext } from "react";
-const defaultFocusContext = {
-  focusRegion: "",
-  firstFocusableRef: { current: null },
-  lastFocusableRef: { current: null },
-  registerChip: () => {
-  },
-  trackFocusChip: () => {
-  },
-  trackFocusRegionReset: () => {
-  },
-  trackFocusTrigger: () => {
-  },
-  trackFocusPanel: () => {
-  },
-  trackFocusSelectedItem: () => {
-  },
-  trackFocusFirstItem: () => {
-  },
-  trackFocusItemAtIndex: () => {
-  }
-};
-const DSAppPickerContext = createContext(defaultFocusContext);
+const defaultContext = {};
+const DSAppPickerContext = createContext(defaultContext);
 export {
   DSAppPickerContext
 };

package/dist/esm/DSAppPickerCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPickerCTX.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createContext } from 'react';\nimport type { useFocusTracker } from './config/useFocusTracker.js';\n\nexport type AppPickerFocusCTX = ReturnType<typeof useFocusTracker>;\n\nconst defaultFocusContext: AppPickerFocusCTX = {\n  focusRegion: '',\n  firstFocusableRef: { current: null } as React.MutableRefObject<HTMLElement | null>,\n  lastFocusableRef: { current: null } as React.MutableRefObject<HTMLElement | null>,\n  registerChip: () => {},\n  trackFocusChip: () => {},\n  trackFocusRegionReset: () => {},\n  trackFocusTrigger: () => {},\n  trackFocusPanel: () => {},\n  trackFocusSelectedItem: () => {},\n  trackFocusFirstItem: () => {},\n  trackFocusItemAtIndex: () => {},\n};\n\n/** Focus tracker context for chip-level focus management inside DSAppPicker. */\nexport const DSAppPickerContext = createContext<AppPickerFocusCTX>(defaultFocusContext);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,qBAAqB;AAKrC,MAAM,sBAAyC;AAAA,EAC7C,aAAa;AAAA,EACb,mBAAmB,EAAE,SAAS,KAAK;AAAA,EACnC,kBAAkB,EAAE,SAAS,KAAK;AAAA,EAClC,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAC9B,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,uBAAuB,MAAM;AAAA,EAAC;AAChC;AAGO,MAAM,qBAAqB,cAAiC,mBAAmB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { useAppPicker } from './config/useAppPicker.js';\n\nexport interface DSAppPickerCTX extends ReturnType<typeof useAppPicker> {}\n\nconst defaultContext = {} as DSAppPickerCTX;\n\n/** Single source of truth for DSAppPicker's parts \u2014 props, owner-props config, floating-context\n * render state, and focus tracker. Replaces per-part prop drilling. */\nexport const DSAppPickerContext = createContext<DSAppPickerCTX>(defaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAK9B,MAAM,iBAAiB,CAAC;AAIjB,MAAM,qBAAqB,cAA8B,cAAc;",
   "names": []
 }

package/dist/esm/config/useAppPicker.js

@@ -1,27 +1,41 @@
 import * as React from "react";
-import React2 from "react";
 import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
   useMemoMergePropsWithDefault,
-  useOwnerProps,
-  getGlobalAttributes,
-  getXstyledProps
+  useOwnerProps
 } from "@elliemae/ds-props-helpers";
+import React2, { useMemo, useRef, useState } from "react";
 import { defaultProps, DSAppPickerPropTypesSchema } from "../react-desc-prop-types.js";
+import { useFocusTracker } from "./useFocusTracker.js";
 import { useValidateProps } from "./useValidateProps.js";
 const useAppPicker = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);
   const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);
-  const globalAttributes = getGlobalAttributes(props);
-  const xstyledProps = getXstyledProps(props);
+  const globalAttributes = useGetGlobalAttributes(props);
+  const xstyledProps = useGetXstyledProps(props);
+  const wasOpenedByKeyboardRef = useRef(false);
+  const { isOpen, apps, customApps } = propsWithDefault;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const resolvedIsOpen = typeof isOpen === "boolean" ? isOpen : internalIsOpen;
+  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);
+  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);
+  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);
+  const focusTrackers = useFocusTracker(useFocusTrackerConfig);
   return React2.useMemo(
     () => ({
+      focusTrackers,
       propsWithDefault,
       ownerPropsConfig,
       globalAttributes,
-      xstyledProps
+      xstyledProps,
+      wasOpenedByKeyboardRef,
+      mountedOpenAutofocusPendingRef,
+      resolvedIsOpen,
+      setInternalIsOpen
     }),
-    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps]
+    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen]
   );
 };
 export {

package/dist/esm/config/useAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAppPicker.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n  getGlobalAttributes,\n  getXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // Use propsWithDefault (stable, deep-comparison memoized) instead of { ...props }\n  // to prevent getOwnerPropsArguments from creating a new object reference every render.\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);\n\n  const globalAttributes = getGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = getXstyledProps<DSAppPickerT.Props>(props);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n    }),\n    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAA4B,cAAc,kCAAkC;AAC5E,SAAS,wBAAwB;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,mBAAmB,6BAAyD,OAAO,YAAY;AACrG,mBAAiB,kBAAkB,0BAA0B;AAM7D,QAAM,mBAAmB,cAAc,kBAAkB,gBAAgB;AAEzE,QAAM,mBAAmB,oBAAwC,KAAK;AACtE,QAAM,eAAe,gBAAoC,KAAK;AAE9D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,kBAAkB,YAAY;AAAA,EACrE;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // Use propsWithDefault (stable, deep-comparison memoized) instead of { ...props }\n  // to prevent getOwnerPropsArguments from creating a new object reference every render.\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = useGetXstyledProps<DSAppPickerT.Props>(props);\n  // =============================================================================\n  // Specific component state and logics\n  // =============================================================================\n  const wasOpenedByKeyboardRef = useRef(false);\n\n  // \"Is the panel open\" is top-level component state. `isOpen` (controlled) takes precedence over\n  // the internal state when provided. resolvedIsOpen feeds useFloatingContext's\n  // externallyControlledIsOpen; initial-focus-on-open is driven off useFloatingContext's onOpen\n  // (which fires on that transition), so the focus tracker itself stays a pure region tracker with\n  // no open-state awareness.\n  const { isOpen, apps, customApps } = propsWithDefault;\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const resolvedIsOpen = typeof isOpen === 'boolean' ? isOpen : internalIsOpen;\n\n  // Was DSAppPicker rendered already-open at mount (declarative `isOpen`, before any user\n  // interaction)? Such an open is not a transition, so useAppPickerFloatingContext's onOpen seed\n  // never fires for it \u2014 AppPanel's useMountedOpenAutofocusNuance consumes this to seed that one\n  // case. Captured once; the nuance flips it false after consuming so a later controlled reopen\n  // (a real transition, handled by onOpen) doesn't re-trigger it.\n  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);\n\n  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);\n  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);\n  const focusTrackers = useFocusTracker(useFocusTrackerConfig);\n\n  return React.useMemo(\n    () => ({\n      focusTrackers,\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n      wasOpenedByKeyboardRef,\n      mountedOpenAutofocusPendingRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,SAAS,QAAQ,gBAAgB;AACjD,SAA4B,cAAc,kCAAkC;AAC5E,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,mBAAmB,6BAAyD,OAAO,YAAY;AACrG,mBAAiB,kBAAkB,0BAA0B;AAM7D,QAAM,mBAAmB,cAAc,kBAAkB,gBAAgB;AAEzE,QAAM,mBAAmB,uBAA2C,KAAK;AACzE,QAAM,eAAe,mBAAuC,KAAK;AAIjE,QAAM,yBAAyB,OAAO,KAAK;AAO3C,QAAM,EAAE,QAAQ,MAAM,WAAW,IAAI;AACrC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,iCAAiC,OAAO,cAAc;AAE5D,QAAM,UAAU,QAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,wBAAwB,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,gBAAgB,gBAAgB,qBAAqB;AAE3D,SAAOA,OAAM;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,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,cAAc;AAAA,EACpG;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useFocusTracker.js

@@ -1,16 +1,15 @@
 import * as React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { APP_PICKER_REGION_FOCUSES } from "../constants/index.js";
-const CHIP_REGION_PREFIX = "chip-";
-const getChipRegionId = (chipId) => `${CHIP_REGION_PREFIX}${chipId}`;
-const useFocusTracker = () => {
+import { getChipId } from "../util/getChipId.js";
+import { getChipRegionId } from "../util/getChipRegionId.js";
+const useFocusTracker = (config) => {
+  const { allApps } = config;
+  const firstFocusableIdx = useMemo(() => allApps.findIndex((app) => !app.disabled), [allApps]);
+  const lastFocusableIdx = useMemo(() => allApps.reduce((acc, app, i) => !app.disabled ? i : acc, -1), [allApps]);
   const [focusRegion, setFocusRegion] = useState(APP_PICKER_REGION_FOCUSES.RESET);
-  const chipIdRegistry = useRef(/* @__PURE__ */ new Map());
   const firstFocusableRef = useRef(null);
   const lastFocusableRef = useRef(null);
-  const registerChip = useCallback((app, chipId) => {
-    chipIdRegistry.current.set(app, chipId);
-  }, []);
   const trackFocusChip = useCallback((chipId) => {
     setFocusRegion(getChipRegionId(chipId));
   }, []);
@@ -23,38 +22,30 @@ const useFocusTracker = () => {
   const trackFocusPanel = useCallback(() => {
     setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);
   }, []);
-  const trackFocusSelectedItem = useCallback((apps, customApps) => {
-    const all = [...apps, ...customApps];
-    const selected = all.find((app) => app.selected);
-    const target = selected ?? all.find((app) => !app.disabled);
-    if (target) {
-      const chipId = chipIdRegistry.current.get(target) ?? target.id ?? target.label;
-      setFocusRegion(getChipRegionId(chipId));
-    }
-  }, []);
-  const trackFocusFirstItem = useCallback((apps, customApps) => {
-    const first = [...apps, ...customApps].find((app) => !app.disabled);
-    if (first) {
-      const chipId = chipIdRegistry.current.get(first) ?? first.id ?? first.label;
-      setFocusRegion(getChipRegionId(chipId));
+  const trackFocusSelectedItem = useCallback(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);
+    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));
+  }, [allApps]);
+  const trackFocusFirstItem = useCallback(() => {
+    if (firstFocusableIdx !== -1) {
+      setFocusRegion(getChipRegionId(getChipId(allApps[firstFocusableIdx], firstFocusableIdx)));
     }
-  }, []);
+  }, [firstFocusableIdx, allApps]);
   const trackFocusItemAtIndex = useCallback(
-    (apps, customApps, index) => {
-      const target = [...apps, ...customApps][index];
-      if (target) {
-        const chipId = chipIdRegistry.current.get(target) ?? target.id ?? target.label;
-        setFocusRegion(getChipRegionId(chipId));
-      }
+    (index) => {
+      const target = allApps[index];
+      if (target) setFocusRegion(getChipRegionId(getChipId(target, index)));
     },
-    []
+    [allApps]
   );
   return useMemo(
     () => ({
+      firstFocusableIdx,
+      lastFocusableIdx,
       focusRegion,
       firstFocusableRef,
       lastFocusableRef,
-      registerChip,
       trackFocusChip,
       trackFocusRegionReset,
       trackFocusTrigger,
@@ -64,10 +55,9 @@ const useFocusTracker = () => {
       trackFocusItemAtIndex
     }),
     [
+      firstFocusableIdx,
+      lastFocusableIdx,
       focusRegion,
-      firstFocusableRef,
-      lastFocusableRef,
-      registerChip,
       trackFocusChip,
       trackFocusRegionReset,
       trackFocusTrigger,
@@ -79,7 +69,6 @@ const useFocusTracker = () => {
   );
 };
 export {
-  getChipRegionId,
   useFocusTracker
 };
 //# sourceMappingURL=useFocusTracker.js.map

package/dist/esm/config/useFocusTracker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useFocusTracker.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useRef, useState } from 'react';\nimport { APP_PICKER_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\n\nconst CHIP_REGION_PREFIX = 'chip-';\n\nexport const getChipRegionId = (chipId: string): string => `${CHIP_REGION_PREFIX}${chipId}`;\n\nexport const useFocusTracker = () => {\n  const [focusRegion, setFocusRegion] = useState<string>(APP_PICKER_REGION_FOCUSES.RESET);\n\n  // Registry mapping each AppItem instance \u2192 its stable chipId (id ?? `${label}-${uid}`).\n  // Populated by AppPickerItem on mount so trackFocusSelectedItem / trackFocusFirstItem\n  // resolve the uid-qualified chipId instead of the bare label.\n  const chipIdRegistry = useRef(new Map<DSAppPickerT.AppItem, string>());\n\n  // DOM refs for the first and last focusable chips \u2014 set by AppPickerItem on mount.\n  // Used by useFocusTrap in AppPanel so the focus trap needs no DOM query.\n  const firstFocusableRef = useRef<HTMLElement | null>(null);\n  const lastFocusableRef = useRef<HTMLElement | null>(null);\n\n  const registerChip = useCallback((app: DSAppPickerT.AppItem, chipId: string) => {\n    chipIdRegistry.current.set(app, chipId);\n  }, []);\n\n  const trackFocusChip = useCallback((chipId: string) => {\n    setFocusRegion(getChipRegionId(chipId));\n  }, []);\n\n  const trackFocusRegionReset = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.RESET);\n  }, []);\n\n  const trackFocusTrigger = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.TRIGGER);\n  }, []);\n\n  const trackFocusPanel = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);\n  }, []);\n\n  const trackFocusSelectedItem = useCallback((apps: DSAppPickerT.AppItem[], customApps: DSAppPickerT.AppItem[]) => {\n    const all = [...apps, ...customApps];\n    const selected = all.find((app) => app.selected);\n    const target = selected ?? all.find((app) => !app.disabled);\n    if (target) {\n      const chipId = chipIdRegistry.current.get(target) ?? target.id ?? target.label;\n      setFocusRegion(getChipRegionId(chipId));\n    }\n  }, []);\n\n  const trackFocusFirstItem = useCallback((apps: DSAppPickerT.AppItem[], customApps: DSAppPickerT.AppItem[]) => {\n    const first = [...apps, ...customApps].find((app) => !app.disabled);\n    if (first) {\n      const chipId = chipIdRegistry.current.get(first) ?? first.id ?? first.label;\n      setFocusRegion(getChipRegionId(chipId));\n    }\n  }, []);\n\n  const trackFocusItemAtIndex = useCallback(\n    (apps: DSAppPickerT.AppItem[], customApps: DSAppPickerT.AppItem[], index: number) => {\n      const target = [...apps, ...customApps][index];\n      if (target) {\n        const chipId = chipIdRegistry.current.get(target) ?? target.id ?? target.label;\n        setFocusRegion(getChipRegionId(chipId));\n      }\n    },\n    [],\n  );\n\n  return useMemo(\n    () => ({\n      focusRegion,\n      firstFocusableRef,\n      lastFocusableRef,\n      registerChip,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    }),\n    [\n      focusRegion,\n      firstFocusableRef,\n      lastFocusableRef,\n      registerChip,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,iCAAiC;AAG1C,MAAM,qBAAqB;AAEpB,MAAM,kBAAkB,CAAC,WAA2B,GAAG,kBAAkB,GAAG,MAAM;AAElF,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,0BAA0B,KAAK;AAKtF,QAAM,iBAAiB,OAAO,oBAAI,IAAkC,CAAC;AAIrE,QAAM,oBAAoB,OAA2B,IAAI;AACzD,QAAM,mBAAmB,OAA2B,IAAI;AAExD,QAAM,eAAe,YAAY,CAAC,KAA2B,WAAmB;AAC9E,mBAAe,QAAQ,IAAI,KAAK,MAAM;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,CAAC,WAAmB;AACrD,mBAAe,gBAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,mBAAe,0BAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB,YAAY,CAAC,MAA8B,eAAuC;AAC/G,UAAM,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU;AACnC,UAAM,WAAW,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ;AAC/C,UAAM,SAAS,YAAY,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ;AAC1D,QAAI,QAAQ;AACV,YAAM,SAAS,eAAe,QAAQ,IAAI,MAAM,KAAK,OAAO,MAAM,OAAO;AACzE,qBAAe,gBAAgB,MAAM,CAAC;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,CAAC,MAA8B,eAAuC;AAC5G,UAAM,QAAQ,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ;AAClE,QAAI,OAAO;AACT,YAAM,SAAS,eAAe,QAAQ,IAAI,KAAK,KAAK,MAAM,MAAM,MAAM;AACtE,qBAAe,gBAAgB,MAAM,CAAC;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB;AAAA,IAC5B,CAAC,MAA8B,YAAoC,UAAkB;AACnF,YAAM,SAAS,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,KAAK;AAC7C,UAAI,QAAQ;AACV,cAAM,SAAS,eAAe,QAAQ,IAAI,MAAM,KAAK,OAAO,MAAM,OAAO;AACzE,uBAAe,gBAAgB,MAAM,CAAC;AAAA,MACxC;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;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,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useRef, useState } from 'react';\nimport { APP_PICKER_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { getChipId } from '../util/getChipId.js';\nimport { getChipRegionId } from '../util/getChipRegionId.js';\n\ntype FocusTrackerConfigT = {\n  allApps: DSAppPickerT.AppItem[];\n};\n\nexport const useFocusTracker = (config: FocusTrackerConfigT) => {\n  const { allApps } = config;\n\n  // Flat indices of the first/last non-disabled item, used to mark the focus-trap edges.\n  // AppSection passes isFirstFocusable/isLastFocusable to AppPickerItem, which sets\n  // firstFocusableRef/lastFocusableRef when its innerRef fires.\n  const firstFocusableIdx = useMemo(() => allApps.findIndex((app) => !app.disabled), [allApps]);\n  const lastFocusableIdx = useMemo(() => allApps.reduce((acc, app, i) => (!app.disabled ? i : acc), -1), [allApps]);\n\n  const [focusRegion, setFocusRegion] = useState<string>(APP_PICKER_REGION_FOCUSES.RESET);\n\n  // DOM refs for the first and last focusable chips \u2014 set by AppPickerItem's innerRef.\n  // Used by useFocusTrap in AppPanel so the focus trap needs no DOM query.\n  const firstFocusableRef = useRef<HTMLElement | null>(null);\n  const lastFocusableRef = useRef<HTMLElement | null>(null);\n\n  const trackFocusChip = useCallback((chipId: string) => {\n    setFocusRegion(getChipRegionId(chipId));\n  }, []);\n\n  const trackFocusRegionReset = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.RESET);\n  }, []);\n\n  const trackFocusTrigger = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.TRIGGER);\n  }, []);\n\n  const trackFocusPanel = useCallback(() => {\n    setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);\n  }, []);\n\n  const trackFocusSelectedItem = useCallback(() => {\n    const selectedIdx = allApps.findIndex((app) => app.selected);\n    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);\n    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));\n  }, [allApps]);\n\n  const trackFocusFirstItem = useCallback(() => {\n    if (firstFocusableIdx !== -1) {\n      setFocusRegion(getChipRegionId(getChipId(allApps[firstFocusableIdx], firstFocusableIdx)));\n    }\n  }, [firstFocusableIdx, allApps]);\n\n  const trackFocusItemAtIndex = useCallback(\n    (index: number) => {\n      const target = allApps[index];\n      if (target) setFocusRegion(getChipRegionId(getChipId(target, index)));\n    },\n    [allApps],\n  );\n\n  return useMemo(\n    () => ({\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      firstFocusableRef,\n      lastFocusableRef,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    }),\n    [\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusFirstItem,\n      trackFocusItemAtIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAMzB,MAAM,kBAAkB,CAAC,WAAgC;AAC9D,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,oBAAoB,QAAQ,MAAM,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC5F,QAAM,mBAAmB,QAAQ,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAO,CAAC,IAAI,WAAW,IAAI,KAAM,EAAE,GAAG,CAAC,OAAO,CAAC;AAEhH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,0BAA0B,KAAK;AAItF,QAAM,oBAAoB,OAA2B,IAAI;AACzD,QAAM,mBAAmB,OAA2B,IAAI;AAExD,QAAM,iBAAiB,YAAY,CAAC,WAAmB;AACrD,mBAAe,gBAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,mBAAe,0BAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB,YAAY,MAAM;AAC/C,UAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ;AAC3D,UAAM,QAAQ,gBAAgB,KAAK,cAAc,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ;AACzF,QAAI,UAAU,GAAI,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,sBAAsB,IAAI;AAC5B,qBAAe,gBAAgB,UAAU,QAAQ,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAAA,IAC1F;AAAA,EACF,GAAG,CAAC,mBAAmB,OAAO,CAAC;AAE/B,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,OAAQ,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,CAAC,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -6,6 +6,7 @@ const APP_PICKER_REGION_FOCUSES = {
   TRIGGER: "trigger",
   PANEL: "panel"
 };
+const CHIP_REGION_PREFIX = "chip-";
 const DSAppPickerSlots = {
   ROOT: "root",
   ITEM: "item",
@@ -23,6 +24,7 @@ const DSAppPickerDataTestIds = {
 };
 export {
   APP_PICKER_REGION_FOCUSES,
+  CHIP_REGION_PREFIX,
   DSAppPickerDataTestIds,
   DSAppPickerName,
   DSAppPickerSlots

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\n// DEV-001: triple-p \"DSApppicker\" is the legacy public name. Renaming would break consumers.\n// See KNOWN_INTENTIONAL_DEVIATIONS.md.\nexport const DSAppPickerName = 'DSApppicker';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const APP_PICKER_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  PANEL: 'panel',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSAppPickerSlots = {\n  ROOT: 'root',\n  ITEM: 'item',\n  TITLE: 'title',\n  SEPARATOR: 'separator',\n  ROW: 'row',\n  CHIP: 'chip',\n  BUTTON: 'button',\n  FLOATING_WRAPPER: 'floating-wrapper',\n} as const;\n\n// Layer 2 legacy data-testid overrides:\n// CHIP and BUTTON predate the slot naming scheme; existing QA selectors must keep matching.\n// See project_compatibility.md (legacy data-testid 3-layer override pattern).\nexport const DSAppPickerDataTestIds = {\n  ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n  CHIP: 'app-picker__chip',\n  BUTTON: 'app-picker__button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAIjC,MAAM,kBAAkB;AAGxB,MAAM,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAGO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AACpB;AAKO,MAAM,yBAAyB;AAAA,EACpC,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\n// DEV-001: triple-p \"DSApppicker\" is the legacy public name. Renaming would break consumers.\n// See KNOWN_INTENTIONAL_DEVIATIONS.md.\nexport const DSAppPickerName = 'DSApppicker';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const APP_PICKER_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  PANEL: 'panel',\n} as const;\n\n// Prefix for the per-chip focus-region identifiers (see getChipRegionId in src/util).\nexport const CHIP_REGION_PREFIX = 'chip-';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSAppPickerSlots = {\n  ROOT: 'root',\n  ITEM: 'item',\n  TITLE: 'title',\n  SEPARATOR: 'separator',\n  ROW: 'row',\n  CHIP: 'chip',\n  BUTTON: 'button',\n  FLOATING_WRAPPER: 'floating-wrapper',\n} as const;\n\n// Layer 2 legacy data-testid overrides:\n// CHIP and BUTTON predate the slot naming scheme; existing QA selectors must keep matching.\n// See project_compatibility.md (legacy data-testid 3-layer override pattern).\nexport const DSAppPickerDataTestIds = {\n  ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n  CHIP: 'app-picker__chip',\n  BUTTON: 'app-picker__button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAIjC,MAAM,kBAAkB;AAGxB,MAAM,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAGO,MAAM,qBAAqB;AAG3B,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AACpB;AAKO,MAAM,yBAAyB;AAAA,EACpC,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/esm/parts/AppPanel.js

@@ -1,36 +1,68 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useEffect, useContext, memo } from "react";
 import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
-import { StyledWrapper, StyledSeparator, StyledListItemFullRow } from "./style.js";
-import { DSAppPickerDataTestIds, APP_PICKER_REGION_FOCUSES } from "../constants/index.js";
-import { AppSection } from "./AppSection.js";
+import React2, { memo, useCallback, useContext, useEffect, useMemo } from "react";
+import { APP_PICKER_REGION_FOCUSES, DSAppPickerDataTestIds } from "../constants/index.js";
 import { DSAppPickerContext } from "../DSAppPickerCTX.js";
-const AppPanelBase = (props) => {
-  const { close, triggerRef, wasOpenedByKeyboardRef, triggerIsInternal, ownerPropsConfig, globalAttributes, xstyledProps } = props;
-  const { apps, customApps, sectionTitle, customSectionTitle, onKeyDown } = props;
-  const {
-    focusRegion,
-    firstFocusableRef,
-    lastFocusableRef,
-    trackFocusPanel,
-    trackFocusFirstItem
-  } = useContext(DSAppPickerContext);
-  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
-  const allItems = useMemo(() => [...apps, ...customApps], [apps, customApps]);
-  const firstFocusableIdx = useMemo(() => allItems.findIndex((app) => !app.disabled), [allItems]);
-  const lastFocusableIdx = useMemo(
-    () => allItems.reduce((acc, app, i) => !app.disabled ? i : acc, -1),
-    [allItems]
-  );
+import { AppSection } from "./AppSection.js";
+import { StyledListItemFullRow, StyledSeparator, StyledWrapper } from "./style.js";
+const wrapperGridLayout = {
+  cols: ["repeat(3, 92px)"],
+  // Row tracks are intentionally auto-sized:
+  // - title row picks up its own typography height
+  // - chip rows expand when `wrapText` causes a chip to wrap onto a second line (Reflow story)
+  // - separator row picks up its own 1px height + margin
+  rows: ["auto"]
+};
+const useExecOnceAfterFirstRender = (callback) => {
+  const hasExecutedRef = React2.useRef(false);
+  const executeInitialFocusRef = React2.useRef(callback);
+  executeInitialFocusRef.current = callback;
   useEffect(() => {
-    if (wasOpenedByKeyboardRef?.current && triggerIsInternal) return;
-    if (triggerIsInternal) {
-      trackFocusPanel();
-    } else {
-      trackFocusFirstItem(apps, customApps);
+    if (!hasExecutedRef.current) {
+      executeInitialFocusRef.current();
+      hasExecutedRef.current = true;
     }
   }, []);
+};
+const useMountedOpenAutofocusNuance = ({
+  pendingRef,
+  triggerIsInternal,
+  trackFocusPanel,
+  trackFocusFirstItem
+}) => {
+  useExecOnceAfterFirstRender(() => {
+    if (!pendingRef.current) return;
+    pendingRef.current = false;
+    if (triggerIsInternal) trackFocusPanel();
+    else trackFocusFirstItem();
+  });
+};
+const AppPanelBase = () => {
+  const {
+    propsWithDefault: { apps, customApps, sectionTitle, customSectionTitle, renderTrigger, onKeyDown },
+    ownerPropsConfig,
+    globalAttributes,
+    xstyledProps,
+    mountedOpenAutofocusPendingRef,
+    focusTrackers: {
+      focusRegion,
+      firstFocusableRef,
+      lastFocusableRef,
+      trackFocusPanel,
+      trackFocusFirstItem,
+      firstFocusableIdx,
+      lastFocusableIdx
+    }
+  } = useContext(DSAppPickerContext);
+  const triggerIsInternal = !renderTrigger;
+  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
+  useMountedOpenAutofocusNuance({
+    pendingRef: mountedOpenAutofocusPendingRef,
+    triggerIsInternal,
+    trackFocusPanel,
+    trackFocusFirstItem
+  });
   const isWrapperFocused = focusRegion === APP_PICKER_REGION_FOCUSES.PANEL;
   const handleWrapperRef = useCallback(
     (node) => {
@@ -41,27 +73,12 @@ const AppPanelBase = (props) => {
   const handleAppClick = useCallback((e, app) => {
     if (app.onClick) app.onClick(e, app);
   }, []);
-  const handleOnKeyDownWrapper = useCallback(
-    (e) => {
-      if (onKeyDown) onKeyDown(e);
-      if (!onKeyDown && e.key === "Escape") {
-        triggerRef?.current?.focus();
-        close();
-      }
-    },
-    [onKeyDown, triggerRef, close]
-  );
   const handleOnKeyDown = useFocusTrap({
     firstElementRef: firstFocusableRef,
     lastElementRef: lastFocusableRef,
-    onKeyDown: handleOnKeyDownWrapper
+    onKeyDown
   });
   const totalAppsLength = useMemo(() => apps.length + customApps.length, [apps.length, customApps.length]);
-  const layout = useMemo(() => {
-    const cols = ["repeat(3, 92px)"];
-    const rows = ["auto"];
-    return { rows, cols };
-  }, []);
   return /* @__PURE__ */ jsxs(
     StyledWrapper,
     {
@@ -69,8 +86,8 @@ const AppPanelBase = (props) => {
       role: "listbox",
       innerRef: handleWrapperRef,
       "data-testid": DSAppPickerDataTestIds.ROOT,
-      cols: layout.cols,
-      rows: layout.rows,
+      cols: wrapperGridLayout.cols,
+      rows: wrapperGridLayout.rows,
       tabIndex: -1,
       "aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
       ...ownerPropsConfig,