@telus-uds/components-base 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-base
 
-<!-- This log was last generated on Mon, 02 Dec 2024 20:23:48 GMT and should not be manually modified. -->
+This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.3.0
+
+Thu, 19 Dec 2024 04:54:39 GMT
+
+### Minor changes
+
+- `Autocomplete`: Enable `tokens` prop to set custom styles for the `maxHeight` and `scroll` behavior. (jaime.tuyuc@telus.com)
+- `FileUpload`: add minFilesCount and minFileSize props (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v3.2.0
+
+### Patches
+
+- `Card`: Include additional `tokenKeys` to remove warnings. (jaime.tuyuc@telus.com)
+- `StepTracker`: elements must only use supported ARIA attributes (sergio.ramirez@telus.com)
+
+## 2.2.0
+
+Fri, 06 Dec 2024 02:06:03 GMT
+
+### Minor changes
+
+- `PressableItem`: pass event to on-press function (guillermo.peitzner@telus.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new `dataSet` prop added to the components to allow the capability to pass data (35577399+JoshHC@users.noreply.github.com)
+
+### Patches
+
+- `Typography`: fix gradient when enableMediaQueryStyleSheet is true (Mauricio.BatresMontejo@telus.com)
+
 ## 2.1.0
 
-Mon, 02 Dec 2024 20:23:48 GMT
+Mon, 02 Dec 2024 20:29:26 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import throttle from 'lodash.throttle';
 import matchAll from 'string.prototype.matchall';
-import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect } from '../utils';
+import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect, getTokensPropType } from '../utils';
 import { useThemeTokens } from '../ThemeProvider';
 import Listbox from '../Listbox';
 import Typography from '../Typography';
@@ -105,13 +105,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     value,
     helpText = '',
     loadingLabel,
