@telus-uds/components-base 2.2.0 → 2.4.0

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.3.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.2.0",
+  "version": "2.4.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/InputLabel/InputLabel.jsx

@@ -47,6 +47,8 @@ const InputLabel = React.forwardRef(
       tooltip,
       tokens,
       variant,
+      characterCount,
+      maxCharacterAllowed,
       ...rest
     },
     ref
@@ -95,12 +97,30 @@ const InputLabel = React.forwardRef(
               <Tooltip content={tooltip} copy={copy} />
             </View>
           )}
+          {maxCharacterAllowed && isHintInline && (
+            <Text style={[selectHintStyles({ ...themeTokens }), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          )}
         </View>
-        {hint && !isHintInline && (
+        {hint && !maxCharacterAllowed && !isHintInline && (
           <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
             {hint}
           </Text>
         )}
+        {hint && maxCharacterAllowed && !isHintInline && (
+          <View style={staticStyles.container}>
+            <Text
+              style={[selectHintStyles(themeTokens), staticStyles.flexHintBelow]}
+              nativeID={hintId}
+            >
+              {hint}
+            </Text>
+            <Text style={[selectHintStyles(themeTokens), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          </View>
+        )}
       </>
     )
   }
@@ -137,6 +157,14 @@ InputLabel.propTypes = {
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
+  /**
+   * Current number of characterts of an input text.
+   */
+  characterCount: PropTypes.number,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number,
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 }
@@ -148,13 +176,22 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexDirection: 'row'
   },
+  characterCountlabel: {
+    marginLeft: 'auto',
+    marginTop: 'auto'
+  },
   label: {
-    flexShrink: 1
+    flexShrink: 1,
+    alignSelf: 'center'
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
+  flexHintBelow: {
+    flexBasis: '100%',
+    flexShrink: 1
+  },
   tooltipAlign: {
     alignSelf: 'center',
     justifyContent: 'center'

package/src/InputSupports/InputSupports.jsx

@@ -6,7 +6,8 @@ import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, useCopy } from '../utils'
+import dictionary from './dictionary'
 
 const InputSupports = React.forwardRef(
   (
@@ -21,18 +22,31 @@ const InputSupports = React.forwardRef(
       feedbackProps = {},
       tooltip,
       validation,
+      maxCharacterAllowed,
+      inputValue,
       nativeID
     },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
+    const getCopy = useCopy({ dictionary, copy })
+
+    const maxCharsReachedErrorMessage =
+      inputValue?.length > maxCharacterAllowed
+        ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed)
+        : ''
+
+    const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation
 
     const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
       feedback,
       hint,
       label,
       validation,
-      nativeID
+      nativeID,
+      copy,
+      maxCharacterAllowed,
+      charactersCount: maxCharacterAllowed - inputValue?.length
     })
 
     return (
@@ -46,14 +60,18 @@ const InputSupports = React.forwardRef(
             hintId={hintId}
             tooltip={tooltip}
             forId={inputId}
+            characterCount={inputValue?.length}
+            maxCharacterAllowed={maxCharacterAllowed}
           />
         )}
-        {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
-        {feedback ? (
+        {typeof children === 'function'
+          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
+          : children}
+        {feedback || maxCharsReachedErrorMessage ? (
           <Feedback
             id={feedbackId}
-            title={feedback}
-            validation={validation}
+            title={feedback || maxCharsReachedErrorMessage}
+            validation={feedbackValidation}
             tokens={feedbackTokens}
             variant={{ icon: feedbackProps.showFeedbackIcon }}
             {...feedbackProps}
@@ -107,7 +125,15 @@ InputSupports.propTypes = {
   /**
    * ID for DOM element on web
    */
-  nativeID: PropTypes.string
+  nativeID: PropTypes.string,
+  /**
+   * The text value of a TextArea or TextInput
+   */
+  inputValue: PropTypes.string,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number
 }
 
 export default InputSupports

package/src/InputSupports/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    maxCharacters: 'Maximum %{charCount} characters',
+    charactersRemaining: '%{charCount} characters remaining',
+    maxCharsMessage: 'Must not exceed %{charCount} characters'
+  },
+  fr: {
+    maxCharacters: '%{charCount} caractères maximum',
+    charactersRemaining: '%{charCount} caractères restants',
+    maxCharsMessage: 'Ne doit pas dépasser %{charCount} caractères'
+  }
+}

package/src/InputSupports/useInputSupports.js

@@ -1,8 +1,20 @@
 import useUniqueId from '../utils/useUniqueId'
+import { useCopy } from '../utils'
+import dictionary from './dictionary'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint,
+  nativeID,
+  copy,
+  maxCharacterAllowed,
+  charactersCount
+}) => {
+  const getCopy = useCopy({ dictionary, copy })
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -11,10 +23,19 @@ const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
 
   const a11yProps = {
     accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
+    accessibilityHint: joinDefined([
+      !hasValidationError && feedback,
+      hint,
+      maxCharacterAllowed
+        ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed)
+        : undefined
+    ]), // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([
       !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
-      hint && hintId
+      hint && hintId,
+      charactersCount
+        ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount)
+        : undefined
     ]),
     accessibilityInvalid: hasValidationError
   }

package/src/Link/LinkBase.jsx

@@ -32,21 +32,15 @@ const selectOuterBorderStyles = ({
   outerBorderGap,
   borderRadius,
   outerBorderOutline
-}) =>
-  // A view wrapper with a border on native messes up inline text alignment
-  // so for now make focus styles strictly web-only
-  Platform.OS === 'web'
-    ? {
-        // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-        outline: outerBorderOutline,
-        ...applyOuterBorder({
-          outerBorderColor,
-          outerBorderWidth,
-          outerBorderGap
-        }),
-        borderRadius
-      }
-    : {}
+}) => ({
+  outline: outerBorderOutline,
+  ...applyOuterBorder({
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap
+  }),
+  borderRadius
+})
 
 const selectTextStyles = ({ color, blockFontSize }) => {
   return {
@@ -174,6 +168,7 @@ const LinkBase = React.forwardRef(
           const decorationStyles = selectDecorationStyles(themeTokens)
           return [
             outerBorderStyles,
+            staticStyles.outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -273,6 +268,13 @@ const staticStyles = StyleSheet.create({
         pointerEvents: 'none'
       }
     })
+  },
+  outerBorderStyles: {
+    ...(Platform.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    })
   }
 })
 

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/Modal/Modal.jsx

@@ -149,7 +149,7 @@ const Modal = React.forwardRef(
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
-    `)
+    `) || []
           )
 
           const firstElement = focusableElements[0]