@lumx/react 4.3.2-alpha.2 → 4.3.2-alpha.21

package/index.d.ts

@@ -1,12 +1,11 @@
 import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$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';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps, HasTheme as HasTheme$1, ValueOf as ValueOf$1, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, Falsy, HasClassName as HasClassName$1, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+import { GenericProps, HasTheme as HasTheme$1, ValueOf as ValueOf$1, HasAriaDisabled as HasAriaDisabled$1, LumxClassName as LumxClassName$1, HasCloseMode, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } 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, AriaAttributes, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, ComponentProps } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, ReactText, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Selector } from '@lumx/core/js/types/Selector';
 
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
@@ -294,32 +293,6 @@ interface AvatarProps extends GenericProps, HasTheme$1 {
  */
 declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
 
-/**
- * Defines the props of the component.
- */
-interface BadgeProps extends GenericProps {
-    /** Badge content. */
-    children?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette$1;
-}
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Badge: Comp<BadgeProps, HTMLDivElement>;
-
-interface BadgeWrapperProps extends GenericProps {
-    /** Badge. */
-    badge: ReactElement;
-    /** Node to display the badge on */
-    children: ReactNode;
-}
-declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
-
 /**
  * Alignments.
  */
@@ -567,6 +540,62 @@ interface HasDisabled {
     disabled?: boolean;
 }
 
+type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
+type FieldSelector<TObject, TValue> = keyof {
+    [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey];
+};
+/**
+ * Value selector on an object
+ * - either via an object key
+ * - or a selector function
+ */
+type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps$1 extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps extends Omit<BadgeProps$1, 'children'>, GenericProps {
+    /** Badge content. */
+    children?: ReactNode;
+}
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+
+interface BadgeWrapperProps$1 extends HasClassName {
+    /** Badge element to display */
+    badge?: JSXElement;
+    /** Content to wrap with badge */
+    children?: JSXElement;
+    /** Ref forwarding */
+    ref?: CommonRef;
+}
+
+interface BadgeWrapperProps extends GenericProps, Omit<BadgeWrapperProps$1, 'children' | 'badge'> {
+    /** Badge element to display */
+    badge: ReactElement;
+    /** Content to wrap with badge */
+    children: ReactNode;
+}
+declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
+
 interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
     children?: JSXElement;
     onClick?: (event?: any) => void;
@@ -635,11 +664,11 @@ interface ButtonProps$1 extends BaseButtonProps {
 /**
  * Component display name.
  */
-declare const COMPONENT_NAME = "Button";
+declare const COMPONENT_NAME$1 = "Button";
 /**
  * Component default class name and class prefix.
  */
-declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME$1>;
 /**
  * Component default props.
  */
@@ -879,6 +908,423 @@ interface SelectionChipGroupProps<O> extends GenericProps {
  */
 declare const SelectionChipGroup: <O>({ onChange, value, getOptionId, getOptionName, inputRef, inputLabel, renderChip, theme, isDisabled, chipTooltipLabel, label, ...forwardedProps }: SelectionChipGroupProps<O>) => react_jsx_runtime.JSX.Element;
 
+/**
+ * The source of the combobox option selection
+ * It could either be on click / touch or keyboard selection
+ */
+type ComboboxOptionSelectEventSource = 'keyboard' | 'click';
+type ComboboxSelectionType = 'single' | 'multiple';
+type BaseLoadingStatus = 'loading' | 'loadingMore' | 'idle' | 'error' | 'debouncing' | 'filtering' | 'empty';
+/**
+ * Options related types
+ */
+/** All possible values a combobox option can have  */
+type BaseComboboxOptionProps<O = any> = {
+    /**
+     * A unique id to track the option
+     */
+    id: string;
+    /**
+     * Whether the current input value should filter this option.
+     */
+    filterFromInput?: boolean;
+    /**
+     * Callback to call when the option is selected.
+     * This should only be used to add custom actions on options.
+     * For most cases, the "onSelect" on the Combobox root component should be enough.
+     */
+    onSelect?: (option: O, eventSource?: ComboboxOptionSelectEventSource) => void;
+    /**
+     * Additional data to link to the option. This can be useful to retrieve with `onSelect`.
+     */
+    data?: O;
+    /**
+     * Whether the option is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * The components to use to visually customize options.
+     * ! Options must not have interactive elements.
+     * ! If you need additional actions, you might need to create custom options and search how to
+     * ! make them accessible.
+     */
+    children?: ReactNode;
+    /**
+     * The text value the option has.
+     * This is the value used to filter the options by when manual filtering is disabled
+     * and that will be used as input value when an option is selected
+     */
+    textValue?: string;
+    /**
+     * Element to display before the content of the option.
+     * ! Options must not have interactive elements.
+     * ! If you need additional actions, you might need to create custom options and search how to
+     * ! make them accessible.
+     */
+    before?: ReactNode;
+    /**
+     * Element to display after the content of the option.
+     * ! Options must not have interactive elements.
+     * ! If you need additional actions, you might need to create custom options and search how to
+     * ! make them accessible.
+     */
+    after?: ReactNode;
+    /**
+     * Size of the list item.
+     * Default to tiny
+     */
+    size?: ListItemSize;
+    /**
+     * Fill to activate a tooltip on mouse over
+     */
+    tooltipProps?: Partial<TooltipProps>;
+};
+/**
+ * Props for when an option has no children.
+ * In these case, we need at least the text value to know what to display
+ * */
+type TextValueOnly<O = any> = BaseComboboxOptionProps<O> & {
+    children?: never;
+    textValue: string;
+};
+/**
+ * Props for when an option has a react element as string
+ * In that case, we can use the children as the textValue without having
+ * to set a manual props.
+ * The props is still available to have a text value different than the displayed value.
+ */
+type StringOption<O = any> = BaseComboboxOptionProps<O> & {
+    children: ReactText;
+    textValue?: string;
+};
+/**
+ * Props for when an option has a react element as children
+ * In that case, we cannot know what the actual value of the
+ * option is, so the `textValue` prop has to be set.
+ */
+type NodeOption<O = any> = BaseComboboxOptionProps<O> & {
+    children: Exclude<ReactNode, ReactText>;
+    textValue: string;
+};
+/** Props for the ComboboxOption component */
+type ComboboxOptionProps<O = any> = TextValueOnly<O> | StringOption<O> | NodeOption<O>;
+/** Shared data between all combobox option types. */
+interface BaseRegisteredComboboxOption {
+    id: string;
+    /** The id that was generated for this option */
+    generatedId: string;
+    /** Whether the "option" is an action */
+    isAction?: boolean;
+    /** Whether the "option" is disabled */
+    isDisabled?: boolean;
+}
+/** Values of action type options */
+interface RegisteredComboboxAction extends BaseRegisteredComboboxOption {
+    /** Whether the "option" is an action */
+    isAction: true;
+    /** Callback when the action is triggered.  */
+    onSelect?: () => void;
+}
+/** Combobox value */
+interface RegisteredComboboxOptionValue<O = any> extends BaseRegisteredComboboxOption, Pick<ComboboxOptionProps<O>, 'data' | 'filterFromInput' | 'textValue' | 'onSelect'> {
+    /** The section the option is a child of. */
+    sectionId?: string;
+    /** Whether the "option" is an action */
+    isAction?: never;
+}
+/** The option values stored in the state */
+type RegisteredComboboxOption<O = any> = RegisteredComboboxAction | RegisteredComboboxOptionValue<O>;
+type OnComboboxSelect<O = any> = (option: RegisteredComboboxOptionValue<O>) => void;
+type OnComboboxInputChange = TextFieldProps['onChange'];
+type ComboboxTranslations = {
+    clearLabel: string;
+    showSuggestionsLabel: string;
+    loadingLabel: string;
+    noResultsForInputLabel: (input?: string) => string;
+    serviceUnavailableLabel: string;
+    tryReloadLabel: string;
+    nbOptionsLabel: (options: number) => string;
+};
+/** Props for the main combobox component. */
+type ComboboxProps<O = any> = {
+    /**
+     * HTML id
+     */
+    id?: string;
+    /**
+     * The current option id to set as selected.
+     * If omitted, the local state will be used instead;
+     */
+    selectedIds?: Array<string | number>;
+    /**
+     * The current value for the combobox input.
+     * If omitted, the input is controlled locally */
+    inputValue?: string;
+    /**
+     * The default value to set on the input.
+     * Use this if you want to initialize the input with a value and not control it
+     */
+    defaultInputValue?: string;
+    /**
+     * Whether the options should be automatically filtered or not.
+     * By default, the combobox will try to filter the options from the current input value
+     * using a "contains" strategy.
+     * If this is `false`, the option will not be automatically filtered and must be manually filtered by the parent.
+     * Useful for asynchronous comboboxes.
+     */
+    autoFilter: boolean;
+    /**
+     * Whether the combobox should open on focus
+     */
+    openOnFocus?: boolean;
+    /**
+     * Whether the combobox should open on click
+     */
+    openOnClick?: boolean;
+    /**
+     * Status of the combobox
+     */
+    status: BaseLoadingStatus;
+    /**
+     * Callback when the input changes.
+     */
+    onInputChange?: OnComboboxInputChange;
+    /**
+     * Callback for when an option is selected
+     */
+    onSelect?: OnComboboxSelect<O>;
+    /**
+     * Callback called when the combobox opens
+     */
+    onOpen?: (options: {
+        currentValue?: string;
+        manual: boolean;
+    }) => void;
+    /**
+     * The combobox components to render.
+     * Must be one of the exposed components (Combobox.Input, Combobox.ListBox etc...)
+     */
+    children: ReactNode;
+    /**
+     * The combobox can have a specific selection type:
+     * - Single: only one item is selected
+     * - Multiple: several items can be selected (this impacts the combobox list, which will now not close when selectiong an option)
+     */
+    selectionType?: ComboboxSelectionType;
+    /**
+     * Whether the error state should be displayed when the status is in error.
+     * @default `true` if `status` is defined
+     */
+    showErrorState?: boolean;
+    /**
+     * Whether the empty state should be displayed when there is no results.
+     * @default `true` if `autoFilter=false`
+     */
+    showEmptyState?: boolean;
+    /** custom className */
+    className?: string;
+    /** translations to be used across the combobox */
+    translations: ComboboxTranslations;
+};
+/** Entity related types for single selection. */
+type SingleSelection<O = any> = {
+    selectionType: 'single';
+    /**
+     * Selected option object
+     */
+    value?: O;
+    /**
+     * Callback on option object selected
+     */
+    onChange?(newValue?: O): void;
+    /**
+     * No chips in single selection mode.
+     */
+    renderChip?: never;
+};
+/** Entity related types for multiple selection. */
+type MultipleSelection<O = any> = {
+    selectionType: 'multiple';
+    /**
+     * Selected options array
+     */
+    value?: O[];
+    /**
+     * Callback on option array selected
+     */
+    onChange?(newValue?: O[]): void;
+    /**
+     * Custom selection chip render function
+     */
+    renderChip?: (option: O) => ReactNode;
+};
+/** Shared props between SelectTextField and SelectButton */
+type BaseSelectProps<O = any> = {
+    /**
+     * List of option objects
+     */
+    options?: Array<O>;
+    /**
+     * Option object id selector (either the property name or a function to get the id)
+     */
+    getOptionId: Selector<O>;
+    /**
+     * Option object name selector (either the property name or a function to get the name)
+     * Fallbacks on the ID if not defined
+     */
+    getOptionName?: Selector<O, string | undefined | null>;
+    /**
+     * Option object description selector (either the property name or a function to get the description)
+     */
+    getOptionDescription?: Selector<O, string | undefined | null>;
+    /**
+     * Option object section id selector.
+     * Providing this will group options by sections (and may change their order)
+     * If the section id is a string, it is used as section label. Else, the section won't have a label.
+     */
+    getSectionId?: Selector<O, any>;
+    /**
+     * option object section title selector.
+     * If provided, the section will be rendered using this function.
+     */
+    renderSectionTitle?: (option: O, sectionIndex: number) => React.ReactNode;
+    /**
+     * Whether the sections are separated by dividers
+     */
+    hasSectionDividers?: boolean;
+    /**
+     * Option object render function
+     * Default to rendering option using the id & name obtained with `optionIdSelector` & `optionNameSelector`
+     *
+     * **The direct child must be a Combobox.Option, otherwise it will not render the children.**.
+     */
+    renderOption?: (option: O, index: number) => React.ReactNode;
+    /**
+     * Callback to load more items
+     */
+    onLoadMore?(): void;
+    /**
+     * Props passed to the option list.
+     */
+    /**
+     * Add custom elements before the options
+     */
+    beforeOptions?: ReactNode;
+    /**
+     * Data attribute scope
+     */
+    scope?: string;
+};
+type OpenComboboxAction = {
+    type: 'OPEN_COMBOBOX';
+    payload?: {
+        manual?: boolean;
+    };
+};
+type CloseComboboxAction = {
+    type: 'CLOSE_COMBOBOX';
+};
+type SetInputValueAction = {
+    type: 'SET_INPUT_VALUE';
+    payload: string;
+};
+type AddOptionAction = {
+    type: 'ADD_OPTION';
+    payload: {
+        id: string;
+        option: RegisteredComboboxOption;
+    };
+};
+type RemoveOptionAction = {
+    type: 'REMOVE_OPTION';
+    payload: {
+        id: string;
+    };
+};
+type ComboboxAction = OpenComboboxAction | CloseComboboxAction | SetInputValueAction | AddOptionAction | RemoveOptionAction;
+
+declare const COMPONENT_NAME = "ComboboxOption";
+declare const COMBOBOX_OPTION_CLASSNAME: LumxClassName$1<typeof COMPONENT_NAME>;
+declare const LUMX_CLASSNAME = "lumx-list-item";
+interface OptionContentProps<O extends object = any> extends GenericProps, Omit<ComboboxOptionProps<O>, 'id' | 'textValue' | 'filterFromInput' | 'data'> {
+    id: string;
+    isSelected?: boolean;
+    onSelect?(): void;
+    description?: string;
+    /** Whether the option should be focused by default. */
+    autofocus?: boolean;
+    /** Customize the root element. */
+    as?: React__default.ElementType;
+    /** Type of the combobox (listbox or grid). */
+    comboboxType?: 'listbox' | 'grid';
+}
+/**
+ * Props for ComboboxOption with additional generic properties.
+ */
+interface ComboboxOptionComponentProps<O extends object = any> extends GenericProps, Omit<ComboboxOptionProps<O>, 'as'> {
+    /** Customize the root element. */
+    as?: React__default.ElementType;
+}
+/**
+ * Option to set within a combobox list.
+ *
+ * @family Combobox
+ * @param ComboboxOptionProps
+ * @returns ComboboxOption
+ */
+declare const ComboboxOption: Comp<ComboboxOptionComponentProps<any>, HTMLElement>;
+
+interface ComboboxOptionSkeletonProps {
+    className?: string;
+    index?: number;
+    children?: ReactNode | ((options: {
+        index?: number;
+    }) => ReactNode);
+    before?: ComboboxOptionProps['before'];
+    after?: ComboboxOptionProps['after'];
+    size?: ComboboxOptionProps['size'];
+}
+/**
+ * Skeleton for a combobox option.
+ * A typography skeleton is rendered by default but can be overridden by passing children.
+ */
+declare const ComboboxOptionSkeleton: ({ className, index, before, after, size, children, }: ComboboxOptionSkeletonProps) => react_jsx_runtime.JSX.Element;
+
+interface ComboboxOptionActionProps extends GenericProps {
+    /** Should the action be set as disabled  */
+    isDisabled?: boolean;
+    /** Action to trigger when the action is selected */
+    onClick: () => void;
+    /** Customize the root element. */
+    as?: React__default.ElementType;
+}
+/**
+ * Action to set on a Combobox Option.
+ * Allows to add an interactive element that
+ * can be navigated to and triggered using the keyboard.
+ *
+ * Defaults as "button"
+ *
+ * @family Combobox
+ * @param ComboboxOptionActionProps
+ * @returns ComboboxOptionAction
+ */
+declare const ComboboxOptionAction: (props: ComboboxOptionActionProps) => react_jsx_runtime.JSX.Element;
+
+interface ComboboxOptionMoreInfoProps {
+    buttonProps?: Partial<IconButtonProps>;
+    popoverProps?: PopoverProps;
+    onToggle?: (isOpen: boolean) => void;
+    children?: React__default.ReactNode;
+}
+/**
+ * Display more info on the option as a popover opening on mouse hover or keyboard nav
+ * Please consider using a simpler option description instead for better UX and a11y.
+ *
+ * @family Combobox
+ */
+declare const ComboboxOptionMoreInfo: React__default.FC<ComboboxOptionMoreInfoProps>;
+
 /**
  * Comment block variants.
  */
@@ -1639,22 +2085,37 @@ interface GridItemProps extends GenericProps {
  */
 declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
 
-type GridColumnGapSize = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 /**
  * Defines the props of the component.
  */
-interface GridColumnProps extends GenericProps {
+interface GridColumnProps$1 extends HasClassName {
     /** Customize the root element. */
-    as?: React.ElementType;
+    as?: any;
     /** Children elements. */
-    children?: ReactNode;
+    children?: JSXElement;
     /** Space between columns and rows. */
     gap?: GridColumnGapSize;
     /** Ideal number of columns. */
     maxColumns?: number;
     /** Minimum width for each item, reduce the number of column if there is not enough space. */
     itemMinWidth?: number;
+    /** Custom styles. */
+    style?: any;
+    /** reference to the root element */
+    ref?: CommonRef;
 }
+
+/**
+ * Defines the props of the component.
+ */
+interface GridColumnProps extends GenericProps, GridColumnProps$1 {
+    /** Customize the root element. */
+    as?: React.ElementType;
+    /** Children elements. */
+    children?: React.ReactNode;
+}
+
 /**
  * The GridColumn is a layout component that can display children in a grid
  * with custom display properties. It also comes with a responsive design,
@@ -1705,54 +2166,42 @@ interface IconProps extends Omit<IconProps$1, 'children'>, GenericProps {
  */
 declare const Icon: Comp<IconProps, HTMLElement>;
 
-/**
- *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
- */
-type FocusPoint = {
-    x?: number;
-    y?: number;
-};
 /**
  * Loading attribute is not yet supported in typescript, so we need
  * to add it in order to avoid a ts error.
  * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
  */
 declare module 'react' {
-    interface ImgHTMLAttributes<T> extends React__default.HTMLAttributes<T> {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
         loading?: 'eager' | 'lazy';
     }
 }
-/**
- * All available aspect ratios.
- * @deprecated
- */
-declare const ThumbnailAspectRatio: Record<string, AspectRatio$1>;
 /**
  *  Thumbnail sizes.
  */
-type ThumbnailSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+type ThumbnailSize$1 = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 /**
  * Thumbnail variants.
  */
-declare const ThumbnailVariant: {
+declare const ThumbnailVariant$1: {
     readonly squared: "squared";
     readonly rounded: "rounded";
 };
-type ThumbnailVariant = ValueOf$1<typeof ThumbnailVariant>;
+type ThumbnailVariant$1 = ValueOf<typeof ThumbnailVariant$1>;
 /**
  * Thumbnail object fit.
  */
-declare const ThumbnailObjectFit: {
+declare const ThumbnailObjectFit$1: {
     readonly cover: "cover";
     readonly contain: "contain";
 };
-type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
+type ThumbnailObjectFit$1 = ValueOf<typeof ThumbnailObjectFit$1>;
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Defines the props of the component.
  */
-interface ThumbnailProps extends GenericProps, HasTheme$1 {
+interface ThumbnailProps$1 extends HasTheme$1, HasClassName$1 {
     /** Alignment of the thumbnail in it's parent (requires flex parent). */
     align?: HorizontalAlignment$1;
     /** Image alternative text. */
@@ -1760,41 +2209,98 @@ interface ThumbnailProps extends GenericProps, HasTheme$1 {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio$1;
     /** Badge. */
-    badge?: ReactElement | Falsy;
+    badge?: JSXElement$1;
     /** Image cross origin resource policy. */
     crossOrigin?: ImgHTMLProps['crossOrigin'];
     /** Fallback icon (SVG path) or react node when image fails to load. */
-    fallback?: string | ReactNode;
+    fallback?: string | JSXElement$1;
     /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
     fillHeight?: boolean;
-    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
-    focusPoint?: FocusPoint;
     /** Image URL. */
     image: string;
+    loadingState: string;
     /** Props to inject into the native <img> element. */
     imgProps?: ImgHTMLProps;
     /** Reference to the native <img> element. */
-    imgRef?: Ref<HTMLImageElement>;
+    imgRef?: CommonRef$1;
+    ref?: CommonRef$1;
     /** Set to true to force the display of the loading skeleton. */
     isLoading?: boolean;
     /** Set how the image should fit when its aspect ratio is constrained */
-    objectFit?: ThumbnailObjectFit;
+    objectFit?: ThumbnailObjectFit$1;
     /** Size variant of the component. */
-    size?: ThumbnailSize;
+    size?: ThumbnailSize$1;
     /** Image loading mode. */
-    loading?: ImgHTMLProps['loading'];
+    loading?: 'eager' | 'lazy';
     /** Ref of an existing placeholder image to display while loading. */
-    loadingPlaceholderImageRef?: React__default.RefObject<HTMLImageElement>;
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClick?: (event: any) => void;
     /** On key press callback. */
-    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress?: (event: any) => void;
     /** Variant of the component. */
-    variant?: ThumbnailVariant;
+    variant?: ThumbnailVariant$1;
     /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    linkProps?: GenericProps;
+    focusPointStyle?: GenericProps;
+    disabledStateProps?: GenericProps;
+    isAnyDisabled?: boolean;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
+    'aria-label'?: string;
+}
+
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React__default.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+declare const ThumbnailAspectRatio: Record<string, AspectRatio$1>;
+/**
+ *  Thumbnail sizes.
+ */
+type ThumbnailSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+type ThumbnailVariant = ValueOf$1<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+    readonly cover: "cover";
+    readonly contain: "contain";
+};
+type ThumbnailObjectFit = ValueOf$1<typeof ThumbnailObjectFit>;
+
+/**
+ * Defines the props of the component.
+ */
+interface ThumbnailProps extends GenericProps, Omit<ThumbnailProps$1, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge'> {
+    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+    focusPoint?: FocusPoint;
+    /** Badge. */
+    badge?: ReactElement | Falsy;
 }
 /**
  * Thumbnail component.
@@ -3171,11 +3677,21 @@ declare const Switch: Comp<SwitchProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface TableProps extends GenericProps, HasTheme$1 {
+interface TableProps$1 extends HasTheme, HasClassName {
     /** Whether the table has checkbox or thumbnail on first cell or not. */
     hasBefore?: boolean;
     /** Whether the table has dividers or not. */
     hasDividers?: boolean;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableProps extends GenericProps, Omit<TableProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3191,7 +3707,17 @@ declare const Table: Comp<TableProps, HTMLTableElement>;
 /**
  * Defines the props of the component.
  */
-interface TableBodyProps extends GenericProps {
+interface TableBodyProps$1 extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableBodyProps extends GenericProps, Omit<TableBodyProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3211,7 +3737,7 @@ declare const ThOrder: {
     readonly asc: "asc";
     readonly desc: "desc";
 };
-type ThOrder = ValueOf$1<typeof ThOrder>;
+type ThOrder = ValueOf<typeof ThOrder>;
 /**
  * Table cell variants.
  */
@@ -3219,11 +3745,11 @@ declare const TableCellVariant: {
     readonly body: "body";
     readonly head: "head";
 };
-type TableCellVariant = ValueOf$1<typeof TableCellVariant>;
+type TableCellVariant = ValueOf<typeof TableCellVariant>;
 /**
  * Defines the props of the component.
  */
-interface TableCellProps extends GenericProps {
+interface TableCellProps$1 extends HasClassName {
     /** Icon (SVG path).(thead only). */
     icon?: string;
     /** Whether the column is sortable or not (thead only). */
@@ -3234,6 +3760,16 @@ interface TableCellProps extends GenericProps {
     variant?: TableCellVariant;
     /** On header cell click callback. */
     onHeaderClick?(): void;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableCellProps extends GenericProps, Omit<TableCellProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3249,7 +3785,17 @@ declare const TableCell: Comp<TableCellProps, HTMLTableCellElement>;
 /**
  * Defines the props of the component.
  */
-interface TableHeaderProps extends GenericProps {
+interface TableHeaderProps$1 extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableHeaderProps extends GenericProps, Omit<TableHeaderProps$1, 'ref'> {
     /** Children */
     children?: React.ReactNode;
 }
@@ -3265,13 +3811,25 @@ declare const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement>;
 /**
  * Defines the props of the component.
  */
-interface TableRowProps extends GenericProps {
+interface TableRowProps$1 extends HasClassName, HasAriaDisabled {
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /** Tab index */
+    tabIndex?: number;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TableRowProps extends GenericProps, Omit<TableRowProps$1, 'ref' | 'tabIndex' | 'aria-disabled'> {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
     /** Children */
     children?: React.ReactNode;
 }
@@ -3500,7 +4058,21 @@ declare const useFocusPointStyle: ({ image, aspectRatio, focusPoint, imgProps: {
 /**
  * Defines the props of the component.
  */
-interface ToolbarProps extends GenericProps {
+interface ToolbarProps$1 extends HasClassName {
+    /** After content (placed after the label). */
+    after?: JSXElement;
+    /** Before content (placed before the label). */
+    before?: JSXElement;
+    /** Label content. */
+    label?: JSXElement;
+    /** Component ref. */
+    ref?: CommonRef;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface ToolbarProps extends GenericProps, ToolbarProps$1 {
     /** After content (placed after the label). */
     after?: ReactNode;
     /** Before content (placed before the label). */
@@ -3653,5 +4225,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, TableHeader, TableRow, Text, TextField, ThOrder, 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, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1 as COMPONENT_NAME, Checkbox, Chip, ChipGroup, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, 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, LUMX_CLASSNAME, 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, BaseSelectProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxAction, ComboboxOptionActionProps, ComboboxOptionComponentProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxProps, 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, MultipleSelection, NavigationProps, NotificationProps, Offset, OnComboboxInputChange, OnComboboxSelect, OptionContentProps, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelection, 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 };