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

package/dist/types/parts/AppPickerFloatingContext/useAppPickerFloatingContext.d.ts

@@ -0,0 +1,171 @@
+import type React from 'react';
+import type { useAppPicker } from '../../config/useAppPicker.js';
+import type { DSAppPickerT } from '../../react-desc-prop-types.js';
+/**
+ * useAppPickerFloatingContext — the single point that wires DSAppPicker to
+ * `@elliemae/ds-floating-context`'s `useFloatingContext`.
+ *
+ * WHAT IT DOES (as a black box):
+ * AppPicker can be used in two very different ways:
+ *  - Controlled: the consumer supplies `isOpen` and drives the open/close transition.
+ *          └→ AppPicker can't be event-based as the flip might originate from any cause and we don't own the business logic
+ *                  └→ we need to ensure WCAG embedded behaviours (focus, Escape, click-outside) are wired to the consumer's `isOpen` flip.
+ *  - Uncontrolled: the consumer does not supply `isOpen` and AppPicker owns the full flows, we only notify the consumer of the transition and its cause.
+ *
+ * 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.
+ * This files owns:
+ *  - Focus management relative to open/close transitions (initial focus on open, return focus to trigger on close)
+ *  - Escape key handling (scoped to the panel and trigger)
+ *  - Click-outside handling (panel and trigger)
+ *  - Imperative focus API via actionRef
+ *  - Controlled/Uncontrolled forks and differences in event notification (eager vs controlled-flip)
+ *  - OnOpen and OnClose notification to the consumer with the correct reason and event (if any)
+ *
+ * IMPORTANT:
+ *  Parts of the flow/logic required in this file is offloaded to useFloatingContext internal assumptions and logics.
+ *  Changes to useFloatingContext may break the flows in this file, or alter them in ways that are not obvious, the two are closely coupled.
+ *
+ * DATA / EVENT FLOW
+ *
+ * Two concerns run in parallel and must not be conflated: (A) what makes the panel show/hide and take
+ * focus, and (B) how the consumer is told it opened/closed. They have different origins.
+ *
+ * (A) PANEL VISIBILITY + FOCUS —  useFloatingContext internal co-ownership of the flow.
+ *
+ *                a user action                          │ │                      isOpen prop flip
+ *    (trigger click / scoped Escape / click outside)    │ │   (not a traceable user action, but the consumer's own flip)
+ *      uncontrolled - flips the internal flag           │ │ controlled - AppPicker's own flip is inert, consumer drives it
+ *                                                        │
+ *                                                        ▼
+ *                                              resolvedIsOpen changes
+ *                                                        │
+ *                                                        ▼
+ *                        useFloatingContext (externallyControlledIsOpen) detects the transition
+ *                                                        │
+ *                                                        ▼
+ *                     on open                           │ │              on close
+ *                handleFloatingOpen                     │ │   focus is only restored after a SCOPED ESCAPE:
+ *  AppPicker business logic seeds initial focus         │ │   useFloatingContext returns focus to the trigger
+ *                                                        │ │   (returnFocusToReference). Click-outside / toggle
+ *                                                        │ │   / controlled closes do NOT move focus, and
+ *                                                        │ │   handleFloatingClose only NOTIFIES (see (B)).
+ *                                                        │
+ *                                                        ▼
+ *                          ┌─────────────────────────────────────────────────────────────┐
+ *                          │  visibility + focus are delivered to final user as expected │
+ *                          └─────────────────────────────────────────────────────────────┘
+ *
+ * (B) CONSUMER NOTIFICATION
+ *   Each flow below is the UNCONTROLLED path, where AppPicker owns the transition and can name the true cause.
+ *   The controlled equivalent for every trigger is stated once at the end.
+ *                            ┌────────────────────────┐
+ *                            │ OPENING TRIGGERS FLOWS │
+ *                            └────────────────────────┘
+ * TRIGGER CLICK (uncontrolled)
+ *                                    trigger click
+ *                       user clicks the internal trigger, panel closed
+ *                                          │
+ *                                          ▼
+ *                                 handleTriggerClick
+ *               ( flips the flag and wires the visual and focus Flow (A) above )
+ *                                          │
+ *                                          ▼
+ *                 ┌──────────────────────────────────────────────┐
+ *                 │  onOpen { reason: 'trigger', event }         │   fired EAGERLY, when the event is triggered
+ *                 └──────────────────────────────────────────────┘
+ * ------------------------------------------------------------------------------------------------------------------------
+ *                            ┌────────────────────────┐
+ *                            │ CLOSING TRIGGERS FLOWS │
+ *                            └────────────────────────┘
+ * KEYBOARD ESCAPE (uncontrolled)
+ *                       Escape within the panel DOM tree or the trigger
+ *            scoped Escape (routed only while closeOnEscape, i.e. no consumer onKeyDown)
+ *                                          │
+ *                                          ▼
+ *                                onEscape → handleScopedEscape
+ *               ( flips the flag and wires the visual and focus Flow (A) above )
+ *                                          │
+ *                                          ▼
+ *                 ┌──────────────────────────────────────────────┐
+ *                 │  onClose { reason: 'escape', event }         │   fired EAGERLY, when the event is triggered
+ *                 └──────────────────────────────────────────────┘
+ *
+ *  CLICK OUTSIDE (uncontrolled)
+ *                           Click outside the panel DOM tree and the trigger
+ *                useFloatingContext detects a pointer press outside the panel + trigger
+ *                                          │
+ *                                          ▼
+ *                                   handleClickOutside
+ *               ( flips the flag and wires the visual and focus Flow (A) above )
+ *                                          │
+ *                                          ▼
+ *                 ┌──────────────────────────────────────────────┐
+ *                 │  onClose { reason: 'click-outside', event }  │   fired EAGERLY, when the event is triggered
+ *                 └──────────────────────────────────────────────┘
+ *
+ *  CLICK ON TRIGGER (uncontrolled, while internal state is open)
+ *                              trigger click while open
+ *                       user clicks the internal trigger, panel open
+ *                                          │
+ *                                          ▼
+ *                                    handleTriggerClick
+ *               ( flips the flag and wires the visual and focus Flow (A) above )
+ *                                          │
+ *                                          ▼
+ *                 ┌──────────────────────────────────────────────┐
+ *                 │ onClose { reason: 'trigger-toggle', event }  │   fired EAGERLY, when the event is triggered
+ *                 └──────────────────────────────────────────────┘
+ * ------------------------------------------------------------------------------------------------------------------------
+ *                            ┌──────────────────────────────────┐
+ *                            │ CONTROLLED OPEN & CLOSE FLOWS    │
+ *                            └──────────────────────────────────┘
+ *   AppPicker's own flip is inert;
+ *   We can't fire EAGERLY and we can't track an originating event, there may be NONE
+ *   The consumer's `isOpen` flip is reacted to by useFloatingContext, which fires onOpen / onClose with reason 'controlled-flip'
+ *   We wire the visual and focus Flow (A) above, and then notify the consumer with reason 'controlled' (no event)
+ *                                          │
+ *                                          ▼
+ *                 ┌──────────────────────────────────────────────┐
+ *                 │  onOpen  { reason: 'controlled' }            │                    no event
+ *                 │  onClose { reason: 'controlled' }            │   a prop flip is not a traceable user action
+ *                 └──────────────────────────────────────────────┘
+ * ------------------------------------------------------------------------------------------------------------------------
+ *
+ *     Eager (uncontrolled) and controlled-flip paths are mutually exclusive on `isControlled`.
+ *     the consumer is notified exactly once per transition — never twice.
+ * On Escape specifically
+ *   closeOnEscape is false whenever the picker is controlled (and whenever a consumer supplies onKeyDown)
+ *                   └→ AppPicker's onEscape never runs —
+ *                                   └→ the close arrives purely by listening to the flag transition
+ * ------------------------------------------------------------------------------------------------------------------------
+ * A nuance for an edge case:
+ *
+ * Declarative mount-open (rendered already-open).
+ * useFloatingContext fires no onOpen for it (it did not transition to open, it started open),
+ *    └→ neither the focus-seed (A) nor the notification (B) runs
+ * AppPanel compensates this locally via useMountedOpenAutofocusNuance, it needs to be seen if this is even desired or should be removed
+ * ------------------------------------------------------------------------------------------------------------------------
+ */
+type ConfiguredAppPickerCtx = ReturnType<typeof useAppPicker>;
+type AppPickerFloatingContextConfig = {
+    propsWithDefault: DSAppPickerT.InternalProps;
+    focusTrackers: ConfiguredAppPickerCtx['focusTrackers'];
+    openIntentRef: ConfiguredAppPickerCtx['openIntentRef'];
+    resolvedIsOpen: ConfiguredAppPickerCtx['resolvedIsOpen'];
+    setInternalIsOpen: ConfiguredAppPickerCtx['setInternalIsOpen'];
+};
+export declare const useAppPickerFloatingContext: (appPickerConfig: AppPickerFloatingContextConfig) => {
+    floatingStyles: React.CSSProperties;
+    arrowStyles: import("@elliemae/ds-floating-context/dist/types/parts/PopoverArrow.js").PopoverArrowT;
+    floatingContext: {
+        withoutPortal: boolean;
+        withoutAnimation: boolean;
+        portalDOMContainer: HTMLElement | undefined;
+        animationDuration: number;
+    };
+    handleTriggerRef: (instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    handleTriggerClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    handleTriggerKeyDown: (e: React.KeyboardEvent) => void;
+    floatingInnerRef: (instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+};
+export {};

package/dist/types/parts/AppPickerItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DSAppPickerT } from '../react-desc-prop-types.js';
+interface AppPickerItemProps {
+    app: DSAppPickerT.AppItem;
+    chipId: string;
+    isFirstFocusable: boolean;
+    isLastFocusable: boolean;
+    positionAnnouncement: string;
+}
+export declare const AppPickerItem: React.FC<AppPickerItemProps>;
+export {};

package/dist/types/parts/AppSection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface AppSectionProps {
+    isCustomApps?: boolean;
+}
+export declare const AppSection: React.FC<AppSectionProps>;
+export {};

package/dist/types/parts/Trigger.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { useAppPickerFloatingContext } from './AppPickerFloatingContext/useAppPickerFloatingContext.js';
+type UseAppPickerFloatingContextT = ReturnType<typeof useAppPickerFloatingContext>;
+type FloatingContextDictatedProps = {
+    handleTriggerRef: UseAppPickerFloatingContextT['handleTriggerRef'];
+    handleTriggerClick: UseAppPickerFloatingContextT['handleTriggerClick'];
+    handleTriggerKeyDown: UseAppPickerFloatingContextT['handleTriggerKeyDown'];
+    dialogLabelId: string;
+};
+export declare const Trigger: {
+    (PropsFromFloatingContext: FloatingContextDictatedProps): React.JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/types/parts/shared-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledListItemFullRow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SvgIconT } from '@elliemae/ds-icons';
-import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
 import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';
 export declare namespace DSAppPickerT {
@@ -22,31 +22,134 @@ export declare namespace DSAppPickerT {
         focusSelectedOrFirstAvailable?: () => void;
         focusWrapper: () => void;
     }>;
+    /**
+     * Why the panel opened. `trigger` carries the activating event and fires synchronously in the
+     * trigger's click handler (AppPicker owns the open). `controlled` fires when the consumer flips
+     * the `isOpen` prop themselves — no event, delivered when that flip takes effect.
+     */
+    type OpenChange = {
+        reason: 'trigger';
+        event: React.MouseEvent | React.KeyboardEvent;
+    } | {
+        reason: 'controlled';
+    };
+    /**
+     * Why the panel closed. The event-carrying reasons fire synchronously from the handler that owns
+     * the close (AppPicker in uncontrolled mode): `escape` (a scoped Escape), `click-outside`, and
+     * `trigger-toggle` (the trigger clicked while open). `controlled` fires when the consumer flips the
+     * `isOpen` prop themselves — no event, delivered when that flip takes effect.
+     */
+    type CloseChange = {
+        reason: 'escape';
+        event: KeyboardEvent;
+    } | {
+        reason: 'click-outside';
+        event: MouseEvent | TouchEvent;
+    } | {
+        reason: 'trigger-toggle';
+        event: React.MouseEvent | React.KeyboardEvent;
+    } | {
+        reason: 'controlled';
+    };
+    interface RequiredProps {
+    }
+    type SlotFunctionArguments = {
+        dsApppickerRoot: () => object;
+        dsApppickerGroup: () => object;
+        dsApppickerItem: () => object;
+        dsApppickerTitle: () => object;
+        dsApppickerSeparator: () => object;
+        dsApppickerRow: () => object;
+        dsApppickerChip: () => object;
+        dsApppickerButton: () => object;
+        dsApppickerFloatingWrapper: () => object;
+    };
     interface DefaultProps {
         apps: AppItem[];
         customApps: AppItem[];
         sectionTitle: string;
         customSectionTitle: string;
         icon: React.ComponentType<SvgIconT.Props>;
+        /**
+         * Opt in to arrow-key opening on the trigger: ArrowDown opens and focuses the selected application
+         * (the first available one when nothing is selected), ArrowUp opens and focuses the selected
+         * application (the last available one when nothing is selected).
+         *
+         * The picker owns this flow end to end — a consumer does not wire a key handler, drive `isOpen`, or
+         * reach through `actionRef` to place the focus. Defaults to `false`, so it is purely additive: a
+         * picker that does not opt in behaves exactly as before, with the arrow keys doing nothing on the
+         * trigger.
+         *
+         * Independent of `actionRef`, which stays the imperative handle for a consumer to move focus from
+         * their own business logic at any time.
+         */
+        openAndFocusOnArrowKeys: boolean;
     }
     interface RenderTriggerProp {
-        ref: React.MutableRefObject<HTMLButtonElement>;
+        ref: React.RefCallback<HTMLButtonElement>;
         [key: string]: unknown;
     }
+    /**
+     * Props handed to a `TriggerComponent`. This is the only trigger API that participates in the
+     * dialog's accessible-name wiring: `id` is the element the panel's `aria-labelledby` points at,
+     * so a TriggerComponent that drops it leaves the dialog unnamed.
+     *
+     * `innerRef`, not `ref`, deliberately: under React 18 a `ref` passed through JSX is consumed by
+     * the fiber and never reaches a plain function component's props unless it is wrapped in
+     * `forwardRef`. `innerRef` is the established Dimsum convention (see `ds-system`'s styled
+     * components) and keeps `forwardRef` optional for the consumer — which is the same ergonomic
+     * concern that produced DEV-002, solved here without the plain-function call.
+     */
+    interface TriggerComponentProps {
+        innerRef: React.RefCallback<HTMLButtonElement>;
+        id: string;
+        onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+        /**
+         * Attach to the trigger element alongside `onClick`. It is what implements
+         * `openAndFocusOnArrowKeys`, and it is a keydown handler in its own right — never route a keydown
+         * through `onClick` to get the same effect: `onClick` infers keyboard activation from the click's
+         * `detail`, which is a property of clicks, not of key presses.
+         *
+         * Harmless to attach when `openAndFocusOnArrowKeys` is false — it ignores every key in that case.
+         *
+         * The keys it acts on are ArrowDown and ArrowUp. A trigger that drives its own `isOpen` — which makes
+         * the picker's internal flip inert — has to open on those same two keys itself.
+         */
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        'aria-haspopup': 'dialog';
+    }
+    /**
+     * How the pending open was triggered, which is the only input to where initial focus lands:
+     * `pointer` → the panel · `keyboard-first` → the selection, else the first available item ·
+     * `keyboard-last` → the selection, else the last available item.
+     */
+    type OpenIntent = 'pointer' | 'keyboard-first' | 'keyboard-last';
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {
-        onClose?: () => void;
+        onOpen?: (info: OpenChange) => void;
+        onClose?: (info: CloseChange) => void;
         onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-        onClickOutside?: (e: React.MouseEvent) => void;
+        onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;
         onKeyDown?: (e: React.KeyboardEvent) => void;
         actionRef?: ActionRef;
-        renderTrigger?: React.ComponentType<RenderTriggerProp>;
+        /**
+         * @deprecated v4.x — use `TriggerComponent`. `renderTrigger` receives only `ref` and cannot be
+         * given the id the dialog's `aria-labelledby` points at, so the panel is left without an
+         * accessible name. See DEV-002 in KNOWN_INTENTIONAL_DEVIATIONS.md.
+         */
+        renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;
+        /**
+         * Custom trigger, rendered as a real React element so it owns its own fiber. Takes precedence
+         * over `renderTrigger` when both are supplied.
+         */
+        TriggerComponent?: React.ComponentType<TriggerComponentProps>;
         isOpen?: boolean;
         triggerRef?: React.RefObject<HTMLButtonElement>;
     }
-    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }
-    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
     }
 }
