@telus-uds/components-base 3.3.0 → 3.5.0

package/lib/esm/ActivityIndicator/Spinner.native.js

@@ -1,144 +1,124 @@
 import React from 'react';
+import View from "react-native-web/dist/exports/View";
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import Svg, { Circle } from 'react-native-svg';
+import { DURATION, SVG_CIRCUMFERENCE, SVG_SIZE, SVG_CENTER, SPINNER_RADIUS, SPINNER_DASHARRAY_HALF, SPINNER_DASHARRAY_MIN, SPINNER_DASHOFFSET_FACTOR, propTypes } from './shared';
 import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ea = MIN_EMPTY_ANGLE / 2;
-const sa = MIN_STROKE_ANGLE / 2;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
+    indicatorBackgroundColor,
     thickness,
     label,
     isStatic = false
   } = _ref;
-  const {
-    current: timer
-  } = React.useRef(new Animated.Value(0));
   const {
     reduceMotionEnabled
   } = useA11yInfo();
   const reduceMotion = reduceMotionEnabled || isStatic;
-  React.useLayoutEffect(() => {
-    const loop = Animated.timing(timer, {
+
+  // Animated value between 0..1 that will loop
+  const progress = React.useRef(new Animated.Value(0)).current;
+
+  // Local state to force re-render on each frame
+  const [progressVal, setProgressVal] = React.useState(0);
+  React.useEffect(() => {
+    if (reduceMotion) {
+      progress.stopAnimation(() => {
+        progress.setValue(0);
+        setProgressVal(0);
+      });
+      return undefined;
+    }
+    const id = progress.addListener(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      setProgressVal(value);
+    });
+    Animated.loop(Animated.timing(progress, {
+      toValue: 1,
       duration: DURATION,
       easing: Easing.linear,
-      // Animated.loop does not work if useNativeDriver is true on web
-      useNativeDriver: true,
-      toValue: 1,
+      useNativeDriver: false,
       isInteraction: false
-    });
-    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotion]);
-  const frames = 60 * DURATION / 1000;
-  const easing = Easing.bezier(...BEZIER);
-  const containerStyle = {
-    width: size,
-    height: size / (reduceMotion ? 1.5 : 2),
-    overflow: 'hidden'
-  };
-  const animationFrequency = reduceMotion ? [0] : [0, 1];
+    })).start();
+    return () => {
+      progress.removeListener(id);
+      progress.stopAnimation();
+    };
+  }, [progress, reduceMotion]);
 
-  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  /* The same logic used in Wweb keyframes:
+  - rotation from -90° base plus 0..183° => -90..93
+  - dasharray from 1% -> 50% -> 1%
+  - dashoffset from 0 -> 0 -> -49%
+  */
+
+  // 1) rotation (0->183) plus base offset -90
+  const rotationDeg = -90 + 183 * progressVal; // -90..+93
+
+  // strokeDasharray
+  let dashArrayVisible;
+  if (progressVal < SPINNER_DASHARRAY_HALF) {
+    const segmentProgress = progressVal / SPINNER_DASHARRAY_HALF;
+    dashArrayVisible = SPINNER_DASHARRAY_MIN + (SPINNER_DASHARRAY_HALF - SPINNER_DASHARRAY_MIN) * segmentProgress;
+  } else {
+    const segmentProgress = (progressVal - SPINNER_DASHARRAY_HALF) / SPINNER_DASHARRAY_HALF;
+    dashArrayVisible = SPINNER_DASHARRAY_HALF + (SPINNER_DASHARRAY_MIN - SPINNER_DASHARRAY_HALF) * segmentProgress;
+  }
+  const visibleLength = dashArrayVisible * SVG_CIRCUMFERENCE;
+  const invisibleLength = SVG_CIRCUMFERENCE - visibleLength;
+  const strokeDasharray = `${visibleLength},${invisibleLength}`;
+
+  // strokeDashoffset
+  let strokeDashoffset = 0;
+  if (progressVal > SPINNER_DASHARRAY_HALF) {
+    const segmentProgress = (progressVal - SPINNER_DASHARRAY_HALF) / SPINNER_DASHARRAY_HALF;
+    strokeDashoffset = -SPINNER_DASHOFFSET_FACTOR * SVG_CIRCUMFERENCE * segmentProgress;
+  }
+  const strokeWidth = thickness * SVG_SIZE / size;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [styles.container],
+    style: {
+      width: size,
+      height: size
+    },
     accessible: true,
     accessibilityLabel: label,
     accessibilityRole: "progressbar",
     accessibilityState: {
       busy: true
     },
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [{
-        width: size,
-        height: size
-      }],
-      collapsable: false,
-      children: animationFrequency.map(index => {
-        const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
-        const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-          let progress = 2 * frameIndex / (frames - 1);
-          const rotation = index ? +(360 - sa) : -(180 - sa);
-          if (progress > 1.0) {
-            progress = 2.0 - progress;
-          }
-          const direction = index ? -1 : +1;
-          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
-        });
-        const layerStyle = {
-          width: size,
-          height: size
-        };
-        const viewportStyle = {
-          width: size,
-          height: size
-        };
-        if (!reduceMotion) {
-          layerStyle.transform = [{
-            rotate: timer.interpolate({
-              inputRange: [0, 1],
-              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
-            })
-          }];
-          viewportStyle.transform = [{
-            translateY: index ? -size / 2 : 0
-          }, {
-            rotate: timer.interpolate({
-              inputRange,
-              outputRange
-            })
-          }];
-        }
-        const offsetStyle = index ? {
-          top: size / 2
-        } : null;
-        const lineStyle = {
-          width: size,
-          height: size,
-          borderColor: color,
-          borderWidth: thickness,
-          borderRadius: size / 2
-        };
-        return /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.layer],
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: layerStyle,
-            children: /*#__PURE__*/_jsx(Animated.View, {
-              style: [containerStyle, offsetStyle],
-              collapsable: false,
-              children: /*#__PURE__*/_jsx(Animated.View, {
-                style: viewportStyle,
-                children: /*#__PURE__*/_jsx(Animated.View, {
-                  style: containerStyle,
-                  collapsable: false,
-                  children: /*#__PURE__*/_jsx(Animated.View, {
-                    style: lineStyle
-                  })
-                })
-              })
-            })
-          })
-        }, index);
-      })
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: SVG_CENTER,
+        cy: SVG_CENTER,
+        r: SPINNER_RADIUS,
+        fill: "none",
+        stroke: indicatorBackgroundColor,
+        strokeWidth: strokeWidth
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: SVG_CENTER,
+        cy: SVG_CENTER,
+        r: SPINNER_RADIUS,
+        fill: "none",
+        stroke: color,
+        strokeWidth: strokeWidth,
+        strokeLinecap: "round",
+        transform: `rotate(${rotationDeg}, 24, 24)`,
+        strokeDasharray: strokeDasharray,
+        strokeDashoffset: strokeDashoffset
+      })]
     })
   });
 });
 Spinner.displayName = 'Spinner';
 Spinner.propTypes = propTypes;
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
 export default Spinner;

package/lib/esm/ActivityIndicator/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils/props';
 import Spinner from './Spinner';
