@lumx/react 3.13.3-alpha.0 → 3.13.3-alpha.1

package/index.d.ts

@@ -90,24 +90,6 @@ type TextElement = 'span' | 'p' | HeadingElement;
 /** Get types of the values of a record. */
 type ValueOf<T extends Record<any, any>> = T[keyof T];
 
-/**
- * Alignments.
- */
-declare const Alignment: {
-    readonly bottom: "bottom";
-    readonly center: "center";
-    readonly end: "end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly spaceAround: "space-around";
-    readonly spaceBetween: "space-between";
-    readonly spaceEvenly: "space-evenly";
-    readonly start: "start";
-    readonly top: "top";
-};
-type Alignment = ValueOf<typeof Alignment>;
-type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
-type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 /**
  * See SCSS variable $lumx-color-palette
  */
@@ -139,6 +121,27 @@ declare const ColorVariant: {
     readonly N: "N";
 };
 type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 declare const Theme: {
     readonly light: "light";
     readonly dark: "dark";
@@ -514,7 +517,7 @@ declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivEleme
 /**
  * Avatar sizes.
  */
-type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
@@ -1398,7 +1401,7 @@ interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -1563,7 +1566,7 @@ type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
  */
 interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */
@@ -1816,7 +1819,7 @@ interface InlineListProps extends GenericProps {
     /**
      * Text color.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -1919,7 +1922,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */
@@ -3391,4 +3394,4 @@ declare const ThemeProvider: React.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, CommentBlock, type CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, type GenericProps, type GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, type HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, type HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, type TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, type AlertDialogProps, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, type AutocompleteMultipleProps, type AutocompleteProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BadgeWrapper, type BadgeWrapperProps, type BaseButtonProps, Button, ButtonEmphasis, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type Callback, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type Color, ColorPalette, ColorVariant, type ColorWithVariants, CommentBlock, type CommentBlockProps, CommentBlockVariant, DatePicker, DatePickerControlled, type DatePickerControlledProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, Dialog, type DialogProps, type DialogSizes, Divider, type DividerProps, DragHandle, type DragHandleProps, Dropdown, type DropdownProps, type Elevation, Emphasis, ExpansionPanel, type ExpansionPanelProps, Flag, type FlagProps, FlexBox, type FlexBoxProps, type FlexHorizontalAlignment, type FlexVerticalAlignment, type FocusPoint, type GapSize, GenericBlock, GenericBlockGapSize, type GenericBlockProps, type GenericProps, type GlobalSize, Grid, GridColumn, type GridColumnGapSize, type GridColumnProps, GridItem, type GridItemProps, type GridProps, Heading, type HeadingElement, HeadingLevelProvider, type HeadingLevelProviderProps, type HeadingProps, type HorizontalAlignment, Icon, IconButton, type IconButtonProps, type IconProps, type IconSizes, ImageBlock, ImageBlockCaptionPosition, type ImageBlockProps, type ImageBlockSize, ImageLightbox, type ImageLightboxProps, InlineList, type InlineListProps, InputHelper, type InputHelperProps, InputLabel, type InputLabelProps, Kind, Lightbox, type LightboxProps, Link, LinkPreview, type LinkPreviewProps, type LinkProps, List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, type MarginAutoAlignment, Message, type MessageProps, Mosaic, type MosaicProps, Navigation, type NavigationProps, Notification, type NotificationProps, type Offset, Orientation, Placement, Popover, PopoverDialog, type PopoverDialogProps, type PopoverProps, PostBlock, type PostBlockProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressCircularSize, ProgressLinear, type ProgressLinearProps, type ProgressProps, ProgressTracker, type ProgressTrackerProps, ProgressTrackerProvider, type ProgressTrackerProviderProps, ProgressTrackerStep, ProgressTrackerStepPanel, type ProgressTrackerStepPanelProps, type ProgressTrackerStepProps, ProgressVariant, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, Select, SelectMultiple, SelectMultipleField, type SelectMultipleProps, type SelectProps, SelectVariant, SideNavigation, SideNavigationItem, type SideNavigationItemProps, type SideNavigationProps, Size, SkeletonCircle, type SkeletonCircleProps, SkeletonRectangle, type SkeletonRectangleProps, SkeletonRectangleVariant, SkeletonTypography, type SkeletonTypographyProps, Slider, type SliderProps, Slides, type SlidesProps, Slideshow, SlideshowControls, type SlideshowControlsProps, SlideshowItem, type SlideshowItemProps, type SlideshowProps, Switch, type SwitchProps, Tab, TabList, TabListLayout, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabProvider, type TabProviderProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableCellVariant, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Text, type TextElement, TextField, type TextFieldProps, type TextProps, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, type ThumbnailProps, type ThumbnailSize, ThumbnailVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, type UploaderProps, type UploaderSize, UploaderVariant, UserBlock, type UserBlockProps, type UserBlockSize, type VerticalAlignment, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };

package/index.js

@@ -98,21 +98,6 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
-/**
- * Alignments.
- */
-const Alignment = {
-  bottom: 'bottom',
-  center: 'center',
-  end: 'end',
-  left: 'left',
-  right: 'right',
-  spaceAround: 'space-around',
-  spaceBetween: 'space-between',
-  spaceEvenly: 'space-evenly',
-  start: 'start',
-  top: 'top'
-};
 /**
  * See SCSS variable $lumx-color-palette
  */
@@ -141,6 +126,24 @@ const ColorVariant = {
   L6: 'L6',
   N: 'N'
 };
+
+/** ColorPalette with all possible color variant combination */
+
+/**
+ * Alignments.
+ */
+const Alignment = {
+  bottom: 'bottom',
+  center: 'center',
+  end: 'end',
+  left: 'left',
+  right: 'right',
+  spaceAround: 'space-around',
+  spaceBetween: 'space-between',
+  spaceEvenly: 'space-evenly',
+  start: 'start',
+  top: 'top'
+};
 const Theme = {
   light: 'light',
   dark: 'dark'
@@ -250,10 +253,6 @@ const WhiteSpace = {
   'break-spaces': 'break-spaces'
 };
 
-/**
- * Re-exporting some utils types.
- */
-
 var classnames = {exports: {}};
 
 /*!
@@ -576,12 +575,20 @@ const getTypographyClassName = typography => {
 
 /**
  * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
  */
-const getFontColorClassName = function (color) {
-  let colorVariant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorVariant.N;
+function fontColorClass(propColor, propColorVariant) {
+  if (!propColor) return undefined;
+  const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
   return `lumx-color-font-${color}-${colorVariant}`;
-};
+}
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
 
 let i = 0;
 
@@ -5404,9 +5411,11 @@ const IconButton = forwardRef((props, ref) => {
     // no need to set alt as an aria-label is already set on the button
     alt: "",
     src: image
-  }) : /*#__PURE__*/React__default.createElement(Icon, {
+  }) : /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon
-  })));
+  }))));
 });
 IconButton.displayName = COMPONENT_NAME$19;
 IconButton.className = CLASSNAME$17;
