@lumx/react 3.7.5 → 3.7.6-alpha.1

package/index.d.ts

@@ -1321,6 +1321,19 @@ interface ThumbnailProps extends GenericProps, HasTheme {
  */
 declare const Thumbnail: Comp<ThumbnailProps>;
 
+type ImageCaptionMetadata = {
+    /** Image title to display in the caption. */
+    title?: string;
+    /** Image description. Can be either a string, or sanitized html. */
+    description?: string | {
+        __html: string;
+    };
+    /** Tag content. */
+    tags?: ReactNode;
+    /** Caption custom CSS style. */
+    captionStyle?: CSSProperties;
+};
+
 /**
  * Image block variants.
  */
@@ -1336,7 +1349,7 @@ type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-interface ImageBlockProps extends GenericProps, HasTheme {
+interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Alignment. */
@@ -1345,24 +1358,14 @@ interface ImageBlockProps extends GenericProps, HasTheme {
     alt: string;
     /** Caption position. */
     captionPosition?: ImageBlockCaptionPosition;
-    /** Caption custom CSS style. */
-    captionStyle?: CSSProperties;
-    /** Image description. Can be either a string, or sanitized html. */
-    description?: string | {
-        __html: string;
-    };
     /** Whether the image has to fill its container height or not. */
     fillHeight?: boolean;
     /** Image URL. */
     image: string;
     /** Size variant. */
     size?: ImageBlockSize;
-    /** Tag content. */
-    tags?: ReactNode;
     /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
-    /** Image title to display in the caption. */
-    title?: string;
 }
 /**
  * ImageBlock component.
@@ -1373,6 +1376,67 @@ interface ImageBlockProps extends GenericProps, HasTheme {
  */
 declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
 
+type InheritedSlideShowProps = Pick<SlideshowProps, 'activeIndex' | 'slideshowControlsProps' | 'slideGroupLabel'>;
+interface ZoomProps {
+    /** */
+    zoomInButtonProps?: IconButtonProps;
+    zoomOutButtonProps?: IconButtonProps;
+}
+type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef'>;
+type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
+type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
+interface ImagesProps {
+    /** Index of the active thumbnail to show on open */
+    activeImageIndex?: number;
+    /** List of images to display */
+    images: Array<ImageProps>;
+    /** Ref of the active image when the lightbox is open */
+    activeImageRef?: React.Ref<HTMLImageElement>;
+}
+type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps'>;
+type InheritedAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * ImageLightbox component props
+ */
+interface ImageLightboxProps extends HasClassName, ZoomProps, ImagesProps, InheritedSlideShowProps, InheritedLightboxProps, InheritedAriaAttributes, ForwardedProps {
+}
+
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+type ManagedProps = Pick<ImageLightboxProps, 'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'>;
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param images Images to display in the image lightbox
+ */
+declare function useImageLightbox(images?: ImageLightboxProps['images']): {
+    /**
+     * Generates trigger props
+     * @param index Provide an index to choose which image to display when the image lightbox opens.
+     * */
+    getTriggerProps: (index?: number) => {
+        onClick: React.MouseEventHandler;
+        ref: React.Ref<any>;
+    };
+    /** Props to forward to the ImageLightbox */
+    imageLightboxProps: ManagedProps;
+};
+
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ImageLightbox: Comp<ImageLightboxProps, HTMLDivElement> & {
+    useImageLightbox: typeof useImageLightbox;
+};
+
 /**
  * Defines the props of the component.
  */
@@ -2912,4 +2976,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, 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 };
+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, ImageLightbox, ImageLightboxProps, 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 };