+    tokens,
     ...rest
   } = _ref2;
   const {
-    color: resultsTextColor
-  } = useThemeTokens('Search', {}, {
+    color: resultsTextColor,
+    ...restOfTokens
+  } = useThemeTokens('Autocomplete', tokens, {
     focus: true
   });
+
   // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
@@ -371,6 +374,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
         onLayout: handleMeasure,
+        tokens: restOfTokens,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/_jsx(Loading, {
           label: loadingLabel ?? getCopy('loading')
@@ -423,6 +427,7 @@ Autocomplete.propTypes = {
    * </Autocomplete>
    */
   children: PropTypes.func,
+  tokens: getTokensPropType('Autocomplete'),
   /**
    * Copy language identifier
    */

package/lib/Card/CardBase.js

@@ -25,7 +25,9 @@ const selectStyles = _ref => {
     minWidth,
     shadow,
     backgroundGradient,
-    gradient
+    gradient,
+    maxHeight,
+    overflowY
   } = _ref;
   return {
     flex,
@@ -47,6 +49,10 @@ const selectStyles = _ref => {
     } : {}),
     ...(backgroundGradient && Platform.OS === 'web' ? {
       backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+    } : {}),
+    ...(Platform.OS === 'web' ? {
+      maxHeight,
+      overflowY
     } : {})
   };
 };

package/lib/Card/PressableCardBase.js

@@ -11,7 +11,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
 const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
-'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
+'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
 export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
 
 /**

package/lib/FileUpload/FileUpload.js

@@ -73,6 +73,8 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {boolean} props.allowMultipleFiles - Whether multiple files can be uploaded.
  * @param {number} props.maxFileSize - The maximum file size in megabytes.
  * @param {number} props.maxFilesCount - The maximum number of files that can be uploaded.
+ * @param {number} props.minFilesCount - The minimum number of files that can be uploaded.
+ * @param {number} props.minFileSize - The minimum file size in megabytes.
  * @param {Function} props.onUpload - The callback function for file upload.
  * @param {Function} props.onDelete - The callback function for file deletion.
  * @param {Object} props.documentPicker - The document picker object.
@@ -88,11 +90,16 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     allowMultipleFiles = false,
     maxFileSize,
     maxFilesCount = 1,
+    minFilesCount = 1,
+    minFileSize = 0,
     onUpload,
     onDelete,
     documentPicker,
     ...rest
   } = _ref2;
+  if (minFilesCount <= 0) {
+    throw new Error('minFilesCount should be greater than 0');
+  }
   const themeTokens = useThemeTokens('FileUpload', tokens, variant);
   const getCopy = useCopy({
     dictionary,
@@ -104,9 +111,12 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   React.useEffect(() => {
     setRenderTrigger(prev => prev + 1);
   }, [filesStatus]);
-  const areFileTypesExtensionsValid = files => files.some(file => {
-    const fileExtension = file.name.split('.').pop().toLowerCase();
-    if (!fileTypes.includes(fileExtension)) {
+  const areFileTypesExtensionsValid = files => {
+    const invalidFiles = files.filter(file => {
+      const fileExtension = file.name.split('.').pop().toLowerCase();
+      return !fileTypes.includes(fileExtension);
+    });
+    if (invalidFiles.length > 0) {
       setFilesStatus([{
         description: getCopy('wrongFileType').replace('%{fileType}', stringifyFileTypesList(fileTypes, getCopy)),
         style: 'error'
@@ -114,26 +124,46 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       return false;
     }
     return true;
-  });
-  const areFileSizesWithinLimit = files => files.some(file => {
-    if (file.size > convertFromMegaByteToByte(maxFileSize)) {
+  };
+  const areFileSizesWithinLimit = files => {
+    const invalidFiles = files.filter(file => {
+      const fileSize = file.size;
+      return fileSize < convertFromMegaByteToByte(minFileSize) || fileSize > convertFromMegaByteToByte(maxFileSize);
+    });
+    if (invalidFiles.length > 0) {
+      const invalidFile = invalidFiles[0];
+      const fileSize = invalidFile.size;
+      if (fileSize < convertFromMegaByteToByte(minFileSize)) {
+        setFilesStatus([{
+          description: getCopy('fileTooSmall').replace('%{size}', minFileSize),
+          style: 'error'
+        }]);
+      } else {
+        setFilesStatus([{
+          description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+          style: 'error'
+        }]);
+      }
+      return false;
+    }
+    return true;
+  };
+  const areFilesCountWithinLimit = files => {
+    if (maxFilesCount && files.length > maxFilesCount) {
       setFilesStatus([{
-        description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
         style: 'error'
       }]);
       return false;
     }
-    return true;
-  });
-  const areMoreFilesUploadedThanAllowed = files => {
-    if (files.length > maxFilesCount) {
+    if (minFilesCount && files.length < minFilesCount) {
       setFilesStatus([{
-        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
+        description: getCopy('fewFiles').replace('%{minFilesCount}', minFilesCount),
         style: 'error'
       }]);
-      return true;
+      return false;
     }
-    return false;
+    return true;
   };
   const handleFilesUpload = async files => {
     try {
@@ -169,11 +199,8 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   };
   const handleFileDeletion = async file => {
-    const copyFile = {
-      ...file
-    };
     try {
-      const result = await onDelete(copyFile);
+      const result = await onDelete(file);
       setFilesStatus(prevStatus => {
         const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
         return result.error ? [...filteredFilesStatus, {
@@ -212,7 +239,7 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     if (files.length === 0) return;
     if (fileTypes && !areFileTypesExtensionsValid(files)) return;
     if (maxFileSize && !areFileSizesWithinLimit(files)) return;
-    if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return;
+    if ((maxFilesCount || minFilesCount) && !areFilesCountWithinLimit(files)) return;
     await handleFilesUpload(files);
     if (inputFileRef.current) inputFileRef.current.value = '';
   };
@@ -225,8 +252,8 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           multiple: allowMultipleFiles
         });
         if (result) {
-          const files = Array.isArray(result) ? result : [result];
-          if (files.find(file => file.type === 'cancel')) return;
+          if (result.canceled) return;
+          const files = Array.isArray(result.assets) ? result.assets : [result.assets];
           const event = {
             target: {
               files
@@ -323,6 +350,14 @@ FileUpload.propTypes = {
   /**
    * The document picker to use for mobile
    */
-  documentPicker: PropTypes.object
+  documentPicker: PropTypes.object,
+  /**
+   * The minimum number of files allowed for upload.
+   */
+  minFilesCount: PropTypes.number,
+  /**
+   * The minimum file size allowed for upload in MB.
+   */
+  minFileSize: PropTypes.number
 };
 export default FileUpload;

package/lib/FileUpload/dictionary.js

@@ -16,7 +16,9 @@ export default {
     uploadSuccess: 'uploaded successfully.',
     uploadError: 'was not uploaded due to',
     deleteProblem: 'was not deleted due to',
-    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.'
+    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.',
+    fileTooSmall: 'The selected file must be at least %{size}MB.',
+    fewFiles: 'You must select at least %{minFilesCount} files.'
   },
   fr: {
     label: 'Téléverser les fichiers"',
@@ -35,6 +37,8 @@ export default {
     uploadSuccess: 'téléchargé avec succès.',
     uploadError: `n'a pas été téléchargé en raison de`,
     deleteProblem: `n'a pas été supprimé en raison de`,
-    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`
+    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`,
+    fileTooSmall: `Le fichier sélectionné doit faire au moins %{size}Mo.`,
+    fewFiles: `Vous devez sélectionner au moins %{minFilesCount} fichiers.`
   }
 };

package/lib/Listbox/ListboxOverlay.js

@@ -29,7 +29,8 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     overlaidPosition,
     maxWidth,
     minWidth,
-    onLayout
+    onLayout,
+    tokens
   } = _ref;
   const systemTokens = useThemeTokens('Listbox', {}, {});
   return /*#__PURE__*/_jsx(View, {
@@ -45,7 +46,8 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
         paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal
+        paddingRight: paddingHorizontal,
+        ...tokens
       },
       children: children
     })
