@lumx/react 4.3.2-alpha.12 → 4.3.2-alpha.14

package/Tooltip-CCXZsfG-.d.ts

@@ -0,0 +1,986 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { Ref, ReactElement, AriaAttributes, ReactNode, ReactText, RefObject, SyntheticEvent } from 'react';
+import { GenericProps as GenericProps$1, Size as Size$1 } from '@lumx/core/js/constants';
+import { Selector } from '@lumx/core/js/types/Selector';
+import { ValueOf, GenericProps, HasTheme as HasTheme$1, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode } from '@lumx/core/js/types';
+
+/** LumX Component Type. */
+type Comp<P, T = HTMLElement> = {
+    (props: P & {
+        ref?: Ref<T>;
+    }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+type Theme = ValueOf<typeof Theme>;
+declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+type Size = ValueOf<typeof Size>;
+type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+type WhiteSpace = ValueOf<typeof WhiteSpace>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+type ColorPalette = ValueOf<typeof ColorPalette>;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/**
+ * Framework-agnostic type for renderable content.
+ * Vue components should cast VNode[] from slots to this type.
+ *
+ * Note: Uses type-only import to avoid runtime dependencies.
+ */
+type JSXElement = React__default.ReactNode;
+
+type CommonRef = any;
+
+type Booleanish = boolean | 'true' | 'false';
+
+interface HasAriaDisabled {
+    /** Similar to `disabled` but does not block pointer events or focus */
+    'aria-disabled'?: Booleanish;
+}
+
+interface HasDisabled {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** @alias isDisabled */
+    disabled?: boolean;
+}
+
+interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
+    children?: JSXElement;
+    onClick?: (event?: any) => void;
+    ref?: CommonRef;
+}
+
+/**
+ * Button size definition.
+ */
+type ButtonSize = Extract<Size, 's' | 'm'>;
+interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Emphasis variant. */
+    emphasis?: Emphasis;
+    /** Whether or not the button has a background color in low emphasis. */
+    hasBackground?: boolean;
+    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
+    href?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is selected or not (unsupported in `high` emphasis). */
+    isSelected?: boolean;
+    /** Native button name property. */
+    name?: string;
+    /** Size variant. */
+    size?: ButtonSize;
+    /** Native anchor target property. */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Native button type. */
+    type?: 'submit' | 'reset' | 'button' | undefined;
+    /** Custom component for the link (can be used to inject router Link). */
+    linkAs?: 'a' | any;
+    /** whether the button is dispalyed in full width or not */
+    fullWidth?: boolean;
+    /** whether the button is currently active or not */
+    isActive?: boolean;
+    /** whether the button is currently focused or not */
+    isFocused?: boolean;
+    /** whether the button is currently focused or not */
+    isHovered?: boolean;
+}
+
+interface IconButtonProps$1 extends BaseButtonProps {
+    /**
+     * Icon (SVG path).
+     * If `image` is also set, `image` will be used instead.
+     */
+    icon?: string;
+    /**
+     * Image (image url).
+     * Has priority over `icon`.
+     */
+    image?: string;
+    /**
+     * Label text (required for a11y purpose).
+     * If you really don't want an aria-label, you can set an empty label (this is not recommended).
+     */
+    label: string;
+    /** text to be displayed on hover */
+    title?: string;
+}
+
+interface IconButtonProps extends GenericProps, Omit<IconButtonProps$1, 'title' | 'children'> {
+    /**
+     * Props to pass to the tooltip.
+     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+     * */
+    tooltipProps?: Partial<TooltipProps>;
+    /** Whether the tooltip should be hidden or not. */
+    hideTooltip?: boolean;
+}
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const IconButton: Comp<IconButtonProps, HTMLButtonElement>;
+
+/**
+ * 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.
+     */
+    listProps?: Partial<ComboboxListBoxProps>;
+    /**
+     * 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;
+
+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;
+
+/**
+ * Different possible placements for the popover.
+ */
+declare const Placement: {
+    readonly AUTO: "auto";
+    readonly AUTO_END: "auto-end";
+    readonly AUTO_START: "auto-start";
+    readonly TOP: "top";
+    readonly TOP_END: "top-end";
+    readonly TOP_START: "top-start";
+    readonly RIGHT: "right";
+    readonly RIGHT_END: "right-end";
+    readonly RIGHT_START: "right-start";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_END: "bottom-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly LEFT: "left";
+    readonly LEFT_END: "left-end";
+    readonly LEFT_START: "left-start";
+};
+type Placement = ValueOf<typeof Placement>;
+/**
+ * Offset of the popover.
+ */
+interface Offset {
+    /** Offset size along the reference. */
+    along?: number;
+    /** Offset size away from the reference. */
+    away?: number;
+}
+/**
+ * Popover elevation index.
+ */
+type Elevation = 1 | 2 | 3 | 4 | 5;
+/**
+ * Popover fit anchor width options.
+ */
+declare const FitAnchorWidth: {
+    readonly MAX_WIDTH: "maxWidth";
+    readonly MIN_WIDTH: "minWidth";
+    readonly WIDTH: "width";
+};
+type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
+
+/**
+ * Defines the props of the component.
+ */
+interface PopoverProps extends GenericProps, HasTheme$1 {
+    /** Reference to the DOM element used to set the position of the popover. */
+    anchorRef: React.RefObject<HTMLElement>;
+    /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
+    as?: React.ElementType;
+    /** Element which will act as boundary when opening the popover. */
+    boundaryRef?: RefObject<HTMLElement>;
+    /** Content. */
+    children: ReactNode;
+    /** Whether a click anywhere out of the popover would close it. */
+    closeOnClickAway?: boolean;
+    /** Whether an escape key press would close the popover. */
+    closeOnEscape?: boolean;
+    /** Shadow elevation. */
+    elevation?: Elevation;
+    /**
+     * Manage popover width:
+     *   - `maxWidth`: popover not bigger than anchor
+     *   - `minWidth` or `true`: popover not smaller than anchor
+     *   - `width`: popover equal to the anchor.
+     */
+    fitToAnchorWidth?: FitAnchorWidth | boolean;
+    /** Shrink popover if even after flipping there is not enough space. */
+    fitWithinViewportHeight?: boolean;
+    /** Element to focus when opening the popover. */
+    focusElement?: RefObject<HTMLElement>;
+    /** Whether the focus should go back on the anchor when popover closes and focus is within. */
+    focusAnchorOnClose?: boolean;
+    /** Whether we put an arrow or not. */
+    hasArrow?: boolean;
+    /** Whether the popover is open or not. */
+    isOpen: boolean;
+    /** Offset placement relative to anchor. */
+    offset?: Offset;
+    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+    parentElement?: RefObject<HTMLElement>;
+    /** Placement relative to anchor. */
+    placement?: Placement;
+    /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: RefObject<HTMLElement>;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** On close callback (on click away or Escape pressed). */
+    onClose?(): void;
+    /** Whether the popover should trap the focus within itself. Default to false. */
+    withFocusTrap?: boolean;
+}
+/**
+ * Popover component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Popover: Comp<PopoverProps, HTMLDivElement>;
+
+interface InputLabelProps$1 extends HasClassName, HasTheme {
+    /** Typography variant. */
+    typography?: Typography;
+    /** Label content. */
+    children: JSXElement;
+    /** Native htmlFor property. */
+    htmlFor: string;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
+}
+
+interface InputLabelProps extends InputLabelProps$1, GenericProps {
+}
+/**
+ * InputLabel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
+
+type ListItemSize = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends GenericProps, HasAriaDisabled$1 {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** Content. */
+    children: string | ReactNode;
+    /** Whether the list item should be highlighted or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Whether link/button is disabled or not. */
+    isDisabled?: boolean;
+    /** Reference to the <li> element. */
+    listItemRef?: Ref<HTMLLIElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props that will be passed on to the Link */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Reference to the link element. */
+    linkRef?: Ref<HTMLAnchorElement>;
+    /** Size variant. */
+    size?: ListItemSize;
+    /** On selected callback. */
+    onItemSelected?(evt: SyntheticEvent): void;
+}
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+declare function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean;
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListItem: Comp<ListItemProps, HTMLLIElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface TextFieldProps extends GenericProps, HasTheme$1, HasAriaDisabled$1 {
+    /** Chip Group to be rendered before the main text input. */
+    chips?: ReactNode;
+    /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
+    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Error message. */
+    error?: string | ReactNode;
+    /** Whether we force the focus style or not. */
+    forceFocusStyle?: boolean;
+    /** Whether the text field is displayed with error style or not. */
+    hasError?: boolean;
+    /** Additional element to put at the end of the text field. */
+    afterElement?: ReactNode;
+    /** Helper text. */
+    helper?: string | ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Native input id property (generated if not provided to link the label element). */
+    id?: string;
+    /** Reference to the <input> or <textarea> element. */
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Whether the text field is displayed with valid style or not. */
+    isValid?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Additional label props. */
+    labelProps?: InputLabelProps;
+    /** Max string length the input accepts (constrains the input and displays a character counter). */
+    maxLength?: number;
+    /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
+    minimumRows?: number;
+    /** Whether the text field is a textarea or an input. */
+    multiline?: boolean;
+    /** Native input name property. */
+    name?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Reference to the wrapper. */
+    textFieldRef?: Ref<HTMLDivElement>;
+    /** Native input type (only when `multiline` is disabled). */
+    type?: React.ComponentProps<'input'>['type'];
+    /** Value. */
+    value?: string;
+    /** On blur callback. */
+    onBlur?(event: React.FocusEvent): void;
+    /** On change callback. */
+    onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /** On clear callback. */
+    onClear?(event?: SyntheticEvent): void;
+    /** On focus callback. */
+    onFocus?(event: React.FocusEvent): void;
+}
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
+
+declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
+
+/** Position of the tooltip relative to the anchor element. */
+type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
+/**
+ * Defines the props of the component.
+ */
+interface TooltipProps extends GenericProps, HasCloseMode {
+    /** Anchor (element on which we activate the tooltip). */
+    children: ReactNode;
+    /** Delay (in ms) before closing the tooltip. */
+    delay?: number;
+    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
+    forceOpen?: boolean;
+    /** Label text. */
+    label?: string | null | false;
+    /** Placement of the tooltip relative to the anchor. */
+    placement?: TooltipPlacement;
+    /** Choose how the tooltip text should link to the anchor */
+    ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+}
+/**
+ * Tooltip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Tooltip: Comp<TooltipProps, HTMLDivElement>;
+
+export { Alignment as A, Kind as K, ListItem as L, Placement as P, Popover as Q, Size as S, TextField as U, WhiteSpace as W, Tooltip as X, isClickable as _, ColorPalette as a, ColorVariant as m, Typography as n, Orientation as p, AspectRatio as q, TypographyInterface as r, ComboboxListBox as u, ComboboxOptionSkeleton as v, IconButton as w, InputLabel as x };
+export type { ComboboxAction as $, BaseButtonProps as B, Comp as C, ListItemSize as D, Elevation as E, OnComboboxInputChange as F, GlobalSize as G, HasClassName as H, IconButtonProps as I, JSXElement as J, MultipleSelection as M, OnComboboxSelect as N, Offset as O, SingleSelection as R, TextFieldProps as T, VerticalAlignment as V, TooltipPlacement as Y, TooltipProps as Z, ComboboxSelectionType as a0, ComboboxTranslations as a1, BaseLoadingStatus as a2, RegisteredComboboxOption as a3, ComboboxOptionSelectEventSource as a4, CommonRef as b, HasTheme as c, HasAriaDisabled as d, HasDisabled as e, ComboboxOptionProps as f, PopoverProps as g, ComboboxListSkeletonProps as h, ComboboxProps as i, ComboboxOptionSkeletonProps as j, ComboboxListBoxProps as k, ColorWithVariants as l, HorizontalAlignment as o, BaseSelectProps as s, ButtonSize as t, InputLabelProps as y, ListItemProps as z };