@@ -7179,7 +7188,10 @@ const ExpansionPanel = forwardRef((props, ref) => {
   useEffect(() => {
     const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
     setMaxHeight(`${height}px`);
-  }, [children, isOpen]);
+  }, [isOpen]);
+  const onTransitionEnd = React__default.useCallback(() => {
+    setMaxHeight(undefined);
+  }, []);
   return /*#__PURE__*/React__default.createElement("section", _extends({
     ref: ref
   }, forwardedProps, {
@@ -7202,7 +7214,8 @@ const ExpansionPanel = forwardRef((props, ref) => {
     className: `${CLASSNAME$Z}__wrapper`,
     style: {
       maxHeight
-    }
+    },
+    onTransitionEnd: onTransitionEnd
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$Z}__container`,
     ref: wrapperRef
@@ -7520,7 +7533,6 @@ const Text = forwardRef((props, ref) => {
       style
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$_);
-  const colorClass = color && getFontColorClassName(color, colorVariant);
   const typographyClass = typography && getTypographyClassName(typography);
 
   // Truncate mode
@@ -7548,7 +7560,7 @@ const Text = forwardRef((props, ref) => {
       prefix: CLASSNAME$V,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
-    }), typographyClass, colorClass, noWrap && `${CLASSNAME$V}--no-wrap`),
+    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$V}--no-wrap`),
     title: tooltipLabel,
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
   }, forwardedProps), wrapChildrenIconWithSpaces(children));