+import Dots from './Dots';
 
 /**
  * `ActivityIndicator` renders a visual loading state.
@@ -18,13 +19,23 @@ const ActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     size,
+    dotSize,
     color,
+    indicatorBackgroundColor,
     thickness
   } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/_jsx(Spinner, {
+  return variant?.dots ? /*#__PURE__*/_jsx(Dots, {
+    ref: ref,
+    size: dotSize,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    label: label,
+    isStatic: isStatic
+  }) : /*#__PURE__*/_jsx(Spinner, {
     ref: ref,
     size: size,
     color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
     thickness: thickness,
     label: label,
     isStatic: isStatic

package/lib/esm/ActivityIndicator/shared.js

@@ -1,14 +1,61 @@
 import PropTypes from 'prop-types';
 
-// these could be specified by the theme
-export const DURATION = 1800;
-export const MIN_EMPTY_ANGLE = 60;
-export const MIN_STROKE_ANGLE = 30;
-export const BEZIER = [0.42, 0.0, 0.58, 1.0];
+// Spinner
+export const DURATION = 1200;
+export const SVG_RADIUS = 20;
+export const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
+export const SVG_SIZE = 48;
+export const ROTATION_TRANSFORM = 'rotate(-90 24 24)';
+export const SVG_CENTER = 24;
+export const SPINNER_RADIUS = 20;
+export const SPINNER_ROTATION_DEGREES = 183;
+export const SPINNER_DASHARRAY_MIN = 0.01;
+export const SPINNER_DASHARRAY_MAX = 0.99;
+
+// Spinner animation
+export const SPINNER_KEYTIMES = '0; 0.5; 1';
+export const SPINNER_DASHARRAY_HALF = 0.5;
+export const SPINNER_DASHOFFSET_FACTOR = 0.49;
+
+// Dots
+export const DOTS_ANIMATION_DURATION = 300;
+export const DOTS_TOTAL_ANIMATION_DURATION = DOTS_ANIMATION_DURATION * 10;
+export const OVERSHOOT_FACTOR = 1.3;
+export const UNDERSHOOT_FACTOR = 0.2;
+export const BOUNCY_CURVE = '0.2 1 0.8 1';
+export const DOTS_SPACING_X = 3;
+export const DOTS_BASE_Y_FACTOR = 3;
+export const DOTS_JUMP_HEIGHT_FACTOR = 1;
+export const DOTS_PADDING_FACTOR = 0.5;
+
+// Dots fadeout
+export const DOTS_FADEOUT_KEYTIMES = '0; 0.7; 0.8; 1';
+export const DOTS_FADEOUT_VALUES = '1; 1; 0; 0';
+
+// Dots animation
+export const DOT1_ANIMATION_KEYTIMES = '0; 0.1; 0.2; 1';
+export const DOT2_ANIMATION_KEYTIMES = '0; 0.3; 0.4; 0.5; 1';
+export const DOT3_ANIMATION_KEYTIMES = '0; 0.6; 0.7; 0.8; 1';
+
+// Dots color keytimes
+export const DOT1_COLOR_KEYTIMES = '0; 0.3; 0.4; 1';
+export const DOT2_COLOR_KEYTIMES = '0; 0.3; 0.4; 0.6; 0.7; 1';
+export const DOT3_COLOR_KEYTIMES = '0; 0.5; 0.6; 0.8; 1';
+
+// Dots native fadeout
+export const DOT_FADEOUT_INPUT_RANGE = [0, 0.7, 0.8, 1];
+export const DOT_FADEOUT_OUTPUT_RANGE = [1, 1, 0, 0];
+
+// Dots native animation
+export const DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1];
+export const DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1];
+export const DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1];
 export const propTypes = {
   color: PropTypes.string.isRequired,
+  baseColor: PropTypes.string,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
+  dotsize: PropTypes.number,
   thickness: PropTypes.number.isRequired,
   isStatic: PropTypes.bool
 };

package/lib/esm/Button/ButtonBase.js

@@ -6,10 +6,10 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps } from '../utils';
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,

package/lib/esm/Button/ButtonLink.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
+import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 
@@ -43,6 +43,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

package/lib/esm/Carousel/Carousel.js

@@ -84,7 +84,9 @@ const selectControlButtonPositionStyles = _ref => {
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
     enablePeeking,
-    enableDisplayMultipleItemsPerSlide
+    enableDisplayMultipleItemsPerSlide,
+    isAutoPlayEnabled,
+    viewport
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
@@ -92,7 +94,7 @@ const selectControlButtonPositionStyles = _ref => {
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = DEFAULT_POSITION_OFFSET;
   } else if (positionVariant === 'outside') {
-    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
+    if (enablePeeking || enableDisplayMultipleItemsPerSlide || isAutoPlayEnabled && viewport === 'xs') {
       styles[positionProperty] = 0;
     } else {
       styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
@@ -100,7 +102,7 @@ const selectControlButtonPositionStyles = _ref => {
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -120,7 +122,9 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      isAutoPlayEnabled,
+      viewport
     })
   };
 };
@@ -167,6 +171,11 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       alignItems: 'center'
     };
   }
+  if (enableHero) {
+    return {
+      paddingHorizontal: 16
+    };
+  }
   return {};
 };
 const selectMainContainerStyles = (enableHero, viewport) => {
@@ -881,7 +890,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               positionProperty: getDynamicPositionProperty(),
               spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              enableDisplayMultipleItemsPerSlide
+              enableDisplayMultipleItemsPerSlide,
+              isAutoPlayEnabled,
+              viewport
             })],
             children: /*#__PURE__*/_jsx(IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -890,7 +901,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport),
             testID: "previous-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -942,7 +953,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport),
             testID: "next-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,

package/lib/esm/ExpandCollapse/ExpandCollapse.js

