@telus-uds/components-base 1.93.0 → 1.95.0

package/lib/DownloadApp/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DownloadApp = _interopRequireDefault(require("./DownloadApp"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _DownloadApp.default;
+exports.default = _default;

package/lib/Fieldset/FieldsetContainer.js

@@ -23,6 +23,7 @@ const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     name: fieldsetName,
     showBorderStyle = false,
     borderStyle,
+    style,
     ...rest
   } = _ref;
   // If needs border for error design or reset the component style
@@ -30,7 +31,10 @@ const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
     ref: ref,
     disabled: inactive,
-    style: styleContainer,
+    style: {
+      ...styleContainer,
+      ...style
+    },
     role: accessibilityRole,
     name: fieldsetName,
     ...selectProps(rest),
@@ -45,7 +49,8 @@ FieldsetContainer.propTypes = {
   inactive: _propTypes.default.bool,
   name: _propTypes.default.string,
   showBorderStyle: _propTypes.default.bool,
-  borderStyle: _propTypes.default.object
+  borderStyle: _propTypes.default.object,
+  style: _propTypes.default.object
 };
 var _default = FieldsetContainer;
 exports.default = _default;

package/lib/Fieldset/FieldsetContainer.native.js

@@ -18,12 +18,14 @@ const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   let {
     children,
     accessibilityRole,
+    style,
     ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
+    style: style,
     children: children
   });
 });
@@ -31,7 +33,8 @@ FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node,
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: _propTypes.default.string,
+  style: _propTypes.default.object
 };
 var _default = FieldsetContainer;
 exports.default = _default;

package/lib/FileUpload/FileUpload.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
+var _Button = require("../Button");
+var _Notification = _interopRequireDefault(require("../Notification"));
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _NotificationContent = _interopRequireDefault(require("./NotificationContent"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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.default.forwardRef((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    copy = 'en',
+    fileTypes,
+    allowMultipleFiles = false,
+    maxFileSize,
+    maxFilesCount = 1,
+    onUpload,
+    onDelete,
+    documentPicker,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('FileUpload', tokens, variant);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const inputFileRef = _react.default.useRef(null);
+  const [filesStatus, setFilesStatus] = _react.default.useState([]);
+  const [renderTrigger, setRenderTrigger] = _react.default.useState(0);
+  _react.default.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 > (0, _utils.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__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+              file: file,
+              color: selectComponentTokens(themeTokens, 'notification').color,
+              children: ` ${getCopy('uploadError')} ${results[index].error}.`
+            }),
+            style: 'error'
+          };
+        }
+        return {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+            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__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('uploadSuccess')}`
+          }),
+          style: 'success',
+          file,
+          onDismiss: () => handleFileDeletion(file)
+        }, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('deleteProblem')} ${result.error}.`
+          }),
+          style: 'error',
+          file
+        }] : filteredFilesStatus;
+      });
+    } catch (error) {
+      setFilesStatus([{
+        description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          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.default.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      label: getCopy('label'),
+      hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
+      hintPosition: "below"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 4
+    }), _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "file",
+      multiple: allowMultipleFiles,
+      ref: inputFileRef,
+      hidden: true,
+      accept: fileTypes && fileTypes.map(type => `.${type}`).join(', '),
+      onChange: handleOnChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+      onClick: onFileUploadButtonClick,
+      tokens: selectComponentTokens(themeTokens, 'button'),
+      children: getCopy('buttonLabel')
+    }), filesStatus.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        space: 4,
+        children: filesStatus.map((_ref3, index) => {
+          let {
+            description,
+            style,
+            onDismiss
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
+            variant: {
+              style
+            },
+            dismissible: !!onDismiss,
+            onDismiss: onDismiss,
+            tokens: selectComponentTokens(themeTokens, 'notification'),
+            children: description
+          }, `${index.toString()}-${renderTrigger}`);
+        })
+      })]
+    })]
+  });
+});
+FileUpload.displayName = 'FileUpload';
+FileUpload.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('FileUpload'),
+  variant: _utils.variantProp.propType,
+  /**
+   * To define the locale of the copy
+   */
+  copy: _utils.copyPropTypes,
+  /**
+   * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
+   */
+  fileTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * Whether to allow multiple files to be uploaded.
+   */
+  allowMultipleFiles: _propTypes.default.bool,
+  /**
+   * The maximum file size allowed for upload in MB.
+   */
+  maxFileSize: _propTypes.default.number,
+  /**
+   * The maximum number of files allowed for upload.
+   */
+  maxFilesCount: _propTypes.default.number,
+  /**
+   * Callback function called when a file is uploaded.
+   */
+  onUpload: _propTypes.default.func,
+  /**
+   * Callback function called when a file is deleted
+   */
+  onDelete: _propTypes.default.func,
+  /**
+   * The document picker to use for mobile
+   */
+  documentPicker: _propTypes.default.object
+};
+var _default = FileUpload;
+exports.default = _default;

package/lib/FileUpload/NotificationContent.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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.
+ */const NotificationContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    file,
+    color,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    tokens: {
+      color
+    },
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: {
+        bold: true
+      },
+      tokens: {
+        color
+      },
+      children: file.name
+    }), children]
+  });
+});
+NotificationContent.displayName = 'NotificationContent';
+NotificationContent.propTypes = {
+  /**
+   * The file object.
+   */
+  file: _propTypes.default.object,
+  /**
+   * The content to be displayed.
+   */
+  children: _propTypes.default.string,
+  /**
+   * The color of the typography.
+   */
+  color: _propTypes.default.string
+};
+var _default = NotificationContent;
+exports.default = _default;

package/lib/FileUpload/dictionary.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _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.`
+  }
+};
+exports.default = _default;

package/lib/FileUpload/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _FileUpload = _interopRequireDefault(require("./FileUpload"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _FileUpload.default;
+exports.default = _default;

package/lib/Icon/IconText.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireWildcard(require("./Icon"));
 var _StackView = require("../StackView");
 var _utils = require("../utils");
@@ -66,6 +68,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   });
   const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
   return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
@@ -80,9 +91,9 @@ IconText.propTypes = {
    */
   space: _utils.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.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -100,5 +111,11 @@ IconText.propTypes = {
   children: _propTypes.default.node
   /* eslint-enable react/no-unused-prop-types */
 };
+
+const staticStyles = _StyleSheet.default.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
 var _default = IconText;
 exports.default = _default;

package/lib/Link/LinkBase.js

@@ -245,9 +245,9 @@ LinkBase.propTypes = {
    */
   icon: _propTypes.default.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.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.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/Link/TextButton.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _utils = require("../utils");
@@ -27,23 +25,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     ...linkProps
   } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: styles.textButton,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
-      onPress: onPress,
-      accessibilityRole: accessibilityRole,
-      tokens: getTokens,
-      ref: ref,
-      ...linkProps,
-      children: children
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    ...linkProps,
+    children: children
   });
 });
-const styles = _StyleSheet.default.create({
-  textButton: {
-    flex: 1
-  }
-});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ..._LinkBase.default.propTypes,

package/lib/Modal/Modal.js

@@ -158,7 +158,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     if (_Platform.default.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/Modal/ModalContent.js

@@ -141,12 +141,15 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
-        tokens: {
-          color: cancelButtonColor
-        },
-        onPress: onCancel,
-        children: cancelButtonText
+      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.cancelButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
       }) : null]
     })]
   });
@@ -157,6 +160,9 @@ const styles = _StyleSheet.default.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
+  },
+  cancelButton: {
+    flex: 1
   }
 });
 ModalContent.propTypes = {