@lumx/react 3.19.0 → 3.19.1-alpha.0

package/index.d.ts

@@ -1,129 +1,75 @@
-import React, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
 import { F as Falsy } from './_internal/Falsy.js';
+import React, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
+
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
 
 /**
- * Callback function type alias (use for readability)
+ * The down key code.
  */
-type Callback = () => void;
-
-/** 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;
-};
-
+declare const DOWN_KEY_CODE = 40;
 /**
- * Extract ref type for a component or JSX intrinsic element
- *
- * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
- * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ * The enter/return key code.
  */
-type ComponentRef<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : C extends Comp<any, infer T> ? React.Ref<T> : C extends React.JSXElementConstructor<{
-    ref?: infer R;
-}> ? R : never;
-
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
+declare const ENTER_KEY_CODE = 13;
 /**
- * Define a generic props types.
+ * The space key code.
  */
-interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}
-
+declare const SPACE_KEY_CODE = 32;
 /**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
+ * The escape key code.
  */
-type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
-    /**
-     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
-     * Although it is not recommended, aria-label can be used instead if no visible element is available.
-     */
-    'aria-labelledby': T;
-    /** The label of the dialog. */
-    'aria-label'?: undefined;
-} : {
-    'aria-label': string;
-    'aria-labelledby'?: undefined;
-};
-
-interface HasCloseMode {
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
-}
-
-interface HasTheme {
-    /**
-     * Theme adapting the component to light or dark background.
-     */
-    theme?: Theme;
-}
-
-/** Union type of all heading elements */
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-/** Union type of all text elements */
-type TextElement = 'span' | 'p' | HeadingElement;
+declare const ESCAPE_KEY_CODE = 27;
+/**
+ * The left key code.
+ */
+declare const LEFT_KEY_CODE = 37;
+/**
+ * The right key code.
+ */
+declare const RIGHT_KEY_CODE = 39;
+/**
+ * The tab key code.
+ */
+declare const TAB_KEY_CODE = 9;
+/**
+ * The up key code.
+ */
+declare const UP_KEY_CODE = 38;
+/**
+ * The up key code.
+ */
+declare const BACKSPACE_KEY_CODE = 8;
 
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
+/**
+ * The prefix to use for the CSS classes.
+ */
+declare const CSS_PREFIX = "lumx";
 
 /**
- * See SCSS variable $lumx-color-palette
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
  */
-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";
+declare const DIALOG_TRANSITION_DURATION = 400;
+declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+declare const NOTIFICATION_TRANSITION_DURATION = 200;
+declare const SLIDESHOW_TRANSITION_DURATION = 5000;
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+declare const TOOLTIP_HOVER_DELAY: {
+    open: number;
+    close: number;
 };
-type ColorPalette = ValueOf<typeof ColorPalette>;
-type Color = ColorPalette | string;
 /**
- * See SCSS variable $lumx-color-variants
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
  */
-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";
+declare const TOOLTIP_LONG_PRESS_DELAY: {
+    open: number;
+    close: number;
 };
-type ColorVariant = ValueOf<typeof ColorVariant>;
-/** ColorPalette with all possible color variant combination */
-type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
-
 /**
  * Alignments.
  */
@@ -290,6 +236,148 @@ declare const WhiteSpace: {
     '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>;
+type Color = ColorPalette | string;
+/**
+ * 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}`>;
+
+/**
+ * Callback function type alias (use for readability)
+ */
+type Callback = () => void;
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/**
+ * A point coordinate in 2D space
+ */
+type Point = {
+    x: number;
+    y: number;
+};
+
+/** Predicate function type */
+type Predicate<T> = (t: T) => boolean;
+
+/**
+ * Rectangle size
+ */
+type RectSize = {
+    width: number;
+    height: number;
+};
+
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+
+/** 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;
+};
+
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+type ComponentRef<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : C extends Comp<any, infer T> ? React.Ref<T> : C extends React.JSXElementConstructor<{
+    ref?: infer R;
+}> ? R : never;
+
+type HasRequiredLinkHref<E> = E extends 'a' ? {
+    href: string;
+} : Record<string, unknown>;
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -642,7 +730,7 @@ interface ButtonProps extends BaseButtonProps {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps extends BaseButtonProps {
     /**
@@ -1314,7 +1402,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "big" | "tiny" | "regular" | "medium" | "huge">;
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -1960,7 +2048,7 @@ interface LinkProps extends GenericProps, HasAriaDisabled {
  * @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.
@@ -2175,13 +2263,9 @@ type BaseNavigationItemProps = {
     /** Mark as the current page link */
     isCurrentPage?: boolean;
 };
-/** Make `href` required when `as` is `a` */
-type RequiredLinkHref<E> = E extends 'a' ? {
-    href: string;
-} : Record<string, unknown>;
 declare const NavigationItem: (<E extends React.ElementType = "a">(props: React.PropsWithoutRef<React.ComponentProps<E>> & {
     as?: E | undefined;
-} & HasTheme & HasClassName & BaseNavigationItemProps & RequiredLinkHref<E> & React.ComponentProps<E> & {
+} & HasTheme & HasClassName & BaseNavigationItemProps & HasRequiredLinkHref<E> & React.ComponentProps<E> & {
     ref?: ComponentRef<E> | undefined;
 }) => React.JSX.Element) & {
     displayName: string;
@@ -3412,4 +3496,4 @@ declare const ThemeProvider: React.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, type ColorWithVariants, CommentBlock, type CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, type GenericProps, type GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, type HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, type HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, type TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, BACKSPACE_KEY_CODE, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, CSS_PREFIX, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, type ColorWithVariants, CommentBlock, type CommentBlockProps, CommentBlockVariant, DIALOG_TRANSITION_DURATION, DOWN_KEY_CODE, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, ENTER_KEY_CODE, ESCAPE_KEY_CODE, EXPANSION_PANEL_TRANSITION_DURATION, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Falsy, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, type GenericProps, type GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, type HasAriaLabelOrLabelledBy, type HasClassName, type HasCloseMode, type HasTheme, Heading, type HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, type HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, LEFT_KEY_CODE, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, NOTIFICATION_TRANSITION_DURATION, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, type Point, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, type Predicate, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RIGHT_KEY_CODE, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RectSize, SLIDESHOW_TRANSITION_DURATION, SPACE_KEY_CODE, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, TAB_KEY_CODE, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, type TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, UP_KEY_CODE, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type ValueOf, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };