@lumx/react 4.6.0 → 4.6.1-alpha.0

package/index.d.ts

@@ -1,10 +1,10 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Theme as Theme$1, Size as Size$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Theme as Theme$1, Size as Size$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, HasRequiredLinkHref as HasRequiredLinkHref$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
+import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$2, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
-import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType, ComponentProps } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ComponentProps, ElementType as ElementType$1 } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -497,6 +497,7 @@ interface GenericProps extends HasClassName {
  * Note: Uses type-only import to avoid runtime dependencies.
  */
 type JSXElement = React__default.ReactNode;
+type ElementType = React__default.ElementType;
 
 /** Union type of all heading elements */
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -513,6 +514,17 @@ type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T>
 /** Transform the component name into the lumx class name. */
 type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
 
+type HasRequiredLinkHref<E> = E extends 'a' ? {
+    href: string;
+} : Record<string, unknown>;
+
+type HasPolymorphicAs<E extends ElementType> = React__default.ComponentPropsWithoutRef<E> & {
+    /**
+     * Customize the rendered component.
+     */
+    as?: E;
+};
+
 type CommonRef = any;
 
 type Booleanish = boolean | 'true' | 'false';
@@ -681,12 +693,14 @@ interface BadgeWrapperProps extends GenericProps$1, ReactToJSX<BadgeWrapperProps
 }
 declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
 
+type ClickableElement = 'a' | 'button' | ElementType;
 interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
     children?: JSXElement;
     handleClick?: (event?: any) => void;
     handleKeyPress?: (event?: any) => void;
     ref?: CommonRef;
 }
+type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> & HasRequiredLinkHref<E> & BaseClickableProps;
 
 /**
  * Button size definition.
@@ -773,7 +787,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -974,12 +988,22 @@ type useChipGroupNavigationType<C = any> = (chips: C[], onChipDeleted: (chip: C)
 /**
  * Defines the props of the component.
  */
-interface ChipGroupProps extends GenericProps$1 {
+interface ChipGroupProps$1 extends HasClassName {
     /**
      * Chip horizontal alignment.
      * @deprecated
      */
-    align?: HorizontalAlignment$1;
+    align?: HorizontalAlignment;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface ChipGroupProps extends GenericProps$1, ReactToJSX<ChipGroupProps$1, never> {
     /** List of Chip. */
     children: ReactNode;
 }
@@ -1330,7 +1354,7 @@ type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
  * are typed as `any` here because React uses `RefObject<HTMLElement>` while Vue uses
  * raw `HTMLElement` — each framework narrows the type in its own props definition.
  */
-interface PopoverProps$1 extends HasClassName, HasTheme {
+interface PopoverProps$1 extends HasClassName, HasTheme, HasCloseMode {
     /** Reference to the DOM element used to set the position of the popover. */
     anchorRef?: CommonRef;
     /** Customize the root element tag. */
@@ -2347,7 +2371,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
 
 /**
  * Defines the props of the component.
@@ -2405,21 +2429,20 @@ interface ListProps extends GenericProps$1 {
     isClickable?: boolean;
     /** Item padding size. */
     itemPadding?: Extract<Size$1, 'big' | 'huge'>;
-    /** Tab index of the list. Default to -1 */
+    /** Tab index of the list. */
     tabIndex?: number;
-    /**
-     * On list item selected callback.
-     *
-     * @param key   React key of the selected item.
-     * @param index Index of the selected item among the sibling items.
-     * @param evt   Source event (either mouse or keyboard event).
-     */
+    /** @deprecated not supported since v4.0.0 */
     onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
 }
 declare const List: Comp<ListProps, HTMLUListElement> & {
     useKeyboardListNavigation: useKeyboardListNavigationType;
 };
 
+/**
+ * ListItemAction props.
+ */
+type ListItemActionProps<E extends ClickableElement = 'button'> = RawClickableProps<E> & HasClassName;
+
 type ListItemSize = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
 /**
  * Defines the props of the component.
@@ -2447,7 +2470,9 @@ interface ListItemProps extends GenericProps$1, HasAriaDisabled$1 {
     linkRef?: Ref<HTMLAnchorElement>;
     /** Size variant. */
     size?: ListItemSize;
-    /** On selected callback. */
+    /** On click callback. */
+    onClick?(event: SyntheticEvent): void;
+    /** @alias onClick */
     onItemSelected?(evt: SyntheticEvent): void;
 }
 /**
@@ -2456,26 +2481,73 @@ interface ListItemProps extends GenericProps$1, HasAriaDisabled$1 {
  */
 declare function isClickable({ linkAs, linkProps, onItemSelected }: Partial<ListItemProps>): boolean;
 /**
- * ListItem component.
+ * ListItem component with Action sub-component.
+ */
+declare const ListItem: Comp<ListItemProps, HTMLLIElement> & {
+    /** Sub-component that renders the default action (button or link) for the action area pattern. */
+    Action: (<E extends React$1.ElementType = "button">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
+        as?: E | undefined;
+    } & GenericProps$1 & ReactToJSX<ListItemActionProps, "children"> & HasRequiredLinkHref$1<E> & {
+        children: ReactNode;
+        onClick?(evt: SyntheticEvent): void;
+    } & React$1.ComponentProps<E> & {
+        ref?: ComponentRef<E> | undefined;
+    }) => React.JSX.Element) & {
+        displayName: string;
+        className: string;
+        defaultProps: Partial<ListItemActionProps<"button">>;
+    };
+};
+
+/**
+ * Defines the props of the component.
+ */
+type ListDividerProps = GenericProps$1;
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const ListItem: Comp<ListItemProps, HTMLLIElement>;
+declare const ListDivider: Comp<GenericProps$1, HTMLLIElement>;
 
 /**
  * Defines the props of the component.
  */