@@ -7854,8 +7866,8 @@ const Icon = forwardRef((props, ref) => {
   const defaultTheme = useTheme();
   const {
       className,
-      color,
-      colorVariant,
+      color: propColor,
+      colorVariant: propColorVariant,
       hasShape,
       icon,
       size,
@@ -7863,6 +7875,7 @@ const Icon = forwardRef((props, ref) => {
       alt
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$V);
+  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
   // Color
   let iconColor = color;
@@ -7920,9 +7933,10 @@ Icon.defaultProps = DEFAULT_PROPS$F;
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
+  const defaultTheme = useTheme();
   const {
     baseClassName,
-    theme,
+    theme = defaultTheme,
     as = 'figcaption',
     title,
     titleProps,
@@ -8457,7 +8471,6 @@ const ImageSlideshow = _ref => {
   const description = (_images$activeIndex2 = images[activeIndex]) === null || _images$activeIndex2 === void 0 ? void 0 : _images$activeIndex2.description;
   const tags = (_images$activeIndex3 = images[activeIndex]) === null || _images$activeIndex3 === void 0 ? void 0 : _images$activeIndex3.tags;
   const metadata = title || description || tags ? /*#__PURE__*/React__default.createElement(ImageCaption, {
-    theme: "dark",
     as: "div",
     title: title,
     description: description,
@@ -8467,7 +8480,6 @@ const ImageSlideshow = _ref => {
 
   // Slideshow controls
   const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/React__default.createElement(SlideshowControls, _extends({
-    theme: "dark",
     activeIndex: activeIndex,
     slidesCount: slidesCount,
     onNextClick: onNextClick,
@@ -8504,12 +8516,10 @@ const ImageSlideshow = _ref => {
     if (typeof activeIndex === 'number') setScale(undefined);
   }, [activeIndex]);
   const zoomControls = zoomEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomInButtonProps, {
-    theme: "dark",
     emphasis: "low",
     icon: mdiMagnifyPlusOutline,
     onClick: zoomIn
   })), /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomOutButtonProps, {
-    theme: "dark",
     emphasis: "low",
     isDisabled: !scale || scale <= 1,
     icon: mdiMagnifyMinusOutline,
@@ -8527,7 +8537,6 @@ const ImageSlideshow = _ref => {
   }), [images, activeImageRef]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slides, {
     activeIndex: activeIndex,
-    theme: "dark",
     slideGroupLabel: slideGroupLabel,
     fillHeight: true,
     id: slideshowId,
@@ -8793,6 +8802,8 @@ const Inner = forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
     childrenRefs: clickAwayChildrenRefs,
     callback: onClickAway
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: "dark"
   }, /*#__PURE__*/React__default.createElement(ImageSlideshow, {
     activeImageIndex: activeImageIndex,
     slideGroupLabel: slideGroupLabel,
@@ -8803,7 +8814,7 @@ const Inner = forwardRef((props, ref) => {
     footerRef: footerRef,
     activeImageRef: useMergeRefs(propImageRef, imageRef),
     currentPaginationItemRef: currentPaginationItemRef
-  })));
+  }))));
 });
 Inner.displayName = COMPONENT_NAME$O;
 Inner.className = CLASSNAME$O;
@@ -8857,14 +8868,13 @@ const InlineList = forwardRef((props, ref) => {
       wrap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$R);
-  const fontColorClassName = color && getFontColorClassName(color, colorVariant);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     React__default.createElement("ul", _extends({}, forwardedProps, {
       ref: ref,
-      className: classNames(className, CLASSNAME$N, wrap && `${CLASSNAME$N}--wrap`, fontColorClassName, typographyClassName)
+      className: classNames(className, CLASSNAME$N, wrap && `${CLASSNAME$N}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list"
@@ -9108,8 +9118,8 @@ const Link = forwardRef((props, ref) => {
   const {
       children,
       className,
-      color,
-      colorVariant,
+      color: propColor,
+      colorVariant: propColorVariant,
       disabled,
       isDisabled = disabled,
       href,
@@ -9120,6 +9130,7 @@ const Link = forwardRef((props, ref) => {
       typography
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
+  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
   const isLink = linkAs || href;
   const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
   const baseProps = {};