@lumx/react 3.7.0 → 3.7.1-alpha.0

package/_internal/types.d.ts

@@ -309,5 +309,13 @@ declare const ThumbnailVariant: {
     readonly rounded: "rounded";
 };
 type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+    readonly cover: "cover";
+    readonly contain: "contain";
+};
+type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
 
-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, WhiteSpace as W, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailSize as i, ThumbnailVariant as j, HasClassName as k, HasAriaLabelOrLabelledBy as l, ComponentRef as m, GlobalSize as n, TypographyInterface as o, Color as p, Theme as q, TypographyTitleCustom as r, TypographyCustom as s, Callback as t, ThumbnailAspectRatio as u };
+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, WhiteSpace as W, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailObjectFit as i, ThumbnailSize as j, ThumbnailVariant as k, HasClassName as l, HasAriaLabelOrLabelledBy as m, ComponentRef as n, GlobalSize as o, TypographyInterface as p, Color as q, Theme as r, TypographyTitleCustom as s, TypographyCustom as t, Callback as u, ThumbnailAspectRatio as v };

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 ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailSize, j as ThumbnailVariant, k as HasClassName, l as HasAriaLabelOrLabelledBy, m as ComponentRef, n as GlobalSize, o as TypographyInterface } from './_internal/types.js';
-export { A as Alignment, g as AspectRatio, t as Callback, p as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, n as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, q as Theme, u as ThumbnailAspectRatio, i as ThumbnailSize, j as ThumbnailVariant, T as Typography, s as TypographyCustom, o as TypographyInterface, r as TypographyTitleCustom, c as VerticalAlignment, W as WhiteSpace } 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 ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, l as HasClassName, m as HasAriaLabelOrLabelledBy, n as ComponentRef, o as GlobalSize, p as TypographyInterface } from './_internal/types.js';
+export { A as Alignment, g as AspectRatio, u as Callback, q as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, o as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, r as Theme, v as ThumbnailAspectRatio, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, T as Typography, t as TypographyCustom, p as TypographyInterface, s as TypographyTitleCustom, c as VerticalAlignment, W as WhiteSpace } from './_internal/types.js';
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -929,7 +929,9 @@ interface FlagProps extends GenericProps, HasTheme {
     /** Icon to use before the label. */
     icon?: string;
     /** Text label of the flag. */
-    label: string;
+    label: React.ReactNode;
+    /** Enable text truncate on overflow */
+    truncate?: boolean;
 }
 /**
  * Flag component.
@@ -1293,6 +1295,8 @@ interface ThumbnailProps extends GenericProps, HasTheme {
     imgRef?: Ref<HTMLImageElement>;
     /** Set to true to force the display of the loading skeleton. */
     isLoading?: boolean;
+    /** Set how the image should fit when its aspect ratio is constrained */
+    objectFit?: ThumbnailObjectFit;
     /** Size variant of the component. */
     size?: ThumbnailSize;
     /** Image loading mode. */
@@ -1385,6 +1389,10 @@ interface InlineListProps extends GenericProps {
      * Typography variant.
      */
     typography?: Typography;
+    /**
+     * Activate line wrap on overflow.
+     */
+    wrap?: boolean;
 }
 /**
  * InlineList component.
@@ -1732,7 +1740,7 @@ declare const Navigation: React.ForwardRefExoticComponent<(Omit<React.ClassAttri
         as?: E | undefined;
     } & HasTheme & HasClassName & {
         icon?: string | undefined;
-        label: React.ReactNode; /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+        label: React.ReactNode;
         isCurrentPage?: boolean | undefined;
     } & (E extends "a" ? {
         href: string;

package/index.js

@@ -6938,7 +6938,7 @@ ExpansionPanel.displayName = COMPONENT_NAME$n;
 ExpansionPanel.className = CLASSNAME$k;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$i;
 
-const _excluded$p = ["label", "icon", "color", "className", "theme"];
+const _excluded$p = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$o = 'Flag';
 const CLASSNAME$l = getRootClassName(COMPONENT_NAME$o);
 const DEFAULT_PROPS$j = {
@@ -6958,21 +6958,27 @@ const Flag = /*#__PURE__*/forwardRef((props, ref) => {
       icon,
       color,
       className,
-      theme
+      theme,
+      truncate
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+  const isTruncated = !!truncate;
   return /*#__PURE__*/React.createElement("div", _extends({}, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$l,
-      color: flagColor
+      color: flagColor,
+      isTruncated
     })),
     ref: ref
   }), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: Size.xxs,
     className: `${CLASSNAME$l}__icon`
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    truncate: isTruncated,
+    typography: "overline",
     className: `${CLASSNAME$l}__label`
   }, label));
 });
@@ -7137,6 +7143,50 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
  */
 const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
 
+/** Empty object */
+
+const DEFAULT_VALUE = {};
+
+/**
+ * Tooltip react context simply used as a marker to know when parent react node have a tooltip
+ */
+const TooltipContext = /*#__PURE__*/React.createContext(undefined);
+const TooltipContextProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TooltipContext.Provider, {
+    value: DEFAULT_VALUE
+  }, children);
+};
+const useTooltipContext = () => React.useContext(TooltipContext);
+
+/**
+ * Compute a tooltip label based on a label element `innerText` if the text overflows.
+ *
+ * Warning: only works on first render, does not update on label element resize.
+ */
+const useOverflowTooltipLabel = () => {
+  const parentTooltip = useTooltipContext();
+  const [tooltipLabel, setTooltipLabel] = React.useState(undefined);
+  const labelRef = React.useCallback(labelElement => {
+    if (!labelElement || !!parentTooltip) {
+      // Skip if label element is unknown
+      // Skip if the parent has a tooltip
+      return;
+    }
+
+    // Label overflowing
+    if (labelElement.offsetWidth < labelElement.scrollWidth) {
+      setTooltipLabel(labelElement.innerText);
+    }
+  }, [parentTooltip]);
+  return {
+    labelRef,
+    tooltipLabel
+  };
+};
+
 const _excluded$s = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
@@ -7197,13 +7247,18 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
   const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && {
     '--lumx-text-white-space': whiteSpace
   };
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel();
   return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+    ref: useMergeRefs(ref, labelRef),
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$o,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
     }), typographyClass, colorClass, noWrap && `${CLASSNAME$o}--no-wrap`),
+    title: tooltipLabel,
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
   }, forwardedProps), children && Children.toArray(children).map((child, index) => {
     // Force wrap spaces around icons to make sure they are never stuck against text.
@@ -7686,7 +7741,7 @@ ImageBlock.displayName = COMPONENT_NAME$x;
 ImageBlock.className = CLASSNAME$u;
 ImageBlock.defaultProps = DEFAULT_PROPS$q;
 
-const _excluded$z = ["className", "color", "colorVariant", "typography", "children"];
+const _excluded$z = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7720,7 +7775,8 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       colorVariant,
       typography,
-      children
+      children,
+      wrap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$z);
   const fontColorClassName = color && getFontColorClassName(color, colorVariant);
@@ -7730,7 +7786,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     React.createElement("ul", _extends({}, forwardedProps, {
       ref: ref,
-      className: classnames(className, CLASSNAME$v, fontColorClassName, typographyClassName)
+      className: classnames(className, CLASSNAME$v, wrap && `${CLASSNAME$v}--wrap`, fontColorClassName, typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list"
@@ -8507,8 +8563,10 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$J);
   const theme = useContext(ThemeContext);
-  const [labelElement, setLabelElement] = useState(null);
-  const tooltipLabel = typeof label === 'string' && labelElement && labelElement.offsetWidth < labelElement.scrollWidth ? label : null;
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel();
   const buttonProps = Element === 'button' ? {
     type: 'button'
   } : {};
@@ -8536,7 +8594,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     as: "span",
     truncate: true,
     className: `${CLASSNAME$F}__label`,
-    ref: setLabelElement
+    ref: labelRef
   }, label))));
 }), {
   displayName: COMPONENT_NAME$I,
@@ -12761,7 +12819,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -12810,6 +12868,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       imgProps,
       imgRef: propImgRef,
       isLoading: isLoadingProp,
+      objectFit,
       loading,
       size,
       theme,
@@ -12865,6 +12924,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       hasIconErrorFallback,
       hasCustomErrorFallback,
       isLoading,
+      objectFit,
       hasBadge: !!badge
     }), fillHeight && `${CLASSNAME$1e}--fill-height`)
   }), /*#__PURE__*/React.createElement("span", {
@@ -12922,6 +12982,13 @@ const ThumbnailVariant = {
   squared: 'squared',
   rounded: 'rounded'
 };
+/**
+ * Thumbnail object fit.
+ */
+const ThumbnailObjectFit = {
+  cover: 'cover',
+  contain: 'contain'
+};
 
 const _excluded$1n = ["after", "before", "className", "label"];
 
@@ -13229,7 +13296,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = isActivated || forceOpen;
   const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedChildren, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContextProvider, null, wrappedChildren), isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(ref, setPopperElement, onPopperMount)
   }, forwardedProps, {
     id: id,
@@ -13498,5 +13565,5 @@ UserBlock.displayName = COMPONENT_NAME$1l;
 UserBlock.className = CLASSNAME$1i;
 UserBlock.defaultProps = DEFAULT_PROPS$13;
 
-export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
 //# sourceMappingURL=index.js.map