@telus-uds/components-base 1.92.0 → 1.94.0

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/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/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 = {

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -8,6 +8,7 @@ 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _portal = require("@gorhom/portal");
 var _utils = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
@@ -21,10 +22,32 @@ const staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
-    position: 'absolute',
-    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+    zIndex: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    elevation: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    borderRadius: 4,
+    ..._Platform.default.select({
+      web: {
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
+      },
+      default: {
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 1,
+        shadowRadius: 8
+      }
+    })
+  },
+  card: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0
   },
-
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
@@ -37,6 +60,17 @@ const staticStyles = _StyleSheet.default.create({
     opacity: 0
   }
 });
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ..._Platform.default.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+});
 const selectCloseButtonContainerStyles = _ref => {
   let {
     paddingRight,
@@ -47,20 +81,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const selectPaddingContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  } = _ref2;
-  return {
-    paddingBottom: 35,
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  };
-};
-const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -74,22 +95,19 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     variant,
     tokens,
     copy,
-    onClose
-  } = _ref3;
+    onClose,
+    enableFullscreen = false
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
   const containerWidthHeight = {
-    minWidth,
-    minHeight,
-    ...(tokens.maxWidth && maxWidthSize && {
-      maxWidth: maxWidthSize
-    }),
-    ...(maxHeight && maxHeightSize && {
-      maxHeight: maxHeightSize
-    })
+    minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
+    minHeight: maxHeight ? maxHeightSize : minHeight,
+    maxWidth: maxWidthSize,
+    maxHeight: maxHeightSize
   };
   const {
     closeIcon: CloseIconComponent
@@ -103,9 +121,9 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       ref: ref,
       onLayout: onLayout,
-      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden],
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
-        tokens: selectPaddingContainerStyles(themeTokens),
+        tokens: staticStyles.card,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -138,7 +156,8 @@ ModalOverlay.propTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Modal'),
   copy: _utils.copyPropTypes,
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  enableFullscreen: _propTypes.default.bool
 };
 var _default = ModalOverlay;
 exports.default = _default;