@elliemae/ds-app-picker 3.70.0-next.53 → 3.70.0-next.58

package/dist/cjs/DSAppPicker.js

@@ -35,74 +35,16 @@ module.exports = __toCommonJS(DSAppPicker_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_floating_context = require("@elliemae/ds-floating-context");
-var import_AppPanel = require("./parts/AppPanel.js");
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_constants = require("./constants/index.js");
+var import_react = __toESM(require("react"));
 var import_useAppPicker = require("./config/useAppPicker.js");
-var import_useAppPickerBehavior = require("./config/useAppPickerBehavior.js");
+var import_constants = require("./constants/index.js");
 var import_DSAppPickerCTX = require("./DSAppPickerCTX.js");
-var import_style = require("./parts/style.js");
-var import_Trigger = require("./parts/Trigger.js");
+var import_AppPickerContent = require("./parts/AppPickerFloatingContext/AppPickerContent.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const DSAppPicker = (props) => {
   const appPickerConfig = (0, import_useAppPicker.useAppPicker)(props);
-  const {
-    Icon,
-    renderTrigger,
-    resolvedIsOpen,
-    floatingStyles,
-    arrowStyles,
-    floatingContext,
-    ownerPropsConfig,
-    defaultTriggerRef,
-    triggerRef,
-    wasOpenedByKeyboardRef,
-    handleClose,
-    handleTriggerRef,
-    handleTriggerClick,
-    floatingInnerRef,
-    focusTracker
-  } = (0, import_useAppPickerBehavior.useAppPickerBehavior)(appPickerConfig);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSAppPickerCTX.DSAppPickerContext.Provider, { value: focusTracker, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Trigger.Trigger,
-      {
-        Icon,
-        isOpen: resolvedIsOpen,
-        setRef: handleTriggerRef,
-        ownerProps: ownerPropsConfig,
-        onClick: handleTriggerClick,
-        renderTrigger
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_style.StyledAppPickerFloating,
-      {
-        innerRef: floatingInnerRef,
-        isOpen: resolvedIsOpen,
-        floatingStyles,
-        context: floatingContext,
-        getOwnerProps: ownerPropsConfig.getOwnerProps,
-        getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_AppPanel.AppPanel,
-            {
-              ...appPickerConfig.propsWithDefault,
-              ownerPropsConfig,
-              globalAttributes: appPickerConfig.globalAttributes,
-              xstyledProps: appPickerConfig.xstyledProps,
-              close: handleClose,
-              triggerRef: triggerRef || defaultTriggerRef,
-              triggerIsInternal: !renderTrigger,
-              wasOpenedByKeyboardRef
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
-        ]
-      }
-    )
-  ] });
+  const ctx = import_react.default.useMemo(() => ({ ...appPickerConfig }), [appPickerConfig]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSAppPickerCTX.DSAppPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPickerContent.AppPickerContent, {}) });
 };
 DSAppPicker.displayName = import_constants.DSAppPickerName;
 const AppPickerWithSchema = (0, import_ds_props_helpers.describe)(DSAppPicker);

package/dist/cjs/DSAppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSAppPicker.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCjB;AAlCN,8BAAyB;AACzB,iCAA6B;AAC7B,sBAAyB;AAEzB,mCAA2C;AAC3C,uBAAgC;AAChC,0BAA6B;AAC7B,kCAAqC;AACrC,4BAAmC;AACnC,mBAAwC;AACxC,qBAAwB;AAExB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,sBAAkB,kCAAa,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,QAAI,kDAAqB,eAAe;AAExC,SACE,6CAAC,yCAAmB,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,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,0BAAsB,kCAAS,WAAW;AAChD,oBAAoB,YAAY;",
-  "names": []
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAfN,8BAAyB;AACzB,mBAAkB;AAClB,0BAA6B;AAC7B,uBAAgC;AAChC,4BAAwD;AACxD,8BAAiC;AAEjC,mCAA2C;AAE3C,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,sBAAkB,kCAAa,KAAK;AAC1C,QAAM,MAAsB,aAAAA,QAAM,QAAQ,OAAO,EAAE,GAAG,gBAAgB,IAAI,CAAC,eAAe,CAAC;AAE3F,SACE,4CAAC,yCAAmB,UAAnB,EAA4B,OAAO,KAClC,sDAAC,4CAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,0BAAsB,kCAAS,WAAW;AAChD,oBAAoB,YAAY;",
+  "names": ["React"]
 }

