@telus-uds/components-base 3.3.0 → 3.5.0

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

@@ -5,147 +5,129 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ea = _shared.MIN_EMPTY_ANGLE / 2;
-const sa = _shared.MIN_STROKE_ANGLE / 2;
 const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,
+    indicatorBackgroundColor,
     thickness,
     label,
     isStatic = false
   } = _ref;
-  const {
-    current: timer
-  } = _react.default.useRef(new _Animated.default.Value(0));
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
   const reduceMotion = reduceMotionEnabled || isStatic;
-  _react.default.useLayoutEffect(() => {
-    const loop = _Animated.default.timing(timer, {
+
+  // Animated value between 0..1 that will loop
+  const progress = _react.default.useRef(new _Animated.default.Value(0)).current;
+
+  // Local state to force re-render on each frame
+  const [progressVal, setProgressVal] = _react.default.useState(0);
+  _react.default.useEffect(() => {
+    if (reduceMotion) {
+      progress.stopAnimation(() => {
+        progress.setValue(0);
+        setProgressVal(0);
+      });
+      return undefined;
+    }
+    const id = progress.addListener(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      setProgressVal(value);
+    });
+    _Animated.default.loop(_Animated.default.timing(progress, {
+      toValue: 1,
       duration: _shared.DURATION,
       easing: _Easing.default.linear,
-      // Animated.loop does not work if useNativeDriver is true on web
-      useNativeDriver: true,
-      toValue: 1,
+      useNativeDriver: false,
       isInteraction: false
-    });
-    if (!reduceMotion) _Animated.default.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotion]);
-  const frames = 60 * _shared.DURATION / 1000;
-  const easing = _Easing.default.bezier(..._shared.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 < _shared.SPINNER_DASHARRAY_HALF) {
+    const segmentProgress = progressVal / _shared.SPINNER_DASHARRAY_HALF;
+    dashArrayVisible = _shared.SPINNER_DASHARRAY_MIN + (_shared.SPINNER_DASHARRAY_HALF - _shared.SPINNER_DASHARRAY_MIN) * segmentProgress;
+  } else {
+    const segmentProgress = (progressVal - _shared.SPINNER_DASHARRAY_HALF) / _shared.SPINNER_DASHARRAY_HALF;
+    dashArrayVisible = _shared.SPINNER_DASHARRAY_HALF + (_shared.SPINNER_DASHARRAY_MIN - _shared.SPINNER_DASHARRAY_HALF) * segmentProgress;
+  }
+  const visibleLength = dashArrayVisible * _shared.SVG_CIRCUMFERENCE;
+  const invisibleLength = _shared.SVG_CIRCUMFERENCE - visibleLength;
+  const strokeDasharray = `${visibleLength},${invisibleLength}`;
+
+  // strokeDashoffset
+  let strokeDashoffset = 0;
+  if (progressVal > _shared.SPINNER_DASHARRAY_HALF) {
+    const segmentProgress = (progressVal - _shared.SPINNER_DASHARRAY_HALF) / _shared.SPINNER_DASHARRAY_HALF;
+    strokeDashoffset = -_shared.SPINNER_DASHOFFSET_FACTOR * _shared.SVG_CIRCUMFERENCE * segmentProgress;
+  }
+  const strokeWidth = thickness * _shared.SVG_SIZE / size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [styles.container],
+    style: {
+      width: size,
+      height: size
+    },
     accessible: true,
     accessibilityLabel: label,
     accessibilityRole: "progressbar",
     accessibilityState: {
       busy: true
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.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__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-          style: [styles.layer],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-            style: layerStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-              style: [containerStyle, offsetStyle],
-              collapsable: false,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-                style: viewportStyle,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-                  style: containerStyle,
-                  collapsable: false,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-                    style: lineStyle
-                  })
-                })
-              })
-            })
-          })
-        }, index);
-      })
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${_shared.SVG_SIZE} ${_shared.SVG_SIZE}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: _shared.SVG_CENTER,
+        cy: _shared.SVG_CENTER,
+        r: _shared.SPINNER_RADIUS,
+        fill: "none",
+        stroke: indicatorBackgroundColor,
+        strokeWidth: strokeWidth
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: _shared.SVG_CENTER,
+        cy: _shared.SVG_CENTER,
+        r: _shared.SPINNER_RADIUS,
+        fill: "none",
+        stroke: color,
+        strokeWidth: strokeWidth,
+        strokeLinecap: "round",
+        transform: `rotate(${rotationDeg}, 24, 24)`,
+        strokeDasharray: strokeDasharray,
+        strokeDashoffset: strokeDashoffset
+      })]
     })
   });
 });
 Spinner.displayName = 'Spinner';
 Spinner.propTypes = _shared.propTypes;
