@lumx/react 4.3.2-alpha.6 → 4.3.2-alpha.7

package/index.d.ts

@@ -1,10 +1,10 @@
-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';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$1, GenericProps as GenericProps$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, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, 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, PartialBy, 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';
 
@@ -512,12 +512,6 @@ type TextElement = 'span' | 'p' | HeadingElement;
 /** Get types of the values of a record. */
 type ValueOf<T extends Record<any, any>> = T[keyof T];
 
-/** Transform a string literal into kebab case */
-type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
-
-/** Transform the component name into the lumx class name. */
-type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
-
 type CommonRef = any;
 
 type Booleanish = boolean | 'true' | 'false';
@@ -655,10 +649,6 @@ interface ButtonProps$1 extends BaseButtonProps {
  * Component display name.
  */
 declare const COMPONENT_NAME = "Button";
-/**
- * Component default class name and class prefix.
- */
-declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 /**
  * Component default props.
  */
@@ -673,7 +663,7 @@ interface ButtonProps extends GenericProps, ButtonProps$1 {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -898,6 +888,503 @@ 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;
 
+interface ComboboxButtonProps extends GenericProps {
+    /**
+     * Label of the combobox button trigger.
+     */
+    label: string;
+    /**
+     * Controls how the `label` is displayed:
+     *  - `show-selection` (default): Displays the current selection as the label, or falls back to the provided `label`
+     *     if there is no selection. The `label` will still appear as a tooltip in this mode.
+     *  - `show-label`: Always displays the provided `label` as the visual label.
+     *  - `show-tooltip`: Always displays the provided `label` as the visual a tooltip.
+     *     (useful for IconButton combobox)
+     * In all cases, the given `label` is the ARIA label in use
+     */
+    labelDisplayMode?: 'show-selection' | 'show-label' | 'show-tooltip';
+    /**
+     * Focus event handler
+     */
+    onFocus?: React__default.FocusEventHandler;
+    /**
+     * Blur event handler
+     */
+    onBlur?: React__default.FocusEventHandler;
+    /** Customize the root element. */
+    as?: React__default.ElementType;
+}
+/**
+ * Combobox button trigger.
+ *
+ * @family Combobox
+ */
+declare const ComboboxButton: Comp<ComboboxButtonProps, HTMLElement>;
+
+/** Combobox option divider */
+declare function ComboboxDivider(): react_jsx_runtime.JSX.Element;
+
+/**
+ * All TextField props that are extended.
+ * We can't use "Omit" here as it is not compatible with the "GenericProps" type from the DS,
+ * meaning we would loose all props.
+ *
+ */
+type ExtendedTextFieldProps = PartialBy<Pick<TextFieldProps, 'ariaLabel' | 'chips' | 'error' | 'forceFocusStyle' | 'hasError' | 'afterElement' | 'helper' | 'icon' | 'inputRef' | 'textFieldRef' | 'isDisabled' | 'className' | 'isRequired' | 'isValid' | 'label' | 'maxLength' | 'minimumRows' | 'multiline' | 'id' | 'name' | 'placeholder' | 'onBlur' | 'onClear' | 'onKeyDown' | 'onFocus' | 'theme'>, 'ariaLabel' | 'onKeyDown'>;
+type ComboboxInputProps = ExtendedTextFieldProps & {
+    /** Whether the toggle button should be hidden */
+    hideToggle?: boolean;
+    /** Activate the clear button */
+    hasClearButton?: boolean;
+    /** Clear button forwarded props */
+    clearButtonProps?: Omit<TextFieldProps['clearButtonProps'], 'label'>;
+    /** Make input read only */
+    readOnly?: boolean;
+};
+/**
+ * Combobox input trigger.
+ *
+ * @family Combobox
+ */
+declare const ComboboxInput: ({ hideToggle, inputRef, textFieldRef, afterElement, onFocus, onBlur, onKeyDown, clearButtonProps, hasClearButton, theme, ...textFieldProps }: ComboboxInputProps) => 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;
+}
+/** 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;
+}
+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;
+};
+
+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 ComboboxListSkeletonProps {
+    isLoadingMore?: boolean;
+    children?: ComboboxOptionSkeletonProps['children'];
+}
+
+interface ComboboxListBoxProps extends GenericProps$1, React__default.ComponentProps<'ul'> {
+    /** Options display in the combobox */
+    children?: ReactNode;
+    /**
+     * Component to use as skeleton for each option instead of the default one.
+     * Can either be a react node or a component that receives the index as prop
+     */
+    renderItemSkeleton?: ComboboxListSkeletonProps['children'];
+    /** Label for the list */
+    label?: string;
+    /** Props of the popover element. */
+    popoverProps?: Partial<PopoverProps>;
+    /**
+     * An element to display at the bottom of the listbox.
+     * No interactive element must be set here as they will not be accessible.
+     */
+    footer?: ReactNode;
+    /** List ref */
+    listRef?: React__default.Ref<HTMLElement>;
+}
+/**
+ * The listbox containing the combobox's options.
+ *
+ * @family Combobox
+ * @param ComboboxListBoxProps
+ * @returns ComboboxListBox
+ */
+declare const ComboboxListBox: ({ children, renderItemSkeleton, label, popoverProps, footer, listRef, ...forwardedProps }: ComboboxListBoxProps) => react_jsx_runtime.JSX.Element;
+
+declare const LUMX_CLASSNAME = "lumx-list-item";
+/**
+ * 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 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>;
+
+interface ComboboxSectionProps {
+    /** Forwarded class name */
+    className?: string;
+    /** The title of the section */
+    title?: string;
+    /** Whether the section should be displayed as loading */
+    isLoading?: boolean;
+    /** Custom skeletons to use for loading state */
+    renderItemSkeleton?: ComboboxListSkeletonProps['children'];
+    /** Options to display */
+    children: ReactNode;
+}
+/**
+ * Section for options of a Combobox.
+ *
+ * @family Combobox
+ * @param ComboboxSectionProps
+ * @returns ComboboxSection
+ */
+declare const ComboboxSection: ({ children, ...props }: ComboboxSectionProps) => react_jsx_runtime.JSX.Element;
+
+declare const SUB_COMPONENTS: {
+    /**
+     * Option to set within a combobox list.
+     *
+     * @family Combobox
+     * @param ComboboxOptionProps
+     * @returns ComboboxOption
+     */
+    readonly Option: Comp<ComboboxOptionComponentProps<any>, HTMLElement>;
+    /**
+     * Skeleton for a combobox option.
+     * A typography skeleton is rendered by default but can be overridden by passing children.
+     */
+    readonly OptionSkeleton: ({ className, index, before, after, size, children, }: ComboboxOptionSkeletonProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Section for options of a Combobox.
+     *
+     * @family Combobox
+     * @param ComboboxSectionProps
+     * @returns ComboboxSection
+     */
+    readonly Section: ({ children, ...props }: ComboboxSectionProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Combobox input trigger.
+     *
+     * @family Combobox
+     */
+    readonly Input: ({ hideToggle, inputRef, textFieldRef, afterElement, onFocus, onBlur, onKeyDown, clearButtonProps, hasClearButton, theme, ...textFieldProps }: ComboboxInputProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * The listbox containing the combobox's options.
+     *
+     * @family Combobox
+     * @param ComboboxListBoxProps
+     * @returns ComboboxListBox
+     */
+    readonly List: ({ children, renderItemSkeleton, label, popoverProps, footer, listRef, ...forwardedProps }: ComboboxListBoxProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Combobox button trigger.
+     *
+     * @family Combobox
+     */
+    readonly Button: Comp<ComboboxButtonProps, HTMLElement>;
+};
+/**
+ *
+ * A Combobox is a combination of two components:
+ * * An input to enter the user's value
+ * * A popover with a list of suggestions to fill the value.
+ *
+ * These two components are included via the Combobox.Input and Combobox.ListBox components.
+ *
+ * In its simplest implementation the component will automatically filter the given options
+ * from the value of the input and fill the input with the textValue of the selected option.
+ *
+ * Props are available for more complex implementations.
+ *
+ * @family Combobox
+ * @param ComboboxProps
+ * @returns Combobox
+ */
+declare const Combobox: (<O>({ id: htmlId, inputValue, defaultInputValue, autoFilter, openOnClick, openOnFocus, status, showEmptyState, showErrorState, selectedIds, onInputChange, onSelect, onOpen, children, selectionType, translations, }: ComboboxProps<O>) => react_jsx_runtime.JSX.Element) & {
+    /**
+     * Option to set within a combobox list.
+     *
+     * @family Combobox
+     * @param ComboboxOptionProps
+     * @returns ComboboxOption
+     */
+    readonly Option: Comp<ComboboxOptionComponentProps<any>, HTMLElement>;
+    /**
+     * Skeleton for a combobox option.
+     * A typography skeleton is rendered by default but can be overridden by passing children.
+     */
+    readonly OptionSkeleton: ({ className, index, before, after, size, children, }: ComboboxOptionSkeletonProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Section for options of a Combobox.
+     *
+     * @family Combobox
+     * @param ComboboxSectionProps
+     * @returns ComboboxSection
+     */
+    readonly Section: ({ children, ...props }: ComboboxSectionProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Combobox input trigger.
+     *
+     * @family Combobox
+     */
+    readonly Input: ({ hideToggle, inputRef, textFieldRef, afterElement, onFocus, onBlur, onKeyDown, clearButtonProps, hasClearButton, theme, ...textFieldProps }: ComboboxInputProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * The listbox containing the combobox's options.
+     *
+     * @family Combobox
+     * @param ComboboxListBoxProps
+     * @returns ComboboxListBox
+     */
+    readonly List: ({ children, renderItemSkeleton, label, popoverProps, footer, listRef, ...forwardedProps }: ComboboxListBoxProps) => react_jsx_runtime.JSX.Element;
+    /**
+     * Combobox button trigger.
+     *
+     * @family Combobox
+     */
+    readonly Button: Comp<ComboboxButtonProps, HTMLElement>;
+};
+
 /**
  * Comment block variants.
  */
@@ -1658,22 +2145,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,
@@ -2161,7 +2663,7 @@ interface LinkProps extends GenericProps, Omit<LinkProps$1, 'label'> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -3769,5 +4271,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, COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, ComboboxButton, ComboboxDivider, ComboboxInput, ComboboxListBox, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, ComboboxSection, 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, SUB_COMPONENTS, 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, ComboboxButtonProps, ComboboxInputProps, ComboboxListBoxProps, ComboboxOptionComponentProps, ComboboxOptionMoreInfoProps, ComboboxOptionSkeletonProps, ComboboxSectionProps, 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 };