package/dist/cjs/DSAppPickerCTX.js

@@ -33,26 +33,6 @@ __export(DSAppPickerCTX_exports, {
 module.exports = __toCommonJS(DSAppPickerCTX_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const defaultFocusContext = {
-  focusRegion: "",
-  firstFocusableRef: { current: null },
-  lastFocusableRef: { current: null },
-  registerChip: () => {
-  },
-  trackFocusChip: () => {
-  },
-  trackFocusRegionReset: () => {
-  },
-  trackFocusTrigger: () => {
-  },
-  trackFocusPanel: () => {
-  },
-  trackFocusSelectedItem: () => {
-  },
-  trackFocusFirstItem: () => {
-  },
-  trackFocusItemAtIndex: () => {
-  }
-};
-const DSAppPickerContext = (0, import_react.createContext)(defaultFocusContext);
+const defaultContext = {};
+const DSAppPickerContext = (0, import_react.createContext)(defaultContext);
 //# sourceMappingURL=DSAppPickerCTX.js.map

package/dist/cjs/DSAppPickerCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSAppPickerCTX.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqC;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,yBAAqB,4BAAiC,mBAAmB;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAK9B,MAAM,iBAAiB,CAAC;AAIjB,MAAM,yBAAqB,4BAA8B,cAAc;",
   "names": []
 }

package/dist/cjs/config/useAppPicker.js

@@ -32,24 +32,41 @@ __export(useAppPicker_exports, {
 });
 module.exports = __toCommonJS(useAppPicker_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = __toESM(require("react"));
+var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useFocusTracker = require("./useFocusTracker.js");
 var import_useValidateProps = require("./useValidateProps.js");
 const useAppPicker = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSAppPickerPropTypesSchema);
   const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, propsWithDefault);
-  const globalAttributes = (0, import_ds_props_helpers.getGlobalAttributes)(props);
-  const xstyledProps = (0, import_ds_props_helpers.getXstyledProps)(props);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  const wasOpenedByKeyboardRef = (0, import_react.useRef)(false);
+  const { isOpen, apps, customApps, id } = propsWithDefault;
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
+  const resolvedIsOpen = typeof isOpen === "boolean" ? isOpen : internalIsOpen;
+  const mountedOpenAutofocusPendingRef = (0, import_react.useRef)(resolvedIsOpen);
+  const allApps = (0, import_react.useMemo)(() => [...apps, ...customApps], [apps, customApps]);
+  const useFocusTrackerConfig = (0, import_react.useMemo)(() => ({ allApps }), [allApps]);
+  const focusTrackers = (0, import_useFocusTracker.useFocusTracker)(useFocusTrackerConfig);
+  const instanceUid = import_react.default.useMemo(() => id || `ds-app-picker-${(0, import_uid.uid)(5)}`, [id]);
   return import_react.default.useMemo(
     () => ({
+      focusTrackers,
       propsWithDefault,
       ownerPropsConfig,
       globalAttributes,
-      xstyledProps
+      xstyledProps,
+      wasOpenedByKeyboardRef,
+      mountedOpenAutofocusPendingRef,
+      resolvedIsOpen,
+      setInternalIsOpen,
+      instanceUid
     }),
-    [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps]
+    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid]
   );
 };
 //# sourceMappingURL=useAppPicker.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useAppPicker.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAKO;AACP,mCAA4E;AAC5E,8BAAiC;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,gDAAiB,kBAAkB,uDAA0B;AAM7D,QAAM,uBAAmB,uCAAc,kBAAkB,gBAAgB;AAEzE,QAAM,uBAAmB,6CAAwC,KAAK;AACtE,QAAM,mBAAe,yCAAoC,KAAK;AAE9D,SAAO,aAAAA,QAAM;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 {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\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, id } = 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  const instanceUid = React.useMemo(() => id || `ds-app-picker-${uid(5)}`, [id]);\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      instanceUid,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,mBAAiD;AACjD,iBAAoB;AACpB,mCAA4E;AAC5E,6BAAgC;AAChC,8BAAiC;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,gDAAiB,kBAAkB,uDAA0B;AAM7D,QAAM,uBAAmB,uCAAc,kBAAkB,gBAAgB;AAEzE,QAAM,uBAAmB,gDAA2C,KAAK;AACzE,QAAM,mBAAe,4CAAuC,KAAK;AAIjE,QAAM,6BAAyB,qBAAO,KAAK;AAO3C,QAAM,EAAE,QAAQ,MAAM,YAAY,GAAG,IAAI;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,qCAAiC,qBAAO,cAAc;AAE5D,QAAM,cAAU,sBAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,4BAAwB,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,oBAAgB,wCAAgB,qBAAqB;AAE3D,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,MAAM,qBAAiB,gBAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAE7E,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,gBAAgB,WAAW;AAAA,EACjH;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useFocusTracker.js

