@telus-uds/components-base 1.86.0 → 1.88.0

package/lib/Radio/Radio.js

@@ -172,6 +172,7 @@ const Radio = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     onKeyDown: handleKeyDown,
     onPress: handleChange,
     ...selectedProps,
+    style: staticStyles.removeOutline,
     children: _ref5 => {
       let {
         focused: focus,
@@ -284,5 +285,8 @@ const staticStyles = _StyleSheet.default.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });

package/lib/Radio/RadioGroup.js

@@ -121,7 +121,7 @@ const RadioGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     readOnly: readOnly || inactive
   });
-  const uniqueFields = ['id', 'label'];
+  const uniqueFields = ['id'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }

package/lib/Tabs/Tabs.js

@@ -115,6 +115,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          render,
           ...itemRest
         } = _ref3;
         const itemId = id ?? label;
@@ -140,6 +141,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          render: render,
           ...itemProps,
           children: label
         }, itemId);
@@ -160,7 +162,8 @@ Tabs.propTypes = {
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
-    ref: _airbnbPropTypes.default.ref()
+    ref: _airbnbPropTypes.default.ref(),
+    render: _propTypes.default.func
   })),
   /**
    * `id` property of the current tab in the items array

package/lib/Tabs/TabsItem.js

@@ -101,6 +101,7 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       selected
     } : undefined,
     id,
+    render,
     ...rawRest
   } = _ref4;
   // Convert onClick etc to onPress etc if used in an integration
@@ -156,6 +157,10 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     }
     // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
   }, [selected, index, itemPositions]);
+  if (render) return render({
+    selected,
+    handlePress
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     onPress: handlePress,
@@ -213,7 +218,8 @@ TabsItem.propTypes = {
   selected: _propTypes.default.bool,
   itemPositions: itemPositionsPropType,
   children: _propTypes.default.string,
-  id: _propTypes.default.string
+  id: _propTypes.default.string,
+  render: _propTypes.default.func
 };
 const staticStyles = _StyleSheet.default.create({
   center: {

package/lib/Validator/Validator.js

@@ -32,6 +32,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
+    mask = '',
     onChange,
     tokens = {},
     variant = {},
@@ -77,32 +78,36 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       [codeId]: val
     });
   };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
   const handleChangeCode = () => {
     let code = '';
     for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
-      const oldValue = singleCodes[codeId];
-      const newValue = codeElement.value.replace(oldValue, '');
-      codeElement.value = newValue;
-      handleSingleCodes(codeId, codeElement.value, 'success');
-    }
     handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
+      changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
   };
   const handleKeyPress = (event, currentIndex, previousIndex) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
@@ -150,7 +155,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   /* eslint-disable react-hooks/exhaustive-deps */
   _react.default.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      codeReferences[prefix + i].current.value = text[i] ?? '';
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
@@ -207,6 +212,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: _propTypes.default.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: _propTypes.default.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   A11yText: true,
+  ActionCard: true,
   ActivityIndicator: true,
   Autocomplete: true,
   Box: true,
@@ -97,6 +98,12 @@ Object.defineProperty(exports, "Accordion", {
     return _ExpandCollapse.Accordion;
   }
 });
+Object.defineProperty(exports, "ActionCard", {
+  enumerable: true,
+  get: function () {
+    return _ActionCard.default;
+  }
+});
 Object.defineProperty(exports, "ActivityIndicator", {
   enumerable: true,
   get: function () {
@@ -524,6 +531,7 @@ Object.defineProperty(exports, "useViewport", {
   }
 });
 var _A11yText = _interopRequireDefault(require("./A11yText"));
+var _ActionCard = _interopRequireDefault(require("./ActionCard"));
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 var _Box = _interopRequireDefault(require("./Box"));

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -58,8 +58,8 @@ function useVerticalExpandAnimation(_ref) {
   if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (_Platform.default.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden';
+      // Without `display: 'none', descendents are focusable on web even when collapsed.
+      containerStyles.display = 'none';
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
@@ -73,7 +73,7 @@ function useVerticalExpandAnimation(_ref) {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
       // this won't work on native platforms
       containerStyles.height = 0;
-      containerStyles.visibility = 'hidden';
+      containerStyles.display = 'none';
     }
   } else if (_Platform.default.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;

package/lib/utils/props/tokens.js

@@ -113,7 +113,7 @@ const getTokensPropType = function () {
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -133,7 +133,7 @@ const getTokensSetPropType = function (componentTokenKeys) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+    return props[propName] !== null && props[propName] !== undefined && tokenValueType.isRequired(props, propName, ...args);
   }])));
   return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
 };

