@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Listbox/ListboxOverlay.js

@@ -0,0 +1,77 @@
+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 Platform from "react-native-web/dist/exports/Platform";
+import Portal from '../Portal';
+import { useThemeTokens } from '../ThemeProvider';
+import Card from '../Card';
+import { jsx as _jsx } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+});
+const paddingVertical = 0;
+const paddingHorizontal = 0;
+const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isReady = false,
+    overlaidPosition,
+    maxWidth,
+    minWidth,
+    onLayout
+  } = _ref;
+  const systemTokens = useThemeTokens('Listbox', {}, {});
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    onLayout: onLayout,
+    style: [overlaidPosition, {
+      maxWidth,
+      minWidth
+    }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    children: /*#__PURE__*/_jsx(Card, {
+      tokens: {
+        shadow: systemTokens.shadow,
+        paddingBottom: paddingVertical,
+        paddingTop: paddingVertical,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal
+      },
+      children: children
+    })
+  });
+});
+const withPortal = Overlay => {
+  // eslint-disable-next-line react/display-name, react/no-multi-comp
+  return props => {
+    return /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Overlay, {
+        ...props
+      })
+    });
+  };
+};
+DropdownOverlay.displayName = 'DropdownOverlay';
+DropdownOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
+};
+export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/Listbox/PressableItem.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Text from "react-native-web/dist/exports/Text";
+import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
+import { useListboxContext } from './ListboxContext';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const getItemStyles = _ref => {
+  let {
+    groupFontName,
+    groupFontWeight,
+    itemFontSize,
+    itemPaddingTop,
+    itemPaddingBottom,
+    itemPaddingLeft,
+    itemBorderLeftWidth,
+    itemPaddingRight,
+    itemBackgroundColor,
+    itemColor,
+    itemOutline,
+    itemTextDecoration,
+    itemBorderLeftColor,
+    itemBorderRightWidth,
+    itemBorderRightColor,
+    itemBorderTopWidth,
+    itemBorderTopColor,
+    itemBorderBottomWidth,
+    itemBorderBottomColor,
+    itemBorderRadius
+  } = _ref;
+  return {
+    fontFamily: `${groupFontName}${groupFontWeight}normal`,
+    fontSize: itemFontSize,
+    paddingTop: itemPaddingTop - itemBorderTopWidth,
+    paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
+    paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
+    paddingRight: itemPaddingRight - itemBorderRightWidth,
+    width: '100%',
+    backgroundColor: itemBackgroundColor,
+    color: itemColor,
+    outline: itemOutline,
+    textDecoration: itemTextDecoration,
+    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
+    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
+    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
+    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+    borderRadius: itemBorderRadius,
+    justifyContent: 'center'
+  };
+};
+const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    href,
+    isChild = false,
+    onBlur,
+    onPress,
+    tabIndex = 0,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    id,
+    ...rest
+  } = _ref2;
+  const {
+    selectedId,
+    setSelectedId
+  } = useListboxContext();
+  const selectTextStyles = _ref3 => {
+    let {
+      groupFontName,
+      groupFontWeight,
+      itemFontSize,
+      itemColor,
+      lineHeight
+    } = _ref3;
+    return {
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: itemFontSize,
+      color: itemColor,
+      lineHeight: lineHeight * itemFontSize
+    };
+  };
+  const resolveButtonTokens = pressableState => {
+    const themeTokens = resolvePressableTokens(tokens, pressableState, {
+      isChild,
+      current: id === selectedId && id !== undefined
+    });
+    return themeTokens;
+  };
+  const handleKeyPress = event => {
+    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
+      onPress === null || onPress === void 0 || onPress(event);
+    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown') {
+      nextItemRef.current.focus();
+    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
+      prevItemRef.current.focus();
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    isChild: isChild,
+    style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
+    onBlur: onBlur,
+    onClick: onPress,
+    onKeyPress: handleKeyPress,
+    ref: ref,
+    tabIndex: tabIndex,
+    ...(href && {
+      href
+    }),
+    ...(onPress && {
+      onClick: onPress
+    }),
+    ...selectProps(rest),
+    onPress: () => {
+      setSelectedId(id);
+      onPress();
+    },
+    children: pressableState => {
+      return /*#__PURE__*/_jsxs(Text, {
+        style: selectTextStyles(resolveButtonTokens(pressableState)),
+        children: [children, " "]
+      });
+    }
+  });
+});
+PressableItem.displayName = 'PressableItem';
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+};
+export default PressableItem;

package/lib/Listbox/index.js

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

package/lib/Modal/Modal.js

@@ -1,46 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
-
-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 _ViewportProvider = require("../ViewportProvider");
-
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-
-var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import NativeModal from "react-native-web/dist/exports/Modal";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import IconButton from '../IconButton';
+import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
+import ModalContent from './ModalContent';
+import WebModal from './WebModal';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerPaddingLeft,
@@ -59,7 +34,6 @@ const selectContainerStyles = _ref => {
     paddingBottom: containerPaddingBottom
   };
 };