-const styles = _StyleSheet.default.create({
-  container: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-  layer: {
-    ..._StyleSheet.default.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
 var _default = exports.default = Spinner;

package/lib/cjs/ActivityIndicator/index.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _props = require("../utils/props");
 var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _Dots = _interopRequireDefault(require("./Dots"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -23,13 +24,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = _ref;
   const {
     size,
+    dotSize,
     color,
+    indicatorBackgroundColor,
     thickness
   } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+  return variant?.dots ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots.default, {
+    ref: ref,
+    size: dotSize,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    label: label,
+    isStatic: isStatic
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
     ref: ref,
     size: size,
     color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
     thickness: thickness,
     label: label,
     isStatic: isStatic

package/lib/cjs/ActivityIndicator/shared.js

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

package/lib/cjs/Button/ButtonBase.js

@@ -16,7 +16,7 @@ var _utils = require("../utils");
 var _Icon = require("../Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps, _utils.contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,

package/lib/cjs/Button/ButtonLink.js

@@ -50,6 +50,7 @@ ButtonLink.propTypes = {
   ..._props.a11yProps.types,
   ..._propTypes2.default,
   ..._props.linkProps.types,
+  ..._props.contentfulProps.types,
   children: _propTypes2.textAndA11yText,
   dataSet: _propTypes.default.object,
   accessibilityRole: _propTypes.default.string

package/lib/cjs/Carousel/Carousel.js

@@ -91,7 +91,9 @@ const selectControlButtonPositionStyles = _ref => {
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
     enablePeeking,
-    enableDisplayMultipleItemsPerSlide
+    enableDisplayMultipleItemsPerSlide,
+    isAutoPlayEnabled,
+    viewport
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
@@ -99,7 +101,7 @@ const selectControlButtonPositionStyles = _ref => {
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = _Constants.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);
@@ -107,7 +109,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'
@@ -127,7 +129,9 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      isAutoPlayEnabled,
+      viewport
     })
   };
 };
@@ -174,6 +178,11 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       alignItems: 'center'
     };
   }
+  if (enableHero) {
+    return {
+      paddingHorizontal: 16
+    };
+  }
   return {};
 };
 const selectMainContainerStyles = (enableHero, viewport) => {
@@ -888,7 +897,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               positionProperty: getDynamicPositionProperty(),
               spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              enableDisplayMultipleItemsPerSlide
+              enableDisplayMultipleItemsPerSlide,
+              isAutoPlayEnabled,
+              viewport
             })],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -897,7 +908,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -949,7 +960,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -12,7 +12,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -37,6 +37,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     open,
     initialOpen,
     onChange,
+    dataSet,
     ...rest
   } = _ref;
   const {
@@ -56,6 +57,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
+    dataSet: dataSet,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -11,6 +11,7 @@ var _utils = require("../utils");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.contentfulProps]);
 const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
@@ -18,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     tokens = {},
     nativeID,
     initialOpen = false,
+    dataSet,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
@@ -31,6 +33,8 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    ...selectContainerProps(rest),
+    dataSet: dataSet,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
@@ -60,6 +64,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
   ..._ExpandCollapseMiniControl.default.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -79,6 +84,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini')
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = ExpandCollapseMini;

package/lib/cjs/FileUpload/FileUpload.js

@@ -102,6 +102,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onUpload,
     onDelete,
     documentPicker,
+    dictionary = _dictionary.default,
     ...rest
   } = _ref2;
   if (minFilesCount <= 0) {
@@ -109,7 +110,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   }
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('FileUpload', tokens, variant);
   const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const inputFileRef = _react.default.useRef(null);
@@ -322,6 +323,27 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
 });
 FileUpload.displayName = 'FileUpload';
+const dictionaryEntryShape = _propTypes.default.shape({
+  label: _propTypes.default.string.isRequired,
+  buttonLabel: _propTypes.default.string.isRequired,
+  dismissButtonLabel: _propTypes.default.string.isRequired,
+  wrongFileType: _propTypes.default.string.isRequired,
+  allowedFileTypes: _propTypes.default.string.isRequired,
+  fileTooBig: _propTypes.default.string.isRequired,
+  fileIsEmpty: _propTypes.default.string.isRequired,
+  problemUploading: _propTypes.default.string.isRequired,
+  problemDeleting: _propTypes.default.string.isRequired,
+  problemUploadingMultipleFiles: _propTypes.default.string.isRequired,
+  only: _propTypes.default.string.isRequired,
+  and: _propTypes.default.string.isRequired,
+  or: _propTypes.default.string.isRequired,
+  uploadSuccess: _propTypes.default.string.isRequired,
+  uploadError: _propTypes.default.string.isRequired,
+  deleteProblem: _propTypes.default.string.isRequired,
+  tooManyFiles: _propTypes.default.string.isRequired,
+  fileTooSmall: _propTypes.default.string.isRequired,
+  fewFiles: _propTypes.default.string.isRequired
+});
 FileUpload.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('FileUpload'),
@@ -365,6 +387,13 @@ FileUpload.propTypes = {
   /**
    * The minimum file size allowed for upload in MB.
    */
-  minFileSize: _propTypes.default.number
+  minFileSize: _propTypes.default.number,
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryEntryShape,
+    fr: dictionaryEntryShape
+  })
 };
 var _default = exports.default = FileUpload;

package/lib/cjs/Link/Link.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,5 +32,11 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = _LinkBase.default.propTypes;
+Link.propTypes = {
+  ..._LinkBase.default.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
+};
 var _default = exports.default = Link;

package/lib/cjs/Link/LinkBase.js

@@ -143,6 +143,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -177,6 +178,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -108,6 +108,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   const [isOpen, setIsOpen] = _react.default.useState(false);
   const [checkedIds, setCheckedIds] = _react.default.useState(currentValues ?? []);
   const [maxWidth, setMaxWidth] = _react.default.useState(false);
+  const isSelected = currentValues.length > 0;
   const {
     headerFontColor,
     headerFontSize,
@@ -140,7 +141,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
-    maxWidth
+    maxWidth,
+    selected: isSelected
   }, {
     viewport
   });
@@ -168,7 +170,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.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.default.useEffect(() => {
     if (colSize === 1) return setMaxWidth(false);

package/lib/cjs/utils/containUniqueFields.js

@@ -10,10 +10,10 @@ exports.default = void 0;
 // 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
@@ -21,8 +21,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;