@telus-uds/components-base 1.93.0 → 1.95.0

package/lib-module/FileUpload/FileUpload.js

@@ -0,0 +1,329 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, convertFromMegaByteToByte } from '../utils';
+import InputLabel from '../InputLabel';
+import { Button } from '../Button';
+import Notification from '../Notification';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import NotificationContent from './NotificationContent';
+import dictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const getHintFromFileTypes = fileTypes => {
+  const acceptedFileTypes = fileTypes.map(type => type.toUpperCase());
+  return acceptedFileTypes.reduce((acc, curr, index) => {
+    if (index === 0) {
+      return `${curr}`;
+    }
+    return `${acc}, ${curr}`;
+  }, '');
+};
+const stringifyFileTypesList = (fileTypes, getCopy) => {
+  const acceptedFileTypes = fileTypes.map(type => `.${type.toUpperCase()}`);
+  return acceptedFileTypes.reduce((acc, curr, index) => {
+    if (index === 0) {
+      return curr;
+    }
+    if (index === acceptedFileTypes.length - 1) {
+      return `${acc} ${getCopy('or')} ${curr}`;
+    }
+    return `${acc}, ${curr}`;
+  }, '');
+};
+const selectComponentTokens = (tokens, componentIdentifier) => {
+  return Object.entries(tokens).reduce((acc, _ref) => {
+    let [key, value] = _ref;
+    if (key.startsWith(componentIdentifier) && value !== null) {
+      const newKey = key.replace(componentIdentifier, '').replace('Text', '').charAt(0).toLowerCase() + key.replace(componentIdentifier, '').replace('Text', '').slice(1);
+      acc[newKey] = value;
+    }
+    return acc;
+  }, {});
+};
+
+/**
+ * FileUpload component for uploading files.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <FileUpload
+ *   tokens={tokens}
+ *   variant={variant}
+ *   copy={copy}
+ *   fileTypes={fileTypes}
+ *   allowMultipleFiles={allowMultipleFiles}
+ *   maxFileSize={maxFileSize}
+ *   maxFilesCount={maxFilesCount}
+ *   onUpload={onUpload}
+ *   onDelete={onDelete}
+ *   documentPicker={documentPicker}
+ *   {...rest}
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.tokens - The tokens for styling the component.
+ * @param {string} props.variant - The variant of the component.
+ * @param {string} props.copy - The copy for the component.
+ * @param {string[]} props.fileTypes - The allowed file types for upload.
+ * @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 {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.
+ * @param {any} props.rest - Additional props to be spread to the component.
+ * @returns {JSX.Element} The rendered FileUpload component.
+ */
+const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    copy = 'en',
+    fileTypes,
+    allowMultipleFiles = false,
+    maxFileSize,
+    maxFilesCount = 1,
+    onUpload,
+    onDelete,
+    documentPicker,
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('FileUpload', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const inputFileRef = React.useRef(null);
+  const [filesStatus, setFilesStatus] = React.useState([]);
+  const [renderTrigger, setRenderTrigger] = React.useState(0);
+  React.useEffect(() => {
+    setRenderTrigger(prev => prev + 1);
+  }, [filesStatus]);
+  const areFileTypesExtensionsValid = files => files.some(file => {
+    const fileExtension = file.name.split('.').pop().toLowerCase();
+    if (!fileTypes.includes(fileExtension)) {
+      setFilesStatus([{
+        description: getCopy('wrongFileType').replace('%{fileType}', stringifyFileTypesList(fileTypes, getCopy)),
+        style: 'error'
+      }]);
+      return false;
+    }
+    return true;
+  });
+  const areFileSizesWithinLimit = files => files.some(file => {
+    if (file.size > convertFromMegaByteToByte(maxFileSize)) {
+      setFilesStatus([{
+        description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+        style: 'error'
+      }]);
+      return false;
+    }
+    return true;
+  });
+  const areMoreFilesUploadedThanAllowed = files => {
+    if (files.length > maxFilesCount) {
+      setFilesStatus([{
+        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
+        style: 'error'
+      }]);
+      return true;
+    }
+    return false;
+  };
+  const handleFilesUpload = async files => {
+    try {
+      const results = await onUpload(files);
+      const currentFilesStatus = files.map((file, index) => {
+        if (results[index].error) {
+          return {
+            description: /*#__PURE__*/_jsx(NotificationContent, {
+              file: file,
+              color: selectComponentTokens(themeTokens, 'notification').color,
+              children: ` ${getCopy('uploadError')} ${results[index].error}.`
+            }),
+            style: 'error'
+          };
+        }
+        return {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('uploadSuccess')}`
+          }),
+          style: 'success',
+          file,
+          onDismiss: () => handleFileDeletion(file)
+        };
+      });
+      setFilesStatus(currentFilesStatus);
+    } catch (error) {
+      setFilesStatus([{
+        description: allowMultipleFiles ? getCopy('problemUploadingMultipleFiles') : getCopy('problemUploading'),
+        style: 'error'
+      }]);
+    }
+  };
+  const handleFileDeletion = async file => {
+    const copyFile = {
+      ...file
+    };
+    try {
+      const result = await onDelete(copyFile);
+      setFilesStatus(prevStatus => {
+        const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
+        return result.error ? [...filteredFilesStatus, {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('uploadSuccess')}`
+          }),
+          style: 'success',
+          file,
+          onDismiss: () => handleFileDeletion(file)
+        }, {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('deleteProblem')} ${result.error}.`
+          }),
+          style: 'error',
+          file
+        }] : filteredFilesStatus;
+      });
+    } catch (error) {
+      setFilesStatus([{
+        description: /*#__PURE__*/_jsx(NotificationContent, {
+          file: file,
+          color: selectComponentTokens(themeTokens, 'notification').color,
+          children: ` ${getCopy('problemDeleting')}`
+        }),
+        style: 'error'
+      }]);
+    }
+  };
+  const handleOnChange = async event => {
+    const targetFiles = event.target.files;
+    const files = Array.from(targetFiles);
+    if (files.length === 0) return;
+    if (fileTypes && !areFileTypesExtensionsValid(files)) return;
+    if (maxFileSize && !areFileSizesWithinLimit(files)) return;
+    if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return;
+    await handleFilesUpload(files);
+    if (inputFileRef.current) inputFileRef.current.value = '';
+  };
+  const onFileUploadButtonClick = async () => {
+    if (Platform.OS === 'web') {
+      inputFileRef.current.click();
+    } else {
+      try {
+        const result = await documentPicker.getDocumentAsync({
+          multiple: allowMultipleFiles
+        });
+        if (result) {
+          const files = Array.isArray(result) ? result : [result];
+          if (files.find(file => file.type === 'cancel')) return;
+          const event = {
+            target: {
+              files
+            }
+          };
+          await handleOnChange(event);
+        }
+      } catch (_) {
+        setFilesStatus([{
+          description: allowMultipleFiles ? getCopy('problemUploadingFiles') : getCopy('problemUploading'),
+          style: 'error'
+        }]);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(InputLabel, {
+      label: getCopy('label'),
+      hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
+      hintPosition: "below"
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 4
+    }), Platform.OS === 'web' && /*#__PURE__*/_jsx("input", {
+      type: "file",
+      multiple: allowMultipleFiles,
+      ref: inputFileRef,
+      hidden: true,
+      accept: fileTypes && fileTypes.map(type => `.${type}`).join(', '),
+      onChange: handleOnChange
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onFileUploadButtonClick,
+      tokens: selectComponentTokens(themeTokens, 'button'),
+      children: getCopy('buttonLabel')
+    }), filesStatus.length > 0 && /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(StackView, {
+        space: 4,
+        children: filesStatus.map((_ref3, index) => {
+          let {
+            description,
+            style,
+            onDismiss
+          } = _ref3;
+          return /*#__PURE__*/_jsx(Notification, {
+            variant: {
+              style
+            },
+            dismissible: !!onDismiss,
+            onDismiss: onDismiss,
+            tokens: selectComponentTokens(themeTokens, 'notification'),
+            children: description
+          }, `${index.toString()}-${renderTrigger}`);
+        })
+      })]
+    })]
+  });
+});
+FileUpload.displayName = 'FileUpload';
+FileUpload.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('FileUpload'),
+  variant: variantProp.propType,
+  /**
+   * To define the locale of the copy
+   */
+  copy: copyPropTypes,
+  /**
+   * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
+   */
+  fileTypes: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Whether to allow multiple files to be uploaded.
+   */
+  allowMultipleFiles: PropTypes.bool,
+  /**
+   * The maximum file size allowed for upload in MB.
+   */
+  maxFileSize: PropTypes.number,
+  /**
+   * The maximum number of files allowed for upload.
+   */
+  maxFilesCount: PropTypes.number,
+  /**
+   * Callback function called when a file is uploaded.
+   */
+  onUpload: PropTypes.func,
+  /**
+   * Callback function called when a file is deleted
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The document picker to use for mobile
+   */
+  documentPicker: PropTypes.object
+};
+export default FileUpload;

package/lib-module/FileUpload/NotificationContent.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '../Typography';
+
+/**
+ * Renders the content of a notification for a file upload.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Object} props.file - The file object.
+ * @param {string} props.children - The content to be displayed.
+ * @param {string} props.color - The color of the typography.
+ * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
+ * @returns {JSX.Element} The rendered NotificationContent component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const NotificationContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    file,
+    color,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Typography, {
+    tokens: {
+      color
+    },
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: {
+        bold: true
+      },
+      tokens: {
+        color
+      },
+      children: file.name
+    }), children]
+  });
+});
+NotificationContent.displayName = 'NotificationContent';
+NotificationContent.propTypes = {
+  /**
+   * The file object.
+   */
+  file: PropTypes.object,
+  /**
+   * The content to be displayed.
+   */
+  children: PropTypes.string,
+  /**
+   * The color of the typography.
+   */
+  color: PropTypes.string
+};
+export default NotificationContent;

package/lib-module/FileUpload/dictionary.js

@@ -0,0 +1,40 @@
+export default {
+  en: {
+    label: 'Upload files',
+    buttonLabel: 'Choose files',
+    dismissButtonLabel: 'Remove file',
+    wrongFileType: 'The selected file must be a %{fileType}.',
+    allowedFileTypes: 'Allowed file types: %{fileTypes}.',
+    fileTooBig: 'The selected file must be smaller than %{size}MB.',
+    fileIsEmpty: 'The selected file is empty.',
+    problemUploading: 'The selected file could not be uploaded. Try again.',
+    problemDeleting: 'The selected file could not be deleted. Try again.',
+    problemUploadingMultipleFiles: 'The selected files could not be uploaded. Try again.',
+    only: 'only',
+    and: 'and',
+    or: 'or',
+    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.'
+  },
+  fr: {
+    label: 'Téléverser les fichiers"',
+    buttonLabel: 'Choisir les fichiers',
+    dismissButtonLabel: 'Supprimer le fichier',
+    wrongFileType: 'Le fichier sélectionné doit être au format %{fileType}.',
+    allowedFileTypes: 'Formats de fichiers autorisés : %{fileTypes}.',
+    fileTooBig: 'Le fichier sélectionné doit être inférieur à %{size}Mo.',
+    fileIsEmpty: 'Le fichier sélectionné est vide.',
+    problemUploading: 'Impossible de téléverser le fichier sélectionné. Veuillez réessayer.',
+    problemDeleting: `Le fichier sélectionné n'a pas pu être supprimé. Réessayez.`,
+    problemUploadingMultipleFiles: `Les fichiers sélectionnés n'ont pas pu être téléchargés. Veuillez réessayer.`,
+    only: 'uniquement',
+    and: 'et',
+    or: 'ou',
+    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.`
+  }
+};

package/lib-module/FileUpload/index.js

@@ -0,0 +1,2 @@
+import FileUpload from './FileUpload';
+export default FileUpload;

package/lib-module/Icon/IconText.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Icon, { iconComponentPropTypes } from './Icon';
 import { getStackedContent } from '../StackView';
 import { spacingProps } from '../utils';
@@ -15,6 +17,7 @@ import { spacingProps } from '../utils';
  *  - within a container with `flexDirection: 'row'`
  */
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _iconProps$tokens, _iconProps$tokens2;
   let {
@@ -59,6 +62,15 @@ const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/_jsx(View, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
   return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
@@ -73,9 +85,9 @@ IconText.propTypes = {
    */
   space: spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -94,4 +106,9 @@ IconText.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 };
 
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
 export default IconText;

package/lib-module/Link/LinkBase.js

@@ -238,9 +238,9 @@ LinkBase.propTypes = {
    */
   icon: PropTypes.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

package/lib-module/Link/TextButton.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { variantProp } from '../utils';
@@ -22,23 +20,15 @@ const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...linkProps
   } = _ref;
   const getTokens = useThemeTokensCallback('Link', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.textButton,
-    children: /*#__PURE__*/_jsx(LinkBase, {
-      onPress: onPress,
-      accessibilityRole: accessibilityRole,
-      tokens: getTokens,
-      ref: ref,
-      ...linkProps,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(LinkBase, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    ...linkProps,
+    children: children
   });
 });
-const styles = StyleSheet.create({
-  textButton: {
-    flex: 1
-  }
-});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ...LinkBase.propTypes,

package/lib-module/Modal/Modal.js

@@ -153,7 +153,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     if (Platform.OS === 'web') {
       const handleFocus = () => {
         // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current) {
+        if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
           closeButtonRef.current.focus();
         }
         return undefined;

package/lib-module/Modal/ModalContent.js

@@ -135,12 +135,15 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/_jsx(CancelButton, {
-        tokens: {
-          color: cancelButtonColor
-        },
-        onPress: onCancel,
-        children: cancelButtonText
+      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
+        style: styles.cancelButton,
+        children: /*#__PURE__*/_jsx(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
       }) : null]
     })]
   });
@@ -151,6 +154,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
+  },
+  cancelButton: {
+    flex: 1
   }
 });
 ModalContent.propTypes = {