@@ -3,9 +3,9 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -30,6 +30,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     open,
     initialOpen,
     onChange,
+    dataSet,
     ...rest
   } = _ref;
   const {
@@ -49,6 +50,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
+    dataSet: dataSet,
     children: /*#__PURE__*/_jsx(View, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
 const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -11,6 +12,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens = {},
     nativeID,
     initialOpen = false,
+    dataSet,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
@@ -24,6 +26,8 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    ...selectContainerProps(rest),
+    dataSet: dataSet,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
@@ -53,6 +57,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -72,6 +77,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: getTokensPropType('ExpandCollapseMini')
+  tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 };
 export default ExpandCollapseMini;

package/lib/esm/FileUpload/FileUpload.js

@@ -10,7 +10,7 @@ import Notification from '../Notification';
 import Spacer from '../Spacer';
 import StackView from '../StackView';
 import NotificationContent from './NotificationContent';
-import dictionary from './dictionary';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const getHintFromFileTypes = fileTypes => {
@@ -95,6 +95,7 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onUpload,
     onDelete,
     documentPicker,
+    dictionary = defaultDictionary,
     ...rest
   } = _ref2;
   if (minFilesCount <= 0) {
@@ -315,6 +316,27 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 FileUpload.displayName = 'FileUpload';
+const dictionaryEntryShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  dismissButtonLabel: PropTypes.string.isRequired,
+  wrongFileType: PropTypes.string.isRequired,
+  allowedFileTypes: PropTypes.string.isRequired,
+  fileTooBig: PropTypes.string.isRequired,
+  fileIsEmpty: PropTypes.string.isRequired,
+  problemUploading: PropTypes.string.isRequired,
+  problemDeleting: PropTypes.string.isRequired,
+  problemUploadingMultipleFiles: PropTypes.string.isRequired,
+  only: PropTypes.string.isRequired,
+  and: PropTypes.string.isRequired,
+  or: PropTypes.string.isRequired,
+  uploadSuccess: PropTypes.string.isRequired,
+  uploadError: PropTypes.string.isRequired,
+  deleteProblem: PropTypes.string.isRequired,
+  tooManyFiles: PropTypes.string.isRequired,
+  fileTooSmall: PropTypes.string.isRequired,
+  fewFiles: PropTypes.string.isRequired
+});
 FileUpload.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('FileUpload'),
@@ -358,6 +380,13 @@ FileUpload.propTypes = {
   /**
    * The minimum file size allowed for upload in MB.
    */
-  minFileSize: PropTypes.number
+  minFileSize: PropTypes.number,
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryEntryShape,
+    fr: dictionaryEntryShape
+  })
 };
 export default FileUpload;

package/lib/esm/Link/Link.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,5 +25,11 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = LinkBase.propTypes;
+Link.propTypes = {
+  ...LinkBase.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
+};
 export default Link;

package/lib/esm/Link/LinkBase.js

@@ -136,6 +136,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -170,6 +171,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -101,6 +101,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
   const [maxWidth, setMaxWidth] = React.useState(false);
+  const isSelected = currentValues.length > 0;
   const {
     headerFontColor,
     headerFontSize,
@@ -133,7 +134,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
-    maxWidth
+    maxWidth,
+    selected: isSelected
   }, {
     viewport
   });
@@ -161,7 +163,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
   const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
   const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const isSelected = currentValues.length > 0;
   const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
   React.useEffect(() => {
     if (colSize === 1) return setMaxWidth(false);

package/lib/esm/utils/containUniqueFields.js

@@ -4,10 +4,10 @@
 // Note that if a value of a field in an item is not set, it will be
 // excluded from comparison.
 const containUniqueFields = (items, fields) => {
-  const map = [];
+  const map = new Map();
   const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
-    if (!map[field]) {
-      map[field] = [];
+    if (!map.has(field)) {
+      map.set(field, new Map());
     }
     if (!item[field]) {
       // We exclude empty values from comparison
@@ -15,8 +15,8 @@ const containUniqueFields = (items, fields) => {
     }
 
     // Duplicate found!
-    if (map[field][item[field]]) return true;
-    map[field][item[field]] = true;
+    if (map.get(field).has(item[field])) return true;
+    map.get(field).set(item[field], true);
     return false;
   }));
   return !itemsHaveDuplicateFields;