@lumx/react 4.9.0-alpha.2 → 4.9.0-alpha.3

package/index.d.ts

@@ -1268,8 +1268,8 @@ interface TextProps$1 extends HasClassName {
  * Defines the props of the component.
  */
 interface ListSectionProps$1 extends HasClassName {
-    /** Section label displayed as the group title. */
-    label?: string;
+    /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+    label?: string | JSXElement;
     /** Section icon */
     icon?: string;
     /** List items (should be ListItem, ListDivider, etc.). */
@@ -1362,6 +1362,12 @@ interface ComboboxStateProps$1 {
          * Used to suppress false "empty" state while data is loading.
          */
         isLoading?: boolean;
+        /**
+         * Whether the combobox popover is open.
+         * Used to gate live region content so screen readers announce messages
+         * when the popover opens (content insertion triggers `aria-live` announcement).
+         */
+        isOpen?: boolean;
     };
 }
 
@@ -1377,8 +1383,8 @@ interface ComboboxStateProps extends ReactToJSX<ComboboxStateProps$1, 'state'> {
  * Defines the props for the core ComboboxSection template.
  */
 interface ComboboxSectionProps$1 extends HasClassName {
-    /** Section label displayed as the group title. */
-    label?: string;
+    /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+    label?: string | JSXElement;
     /** Section icon */
     icon?: string;
     /** Section content (should be ComboboxOption elements). */
@@ -1573,6 +1579,12 @@ interface ComboboxOptionSkeletonProps$1 extends HasClassName {
     children?: JSXElement;
     /** ref to the root <li> element. */
     ref?: CommonRef;
+    /**
+     * Number of skeleton `<li>` elements to render.
+     * Each is an independent element with `:nth-child` width cycling applied by SCSS.
+     * @default 1
+     */
+    count?: number;
 }
 /**
  * Props that React/Vue wrappers need to re-declare with framework-specific types.
@@ -1590,12 +1602,6 @@ interface ComboboxOptionSkeletonProps extends GenericProps$1, ReactToJSX<Combobo
     after?: ReactNode;
     /** Override the default SkeletonTypography content entirely. */
     children?: ReactNode;
-    /**
-     * Number of skeleton `<li>` elements to render.
-     * Each is an independent element with `:nth-child` width cycling applied by SCSS.
-     * @default 1
-     */
-    count?: number;
 }
 
 /**
@@ -2061,7 +2067,9 @@ type ComboboxOptionActionProps<E extends ElementType$1 = 'button'> = HasPolymorp
  * Combobox compound component namespace.
  */
 declare const Combobox: {
+    /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
     Provider: typeof ComboboxProvider;
+    /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
     Button: (<E extends React$1.ElementType = Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>(props: Omit<HasPolymorphicAs$1<E>, "children" | "aria-expanded" | "aria-haspopup" | "role" | "aria-controls" | "aria-activedescendant"> & _lumx_core_js_types.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1> & {
         onSelect?: (option: {
             value: string;
@@ -2072,9 +2080,13 @@ declare const Combobox: {
         displayName: string;
         className: "lumx-combobox-button";
     };
+    /** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
     Input: Comp<ComboboxInputProps, HTMLDivElement>;
+    /** Listbox container that registers with the combobox handle and tracks loading state. */
     List: Comp<ComboboxListProps, HTMLUListElement>;
+    /** Selectable option item with filtering and keyboard navigation support. */
     Option: Comp<ComboboxOptionProps, HTMLLIElement>;
+    /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
     OptionAction: (<E extends React$1.ElementType = "button">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
         as?: E | undefined;
     } & _lumx_core_js_types.HasClassName & _lumx_core_js_types.HasRequiredLinkHref<E> & {
@@ -2087,22 +2099,27 @@ declare const Combobox: {
         displayName: string;
         className: "lumx-combobox-option-action";
     };
+    /** Info button on an option that shows a popover on hover or keyboard highlight. */
     OptionMoreInfo: {
         (props: ComboboxOptionMoreInfoProps): react_jsx_runtime.JSX.Element;
         displayName: string;
         className: "lumx-combobox-option-more-info";
     };
+    /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
     OptionSkeleton: {
-        (props: ComboboxOptionSkeletonProps): react_jsx_runtime.JSX.Element[];
+        (props: ComboboxOptionSkeletonProps): react_jsx_runtime.JSX.Element;
         displayName: string;
         className: "lumx-combobox-option-skeleton";
     };
+    /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
     Popover: {
         (props: ComboboxPopoverComponentProps): react_jsx_runtime.JSX.Element;
         displayName: string;
         className: "lumx-combobox-popover";
     };
+    /** Labelled group of options that auto-hides when all its child options are filtered out. */
     Section: Comp<ComboboxSectionProps, HTMLLIElement>;
+    /** Displays empty, error, and loading state messages for the combobox list. */
     State: {
         (props: ComboboxStateProps): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -2441,7 +2458,7 @@ declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1 {
+interface ExpansionPanelProps$1 extends HasClassName, HasCloseMode, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -2450,6 +2467,41 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     isOpen?: boolean;
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
+    /** On open callback. */
+    handleOpen?: (event: any) => void;
+    /** On close callback. */
+    handleClose?: (event: any) => void;
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+    toggleButtonProps: any;
+    /** On toggle open or close callback. */
+    handleToggleOpen?(shouldOpen: boolean, event: any): void;
+    /** Children */
+    children?: JSXElement;
+    /** Ref forwarded to the root `<section>` element. */
+    ref?: CommonRef;
+    /** Ref forwarded to the collapsible wrapper `<div>`. */
+    wrapperRef?: CommonRef;
+    /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+    headerProps: GenericProps;
+    /** Content rendered inside the header content area. */
+    headerContent?: JSXElement;
+    /** Optional drag handle element rendered at the start of the header. */
+    dragHandle?: JSXElement;
+    /** Content rendered inside the collapsible content area. */
+    content?: JSXElement;
+    /** Optional footer element rendered below the content. */
+    footer?: JSXElement;
+    /** IconButton component injected by the framework wrapper (React or Vue). */
+    IconButton: any;
+    /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+    isChildrenVisible?: boolean;
+}
+type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends GenericProps$1, ReactToJSX<ExpansionPanelProps$1, ExpansionPanelPropsToOverride> {
     /** On open callback. */
     onOpen?: (event: React__default.MouseEvent) => void;
     /** On close callback. */
@@ -2458,8 +2510,6 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     toggleButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
     onToggleOpen?(shouldOpen: boolean, event: React__default.MouseEvent): void;
-    /** Children */
-    children?: React__default.ReactNode;
 }
 /**
  * ExpansionPanel component.
@@ -3339,7 +3389,20 @@ declare const Message: Comp<MessageProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface MosaicProps extends GenericProps$1, HasTheme$1 {
+interface MosaicProps$1 extends HasClassName, HasTheme {
+    /** Thumbnails. */
+    thumbnails: any[];
+    /** On image click callback. */
+    handleClick?(index: number): void;
+    Thumbnail: any;
+    ref?: CommonRef;
+}
+type MosaicPropsToOverride = 'Thumbnail' | 'thumbnails';
+
+/**
+ * Defines the props of the component.
+ */
+interface MosaicProps extends GenericProps$1, ReactToJSX<MosaicProps$1, MosaicPropsToOverride> {
     /** Thumbnails. */
     thumbnails: ThumbnailProps[];
     /** On image click callback. */
@@ -4455,16 +4518,25 @@ declare enum TabListLayout {
 /**
  * Defines the props of the component.
  */
-interface TabListProps extends GenericProps$1, HasTheme$1 {
+interface TabListProps$1 extends HasClassName, HasTheme {
     /** ARIA label (purpose of the set of tabs). */
     ['aria-label']: string;
     /** Tab list. */
-    children: ReactNode;
+    children: JSXElement;
     /** Layout of the tabs in the list. */
     layout?: TabListLayout;
     /** Position of the tabs in the list (requires 'clustered' layout). */
-    position?: Alignment$1;
+    position?: Alignment;
+    /** ref to the wrapper element */
+    ref?: CommonRef;
 }
+
+/**
+ * Defines the props of the component.
+ */
+interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1> {
+}
+
 /**
  * TabList component.
  *
@@ -4506,6 +4578,10 @@ interface TabProps$1 extends HasClassName {
     changeToTab?: () => void;
     /** Tab index for roving tabindex management. */
     tabIndex?: number;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Name of the prop used to attach the keypress event (framework-dependent). */
+    keyPressProp?: string;
     /** ID applied to the tab button element (for aria-labelledby on the panel). */
     tabId?: string;
     /** ID of the associated tab panel (for aria-controls). */
@@ -4517,7 +4593,7 @@ interface TabProps$1 extends HasClassName {
     /** Forward ref to the underlying button element. */
     ref?: CommonRef;
 }
-type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
 
 /**
  * Defines the props of the component.
@@ -4552,13 +4628,30 @@ declare const Tab: Comp<TabProps, HTMLButtonElement>;
 /**
  * Defines the props of the component.
  */
-interface TabPanelProps extends GenericProps$1 {
-    /** Native id property */
-    id?: string;
+interface TabPanelProps$1 extends HasClassName {
     /** Whether the tab is active or not. */
     isActive?: boolean;
+    /** Whether the tab is lazy loaded or not */
+    isLazy?: boolean;
     /** Children */
-    children?: React.ReactNode;
+    children?: JSXElement;
+    /** ID applied to the tab button element (for aria-labelledby on the panel). */
+    tabId?: string;
+    /** ID of the associated tab panel (for aria-controls). */
+    id?: string;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+type TabPanelPropsToOverride = 'tabId' | 'isLazy' | 'tabIndexProp';
+
+/**
+ * Defines the props of the component.
+ */
+interface TabPanelProps extends GenericProps$1, ReactToJSX<TabPanelProps$1, TabPanelPropsToOverride> {
+    /** Native id property */
+    id?: string;
 }
 /**
  * TabPanel component.