@@ -28,25 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useFocusTracker_exports = {};
 __export(useFocusTracker_exports, {
-  getChipRegionId: () => getChipRegionId,
   useFocusTracker: () => useFocusTracker
 });
 module.exports = __toCommonJS(useFocusTracker_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_constants = require("../constants/index.js");
-const CHIP_REGION_PREFIX = "chip-";
-const getChipRegionId = (chipId) => `${CHIP_REGION_PREFIX}${chipId}`;
-const useFocusTracker = () => {
+var import_getChipId = require("../util/getChipId.js");
+var import_getChipRegionId = require("../util/getChipRegionId.js");
+const useFocusTracker = (config) => {
+  const { allApps } = config;
+  const firstFocusableIdx = (0, import_react.useMemo)(() => allApps.findIndex((app) => !app.disabled), [allApps]);
+  const lastFocusableIdx = (0, import_react.useMemo)(() => allApps.reduce((acc, app, i) => !app.disabled ? i : acc, -1), [allApps]);
   const [focusRegion, setFocusRegion] = (0, import_react.useState)(import_constants.APP_PICKER_REGION_FOCUSES.RESET);
-  const chipIdRegistry = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const firstFocusableRef = (0, import_react.useRef)(null);
   const lastFocusableRef = (0, import_react.useRef)(null);
-  const registerChip = (0, import_react.useCallback)((app, chipId) => {
-    chipIdRegistry.current.set(app, chipId);
-  }, []);
   const trackFocusChip = (0, import_react.useCallback)((chipId) => {
-    setFocusRegion(getChipRegionId(chipId));
+    setFocusRegion((0, import_getChipRegionId.getChipRegionId)(chipId));
   }, []);
   const trackFocusRegionReset = (0, import_react.useCallback)(() => {
     setFocusRegion(import_constants.APP_PICKER_REGION_FOCUSES.RESET);
@@ -57,38 +55,30 @@ const useFocusTracker = () => {
   const trackFocusPanel = (0, import_react.useCallback)(() => {
     setFocusRegion(import_constants.APP_PICKER_REGION_FOCUSES.PANEL);
   }, []);
-  const trackFocusSelectedItem = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);
+    if (index !== -1) setFocusRegion((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(allApps[index], index)));
+  }, [allApps]);
+  const trackFocusFirstItem = (0, import_react.useCallback)(() => {
+    if (firstFocusableIdx !== -1) {
+      setFocusRegion((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(allApps[firstFocusableIdx], firstFocusableIdx)));
     }
-  }, []);
+  }, [firstFocusableIdx, allApps]);
   const trackFocusItemAtIndex = (0, import_react.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((0, import_getChipRegionId.getChipRegionId)((0, import_getChipId.getChipId)(target, index)));
     },
-    []
+    [allApps]
   );
   return (0, import_react.useMemo)(
     () => ({
+      firstFocusableIdx,
+      lastFocusableIdx,
       focusRegion,
       firstFocusableRef,
       lastFocusableRef,
-      registerChip,
       trackFocusChip,
       trackFocusRegionReset,
       trackFocusTrigger,
@@ -98,10 +88,9 @@ const useFocusTracker = () => {
       trackFocusItemAtIndex
     }),
     [
+      firstFocusableIdx,
+      lastFocusableIdx,
       focusRegion,
-      firstFocusableRef,
-      lastFocusableRef,
-      registerChip,
       trackFocusChip,
       trackFocusRegionReset,
       trackFocusTrigger,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useFocusTracker.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,uBAA0C;AAG1C,MAAM,qBAAqB;AAEpB,MAAM,kBAAkB,CAAC,WAA2B,GAAG,kBAAkB,GAAG,MAAM;AAElF,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,2CAA0B,KAAK;AAKtF,QAAM,qBAAiB,qBAAO,oBAAI,IAAkC,CAAC;AAIrE,QAAM,wBAAoB,qBAA2B,IAAI;AACzD,QAAM,uBAAmB,qBAA2B,IAAI;AAExD,QAAM,mBAAe,0BAAY,CAAC,KAA2B,WAAmB;AAC9E,mBAAe,QAAQ,IAAI,KAAK,MAAM;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,0BAAY,CAAC,WAAmB;AACrD,mBAAe,gBAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,mBAAe,2CAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB,0BAAY,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,0BAAsB,0BAAY,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,4BAAwB;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,aAAO;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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,uBAA0C;AAE1C,uBAA0B;AAC1B,6BAAgC;AAMzB,MAAM,kBAAkB,CAAC,WAAgC;AAC9D,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,wBAAoB,sBAAQ,MAAM,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC5F,QAAM,uBAAmB,sBAAQ,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAO,CAAC,IAAI,WAAW,IAAI,KAAM,EAAE,GAAG,CAAC,OAAO,CAAC;AAEhH,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,2CAA0B,KAAK;AAItF,QAAM,wBAAoB,qBAA2B,IAAI;AACzD,QAAM,uBAAmB,qBAA2B,IAAI;AAExD,QAAM,qBAAiB,0BAAY,CAAC,WAAmB;AACrD,uBAAe,wCAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,mBAAe,2CAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,mBAAe,2CAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB,0BAAY,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,oBAAe,4CAAgB,4BAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,QAAI,sBAAsB,IAAI;AAC5B,yBAAe,4CAAgB,4BAAU,QAAQ,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAAA,IAC1F;AAAA,EACF,GAAG,CAAC,mBAAmB,OAAO,CAAC;AAE/B,QAAM,4BAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,OAAQ,oBAAe,4CAAgB,4BAAU,QAAQ,KAAK,CAAC,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,aAAO;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/cjs/constants/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   APP_PICKER_REGION_FOCUSES: () => APP_PICKER_REGION_FOCUSES,
+  CHIP_REGION_PREFIX: () => CHIP_REGION_PREFIX,
   DSAppPickerDataTestIds: () => DSAppPickerDataTestIds,
   DSAppPickerName: () => DSAppPickerName,
   DSAppPickerSlots: () => DSAppPickerSlots
@@ -42,8 +43,10 @@ const APP_PICKER_REGION_FOCUSES = {
   TRIGGER: "trigger",
   PANEL: "panel"
 };
+const CHIP_REGION_PREFIX = "chip-";
 const DSAppPickerSlots = {
   ROOT: "root",
+  GROUP: "group",
   ITEM: "item",
   TITLE: "title",
   SEPARATOR: "separator",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAI,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["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  GROUP: 'group',\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAO;AAAA,EACP,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,OAAI,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/cjs/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

package/dist/cjs/parts/AppPanel.js

@@ -33,37 +33,86 @@ __export(AppPanel_exports, {
 module.exports = __toCommonJS(AppPanel_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
-var import_style = require("./style.js");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
 var import_constants = require("../constants/index.js");
-var import_AppSection = require("./AppSection.js");
 var import_DSAppPickerCTX = require("../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
-  } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
-  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
-  const allItems = (0, import_react.useMemo)(() => [...apps, ...customApps], [apps, customApps]);
-  const firstFocusableIdx = (0, import_react.useMemo)(() => allItems.findIndex((app) => !app.disabled), [allItems]);
-  const lastFocusableIdx = (0, import_react.useMemo)(
-    () => allItems.reduce((acc, app, i) => !app.disabled ? i : acc, -1),
-    [allItems]
-  );
+var import_AppSection = require("./AppSection.js");
+var import_shared_styles = require("./shared-styles.js");
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ROOT })`
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  min-width: 308px;
+  min-height: 110px;
+  max-height: 449px;
+  width: 308px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Baseline 2024: reserve scrollbar gutter so the layout doesn't shift between overflow/no-overflow.
+     Replaces a JS isOverflow detection effect that toggled right padding. */
+  scrollbar-gutter: stable;
+  margin: 0;
+  padding: 0 0 8px 16px;
+  &:focus {
+    outline: none;
+  }
+`;
+const StyledSeparator = (0, import_ds_system.styled)("hr", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.SEPARATOR })`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};
+  border-bottom: none;
+  width: 100%;
+  margin: 8px 0 0 0;
+`;
+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 = import_react.default.useRef(false);
+  const executeInitialFocusRef = import_react.default.useRef(callback);
+  executeInitialFocusRef.current = callback;
   (0, import_react.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: { customApps, renderTrigger, onKeyDown },
+    ownerPropsConfig,
+    globalAttributes,
+    xstyledProps,
+    mountedOpenAutofocusPendingRef,
+    focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusPanel, trackFocusFirstItem }
+  } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
+  const triggerIsInternal = !renderTrigger;
+  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
+  useMountedOpenAutofocusNuance({
+    pendingRef: mountedOpenAutofocusPendingRef,
+    triggerIsInternal,
+    trackFocusPanel,
+    trackFocusFirstItem
+  });
   const isWrapperFocused = focusRegion === import_constants.APP_PICKER_REGION_FOCUSES.PANEL;
   const handleWrapperRef = (0, import_react.useCallback)(
     (node) => {
@@ -71,84 +120,28 @@ const AppPanelBase = (props) => {
     },
     [isWrapperFocused]
   );
-  const handleAppClick = (0, import_react.useCallback)((e, app) => {
-    if (app.onClick) app.onClick(e, app);
-  }, []);
-  const handleOnKeyDownWrapper = (0, import_react.useCallback)(
-    (e) => {
-      if (onKeyDown) onKeyDown(e);
-      if (!onKeyDown && e.key === "Escape") {
-        triggerRef?.current?.focus();
-        close();
-      }
-    },
-    [onKeyDown, triggerRef, close]
-  );
   const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
     firstElementRef: firstFocusableRef,
     lastElementRef: lastFocusableRef,
-    onKeyDown: handleOnKeyDownWrapper
+    onKeyDown
   });
-  const totalAppsLength = (0, import_react.useMemo)(() => apps.length + customApps.length, [apps.length, customApps.length]);
-  const layout = (0, import_react.useMemo)(() => {
-    const cols = ["repeat(3, 92px)"];
-    const rows = ["auto"];
-    return { rows, cols };
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_style.StyledWrapper,
+    StyledWrapper,
     {
-      forwardedAs: "ul",
-      role: "listbox",
       innerRef: handleWrapperRef,
       "data-testid": import_constants.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,
       ...safeGlobalAttributes,
       ...xstyledProps,
       onKeyDown: handleOnKeyDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AppSection.AppSection,
-          {
-            items: apps,
-            title: sectionTitle,
-            positionOffset: 0,
-            totalCount: totalAppsLength,
-            ownerProps: ownerPropsConfig,
-            onItemClick: handleAppClick,
-            firstFocusableIdx,
-            lastFocusableIdx
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppSection.AppSection, {}),
         customApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_style.StyledListItemFullRow,
-            {
-              "data-testid": import_constants.DSAppPickerDataTestIds.ROW,
-              "aria-hidden": true,
-              role: "group",
-              ...ownerPropsConfig,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledSeparator, { "data-testid": import_constants.DSAppPickerDataTestIds.SEPARATOR, role: "presentation", ...ownerPropsConfig })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_AppSection.AppSection,
-            {
-              items: customApps,
-              title: customSectionTitle,
-              positionOffset: apps.length,
-              totalCount: totalAppsLength,
-              ownerProps: ownerPropsConfig,
-              onItemClick: handleAppClick,
-              keyPrefix: "custom-",
-              firstFocusableIdx,
-              lastFocusableIdx
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_styles.StyledListItemFullRow, { "data-testid": import_constants.DSAppPickerDataTestIds.ROW, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, { "data-testid": import_constants.DSAppPickerDataTestIds.SEPARATOR, ...ownerPropsConfig }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppSection.AppSection, { isCustomApps: true })
         ] })
       ]
     }