@@ -72,6 +74,7 @@ DropdownOverlay.propTypes = {
   }),
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
-  onLayout: PropTypes.func
+  onLayout: PropTypes.func,
+  tokens: PropTypes.object
 };
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/Listbox/PressableItem.js

@@ -113,9 +113,9 @@ const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onClick: onPress
     }),
     ...selectProps(rest),
-    onPress: () => {
+    onPress: event => {
       setSelectedId(id);
-      onPress();
+      onPress(event);
     },
     children: pressableState => {
       return /*#__PURE__*/_jsxs(Text, {

package/lib/Search/Search.js

@@ -73,6 +73,7 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     variant,
     nativeSubmitBtnID,
+    dataSet,
     ...rest
   } = _ref3;
   const {
@@ -132,6 +133,7 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = selectContainerProps(rest);
   return /*#__PURE__*/_jsx(View, {
     ...containerProps,
+    dataSet: dataSet,
     children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,

package/lib/StepTracker/StepTracker.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
@@ -108,7 +109,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     dictionary,
     copy
   });
-  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : getCopy('stepTrackerLabel');
   const getStepLabel = index => {
     if (themeTokens.showStepLabel) {
       var _getCopy;
@@ -122,7 +123,6 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
-    accessibilityLevel: 1,
     accessibilityRole: 'progressbar',
     accessibilityValue: {
       min: 0,
@@ -132,6 +132,8 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     },
     ...rest
   });
+  const stepsContainerAccessibilityRole = Platform.OS === 'web' ? 'list' : 'tablist';
+  const stepAccessibilityRole = Platform.OS === 'web' ? 'listitem' : 'tab';
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: selectContainerStyles(themeTokens),
@@ -140,6 +142,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       space: 0,
       children: [/*#__PURE__*/_jsx(View, {
         style: staticStyles.stepsContainer,
+        accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/_jsx(Step, {
             status: current,
@@ -147,13 +150,17 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
-            tokens: themeTokens
+            tokens: themeTokens,
+            accessibilityRole: stepAccessibilityRole,
+            accessibilityCurrent: current === index && Platform.OS === 'web' && 'step'
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/_jsx(Text, {
           style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
+          accessibilityRole: "header",
+          accessibilityLevel: 2,
           children: stepTrackerLabel
         })
       })]

package/lib/Typography/Typography.js

@@ -122,6 +122,18 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         textDecorationLine,
         ...viewportTokens
       }, themeOptions);
+      if (themeTokens[vp].gradient) {
+        const tokensWithGradient = {
+          ...acc[vp],
+          color: 'transparent',
+          backgroundImage: generateGradientString(themeTokens[vp].gradient),
+          backgroundClip: 'text'
+        };
+        return {
+          ...acc,
+          [vp]: tokensWithGradient
+        };
+      }
       return acc;
     }, {});
     const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);

package/package.json

@@ -13,10 +13,10 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.1.0",
+    "@telus-uds/system-theme-tokens": "^3.2.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
-    "expo-document-picker": "~10.3.0",
+    "expo-document-picker": "^13.0.1",
     "expo-linear-gradient": "^12.5.0",
     "expo-modules-core": "^1.12.24",
     "lodash.debounce": "^4.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.1.0",
+  "version": "2.3.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -11,7 +11,8 @@ import {
   useCopy,
   htmlAttrs,
   useOverlaidPosition,
-  useSafeLayoutEffect
+  useSafeLayoutEffect,
+  getTokensPropType
 } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import Listbox from '../Listbox'
