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

package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js

@@ -0,0 +1,83 @@
+"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 AppPickerContent_exports = {};
+__export(AppPickerContent_exports, {
+  AppPickerContent: () => AppPickerContent
+});
+module.exports = __toCommonJS(AppPickerContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
+var import_constants = require("../../constants/index.js");
+var import_DSAppPickerCTX = require("../../DSAppPickerCTX.js");
+var import_AppPanel = require("../AppPanel.js");
+var import_Trigger = require("../Trigger.js");
+var import_useAppPickerFloatingContext = require("./useAppPickerFloatingContext.js");
+const StyledAppPickerFloating = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
+  name: import_constants.DSAppPickerName,
+  slot: import_constants.DSAppPickerSlots.FLOATING_WRAPPER
+})``;
+const AppPickerContent = () => {
+  const {
+    ownerPropsConfig,
+    propsWithDefault,
+    focusTrackers,
+    wasOpenedByKeyboardRef,
+    resolvedIsOpen,
+    setInternalIsOpen
+  } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
+  const { floatingStyles, arrowStyles, floatingContext, floatingInnerRef, handleTriggerRef, handleTriggerClick } = (0, import_useAppPickerFloatingContext.useAppPickerFloatingContext)({
+    propsWithDefault,
+    focusTrackers,
+    wasOpenedByKeyboardRef,
+    resolvedIsOpen,
+    setInternalIsOpen
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Trigger.Trigger, { handleTriggerRef, handleTriggerClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      StyledAppPickerFloating,
+      {
+        innerRef: floatingInnerRef,
+        isOpen: resolvedIsOpen,
+        floatingStyles,
+        context: floatingContext,
+        getOwnerProps: ownerPropsConfig.getOwnerProps,
+        getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPanel.AppPanel, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+        ]
+      }
+    )
+  ] });
+};
+//# sourceMappingURL=AppPickerContent.js.map

package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/AppPickerFloatingContext/AppPickerContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSAppPickerName, DSAppPickerSlots } from '../../constants/index.js';\nimport { DSAppPickerContext } from '../../DSAppPickerCTX.js';\nimport type { DSAppPickerT } from '../../react-desc-prop-types.js';\nimport { AppPanel } from '../AppPanel.js';\nimport { Trigger } from '../Trigger.js';\nimport { useAppPickerFloatingContext } from './useAppPickerFloatingContext.js';\n\nconst StyledAppPickerFloating = styled(FloatingWrapper, {\n  name: DSAppPickerName,\n  slot: DSAppPickerSlots.FLOATING_WRAPPER,\n})``;\n\nexport const AppPickerContent: React.ComponentType<DSAppPickerT.Props> = () => {\n  const {\n    ownerPropsConfig,\n    propsWithDefault,\n    focusTrackers,\n    wasOpenedByKeyboardRef,\n    resolvedIsOpen,\n    setInternalIsOpen,\n  } = useContext(DSAppPickerContext);\n  const { floatingStyles, arrowStyles, floatingContext, floatingInnerRef, handleTriggerRef, handleTriggerClick } =\n    useAppPickerFloatingContext({\n      propsWithDefault,\n      focusTrackers,\n      wasOpenedByKeyboardRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n    });\n  return (\n    <>\n      <Trigger handleTriggerRef={handleTriggerRef} handleTriggerClick={handleTriggerClick} />\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        <PopoverArrow {...arrowStyles} />\n      </StyledAppPickerFloating>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCnB;AAjCJ,iCAA8C;AAC9C,uBAAuB;AACvB,mBAAkC;AAClC,uBAAkD;AAClD,4BAAmC;AAEnC,sBAAyB;AACzB,qBAAwB;AACxB,yCAA4C;AAE5C,MAAM,8BAA0B,yBAAO,4CAAiB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAEM,MAAM,mBAA4D,MAAM;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAkB;AACjC,QAAM,EAAE,gBAAgB,aAAa,iBAAiB,kBAAkB,kBAAkB,mBAAmB,QAC3G,gEAA4B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,SACE,4EACE;AAAA,gDAAC,0BAAQ,kBAAoC,oBAAwC;AAAA,IACrF;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,sDAAC,4BAAS;AAAA,UACV,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js

@@ -0,0 +1,171 @@
+"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 useAppPickerFloatingContext_exports = {};
+__export(useAppPickerFloatingContext_exports, {
+  useAppPickerFloatingContext: () => useAppPickerFloatingContext
+});
+module.exports = __toCommonJS(useAppPickerFloatingContext_exports);
+var React = __toESM(require("react"));
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_react = require("react");
+const useAppPickerFloatingContext = (appPickerConfig) => {
+  const { propsWithDefault, focusTrackers, wasOpenedByKeyboardRef, resolvedIsOpen, setInternalIsOpen } = appPickerConfig;
+  const { onOpen, onClose, actionRef, onClick, onClickOutside, onKeyDown, triggerRef, renderTrigger, isOpen } = propsWithDefault;
+  const triggerIsInternal = !renderTrigger;
+  const isControlled = typeof isOpen === "boolean";
+  const { trackFocusSelectedItem, trackFocusItemAtIndex, trackFocusPanel, trackFocusFirstItem } = focusTrackers;
+  const defaultTriggerRef = (0, import_react.useRef)(null);
+  const handleClickOutside = (0, import_react.useCallback)(
+    (e) => {
+      if (!isControlled) onClose?.({ reason: "click-outside", event: e });
+      setInternalIsOpen(false);
+      onClickOutside?.(e);
+    },
+    [isControlled, onClose, setInternalIsOpen, onClickOutside]
+  );
+  const handleScopedEscape = (0, import_react.useCallback)(
+    (event) => {
+      if (!isControlled) onClose?.({ reason: "escape", event });
+      setInternalIsOpen(false);
+    },
+    [isControlled, onClose, setInternalIsOpen]
+  );
+  const handleFloatingClose = (0, import_react.useCallback)(
+    (info) => {
+      if (info.reason === "controlled-flip" && isControlled) onClose?.({ reason: "controlled" });
+    },
+    [isControlled, onClose]
+  );
+  const handleFloatingOpen = (0, import_react.useCallback)(
+    (info) => {
+      if (wasOpenedByKeyboardRef.current && triggerIsInternal) trackFocusSelectedItem();
+      else if (triggerIsInternal) trackFocusPanel();
+      else trackFocusFirstItem();
+      if (info.reason === "controlled-flip" && isControlled) onOpen?.({ reason: "controlled" });
+    },
+    [
+      wasOpenedByKeyboardRef,
+      triggerIsInternal,
+      trackFocusSelectedItem,
+      trackFocusPanel,
+      trackFocusFirstItem,
+      isControlled,
+      onOpen
+    ]
+  );
+  const floatingContextConfig = (0, import_react.useMemo)(
+    () => ({
+      placement: "bottom",
+      // Arrow tip is ~6.1px above the panel top (arrowPlacementBase16 ≈ 17.5px, tip at 11.4px from box top).
+      // 4px spec gap → 4 + 6.1 ≈ 10px offset.
+      customOffset: [0, 10],
+      externallyControlledIsOpen: resolvedIsOpen,
+      withoutAnimation: true,
+      onClickOutside: handleClickOutside,
+      // closeOnEscape = !onKeyDown: with a consumer onKeyDown, useFloatingContext neither routes
+      // the Escape to onEscape (see handleScopedEscape) nor returns focus to the trigger — the
+      // consumer's onKeyDown owns the key entirely.
+      closeOnEscape: !onKeyDown,
+      onClose: handleFloatingClose,
+      onEscape: handleScopedEscape,
+      onOpen: handleFloatingOpen,
+      returnFocusToReference: true,
+      externalReferenceElement: triggerRef?.current || defaultTriggerRef.current
+    }),
+    [
+      handleClickOutside,
+      handleScopedEscape,
+      handleFloatingClose,
+      handleFloatingOpen,
+      onKeyDown,
+      resolvedIsOpen,
+      triggerRef
+    ]
+  );
+  const {
+    refs: floatingRefs,
+    floatingStyles,
+    arrowStyles,
+    context: floatingContext
+  } = (0, import_ds_floating_context.useFloatingContext)(floatingContextConfig);
+  const handleTriggerRef = (0, import_react.useCallback)(
+    (node) => {
+      defaultTriggerRef.current = node;
+      floatingRefs.setReference(node);
+      if (triggerRef) {
+        triggerRef.current = node;
+      }
+    },
+    [floatingRefs, triggerRef]
+  );
+  const handleActionRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node && actionRef?.current) {
+        actionRef.current.focusToIndex = (index) => {
+          trackFocusItemAtIndex(index);
+        };
+        actionRef.current.focusWrapper = () => {
+          trackFocusPanel();
+        };
+        actionRef.current.focusSelectedOrFirstAvailable = () => {
+          trackFocusSelectedItem();
+        };
+      }
+    },
+    [actionRef, trackFocusItemAtIndex, trackFocusPanel, trackFocusSelectedItem]
+  );
+  const floatingInnerRef = (0, import_react.useCallback)(
+    (node) => {
+      floatingRefs.setFloating(node);
+      handleActionRef(node);
+    },
+    [floatingRefs.setFloating, handleActionRef]
+  );
+  const handleTriggerClick = (0, import_react.useCallback)(
+    (e) => {
+      wasOpenedByKeyboardRef.current = e.detail === 0;
+      onClick?.(e);
+      if (!isControlled) {
+        if (resolvedIsOpen) onClose?.({ reason: "trigger-toggle", event: e });
+        else onOpen?.({ reason: "trigger", event: e });
+      }
+      setInternalIsOpen((prev) => !prev);
+    },
+    [onClick, wasOpenedByKeyboardRef, setInternalIsOpen, isControlled, resolvedIsOpen, onClose, onOpen]
+  );
+  return {
+    floatingStyles,
+    arrowStyles,
+    floatingContext,
+    handleTriggerRef,
+    handleTriggerClick,
+    floatingInnerRef
+  };
+};
+//# sourceMappingURL=useAppPickerFloatingContext.js.map

