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

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, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, WhiteSpace, AspectRatio, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1, Theme as Theme$1 } from '@lumx/core/js/constants';
+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, TextElement, HeadingElement, Falsy, HasClassName as HasClassName$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } 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';
 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';
@@ -416,6 +416,18 @@ declare const Kind: {
     readonly error: "error";
 };
 type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+type WhiteSpace = ValueOf<typeof WhiteSpace>;
 /**
  * See SCSS variable $lumx-color-palette
  */
@@ -475,12 +487,24 @@ interface GenericProps extends HasClassName {
 
 type JSXElement = boolean | number | string | React__default.JSX.Element | Iterable<JSXElement> | undefined | null;
 
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+
 /** Transform a string literal into kebab case */
 type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
 
 /** 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 {
@@ -1323,19 +1347,19 @@ declare const GenericBlock: GenericBlock;
 /**
  * Defines the props of the component.
  */
-interface TextProps extends GenericProps$1 {
+interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: ColorWithVariants$1;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
-    colorVariant?: ColorVariant$1;
+    colorVariant?: ColorVariant;
     /**
      * Typography variant.
      */
-    typography?: Typography$1;
+    typography?: Typography;
     /**
      * Custom component to render the text.
      */
@@ -1362,8 +1386,9 @@ interface TextProps extends GenericProps$1 {
     /**
      * Children
      */
-    children?: React.ReactNode;
+    children?: JSXElement;
 }
+
 /**
  * Text component.
  *
@@ -1380,7 +1405,7 @@ interface HeadingProps extends Partial<TextProps> {
     /**
      * Display a specific heading level instead of the one provided by parent context provider.
      */
-    as?: HeadingElement;
+    as?: HeadingElement$1;
     /**
      * Children
      */
@@ -1486,7 +1511,9 @@ interface GridColumnProps extends GenericProps$1 {
  */
 declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
 
-type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const ICON_SIZES: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];
+
+type IconSizes = ObjectValues<typeof ICON_SIZES>;
 /**
  * Defines the props of the component.
  */
@@ -1506,6 +1533,8 @@ interface IconProps extends GenericProps, HasTheme {
     size?: IconSizes;
     /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
     alt?: string;
+    /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
+    verticalAlign?: null | 'middle';
 }
 
 /**
@@ -1902,7 +1931,7 @@ interface LinkPreviewProps extends GenericProps$1, HasTheme$1 {
     /** Title. */
     title?: string;
     /** Customize the title heading tag. */
-    titleHeading?: HeadingElement;
+    titleHeading?: HeadingElement$1;
 }
 /**
  * LinkPreview component.
@@ -2664,12 +2693,23 @@ declare const Slider: Comp<SliderProps, HTMLDivElement>;
  */
 declare const clamp: (value: number, min: number, max: number) => number;
 
+/**
+ * Slide mode
+ */
+declare const SlideMode: {
+    /** Move slides with CSS transform translate */
+    readonly transformTranslate: "transform-translate";
+    /** Move slides native scroll snap (available only on supported browsers) */
+    readonly scrollSnap: "scroll-snap";
+};
+type SlideMode = ObjectValues$1<typeof SlideMode>;
+
 /**
  * Defines the props of the component.
  */
 interface SlideshowProps extends GenericProps$1, Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
-    /** Whether to use CSS transform or native scroll snap. */
-    mode?: 'transform' | 'scroll-snap';
+    /** Whether to use CSS transform translate or native scroll snap. */
+    slideMode?: SlideMode;
     /** current slide active */
     activeIndex?: SlidesProps['activeIndex'];
     /** Interval between each slide when automatic rotation is enabled. */
@@ -2846,10 +2886,10 @@ interface SlidesCommonProps extends GenericProps$1, HasTheme$1 {
     children?: React__default.ReactNode;
 }
 interface SlidesTransformProps extends SlidesCommonProps {
-    mode?: 'transform';
+    slideMode?: Extract<SlideMode, 'transform-translate'>;
 }
 interface SlidesScrollSnapProps extends SlidesCommonProps {
-    mode: 'scroll-snap';
+    slideMode: Extract<SlideMode, 'scroll-snap'>;
     onChange: (index: number) => void;
 }
 type SlidesProps = SlidesTransformProps | SlidesScrollSnapProps;

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -878,6 +878,41 @@ function resolveColorWithVariants(colorWithVariants, colorVariant) {
   return [color, colorVariant || baseColorVariant];
 }
 
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * color('font', undefined); // undefined
+ */
+function color(type, propColor, propColorVariant) {
+  const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-${type}-${cColor}-${cColorVariant}`;
+}
+
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+
 /**
  * Returns the classname associated to the given typography. For example, for Typography.title it returns
  * lumx-typography-title
@@ -1185,6 +1220,7 @@ const Icon$1 = props => {
     ref,
     theme,
     alt,
+    verticalAlign,
     ...forwardedProps
   } = props;
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
@@ -1221,7 +1257,8 @@ const Icon$1 = props => {
       hasShape,
       prefix: CLASSNAME$1b,
       theme,
-      size: iconSize
+      size: iconSize,
+      verticalAlign
     }), !hasShape && `${CLASSNAME$1b}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$1b}--has-dark-layer`, `${CLASSNAME$1b}--path`),
     children: /*#__PURE__*/jsx("svg", {
       "aria-hidden": alt ? undefined : 'true',
@@ -1230,7 +1267,7 @@ const Icon$1 = props => {
       height: "1em",
       preserveAspectRatio: "xMidYMid meet",
       style: {
-        verticalAlign: '-0.125em'
+        verticalAlign: verticalAlign ? undefined : '-0.125em'
       },
       viewBox: "0 0 24 24",
       width: "1em",
@@ -6540,6 +6577,10 @@ function wrapChildrenIconWithSpaces(children) {
   });
 }
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6556,25 +6597,21 @@ const CLASSNAME$V = 'lumx-text';
 const DEFAULT_PROPS$N = {};
 
 /**
- * Text component.
+ * Text component common props
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return Common Props
  */
-const Text = forwardRef((props, ref) => {
+const getTextProps = props => {
   const {
-    as: Component,
-    children,
     className,
     color,
     colorVariant,
     noWrap,
-    typography,
+    typography: typography$1,
     truncate,
     whiteSpace,
-    style,
-    ...forwardedProps
+    style
   } = props;
 
   // Truncate mode
@@ -6592,24 +6629,53 @@ const Text = forwardRef((props, ref) => {
   const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && {
     '--lumx-text-white-space': whiteSpace
   };
-  const {
-    tooltipLabel,
-    labelRef
-  } = useOverflowTooltipLabel(children);
-  return /*#__PURE__*/jsx(Component, {
-    ref: useMergeRefs(ref, labelRef),
-    className: classNames.join(className, handleBasicClasses({
+  return {
+    className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$V,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
-    }), typography && classNames.typography(typography), color && classNames.font(color, colorVariant), noWrap && `${CLASSNAME$V}--no-wrap`),
-    title: tooltipLabel,
+    }), typography$1 && typography(typography$1), color && font(color, colorVariant), noWrap && `${CLASSNAME$V}--no-wrap`),
     style: {
       ...truncateLinesStyle,
       ...whiteSpaceStyle,
       ...style
-    },
+    }
+  };
+};
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Text = forwardRef((props, ref) => {
+  const {
+    as: Component,
+    children,
+    color,
+    colorVariant,
+    noWrap,
+    typography,
+    truncate,
+    whiteSpace,
+    ...forwardedProps
+  } = props;
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel(children);
+  const {
+    className,
+    style
+  } = React__default.useMemo(() => getTextProps(props), [props]);
+  return /*#__PURE__*/jsx(Component, {
+    ref: useMergeRefs(ref, labelRef),
+    title: tooltipLabel,
     ...forwardedProps,
+    className: className,
+    style: style,
     children: wrapChildrenIconWithSpaces(children)
   });
 });
@@ -11037,6 +11103,16 @@ const PAGINATION_ITEMS_MAX = 5;
  */
 const PAGINATION_ITEM_SIZE = 12;
 
+/**
+ * Slide mode
+ */
+const SlideMode = {
+  /** Move slides with CSS transform translate */
+  transformTranslate: 'transform-translate',
+  /** Move slides native scroll snap (available only on supported browsers) */
+  scrollSnap: 'scroll-snap'
+};
+
 const DEFAULT_OPTIONS = {
   activeIndex: 0,
   groupBy: 1,
@@ -11213,6 +11289,11 @@ const useFocusWithin = ({
   }, [onFocusIn, element, onFocusOut]);
 };
 
+/** Check if browser supports CSS scroll-snap */
+function isScrollSnapSupported() {
+  return WINDOW?.CSS?.supports?.('scroll-snap-type', 'x mandatory') ?? false;
+}
+
 /**
  * Classname set on elements whose focus was blocked.
  * This is to easily find elements that have been tempered with,
@@ -11351,7 +11432,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
  */
 const DEFAULT_PROPS$j = {
   ...DEFAULT_OPTIONS,
-  mode: 'transform'
+  slideMode: SlideMode.transformTranslate
 };
 
 /**
@@ -11377,7 +11458,7 @@ const Slideshow = forwardRef((props, ref) => {
     id,
     slidesId,
     slideGroupLabel,
-    mode = DEFAULT_PROPS$j.mode,
+    slideMode = DEFAULT_PROPS$j.slideMode,
     ...forwardedProps
   } = props;
   // Number of slideshow items.
@@ -11414,9 +11495,21 @@ const Slideshow = forwardRef((props, ref) => {
     onFocusOut: startAutoPlay
   });
   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
+    };
+  }
   return /*#__PURE__*/jsx(Slides, {
-    mode: mode,
-    onChange: mode === 'scroll-snap' ? onPaginationClick : undefined,
+    ...slideModeProps,
     activeIndex: currentIndex,
     id: slideshowId,
     className: className,
@@ -11832,7 +11925,7 @@ const CLASSNAME$e = 'lumx-slideshow';
  * Component default props.
  */
 const DEFAULT_PROPS$h = {
-  mode: 'transform'
+  slideMode: SlideMode.transformTranslate
 };
 
 /**
@@ -11858,24 +11951,36 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
-    mode = DEFAULT_PROPS$h.mode,
+    slideMode = DEFAULT_PROPS$h.slideMode,
     onChange,
     ...forwardedProps
   } = props;
   const wrapperRef = React__default.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
+
+  // Only enable scroll-snap if requested and browser supports it
+  const isScrollSnapEnabled = slideMode === SlideMode.scrollSnap && isScrollSnapSupported();
   useSlideScroll({
     activeIndex,
-    enabled: mode === 'scroll-snap',
+    enabled: isScrollSnapEnabled,
     wrapperRef,
     onChange
   });
-
-  // Inline style of wrapper element.
-  const wrapperStyle = mode === 'transform' ? {
-    transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
-  } : undefined;
+  let wrapperProps;
+  if (isScrollSnapEnabled) {
+    // Make scroll zone focusable (a11y recommendation)
+    wrapperProps = {
+      tabIndex: 0
+    };
+  } else {
+    // Transform translate to display the current slide
+    wrapperProps = {
+      style: {
+        transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
+      }
+    };
+  }
   const groups = React__default.useMemo(() => {
     const childrenArray = Children.toArray(children);
     return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
@@ -11900,8 +12005,8 @@ const Slides = forwardRef((props, ref) => {
       "aria-live": isAutoPlaying ? 'off' : 'polite',
       children: /*#__PURE__*/jsx("div", {
         ref: wrapperRef,
-        className: `${CLASSNAME$e}__wrapper ${CLASSNAME$e}__wrapper--mode-${mode}`,
-        style: wrapperStyle,
+        className: classNames.join(`${CLASSNAME$e}__wrapper`, isScrollSnapEnabled && `${CLASSNAME$e}__wrapper--${slideMode}`),
+        ...wrapperProps,
         children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
           id: slidesId && buildSlideShowGroupId(slidesId, index),
           role: hasControls ? 'tabpanel' : 'group',
@@ -13860,18 +13965,15 @@ const UserBlock = forwardRef((props, ref) => {
       ...nProps,
       children: /*#__PURE__*/jsx(Text, {
         as: "span",
-        truncate: true,
         children: name
       })
     });
   }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   const shouldDisplayFields = componentSize !== Size$1.s && componentSize !== Size$1.xs;
-  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx(InlineList, {
+  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
     className: `${CLASSNAME}__fields`,
-    wrap: true,
     children: fields.map((field, idx) => /*#__PURE__*/jsx(Text, {
       as: "span",
-      truncate: true,
       className: `${CLASSNAME}__field`,
       children: field
     }, idx))