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

package/dist/cjs/config/useAppPicker.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(useAppPicker_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
+var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_useFocusTracker = require("./useFocusTracker.js");
 var import_useValidateProps = require("./useValidateProps.js");
@@ -44,13 +45,14 @@ const useAppPicker = (props) => {
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
   const wasOpenedByKeyboardRef = (0, import_react.useRef)(false);
-  const { isOpen, apps, customApps } = propsWithDefault;
+  const { isOpen, apps, customApps, id } = propsWithDefault;
   const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
   const resolvedIsOpen = typeof isOpen === "boolean" ? isOpen : internalIsOpen;
   const mountedOpenAutofocusPendingRef = (0, import_react.useRef)(resolvedIsOpen);
   const allApps = (0, import_react.useMemo)(() => [...apps, ...customApps], [apps, customApps]);
   const useFocusTrackerConfig = (0, import_react.useMemo)(() => ({ allApps }), [allApps]);
   const focusTrackers = (0, import_useFocusTracker.useFocusTracker)(useFocusTrackerConfig);
+  const instanceUid = import_react.default.useMemo(() => id || `ds-app-picker-${(0, import_uid.uid)(5)}`, [id]);
   return import_react.default.useMemo(
     () => ({
       focusTrackers,
@@ -61,9 +63,10 @@ const useAppPicker = (props) => {
       wasOpenedByKeyboardRef,
       mountedOpenAutofocusPendingRef,
       resolvedIsOpen,
-      setInternalIsOpen
+      setInternalIsOpen,
+      instanceUid
     }),
-    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen]
+    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid]
   );
 };
 //# sourceMappingURL=useAppPicker.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useAppPicker.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // Use propsWithDefault (stable, deep-comparison memoized) instead of { ...props }\n  // to prevent getOwnerPropsArguments from creating a new object reference every render.\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = useGetXstyledProps<DSAppPickerT.Props>(props);\n  // =============================================================================\n  // Specific component state and logics\n  // =============================================================================\n  const wasOpenedByKeyboardRef = useRef(false);\n\n  // \"Is the panel open\" is top-level component state. `isOpen` (controlled) takes precedence over\n  // the internal state when provided. resolvedIsOpen feeds useFloatingContext's\n  // externallyControlledIsOpen; initial-focus-on-open is driven off useFloatingContext's onOpen\n  // (which fires on that transition), so the focus tracker itself stays a pure region tracker with\n  // no open-state awareness.\n  const { isOpen, apps, customApps } = propsWithDefault;\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const resolvedIsOpen = typeof isOpen === 'boolean' ? isOpen : internalIsOpen;\n\n  // Was DSAppPicker rendered already-open at mount (declarative `isOpen`, before any user\n  // interaction)? Such an open is not a transition, so useAppPickerFloatingContext's onOpen seed\n  // never fires for it \u2014 AppPanel's useMountedOpenAutofocusNuance consumes this to seed that one\n  // case. Captured once; the nuance flips it false after consuming so a later controlled reopen\n  // (a real transition, handled by onOpen) doesn't re-trigger it.\n  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);\n\n  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);\n  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);\n  const focusTrackers = useFocusTracker(useFocusTrackerConfig);\n\n  return React.useMemo(\n    () => ({\n      focusTrackers,\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n      wasOpenedByKeyboardRef,\n      mountedOpenAutofocusPendingRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,mBAAiD;AACjD,mCAA4E;AAC5E,6BAAgC;AAChC,8BAAiC;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,gDAAiB,kBAAkB,uDAA0B;AAM7D,QAAM,uBAAmB,uCAAc,kBAAkB,gBAAgB;AAEzE,QAAM,uBAAmB,gDAA2C,KAAK;AACzE,QAAM,mBAAe,4CAAuC,KAAK;AAIjE,QAAM,6BAAyB,qBAAO,KAAK;AAO3C,QAAM,EAAE,QAAQ,MAAM,WAAW,IAAI;AACrC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,qCAAiC,qBAAO,cAAc;AAE5D,QAAM,cAAU,sBAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,4BAAwB,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,oBAAgB,wCAAgB,qBAAqB;AAE3D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,cAAc;AAAA,EACpG;AACF;",
