@lumx/react 3.0.6-alpha.2 → 3.0.7-alpha.0

package/_internal/types.d.ts

@@ -48,6 +48,23 @@ declare type Callback = () => void;
  * (excluding `NaN` as it can't be distinguished from `number`)
  */
 declare type Falsy = false | undefined | null | 0 | '';
+/**
+ * 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.
+ */
+declare 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;
+};
 
 /**
  * Alignments.
@@ -268,4 +285,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, Color as b, Callback as c, ColorPalette as d, VerticalAlignment as e, ColorVariant as f, TextElement as g, HeadingElement as h, AspectRatio as i, FocusPoint as j, ThumbnailSize as k, ThumbnailVariant as l, GlobalSize as m, TypographyInterface as n, Theme as o, TypographyTitleCustom as p, TypographyCustom as q, ThumbnailAspectRatio as r };
+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, Callback as c, VerticalAlignment as d, ColorVariant as e, TextElement as f, HeadingElement as g, AspectRatio as h, FocusPoint as i, ThumbnailSize as j, ThumbnailVariant as k, HasAriaLabelOrLabelledBy as l, GlobalSize as m, TypographyInterface as n, Color as o, Theme as p, TypographyTitleCustom as q, TypographyCustom as r, ThumbnailAspectRatio as s };

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 Color, E as Emphasis, V as ValueOf, c as Callback, d as ColorPalette, A as Alignment, e as VerticalAlignment, O as Orientation, f as ColorVariant, T as Typography, g as TextElement, h as HeadingElement, i as AspectRatio, F as Falsy, j as FocusPoint, k as ThumbnailSize, l as ThumbnailVariant, m as GlobalSize, n as TypographyInterface } from './_internal/types.js';
-export { A as Alignment, i as AspectRatio, c as Callback, b as Color, d as ColorPalette, f as ColorVariant, E as Emphasis, j as FocusPoint, G as GenericProps, m as GlobalSize, h as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, g as TextElement, o as Theme, r as ThumbnailAspectRatio, k as ThumbnailSize, l as ThumbnailVariant, T as Typography, q as TypographyCustom, n as TypographyInterface, p as TypographyTitleCustom, e 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, c as Callback, A as Alignment, d as VerticalAlignment, O as Orientation, e as ColorVariant, T as Typography, f as TextElement, g as HeadingElement, h as AspectRatio, F as Falsy, i as FocusPoint, j as ThumbnailSize, k as ThumbnailVariant, l as HasAriaLabelOrLabelledBy, m as GlobalSize, n as TypographyInterface } from './_internal/types.js';
+export { A as Alignment, h as AspectRatio, c as Callback, o as Color, b as ColorPalette, e as ColorVariant, E as Emphasis, i as FocusPoint, G as GenericProps, m as GlobalSize, g as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, f as TextElement, p as Theme, s as ThumbnailAspectRatio, j as ThumbnailSize, k as ThumbnailVariant, T as Typography, r as TypographyCustom, n as TypographyInterface, q as TypographyTitleCustom, d as VerticalAlignment } from './_internal/types.js';
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -261,7 +261,7 @@ interface BadgeProps extends GenericProps {
     /** Badge content. */
     children?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
 }
 /**
  * Badge component.
@@ -279,7 +279,7 @@ declare type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButton
 declare type ButtonSize = Extract<Size, 's' | 'm'>;
 interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Emphasis variant. */
     emphasis?: Emphasis;
     /** Whether or not the button has a background color in low emphasis. */
@@ -426,7 +426,7 @@ interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered before the content. */
     before?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
     /** Whether the component is disabled or not. */
@@ -771,6 +771,8 @@ interface PopoverProps extends GenericProps {
     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.
@@ -1176,7 +1178,7 @@ declare type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '
  */
 interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */
@@ -1401,7 +1403,7 @@ declare type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttribute
  */
 interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */
@@ -1640,6 +1642,20 @@ interface NotificationProps extends GenericProps, HasTheme {
  */
 declare const Notification: Comp<NotificationProps, HTMLDivElement>;
 
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+declare type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog
+ * * Has a dialog aria role
+ * * Sets a focus trap within the popover
+ * * Closes on click away and escape.
+ */
+declare const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement>;
+
 /**
  * Defines the props of the component.
  */
@@ -2710,4 +2726,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, 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, PopoverProps, PostBlock, PostBlockProps, Progress, 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, 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, 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 };