@lumx/react 3.0.6-alpha.2 → 3.0.6

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, 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, HasAriaLabelOrLabelledBy as m, GlobalSize as n, TypographyInterface 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 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 HasAriaLabelOrLabelledBy, n as GlobalSize, o 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, n as GlobalSize, h as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, g as TextElement, p as Theme, s as ThumbnailAspectRatio, k as ThumbnailSize, l as ThumbnailVariant, T as Typography, r as TypographyCustom, o as TypographyInterface, q as TypographyTitleCustom, e as VerticalAlignment } from './_internal/types.js';
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -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.
@@ -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 };