+  "sourcesContent": ["import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n  useValidateProps(propsWithDefault, DSAppPickerPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  // Use propsWithDefault (stable, deep-comparison memoized) instead of { ...props }\n  // to prevent getOwnerPropsArguments from creating a new object reference every render.\n  const ownerPropsConfig = useOwnerProps(propsWithDefault, propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes<DSAppPickerT.Props>(props);\n  const xstyledProps = useGetXstyledProps<DSAppPickerT.Props>(props);\n  // =============================================================================\n  // Specific component state and logics\n  // =============================================================================\n  const wasOpenedByKeyboardRef = useRef(false);\n\n  // \"Is the panel open\" is top-level component state. `isOpen` (controlled) takes precedence over\n  // the internal state when provided. resolvedIsOpen feeds useFloatingContext's\n  // externallyControlledIsOpen; initial-focus-on-open is driven off useFloatingContext's onOpen\n  // (which fires on that transition), so the focus tracker itself stays a pure region tracker with\n  // no open-state awareness.\n  const { isOpen, apps, customApps, id } = propsWithDefault;\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const resolvedIsOpen = typeof isOpen === 'boolean' ? isOpen : internalIsOpen;\n\n  // Was DSAppPicker rendered already-open at mount (declarative `isOpen`, before any user\n  // interaction)? Such an open is not a transition, so useAppPickerFloatingContext's onOpen seed\n  // never fires for it \u2014 AppPanel's useMountedOpenAutofocusNuance consumes this to seed that one\n  // case. Captured once; the nuance flips it false after consuming so a later controlled reopen\n  // (a real transition, handled by onOpen) doesn't re-trigger it.\n  const mountedOpenAutofocusPendingRef = useRef(resolvedIsOpen);\n\n  const allApps = useMemo(() => [...apps, ...customApps], [apps, customApps]);\n  const useFocusTrackerConfig = useMemo(() => ({ allApps }), [allApps]);\n  const focusTrackers = useFocusTracker(useFocusTrackerConfig);\n\n  const instanceUid = React.useMemo(() => id || `ds-app-picker-${uid(5)}`, [id]);\n\n  return React.useMemo(\n    () => ({\n      focusTrackers,\n      propsWithDefault,\n      ownerPropsConfig,\n      globalAttributes,\n      xstyledProps,\n      wasOpenedByKeyboardRef,\n      mountedOpenAutofocusPendingRef,\n      resolvedIsOpen,\n      setInternalIsOpen,\n      instanceUid,\n    }),\n    [focusTrackers, propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps, resolvedIsOpen, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,mBAAiD;AACjD,iBAAoB;AACpB,mCAA4E;AAC5E,6BAAgC;AAChC,8BAAiC;AAE1B,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,gDAAiB,kBAAkB,uDAA0B;AAM7D,QAAM,uBAAmB,uCAAc,kBAAkB,gBAAgB;AAEzE,QAAM,uBAAmB,gDAA2C,KAAK;AACzE,QAAM,mBAAe,4CAAuC,KAAK;AAIjE,QAAM,6BAAyB,qBAAO,KAAK;AAO3C,QAAM,EAAE,QAAQ,MAAM,YAAY,GAAG,IAAI;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,iBAAiB,OAAO,WAAW,YAAY,SAAS;AAO9D,QAAM,qCAAiC,qBAAO,cAAc;AAE5D,QAAM,cAAU,sBAAQ,MAAM,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAC1E,QAAM,4BAAwB,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AACpE,QAAM,oBAAgB,wCAAgB,qBAAqB;AAE3D,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,MAAM,qBAAiB,gBAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAE7E,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,kBAAkB,kBAAkB,cAAc,gBAAgB,WAAW;AAAA,EACjH;AACF;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -46,6 +46,7 @@ const APP_PICKER_REGION_FOCUSES = {
 const CHIP_REGION_PREFIX = "chip-";
 const DSAppPickerSlots = {
   ROOT: "root",
+  GROUP: "group",
   ITEM: "item",
   TITLE: "title",
   SEPARATOR: "separator",

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

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

package/dist/cjs/package.json

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

package/dist/cjs/parts/AppPanel.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/AppPanel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport React, { memo, useCallback, useContext, useEffect, useMemo } from 'react';\nimport { APP_PICKER_REGION_FOCUSES, DSAppPickerDataTestIds } from '../constants/index.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { AppSection } from './AppSection.js';\nimport { StyledListItemFullRow, StyledSeparator, StyledWrapper } from './style.js';\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  triggerIsInternal: boolean;\n  trackFocusPanel: () => void;\n  trackFocusFirstItem: () => 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 same\n * initial focus a user-driven open would (panel wrapper for the internal trigger, first item for an\n * external renderTrigger). `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\" assertion in\n * app-picker.keyboard.test.js. Nothing else depends on it.\n */\nconst useMountedOpenAutofocusNuance = ({\n  pendingRef,\n  triggerIsInternal,\n  trackFocusPanel,\n  trackFocusFirstItem,\n}: MountedOpenAutofocusNuanceConfig) => {\n  useExecOnceAfterFirstRender(() => {\n    if (!pendingRef.current) return;\n    pendingRef.current = false;\n    if (triggerIsInternal) trackFocusPanel();\n    else trackFocusFirstItem();\n  });\n};\n\nconst AppPanelBase = () => {\n  const {\n    propsWithDefault: { apps, customApps, sectionTitle, customSectionTitle, renderTrigger, onKeyDown },\n    ownerPropsConfig,\n    globalAttributes,\n    xstyledProps,\n    mountedOpenAutofocusPendingRef,\n    focusTrackers: {\n      focusRegion,\n      firstFocusableRef,\n      lastFocusableRef,\n      trackFocusPanel,\n      trackFocusFirstItem,\n      firstFocusableIdx,\n      lastFocusableIdx,\n    },\n  } = useContext(DSAppPickerContext);\n  const triggerIsInternal = !renderTrigger;\n\n  // Global attributes are spread onto the ul because there is no shared wrapper that contains\n  // both the floating panel and the trigger. `wrap`, `onClick`, and `onKeyDown` are filtered out\n  // because they collide with the public component API (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    triggerIsInternal,\n    trackFocusPanel,\n    trackFocusFirstItem,\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  // ---------------------------------------------------------------------------\n\n  const handleAppClick = useCallback((e: React.MouseEvent, app: DSAppPickerT.AppItem) => {\n    if (app.onClick) app.onClick(e, app);\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  const totalAppsLength = useMemo(() => apps.length + customApps.length, [apps.length, customApps.length]);\n\n  return (\n    <StyledWrapper\n      forwardedAs=\"ul\"\n      role=\"listbox\"\n      innerRef={handleWrapperRef}\n      data-testid={DSAppPickerDataTestIds.ROOT}\n      cols={wrapperGridLayout.cols}\n      rows={wrapperGridLayout.rows}\n      tabIndex={-1}\n      aria-label={`Application picker, ${sectionTitle} (${apps.length} apps)${\n        customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ''\n      }`}\n      {...ownerPropsConfig}\n      {...safeGlobalAttributes}\n      {...xstyledProps}\n      onKeyDown={handleOnKeyDown}\n    >\n      <AppSection\n        items={apps}\n        title={sectionTitle}\n        positionOffset={0}\n        totalCount={totalAppsLength}\n        ownerProps={ownerPropsConfig}\n        onItemClick={handleAppClick}\n        firstFocusableIdx={firstFocusableIdx}\n        lastFocusableIdx={lastFocusableIdx}\n      />\n      {customApps.length > 0 && (\n        <>\n          <StyledListItemFullRow\n            data-testid={DSAppPickerDataTestIds.ROW}\n            aria-hidden\n            role=\"group\"\n            {...ownerPropsConfig}\n          >\n            <StyledSeparator data-testid={DSAppPickerDataTestIds.SEPARATOR} role=\"presentation\" {...ownerPropsConfig} />\n          </StyledListItemFullRow>\n          <AppSection\n            items={customApps}\n            title={customSectionTitle}\n            positionOffset={apps.length}\n            totalCount={totalAppsLength}\n            ownerProps={ownerPropsConfig}\n            onItemClick={handleAppClick}\n            keyPrefix=\"custom-\"\n            firstFocusableIdx={firstFocusableIdx}\n            lastFocusableIdx={lastFocusableIdx}\n          />\n        </>\n      )}\n    </StyledWrapper>\n  );\n};\n\nexport const AppPanel = memo(AppPanelBase);\nAppPanel.displayName = 'DSAppPicker.AppPanel';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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  triggerIsInternal: boolean;\n  trackFocusPanel: () => void;\n  trackFocusFirstItem: () => 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 same\n * initial focus a user-driven open would (panel wrapper for the internal trigger, first item for an\n * external renderTrigger). `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\" assertion in\n * DSAppPicker.keyboard.test.js. Nothing else depends on it.\n */\nconst useMountedOpenAutofocusNuance = ({\n  pendingRef,\n  triggerIsInternal,\n  trackFocusPanel,\n  trackFocusFirstItem,\n}: MountedOpenAutofocusNuanceConfig) => {\n  useExecOnceAfterFirstRender(() => {\n    if (!pendingRef.current) return;\n    pendingRef.current = false;\n    if (triggerIsInternal) trackFocusPanel();\n    else trackFocusFirstItem();\n  });\n};\n\nconst AppPanelBase = () => {\n  const {\n    propsWithDefault: { customApps, renderTrigger, onKeyDown },\n    ownerPropsConfig,\n    globalAttributes,\n    xstyledProps,\n    mountedOpenAutofocusPendingRef,\n    focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusPanel, trackFocusFirstItem },\n  } = useContext(DSAppPickerContext);\n  const triggerIsInternal = !renderTrigger;\n\n  // Global attributes are spread onto the panel root because there is no shared wrapper that\n  // contains both the floating panel and the trigger. `wrap`, `onClick`, and `onKeyDown` are\n  // filtered out because they collide with the public component API (which uses these for\n  // 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    triggerIsInternal,\n    trackFocusPanel,\n    trackFocusFirstItem,\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -52,7 +52,8 @@ const AppPickerContent = () => {
     focusTrackers,
     wasOpenedByKeyboardRef,
     resolvedIsOpen,
-    setInternalIsOpen
+    setInternalIsOpen,
+    instanceUid
   } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
   const { floatingStyles, arrowStyles, floatingContext, floatingInnerRef, handleTriggerRef, handleTriggerClick } = (0, import_useAppPickerFloatingContext.useAppPickerFloatingContext)({
     propsWithDefault,
@@ -61,8 +62,16 @@ const AppPickerContent = () => {
     resolvedIsOpen,
     setInternalIsOpen
   });
+  const dialogLabelId = `${instanceUid}-dialog-trigger-btn`;
   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.jsx)(
+      import_Trigger.Trigger,
+      {
+        handleTriggerRef,
+        handleTriggerClick,
+        dialogLabelId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       StyledAppPickerFloating,
       {
@@ -72,6 +81,8 @@ const AppPickerContent = () => {
         context: floatingContext,
         getOwnerProps: ownerPropsConfig.getOwnerProps,
         getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
+        role: "dialog",
+        "aria-labelledby": dialogLabelId,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPanel.AppPanel, {}),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })

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

@@ -1,7 +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;",
+  "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    instanceUid,\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\n  const dialogLabelId = `${instanceUid}-dialog-trigger-btn`;\n\n  return (\n    <>\n      <Trigger\n        handleTriggerRef={handleTriggerRef}\n        handleTriggerClick={handleTriggerClick}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AArCJ,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,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;AAEH,QAAM,gBAAgB,GAAG,WAAW;AAEpC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;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,sDAAC,4BAAS;AAAA,UACV,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/AppPickerItem.js

@@ -33,25 +33,33 @@ __export(AppPickerItem_exports, {
 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_ds_system = require("@elliemae/ds-system");
 var import_ds_chip = require("@elliemae/ds-chip");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
 var import_constants = require("../constants/index.js");
-var import_style = require("./style.js");
 var import_DSAppPickerCTX = require("../DSAppPickerCTX.js");
 var import_getChipRegionId = require("../util/getChipRegionId.js");
+const StyledListItem = (0, import_ds_system.styled)("div", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ITEM })`
+  display: flex;
+`;
 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, chipId, positionLabel, ownerProps, onClick, isFirstFocusable, isLastFocusable }) => {
+  ({ app, positionAnnouncement, chipId, isFirstFocusable, isLastFocusable }) => {
     const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;
     const {
-      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset }
+      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset },
+      ownerPropsConfig: { getOwnerProps }
     } = (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]);
+    const handleClick = import_react.default.useCallback(
+      (e) => {
+        if (app.onClick) app.onClick(e, app);
+      },
+      [app]
+    );
     const handleFocus = import_react.default.useCallback(() => trackFocusChip(chipId), [chipId, trackFocusChip]);
     const handleChipRef = import_react.default.useCallback(
       (node) => {
@@ -62,11 +70,10 @@ const AppPickerItem = import_react.default.memo(
       [isFirstFocusable, isLastFocusable, isFocused, firstFocusableRef, lastFocusableRef]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_style.StyledListItem,
+      StyledListItem,
       {
         "data-testid": import_constants.DSAppPickerDataTestIds.ITEM,
-        role: "presentation",
-        getOwnerProps: ownerProps.getOwnerProps,
+        getOwnerProps,
         getOwnerPropsArguments,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           StyledChip,
@@ -76,13 +83,12 @@ const AppPickerItem = import_react.default.memo(
             disabled,
             applyAriaDisabled,
             selected,
-            "aria-selected": selected,
-            role: "option",
+            "aria-current": selected ? "true" : void 0,
+            "aria-label": `${label} ${positionAnnouncement}`,
             id,
-            "aria-label": `${label}. ${positionLabel}`,
             icon: renderIcon,
             label,
-            getOwnerProps: ownerProps.getOwnerProps,
+            getOwnerProps,
             getOwnerPropsArguments,
             wrapText,
             innerRef: handleChipRef,

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 { 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;",
+  "sourcesContent": ["import { DSChip } from '@elliemae/ds-chip';\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 { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { getChipRegionId } from '../util/getChipRegionId.js';\n\n// Grid items stretch to their row height, but the chip inside would not follow: DSChip's root is a\n// block-level box with `height: auto` under `wrapText`, so a single-line chip stayed short next to a\n// chip whose label wrapped onto two lines (uneven tiles \u2014 PUI ticket \"Chips don't keep a consistent\n// height\"). Making this a flex container hands the stretched row height down to the chip root; the\n// chip's own button already carries `min-height: 100%`, so it fills from there.\nconst StyledListItem = styled('div', { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`\n  display: flex;\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  isFirstFocusable: boolean;\n  isLastFocusable: boolean;\n  positionAnnouncement: string;\n}\n\nexport const AppPickerItem: React.FC<AppPickerItemProps> = React.memo(\n  ({ app, positionAnnouncement, chipId, isFirstFocusable, isLastFocusable }) => {\n    const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;\n    const {\n      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset },\n      ownerPropsConfig: { getOwnerProps },\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(\n      (e: React.MouseEvent) => {\n        if (app.onClick) app.onClick(e, app);\n      },\n      [app],\n    );\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        getOwnerProps={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          // Only the consumer knows what \"selected\" means in context (current item, toggled, or option in a listbox).\n          // AppPicker is both a consumer and consumed, it owes the programmatic state.\n          // `true` rather than `page`:\n          // `page` claims a set of pages,\n          //    AppPicker cannot know whether a tile is an anchor, a route push, or an in-place context switch.\n          //    A consumer who does know can upgrade the token through the CHIP slot (`dsApppickerChip`), which overrides anything set here.\n          // Omitted when unselected \u2014 `false` is the default and is not exposed either way.\n          aria-current={selected ? 'true' : undefined}\n          // discussed with Juan (A11y SME), the position announcement is best kept to give \"aria-current\" the meaing of \"current within a set\"\n          //   it's not strictly required, but given both apps and customApps are part of the same \"set\" and there is no other semantic tie between the individual chips\n          //   announcing X of Y gives a reasonable context to the user that they are navigating a set of items, and not just a single item even with the button role.\n          // with this X of Y announcement we can also keep the two `role=\"group\"` sections for apps and customApps separate,\n          //   improving the announcement experience as they don't get bombarded with the section title every focus on a button, but only when they first enter the section.\n          aria-label={`${label} ${positionAnnouncement}`}\n          id={id}\n          icon={renderIcon}\n          label={label}\n          getOwnerProps={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;ADsBqC;AAtB5D,qBAAuB;AACvB,uBAAuB;AACvB,mBAAkC;AAClC,uBAA0E;AAC1E,4BAAmC;AAEnC,6BAAgC;AAOhC,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAG3F,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;AAYjG,MAAM,gBAA8C,aAAAA,QAAM;AAAA,EAC/D,CAAC,EAAE,KAAK,sBAAsB,QAAQ,kBAAkB,gBAAgB,MAAM;AAC5E,UAAM,EAAE,OAAO,UAAU,mBAAmB,UAAU,MAAM,IAAI,SAAS,IAAI;AAC7E,UAAM;AAAA,MACJ,eAAe,EAAE,aAAa,mBAAmB,kBAAkB,gBAAgB,sBAAsB;AAAA,MACzG,kBAAkB,EAAE,cAAc;AAAA,IACpC,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;AAAA,MACxB,CAAC,MAAwB;AACvB,YAAI,IAAI,QAAS,KAAI,QAAQ,GAAG,GAAG;AAAA,MACrC;AAAA,MACA,CAAC,GAAG;AAAA,IACN;AACA,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;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAa,wCAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YAQA,gBAAc,WAAW,SAAS;AAAA,YAMlC,cAAY,GAAG,KAAK,IAAI,oBAAoB;AAAA,YAC5C;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;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

@@ -33,38 +33,62 @@ __export(AppSection_exports, {
 module.exports = __toCommonJS(AppSection_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_style = require("./style.js");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = require("react");
 var import_constants = require("../constants/index.js");
-var import_AppPickerItem = require("./AppPickerItem.js");
+var import_DSAppPickerCTX = require("../DSAppPickerCTX.js");
 var import_getChipId = require("../util/getChipId.js");
-const AppSection = ({
-  items,
-  title,
-  positionOffset,
-  totalCount,
-  ownerProps,
-  onItemClick,
-  keyPrefix = "",
-  firstFocusableIdx,
-  lastFocusableIdx
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledListItemFullRow, { "data-testid": import_constants.DSAppPickerDataTestIds.ROW, "aria-hidden": true, role: "group", ...ownerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", variant: "h3-strong", ...ownerProps, children: title }) }),
-  items.map((app, index) => {
-    const flatIndex = positionOffset + index;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_AppPickerItem.AppPickerItem,
-      {
-        app,
-        chipId: (0, import_getChipId.getChipId)(app, flatIndex),
-        positionLabel: `${title} (${flatIndex + 1} of ${totalCount})`,
-        ownerProps,
-        onClick: onItemClick,
-        isFirstFocusable: flatIndex === firstFocusableIdx,
-        isLastFocusable: flatIndex === lastFocusableIdx
-      },
-      app.id ?? `${app.label}-${keyPrefix}${index}`
-    );
-  })
-] });
+var import_AppPickerItem = require("./AppPickerItem.js");
+var import_shared_styles = require("./shared-styles.js");
+const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.TITLE })`
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  font-size: ${({ theme }) => theme.fontSizes.value[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin: 12px 0 8px 0;
+  line-height: 1.385;
+  text-transform: uppercase;
+  text-align: center;
+`;
+const AppSection = ({ isCustomApps = false }) => {
+  const {
+    propsWithDefault: { apps, customApps, sectionTitle, customSectionTitle },
+    instanceUid,
+    focusTrackers: { firstFocusableIdx, lastFocusableIdx },
+    ownerPropsConfig
+  } = (0, import_react.useContext)(import_DSAppPickerCTX.DSAppPickerContext);
+  const items = isCustomApps ? customApps : apps;
+  const titleId = isCustomApps ? `${instanceUid}-custom-section-title` : `${instanceUid}-section-title`;
+  const title = isCustomApps ? customSectionTitle : sectionTitle;
+  const totalCount = (apps?.length ?? 0) + (customApps?.length ?? 0);
+  const initialPositionOffset = isCustomApps ? apps.length : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_shared_styles.StyledSection,
+    {
+      "data-testid": import_constants.DSAppPickerDataTestIds.GROUP,
+      role: "group",
+      "aria-labelledby": titleId,
+      ...ownerPropsConfig,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_styles.StyledListItemFullRow, { "data-testid": import_constants.DSAppPickerDataTestIds.ROW, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, id: titleId, variant: "h3-strong", ...ownerPropsConfig, children: title }) }),
+        items.map((app, index) => {
+          const flatIndex = initialPositionOffset + index;
+          const positionAnnouncement = `${flatIndex + 1} of ${totalCount}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_AppPickerItem.AppPickerItem,
+            {
+              positionAnnouncement,
+              app,
+              chipId: (0, import_getChipId.getChipId)(app, flatIndex),
+              isFirstFocusable: flatIndex === firstFocusableIdx,
+              isLastFocusable: flatIndex === lastFocusableIdx
+            },
+            app.id ?? `${app.label}-${isCustomApps ? "custom" : "main"}-${index}`
+          );
+        })
+      ]
+    }
+  );
+};
 AppSection.displayName = "DSAppPicker.AppSection";
 //# sourceMappingURL=AppSection.js.map

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';\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;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useContext } from 'react';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport { getChipId } from '../util/getChipId.js';\nimport { AppPickerItem } from './AppPickerItem.js';\nimport { StyledListItemFullRow, StyledSection } from './shared-styles.js';\n\nconst 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\ninterface AppSectionProps {\n  isCustomApps?: boolean;\n}\n\nexport const AppSection: React.FC<AppSectionProps> = ({ isCustomApps = false }) => {\n  const {\n    propsWithDefault: { apps, customApps, sectionTitle, customSectionTitle },\n    instanceUid,\n    focusTrackers: { firstFocusableIdx, lastFocusableIdx },\n    ownerPropsConfig,\n  } = useContext(DSAppPickerContext);\n\n  const items = isCustomApps ? customApps : apps;\n  const titleId = isCustomApps ? `${instanceUid}-custom-section-title` : `${instanceUid}-section-title`;\n  const title = isCustomApps ? customSectionTitle : sectionTitle;\n\n  const totalCount = (apps?.length ?? 0) + (customApps?.length ?? 0);\n  const initialPositionOffset = isCustomApps ? apps.length : 0;\n  return (\n    <StyledSection\n      data-testid={DSAppPickerDataTestIds.GROUP}\n      role=\"group\"\n      aria-labelledby={titleId}\n      {...ownerPropsConfig}\n    >\n      <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} {...ownerPropsConfig}>\n        <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} id={titleId} variant=\"h3-strong\" {...ownerPropsConfig}>\n          {title}\n        </StyledTitle>\n      </StyledListItemFullRow>\n      {items.map((app, index) => {\n        const flatIndex = initialPositionOffset + index;\n        const positionAnnouncement = `${flatIndex + 1} of ${totalCount}`;\n        return (\n          <AppPickerItem\n            key={app.id ?? `${app.label}-${isCustomApps ? 'custom' : 'main'}-${index}`}\n            positionAnnouncement={positionAnnouncement}\n            app={app}\n            chipId={getChipId(app, flatIndex)}\n            isFirstFocusable={flatIndex === firstFocusableIdx}\n            isLastFocusable={flatIndex === lastFocusableIdx}\n          />\n        );\n      })}\n    </StyledSection>\n  );\n};\n\nAppSection.displayName = 'DSAppPicker.AppSection';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCnB;AAtCJ,uBAAuB;AACvB,2BAA6B;AAC7B,mBAAkC;AAClC,uBAA0E;AAC1E,4BAAmC;AACnC,uBAA0B;AAC1B,2BAA8B;AAC9B,2BAAqD;AAErD,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WACrF,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;AAWnD,MAAM,aAAwC,CAAC,EAAE,eAAe,MAAM,MAAM;AACjF,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,YAAY,cAAc,mBAAmB;AAAA,IACvE;AAAA,IACA,eAAe,EAAE,mBAAmB,iBAAiB;AAAA,IACrD;AAAA,EACF,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,QAAQ,eAAe,aAAa;AAC1C,QAAM,UAAU,eAAe,GAAG,WAAW,0BAA0B,GAAG,WAAW;AACrF,QAAM,QAAQ,eAAe,qBAAqB;AAElD,QAAM,cAAc,MAAM,UAAU,MAAM,YAAY,UAAU;AAChE,QAAM,wBAAwB,eAAe,KAAK,SAAS;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wCAAuB;AAAA,MACpC,MAAK;AAAA,MACL,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,oDAAC,8CAAsB,eAAa,wCAAuB,KAAM,GAAG,kBAClE,sDAAC,eAAY,eAAa,wCAAuB,OAAO,IAAI,SAAS,SAAQ,aAAa,GAAG,kBAC1F,iBACH,GACF;AAAA,QACC,MAAM,IAAI,CAAC,KAAK,UAAU;AACzB,gBAAM,YAAY,wBAAwB;AAC1C,gBAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,UAAU;AAC9D,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA,YAAQ,4BAAU,KAAK,SAAS;AAAA,cAChC,kBAAkB,cAAc;AAAA,cAChC,iBAAiB,cAAc;AAAA;AAAA,YAL1B,IAAI,MAAM,GAAG,IAAI,KAAK,IAAI,eAAe,WAAW,MAAM,IAAI,KAAK;AAAA,UAM1E;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;",
   "names": []
 }