@elliemae/ds-app-picker 3.61.11 → 3.70.0-alpha.9

package/dist/esm/config/useFocusTracker.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { APP_PICKER_REGION_FOCUSES } from "../constants/index.js";
+import { getChipId } from "../util/getChipId.js";
+import { getChipRegionId } from "../util/getChipRegionId.js";
+const useFocusTracker = (config) => {
+  const { allApps } = config;
+  const firstFocusableIdx = useMemo(() => allApps.findIndex((app) => !app.disabled), [allApps]);
+  const lastFocusableIdx = useMemo(() => allApps.reduce((acc, app, i) => !app.disabled ? i : acc, -1), [allApps]);
+  const [focusRegion, setFocusRegion] = useState(APP_PICKER_REGION_FOCUSES.RESET);
+  const firstFocusableRef = useRef(null);
+  const lastFocusableRef = useRef(null);
+  const trackFocusChip = useCallback((chipId) => {
+    setFocusRegion(getChipRegionId(chipId));
+  }, []);
+  const trackFocusRegionReset = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.RESET);
+  }, []);
+  const trackFocusTrigger = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.TRIGGER);
+  }, []);
+  const trackFocusPanel = useCallback(() => {
+    setFocusRegion(APP_PICKER_REGION_FOCUSES.PANEL);
+  }, []);
+  const trackFocusSelectedItem = useCallback(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : allApps.findIndex((app) => !app.disabled);
+    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));
+  }, [allApps]);
+  const trackFocusSelectedOrLastItem = useCallback(() => {
+    const selectedIdx = allApps.findIndex((app) => app.selected);
+    const index = selectedIdx !== -1 ? selectedIdx : lastFocusableIdx;
+    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));
+  }, [allApps, lastFocusableIdx]);
+  const trackFocusItemAtIndex = useCallback(
+    (index) => {
+      const target = allApps[index];
+      if (target) setFocusRegion(getChipRegionId(getChipId(target, index)));
+    },
+    [allApps]
+  );
+  return useMemo(
+    () => ({
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      firstFocusableRef,
+      lastFocusableRef,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusSelectedOrLastItem,
+      trackFocusItemAtIndex
+    }),
+    [
+      firstFocusableIdx,
+      lastFocusableIdx,
+      focusRegion,
+      trackFocusChip,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusPanel,
+      trackFocusSelectedItem,
+      trackFocusSelectedOrLastItem,
+      trackFocusItemAtIndex
+    ]
+  );
+};
+export {
+  useFocusTracker
+};
+//# sourceMappingURL=useFocusTracker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useFocusTracker.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useRef, useState } from 'react';\nimport { APP_PICKER_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\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  // ArrowUp's counterpart to trackFocusSelectedItem. Same first clause \u2014 the selection wins \u2014 but the\n  // fallback is the LAST available item rather than the first, because \"open upwards\" lands at the end.\n  const trackFocusSelectedOrLastItem = useCallback(() => {\n    const selectedIdx = allApps.findIndex((app) => app.selected);\n    const index = selectedIdx !== -1 ? selectedIdx : lastFocusableIdx;\n    if (index !== -1) setFocusRegion(getChipRegionId(getChipId(allApps[index], index)));\n  }, [allApps, lastFocusableIdx]);\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      trackFocusSelectedOrLastItem,\n      trackFocusItemAtIndex,\n    }),\n    [\n      firstFocusableIdx,\n      lastFocusableIdx,\n      focusRegion,\n      trackFocusChip,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n      trackFocusPanel,\n      trackFocusSelectedItem,\n      trackFocusSelectedOrLastItem,\n      trackFocusItemAtIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAMzB,MAAM,kBAAkB,CAAC,WAAgC;AAC9D,QAAM,EAAE,QAAQ,IAAI;AAKpB,QAAM,oBAAoB,QAAQ,MAAM,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC5F,QAAM,mBAAmB,QAAQ,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAO,CAAC,IAAI,WAAW,IAAI,KAAM,EAAE,GAAG,CAAC,OAAO,CAAC;AAEhH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,0BAA0B,KAAK;AAItF,QAAM,oBAAoB,OAA2B,IAAI;AACzD,QAAM,mBAAmB,OAA2B,IAAI;AAExD,QAAM,iBAAiB,YAAY,CAAC,WAAmB;AACrD,mBAAe,gBAAgB,MAAM,CAAC;AAAA,EACxC,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,MAAM;AAC1C,mBAAe,0BAA0B,OAAO;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,0BAA0B,KAAK;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB,YAAY,MAAM;AAC/C,UAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ;AAC3D,UAAM,QAAQ,gBAAgB,KAAK,cAAc,QAAQ,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ;AACzF,QAAI,UAAU,GAAI,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,OAAO,CAAC;AAIZ,QAAM,+BAA+B,YAAY,MAAM;AACrD,UAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ;AAC3D,UAAM,QAAQ,gBAAgB,KAAK,cAAc;AACjD,QAAI,UAAU,GAAI,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,GAAG,KAAK,CAAC,CAAC;AAAA,EACpF,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,OAAQ,gBAAe,gBAAgB,UAAU,QAAQ,KAAK,CAAC,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSAppPickerName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSAppPickerName);
+  if (!props.apps.length && !props.customApps.length) {
+    throw new Error(
+      `[${DSAppPickerName}] At least one of "apps" or "customApps" must contain items. Providing both as empty arrays renders an empty picker.`
+    );
+  }
+  const suppliedAppIds = [...props.apps, ...props.customApps].map((app) => app.id).filter((id) => id !== void 0);
+  const seen = /* @__PURE__ */ new Set();
+  const duplicates = /* @__PURE__ */ new Set();
+  for (const id of suppliedAppIds) {
+    if (seen.has(id)) duplicates.add(id);
+    else seen.add(id);
+  }
+  const duplicatedAppIds = [...duplicates];
+  if (duplicatedAppIds.length) {
+    throw new Error(
+      `[${DSAppPickerName}] Every app "id" must be unique across "apps" and "customApps" \u2014 each one is rendered as that chip's DOM id, and duplicates produce an invalid document. Duplicated: ${duplicatedAppIds.map((id) => `"${id}"`).join(", ")}.`
+    );
+  }
+  if (props.id !== void 0 && suppliedAppIds.includes(props.id)) {
+    throw new Error(
+      `[${DSAppPickerName}] The app "id" "${props.id}" collides with the "id" given to the component, which is rendered on the root element. Every other id is suffixed away from it \u2014 see getIdForAppPickerTrigger / getIdForAppPickerSectionTitle / getIdForAppPickerCustomSectionTitle \u2014 but this one is not ours to move.`
+    );
+  }
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSAppPickerT } from '../react-desc-prop-types.js';\nimport { DSAppPickerName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSAppPickerT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  useValidateTypescriptPropTypes(props, propTypes, DSAppPickerName);\n\n  if (!props.apps.length && !props.customApps.length) {\n    throw new Error(\n      `[${DSAppPickerName}] At least one of \"apps\" or \"customApps\" must contain items. ` +\n        `Providing both as empty arrays renders an empty picker.`,\n    );\n  }\n\n  /*\n   * An app's `id` is rendered verbatim as the chip's DOM id \u2014 it is the consumer's own value, deliberately\n   * left un-namespaced so they can address their chips by the identity they already know. `apps` and\n   * `customApps` are two independent arrays, so nothing about the shape of the API stops the same value\n   * appearing twice, and a duplicate DOM id is a broken document: `getElementById`, `document.querySelector`\n   * and every `aria-*` reference silently resolve to the first match only.\n   *\n   * We do not fix that by rewriting their ids \u2014 that would take away the surface the field exists to\n   * provide. We make it impossible to ship instead. Uniqueness stays the consumer's responsibility; this\n   * turns \"silently wrong in production\" into \"cannot render\", which is the only version of that\n   * responsibility that actually holds.\n   *\n   * Scoped to ids the consumer supplied: id-less apps are legal (AppSection falls back to a positional key\n   * and getChipId to a label-index identity), and no chip id is emitted for them at all.\n   */\n  const suppliedAppIds = [...props.apps, ...props.customApps]\n    .map((app) => app.id)\n    .filter((id): id is string => id !== undefined);\n\n  const seen = new Set<string>();\n  const duplicates = new Set<string>();\n  for (const id of suppliedAppIds) {\n    if (seen.has(id)) duplicates.add(id);\n    else seen.add(id);\n  }\n  const duplicatedAppIds = [...duplicates];\n  if (duplicatedAppIds.length) {\n    throw new Error(\n      `[${DSAppPickerName}] Every app \"id\" must be unique across \"apps\" and \"customApps\" \u2014 each one is ` +\n        `rendered as that chip's DOM id, and duplicates produce an invalid document. ` +\n        `Duplicated: ${duplicatedAppIds.map((id) => `\"${id}\"`).join(', ')}.`,\n    );\n  }\n\n  /*\n   * Same defect, one level up: the consumer's `id` lands unmodified on the ROOT (see util/instanceIds), so\n   * an app carrying that same value collides with it. Every id this component generates for itself is\n   * suffixed through that module and therefore cannot participate \u2014 this is the one remaining pair where\n   * two consumer-supplied values meet.\n   */\n  if (props.id !== undefined && suppliedAppIds.includes(props.id)) {\n    throw new Error(\n      `[${DSAppPickerName}] The app \"id\" \"${props.id}\" collides with the \"id\" given to the component, ` +\n        `which is rendered on the root element. Every other id is suffixed away from it \u2014 see ` +\n        `getIdForAppPickerTrigger / getIdForAppPickerSectionTitle / getIdForAppPickerCustomSectionTitle \u2014 but this one is not ours to move.`,\n    );\n  }\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,OAAmC,cAA4C;AAC9G,iCAA+B,OAAO,WAAW,eAAe;AAEhE,MAAI,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,WAAW,QAAQ;AAClD,UAAM,IAAI;AAAA,MACR,IAAI,eAAe;AAAA,IAErB;AAAA,EACF;AAiBA,QAAM,iBAAiB,CAAC,GAAG,MAAM,MAAM,GAAG,MAAM,UAAU,EACvD,IAAI,CAAC,QAAQ,IAAI,EAAE,EACnB,OAAO,CAAC,OAAqB,OAAO,MAAS;AAEhD,QAAM,OAAO,oBAAI,IAAY;AAC7B,QAAM,aAAa,oBAAI,IAAY;AACnC,aAAW,MAAM,gBAAgB;AAC/B,QAAI,KAAK,IAAI,EAAE,EAAG,YAAW,IAAI,EAAE;AAAA,QAC9B,MAAK,IAAI,EAAE;AAAA,EAClB;AACA,QAAM,mBAAmB,CAAC,GAAG,UAAU;AACvC,MAAI,iBAAiB,QAAQ;AAC3B,UAAM,IAAI;AAAA,MACR,IAAI,eAAe,6KAEF,iBAAiB,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;AAAA,IACrE;AAAA,EACF;AAQA,MAAI,MAAM,OAAO,UAAa,eAAe,SAAS,MAAM,EAAE,GAAG;AAC/D,UAAM,IAAI;AAAA,MACR,IAAI,eAAe,mBAAmB,MAAM,EAAE;AAAA,IAGhD;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -1,14 +1,22 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSAppPickerName = "DSApppicker";
+const APP_PICKER_REGION_FOCUSES = {
+  RESET: "",
+  TRIGGER: "trigger",
+  PANEL: "panel"
+};
+const CHIP_REGION_PREFIX = "chip-";
 const DSAppPickerSlots = {
   ROOT: "root",
+  GROUP: "group",
   ITEM: "item",
   TITLE: "title",
   SEPARATOR: "separator",
   ROW: "row",
   CHIP: "chip",
-  BUTTON: "button"
+  BUTTON: "button",
+  FLOATING_WRAPPER: "floating-wrapper"
 };
 const DSAppPickerDataTestIds = {
   ...slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots),
@@ -16,6 +24,8 @@ const DSAppPickerDataTestIds = {
   BUTTON: "app-picker__button"
 };
 export {
+  APP_PICKER_REGION_FOCUSES,
+  CHIP_REGION_PREFIX,
   DSAppPickerDataTestIds,
   DSAppPickerName,
   DSAppPickerSlots

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAppPickerName = 'DSApppicker';\n\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};\n\nexport const DSAppPickerDataTestIds = {\n  ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n  CHIP: 'app-picker__chip',\n  BUTTON: 'app-picker__button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AACV;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\n// DEV-001: triple-p \"DSApppicker\" is the legacy public name. Renaming would break consumers.\n// See KNOWN_INTENTIONAL_DEVIATIONS.md.\nexport const DSAppPickerName = 'DSApppicker';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const APP_PICKER_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  PANEL: 'panel',\n} as const;\n\n// Prefix for the per-chip focus-region identifiers (see getChipRegionId in src/util).\nexport const CHIP_REGION_PREFIX = 'chip-';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSAppPickerSlots = {\n  ROOT: 'root',\n  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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAIjC,MAAM,kBAAkB;AAGxB,MAAM,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAGO,MAAM,qBAAqB;AAG3B,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,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,GAAI,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,11 +1,23 @@
 import * as React from "react";
 import { DSAppPicker, AppPickerWithSchema } from "./DSAppPicker.js";
 import { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from "./constants/index.js";
+import { getDSAppPickerContractProps } from "./util/getDSAppPickerContractProps.js";
+import {
+  getIdForAppPickerRoot,
+  getIdForAppPickerTrigger,
+  getIdForAppPickerSectionTitle,
+  getIdForAppPickerCustomSectionTitle
+} from "./util/instanceIds.js";
 export {
   AppPickerWithSchema,
   DSAppPicker,
   DSAppPickerDataTestIds,
   DSAppPickerName,
-  DSAppPickerSlots
+  DSAppPickerSlots,
+  getDSAppPickerContractProps,
+  getIdForAppPickerCustomSectionTitle,
+  getIdForAppPickerRoot,
+  getIdForAppPickerSectionTitle,
+  getIdForAppPickerTrigger
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,2BAA2B;AACjD,SAAS,iBAAiB,kBAAkB,8BAA8B;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport { getDSAppPickerContractProps } from './util/getDSAppPickerContractProps.js';\nexport {\n  getIdForAppPickerRoot,\n  getIdForAppPickerTrigger,\n  getIdForAppPickerSectionTitle,\n  getIdForAppPickerCustomSectionTitle,\n} from './util/instanceIds.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,2BAA2B;AACjD,SAAS,iBAAiB,kBAAkB,8BAA8B;AAC1E,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/esm/parts/AppPanel.js

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
+import { styled } from "@elliemae/ds-system";
+import React2, { memo, useCallback, useContext, useEffect } from "react";
+import {
+  APP_PICKER_REGION_FOCUSES,
+  DSAppPickerDataTestIds,
+  DSAppPickerName,
+  DSAppPickerSlots
+} from "../constants/index.js";
+import { DSAppPickerContext } from "../DSAppPickerCTX.js";
+import { AppSection } from "./AppSection.js";
+import { StyledListItemFullRow } from "./shared-styles.js";
+const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: 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 = styled("hr", { name: DSAppPickerName, slot: 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 = React2.useRef(false);
+  const executeInitialFocusRef = React2.useRef(callback);
+  executeInitialFocusRef.current = callback;
+  useEffect(() => {
+    if (!hasExecutedRef.current) {
+      executeInitialFocusRef.current();
+      hasExecutedRef.current = true;
+    }
+  }, []);
+};
+const useMountedOpenAutofocusNuance = ({ pendingRef, trackFocusPanel }) => {
+  useExecOnceAfterFirstRender(() => {
+    if (!pendingRef.current) return;
+    pendingRef.current = false;
+    trackFocusPanel();
+  });
+};
+const AppPanelBase = () => {
+  const {
+    propsWithDefault: { customApps, onKeyDown },
+    ownerPropsConfig,
+    globalAttributes,
+    xstyledProps,
+    mountedOpenAutofocusPendingRef,
+    focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusPanel }
+  } = useContext(DSAppPickerContext);
+  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
+  useMountedOpenAutofocusNuance({
+    pendingRef: mountedOpenAutofocusPendingRef,
+    trackFocusPanel
+  });
+  const isWrapperFocused = focusRegion === APP_PICKER_REGION_FOCUSES.PANEL;
+  const handleWrapperRef = useCallback(
+    (node) => {
+      if (node && isWrapperFocused) node.focus();
+    },
+    [isWrapperFocused]
+  );
+  const handleOnKeyDown = useFocusTrap({
+    firstElementRef: firstFocusableRef,
+    lastElementRef: lastFocusableRef,
+    onKeyDown
+  });
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      innerRef: handleWrapperRef,
+      "data-testid": DSAppPickerDataTestIds.ROOT,
+      cols: wrapperGridLayout.cols,
+      rows: wrapperGridLayout.rows,
+      tabIndex: -1,
+      ...ownerPropsConfig,
+      ...safeGlobalAttributes,
+      ...xstyledProps,
+      onKeyDown: handleOnKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(AppSection, {}),
+        customApps.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StyledListItemFullRow, { "data-testid": DSAppPickerDataTestIds.ROW, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledSeparator, { "data-testid": DSAppPickerDataTestIds.SEPARATOR, ...ownerPropsConfig }) }),
+          /* @__PURE__ */ jsx(AppSection, { isCustomApps: true })
+        ] })
+      ]
+    }
+  );
+};
+const AppPanel = memo(AppPanelBase);
+AppPanel.displayName = "DSAppPicker.AppPanel";
+export {
+  AppPanel
+};
+//# sourceMappingURL=AppPanel.js.map