@@ -103,11 +104,15 @@ const Autocomplete = React.forwardRef(
       value,
       helpText = '',
       loadingLabel,
+      tokens,
       ...rest
     },
     ref
   ) => {
-    const { color: resultsTextColor } = useThemeTokens('Search', {}, { focus: true })
+    const { color: resultsTextColor, ...restOfTokens } = useThemeTokens('Autocomplete', tokens, {
+      focus: true
+    })
+
     // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
     // but we also need to adjust suggestions based on the mode:
     // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
@@ -371,6 +376,7 @@ const Autocomplete = React.forwardRef(
               minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
               maxWidth={inputWidth}
               onLayout={handleMeasure}
+              tokens={restOfTokens}
               ref={openOverlayRef}
             >
               {isLoading ? (
@@ -433,6 +439,7 @@ Autocomplete.propTypes = {
    * </Autocomplete>
    */
   children: PropTypes.func,
+  tokens: getTokensPropType('Autocomplete'),
   /**
    * Copy language identifier
    */

package/src/Card/CardBase.jsx

@@ -22,7 +22,9 @@ const selectStyles = ({
   minWidth,
   shadow,
   backgroundGradient,
-  gradient
+  gradient,
+  maxHeight,
+  overflowY
 }) => {
   return {
     flex,
@@ -48,7 +50,8 @@ const selectStyles = ({
       ? {
           backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
         }
-      : {})
+      : {}),
+    ...(Platform.OS === 'web' ? { maxHeight, overflowY } : {})
   }
 }
 

package/src/Card/PressableCardBase.jsx

@@ -48,7 +48,18 @@ const tokenKeys = [
   // https://github.com/telus/universal-design-system/issues/782
   'outerBorderColor',
   'outerBorderWidth',
-  'outerBorderGap'
+  'outerBorderGap',
+  'icon',
+  'iconBackgroundColor',
+  'iconColor',
+  'iconSize',
+  'inputBackgroundColor',
+  'inputBorderColor',
+  'inputBorderRadius',
+  'inputBorderWidth',
+  'inputHeight',
+  'inputShadow',
+  'inputWidth'
 ]
 export const selectPressableCardTokens = (tokens) =>
   Object.fromEntries(tokenKeys.map((key) => [key, tokens[key]]))

package/src/FileUpload/FileUpload.jsx

@@ -90,6 +90,8 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {boolean} props.allowMultipleFiles - Whether multiple files can be uploaded.
  * @param {number} props.maxFileSize - The maximum file size in megabytes.
  * @param {number} props.maxFilesCount - The maximum number of files that can be uploaded.
+ * @param {number} props.minFilesCount - The minimum number of files that can be uploaded.
+ * @param {number} props.minFileSize - The minimum file size in megabytes.
  * @param {Function} props.onUpload - The callback function for file upload.
  * @param {Function} props.onDelete - The callback function for file deletion.
  * @param {Object} props.documentPicker - The document picker object.
@@ -106,6 +108,8 @@ const FileUpload = React.forwardRef(
       allowMultipleFiles = false,
       maxFileSize,
       maxFilesCount = 1,
+      minFilesCount = 1,
+      minFileSize = 0,
       onUpload,
       onDelete,
       documentPicker,
@@ -113,6 +117,10 @@ const FileUpload = React.forwardRef(
     },
     ref
   ) => {
+    if (minFilesCount <= 0) {
+      throw new Error('minFilesCount should be greater than 0')
+    }
+
     const themeTokens = useThemeTokens('FileUpload', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })
 
@@ -125,50 +133,78 @@ const FileUpload = React.forwardRef(
       setRenderTrigger((prev) => prev + 1)
     }, [filesStatus])
 
-    const areFileTypesExtensionsValid = (files) =>
-      files.some((file) => {
+    const areFileTypesExtensionsValid = (files) => {
+      const invalidFiles = files.filter((file) => {
         const fileExtension = file.name.split('.').pop().toLowerCase()
+        return !fileTypes.includes(fileExtension)
+      })
+      if (invalidFiles.length > 0) {
+        setFilesStatus([
+          {
+            description: getCopy('wrongFileType').replace(
+              '%{fileType}',
+              stringifyFileTypesList(fileTypes, getCopy)
+            ),
+            style: 'error'
+          }
+        ])
+        return false
+      }
+      return true
+    }
 
-        if (!fileTypes.includes(fileExtension)) {
+    const areFileSizesWithinLimit = (files) => {
+      const invalidFiles = files.filter((file) => {
+        const fileSize = file.size
+        return (
+          fileSize < convertFromMegaByteToByte(minFileSize) ||
+          fileSize > convertFromMegaByteToByte(maxFileSize)
+        )
+      })
+
+      if (invalidFiles.length > 0) {
+        const invalidFile = invalidFiles[0]
+        const fileSize = invalidFile.size
+        if (fileSize < convertFromMegaByteToByte(minFileSize)) {
           setFilesStatus([
             {
-              description: getCopy('wrongFileType').replace(
-                '%{fileType}',
-                stringifyFileTypesList(fileTypes, getCopy)
-              ),
+              description: getCopy('fileTooSmall').replace('%{size}', minFileSize),
               style: 'error'
             }
           ])
-          return false
-        }
-        return true
-      })
-
-    const areFileSizesWithinLimit = (files) =>
-      files.some((file) => {
-        if (file.size > convertFromMegaByteToByte(maxFileSize)) {
+        } else {
           setFilesStatus([
             {
               description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
               style: 'error'
             }
           ])
-          return false
         }
-        return true
-      })
+        return false
+      }
+      return true
+    }
 
-    const areMoreFilesUploadedThanAllowed = (files) => {
-      if (files.length > maxFilesCount) {
+    const areFilesCountWithinLimit = (files) => {
+      if (maxFilesCount && files.length > maxFilesCount) {
         setFilesStatus([
           {
             description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
             style: 'error'
           }
         ])
-        return true
+        return false
       }
-      return false
+      if (minFilesCount && files.length < minFilesCount) {
+        setFilesStatus([
+          {
+            description: getCopy('fewFiles').replace('%{minFilesCount}', minFilesCount),
+            style: 'error'
+          }
+        ])
+        return false
+      }
+      return true
     }
 
     const handleFilesUpload = async (files) => {
@@ -212,9 +248,8 @@ const FileUpload = React.forwardRef(
     }
 
     const handleFileDeletion = async (file) => {
-      const copyFile = { ...file }
       try {
-        const result = await onDelete(copyFile)
+        const result = await onDelete(file)
         setFilesStatus((prevStatus) => {
           const filteredFilesStatus = prevStatus.filter((f) => f.file && f.file.name !== file.name)
           return result.error
@@ -269,7 +304,7 @@ const FileUpload = React.forwardRef(
 
       if (maxFileSize && !areFileSizesWithinLimit(files)) return
 
-      if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return
+      if ((maxFilesCount || minFilesCount) && !areFilesCountWithinLimit(files)) return
 
       await handleFilesUpload(files)
 
@@ -285,8 +320,8 @@ const FileUpload = React.forwardRef(
             multiple: allowMultipleFiles
           })
           if (result) {
-            const files = Array.isArray(result) ? result : [result]
-            if (files.find((file) => file.type === 'cancel')) return
+            if (result.canceled) return
+            const files = Array.isArray(result.assets) ? result.assets : [result.assets]
             const event = { target: { files } }
             await handleOnChange(event)
           }
@@ -390,7 +425,15 @@ FileUpload.propTypes = {
   /**
    * The document picker to use for mobile
    */
-  documentPicker: PropTypes.object
+  documentPicker: PropTypes.object,
+  /**
+   * The minimum number of files allowed for upload.
+   */
+  minFilesCount: PropTypes.number,
+  /**
+   * The minimum file size allowed for upload in MB.
+   */
+  minFileSize: PropTypes.number
 }
 
 export default FileUpload

package/src/FileUpload/dictionary.js

@@ -16,7 +16,9 @@ export default {
     uploadSuccess: 'uploaded successfully.',
     uploadError: 'was not uploaded due to',
     deleteProblem: 'was not deleted due to',
-    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.'
+    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.',
+    fileTooSmall: 'The selected file must be at least %{size}MB.',
+    fewFiles: 'You must select at least %{minFilesCount} files.'
   },
   fr: {
     label: 'Téléverser les fichiers"',
@@ -35,6 +37,8 @@ export default {
     uploadSuccess: 'téléchargé avec succès.',
     uploadError: `n'a pas été téléchargé en raison de`,
     deleteProblem: `n'a pas été supprimé en raison de`,
-    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`
+    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`,
+    fileTooSmall: `Le fichier sélectionné doit faire au moins %{size}Mo.`,
+    fewFiles: `Vous devez sélectionner au moins %{minFilesCount} fichiers.`
   }
 }

package/src/Listbox/ListboxOverlay.jsx

@@ -22,7 +22,7 @@ const paddingVertical = 0
 const paddingHorizontal = 0
 
 const DropdownOverlay = React.forwardRef(
-  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
+  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens }, ref) => {
     const systemTokens = useThemeTokens('Listbox', {}, {})
 
     return (
@@ -42,7 +42,8 @@ const DropdownOverlay = React.forwardRef(
             paddingBottom: paddingVertical,
             paddingTop: paddingVertical,
             paddingLeft: paddingHorizontal,
-            paddingRight: paddingHorizontal
+            paddingRight: paddingHorizontal,
+            ...tokens
           }}
         >
           {children}
@@ -75,7 +76,8 @@ DropdownOverlay.propTypes = {
   }),
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
-  onLayout: PropTypes.func
+  onLayout: PropTypes.func,
+  tokens: PropTypes.object
 }
 
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -109,9 +109,9 @@ const PressableItem = React.forwardRef(
         {...(href && { href })}
         {...(onPress && { onClick: onPress })}
         {...selectProps(rest)}
-        onPress={() => {
+        onPress={(event) => {
           setSelectedId(id)
-          onPress()
+          onPress(event)
         }}
       >
         {(pressableState) => {

package/src/Search/Search.jsx

@@ -77,6 +77,7 @@ const Search = React.forwardRef(
       tokens,
       variant,
       nativeSubmitBtnID,
+      dataSet,
       ...rest
     },
     ref
@@ -130,7 +131,7 @@ const Search = React.forwardRef(
     const { nativeID, testID, ...containerProps } = selectContainerProps(rest)
 
     return (
-      <View {...containerProps}>
+      <View {...containerProps} dataSet={dataSet}>
         <TextInputBase
           nativeID={nativeID}
           testID={testID}

package/src/StepTracker/StepTracker.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -105,7 +105,7 @@ const StepTracker = React.forwardRef(
             '%{stepLabel}',
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
-      : ''
+      : getCopy('stepTrackerLabel')
 
     const getStepLabel = (index) => {
       if (themeTokens.showStepLabel) {
@@ -118,7 +118,6 @@ const StepTracker = React.forwardRef(
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
-      accessibilityLevel: 1,
       accessibilityRole: 'progressbar',
       accessibilityValue: {
         min: 0,
@@ -129,10 +128,16 @@ const StepTracker = React.forwardRef(
       ...rest
     })
 
+    const stepsContainerAccessibilityRole = Platform.OS === 'web' ? 'list' : 'tablist'
+    const stepAccessibilityRole = Platform.OS === 'web' ? 'listitem' : 'tab'
+
     return (
       <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
-          <View style={staticStyles.stepsContainer}>
+          <View
+            style={staticStyles.stepsContainer}
+            accessibilityRole={stepsContainerAccessibilityRole}
+          >
             {steps.map((label, index) => {
               return (
                 <Step
@@ -143,6 +148,8 @@ const StepTracker = React.forwardRef(
                   stepIndex={index}
                   stepCount={steps.length}
                   tokens={themeTokens}
+                  accessibilityRole={stepAccessibilityRole}
+                  accessibilityCurrent={current === index && Platform.OS === 'web' && 'step'}
                 />
               )
             })}
@@ -154,7 +161,11 @@ const StepTracker = React.forwardRef(
                 selectStepTrackerLabelContainerStyles(themeTokens)
               ]}
             >
-              <Text style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}>
+              <Text
+                style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}
+                accessibilityRole="header"
+                accessibilityLevel={2}
+              >
                 {stepTrackerLabel}
               </Text>
             </View>

package/src/Typography/Typography.jsx

@@ -152,6 +152,18 @@ const Typography = React.forwardRef(
             },
             themeOptions
           )
+          if (themeTokens[vp].gradient) {
+            const tokensWithGradient = {
+              ...acc[vp],
+              color: 'transparent',
+              backgroundImage: generateGradientString(themeTokens[vp].gradient),
+              backgroundClip: 'text'
+            }
+            return {
+              ...acc,
+              [vp]: tokensWithGradient
+            }
+          }
           return acc
         },
         {}