package/lib-module/ActionCard/ActionCard.js

@@ -0,0 +1,343 @@
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
+import Icon from '../Icon';
+import Card from '../Card';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
+  if (styles[key]) acc[key] = styles[key];
+  return acc;
+}, {});
+const selectInteractiveCardStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    ...(backgroundColor && {
+      backgroundColor
+    }),
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+};
+const selectIconStyles = _ref2 => {
+  let {
+    iconMarginBottom,
+    iconMarginLeft,
+    iconMarginRight,
+    iconMarginTop
+  } = _ref2;
+  return {
+    marginBottom: iconMarginBottom,
+    marginLeft: iconMarginLeft,
+    marginRight: iconMarginRight,
+    marginTop: iconMarginTop
+  };
+};
+const selectIconProps = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconColor
+  } = _ref3;
+  return {
+    icon,
+    variant: {
+      background: true,
+      padding: 'small'
+    },
+    tokens: {
+      backgroundColor: iconBackgroundColor,
+      color: iconColor
+    }
+  };
+};
+const selectTitleStyles = _ref4 => {
+  let {
+    titleMarginBottom,
+    titleMarginLeft,
+    titleMarginRight,
+    titleMarginTop
+  } = _ref4;
+  return {
+    marginBottom: titleMarginBottom,
+    marginLeft: titleMarginLeft,
+    marginRight: titleMarginRight,
+    marginTop: titleMarginTop
+  };
+};
+const selectTitleTextStyles = _ref5 => {
+  let {
+    titleFontColor,
+    titleFontName,
+    titleFontSize,
+    titleFontWeight,
+    titleLineHeight
+  } = _ref5;
+  return applyTextStyles({
+    fontColor: titleFontColor,
+    fontName: titleFontName,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  });
+};
+const selectContentStyles = _ref6 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop
+  } = _ref6;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop
+  };
+};
+const selectContentTextStyles = _ref7 => {
+  let {
+    contentFontColor,
+    contentFontName,
+    contentFontSize,
+    contentFontWeight,
+    contentLineHeight
+  } = _ref7;
+  return applyTextStyles({
+    fontColor: contentFontColor,
+    fontName: contentFontName,
+    fontSize: contentFontSize,
+    fontWeight: contentFontWeight,
+    lineHeight: contentLineHeight
+  });
+};
+const selectStatusIconProps = _ref8 => {
+  let {
+    statusIcon,
+    statusIconColor
+  } = _ref8;
+  return {
+    icon: statusIcon,
+    tokens: {
+      color: statusIconColor
+    },
+    variant: {
+      size: 'micro'
+    }
+  };
+};
+const selectActionIconStyles = _ref9 => {
+  let {
+    actionIconMarginBottom,
+    actionIconMarginLeft,
+    actionIconMarginRight,
+    actionIconMarginTop
+  } = _ref9;
+  return {
+    marginBottom: actionIconMarginBottom,
+    marginLeft: actionIconMarginLeft,
+    marginRight: actionIconMarginRight,
+    marginTop: actionIconMarginTop
+  };
+};
+const selectActionIconProps = _ref10 => {
+  let {
+    actionIcon,
+    actionIconColor
+  } = _ref10;
+  return {
+    icon: actionIcon,
+    tokens: {
+      color: actionIconColor
+    }
+  };
+};
+const ACTION_ICON_ANIMATION_DURATION = 100;
+
+/**
+ * ActionCard component represents a card with an action that can be triggered by the user.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ActionCard
+ *     icon={<Icon icon={Icons.EyeMasked} />}
+ *     title="Like"
+ *     href="/like"
+ *     accessibilityRole="link"
+ *     tokens={themeTokens}
+ *     variant={{validation: 'warning'}}
+ *     onPress={() => handleLike()}
+ *   >
+ *    Click here to like the post
+ *   </ActionCard>
+ * )
+ */
+const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+  let {
+    icon,
+    title,
+    children,
+    href,
+    direction = true,
+    accessibilityRole,
+    tokens,
+    variant,
+    ...rest
+  } = _ref11;
+  const themeTokens = useThemeTokens('ActionCard', tokens, variant);
+  const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  return /*#__PURE__*/_jsx(Card, {
+    ref: ref,
+    interactiveCard: {
+      body: pressableState => {
+        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
+        Animated.timing(actionIconAnimation, {
+          toValue: animate ? themeTokens.actionIconTranslate : 0,
+          duration: ACTION_ICON_ANIMATION_DURATION,
+          useNativeDriver: false
+        }).start();
+        return /*#__PURE__*/_jsxs(View, {
+          style: staticStyles.container,
+          children: [icon && /*#__PURE__*/_jsx(View, {
+            style: selectIconStyles(themeTokens),
+            children: /*#__PURE__*/_jsx(Icon, {
+              ...selectIconProps({
+                icon,
+                ...themeTokens
+              })
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: staticStyles.content,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: staticStyles.header,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [selectTitleStyles(themeTokens), staticStyles.title],
+                children: /*#__PURE__*/_jsxs(Text, {
+                  children: [wrapStringsInText(title, {
+                    style: selectTitleTextStyles(themeTokens)
+                  }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
+                    style: staticStyles.statusIcon,
+                    children: /*#__PURE__*/_jsx(Icon, {
+                      ...selectStatusIconProps(themeTokens)
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: staticStyles.icons,
+                children: direction && /*#__PURE__*/_jsx(Animated.View, {
+                  style: [selectActionIconStyles(themeTokens), {
+                    transform: [{
+                      translateX: actionIconAnimation
+                    }]
+                  }],
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    ...selectActionIconProps(themeTokens)
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: [staticStyles.body, selectContentStyles(themeTokens)],
+              children: typeof children === 'string' ? wrapStringsInText(children, {
+                style: selectContentTextStyles(themeTokens)
+              }) : children
+            })]
+          })]
+        });
+      },
+      tokens: selectInteractiveCardStyles(themeTokens)
+    },
+    tokens: selectCardStyles(themeTokens),
+    ...selectedProps
+  });
+});
+ActionCard.displayName = 'ActionCard';
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ActionCard'),
+  variant: variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: PropTypes.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: PropTypes.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: PropTypes.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: PropTypes.string
+};
+const staticStyles = StyleSheet.create({
+  body: {
+    flexDirection: 'column'
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  icons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  title: {
+    flexShrink: 1
+  },
+  statusIcon: {
+    marginLeft: 4
+  }
+});
+export default ActionCard;

package/lib-module/ActionCard/index.js

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

package/lib-module/Card/Card.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
+import { a11yProps, linkProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
 import PressableCardBase from './PressableCardBase';
 import CheckboxButton from '../Checkbox/CheckboxButton';
@@ -12,7 +12,7 @@ import RadioButton from '../Radio/RadioButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps]);
 const SelectionType = {
   Checkbox: 'checkbox',
   Radio: 'radiogroup',
@@ -267,7 +267,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
                 isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
                 isInactive: inactive,
                 onPress
-              })), interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body]
+              })), typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
             });
           }
         }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