package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/AppPickerFloatingContext/useAppPickerFloatingContext.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { useAppPicker } from '../../config/useAppPicker.js';\nimport type { DSAppPickerT } from '../../react-desc-prop-types.js';\n\n/**\n * useAppPickerFloatingContext \u2014 the single point that wires DSAppPicker to\n * `@elliemae/ds-floating-context`'s `useFloatingContext`.\n *\n * WHAT IT DOES (as a black box):\n * AppPicker can be used in two very different ways:\n *  - Controlled: the consumer supplies `isOpen` and drives the open/close transition.\n *          \u2514\u2192 AppPicker can't be event-based as the flip might originate from any cause and we don't own the business logic\n *                  \u2514\u2192 we need to ensure WCAG embedded behaviours (focus, Escape, click-outside) are wired to the consumer's `isOpen` flip.\n *  - Uncontrolled: the consumer does not supply `isOpen` and AppPicker owns the full flows, we only notify the consumer of the transition and its cause.\n *\n * The AppPicker and this file in particular serves as the one place that coordinates the two different ways to use the component and wires with the useFloatingContext hook.\n * This files owns:\n *  - Focus management relative to open/close transitions (initial focus on open, return focus to trigger on close)\n *  - Escape key handling (scoped to the panel and trigger)\n *  - Click-outside handling (panel and trigger)\n *  - Imperative focus API via actionRef\n *  - Controlled/Uncontrolled forks and differences in event notification (eager vs controlled-flip)\n *  - OnOpen and OnClose notification to the consumer with the correct reason and event (if any)\n *\n * IMPORTANT:\n *  Parts of the flow/logic required in this file is offloaded to useFloatingContext internal assumptions and logics.\n *  Changes to useFloatingContext may break the flows in this file, or alter them in ways that are not obvious, the two are closely coupled.\n *\n * DATA / EVENT FLOW\n *\n * Two concerns run in parallel and must not be conflated: (A) what makes the panel show/hide and take\n * focus, and (B) how the consumer is told it opened/closed. They have different origins.\n *\n * (A) PANEL VISIBILITY + FOCUS \u2014  useFloatingContext internal co-ownership of the flow.\n *\n *                a user action                          \u2502 \u2502                      isOpen prop flip\n *    (trigger click / scoped Escape / click outside)    \u2502 \u2502   (not a traceable user action, but the consumer's own flip)\n *      uncontrolled - flips the internal flag           \u2502 \u2502 controlled - AppPicker's own flip is inert, consumer drives it\n *                                                        \u2502\n *                                                        \u25BC\n *                                              resolvedIsOpen changes\n *                                                        \u2502\n *                                                        \u25BC\n *                        useFloatingContext (externallyControlledIsOpen) detects the transition\n *                                                        \u2502\n *                                                        \u25BC\n *                     on open                           \u2502 \u2502              on close\n *                handleFloatingOpen                     \u2502 \u2502   focus is only restored after a SCOPED ESCAPE:\n *  AppPicker business logic seeds initial focus         \u2502 \u2502   useFloatingContext returns focus to the trigger\n *                                                        \u2502 \u2502   (returnFocusToReference). Click-outside / toggle\n *                                                        \u2502 \u2502   / controlled closes do NOT move focus, and\n *                                                        \u2502 \u2502   handleFloatingClose only NOTIFIES (see (B)).\n *                                                        \u2502\n *                                                        \u25BC\n *                          \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                          \u2502  visibility + focus are delivered to final user as expected \u2502\n *                          \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n * (B) CONSUMER NOTIFICATION\n *   Each flow below is the UNCONTROLLED path, where AppPicker owns the transition and can name the true cause.\n *   The controlled equivalent for every trigger is stated once at the end.\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 OPENING TRIGGERS FLOWS \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * TRIGGER CLICK (uncontrolled)\n *                                    trigger click\n *                       user clicks the internal trigger, panel closed\n *                                          \u2502\n *                                          \u25BC\n *                                 handleTriggerClick\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onOpen { reason: 'trigger', event }         \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 CLOSING TRIGGERS FLOWS \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * KEYBOARD ESCAPE (uncontrolled)\n *                       Escape within the panel DOM tree or the trigger\n *            scoped Escape (routed only while closeOnEscape, i.e. no consumer onKeyDown)\n *                                          \u2502\n *                                          \u25BC\n *                                onEscape \u2192 handleScopedEscape\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onClose { reason: 'escape', event }         \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n *  CLICK OUTSIDE (uncontrolled)\n *                           Click outside the panel DOM tree and the trigger\n *                useFloatingContext detects a pointer press outside the panel + trigger\n *                                          \u2502\n *                                          \u25BC\n *                                   handleClickOutside\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onClose { reason: 'click-outside', event }  \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n *  CLICK ON TRIGGER (uncontrolled, while internal state is open)\n *                              trigger click while open\n *                       user clicks the internal trigger, panel open\n *                                          \u2502\n *                                          \u25BC\n *                                    handleTriggerClick\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502 onClose { reason: 'trigger-toggle', event }  \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 CONTROLLED OPEN & CLOSE FLOWS    \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *   AppPicker's own flip is inert;\n *   We can't fire EAGERLY and we can't track an originating event, there may be NONE\n *   The consumer's `isOpen` flip is reacted to by useFloatingContext, which fires onOpen / onClose with reason 'controlled-flip'\n *   We wire the visual and focus Flow (A) above, and then notify the consumer with reason 'controlled' (no event)\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onOpen  { reason: 'controlled' }            \u2502                    no event\n *                 \u2502  onClose { reason: 'controlled' }            \u2502   a prop flip is not a traceable user action\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *\n *     Eager (uncontrolled) and controlled-flip paths are mutually exclusive on `isControlled`.\n *     the consumer is notified exactly once per transition \u2014 never twice.\n * On Escape specifically\n *   a controlled consumer supplies onKeyDown, so closeOnEscape is false in useFloatingContext\n *                   \u2514\u2192 AppPicker's onEscape never runs \u2014\n *                                   \u2514\u2192 the close arrives purely by listening to the flag transition\n * ------------------------------------------------------------------------------------------------------------------------\n * A nuance for an edge case:\n *\n * Declarative mount-open (rendered already-open).\n * useFloatingContext fires no onOpen for it (it did not transition to open, it started open),\n *    \u2514\u2192 neither the focus-seed (A) nor the notification (B) runs\n * AppPanel compensates this locally via useMountedOpenAutofocusNuance, it needs to be seen if this is even desired or should be removed\n * ------------------------------------------------------------------------------------------------------------------------\n */\n\ntype ConfiguredAppPickerCtx = ReturnType<typeof useAppPicker>;\n\ntype AppPickerFloatingContextConfig = {\n  propsWithDefault: DSAppPickerT.InternalProps;\n  focusTrackers: ConfiguredAppPickerCtx['focusTrackers'];\n  wasOpenedByKeyboardRef: ConfiguredAppPickerCtx['wasOpenedByKeyboardRef'];\n  // Open state is owned by useAppPicker (lifted so useFocusTracker can seed focus in the same fiber).\n  // This hook reads the resolved value for positioning and flips it through the setter to close/toggle.\n  resolvedIsOpen: ConfiguredAppPickerCtx['resolvedIsOpen'];\n  setInternalIsOpen: ConfiguredAppPickerCtx['setInternalIsOpen'];\n};\n\nexport const useAppPickerFloatingContext = (appPickerConfig: AppPickerFloatingContextConfig) => {\n  const { propsWithDefault, focusTrackers, wasOpenedByKeyboardRef, resolvedIsOpen, setInternalIsOpen } =\n    appPickerConfig;\n  const { onOpen, onClose, actionRef, onClick, onClickOutside, onKeyDown, triggerRef, renderTrigger, isOpen } =\n    propsWithDefault;\n  const triggerIsInternal = !renderTrigger;\n  // Controlled when the consumer supplies `isOpen`. This decides who owns a transition: uncontrolled,\n  // AppPicker's own handlers own it and report the specific event-carrying reason eagerly; controlled,\n  // AppPicker's own flips are inert and the consumer drives open/close via the prop (reason 'controlled').\n  const isControlled = typeof isOpen === 'boolean';\n\n  const { trackFocusSelectedItem, trackFocusItemAtIndex, trackFocusPanel, trackFocusFirstItem } = focusTrackers;\n\n  const defaultTriggerRef = useRef<HTMLButtonElement>(null);\n\n  // Uncontrolled close \u2014 see file header (B) \"CLICK OUTSIDE\". Also forwards the raw event to onClickOutside.\n  const handleClickOutside = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (!isControlled) onClose?.({ reason: 'click-outside', event: e });\n      setInternalIsOpen(false);\n      onClickOutside?.(e as MouseEvent);\n    },\n    [isControlled, onClose, setInternalIsOpen, onClickOutside],\n  );\n\n  // onEscape target \u2014 see file header (B) \"KEYBOARD ESCAPE\". Scoped Escape only; gated by closeOnEscape\n  // (`!onKeyDown`, see the config below).\n  const handleScopedEscape = useCallback(\n    (event: KeyboardEvent) => {\n      if (!isControlled) onClose?.({ reason: 'escape', event });\n      setInternalIsOpen(false);\n    },\n    [isControlled, onClose, setInternalIsOpen],\n  );\n\n  // Controlled close notify \u2014 see file header \"CONTROLLED OPEN & CLOSE FLOWS\". The guard also filters\n  // out a non-scoped Escape, which reaches here as reason 'interaction' (not 'controlled-flip').\n  const handleFloatingClose = useCallback(\n    (info: DSHookFloatingContextT.OpenChange) => {\n      if (info.reason === 'controlled-flip' && isControlled) onClose?.({ reason: 'controlled' });\n    },\n    [isControlled, onClose],\n  );\n\n  // Open transition \u2014 see file header (A) (focus) + \"CONTROLLED OPEN & CLOSE FLOWS\" (notify). Seeds\n  // initial focus (targets per the CONSUMER CONFIGURATION table) and, when controlled, notifies the\n  // consumer. Mount-open is not a transition, so this never fires for it (AppPanel's\n  // useMountedOpenAutofocusNuance handles that one case).\n  const handleFloatingOpen = useCallback(\n    (info: DSHookFloatingContextT.OpenChange) => {\n      if (wasOpenedByKeyboardRef.current && triggerIsInternal) trackFocusSelectedItem();\n      else if (triggerIsInternal) trackFocusPanel();\n      else trackFocusFirstItem();\n      if (info.reason === 'controlled-flip' && isControlled) onOpen?.({ reason: 'controlled' });\n    },\n    [\n      wasOpenedByKeyboardRef,\n      triggerIsInternal,\n      trackFocusSelectedItem,\n      trackFocusPanel,\n      trackFocusFirstItem,\n      isControlled,\n      onOpen,\n    ],\n  );\n\n  const floatingContextConfig = useMemo(\n    () =>\n      ({\n        placement: 'bottom',\n        // Arrow tip is ~6.1px above the panel top (arrowPlacementBase16 \u2248 17.5px, tip at 11.4px from box top).\n        // 4px spec gap \u2192 4 + 6.1 \u2248 10px offset.\n        customOffset: [0, 10],\n        externallyControlledIsOpen: resolvedIsOpen,\n        withoutAnimation: true,\n        onClickOutside: handleClickOutside,\n        // closeOnEscape = !onKeyDown: with a consumer onKeyDown, useFloatingContext neither routes\n        // the Escape to onEscape (see handleScopedEscape) nor returns focus to the trigger \u2014 the\n        // consumer's onKeyDown owns the key entirely.\n        closeOnEscape: !onKeyDown,\n        onClose: handleFloatingClose,\n        onEscape: handleScopedEscape,\n        onOpen: handleFloatingOpen,\n        returnFocusToReference: true,\n        externalReferenceElement: triggerRef?.current || defaultTriggerRef.current,\n      }) as DSHookFloatingContextT.Props,\n    [\n      handleClickOutside,\n      handleScopedEscape,\n      handleFloatingClose,\n      handleFloatingOpen,\n      onKeyDown,\n      resolvedIsOpen,\n      triggerRef,\n    ],\n  );\n\n  const {\n    refs: floatingRefs,\n    floatingStyles,\n    arrowStyles,\n    context: floatingContext,\n  } = useFloatingContext(floatingContextConfig);\n\n  const handleTriggerRef = useCallback<React.RefCallback<HTMLButtonElement>>(\n    (node) => {\n      (defaultTriggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      floatingRefs.setReference(node);\n      if (triggerRef) {\n        (triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [floatingRefs, triggerRef],\n  );\n\n  // Populates the consumer's actionRef with imperative focus methods. Fires on mount with the panel\n  // node. Every method routes through the focus tracker \u2014 no DOM queries.\n  const handleActionRef = useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      if (node && actionRef?.current) {\n        actionRef.current.focusToIndex = (index: number) => {\n          trackFocusItemAtIndex(index);\n        };\n        actionRef.current.focusWrapper = () => {\n          trackFocusPanel();\n        };\n        actionRef.current.focusSelectedOrFirstAvailable = () => {\n          trackFocusSelectedItem();\n        };\n      }\n    },\n    [actionRef, trackFocusItemAtIndex, trackFocusPanel, trackFocusSelectedItem],\n  );\n\n  const floatingInnerRef = useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      (floatingRefs.setFloating as React.RefCallback<HTMLDivElement>)(node);\n      handleActionRef(node);\n    },\n    [floatingRefs.setFloating, handleActionRef],\n  );\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      // detail === 0 \u21D2 keyboard activation (Enter/Space), not a pointer. handleFloatingOpen reads\n      // this on the next open transition to pick keyboard-vs-pointer initial focus.\n      wasOpenedByKeyboardRef.current = (e as React.MouseEvent).detail === 0;\n      onClick?.(e);\n      // Uncontrolled eager notify \u2014 see file header (B) \"TRIGGER CLICK\" / \"CLICK ON TRIGGER\".\n      // `resolvedIsOpen` is the pre-flip value: open \u21D2 this click closes (trigger-toggle), else opens.\n      if (!isControlled) {\n        if (resolvedIsOpen) onClose?.({ reason: 'trigger-toggle', event: e });\n        else onOpen?.({ reason: 'trigger', event: e });\n      }\n      setInternalIsOpen((prev) => !prev);\n    },\n    [onClick, wasOpenedByKeyboardRef, setInternalIsOpen, isControlled, resolvedIsOpen, onClose, onOpen],\n  );\n\n  return {\n    floatingStyles,\n    arrowStyles,\n    floatingContext,\n    handleTriggerRef,\n    handleTriggerClick,\n    floatingInnerRef,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAgE;AAEhE,mBAA6C;AAkKtC,MAAM,8BAA8B,CAAC,oBAAoD;AAC9F,QAAM,EAAE,kBAAkB,eAAe,wBAAwB,gBAAgB,kBAAkB,IACjG;AACF,QAAM,EAAE,QAAQ,SAAS,WAAW,SAAS,gBAAgB,WAAW,YAAY,eAAe,OAAO,IACxG;AACF,QAAM,oBAAoB,CAAC;AAI3B,QAAM,eAAe,OAAO,WAAW;AAEvC,QAAM,EAAE,wBAAwB,uBAAuB,iBAAiB,oBAAoB,IAAI;AAEhG,QAAM,wBAAoB,qBAA0B,IAAI;AAGxD,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA+B;AAC9B,UAAI,CAAC,aAAc,WAAU,EAAE,QAAQ,iBAAiB,OAAO,EAAE,CAAC;AAClE,wBAAkB,KAAK;AACvB,uBAAiB,CAAe;AAAA,IAClC;AAAA,IACA,CAAC,cAAc,SAAS,mBAAmB,cAAc;AAAA,EAC3D;AAIA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAyB;AACxB,UAAI,CAAC,aAAc,WAAU,EAAE,QAAQ,UAAU,MAAM,CAAC;AACxD,wBAAkB,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,cAAc,SAAS,iBAAiB;AAAA,EAC3C;AAIA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,SAA4C;AAC3C,UAAI,KAAK,WAAW,qBAAqB,aAAc,WAAU,EAAE,QAAQ,aAAa,CAAC;AAAA,IAC3F;AAAA,IACA,CAAC,cAAc,OAAO;AAAA,EACxB;AAMA,QAAM,yBAAqB;AAAA,IACzB,CAAC,SAA4C;AAC3C,UAAI,uBAAuB,WAAW,kBAAmB,wBAAuB;AAAA,eACvE,kBAAmB,iBAAgB;AAAA,UACvC,qBAAoB;AACzB,UAAI,KAAK,WAAW,qBAAqB,aAAc,UAAS,EAAE,QAAQ,aAAa,CAAC;AAAA,IAC1F;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,4BAAwB;AAAA,IAC5B,OACG;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,MAGX,cAAc,CAAC,GAAG,EAAE;AAAA,MACpB,4BAA4B;AAAA,MAC5B,kBAAkB;AAAA,MAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA,MAIhB,eAAe,CAAC;AAAA,MAChB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,wBAAwB;AAAA,MACxB,0BAA0B,YAAY,WAAW,kBAAkB;AAAA,IACrE;AAAA,IACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,QAAI,+CAAmB,qBAAqB;AAE5C,QAAM,uBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,MAAC,kBAAuE,UAAU;AAClF,mBAAa,aAAa,IAAI;AAC9B,UAAI,YAAY;AACd,QAAC,WAAgE,UAAU;AAAA,MAC7E;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU;AAAA,EAC3B;AAIA,QAAM,sBAAkB;AAAA,IACtB,CAAC,SAAS;AACR,UAAI,QAAQ,WAAW,SAAS;AAC9B,kBAAU,QAAQ,eAAe,CAAC,UAAkB;AAClD,gCAAsB,KAAK;AAAA,QAC7B;AACA,kBAAU,QAAQ,eAAe,MAAM;AACrC,0BAAgB;AAAA,QAClB;AACA,kBAAU,QAAQ,gCAAgC,MAAM;AACtD,iCAAuB;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,uBAAuB,iBAAiB,sBAAsB;AAAA,EAC5E;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,MAAC,aAAa,YAAkD,IAAI;AACpE,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,aAAa,aAAa,eAAe;AAAA,EAC5C;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA8C;AAG7C,6BAAuB,UAAW,EAAuB,WAAW;AACpE,gBAAU,CAAC;AAGX,UAAI,CAAC,cAAc;AACjB,YAAI,eAAgB,WAAU,EAAE,QAAQ,kBAAkB,OAAO,EAAE,CAAC;AAAA,YAC/D,UAAS,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAAA,MAC/C;AACA,wBAAkB,CAAC,SAAS,CAAC,IAAI;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,wBAAwB,mBAAmB,cAAc,gBAAgB,SAAS,MAAM;AAAA,EACpG;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/parts/AppPickerItem.js

@@ -34,25 +34,21 @@ module.exports = __toCommonJS(AppPickerItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_uid = require("uid");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_chip = require("@elliemae/ds-chip");
 var import_constants = require("../constants/index.js");
 var import_style = require("./style.js");
 var import_DSAppPickerCTX = require("../DSAppPickerCTX.js");
-var import_useFocusTracker = require("../config/useFocusTracker.js");
+var import_getChipRegionId = require("../util/getChipRegionId.js");
 const StyledChip = (0, import_ds_system.styled)(import_ds_chip.DSChip, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.CHIP })``;
 const AppIcon = ({ icon: Icon }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "app-picker__icon", size: "m" });
 const AppPickerItem = import_react.default.memo(
-  ({ app, positionLabel, ownerProps, onClick, isFirstFocusable, isLastFocusable }) => {
+  ({ app, chipId, positionLabel, ownerProps, onClick, isFirstFocusable, isLastFocusable }) => {
     const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;
-    const { focusRegion, firstFocusableRef, lastFocusableRef, registerChip, trackFocusChip, trackFocusRegionReset } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
-    const instanceUid = import_react.default.useMemo(() => (0, import_uid.uid)(5), []);
-    const chipId = id ?? `${label}-${instanceUid}`;
-    const isFocused = focusRegion === (0, import_useFocusTracker.getChipRegionId)(chipId);
-    import_react.default.useEffect(() => {
-      registerChip(app, chipId);
-    }, [app, chipId, registerChip]);
+    const {
+      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset }
+    } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
+    const isFocused = focusRegion === (0, import_getChipRegionId.getChipRegionId)(chipId);
     const getOwnerPropsArguments = import_react.default.useCallback(() => app, [app]);
     const renderIcon = import_react.default.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppIcon, { icon }), [icon]);
     const handleClick = import_react.default.useCallback((e) => onClick(e, app), [app, onClick]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/AppPickerItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { uid } from 'uid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSChip } from '@elliemae/ds-chip';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport { StyledListItem } from './style.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport { getChipRegionId } from '../config/useFocusTracker.js';\n\nconst StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;\n\ninterface AppIconProps {\n  icon: DSAppPickerT.AppItem['icon'];\n}\n\nconst AppIcon: React.FC<AppIconProps> = ({ icon: Icon }) => <Icon className=\"app-picker__icon\" size=\"m\" />;\n\ninterface AppPickerItemProps {\n  app: DSAppPickerT.AppItem;\n  positionLabel: string;\n  ownerProps: { getOwnerProps: () => object };\n  onClick: (e: React.MouseEvent, app: DSAppPickerT.AppItem) => void;\n  isFirstFocusable: boolean;\n  isLastFocusable: boolean;\n}\n\nexport const AppPickerItem: React.FC<AppPickerItemProps> = React.memo(\n  ({ app, positionLabel, ownerProps, onClick, isFirstFocusable, isLastFocusable }) => {\n    const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;\n    const { focusRegion, firstFocusableRef, lastFocusableRef, registerChip, trackFocusChip, trackFocusRegionReset } =\n      useContext(DSAppPickerContext);\n\n    const instanceUid = React.useMemo(() => uid(5), []);\n    const chipId = id ?? `${label}-${instanceUid}`;\n    const isFocused = focusRegion === getChipRegionId(chipId);\n\n    React.useEffect(() => {\n      registerChip(app, chipId);\n    }, [app, chipId, registerChip]);\n\n    const getOwnerPropsArguments = React.useCallback(() => app, [app]);\n    const renderIcon = React.useCallback(() => <AppIcon icon={icon} />, [icon]);\n    const handleClick = React.useCallback((e: React.MouseEvent) => onClick(e, app), [app, onClick]);\n    const handleFocus = React.useCallback(() => trackFocusChip(chipId), [chipId, trackFocusChip]);\n\n    // Single ref callback: registers focus-trap edges and drives tracker-seeded focus.\n    // New reference when isFocused or edge membership changes \u2014 React re-invokes with the DOM node.\n    const handleChipRef = React.useCallback(\n      (node: HTMLElement | null) => {\n        if (isFirstFocusable) firstFocusableRef.current = node;\n        if (isLastFocusable) lastFocusableRef.current = node;\n        if (node && isFocused) node.focus();\n      },\n      [isFirstFocusable, isLastFocusable, isFocused, firstFocusableRef, lastFocusableRef],\n    );\n\n    return (\n      <StyledListItem\n        data-testid={DSAppPickerDataTestIds.ITEM}\n        role=\"presentation\"\n        getOwnerProps={ownerProps.getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledChip\n          onClick={handleClick}\n          data-testid={DSAppPickerDataTestIds.CHIP}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          selected={selected}\n          aria-selected={selected}\n          role=\"option\"\n          id={id}\n          aria-label={`${label}. ${positionLabel}`}\n          icon={renderIcon}\n          label={label}\n          getOwnerProps={ownerProps.getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          wrapText={wrapText}\n          innerRef={handleChipRef}\n          onBlur={trackFocusRegionReset}\n          onFocus={handleFocus}\n        />\n      </StyledListItem>\n    );\n  },\n);\n\nAppPickerItem.displayName = 'DSAppPicker.AppPickerItem';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBqC;AAhB5D,mBAAkC;AAClC,iBAAoB;AACpB,uBAAuB;AACvB,qBAAuB;AAEvB,uBAA0E;AAC1E,mBAA+B;AAC/B,4BAAmC;AACnC,6BAAgC;AAEhC,MAAM,iBAAa,yBAAO,uBAAQ,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAMxF,MAAM,UAAkC,CAAC,EAAE,MAAM,KAAK,MAAM,4CAAC,QAAK,WAAU,oBAAmB,MAAK,KAAI;AAWjG,MAAM,gBAA8C,aAAAA,QAAM;AAAA,EAC/D,CAAC,EAAE,KAAK,eAAe,YAAY,SAAS,kBAAkB,gBAAgB,MAAM;AAClF,UAAM,EAAE,OAAO,UAAU,mBAAmB,UAAU,MAAM,IAAI,SAAS,IAAI;AAC7E,UAAM,EAAE,aAAa,mBAAmB,kBAAkB,cAAc,gBAAgB,sBAAsB,QAC5G,yBAAW,wCAAkB;AAE/B,UAAM,cAAc,aAAAA,QAAM,QAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAClD,UAAM,SAAS,MAAM,GAAG,KAAK,IAAI,WAAW;AAC5C,UAAM,YAAY,oBAAgB,wCAAgB,MAAM;AAExD,iBAAAA,QAAM,UAAU,MAAM;AACpB,mBAAa,KAAK,MAAM;AAAA,IAC1B,GAAG,CAAC,KAAK,QAAQ,YAAY,CAAC;AAE9B,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AACjE,UAAM,aAAa,aAAAA,QAAM,YAAY,MAAM,4CAAC,WAAQ,MAAY,GAAI,CAAC,IAAI,CAAC;AAC1E,UAAM,cAAc,aAAAA,QAAM,YAAY,CAAC,MAAwB,QAAQ,GAAG,GAAG,GAAG,CAAC,KAAK,OAAO,CAAC;AAC9F,UAAM,cAAc,aAAAA,QAAM,YAAY,MAAM,eAAe,MAAM,GAAG,CAAC,QAAQ,cAAc,CAAC;AAI5F,UAAM,gBAAgB,aAAAA,QAAM;AAAA,MAC1B,CAAC,SAA6B;AAC5B,YAAI,iBAAkB,mBAAkB,UAAU;AAClD,YAAI,gBAAiB,kBAAiB,UAAU;AAChD,YAAI,QAAQ,UAAW,MAAK,MAAM;AAAA,MACpC;AAAA,MACA,CAAC,kBAAkB,iBAAiB,WAAW,mBAAmB,gBAAgB;AAAA,IACpF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,wCAAuB;AAAA,QACpC,MAAK;AAAA,QACL,eAAe,WAAW;AAAA,QAC1B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAa,wCAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf,MAAK;AAAA,YACL;AAAA,YACA,cAAY,GAAG,KAAK,KAAK,aAAa;AAAA,YACtC,MAAM;AAAA,YACN;AAAA,YACA,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSChip } from '@elliemae/ds-chip';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport { StyledListItem } from './style.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport { getChipRegionId } from '../util/getChipRegionId.js';\n\nconst StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;\n\ninterface AppIconProps {\n  icon: DSAppPickerT.AppItem['icon'];\n}\n\nconst AppIcon: React.FC<AppIconProps> = ({ icon: Icon }) => <Icon className=\"app-picker__icon\" size=\"m\" />;\n\ninterface AppPickerItemProps {\n  app: DSAppPickerT.AppItem;\n  // Chip identity assigned by the parent (AppSection, via getChipId) and read here \u2014 never\n  // generated locally, so the focus tracker can address this chip without it reporting back up.\n  chipId: string;\n  positionLabel: string;\n  ownerProps: { getOwnerProps: () => object };\n  onClick: (e: React.MouseEvent, app: DSAppPickerT.AppItem) => void;\n  isFirstFocusable: boolean;\n  isLastFocusable: boolean;\n}\n\nexport const AppPickerItem: React.FC<AppPickerItemProps> = React.memo(\n  ({ app, chipId, positionLabel, ownerProps, onClick, isFirstFocusable, isLastFocusable }) => {\n    const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;\n    const {\n      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset },\n    } = useContext(DSAppPickerContext);\n\n    const isFocused = focusRegion === getChipRegionId(chipId);\n\n    const getOwnerPropsArguments = React.useCallback(() => app, [app]);\n    const renderIcon = React.useCallback(() => <AppIcon icon={icon} />, [icon]);\n    const handleClick = React.useCallback((e: React.MouseEvent) => onClick(e, app), [app, onClick]);\n    const handleFocus = React.useCallback(() => trackFocusChip(chipId), [chipId, trackFocusChip]);\n\n    // Single ref callback: registers focus-trap edges and drives tracker-seeded focus.\n    // New reference when isFocused or edge membership changes \u2014 React re-invokes with the DOM node.\n    const handleChipRef = React.useCallback(\n      (node: HTMLElement | null) => {\n        if (isFirstFocusable) firstFocusableRef.current = node;\n        if (isLastFocusable) lastFocusableRef.current = node;\n        if (node && isFocused) node.focus();\n      },\n      [isFirstFocusable, isLastFocusable, isFocused, firstFocusableRef, lastFocusableRef],\n    );\n\n    return (\n      <StyledListItem\n        data-testid={DSAppPickerDataTestIds.ITEM}\n        role=\"presentation\"\n        getOwnerProps={ownerProps.getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledChip\n          onClick={handleClick}\n          data-testid={DSAppPickerDataTestIds.CHIP}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          selected={selected}\n          aria-selected={selected}\n          role=\"option\"\n          id={id}\n          aria-label={`${label}. ${positionLabel}`}\n          icon={renderIcon}\n          label={label}\n          getOwnerProps={ownerProps.getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          wrapText={wrapText}\n          innerRef={handleChipRef}\n          onBlur={trackFocusRegionReset}\n          onFocus={handleFocus}\n        />\n      </StyledListItem>\n    );\n  },\n);\n\nAppPickerItem.displayName = 'DSAppPicker.AppPickerItem';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeqC;AAf5D,mBAAkC;AAClC,uBAAuB;AACvB,qBAAuB;AAEvB,uBAA0E;AAC1E,mBAA+B;AAC/B,4BAAmC;AACnC,6BAAgC;AAEhC,MAAM,iBAAa,yBAAO,uBAAQ,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAMxF,MAAM,UAAkC,CAAC,EAAE,MAAM,KAAK,MAAM,4CAAC,QAAK,WAAU,oBAAmB,MAAK,KAAI;AAcjG,MAAM,gBAA8C,aAAAA,QAAM;AAAA,EAC/D,CAAC,EAAE,KAAK,QAAQ,eAAe,YAAY,SAAS,kBAAkB,gBAAgB,MAAM;AAC1F,UAAM,EAAE,OAAO,UAAU,mBAAmB,UAAU,MAAM,IAAI,SAAS,IAAI;AAC7E,UAAM;AAAA,MACJ,eAAe,EAAE,aAAa,mBAAmB,kBAAkB,gBAAgB,sBAAsB;AAAA,IAC3G,QAAI,yBAAW,wCAAkB;AAEjC,UAAM,YAAY,oBAAgB,wCAAgB,MAAM;AAExD,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AACjE,UAAM,aAAa,aAAAA,QAAM,YAAY,MAAM,4CAAC,WAAQ,MAAY,GAAI,CAAC,IAAI,CAAC;AAC1E,UAAM,cAAc,aAAAA,QAAM,YAAY,CAAC,MAAwB,QAAQ,GAAG,GAAG,GAAG,CAAC,KAAK,OAAO,CAAC;AAC9F,UAAM,cAAc,aAAAA,QAAM,YAAY,MAAM,eAAe,MAAM,GAAG,CAAC,QAAQ,cAAc,CAAC;AAI5F,UAAM,gBAAgB,aAAAA,QAAM;AAAA,MAC1B,CAAC,SAA6B;AAC5B,YAAI,iBAAkB,mBAAkB,UAAU;AAClD,YAAI,gBAAiB,kBAAiB,UAAU;AAChD,YAAI,QAAQ,UAAW,MAAK,MAAM;AAAA,MACpC;AAAA,MACA,CAAC,kBAAkB,iBAAiB,WAAW,mBAAmB,gBAAgB;AAAA,IACpF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,wCAAuB;AAAA,QACpC,MAAK;AAAA,QACL,eAAe,WAAW;AAAA,QAC1B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAa,wCAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf,MAAK;AAAA,YACL;AAAA,YACA,cAAY,GAAG,KAAK,KAAK,aAAa;AAAA,YACtC,MAAM;AAAA,YACN;AAAA,YACA,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;",
   "names": ["React"]
 }

