@lumx/react 4.1.1-alpha.4 → 4.1.1-alpha.6

package/index.d.ts

@@ -1,7 +1,7 @@
 import { Kind as Kind$1, HorizontalAlignment, Size as Size$1, ColorPalette as ColorPalette$1, VerticalAlignment, Alignment, Orientation, AspectRatio, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1, Theme as Theme$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HeadingElement as HeadingElement$1, Falsy, HasClassName as HasClassName$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy, ObjectValues as ObjectValues$1 } from '@lumx/core/js/types';
+import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HeadingElement as HeadingElement$1, Falsy, HasClassName as HasClassName$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType, ComponentProps } from 'react';
@@ -499,12 +499,6 @@ type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T>
 /** Transform the component name into the lumx class name. */
 type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
 
-/**
- * Returns a union type of the given generic values.
- *
- */
-type ObjectValues<T> = T[keyof T];
-
 type Booleanish = boolean | 'true' | 'false';
 
 interface HasAriaDisabled {
@@ -1513,7 +1507,7 @@ declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
 
 declare const ICON_SIZES: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];
 
-type IconSizes = ObjectValues<typeof ICON_SIZES>;
+type IconSizes = (typeof ICON_SIZES)[number];
 /**
  * Defines the props of the component.
  */
@@ -2702,7 +2696,7 @@ declare const SlideMode: {
     /** Move slides native scroll snap (available only on supported browsers) */
     readonly scrollSnap: "scroll-snap";
 };
-type SlideMode = ObjectValues$1<typeof SlideMode>;
+type SlideMode = ValueOf<typeof SlideMode>;
 
 /**
  * Defines the props of the component.
@@ -2856,7 +2850,7 @@ declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> &
     };
 };
 
-interface SlidesCommonProps extends GenericProps$1, HasTheme$1 {
+interface SlidesProps extends GenericProps$1, HasTheme$1 {
     /** current slide active */
     activeIndex: number;
     /** slides id to be added to the wrapper */
@@ -2882,17 +2876,13 @@ interface SlidesCommonProps extends GenericProps$1, HasTheme$1 {
      * Receives the group position starting from 1 and the total number of groups.
      * */
     slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
+    /** Whether to use CSS transform translate or native scroll snap. */
+    slideMode?: SlideMode;
+    /** On slide change (only triggered on scroll when slideMode=scroll-snap) */
+    onChange?(index: number): void;
     /** Children */
     children?: React__default.ReactNode;
 }
-interface SlidesTransformProps extends SlidesCommonProps {
-    slideMode?: Extract<SlideMode, 'transform-translate'>;
-}
-interface SlidesScrollSnapProps extends SlidesCommonProps {
-    slideMode: Extract<SlideMode, 'scroll-snap'>;
-    onChange: (index: number) => void;
-}
-type SlidesProps = SlidesTransformProps | SlidesScrollSnapProps;
 /**
  * Slides component.
  *
@@ -3409,4 +3399,4 @@ declare const ThemeProvider: React__default.FC<{
 declare function useTheme(): ThemeContextValue;
 
 export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesCommonProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };

package/index.js

@@ -11496,20 +11496,11 @@ const Slideshow = forwardRef((props, ref) => {
   });
   const showControls = slideshowControlsProps && slidesCount > 1;
 
-  // Slide mode props switch
-  let slideModeProps;
-  if (slideMode === SlideMode.scrollSnap && isScrollSnapSupported()) {
-    slideModeProps = {
-      slideMode,
-      onChange: onPaginationClick
-    };
-  } else {
-    slideModeProps = {
-      slideMode: SlideMode.transformTranslate
-    };
-  }
+  // Only enable scroll-snap if requested and browser supports it
+  const isScrollsnapEnabled = slideMode === SlideMode.scrollSnap && isScrollSnapSupported();
   return /*#__PURE__*/jsx(Slides, {
-    ...slideModeProps,
+    slideMode: slideMode,
+    onChange: isScrollsnapEnabled ? onPaginationClick : undefined,
     activeIndex: currentIndex,
     id: slideshowId,
     className: className,