@@ -309,7 +309,7 @@ Card.propTypes = {
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType

package/lib-module/Card/PressableCardBase.js

@@ -104,7 +104,7 @@ PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, {
-    requireAll: true,
+    partial: true,
     allowFunction: true
   }),
   variant: variantProp.propType

package/lib-module/Checkbox/Checkbox.js

@@ -204,6 +204,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         onKeyDown: handleKeyDown,
         onPress: handleChange,
         ...selectedProps,
+        style: staticStyles.removeOutline,
         children: _ref6 => {
           let {
             focused: focus,
@@ -335,5 +336,8 @@ const staticStyles = StyleSheet.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });

package/lib-module/List/List.js

@@ -42,15 +42,22 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     return child;
   });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
+  const content = /*#__PURE__*/_jsx(View, {
     style: styles.list,
     accessibilityRole: accessibilityRole,
+    ref: ref,
     ...selectProps(rest),
     children: items
   });
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx("div", {
+    style: styles.container,
+    children: content
+  }) : content;
 });
 const styles = StyleSheet.create({
+  container: {
+    display: 'block'
+  },
   list: {
     flex: 1,
     flexShrink: 1

package/lib-module/Modal/WebModal.js

@@ -68,7 +68,8 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexBasis: 0,
     zIndex: 1000,
-    display: 'flex'
+    display: 'flex',
+    overflowY: 'auto'
   }
 });
 export default WebModal;