-export declare const defaultProps: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`>;
-export declare const DSAppPickerPropTypes: ValidationMap<unknown>;
+export declare const defaultProps: DSAppPickerT.DefaultProps;
+export declare const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props>;
+export declare const DSAppPickerPropTypesSchema: ValidationMap<DSAppPickerT.Props>;

package/dist/types/util/getChipId.d.ts

@@ -0,0 +1,2 @@
+import type { DSAppPickerT } from '../react-desc-prop-types.js';
+export declare const getChipId: (app: DSAppPickerT.AppItem, flatIndex: number) => string;

package/dist/types/util/getChipRegionId.d.ts

@@ -0,0 +1 @@
+export declare const getChipRegionId: (chipId: string) => string;

package/dist/types/util/getDSAppPickerContractProps.d.ts

@@ -0,0 +1,37 @@
+import { type DSAppPickerT } from '../react-desc-prop-types.js';
+/**
+ * Filters an arbitrary object down to the props DSAppPicker actually accepts.
+ *
+ * **Who this is for.** Components that wrap DSAppPicker and receive its props indirectly — as a
+ * configuration object from their own consumer rather than as JSX props.
+ *
+ * The canonical case is `ds-global-header`, whose `toolbar` config carries a `componentProps` object for
+ * the `ds-app-picker` item type. Such a wrapper cannot spread that object blindly: its config type is
+ * DSAppPicker's props *plus* the wrapper's own — `triggerOnClick` there — and those must not leak into
+ * DSAppPicker.
+ *
+ * Do not swap this for a hand-listed set of forwardable keys. A hand-list has no way to fail when the
+ * contract grows: the new prop type-checks at the call site, is dropped silently at runtime, and nothing
+ * reports it. Deriving the set from the contract is what makes that class of bug impossible.
+ *
+ * **Why a utility instead of exporting the schema.** `DSAppPickerPropTypes` is internal. It exists to
+ * drive prop validation and the Storybook props table; that it also happens to describe the exact set
+ * of forwardable props is a convenience today, not a promise. Exposing the schema would weld those
+ * concerns together and make every future change to it a public API change. Exposing this utility
+ * instead means the public commitment is only "you get the props DSAppPicker accepts" — if the two
+ * ever need to diverge, only this function changes.
+ *
+ * Anything the contract does not declare is discarded. Arbitrary `data-*` attributes are kept (a
+ * supported consumer surface no schema can enumerate).
+ *
+ * `undefined` vs `null` — see `getContractProps` for the implemented rule and the React precedent it
+ * follows. In short: `undefined` is dropped ("I am not defining this, you decide" — the wrapper's
+ * default stands), `null` is forwarded ("I am explicitly asking for nothing") and is then judged by
+ * DSAppPicker's own strictly-typed contract, which rejects it for props whose declared type does not
+ * admit null. To disable a handler, pass an explicit no-op (`() => {}`) — it honours the type and
+ * states the intent unambiguously.
+ *
+ * @param props - the object to filter, typically a wrapper's `componentProps` configuration
+ * @returns a new object containing only props DSAppPicker declares
+ */
+export declare const getDSAppPickerContractProps: (props: object) => Partial<DSAppPickerT.Props>;

package/dist/types/util/instanceIds.d.ts

@@ -0,0 +1,11 @@
+/** The element the consumer's own `id` lands on, unchanged. */
+export declare const getIdForAppPickerRoot: (id: string) => string;
+/**
+ * The trigger button. This is the id the panel's `aria-labelledby` points at, so it is also the answer to
+ * "what names the dialog" — see `TriggerComponent` in the Custom Triggers documentation.
+ */
+export declare const getIdForAppPickerTrigger: (id: string) => string;
+/** The `sectionTitle` heading, which labels the `apps` group. */
+export declare const getIdForAppPickerSectionTitle: (id: string) => string;
+/** The `customSectionTitle` heading, which labels the `customApps` group. */
+export declare const getIdForAppPickerCustomSectionTitle: (id: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "3.61.11",
+  "version": "3.70.0-alpha.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
   "files": [
@@ -22,7 +22,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+    "url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
   },
   "engines": {
     "pnpm": ">=9",
@@ -36,35 +36,38 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-legacy-popover": "1.0.16",
-    "@elliemae/ds-button-v2": "3.61.11",
-    "@elliemae/ds-hooks-focus-trap": "3.61.11",
-    "@elliemae/ds-chip": "3.61.11",
-    "@elliemae/ds-grid": "3.61.11",
-    "@elliemae/ds-icons": "3.61.11",
-    "@elliemae/ds-props-helpers": "3.61.11",
-    "@elliemae/ds-system": "3.61.11",
-    "@elliemae/ds-typescript-helpers": "3.61.11"
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.70.0-alpha.9",
+    "@elliemae/ds-floating-context": "3.70.0-alpha.9",
+    "@elliemae/ds-chip": "3.70.0-alpha.9",
+    "@elliemae/ds-grid": "3.70.0-alpha.9",
+    "@elliemae/ds-hooks-focus-trap": "3.70.0-alpha.9",
+    "@elliemae/ds-icons": "3.70.0-alpha.9",
+    "@elliemae/ds-props-helpers": "3.70.0-alpha.9",
+    "@elliemae/ds-typography": "3.70.0-alpha.9",
+    "@elliemae/ds-system": "3.70.0-alpha.9"
   },
   "devDependencies": {
+    "@playwright/experimental-ct-react": "1.61.1",
     "jest": "^30.0.0",
-    "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.61.11",
-    "@elliemae/ds-test-utils": "3.61.11"
+    "jest-axe": "^11.0.0",
+    "styled-components": "~5.3.11",
+    "@elliemae/ds-monorepo-devops": "3.70.0-alpha.9",
+    "@elliemae/ds-typescript-helpers": "3.70.0-alpha.9",
+    "@elliemae/ds-test-utils": "3.70.0-alpha.9"
   },
   "peerDependencies": {
-    "lodash-es": "^4.18.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "~5.3.9"
+    "styled-components": "~5.3.11"
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
+    "typeSafety": true
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
+    "test": "playwright test -c ./playwright.config.mjs && ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
     "lint": "node ../../../scripts/lint.mjs --fix",
     "lint:strict": "node ../../../scripts/lint-strict.mjs",
     "dts": "node ../../../scripts/dts.mjs",