-type ListDividerProps = GenericProps$1;
+interface ListSectionProps$1 extends HasClassName {
+    /** Section label displayed as the group title. */
+    label?: string;
+    /** Section icon */
+    icon?: string;
+    /** List items (should be ListItem, ListDivider, etc.). */
+    children: JSXElement;
+    /** Items wrapper forwarded props */
+    itemsWrapperProps?: ComponentProps<'ul'>;
+    /** ID for the label element (used for aria-labelledby). */
+    id: string;
+    /** ref to the root element */
+    ref?: CommonRef;
+    /** Text component to use for rendering the label */
+    Text: (props: TextProps$1 & Record<string, any>) => any;
+}
+
 /**
- * ListDivider component.
+ * Defines the props of the component.
+ */
+interface ListSectionProps extends GenericProps$1, ReactToJSX<ListSectionProps$1, 'children' | 'id' | 'Text'> {
+    /** Section content */
+    children: ReactNode;
+}
+/**
+ * ListSection component.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const ListDivider: Comp<GenericProps$1, HTMLLIElement>;
+declare const ListSection: Comp<ListSectionProps, HTMLLIElement>;
 
 /**
  * Defines the props of the component.
@@ -2486,6 +2558,7 @@ interface ListSubheaderProps extends GenericProps$1 {
 }
 /**
  * ListSubheader component.
+ * @deprecated ListSubheader produces improper list structure. use ListSection instead.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -2567,9 +2640,9 @@ type BaseNavigationItemProps = {
     /** Mark as the current page link */
     isCurrentPage?: boolean;
 };
-declare const NavigationItem: (<E extends ElementType = "a">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
+declare const NavigationItem: (<E extends ElementType$1 = "a">(props: React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
     as?: E | undefined;
-} & HasTheme$1 & HasClassName$1 & BaseNavigationItemProps & HasRequiredLinkHref<E> & React$1.ComponentProps<E> & {
+} & HasTheme$1 & HasClassName$1 & BaseNavigationItemProps & HasRequiredLinkHref$2<E> & React$1.ComponentProps<E> & {
     ref?: ComponentRef<E> | undefined;
 }) => React.JSX.Element) & {
     displayName: string;
@@ -3806,23 +3879,39 @@ type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextProps extends NativeInputProps, HasTheme$1, HasClassName$1 {
+interface RawInputTextProps$1 extends NativeInputProps, HasTheme, HasClassName {
     value?: string;
+    handleChange?: (value: string, name?: string, event?: any) => void;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextProps extends ReactToJSX<RawInputTextProps$1> {
     onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
 }
+
 /**
  * Raw input text component
  * (input element without any decoration)
  */
 declare const RawInputText: Comp<RawInputTextProps, HTMLInputElement>;
 
-type NativeTextareaProps = ComponentProps<'textarea'>;
+type NativeTextareaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'>;
 /**
  * Defines the props of the component.
  */
-interface RawInputTextareaProps extends Omit<NativeTextareaProps, 'value' | 'onChange'>, HasTheme$1, HasClassName$1 {
-    minimumRows?: number;
+interface RawInputTextareaProps$1 extends NativeTextareaProps, HasTheme, HasClassName {
     value?: string;
+    rows?: number;
+    handleChange?: (value: string, name?: string, event?: any) => void;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextareaProps extends ReactToJSX<RawInputTextareaProps$1, 'rows'> {
+    minimumRows?: number;
     onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
 }
 /**
@@ -4011,5 +4100,5 @@ declare const ThemeProvider: React__default.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };