@lumx/react 3.1.5 → 3.2.1-alpha.0

package/_internal/types.d.ts

@@ -26,14 +26,16 @@ interface HasTheme {
      */
     theme?: Theme;
 }
-/**
- * Define a generic props types.
- */
-interface GenericProps {
+interface HasClassName {
     /**
      * Class name forwarded to the root element of the component.
      */
     className?: string;
+}
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
     /**
      * Any prop (particularly any supported prop for a HTML element).
      */
@@ -65,6 +67,15 @@ declare type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
     'aria-label': string;
     'aria-labelledby'?: undefined;
 };
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+declare 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;
 
 /**
  * Alignments.
@@ -285,4 +296,4 @@ declare const ThumbnailVariant: {
 };
 declare type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
 
-export { Alignment as A, Comp as C, Emphasis as E, Falsy as F, GenericProps as G, HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, ValueOf as V, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailSize as i, ThumbnailVariant as j, HasAriaLabelOrLabelledBy as k, GlobalSize as l, TypographyInterface as m, Color as n, Theme as o, TypographyTitleCustom as p, TypographyCustom as q, Callback as r, ThumbnailAspectRatio as s };
+export { Alignment as A, Comp as C, Emphasis as E, Falsy as F, GenericProps as G, HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, ValueOf as V, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailSize as i, ThumbnailVariant as j, HasClassName as k, HasAriaLabelOrLabelledBy as l, ComponentRef as m, GlobalSize as n, TypographyInterface as o, Color as p, Theme as q, TypographyTitleCustom as r, TypographyCustom as s, Callback as t, ThumbnailAspectRatio as u };

package/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, SyntheticEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, Ref, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
-import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailSize, j as ThumbnailVariant, k as HasAriaLabelOrLabelledBy, l as GlobalSize, m as TypographyInterface } from './_internal/types.js';
-export { A as Alignment, g as AspectRatio, r as Callback, n as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, l as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, o as Theme, s as ThumbnailAspectRatio, i as ThumbnailSize, j as ThumbnailVariant, T as Typography, q as TypographyCustom, m as TypographyInterface, p as TypographyTitleCustom, c as VerticalAlignment } from './_internal/types.js';
+import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailSize, j as ThumbnailVariant, k as HasClassName, l as HasAriaLabelOrLabelledBy, m as ComponentRef, n as GlobalSize, o as TypographyInterface } from './_internal/types.js';
+export { A as Alignment, g as AspectRatio, t as Callback, p as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, n as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, q as Theme, u as ThumbnailAspectRatio, i as ThumbnailSize, j as ThumbnailVariant, T as Typography, s as TypographyCustom, o as TypographyInterface, r as TypographyTitleCustom, c as VerticalAlignment } from './_internal/types.js';
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -978,7 +978,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "tiny" | "regular" | "medium" | "big" | "huge">;
+}, "big" | "tiny" | "regular" | "medium" | "huge">;
 declare type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -1653,6 +1653,47 @@ interface MosaicProps extends GenericProps, HasTheme {
  */
 declare const Mosaic: Comp<MosaicProps, HTMLDivElement>;
 
+interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'li'>, HasClassName {
+    /** Items inside the section */
+    children: ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: string | ReactNode;
+}
+
+declare type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasTheme & {
+    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+    children?: ReactNode;
+    orientation?: Orientation;
+} & HasAriaLabelOrLabelledBy;
+declare const Navigation: React.ForwardRefExoticComponent<Pick<NavigationProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLElement> | "theme"> & React.RefAttributes<HTMLElement>> & {
+    displayName: string;
+    className: string;
+    defaultProps: {
+        theme: "light";
+        orientation: "vertical";
+    };
+    Section: React.ForwardRefExoticComponent<NavigationSectionProps & React.RefAttributes<HTMLLIElement>> & {
+        displayName: string;
+        className: string;
+    };
+    Item: (<E extends React.ElementType<any> = "a">(props: React.PropsWithoutRef<React.ComponentProps<E>> & {
+        as?: E | undefined;
+    } & HasTheme & HasClassName & {
+        icon?: string | undefined;
+        label: React.ReactNode; /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+        isCurrentPage?: boolean | undefined;
+    } & (E extends "a" ? {
+        href: string;
+    } : Record<string, unknown>) & {
+        ref?: ComponentRef<E> | undefined;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
+        displayName: string;
+        className: string;
+    };
+};
+
 /**
  * Defines the props of the component.
  */
@@ -2797,4 +2838,4 @@ interface UserBlockProps extends GenericProps, HasTheme {
  */
 declare const UserBlock: Comp<UserBlockProps, HTMLDivElement>;
 
-export { AlertDialog, AlertDialogProps, Autocomplete, AutocompleteMultiple, AutocompleteMultipleProps, AutocompleteProps, Avatar, AvatarProps, AvatarSize, Badge, BadgeProps, BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, Checkbox, CheckboxProps, Chip, ChipGroup, ChipGroupProps, ChipProps, CommentBlock, CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerControlledProps, DatePickerField, DatePickerFieldProps, DatePickerProps, Dialog, DialogProps, DialogSizes, Divider, DividerProps, DragHandle, DragHandleProps, Dropdown, DropdownProps, Elevation, ExpansionPanel, ExpansionPanelProps, Flag, FlagProps, FlexBox, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, GenericBlock, GenericBlockGapSize, GenericBlockProps, Grid, GridColumn, GridColumnGapSize, GridColumnProps, GridItem, GridItemProps, GridProps, Heading, HeadingLevelProvider, HeadingLevelProviderProps, HeadingProps, Icon, IconButton, IconButtonProps, IconProps, IconSizes, ImageBlock, ImageBlockCaptionPosition, ImageBlockProps, ImageBlockSize, InlineList, InlineListProps, InputHelper, InputHelperProps, InputLabel, InputLabelProps, Lightbox, LightboxProps, Link, LinkPreview, LinkPreviewProps, LinkProps, List, ListDivider, ListDividerProps, ListItem, ListItemProps, ListItemSize, ListProps, ListSubheader, ListSubheaderProps, MarginAutoAlignment, Message, MessageProps, Mosaic, MosaicProps, Notification, NotificationProps, Offset, Placement, Popover, PopoverDialog, PopoverDialogProps, PopoverProps, PostBlock, PostBlockProps, Progress, ProgressCircular, ProgressCircularProps, ProgressCircularSize, ProgressLinear, ProgressLinearProps, ProgressProps, ProgressTracker, ProgressTrackerProps, ProgressTrackerProvider, ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, ProgressVariant, RadioButton, RadioButtonProps, RadioGroup, RadioGroupProps, Select, SelectMultiple, SelectMultipleField, SelectMultipleProps, SelectProps, SelectVariant, SideNavigation, SideNavigationItem, SideNavigationItemProps, SideNavigationProps, SkeletonCircle, SkeletonCircleProps, SkeletonRectangle, SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, SkeletonTypographyProps, Slider, SliderProps, Slides, SlidesProps, Slideshow, SlideshowControls, SlideshowControlsProps, SlideshowItem, SlideshowItemProps, SlideshowProps, Switch, SwitchProps, Tab, TabList, TabListLayout, TabListProps, TabPanel, TabPanelProps, TabProps, TabProvider, TabProviderProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableCellVariant, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, Text, TextField, TextFieldProps, TextProps, ThOrder, Thumbnail, ThumbnailProps, Toolbar, ToolbarProps, Tooltip, TooltipPlacement, TooltipProps, Uploader, UploaderProps, UploaderSize, UploaderVariant, UserBlock, UserBlockProps, UserBlockSize, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
+export { AlertDialog, AlertDialogProps, Autocomplete, AutocompleteMultiple, AutocompleteMultipleProps, AutocompleteProps, Avatar, AvatarProps, AvatarSize, Badge, BadgeProps, BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, Checkbox, CheckboxProps, Chip, ChipGroup, ChipGroupProps, ChipProps, CommentBlock, CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerControlledProps, DatePickerField, DatePickerFieldProps, DatePickerProps, Dialog, DialogProps, DialogSizes, Divider, DividerProps, DragHandle, DragHandleProps, Dropdown, DropdownProps, Elevation, ExpansionPanel, ExpansionPanelProps, Flag, FlagProps, FlexBox, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, GenericBlock, GenericBlockGapSize, GenericBlockProps, Grid, GridColumn, GridColumnGapSize, GridColumnProps, GridItem, GridItemProps, GridProps, Heading, HeadingLevelProvider, HeadingLevelProviderProps, HeadingProps, Icon, IconButton, IconButtonProps, IconProps, IconSizes, ImageBlock, ImageBlockCaptionPosition, ImageBlockProps, ImageBlockSize, InlineList, InlineListProps, InputHelper, InputHelperProps, InputLabel, InputLabelProps, Lightbox, LightboxProps, Link, LinkPreview, LinkPreviewProps, LinkProps, List, ListDivider, ListDividerProps, ListItem, ListItemProps, ListItemSize, ListProps, ListSubheader, ListSubheaderProps, MarginAutoAlignment, Message, MessageProps, Mosaic, MosaicProps, Navigation, NavigationProps, Notification, NotificationProps, Offset, Placement, Popover, PopoverDialog, PopoverDialogProps, PopoverProps, PostBlock, PostBlockProps, Progress, ProgressCircular, ProgressCircularProps, ProgressCircularSize, ProgressLinear, ProgressLinearProps, ProgressProps, ProgressTracker, ProgressTrackerProps, ProgressTrackerProvider, ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, ProgressVariant, RadioButton, RadioButtonProps, RadioGroup, RadioGroupProps, Select, SelectMultiple, SelectMultipleField, SelectMultipleProps, SelectProps, SelectVariant, SideNavigation, SideNavigationItem, SideNavigationItemProps, SideNavigationProps, SkeletonCircle, SkeletonCircleProps, SkeletonRectangle, SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, SkeletonTypographyProps, Slider, SliderProps, Slides, SlidesProps, Slideshow, SlideshowControls, SlideshowControlsProps, SlideshowItem, SlideshowItemProps, SlideshowProps, Switch, SwitchProps, Tab, TabList, TabListLayout, TabListProps, TabPanel, TabPanelProps, TabProps, TabProvider, TabProviderProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableCellVariant, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, Text, TextField, TextFieldProps, TextProps, ThOrder, Thumbnail, ThumbnailProps, Toolbar, ToolbarProps, Tooltip, TooltipPlacement, TooltipProps, Uploader, UploaderProps, UploaderSize, UploaderVariant, UserBlock, UserBlockProps, UserBlockSize, clamp, isClickable, useFocusPointStyle, useHeadingLevel };