@elliemae/ds-app-picker 3.70.0-next.7 → 3.70.0-next.70

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/AppPickerFloatingContext/useAppPickerFloatingContext.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type React from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { useAppPicker } from '../../config/useAppPicker.js';\nimport type { DSAppPickerT } from '../../react-desc-prop-types.js';\n\n/**\n * useAppPickerFloatingContext \u2014 the single point that wires DSAppPicker to\n * `@elliemae/ds-floating-context`'s `useFloatingContext`.\n *\n * WHAT IT DOES (as a black box):\n * AppPicker can be used in two very different ways:\n *  - Controlled: the consumer supplies `isOpen` and drives the open/close transition.\n *          \u2514\u2192 AppPicker can't be event-based as the flip might originate from any cause and we don't own the business logic\n *                  \u2514\u2192 we need to ensure WCAG embedded behaviours (focus, Escape, click-outside) are wired to the consumer's `isOpen` flip.\n *  - Uncontrolled: the consumer does not supply `isOpen` and AppPicker owns the full flows, we only notify the consumer of the transition and its cause.\n *\n * The AppPicker and this file in particular serves as the one place that coordinates the two different ways to use the component and wires with the useFloatingContext hook.\n * This files owns:\n *  - Focus management relative to open/close transitions (initial focus on open, return focus to trigger on close)\n *  - Escape key handling (scoped to the panel and trigger)\n *  - Click-outside handling (panel and trigger)\n *  - Imperative focus API via actionRef\n *  - Controlled/Uncontrolled forks and differences in event notification (eager vs controlled-flip)\n *  - OnOpen and OnClose notification to the consumer with the correct reason and event (if any)\n *\n * IMPORTANT:\n *  Parts of the flow/logic required in this file is offloaded to useFloatingContext internal assumptions and logics.\n *  Changes to useFloatingContext may break the flows in this file, or alter them in ways that are not obvious, the two are closely coupled.\n *\n * DATA / EVENT FLOW\n *\n * Two concerns run in parallel and must not be conflated: (A) what makes the panel show/hide and take\n * focus, and (B) how the consumer is told it opened/closed. They have different origins.\n *\n * (A) PANEL VISIBILITY + FOCUS \u2014  useFloatingContext internal co-ownership of the flow.\n *\n *                a user action                          \u2502 \u2502                      isOpen prop flip\n *    (trigger click / scoped Escape / click outside)    \u2502 \u2502   (not a traceable user action, but the consumer's own flip)\n *      uncontrolled - flips the internal flag           \u2502 \u2502 controlled - AppPicker's own flip is inert, consumer drives it\n *                                                        \u2502\n *                                                        \u25BC\n *                                              resolvedIsOpen changes\n *                                                        \u2502\n *                                                        \u25BC\n *                        useFloatingContext (externallyControlledIsOpen) detects the transition\n *                                                        \u2502\n *                                                        \u25BC\n *                     on open                           \u2502 \u2502              on close\n *                handleFloatingOpen                     \u2502 \u2502   focus is only restored after a SCOPED ESCAPE:\n *  AppPicker business logic seeds initial focus         \u2502 \u2502   useFloatingContext returns focus to the trigger\n *                                                        \u2502 \u2502   (returnFocusToReference). Click-outside / toggle\n *                                                        \u2502 \u2502   / controlled closes do NOT move focus, and\n *                                                        \u2502 \u2502   handleFloatingClose only NOTIFIES (see (B)).\n *                                                        \u2502\n *                                                        \u25BC\n *                          \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                          \u2502  visibility + focus are delivered to final user as expected \u2502\n *                          \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n * (B) CONSUMER NOTIFICATION\n *   Each flow below is the UNCONTROLLED path, where AppPicker owns the transition and can name the true cause.\n *   The controlled equivalent for every trigger is stated once at the end.\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 OPENING TRIGGERS FLOWS \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * TRIGGER CLICK (uncontrolled)\n *                                    trigger click\n *                       user clicks the internal trigger, panel closed\n *                                          \u2502\n *                                          \u25BC\n *                                 handleTriggerClick\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onOpen { reason: 'trigger', event }         \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 CLOSING TRIGGERS FLOWS \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * KEYBOARD ESCAPE (uncontrolled)\n *                       Escape within the panel DOM tree or the trigger\n *            scoped Escape (routed only while closeOnEscape, i.e. no consumer onKeyDown)\n *                                          \u2502\n *                                          \u25BC\n *                                onEscape \u2192 handleScopedEscape\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onClose { reason: 'escape', event }         \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n *  CLICK OUTSIDE (uncontrolled)\n *                           Click outside the panel DOM tree and the trigger\n *                useFloatingContext detects a pointer press outside the panel + trigger\n *                                          \u2502\n *                                          \u25BC\n *                                   handleClickOutside\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onClose { reason: 'click-outside', event }  \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *\n *  CLICK ON TRIGGER (uncontrolled, while internal state is open)\n *                              trigger click while open\n *                       user clicks the internal trigger, panel open\n *                                          \u2502\n *                                          \u25BC\n *                                    handleTriggerClick\n *               ( flips the flag and wires the visual and focus Flow (A) above )\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502 onClose { reason: 'trigger-toggle', event }  \u2502   fired EAGERLY, when the event is triggered\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *                            \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                            \u2502 CONTROLLED OPEN & CLOSE FLOWS    \u2502\n *                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n *   AppPicker's own flip is inert;\n *   We can't fire EAGERLY and we can't track an originating event, there may be NONE\n *   The consumer's `isOpen` flip is reacted to by useFloatingContext, which fires onOpen / onClose with reason 'controlled-flip'\n *   We wire the visual and focus Flow (A) above, and then notify the consumer with reason 'controlled' (no event)\n *                                          \u2502\n *                                          \u25BC\n *                 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n *                 \u2502  onOpen  { reason: 'controlled' }            \u2502                    no event\n *                 \u2502  onClose { reason: 'controlled' }            \u2502   a prop flip is not a traceable user action\n *                 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ------------------------------------------------------------------------------------------------------------------------\n *\n *     Eager (uncontrolled) and controlled-flip paths are mutually exclusive on `isControlled`.\n *     the consumer is notified exactly once per transition \u2014 never twice.\n * On Escape specifically\n *   closeOnEscape is false whenever the picker is controlled (and whenever a consumer supplies onKeyDown)\n *                   \u2514\u2192 AppPicker's onEscape never runs \u2014\n *                                   \u2514\u2192 the close arrives purely by listening to the flag transition\n * ------------------------------------------------------------------------------------------------------------------------\n * A nuance for an edge case:\n *\n * Declarative mount-open (rendered already-open).\n * useFloatingContext fires no onOpen for it (it did not transition to open, it started open),\n *    \u2514\u2192 neither the focus-seed (A) nor the notification (B) runs\n * AppPanel compensates this locally via useMountedOpenAutofocusNuance, it needs to be seen if this is even desired or should be removed\n * ------------------------------------------------------------------------------------------------------------------------\n */\n\ntype ConfiguredAppPickerCtx = ReturnType<typeof useAppPicker>;\n\ntype AppPickerFloatingContextConfig = {\n  propsWithDefault: DSAppPickerT.InternalProps;\n  focusTrackers: ConfiguredAppPickerCtx['focusTrackers'];\n  openIntentRef: ConfiguredAppPickerCtx['openIntentRef'];\n  // Open state is owned by useAppPicker (lifted so useFocusTracker can seed focus in the same fiber).\n  // This hook reads the resolved value for positioning and flips it through the setter to close/toggle.\n  resolvedIsOpen: ConfiguredAppPickerCtx['resolvedIsOpen'];\n  setInternalIsOpen: ConfiguredAppPickerCtx['setInternalIsOpen'];\n};\n\nexport const useAppPickerFloatingContext = (appPickerConfig: AppPickerFloatingContextConfig) => {\n  const { propsWithDefault, focusTrackers, openIntentRef, resolvedIsOpen, setInternalIsOpen } = appPickerConfig;\n  const {\n    onOpen,\n    onClose,\n    actionRef,\n    onClick,\n    onClickOutside,\n    onKeyDown,\n    triggerRef,\n    isOpen,\n    openAndFocusOnArrowKeys,\n  } = propsWithDefault;\n  // Controlled when the consumer supplies `isOpen`. This decides who owns a transition: uncontrolled,\n  // AppPicker's own handlers own it and report the specific event-carrying reason eagerly; controlled,\n  // AppPicker's own flips are inert and the consumer drives open/close via the prop (reason 'controlled').\n  const isControlled = typeof isOpen === 'boolean';\n\n  const { trackFocusSelectedItem, trackFocusSelectedOrLastItem, trackFocusItemAtIndex, trackFocusPanel } =\n    focusTrackers;\n\n  const defaultTriggerRef = useRef<HTMLButtonElement>(null);\n\n  // Uncontrolled close \u2014 see file header (B) \"CLICK OUTSIDE\". Also forwards the raw event to onClickOutside.\n  const handleClickOutside = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (!isControlled) onClose?.({ reason: 'click-outside', event: e });\n      setInternalIsOpen(false);\n      onClickOutside?.(e as MouseEvent);\n    },\n    [isControlled, onClose, setInternalIsOpen, onClickOutside],\n  );\n\n  // onEscape target \u2014 see file header (B) \"KEYBOARD ESCAPE\". Scoped Escape only; gated by closeOnEscape\n  // (`!onKeyDown`, see the config below).\n  const handleScopedEscape = useCallback(\n    (event: KeyboardEvent) => {\n      if (!isControlled) onClose?.({ reason: 'escape', event });\n      setInternalIsOpen(false);\n    },\n    [isControlled, onClose, setInternalIsOpen],\n  );\n\n  // Controlled close notify \u2014 see file header \"CONTROLLED OPEN & CLOSE FLOWS\". The guard also filters\n  // out a non-scoped Escape, which reaches here as reason 'interaction' (not 'controlled-flip').\n  const handleFloatingClose = useCallback(\n    (info: DSHookFloatingContextT.OpenChange) => {\n      if (info.reason === 'controlled-flip' && isControlled) onClose?.({ reason: 'controlled' });\n    },\n    [isControlled, onClose],\n  );\n\n  // Open transition \u2014 see file header (A) (focus) + \"CONTROLLED OPEN & CLOSE FLOWS\" (notify). Seeds\n  // initial focus (targets stated in the block comment inside, which is the authority) and, when\n  // controlled, notifies the consumer. Mount-open is not a transition, so this never fires for it (AppPanel's\n  // useMountedOpenAutofocusNuance handles that one case).\n  const handleFloatingOpen = useCallback(\n    (info: DSHookFloatingContextT.OpenChange) => {\n      /*\n       * Initial focus on open, decided by HOW the picker was opened and by nothing else:\n       *\n       *   keyboard (Enter/Space) \u2192 the selected app, falling back to the first available one\n       *   pointer (real click/tap) \u2192 the panel wrapper\n       *\n       * Neither branch depends on who rendered the trigger, because in both cases the landing spot is the\n       * picker's own element:\n       *\n       *   - \"A keyboard open lands on the current selection\" is stated by `trackFocusSelectedItem`, by the\n       *     public `actionRef.focusSelectedOrFirstAvailable`, and by the `aria-current` marking of the\n       *     selected chip.\n       *   - \"A pointer open lands on the panel\" exists as a explicit design preference that has never been marked explicitly as A11y violating,\n       *     and as such, we have no strong reason to oppose the preference yet. This is subject to review the moment any A11y concern is raised.\n       *\n       * `openIntentRef` is written by the two handlers that own an activation \u2014 `handleTriggerClick` from\n       * the click's `detail === 0`, and `handleTriggerKeyDown` from the arrow key. That makes this a genuine\n       * pointer-vs-keyboard split rather than the generic click semantic: Enter/Space on a <button> also\n       * fires a click, and it counts as keyboard here.\n       *\n       * Reading a single value is the point. Every landing is decided here, so no other code path can write\n       * a competing focus intent and have the two race.\n       */\n      if (openIntentRef.current === 'keyboard-first') trackFocusSelectedItem();\n      else if (openIntentRef.current === 'keyboard-last') trackFocusSelectedOrLastItem();\n      else trackFocusPanel();\n      if (info.reason === 'controlled-flip' && isControlled) onOpen?.({ reason: 'controlled' });\n    },\n    [openIntentRef, trackFocusSelectedItem, trackFocusSelectedOrLastItem, trackFocusPanel, isControlled, onOpen],\n  );\n\n  const floatingContextConfig = useMemo(\n    () =>\n      ({\n        placement: 'bottom',\n        // Arrow tip is ~6.1px above the panel top (arrowPlacementBase16 \u2248 17.5px, tip at 11.4px from box top).\n        // 4px spec gap \u2192 4 + 6.1 \u2248 10px offset.\n        customOffset: [0, 10],\n        externallyControlledIsOpen: resolvedIsOpen,\n        withoutAnimation: true,\n        onClickOutside: handleClickOutside,\n        /*\n         * Two conditions, and the second is a safety gate rather than a preference.\n         *\n         * `!onKeyDown` \u2014 a consumer who supplies onKeyDown owns the key entirely, so useFloatingContext\n         * neither routes the Escape to onEscape (see handleScopedEscape) nor returns focus to the trigger.\n         *\n         * `!isControlled` \u2014 `returnFocusToReference` is true below, and the hook applies it on a scoped\n         * Escape regardless of who owns the open state. For a controlled picker `handleScopedEscape`'s\n         * `setInternalIsOpen(false)` is inert, so leaving this on would move focus to the trigger while\n         * the consumer's panel is still open: focus outside an open dialog. A controlled consumer owns\n         * the close, so they own the Escape and the refocus that goes with it.\n         */\n        closeOnEscape: !onKeyDown && !isControlled,\n        onClose: handleFloatingClose,\n        onEscape: handleScopedEscape,\n        onOpen: handleFloatingOpen,\n        returnFocusToReference: true,\n        externalReferenceElement: triggerRef?.current || defaultTriggerRef.current,\n      }) as DSHookFloatingContextT.Props,\n    [\n      handleClickOutside,\n      handleScopedEscape,\n      handleFloatingClose,\n      handleFloatingOpen,\n      isControlled,\n      onKeyDown,\n      resolvedIsOpen,\n      triggerRef,\n    ],\n  );\n\n  const {\n    refs: floatingRefs,\n    floatingStyles,\n    arrowStyles,\n    context: floatingContext,\n  } = useFloatingContext(floatingContextConfig);\n\n  const handleTriggerRef = useCallback<React.RefCallback<HTMLButtonElement>>(\n    (node) => {\n      (defaultTriggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      floatingRefs.setReference(node);\n      if (triggerRef) {\n        (triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [floatingRefs, triggerRef],\n  );\n\n  // Populates the consumer's actionRef with imperative focus methods. Fires on mount with the panel\n  // node. Every method routes through the focus tracker \u2014 no DOM queries.\n  const handleActionRef = useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      if (node && actionRef?.current) {\n        actionRef.current.focusToIndex = (index: number) => {\n          trackFocusItemAtIndex(index);\n        };\n        actionRef.current.focusWrapper = () => {\n          trackFocusPanel();\n        };\n        actionRef.current.focusSelectedOrFirstAvailable = () => {\n          trackFocusSelectedItem();\n        };\n      }\n    },\n    [actionRef, trackFocusItemAtIndex, trackFocusPanel, trackFocusSelectedItem],\n  );\n\n  const floatingInnerRef = useCallback<React.RefCallback<HTMLDivElement>>(\n    (node) => {\n      (floatingRefs.setFloating as React.RefCallback<HTMLDivElement>)(node);\n      handleActionRef(node);\n    },\n    [floatingRefs.setFloating, handleActionRef],\n  );\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      // detail === 0 \u21D2 keyboard activation (Enter/Space), not a pointer. handleFloatingOpen reads\n      // this on the next open transition to pick keyboard-vs-pointer initial focus.\n      openIntentRef.current = (e as React.MouseEvent).detail === 0 ? 'keyboard-first' : 'pointer';\n      onClick?.(e);\n      // Uncontrolled eager notify \u2014 see file header (B) \"TRIGGER CLICK\" / \"CLICK ON TRIGGER\".\n      // `resolvedIsOpen` is the pre-flip value: open \u21D2 this click closes (trigger-toggle), else opens.\n      if (!isControlled) {\n        if (resolvedIsOpen) onClose?.({ reason: 'trigger-toggle', event: e });\n        else onOpen?.({ reason: 'trigger', event: e });\n      }\n      setInternalIsOpen((prev) => !prev);\n    },\n    [onClick, openIntentRef, setInternalIsOpen, isControlled, resolvedIsOpen, onClose, onOpen],\n  );\n\n  /*\n   * Trigger keydown \u2014 the arrow-key open, gated on `openAndFocusOnArrowKeys`.\n   *\n   * This exists as its own handler rather than being folded into handleTriggerClick because a key press is\n   * not a click: handleTriggerClick derives keyboard-vs-pointer from the click's `detail`, which is a\n   * property of clicks. Routing a keydown through it would work by accident and read as a lie at the call\n   * site. Both handlers write the same single `openIntentRef`, so there is still one place that decides the\n   * landing \u2014 see handleFloatingOpen.\n   *\n   * ArrowDown \u2192 the selection, else the FIRST available item.\n   * ArrowUp   \u2192 the selection, else the LAST available item.\n   *\n   * Only opens; never closes or toggles. An arrow key on the trigger while the panel is already open is\n   * ignored, because focus is inside the panel by then and re-seeding would yank it back.\n   *\n   * Enter and Space are deliberately absent: the built-in trigger is a native <button>, so the browser\n   * turns those into a click and they arrive through handleTriggerClick. A consumer's TriggerComponent that\n   * is also a real button gets the same for free.\n   *\n   * `preventDefault` stops the page from scrolling on a key that is being used to open a widget.\n   *\n   * Returns nothing, like any event handler. A trigger that keeps the picker CONTROLLED makes\n   * `setInternalIsOpen` inert and has to run its own open for ArrowDown/ArrowUp \u2014 see\n   * ds-global-header's TriggerDefaultComponent. Changing which keys are handled here means changing it\n   * there too.\n   */\n  const handleTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!openAndFocusOnArrowKeys) return;\n      if (e.code !== 'ArrowDown' && e.code !== 'ArrowUp') return;\n      if (resolvedIsOpen) return;\n\n      e.preventDefault();\n      openIntentRef.current = e.code === 'ArrowDown' ? 'keyboard-first' : 'keyboard-last';\n      if (!isControlled) onOpen?.({ reason: 'trigger', event: e });\n      setInternalIsOpen(true);\n    },\n    [openAndFocusOnArrowKeys, resolvedIsOpen, openIntentRef, isControlled, onOpen, setInternalIsOpen],\n  );\n\n  return {\n    floatingStyles,\n    arrowStyles,\n    floatingContext,\n    handleTriggerRef,\n    handleTriggerClick,\n    handleTriggerKeyDown,\n    floatingInnerRef,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAEhE,SAAS,aAAa,SAAS,cAAc;AAkKtC,MAAM,8BAA8B,CAAC,oBAAoD;AAC9F,QAAM,EAAE,kBAAkB,eAAe,eAAe,gBAAgB,kBAAkB,IAAI;AAC9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAIJ,QAAM,eAAe,OAAO,WAAW;AAEvC,QAAM,EAAE,wBAAwB,8BAA8B,uBAAuB,gBAAgB,IACnG;AAEF,QAAM,oBAAoB,OAA0B,IAAI;AAGxD,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAA+B;AAC9B,UAAI,CAAC,aAAc,WAAU,EAAE,QAAQ,iBAAiB,OAAO,EAAE,CAAC;AAClE,wBAAkB,KAAK;AACvB,uBAAiB,CAAe;AAAA,IAClC;AAAA,IACA,CAAC,cAAc,SAAS,mBAAmB,cAAc;AAAA,EAC3D;AAIA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAyB;AACxB,UAAI,CAAC,aAAc,WAAU,EAAE,QAAQ,UAAU,MAAM,CAAC;AACxD,wBAAkB,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,cAAc,SAAS,iBAAiB;AAAA,EAC3C;AAIA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,SAA4C;AAC3C,UAAI,KAAK,WAAW,qBAAqB,aAAc,WAAU,EAAE,QAAQ,aAAa,CAAC;AAAA,IAC3F;AAAA,IACA,CAAC,cAAc,OAAO;AAAA,EACxB;AAMA,QAAM,qBAAqB;AAAA,IACzB,CAAC,SAA4C;AAwB3C,UAAI,cAAc,YAAY,iBAAkB,wBAAuB;AAAA,eAC9D,cAAc,YAAY,gBAAiB,8BAA6B;AAAA,UAC5E,iBAAgB;AACrB,UAAI,KAAK,WAAW,qBAAqB,aAAc,UAAS,EAAE,QAAQ,aAAa,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,eAAe,wBAAwB,8BAA8B,iBAAiB,cAAc,MAAM;AAAA,EAC7G;AAEA,QAAM,wBAAwB;AAAA,IAC5B,OACG;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,MAGX,cAAc,CAAC,GAAG,EAAE;AAAA,MACpB,4BAA4B;AAAA,MAC5B,kBAAkB;AAAA,MAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAahB,eAAe,CAAC,aAAa,CAAC;AAAA,MAC9B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,wBAAwB;AAAA,MACxB,0BAA0B,YAAY,WAAW,kBAAkB;AAAA,IACrE;AAAA,IACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,IAAI,mBAAmB,qBAAqB;AAE5C,QAAM,mBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,MAAC,kBAAuE,UAAU;AAClF,mBAAa,aAAa,IAAI;AAC9B,UAAI,YAAY;AACd,QAAC,WAAgE,UAAU;AAAA,MAC7E;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU;AAAA,EAC3B;AAIA,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAAS;AACR,UAAI,QAAQ,WAAW,SAAS;AAC9B,kBAAU,QAAQ,eAAe,CAAC,UAAkB;AAClD,gCAAsB,KAAK;AAAA,QAC7B;AACA,kBAAU,QAAQ,eAAe,MAAM;AACrC,0BAAgB;AAAA,QAClB;AACA,kBAAU,QAAQ,gCAAgC,MAAM;AACtD,iCAAuB;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,uBAAuB,iBAAiB,sBAAsB;AAAA,EAC5E;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,MAAC,aAAa,YAAkD,IAAI;AACpE,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,aAAa,aAAa,eAAe;AAAA,EAC5C;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAA8C;AAG7C,oBAAc,UAAW,EAAuB,WAAW,IAAI,mBAAmB;AAClF,gBAAU,CAAC;AAGX,UAAI,CAAC,cAAc;AACjB,YAAI,eAAgB,WAAU,EAAE,QAAQ,kBAAkB,OAAO,EAAE,CAAC;AAAA,YAC/D,UAAS,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAAA,MAC/C;AACA,wBAAkB,CAAC,SAAS,CAAC,IAAI;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,eAAe,mBAAmB,cAAc,gBAAgB,SAAS,MAAM;AAAA,EAC3F;AA4BA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAA2B;AAC1B,UAAI,CAAC,wBAAyB;AAC9B,UAAI,EAAE,SAAS,eAAe,EAAE,SAAS,UAAW;AACpD,UAAI,eAAgB;AAEpB,QAAE,eAAe;AACjB,oBAAc,UAAU,EAAE,SAAS,cAAc,mBAAmB;AACpE,UAAI,CAAC,aAAc,UAAS,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAC3D,wBAAkB,IAAI;AAAA,IACxB;AAAA,IACA,CAAC,yBAAyB,gBAAgB,eAAe,cAAc,QAAQ,iBAAiB;AAAA,EAClG;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/parts/AppPickerItem.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { DSChip } from "@elliemae/ds-chip";
+import { styled } from "@elliemae/ds-system";
+import React2, { useContext } from "react";
+import { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from "../constants/index.js";
+import { DSAppPickerContext } from "../DSAppPickerCTX.js";
+import { getChipRegionId } from "../util/getChipRegionId.js";
+const StyledListItem = styled("div", { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`
+  display: flex;
+`;
+const StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;
+const AppIcon = ({ icon: Icon }) => /* @__PURE__ */ jsx(Icon, { className: "app-picker__icon", size: "m" });
+const AppPickerItem = React2.memo(
+  ({ app, positionAnnouncement, chipId, isFirstFocusable, isLastFocusable }) => {
+    const { label, disabled, applyAriaDisabled, selected, icon, id, wrapText } = app;
+    const {
+      focusTrackers: { focusRegion, firstFocusableRef, lastFocusableRef, trackFocusChip, trackFocusRegionReset },
+      ownerPropsConfig: { getOwnerProps }
+    } = useContext(DSAppPickerContext);
+    const isFocused = focusRegion === getChipRegionId(chipId);
+    const getOwnerPropsArguments = React2.useCallback(() => app, [app]);
+    const renderIcon = React2.useCallback(() => /* @__PURE__ */ jsx(AppIcon, { icon }), [icon]);
+    const handleClick = React2.useCallback(
+      (e) => {
+        if (app.onClick) app.onClick(e, app);
+      },
+      [app]
+    );
+    const handleFocus = React2.useCallback(() => trackFocusChip(chipId), [chipId, trackFocusChip]);
+    const handleChipRef = React2.useCallback(
+      (node) => {
+        if (isFirstFocusable) firstFocusableRef.current = node;
+        if (isLastFocusable) lastFocusableRef.current = node;
+        if (node && isFocused) node.focus();
+      },
+      [isFirstFocusable, isLastFocusable, isFocused, firstFocusableRef, lastFocusableRef]
+    );
+    return /* @__PURE__ */ jsx(
+      StyledListItem,
+      {
+        "data-testid": DSAppPickerDataTestIds.ITEM,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: /* @__PURE__ */ jsx(
+          StyledChip,
+          {
+            onClick: handleClick,
+            "data-testid": DSAppPickerDataTestIds.CHIP,
+            disabled,
+            applyAriaDisabled,
+            selected,
+            "aria-current": selected ? "true" : void 0,
+            "aria-label": `${label} ${positionAnnouncement}`,
+            id,
+            icon: renderIcon,
+            label,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            wrapText,
+            innerRef: handleChipRef,
+            onBlur: trackFocusRegionReset,
+            onFocus: handleFocus
+          }
+        )
+      }
+    );
+  }
+);
+AppPickerItem.displayName = "DSAppPicker.AppPickerItem";
+export {
+  AppPickerItem
+};
+//# sourceMappingURL=AppPickerItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AppPickerItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBqC;AAtB5D,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB,iBAAiB,wBAAwB;AAC1E,SAAS,0BAA0B;AAEnC,SAAS,uBAAuB;AAOhC,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,KAAK,CAAC;AAAA;AAAA;AAG3F,MAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,KAAK,CAAC;AAMxF,MAAM,UAAkC,CAAC,EAAE,MAAM,KAAK,MAAM,oBAAC,QAAK,WAAU,oBAAmB,MAAK,KAAI;AAYjG,MAAM,gBAA8CA,OAAM;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,IAAI,WAAW,kBAAkB;AAEjC,UAAM,YAAY,gBAAgB,gBAAgB,MAAM;AAExD,UAAM,yBAAyBA,OAAM,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AACjE,UAAM,aAAaA,OAAM,YAAY,MAAM,oBAAC,WAAQ,MAAY,GAAI,CAAC,IAAI,CAAC;AAC1E,UAAM,cAAcA,OAAM;AAAA,MACxB,CAAC,MAAwB;AACvB,YAAI,IAAI,QAAS,KAAI,QAAQ,GAAG,GAAG;AAAA,MACrC;AAAA,MACA,CAAC,GAAG;AAAA,IACN;AACA,UAAM,cAAcA,OAAM,YAAY,MAAM,eAAe,MAAM,GAAG,CAAC,QAAQ,cAAc,CAAC;AAI5F,UAAM,gBAAgBA,OAAM;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,uBAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAa,uBAAuB;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/esm/parts/AppSection.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
+import { useContext } from "react";
+import { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from "../constants/index.js";
+import { DSAppPickerContext } from "../DSAppPickerCTX.js";
+import { getChipId } from "../util/getChipId.js";
+import { getIdForAppPickerCustomSectionTitle, getIdForAppPickerSectionTitle } from "../util/instanceIds.js";
+import { AppPickerItem } from "./AppPickerItem.js";
+import { StyledListItemFullRow, StyledSection } from "./shared-styles.js";
+const StyledTitle = styled(DSTypography, { name: DSAppPickerName, slot: 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
+  } = useContext(DSAppPickerContext);
+  const items = isCustomApps ? customApps : apps;
+  const titleId = isCustomApps ? getIdForAppPickerCustomSectionTitle(instanceUid) : getIdForAppPickerSectionTitle(instanceUid);
+  const title = isCustomApps ? customSectionTitle : sectionTitle;
+  const totalCount = (apps?.length ?? 0) + (customApps?.length ?? 0);
+  const initialPositionOffset = isCustomApps ? apps.length : 0;
+  return /* @__PURE__ */ jsxs(
+    StyledSection,
+    {
+      "data-testid": DSAppPickerDataTestIds.GROUP,
+      role: "group",
+      "aria-labelledby": titleId,
+      ...ownerPropsConfig,
+      children: [
+        /* @__PURE__ */ jsx(StyledListItemFullRow, { "data-testid": DSAppPickerDataTestIds.ROW, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledTitle, { "data-testid": 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__ */ jsx(
+            AppPickerItem,
+            {
+              positionAnnouncement,
+              app,
+              chipId: getChipId(app, flatIndex),
+              isFirstFocusable: flatIndex === firstFocusableIdx,
+              isLastFocusable: flatIndex === lastFocusableIdx
+            },
+            app.id ?? `${app.label}-${isCustomApps ? "custom" : "main"}-${index}`
+          );
+        })
+      ]
+    }
+  );
+};
+AppSection.displayName = "DSAppPicker.AppSection";
+export {
+  AppSection
+};
+//# sourceMappingURL=AppSection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AppSection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { getIdForAppPickerCustomSectionTitle, getIdForAppPickerSectionTitle } from '../util/instanceIds.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  // Suffixes owned by util/instanceIds \u2014 see that module for why they are never composed inline.\n  const titleId = isCustomApps\n    ? getIdForAppPickerCustomSectionTitle(instanceUid)\n    : getIdForAppPickerSectionTitle(instanceUid);\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SAOI,KAPJ;AA1CJ,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,iBAAiB,wBAAwB;AAC1E,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,qCAAqC,qCAAqC;AACnF,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,qBAAqB;AAErD,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,IAAI,WAAW,kBAAkB;AAEjC,QAAM,QAAQ,eAAe,aAAa;AAE1C,QAAM,UAAU,eACZ,oCAAoC,WAAW,IAC/C,8BAA8B,WAAW;AAC7C,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,uBAAuB;AAAA,MACpC,MAAK;AAAA,MACL,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,4BAAC,yBAAsB,eAAa,uBAAuB,KAAM,GAAG,kBAClE,8BAAC,eAAY,eAAa,uBAAuB,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,QAAQ,UAAU,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": []
+}

package/dist/esm/parts/Trigger.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { styled } from "@elliemae/ds-system";
+import { useContext } from "react";
+import { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from "../constants/index.js";
+import { DSAppPickerContext } from "../DSAppPickerCTX.js";
+const StyledButton = styled(DSButtonV3, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })`
+  height: fit-content;
+`;
+const Trigger = (PropsFromFloatingContext) => {
+  const { handleTriggerRef, handleTriggerClick, handleTriggerKeyDown, dialogLabelId } = PropsFromFloatingContext;
+  const {
+    propsWithDefault: { icon: Icon, renderTrigger, TriggerComponent },
+    ownerPropsConfig
+  } = useContext(DSAppPickerContext);
+  if (TriggerComponent) {
+    return /* @__PURE__ */ jsx(
+      TriggerComponent,
+      {
+        innerRef: handleTriggerRef,
+        id: dialogLabelId,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "dialog"
+      }
+    );
+  }
+  if (renderTrigger) {
+    return renderTrigger({ ref: handleTriggerRef });
+  }
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      "data-testid": DSAppPickerDataTestIds.BUTTON,
+      id: dialogLabelId,
+      buttonType: "icon",
+      "aria-haspopup": "dialog",
+      "aria-label": "Application picker",
+      innerRef: handleTriggerRef,
+      onClick: handleTriggerClick,
+      onKeyDown: handleTriggerKeyDown,
+      getOwnerProps: ownerPropsConfig.getOwnerProps,
+      getOwnerPropsArguments: ownerPropsConfig.getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+};
+Trigger.displayName = "DSAppPicker.Trigger";
+export {
+  Trigger
+};
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Trigger.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport { DSAppPickerContext } from '../DSAppPickerCTX.js';\nimport type { useAppPickerFloatingContext } from './AppPickerFloatingContext/useAppPickerFloatingContext.js';\n\n// DSButtonV3 sizes itself with `min-height` (height stays `auto`) so multi-line labels can grow.\n// As a side effect, when the trigger is a direct grid/flex child of a consumer layout with the\n// default `align-items: stretch`, it stretches to fill the container height (PUI-18354 regression:\n// the legacy DSButtonV2 trigger used a fixed `height` and did not stretch). `height: fit-content`\n// pins the trigger to its intrinsic size \u2014 mirroring the button's own `width: fit-content` \u2014 so it\n// stays ~28px regardless of layout context.\nconst StyledButton = styled(DSButtonV3, { name: DSAppPickerName, slot: DSAppPickerSlots.BUTTON })`\n  height: fit-content;\n`;\n\ntype UseAppPickerFloatingContextT = ReturnType<typeof useAppPickerFloatingContext>;\ntype FloatingContextDictatedProps = {\n  handleTriggerRef: UseAppPickerFloatingContextT['handleTriggerRef'];\n  handleTriggerClick: UseAppPickerFloatingContextT['handleTriggerClick'];\n  handleTriggerKeyDown: UseAppPickerFloatingContextT['handleTriggerKeyDown'];\n  dialogLabelId: string;\n};\n\nexport const Trigger = (PropsFromFloatingContext: FloatingContextDictatedProps) => {\n  const { handleTriggerRef, handleTriggerClick, handleTriggerKeyDown, dialogLabelId } = PropsFromFloatingContext;\n  const {\n    propsWithDefault: { icon: Icon, renderTrigger, TriggerComponent },\n    ownerPropsConfig,\n  } = useContext(DSAppPickerContext);\n\n  // Precedence: TriggerComponent > renderTrigger > the built-in button. TriggerComponent wins when\n  // both custom APIs are supplied \u2014 it is the one that receives `dialogLabelId`, so preferring\n  // renderTrigger here would drop the dialog's accessible name.\n  if (TriggerComponent) {\n    return (\n      <TriggerComponent\n        innerRef={handleTriggerRef}\n        id={dialogLabelId}\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        aria-haspopup=\"dialog\"\n      />\n    );\n  }\n\n  if (renderTrigger) {\n    // DEPRECATED (v4.x) \u2014 see DEV-002. Plain function call (not a React element) preserves the\n    // legacy DSPopover render-prop contract: consumers receive `ref` as a regular prop, no\n    // forwardRef required. The contract has no channel for `dialogLabelId`, so on this path naming\n    // the dialog is the consumer's: put an id on the trigger element and inject the matching\n    // aria-labelledby through the FLOATING_WRAPPER slot (or pass `id` to DSAppPicker, which makes\n    // the generated id predictable). Covered by DSAppPicker.renderTrigger-ioc-aria-labelledby.test.js.\n    return renderTrigger({ ref: handleTriggerRef });\n  }\n  return (\n    <StyledButton\n      data-testid={DSAppPickerDataTestIds.BUTTON}\n      id={dialogLabelId}\n      buttonType=\"icon\"\n      aria-haspopup=\"dialog\"\n      aria-label=\"Application picker\"\n      innerRef={handleTriggerRef}\n      onClick={handleTriggerClick}\n      onKeyDown={handleTriggerKeyDown}\n      getOwnerProps={ownerPropsConfig.getOwnerProps}\n      getOwnerPropsArguments={ownerPropsConfig.getOwnerPropsArguments}\n    >\n      <Icon />\n    </StyledButton>\n  );\n};\n\nTrigger.displayName = 'DSAppPicker.Trigger';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCjB;AArCN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,iBAAiB,wBAAwB;AAC1E,SAAS,0BAA0B;AASnC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,CAAC;AAAA;AAAA;AAYzF,MAAM,UAAU,CAAC,6BAA2D;AACjF,QAAM,EAAE,kBAAkB,oBAAoB,sBAAsB,cAAc,IAAI;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,MAAM,eAAe,iBAAiB;AAAA,IAChE;AAAA,EACF,IAAI,WAAW,kBAAkB;AAKjC,MAAI,kBAAkB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,iBAAc;AAAA;AAAA,IAChB;AAAA,EAEJ;AAEA,MAAI,eAAe;AAOjB,WAAO,cAAc,EAAE,KAAK,iBAAiB,CAAC;AAAA,EAChD;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACpC,IAAI;AAAA,MACJ,YAAW;AAAA,MACX,iBAAc;AAAA,MACd,cAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAe,iBAAiB;AAAA,MAChC,wBAAwB,iBAAiB;AAAA,MAEzC,8BAAC,QAAK;AAAA;AAAA,EACR;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

package/dist/esm/parts/shared-styles.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { DSAppPickerName, DSAppPickerSlots } from "../constants/index.js";
+const StyledListItemFullRow = styled("div", { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`
+  grid-column: 1/4;
+`;
+const StyledSection = styled("div", { name: DSAppPickerName, slot: DSAppPickerSlots.GROUP })`
+  display: contents;
+`;
+export {
+  StyledListItemFullRow,
+  StyledSection
+};
+//# sourceMappingURL=shared-styles.js.map

package/dist/esm/parts/shared-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/shared-styles.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\n\nexport const StyledListItemFullRow = styled('div', { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`\n  grid-column: 1/4;\n`;\n\n// The ARIA group that associates a section title with the chips belonging to it (role=\"group\" +\n// aria-labelledby \u2192 the title's id). It must NOT become a grid item: the panel root owns the\n// 3-column track and the title row / chips are its children. `display: contents` keeps this\n// element out of the layout while leaving it in the accessibility tree, so the grid is unchanged.\nexport const StyledSection = styled('div', { name: DSAppPickerName, slot: DSAppPickerSlots.GROUP })`\n  display: contents;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,wBAAwB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,IAAI,CAAC;AAAA;AAAA;AAQjG,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,33 +1,56 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { MenuPicker } from "@elliemae/ds-icons";
-import { PropTypes, getPropsPerSlotPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
 import { DSAppPickerName, DSAppPickerSlots } from "./constants/index.js";
 const defaultProps = {
-  // export const defaultProps: DSAppPickerT.DefaultProps = {
   apps: [],
   customApps: [],
   sectionTitle: "APPLICATIONS",
   customSectionTitle: "CUSTOM APPLICATIONS",
-  icon: () => /* @__PURE__ */ jsx(MenuPicker, { color: ["brand-primary", "700"], size: "m" })
+  icon: () => /* @__PURE__ */ jsx(MenuPicker, { color: ["brand-primary", "700"], size: "m" }),
+  openAndFocusOnArrowKeys: false
 };
 const DSAppPickerPropTypes = {
   ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   apps: PropTypes.array.description(
-    "Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
-  ).isRequired,
+    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]. Conditionally required: at least one of "apps" or "customApps" must contain items \u2014 a picker with nothing to pick has no purpose, so providing both empty throws.'
+  ).defaultValue([]),
   customApps: PropTypes.array.description(
-    "Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
-  ),
+    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]. Conditionally required: at least one of "apps" or "customApps" must contain items \u2014 a picker with nothing to pick has no purpose, so providing both empty throws.'
+  ).defaultValue([]),
   sectionTitle: PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
   customSectionTitle: PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
   icon: PropTypes.func.description("trigger button s icon").defaultValue(MenuPicker),
-  renderTrigger: PropTypes.func.description("Custom trigger component."),
+  openAndFocusOnArrowKeys: PropTypes.bool.description(
+    "Opt in to arrow-key opening on the trigger. ArrowDown opens and focuses the selected application, falling back to the first available one; ArrowUp opens and focuses the selected application, falling back to the last available one. The picker owns the whole flow \u2014 no key handler, no isOpen wiring and no actionRef needed. Independent of actionRef, which remains the imperative handle for moving focus from your own logic."
+  ).defaultValue(false),
+  renderTrigger: PropTypes.func.description(
+    "Custom trigger, called as a plain function with { ref }. Superseded by TriggerComponent: this render-prop cannot receive the id that the panel's aria-labelledby points at, so the dialog is left without an accessible name. TriggerComponent takes precedence when both are supplied."
+  ).deprecated({
+    version: "4.x",
+    message: 'Use "TriggerComponent" instead \u2014 it receives the id required for the dialog accessible name.'
+  }),
+  TriggerComponent: PropTypes.func.description(
+    "Custom trigger rendered as a React element. Receives { innerRef, id, onClick, aria-haspopup }; the id must be applied to the focusable trigger element for the panel to have an accessible name. Takes precedence over the deprecated renderTrigger when both are supplied."
+  ),
   actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
     "Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."
   ),
   isOpen: PropTypes.bool.description("Wether the AppPicker should be open or not."),
-  onClose: PropTypes.func.description("Callback function when the AppPicker closes"),
+  onOpen: PropTypes.func.description(
+    'Callback when the AppPicker opens; receives { reason: "trigger" | "controlled", event? }.'
+  ),
+  onClose: PropTypes.func.description(
+    'Callback when the AppPicker closes; receives { reason: "escape" | "click-outside" | "trigger-toggle" | "controlled", event? }.'
+  ),
   onKeyDown: PropTypes.func.description("OnKeyDown handler callback."),
   onClick: PropTypes.func.description("Custom onClick for Trigger component."),
   onClickOutside: PropTypes.func.description("Callback event when the user clicks outside the App Picker."),
@@ -35,8 +58,10 @@ const DSAppPickerPropTypes = {
     "Ref to the trigger button."
   )
 };
+const DSAppPickerPropTypesSchema = DSAppPickerPropTypes;
 export {
   DSAppPickerPropTypes,
+  DSAppPickerPropTypesSchema,
   defaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.MutableRefObject<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {\n    onClose?: () => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    renderTrigger?: React.ComponentType<RenderTriggerProp>;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`> = {\n  // export const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  apps: PropTypes.array.description(\n    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ).isRequired,\n  customApps: PropTypes.array.description(\n    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n} as ValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqET;AApEd,SAAS,kBAAkB;AAG3B,SAAS,WAAW,gCAAgC;AAEpD,SAAS,iBAAiB,wBAAwB;AAyD3C,MAAM,eAAoF;AAAA;AAAA,EAE/F,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,oBAAC,cAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAAuB;AAAA,EAClC,GAAG,yBAAyB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,UAAU;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\n\nexport declare namespace DSAppPickerT {\n  export interface AppItem {\n    label: string;\n    icon: React.ComponentType<{ className: string; size: string }>;\n    onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    id?: string;\n    selected?: boolean;\n    wrapText?: boolean;\n  }\n\n  export type ActionRef = React.MutableRefObject<{\n    focusToIndex?: (index: number) => void;\n    focusSelectedOrFirstAvailable?: () => void;\n    focusWrapper: () => void;\n  }>;\n\n  /**\n   * Why the panel opened. `trigger` carries the activating event and fires synchronously in the\n   * trigger's click handler (AppPicker owns the open). `controlled` fires when the consumer flips\n   * the `isOpen` prop themselves \u2014 no event, delivered when that flip takes effect.\n   */\n  export type OpenChange =\n    { reason: 'trigger'; event: React.MouseEvent | React.KeyboardEvent } | { reason: 'controlled' };\n\n  /**\n   * Why the panel closed. The event-carrying reasons fire synchronously from the handler that owns\n   * the close (AppPicker in uncontrolled mode): `escape` (a scoped Escape), `click-outside`, and\n   * `trigger-toggle` (the trigger clicked while open). `controlled` fires when the consumer flips the\n   * `isOpen` prop themselves \u2014 no event, delivered when that flip takes effect.\n   */\n  export type CloseChange =\n    | { reason: 'escape'; event: KeyboardEvent }\n    | { reason: 'click-outside'; event: MouseEvent | TouchEvent }\n    | { reason: 'trigger-toggle'; event: React.MouseEvent | React.KeyboardEvent }\n    | { reason: 'controlled' };\n\n  export interface RequiredProps {}\n\n  export type SlotFunctionArguments = {\n    dsApppickerRoot: () => object;\n    dsApppickerGroup: () => object;\n    dsApppickerItem: () => object;\n    dsApppickerTitle: () => object;\n    dsApppickerSeparator: () => object;\n    dsApppickerRow: () => object;\n    dsApppickerChip: () => object;\n    dsApppickerButton: () => object;\n    dsApppickerFloatingWrapper: () => object;\n  };\n\n  export interface DefaultProps {\n    apps: AppItem[];\n    customApps: AppItem[];\n    sectionTitle: string;\n    customSectionTitle: string;\n    icon: React.ComponentType<SvgIconT.Props>;\n    /**\n     * Opt in to arrow-key opening on the trigger: ArrowDown opens and focuses the selected application\n     * (the first available one when nothing is selected), ArrowUp opens and focuses the selected\n     * application (the last available one when nothing is selected).\n     *\n     * The picker owns this flow end to end \u2014 a consumer does not wire a key handler, drive `isOpen`, or\n     * reach through `actionRef` to place the focus. Defaults to `false`, so it is purely additive: a\n     * picker that does not opt in behaves exactly as before, with the arrow keys doing nothing on the\n     * trigger.\n     *\n     * Independent of `actionRef`, which stays the imperative handle for a consumer to move focus from\n     * their own business logic at any time.\n     */\n    openAndFocusOnArrowKeys: boolean;\n  }\n\n  interface RenderTriggerProp {\n    ref: React.RefCallback<HTMLButtonElement>;\n    [key: string]: unknown;\n  }\n\n  /**\n   * Props handed to a `TriggerComponent`. This is the only trigger API that participates in the\n   * dialog's accessible-name wiring: `id` is the element the panel's `aria-labelledby` points at,\n   * so a TriggerComponent that drops it leaves the dialog unnamed.\n   *\n   * `innerRef`, not `ref`, deliberately: under React 18 a `ref` passed through JSX is consumed by\n   * the fiber and never reaches a plain function component's props unless it is wrapped in\n   * `forwardRef`. `innerRef` is the established Dimsum convention (see `ds-system`'s styled\n   * components) and keeps `forwardRef` optional for the consumer \u2014 which is the same ergonomic\n   * concern that produced DEV-002, solved here without the plain-function call.\n   */\n  export interface TriggerComponentProps {\n    innerRef: React.RefCallback<HTMLButtonElement>;\n    id: string;\n    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    /**\n     * Attach to the trigger element alongside `onClick`. It is what implements\n     * `openAndFocusOnArrowKeys`, and it is a keydown handler in its own right \u2014 never route a keydown\n     * through `onClick` to get the same effect: `onClick` infers keyboard activation from the click's\n     * `detail`, which is a property of clicks, not of key presses.\n     *\n     * Harmless to attach when `openAndFocusOnArrowKeys` is false \u2014 it ignores every key in that case.\n     *\n     * The keys it acts on are ArrowDown and ArrowUp. A trigger that drives its own `isOpen` \u2014 which makes\n     * the picker's internal flip inert \u2014 has to open on those same two keys itself.\n     */\n    onKeyDown: (e: React.KeyboardEvent) => void;\n    'aria-haspopup': 'dialog';\n  }\n\n  /**\n   * How the pending open was triggered, which is the only input to where initial focus lands:\n   * `pointer` \u2192 the panel \u00B7 `keyboard-first` \u2192 the selection, else the first available item \u00B7\n   * `keyboard-last` \u2192 the selection, else the last available item.\n   */\n  export type OpenIntent = 'pointer' | 'keyboard-first' | 'keyboard-last';\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSAppPickerName,\n    typeof DSAppPickerSlots\n  > {\n    onOpen?: (info: OpenChange) => void;\n    onClose?: (info: CloseChange) => void;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    actionRef?: ActionRef;\n    /**\n     * @deprecated v4.x \u2014 use `TriggerComponent`. `renderTrigger` receives only `ref` and cannot be\n     * given the id the dialog's `aria-labelledby` points at, so the panel is left without an\n     * accessible name. See DEV-002 in KNOWN_INTENTIONAL_DEVIATIONS.md.\n     */\n    renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;\n    /**\n     * Custom trigger, rendered as a real React element so it owns its own fiber. Takes precedence\n     * over `renderTrigger` when both are supplied.\n     */\n    TriggerComponent?: React.ComponentType<TriggerComponentProps>;\n    isOpen?: boolean;\n    triggerRef?: React.RefObject<HTMLButtonElement>;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSAppPickerT.DefaultProps = {\n  apps: [],\n  customApps: [],\n  sectionTitle: 'APPLICATIONS',\n  customSectionTitle: 'CUSTOM APPLICATIONS',\n  icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n  openAndFocusOnArrowKeys: false,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props> = {\n  ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  apps: PropTypes.array\n    .description(\n      'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]. ' +\n        'Conditionally required: at least one of \"apps\" or \"customApps\" must contain items \u2014 a picker with ' +\n        'nothing to pick has no purpose, so providing both empty throws.',\n    )\n    .defaultValue([]),\n  customApps: PropTypes.array\n    .description(\n      'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]. ' +\n        'Conditionally required: at least one of \"apps\" or \"customApps\" must contain items \u2014 a picker with ' +\n        'nothing to pick has no purpose, so providing both empty throws.',\n    )\n    .defaultValue([]),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  openAndFocusOnArrowKeys: PropTypes.bool\n    .description(\n      'Opt in to arrow-key opening on the trigger. ArrowDown opens and focuses the selected application, ' +\n        'falling back to the first available one; ArrowUp opens and focuses the selected application, falling ' +\n        'back to the last available one. The picker owns the whole flow \u2014 no key handler, no isOpen wiring and ' +\n        'no actionRef needed. Independent of actionRef, which remains the imperative handle for moving focus ' +\n        'from your own logic.',\n    )\n    .defaultValue(false),\n  renderTrigger: PropTypes.func\n    .description(\n      'Custom trigger, called as a plain function with { ref }. Superseded by TriggerComponent: this ' +\n        \"render-prop cannot receive the id that the panel's aria-labelledby points at, so the dialog \" +\n        'is left without an accessible name. TriggerComponent takes precedence when both are supplied.',\n    )\n    .deprecated({\n      version: '4.x',\n      message: 'Use \"TriggerComponent\" instead \u2014 it receives the id required for the dialog accessible name.',\n    }),\n  TriggerComponent: PropTypes.func.description(\n    'Custom trigger rendered as a React element. Receives { innerRef, id, onClick, aria-haspopup }; ' +\n      'the id must be applied to the focusable trigger element for the panel to have an accessible name. ' +\n      'Takes precedence over the deprecated renderTrigger when both are supplied.',\n  ),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onOpen: PropTypes.func.description(\n    'Callback when the AppPicker opens; receives { reason: \"trigger\" | \"controlled\", event? }.',\n  ),\n  onClose: PropTypes.func.description(\n    'Callback when the AppPicker closes; receives { reason: \"escape\" | \"click-outside\" | \"trigger-toggle\" | \"controlled\", event? }.',\n  ),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref to the trigger button.',\n  ),\n};\n\nexport const DSAppPickerPropTypesSchema = DSAppPickerPropTypes as unknown as ValidationMap<DSAppPickerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgLT;AA/Kd,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,wBAAwB;AAgK3C,MAAM,eAA0C;AAAA,EACrD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,oBAAC,cAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAAA,EAClE,yBAAyB;AAC3B;AAMO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,iBAAiB,gBAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MACb;AAAA,IACC;AAAA,EAGF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,YAAY,UAAU,MACnB;AAAA,IACC;AAAA,EAGF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,cAAc,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,UAAU;AAAA,EACjF,yBAAyB,UAAU,KAChC;AAAA,IACC;AAAA,EAKF,EACC,aAAa,KAAK;AAAA,EACrB,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EAGF,EACC,WAAW;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,CAAC;AAAA,EACH,kBAAkB,UAAU,KAAK;AAAA,IAC/B;AAAA,EAGF;AAAA,EACA,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,QAAQ,UAAU,KAAK;AAAA,IACrB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,YAAY,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;AAEO,MAAM,6BAA6B;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+const SlotPropsAsObject = {
+  dsApppickerRoot: { "aria-label": "just a typescript test" },
+  dsApppickerGroup: { "aria-label": "just a typescript test" },
+  dsApppickerItem: { "aria-label": "just a typescript test" },
+  dsApppickerTitle: { "aria-label": "just a typescript test" },
+  dsApppickerSeparator: { "aria-label": "just a typescript test" },
+  dsApppickerRow: { "aria-label": "just a typescript test" },
+  dsApppickerChip: { "aria-label": "just a typescript test" },
+  dsApppickerButton: { "aria-label": "just a typescript test" },
+  dsApppickerFloatingWrapper: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsApppickerRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerGroup: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerItem: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerTitle: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerSeparator: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerRow: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerChip: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerButton: () => ({ "aria-label": "just a typescript test" }),
+  dsApppickerFloatingWrapper: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSAppPickerName, DSAppPickerSlots } from '../constants/index.js';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSAppPickerT.Props> = {\n  dsApppickerRoot: { 'aria-label': 'just a typescript test' },\n  dsApppickerGroup: { 'aria-label': 'just a typescript test' },\n  dsApppickerItem: { 'aria-label': 'just a typescript test' },\n  dsApppickerTitle: { 'aria-label': 'just a typescript test' },\n  dsApppickerSeparator: { 'aria-label': 'just a typescript test' },\n  dsApppickerRow: { 'aria-label': 'just a typescript test' },\n  dsApppickerChip: { 'aria-label': 'just a typescript test' },\n  dsApppickerButton: { 'aria-label': 'just a typescript test' },\n  dsApppickerFloatingWrapper: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSAppPickerT.SlotFunctionArguments = {\n  dsApppickerRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerGroup: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerTitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerSeparator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerRow: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerChip: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerButton: () => ({ 'aria-label': 'just a typescript test' }),\n  dsApppickerFloatingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot defined in DSAppPickerSlots is missing from\n// the hand-written SlotFunctionArguments type in react-desc-prop-types.tsx.\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSAppPickerName, typeof DSAppPickerSlots>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,oBAAiD;AAAA,EACrD,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,sBAAsB,EAAE,cAAc,yBAAyB;AAAA,EAC/D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,mBAAmB,EAAE,cAAc,yBAAyB;AAAA,EAC5D,4BAA4B,EAAE,cAAc,yBAAyB;AACvE;AAEA,MAAM,uBAA2D;AAAA,EAC/D,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,sBAAsB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACtE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,mBAAmB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAC9E;AAIA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-app-picker-valid.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DSAppPicker } from "../index.js";
 const testOptionalProps = {};
+const testRequiredProps = {};
 const testPartialDefaults = {
   apps: [],
   customApps: [],
@@ -11,10 +12,12 @@ const testPartialDefaults = {
 };
 const testProps = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testPartialDefaults
 };
 const testPropsAsSyntax = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testPartialDefaults
 };
 const testCompleteDefaults = {
@@ -22,14 +25,17 @@ const testCompleteDefaults = {
   customApps: [],
   sectionTitle: "",
   customSectionTitle: "",
-  icon: () => null
+  icon: () => null,
+  openAndFocusOnArrowKeys: false
 };
 const testInternalProps = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testCompleteDefaults
 };
 const testInternalPropsAsSyntax = {
   ...testOptionalProps,
+  ...testRequiredProps,
   ...testCompleteDefaults
 };
 const testExplicitDefinition = {
@@ -46,10 +52,17 @@ const testInferedTypeCompatibility = {
   customSectionTitle: "",
   icon: () => null
 };
+const CustomTrigger = ({ innerRef, id, onClick, ...rest }) => /* @__PURE__ */ jsx("button", { ref: innerRef, id, onClick, type: "button", ...rest, children: "Open apps" });
+const testTriggerComponentProp = {
+  TriggerComponent: CustomTrigger
+};
 const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSAppPicker, { ...testExplicitDefinition }),
   /* @__PURE__ */ jsx(DSAppPicker, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ jsx(DSAppPicker, { apps: [], customApps: [], sectionTitle: "", customSectionTitle: "", icon: () => null }),
-  /* @__PURE__ */ jsx(DSAppPicker, { apps: [], customApps: [], sectionTitle: "", customSectionTitle: "", icon: () => null })
+  /* @__PURE__ */ jsx(DSAppPicker, { apps: [], customApps: [], sectionTitle: "", customSectionTitle: "", icon: () => null }),
+  /* @__PURE__ */ jsx(DSAppPicker, { apps: [], TriggerComponent: CustomTrigger }),
+  /* @__PURE__ */ jsx(DSAppPicker, { ...testTriggerComponentProp, apps: [] }),
+  /* @__PURE__ */ jsx(DSAppPicker, { apps: [], renderTrigger: ({ ref }) => /* @__PURE__ */ jsx("button", { ref, type: "button", "aria-label": "banana" }) })
 ] });
 //# sourceMappingURL=typescript-app-picker-valid.js.map