-
 const selectModalStyles = _ref2 => {
   let {
     backgroundColor,
@@ -77,12 +51,12 @@ const selectModalStyles = _ref2 => {
     height,
     paddingLeft,
     paddingRight,
-    paddingTop,
+    paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    // the 16 additions are due to the border that is present in the mobile version
     paddingBottom,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 };
-
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
@@ -93,7 +67,6 @@ const selectBackdropStyles = _ref3 => {
     opacity: backdropOpacity
   };
 };
-
 const selectCloseButtonContainerStyles = _ref4 => {
   let {
     paddingRight,
@@ -101,9 +74,13 @@ const selectCloseButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingRight,
-    paddingTop
+    paddingTop: Platform.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
   };
 };
+const selectScrollViewStyles = () => ({
+  flex: 1
+});
+
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -118,104 +95,239 @@ const selectCloseButtonContainerStyles = _ref4 => {
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-
-
-const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
     onClose,
     maxWidth,
     tokens,
-    variant,
     copy,
     closeButton,
+    onCancel = onClose,
+    onConfirm,
+    heading,
+    headingLevel,
+    subHeading,
+    subHeadingSize,
+    bodyText,
+    variant = {},
+    confirmButtonText,
+    confirmButtonVariant,
+    cancelButtonText,
+    cancelButtonType,
     ...rest
   } = _ref5;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
     maxWidth
   });
-  const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalRef = useScrollBlocking(isOpen);
+  const modalBodyRef = React.useRef(ref);
+  const modalContentRef = React.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const closeLabel = getCopy('closeButton');
-
   const handleClose = () => {
     if (typeof onClose === 'function') onClose();
   };
-
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
-  }; // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
-  // Hide the close button if `closeButton` is `null`.
-
+  };
+  const manageFocus = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      var _modalBodyRef$current;
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 || (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `));
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
 
+  // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
   const showCloseButton = closeButton !== null;
 
+  // These refs are used to manage focus in the web modal container
+  const focusTrapRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (Platform.OS === 'web') {
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
+
+      // Clean up the event listener
+      return () => document.removeEventListener('keydown', manageFocus);
+    }
+    return undefined;
+  }, [manageFocus]);
+  React.useEffect(() => {
+    if (isOpen) {
+      var _modalContentRef$curr;
+      modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 || _modalContentRef$curr.focus();
+    }
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
-    transparent: true,
-    ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.positioningContainer],
+  const content = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          ref: ref,
+        children: /*#__PURE__*/_jsxs(View, {
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
-          children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
             style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
               onPress: handleClose,
               icon: CloseIconComponent,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
-              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+              ref: closeButtonRef
             })
-          }), children]
+          }), /*#__PURE__*/_jsx(ModalContent, {
+            tokens: tokens,
+            variant: variant,
+            onCancel: onCancel,
+            onConfirm: onConfirm,
+            heading: heading,
+            headingLevel: headingLevel,
+            subHeading: subHeading,
+            subHeadingSize: subHeadingSize,
+            bodyText: bodyText,
+            confirmButtonText: confirmButtonText,
+            confirmButtonVariant: confirmButtonVariant,
+            cancelButtonText: cancelButtonText,
+            cancelButtonType: cancelButtonType,
+            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+              style: selectScrollViewStyles,
+              children: children
+            }) : {
+              children
+            }
+          })]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         onPress: handleClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
       })]
     })
   });
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsxs(WebModal, {
+      ...selectProps(rest),
+      ref: modalContentRef,
+      children: [content, /*#__PURE__*/_jsx(View, {
+        accessibilityRole: "button",
+        ref: focusTrapRef
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(NativeModal, {
+    transparent: true,
+    ...selectProps(rest),
+    children: content
+  });
 });
 Modal.displayName = 'Modal';
-Modal.propTypes = { ...selectedSystemPropTypes,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
-  copy: _utils.copyPropTypes,
-  isOpen: _propTypes.default.bool,
-  onClose: _propTypes.default.func,
-  maxWidth: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('Modal'),
-  variant: _utils.variantProp.propType,
-
+Modal.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * To define the locale of the copy
+   */
+  copy: copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
+  onClose: PropTypes.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
+  maxWidth: PropTypes.bool,
+  tokens: getTokensPropType('Modal'),
+  variant: variantProp.propType,
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
-  closeButton: _propTypes.default.node
+  closeButton: PropTypes.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: PropTypes.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: PropTypes.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: PropTypes.func
 };
-var _default = Modal;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
+export default Modal;
+const staticStyles = StyleSheet.create({
   backdrop: {
     position: 'absolute',
     top: 0,
@@ -223,7 +335,7 @@ const staticStyles = _StyleSheet.default.create({
     right: 0,
     bottom: 0,
     zIndex: -1,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         cursor: 'pointer'
       }
@@ -238,11 +350,15 @@ const staticStyles = _StyleSheet.default.create({
     maxHeight: '100%',
     // so that the container can expand up to the full viewport height
     width: '100%' // ensure that the modal actually expands to the set maxWidth
-
   },
   modal: {
-    maxHeight: '100%' // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-
+    maxHeight: '100%',
+    // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    ...Platform.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',