package/dist/esm/parts/AppPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AppPanel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { styled } from '@elliemae/ds-system';\nimport React, { memo, useCallback, useContext, useEffect } from 'react';\nimport {\n  APP_PICKER_REGION_FOCUSES,\n  DSAppPickerDataTestIds,\n  DSAppPickerName,\n  DSAppPickerSlots,\n} from '../constants/index.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport { AppSection } from './AppSection.js';\nimport { StyledListItemFullRow } from './shared-styles.js';\n\nconst 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\nconst 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\nconst wrapperGridLayout = {\n  cols: ['repeat(3, 92px)'],\n  // Row tracks are intentionally auto-sized:\n  // - title row picks up its own typography height\n  // - chip rows expand when `wrapText` causes a chip to wrap onto a second line (Reflow story)\n  // - separator row picks up its own 1px height + margin\n  rows: ['auto'],\n};\n\nconst useExecOnceAfterFirstRender = (callback: () => void) => {\n  const hasExecutedRef = React.useRef(false);\n  const executeInitialFocusRef = React.useRef(callback);\n  executeInitialFocusRef.current = callback;\n  useEffect(() => {\n    if (!hasExecutedRef.current) {\n      executeInitialFocusRef.current();\n      hasExecutedRef.current = true;\n    }\n  }, []);\n};\n\ntype MountedOpenAutofocusNuanceConfig = {\n  pendingRef: React.MutableRefObject<boolean>;\n  trackFocusPanel: () => void;\n};\n\n/**\n * NUANCE \u2014 the single case that initial-focus-on-open (useAppPickerFloatingContext's onOpen) cannot\n * cover: DSAppPicker rendered ALREADY open (declarative `isOpen` at mount, no user interaction).\n * That open is not a transition, so `onOpen` never fires for it. This mount-time hook seeds the panel\n * wrapper, which is what a pointer open seeds too: there was no gesture at all here, so the\n * keyboard-only \"land on the selected app\" rule does not apply, and the panel is the target that gets\n * the dialog announced. `pendingRef` is true only when the component started open and is flipped\n * false on first consume, so a later controlled reopen \u2014 a real transition handled by `onOpen` \u2014\n * does not double-seed. Every user-driven open (click/keyboard) is a transition handled by `onOpen`,\n * NOT here.\n *\n * REMOVABILITY: if the team decides declarative-open should not autofocus, delete this hook and its\n * call, and flip the \"rendered already-open \u2026 focuses the panel wrapper\" assertions in\n * DSAppPicker.keyboard.test.js. Nothing else depends on it.\n */\nconst useMountedOpenAutofocusNuance = ({ pendingRef, trackFocusPanel }: MountedOpenAutofocusNuanceConfig) => {\n  useExecOnceAfterFirstRender(() => {\n    if (!pendingRef.current) return;\n    pendingRef.current = false;\n    trackFocusPanel();\n  });\n};\n\nconst AppPanelBase = () => {\n  const {\n    propsWithDefault: { customApps, onKeyDown },\n    ownerPropsConfig,\n    globalAttributes,\n    xstyledProps,\n    mountedOpenAutofocusPendingRef,\n    focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusPanel },\n  } = useContext(DSAppPickerContext);\n\n  // Global attributes are spread here, on the panel root, which is this component's root for the purpose\n  // of the Dimsum convention that global attributes land on the styled root (see project_slots.md \u2014 it is\n  // gate 2 of `data-dimsum-parent-slot`, and a component spreading them on an inner control is treated as\n  // a defect, not a variant).\n  //\n  // There is no element containing both the trigger and the floating panel, so \"root\" has to be chosen\n  // rather than read off the tree. The panel is the right choice, and not merely the larger one: the\n  // floating context, the sections and the chips are what this component actually is, while the trigger is\n  // the replaceable part \u2014 `TriggerComponent` already lets a consumer supply their own, and the direction\n  // ds-menu-button points at (a behavioural layer wrapping arbitrary children, with the menu as its own\n  // part) would make it fully app-owned. The panel stays the root through that change; a trigger-rooted\n  // choice would not survive it.\n  //\n  // `wrap`, `onClick`, and `onKeyDown` are filtered out because they collide with the public component API\n  // (which uses these for different semantics).\n  const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;\n\n  // ---------------------------------------------------------------------------\n  // Initial focus on panel open.\n  // ---------------------------------------------------------------------------\n  // User-driven opens (click/keyboard) are open transitions, seeded by\n  // useAppPickerFloatingContext's onOpen. The one case that isn't a transition \u2014 being rendered\n  // already-open (declarative `isOpen` at mount) \u2014 is covered here, scoped to exactly that.\n  useMountedOpenAutofocusNuance({\n    pendingRef: mountedOpenAutofocusPendingRef,\n    trackFocusPanel,\n  });\n\n  // ---------------------------------------------------------------------------\n  // Panel wrapper \u2014 tracker-driven focus for the mouse-open announcement path.\n  // handleWrapperRef gets a new reference when isWrapperFocused changes \u2192 React\n  // re-invokes the callback with the DOM node \u2192 node.focus() fires.\n  // ---------------------------------------------------------------------------\n  const isWrapperFocused = focusRegion === APP_PICKER_REGION_FOCUSES.PANEL;\n\n  const handleWrapperRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && isWrapperFocused) node.focus();\n    },\n    [isWrapperFocused],\n  );\n\n  // Default Escape-close/refocus is handled declaratively by useFloatingContext\n  // (see useAppPickerFloatingContext's closeOnEscape/onEscape wiring) whenever there is no consumer\n  // onKeyDown \u2014 a consumer-provided onKeyDown takes over keydown handling entirely.\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef: firstFocusableRef,\n    lastElementRef: lastFocusableRef,\n    onKeyDown,\n  });\n\n  // The panel root carries NO aria-label: it is a roleless element (generic role does not support\n  // an accessible name, so any label here is dropped by assistive tech). The component's accessible\n  // name lives on the dialog \u2014 see AppPickerContent's role=\"dialog\" + aria-labelledby.\n  return (\n    <StyledWrapper\n      innerRef={handleWrapperRef}\n      data-testid={DSAppPickerDataTestIds.ROOT}\n      cols={wrapperGridLayout.cols}\n      rows={wrapperGridLayout.rows}\n      // when opening the dialog via mouse, the focus is programmatically assigned here via handleWrapperRef, -1 allows .focus() to work\n      tabIndex={-1}\n      {...ownerPropsConfig}\n      {...safeGlobalAttributes}\n      {...xstyledProps}\n      onKeyDown={handleOnKeyDown}\n    >\n      <AppSection />\n      {customApps.length > 0 && (\n        <>\n          <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} {...ownerPropsConfig}>\n            <StyledSeparator data-testid={DSAppPickerDataTestIds.SEPARATOR} {...ownerPropsConfig} />\n          </StyledListItemFullRow>\n          <AppSection isCustomApps />\n        </>\n      )}\n    </StyledWrapper>\n  );\n};\n\nexport const AppPanel = memo(AppPanelBase);\nAppPanel.displayName = 'DSAppPicker.AppPanel';\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingWrapper, PopoverArrow } from "@elliemae/ds-floating-context";
+import { styled } from "@elliemae/ds-system";
+import { useContext } from "react";
+import { DSAppPickerName, DSAppPickerSlots } from "../../constants/index.js";
+import { DSAppPickerContext } from "../../DSAppPickerCTX.js";
+import { getIdForAppPickerTrigger } from "../../util/instanceIds.js";
+import { AppPanel } from "../AppPanel.js";
+import { Trigger } from "../Trigger.js";
+import { useAppPickerFloatingContext } from "./useAppPickerFloatingContext.js";
+const StyledAppPickerFloating = styled(FloatingWrapper, {
+  name: DSAppPickerName,
+  slot: DSAppPickerSlots.FLOATING_WRAPPER
+})``;
+const AppPickerContent = () => {
+  const {
+    ownerPropsConfig,
+    propsWithDefault,
+    focusTrackers,
+    openIntentRef,
+    resolvedIsOpen,
+    setInternalIsOpen,
+    instanceUid
+  } = useContext(DSAppPickerContext);
+  const {
+    floatingStyles,
+    arrowStyles,
+    floatingContext,
+    floatingInnerRef,
+    handleTriggerRef,
+    handleTriggerClick,
+    handleTriggerKeyDown
+  } = useAppPickerFloatingContext({
+    propsWithDefault,
+    focusTrackers,
+    openIntentRef,
+    resolvedIsOpen,
+    setInternalIsOpen
+  });
+  const dialogLabelId = getIdForAppPickerTrigger(instanceUid);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        handleTriggerRef,
+        handleTriggerClick,
+        handleTriggerKeyDown,
+        dialogLabelId
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      StyledAppPickerFloating,
+      {
+        innerRef: floatingInnerRef,
+        isOpen: resolvedIsOpen,
+        floatingStyles,
+        context: floatingContext,
+        getOwnerProps: ownerPropsConfig.getOwnerProps,
+        getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
+        role: "dialog",
+        "aria-labelledby": dialogLabelId,
+        children: [
+          /* @__PURE__ */ jsx(AppPanel, {}),
+          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AppPickerContent
+};
+//# sourceMappingURL=AppPickerContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/AppPickerFloatingContext/AppPickerContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { getIdForAppPickerTrigger } from '../../util/instanceIds.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    openIntentRef,\n    resolvedIsOpen,\n    setInternalIsOpen,\n    instanceUid,\n  } = useContext(DSAppPickerContext);\n  const {\n    floatingStyles,\n    arrowStyles,\n    floatingContext,\n    floatingInnerRef,\n    handleTriggerRef,\n    handleTriggerClick,\n    handleTriggerKeyDown,\n  } = useAppPickerFloatingContext({\n    propsWithDefault,\n    focusTrackers,\n    openIntentRef,\n    resolvedIsOpen,\n    setInternalIsOpen,\n  });\n\n  // Suffix owned by util/instanceIds \u2014 never composed inline, so consumers and this call site cannot\n  // drift apart. `getIdForAppPickerTrigger` is the exported counterpart.\n  const dialogLabelId = getIdForAppPickerTrigger(instanceUid);\n\n  return (\n    <>\n      <Trigger\n        handleTriggerRef={handleTriggerRef}\n        handleTriggerClick={handleTriggerClick}\n        handleTriggerKeyDown={handleTriggerKeyDown}\n        dialogLabelId={dialogLabelId}\n      />\n      <StyledAppPickerFloating\n        innerRef={floatingInnerRef}\n        isOpen={resolvedIsOpen}\n        floatingStyles={floatingStyles}\n        context={floatingContext}\n        getOwnerProps={ownerPropsConfig.getOwnerProps}\n        getOwnerPropsArguments={ownerPropsConfig.getOwnerPropsArguments}\n        role=\"dialog\"\n        aria-labelledby={dialogLabelId}\n      >\n        <AppPanel />\n        <PopoverArrow {...arrowStyles} />\n      </StyledAppPickerFloating>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+CnB,mBACE,KAMA,YAPF;AA/CJ,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,0BAA0B;AAEnC,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,mCAAmC;AAE5C,MAAM,0BAA0B,OAAO,iBAAiB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAEM,MAAM,mBAA4D,MAAM;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,kBAAkB;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,gBAAgB,yBAAyB,WAAW;AAE1D,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;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,QACzC,MAAK;AAAA,QACL,mBAAiB;AAAA,QAEjB;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { useFloatingContext } from "@elliemae/ds-floating-context";
+import { useCallback, useMemo, useRef } from "react";
+const useAppPickerFloatingContext = (appPickerConfig) => {
+  const { propsWithDefault, focusTrackers, openIntentRef, resolvedIsOpen, setInternalIsOpen } = appPickerConfig;
+  const {
+    onOpen,
+    onClose,
+    actionRef,
+    onClick,
+    onClickOutside,
+    onKeyDown,
+    triggerRef,
+    isOpen,
+    openAndFocusOnArrowKeys
+  } = propsWithDefault;
+  const isControlled = typeof isOpen === "boolean";
+  const { trackFocusSelectedItem, trackFocusSelectedOrLastItem, trackFocusItemAtIndex, trackFocusPanel } = focusTrackers;
+  const defaultTriggerRef = useRef(null);
+  const handleClickOutside = useCallback(
+    (e) => {
+      if (!isControlled) onClose?.({ reason: "click-outside", event: e });
+      setInternalIsOpen(false);
+      onClickOutside?.(e);
+    },
+    [isControlled, onClose, setInternalIsOpen, onClickOutside]
+  );
+  const handleScopedEscape = useCallback(
+    (event) => {
+      if (!isControlled) onClose?.({ reason: "escape", event });
+      setInternalIsOpen(false);
+    },
+    [isControlled, onClose, setInternalIsOpen]
+  );
+  const handleFloatingClose = useCallback(
+    (info) => {
+      if (info.reason === "controlled-flip" && isControlled) onClose?.({ reason: "controlled" });
+    },
+    [isControlled, onClose]
+  );
+  const handleFloatingOpen = useCallback(
+    (info) => {
+      if (openIntentRef.current === "keyboard-first") trackFocusSelectedItem();
+      else if (openIntentRef.current === "keyboard-last") trackFocusSelectedOrLastItem();
+      else trackFocusPanel();
+      if (info.reason === "controlled-flip" && isControlled) onOpen?.({ reason: "controlled" });
+    },
+    [openIntentRef, trackFocusSelectedItem, trackFocusSelectedOrLastItem, trackFocusPanel, isControlled, onOpen]
+  );
+  const floatingContextConfig = 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,
+      /*
+       * Two conditions, and the second is a safety gate rather than a preference.
+       *
+       * `!onKeyDown` — a consumer who supplies onKeyDown owns the key entirely, so useFloatingContext
+       * neither routes the Escape to onEscape (see handleScopedEscape) nor returns focus to the trigger.
+       *
+       * `!isControlled` — `returnFocusToReference` is true below, and the hook applies it on a scoped
+       * Escape regardless of who owns the open state. For a controlled picker `handleScopedEscape`'s
+       * `setInternalIsOpen(false)` is inert, so leaving this on would move focus to the trigger while
+       * the consumer's panel is still open: focus outside an open dialog. A controlled consumer owns
+       * the close, so they own the Escape and the refocus that goes with it.
+       */
+      closeOnEscape: !onKeyDown && !isControlled,
+      onClose: handleFloatingClose,
+      onEscape: handleScopedEscape,
+      onOpen: handleFloatingOpen,
+      returnFocusToReference: true,
+      externalReferenceElement: triggerRef?.current || defaultTriggerRef.current
+    }),
+    [
+      handleClickOutside,
+      handleScopedEscape,
+      handleFloatingClose,
+      handleFloatingOpen,
+      isControlled,
+      onKeyDown,
+      resolvedIsOpen,
+      triggerRef
+    ]
+  );
+  const {
+    refs: floatingRefs,
+    floatingStyles,
+    arrowStyles,
+    context: floatingContext
+  } = useFloatingContext(floatingContextConfig);
+  const handleTriggerRef = useCallback(
+    (node) => {
+      defaultTriggerRef.current = node;
+      floatingRefs.setReference(node);
+      if (triggerRef) {
+        triggerRef.current = node;
+      }
+    },
+    [floatingRefs, triggerRef]
+  );
+  const handleActionRef = 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 = useCallback(
+    (node) => {
+      floatingRefs.setFloating(node);
+      handleActionRef(node);
+    },
+    [floatingRefs.setFloating, handleActionRef]
+  );
+  const handleTriggerClick = useCallback(
+    (e) => {
+      openIntentRef.current = e.detail === 0 ? "keyboard-first" : "pointer";
+      onClick?.(e);
+      if (!isControlled) {
+        if (resolvedIsOpen) onClose?.({ reason: "trigger-toggle", event: e });
+        else onOpen?.({ reason: "trigger", event: e });
+      }
+      setInternalIsOpen((prev) => !prev);
+    },
+    [onClick, openIntentRef, setInternalIsOpen, isControlled, resolvedIsOpen, onClose, onOpen]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (e) => {
+      if (!openAndFocusOnArrowKeys) return;
+      if (e.code !== "ArrowDown" && e.code !== "ArrowUp") return;
+      if (resolvedIsOpen) return;
+      e.preventDefault();
+      openIntentRef.current = e.code === "ArrowDown" ? "keyboard-first" : "keyboard-last";
+      if (!isControlled) onOpen?.({ reason: "trigger", event: e });
+      setInternalIsOpen(true);
+    },
+    [openAndFocusOnArrowKeys, resolvedIsOpen, openIntentRef, isControlled, onOpen, setInternalIsOpen]
+  );
+  return {
+    floatingStyles,
+    arrowStyles,
+    floatingContext,
+    handleTriggerRef,
+    handleTriggerClick,
+    handleTriggerKeyDown,
+    floatingInnerRef
+  };
+};
+export {
+  useAppPickerFloatingContext
+};
+//# sourceMappingURL=useAppPickerFloatingContext.js.map