@useinsider/ab-components 0.0.99 → 0.0.101-beta.1

package/dist/index.d.ts

@@ -202,9 +202,12 @@ onOpen?: (() => any) | undefined;
 }>, {
 modelValue: boolean;
 position: "bottom" | "top";
+gap: number;
 align: "left" | "center" | "right" | "left-side" | "right-side";
 positionStrategy: "fixed" | "absolute";
 closeOnClickOutside: boolean;
+elevated: boolean;
+fitContent: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 popoverRef: HTMLDivElement;
 contentRef: HTMLDivElement;
@@ -460,6 +463,11 @@ export declare interface CascadingListItem {
     id: string;
     label: string;
     subtitle?: string;
+    /**
+     * Trailing metadata rendered on the right side of the row (e.g. a remaining
+     * count). Inherits the row text color so it tracks selected/hover states.
+     */
+    meta?: string;
     testId?: string;
     disabled?: boolean;
 }
@@ -472,6 +480,7 @@ subItemId: string;
 "update:open": (value: boolean) => any;
 "item-click": (itemId: string) => any;
 "item-expand": (itemId: string) => any;
+"update:search-query": (value: string) => any;
 }, string, PublicProps, Readonly<CascadingMenuProps> & Readonly<{
 onSelect?: ((payload: {
 itemId: string;
@@ -480,14 +489,26 @@ subItemId: string;
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 "onItem-click"?: ((itemId: string) => any) | undefined;
 "onItem-expand"?: ((itemId: string) => any) | undefined;
+"onUpdate:search-query"?: ((value: string) => any) | undefined;
 }>, {
 width: number;
+searchable: boolean;
 listStyle: CSSProperties;
 menuStyle: CSSProperties;
 listWidth: number;
 listMaxHeight: number;
+menuMaxHeight: number;
 loadingText: string;
 teleportTarget: string | HTMLElement;
+submenuPlacement: "right" | "left";
+searchPlaceholder: string;
+emptySearchText: string;
+loading: boolean;
+selectedItemId: string | null;
+selectedSubItemId: string | null;
+menuTestId: string;
+listTestId: string;
+searchInputId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 menuRef: HTMLDivElement;
 listRef: HTMLDivElement;
@@ -517,6 +538,11 @@ export declare interface CascadingMenuProps {
     width?: number;
     listWidth?: number;
     listMaxHeight?: number;
+    /**
+     * Optional max-height (in px) for the parent panel. Useful when the menu
+     * shows a long flat search result list and should scroll inside the panel.
+     */
+    menuMaxHeight?: number;
     loadingText?: string;
     menuStyle?: CSSProperties;
     listStyle?: CSSProperties;
@@ -528,6 +554,50 @@ export declare interface CascadingMenuProps {
      * instead so the menu's DOM is not a direct child of `body`.
      */
     teleportTarget?: string | HTMLElement;
+    /**
+     * Which side the child sub-list panel opens on, relative to the active
+     * parent item. Defaults to `'right'`. The opposite side is used as the
+     * floating-ui flip fallback so the sub-list still appears when the chosen
+     * side has no room.
+     */
+    submenuPlacement?: 'right' | 'left';
+    /**
+     * When true, a search input is rendered at the top of the parent panel
+     * and typing produces a flat, parent-grouped result list that filters
+     * across ALL sub-lists. The per-sub-list `searchable` flag is ignored
+     * while this mode is active.
+     */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptySearchText?: string;
+    /**
+     * Top-level loading flag — shown in the parent panel (covers async
+     * fetches that populate every sub-list at once). Independent from the
+     * per-sub-list `loading` flag, which still drives the child panel.
+     */
+    loading?: boolean;
+    /**
+     * Highlights a parent menu row as the currently-selected category.
+     */
+    selectedItemId?: string | null;
+    /**
+     * Highlights a sub-list row as the currently-selected entry. Applies to
+     * both the child panel and the global flat search results.
+     */
+    selectedSubItemId?: string | null;
+    /**
+     * Optional `data-testid` for the parent menu root and the child list root.
+     * Use these instead of relying on internal CSS class names from E2E tests.
+     */
+    menuTestId?: string;
+    listTestId?: string;
+    /**
+     * Stable id for the parent search `<input>` element. When set, the input's
+     * `id` attribute uses this value verbatim — useful when E2E tests need to
+     * `fill('#my-stable-id', ...)` the input. The child sub-list search input
+     * uses `${searchInputId}-child` if a value is provided.
+     */
+    searchInputId?: string;
 }
 
 export declare interface CascadingSelectPayload {
@@ -1037,6 +1107,9 @@ declare interface PopoverProps {
     width?: number;
     positionStrategy?: 'fixed' | 'absolute';
     closeOnClickOutside?: boolean;
+    elevated?: boolean;
+    fitContent?: boolean;
+    gap?: number;
 }
 
 declare interface Props {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.99",
+  "version": "0.0.101-beta.1",
   "type": "module",
   "files": [
     "dist"