package/dist/cjs/parts/AppSection.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_style = require("./style.js");
 var import_constants = require("../constants/index.js");
 var import_AppPickerItem = require("./AppPickerItem.js");
+var import_getChipId = require("../util/getChipId.js");
 const AppSection = ({
   items,
   title,
@@ -54,6 +55,7 @@ const AppSection = ({
       import_AppPickerItem.AppPickerItem,
       {
         app,
+        chipId: (0, import_getChipId.getChipId)(app, flatIndex),
         positionLabel: `${title} (${flatIndex + 1} of ${totalCount})`,
         ownerProps,
         onClick: onItemClick,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/AppSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { StyledListItemFullRow, StyledTitle } from './style.js';\nimport { DSAppPickerDataTestIds } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { AppPickerItem } from './AppPickerItem.js';\n\ninterface AppSectionProps {\n  items: DSAppPickerT.AppItem[];\n  title: string;\n  positionOffset: number;\n  totalCount: number;\n  ownerProps: { getOwnerProps: () => object };\n  onItemClick: (e: React.MouseEvent, app: DSAppPickerT.AppItem) => void;\n  keyPrefix?: string;\n  firstFocusableIdx: number;\n  lastFocusableIdx: number;\n}\n\nexport const AppSection: React.FC<AppSectionProps> = ({\n  items,\n  title,\n  positionOffset,\n  totalCount,\n  ownerProps,\n  onItemClick,\n  keyPrefix = '',\n  firstFocusableIdx,\n  lastFocusableIdx,\n}) => (\n  <>\n    <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} aria-hidden role=\"group\" {...ownerProps}>\n      <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" variant=\"h3-strong\" {...ownerProps}>\n        {title}\n      </StyledTitle>\n    </StyledListItemFullRow>\n    {items.map((app, index) => {\n      const flatIndex = positionOffset + index;\n      return (\n        <AppPickerItem\n          key={app.id ?? `${app.label}-${keyPrefix}${index}`}\n          app={app}\n          positionLabel={`${title} (${flatIndex + 1} of ${totalCount})`}\n          ownerProps={ownerProps}\n          onClick={onItemClick}\n          isFirstFocusable={flatIndex === firstFocusableIdx}\n          isLastFocusable={flatIndex === lastFocusableIdx}\n        />\n      );\n    })}\n  </>\n);\n\nAppSection.displayName = 'DSAppPicker.AppSection';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BrB;AA5BF,mBAAmD;AACnD,uBAAuC;AAEvC,2BAA8B;AAcvB,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MACE,4EACE;AAAA,8CAAC,sCAAsB,eAAa,wCAAuB,KAAK,eAAW,MAAC,MAAK,SAAS,GAAG,YAC3F,sDAAC,4BAAY,eAAa,wCAAuB,OAAO,MAAK,gBAAe,SAAQ,aAAa,GAAG,YACjG,iBACH,GACF;AAAA,EACC,MAAM,IAAI,CAAC,KAAK,UAAU;AACzB,UAAM,YAAY,iBAAiB;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,eAAe,GAAG,KAAK,KAAK,YAAY,CAAC,OAAO,UAAU;AAAA,QAC1D;AAAA,QACA,SAAS;AAAA,QACT,kBAAkB,cAAc;AAAA,QAChC,iBAAiB,cAAc;AAAA;AAAA,MAN1B,IAAI,MAAM,GAAG,IAAI,KAAK,IAAI,SAAS,GAAG,KAAK;AAAA,IAOlD;AAAA,EAEJ,CAAC;AAAA,GACH;AAGF,WAAW,cAAc;",
+  "sourcesContent": ["import React from 'react';\nimport { StyledListItemFullRow, StyledTitle } from './style.js';\nimport { DSAppPickerDataTestIds } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { AppPickerItem } from './AppPickerItem.js';\nimport { getChipId } from '../util/getChipId.js';\n\ninterface AppSectionProps {\n  items: DSAppPickerT.AppItem[];\n  title: string;\n  positionOffset: number;\n  totalCount: number;\n  ownerProps: { getOwnerProps: () => object };\n  onItemClick: (e: React.MouseEvent, app: DSAppPickerT.AppItem) => void;\n  keyPrefix?: string;\n  firstFocusableIdx: number;\n  lastFocusableIdx: number;\n}\n\nexport const AppSection: React.FC<AppSectionProps> = ({\n  items,\n  title,\n  positionOffset,\n  totalCount,\n  ownerProps,\n  onItemClick,\n  keyPrefix = '',\n  firstFocusableIdx,\n  lastFocusableIdx,\n}) => (\n  <>\n    <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} aria-hidden role=\"group\" {...ownerProps}>\n      <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" variant=\"h3-strong\" {...ownerProps}>\n        {title}\n      </StyledTitle>\n    </StyledListItemFullRow>\n    {items.map((app, index) => {\n      const flatIndex = positionOffset + index;\n      return (\n        <AppPickerItem\n          key={app.id ?? `${app.label}-${keyPrefix}${index}`}\n          app={app}\n          chipId={getChipId(app, flatIndex)}\n          positionLabel={`${title} (${flatIndex + 1} of ${totalCount})`}\n          ownerProps={ownerProps}\n          onClick={onItemClick}\n          isFirstFocusable={flatIndex === firstFocusableIdx}\n          isLastFocusable={flatIndex === lastFocusableIdx}\n        />\n      );\n    })}\n  </>\n);\n\nAppSection.displayName = 'DSAppPicker.AppSection';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BrB;AA7BF,mBAAmD;AACnD,uBAAuC;AAEvC,2BAA8B;AAC9B,uBAA0B;AAcnB,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MACE,4EACE;AAAA,8CAAC,sCAAsB,eAAa,wCAAuB,KAAK,eAAW,MAAC,MAAK,SAAS,GAAG,YAC3F,sDAAC,4BAAY,eAAa,wCAAuB,OAAO,MAAK,gBAAe,SAAQ,aAAa,GAAG,YACjG,iBACH,GACF;AAAA,EACC,MAAM,IAAI,CAAC,KAAK,UAAU;AACzB,UAAM,YAAY,iBAAiB;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,YAAQ,4BAAU,KAAK,SAAS;AAAA,QAChC,eAAe,GAAG,KAAK,KAAK,YAAY,CAAC,OAAO,UAAU;AAAA,QAC1D;AAAA,QACA,SAAS;AAAA,QACT,kBAAkB,cAAc;AAAA,QAChC,iBAAiB,cAAc;AAAA;AAAA,MAP1B,IAAI,MAAM,GAAG,IAAI,KAAK,IAAI,SAAS,GAAG,KAAK;AAAA,IAQlD;AAAA,EAEJ,CAAC;AAAA,GACH;AAGF,WAAW,cAAc;",
   "names": []
 }

package/dist/cjs/parts/Trigger.js

@@ -35,13 +35,20 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
 var import_constants = require("../constants/index.js");
+var import_DSAppPickerCTX = require("../DSAppPickerCTX.js");
 const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.BUTTON })`
   height: fit-content;
 `;
-const Trigger = ({ Icon, isOpen, setRef, ownerProps, onClick, renderTrigger }) => {
+const Trigger = (PropsFromFloatingContext) => {
+  const { handleTriggerRef, handleTriggerClick } = PropsFromFloatingContext;
+  const {
+    propsWithDefault: { icon: Icon, renderTrigger },
+    ownerPropsConfig
+  } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
   if (renderTrigger) {
-    return renderTrigger({ ref: setRef });
+    return renderTrigger({ ref: handleTriggerRef });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledButton,
@@ -49,13 +56,12 @@ const Trigger = ({ Icon, isOpen, setRef, ownerProps, onClick, renderTrigger }) =
       "data-testid": import_constants.DSAppPickerDataTestIds.BUTTON,
       id: "app-picker__button",
       buttonType: "icon",
-      "aria-haspopup": "true",
-      "aria-expanded": isOpen,
+      "aria-haspopup": "dialog",
       "aria-label": "Application picker",
-      innerRef: setRef,
-      onClick,
-      getOwnerProps: ownerProps.getOwnerProps,
-      getOwnerPropsArguments: ownerProps.getOwnerPropsArguments,
+      innerRef: handleTriggerRef,
+      onClick: handleTriggerClick,
+      getOwnerProps: ownerPropsConfig.getOwnerProps,
+      getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Trigger.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from '../constants/index.js';\n\n// DSButtonV3 sizes itself with `min-height` (height stays `auto`) so multi-line labels can grow.\n// As a side effect, when the trigger is a direct grid/flex child of a consumer layout with the\n// default `align-items: stretch`, it stretches to fill the container height (PUI-18354 regression:\n// the legacy DSButtonV2 trigger used a fixed `height` and did not stretch). `height: fit-content`\n// pins the trigger to its intrinsic size \u2014 mirroring the button's own `width: fit-content` \u2014 so it\n// stays ~28px regardless of layout context.\n// DSButtonV3 sizes itself with `min-height` (height stays `auto`) so multi-line labels can grow.\n// As a side effect, when the trigger is a direct grid/flex child of a consumer layout with the\n// default `align-items: stretch`, it stretches to fill the container height (PUI-18354 regression:\n// the legacy DSButtonV2 trigger used a fixed `height` and did not stretch). `height: fit-content`\n// pins the trigger to its intrinsic size \u2014 mirroring the button's own `width: fit-content` \u2014 so it\n// stays ~28px regardless of layout context.\nconst StyledButton = styled(DSButtonV3, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })`\n  height: fit-content;\n`;\n\ninterface TriggerProps {\n  Icon: DSAppPickerT.InternalProps['icon'];\n  isOpen: boolean;\n  setRef: React.RefCallback<HTMLButtonElement>;\n  ownerProps: { getOwnerProps: () => object; getOwnerPropsArguments: () => object };\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  renderTrigger?: DSAppPickerT.OptionalProps['renderTrigger'];\n}\n\nexport const Trigger: React.FC<TriggerProps> = ({ Icon, isOpen, setRef, ownerProps, onClick, renderTrigger }) => {\n  if (renderTrigger) {\n    // Plain function call (not React element) preserves the legacy DSPopover render-prop contract:\n    // consumers receive `ref` as a regular prop, no forwardRef required.\n    return renderTrigger({ ref: setRef });\n  }\n  return (\n    <StyledButton\n      data-testid={DSAppPickerDataTestIds.BUTTON}\n      id=\"app-picker__button\"\n      buttonType=\"icon\"\n      aria-haspopup=\"true\"\n      aria-expanded={isOpen}\n      aria-label=\"Application picker\"\n      innerRef={setRef}\n      onClick={onClick}\n      getOwnerProps={ownerProps.getOwnerProps}\n      getOwnerPropsArguments={ownerProps.getOwnerPropsArguments}\n    >\n      <Icon />\n    </StyledButton>\n  );\n};\n\nTrigger.displayName = 'DSAppPicker.Trigger';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAjDN,0BAA2B;AAC3B,uBAAuB;AAEvB,uBAA0E;AAc1E,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,OAAO,CAAC;AAAA;AAAA;AAazF,MAAM,UAAkC,CAAC,EAAE,MAAM,QAAQ,QAAQ,YAAY,SAAS,cAAc,MAAM;AAC/G,MAAI,eAAe;AAGjB,WAAO,cAAc,EAAE,KAAK,OAAO,CAAC;AAAA,EACtC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wCAAuB;AAAA,MACpC,IAAG;AAAA,MACH,YAAW;AAAA,MACX,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA,eAAe,WAAW;AAAA,MAC1B,wBAAwB,WAAW;AAAA,MAEnC,sDAAC,QAAK;AAAA;AAAA,EACR;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport type { useAppPickerFloatingContext } from './AppPickerFloatingContext/useAppPickerFloatingContext.js';\n\n// DSButtonV3 sizes itself with `min-height` (height stays `auto`) so multi-line labels can grow.\n// As a side effect, when the trigger is a direct grid/flex child of a consumer layout with the\n// default `align-items: stretch`, it stretches to fill the container height (PUI-18354 regression:\n// the legacy DSButtonV2 trigger used a fixed `height` and did not stretch). `height: fit-content`\n// pins the trigger to its intrinsic size \u2014 mirroring the button's own `width: fit-content` \u2014 so it\n// stays ~28px regardless of layout context.\nconst StyledButton = styled(DSButtonV3, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })`\n  height: fit-content;\n`;\n\ntype UseAppPickerFloatingContextT = ReturnType<typeof useAppPickerFloatingContext>;\ntype FloatingContextDictatedProps = {\n  handleTriggerRef: UseAppPickerFloatingContextT['handleTriggerRef'];\n  handleTriggerClick: UseAppPickerFloatingContextT['handleTriggerClick'];\n};\n\nexport const Trigger = (PropsFromFloatingContext: FloatingContextDictatedProps) => {\n  const { handleTriggerRef, handleTriggerClick } = PropsFromFloatingContext;\n  const {\n    propsWithDefault: { icon: Icon, renderTrigger },\n    ownerPropsConfig,\n  } = useContext(DSAppPickerContext);\n\n  if (renderTrigger) {\n    // Plain function call (not React element) preserves the legacy DSPopover render-prop contract:\n    // consumers receive `ref` as a regular prop, no forwardRef required.\n    return renderTrigger({ ref: handleTriggerRef });\n  }\n  return (\n    <StyledButton\n      data-testid={DSAppPickerDataTestIds.BUTTON}\n      id=\"app-picker__button\"\n      buttonType=\"icon\"\n      aria-haspopup=\"dialog\"\n      aria-label=\"Application picker\"\n      innerRef={handleTriggerRef}\n      onClick={handleTriggerClick}\n      getOwnerProps={ownerPropsConfig.getOwnerProps}\n      getOwnerPropsArguments={ownerPropsConfig.getOwnerPropsArguments}\n    >\n      <Icon />\n    </StyledButton>\n  );\n};\n\nTrigger.displayName = 'DSAppPicker.Trigger';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CjB;AA/CN,0BAA2B;AAC3B,uBAAuB;AACvB,mBAAkC;AAClC,uBAA0E;AAC1E,4BAAmC;AASnC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,OAAO,CAAC;AAAA;AAAA;AAUzF,MAAM,UAAU,CAAC,6BAA2D;AACjF,QAAM,EAAE,kBAAkB,mBAAmB,IAAI;AACjD,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,MAAM,cAAc;AAAA,IAC9C;AAAA,EACF,QAAI,yBAAW,wCAAkB;AAEjC,MAAI,eAAe;AAGjB,WAAO,cAAc,EAAE,KAAK,iBAAiB,CAAC;AAAA,EAChD;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wCAAuB;AAAA,MACpC,IAAG;AAAA,MACH,YAAW;AAAA,MACX,iBAAc;AAAA,MACd,cAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe,iBAAiB;AAAA,MAChC,wBAAwB,iBAAiB;AAAA,MAEzC,sDAAC,QAAK;AAAA;AAAA,EACR;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

package/dist/cjs/parts/style.js

@@ -28,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_exports = {};
 __export(style_exports, {
-  StyledAppPickerFloating: () => StyledAppPickerFloating,
   StyledListItem: () => StyledListItem,
   StyledListItemFullRow: () => StyledListItemFullRow,
   StyledSeparator: () => StyledSeparator,
@@ -37,15 +36,10 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_typography = require("@elliemae/ds-typography");
-var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_constants = require("../constants/index.js");
-const StyledAppPickerFloating = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
-  name: import_constants.DSAppPickerName,
-  slot: import_constants.DSAppPickerSlots.FLOATING_WRAPPER
-})``;
 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;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/style.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\n\nexport const StyledAppPickerFloating = styled(FloatingWrapper, {\n  name: DSAppPickerName,\n  slot: DSAppPickerSlots.FLOATING_WRAPPER,\n})``;\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })`\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  /* Baseline 2024: reserve scrollbar gutter so the layout doesn't shift between overflow/no-overflow.\n     Replaces a JS isOverflow detection effect that toggled right padding. */\n  scrollbar-gutter: stable;\n  margin: 0;\n  padding: 0 0 8px 16px;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledListItem = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`\n  list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`\n  list-style: none;\n  grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSAppPickerName, slot: DSAppPickerSlots.TITLE })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.value[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin: 12px 0 8px 0;\n  line-height: 1.385;\n  text-transform: uppercase;\n  text-align: center;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};\n  border-bottom: none;\n  width: 100%;\n  margin: 8px 0 0 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAC7B,iCAAgC;AAChC,uBAAkD;AAE3C,MAAM,8BAA0B,yBAAO,4CAAiB;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAEM,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA,sBAC1E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBzD,MAAM,qBAAiB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAI1F,MAAM,4BAAwB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,IAAI,CAAC;AAAA;AAAA;AAAA;AAKhG,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WAC5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACpC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,UAAU,CAAC;AAAA,0BAC7E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })`\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  /* Baseline 2024: reserve scrollbar gutter so the layout doesn't shift between overflow/no-overflow.\n     Replaces a JS isOverflow detection effect that toggled right padding. */\n  scrollbar-gutter: stable;\n  margin: 0;\n  padding: 0 0 8px 16px;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledListItem = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`\n  list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`\n  list-style: none;\n  grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSAppPickerName, slot: DSAppPickerSlots.TITLE })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.value[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin: 12px 0 8px 0;\n  line-height: 1.385;\n  text-transform: uppercase;\n  text-align: center;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[300]};\n  border-bottom: none;\n  width: 100%;\n  margin: 8px 0 0 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAqB;AACrB,uBAAuB;AACvB,2BAA6B;AAC7B,uBAAkD;AAE3C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA,sBAC1E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBzD,MAAM,qBAAiB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAI1F,MAAM,4BAAwB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,IAAI,CAAC;AAAA;AAAA;AAAA;AAKhG,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WAC5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACpC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,UAAU,CAAC;AAAA,0BAC7E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -59,7 +59,12 @@ const DSAppPickerPropTypes = {
     "Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."
   ),
   isOpen: import_ds_props_helpers.PropTypes.bool.description("Wether the AppPicker should be open or not."),
-  onClose: import_ds_props_helpers.PropTypes.func.description("Callback function when the AppPicker closes"),
+  onOpen: import_ds_props_helpers.PropTypes.func.description(
+    'Callback when the AppPicker opens; receives { reason: "trigger" | "controlled", event? }.'
+  ),
+  onClose: import_ds_props_helpers.PropTypes.func.description(
+    'Callback when the AppPicker closes; receives { reason: "escape" | "click-outside" | "trigger-toggle" | "controlled", event? }.'
+  ),
   onKeyDown: import_ds_props_helpers.PropTypes.func.description("OnKeyDown handler callback."),
   onClick: import_ds_props_helpers.PropTypes.func.description("Custom onClick for Trigger component."),
   onClickOutside: import_ds_props_helpers.PropTypes.func.description("Callback event when the user clicks outside the App Picker."),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  export interface RequiredProps {}\n\n  export type SlotFunctionArguments = {\n    dsApppickerRoot: () => object;\n    dsApppickerItem: () => object;\n    dsApppickerTitle: () => object;\n    dsApppickerSeparator: () => object;\n    dsApppickerRow: () => object;\n    dsApppickerChip: () => object;\n    dsApppickerButton: () => object;\n    dsApppickerFloatingWrapper: () => object;\n  };\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.RefCallback<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {\n    onClose?: () => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props> = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  apps: PropTypes.array\n    .description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  customApps: PropTypes.array\n    .description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n};\n\nexport const DSAppPickerPropTypesSchema = DSAppPickerPropTypes as unknown as ValidationMap<DSAppPickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0FT;AAxFd,sBAA2B;AAG3B,8BAKO;AAEP,uBAAkD;AAyE3C,MAAM,eAA0C;AAAA,EACrD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,4CAAC,8BAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,kCAAiB,iCAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,MACb,YAAY,oGAAoG,EAChH,aAAa,CAAC,CAAC;AAAA,EAClB,YAAY,kCAAU,MACnB,YAAY,sGAAsG,EAClH,aAAa,CAAC,CAAC;AAAA,EAClB,cAAc,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;AAEO,MAAM,6BAA6B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  /**\n   * Why the panel opened. `trigger` carries the activating event and fires synchronously in the\n   * trigger's click handler (AppPicker owns the open). `controlled` fires when the consumer flips\n   * the `isOpen` prop themselves \u2014 no event, delivered when that flip takes effect.\n   */\n  export type OpenChange =\n    { reason: 'trigger'; event: React.MouseEvent | React.KeyboardEvent } | { reason: 'controlled' };\n\n  /**\n   * Why the panel closed. The event-carrying reasons fire synchronously from the handler that owns\n   * the close (AppPicker in uncontrolled mode): `escape` (a scoped Escape), `click-outside`, and\n   * `trigger-toggle` (the trigger clicked while open). `controlled` fires when the consumer flips the\n   * `isOpen` prop themselves \u2014 no event, delivered when that flip takes effect.\n   */\n  export type CloseChange =\n    | { reason: 'escape'; event: KeyboardEvent }\n    | { reason: 'click-outside'; event: MouseEvent | TouchEvent }\n    | { reason: 'trigger-toggle'; event: React.MouseEvent | React.KeyboardEvent }\n    | { reason: 'controlled' };\n\n  export interface RequiredProps {}\n\n  export type SlotFunctionArguments = {\n    dsApppickerRoot: () => object;\n    dsApppickerItem: () => object;\n    dsApppickerTitle: () => object;\n    dsApppickerSeparator: () => object;\n    dsApppickerRow: () => object;\n    dsApppickerChip: () => object;\n    dsApppickerButton: () => object;\n    dsApppickerFloatingWrapper: () => object;\n  };\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.RefCallback<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSAppPickerName,\n    typeof DSAppPickerSlots\n  > {\n    onOpen?: (info: OpenChange) => void;\n    onClose?: (info: CloseChange) => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props> = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  apps: PropTypes.array\n    .description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  customApps: PropTypes.array\n    .description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]')\n    .defaultValue([]),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onOpen: PropTypes.func.description(\n    'Callback when the AppPicker opens; receives { reason: \"trigger\" | \"controlled\", event? }.',\n  ),\n  onClose: PropTypes.func.description(\n    'Callback when the AppPicker closes; receives { reason: \"escape\" | \"click-outside\" | \"trigger-toggle\" | \"controlled\", event? }.',\n  ),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n};\n\nexport const DSAppPickerPropTypesSchema = DSAppPickerPropTypes as unknown as ValidationMap<DSAppPickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmHT;AAjHd,sBAA2B;AAG3B,8BAKO;AAEP,uBAAkD;AAkG3C,MAAM,eAA0C;AAAA,EACrD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,4CAAC,8BAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,kCAAiB,iCAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,MACb,YAAY,oGAAoG,EAChH,aAAa,CAAC,CAAC;AAAA,EAClB,YAAY,kCAAU,MACnB,YAAY,sGAAsG,EAClH,aAAa,CAAC,CAAC;AAAA,EAClB,cAAc,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,QAAQ,kCAAU,KAAK;AAAA,IACrB;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;AAEO,MAAM,6BAA6B;",
   "names": []
 }