@telus-uds/components-base 3.0.0 → 3.2.0

package/lib/esm/Modal/ModalContent.js

@@ -128,7 +128,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           },
           children: subHeading
         })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
+      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
         space: 3
       })]
     }), bodyText && /*#__PURE__*/_jsx(Box, {

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -105,6 +105,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     headerFontColor,
     headerFontSize,
     buttonDirection,
+    buttonIconBackgroundColor,
     headerFontWeight,
     headerLineHeight,
     subHeaderFontWeight,
@@ -148,7 +149,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingTop: labelPaddingTop,
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
-    paddingRight: labelPaddingRight
+    paddingRight: labelPaddingRight,
+    iconBackground: buttonIconBackgroundColor
   };
   const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/esm/Notification/Notification.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -64,12 +64,12 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+  width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -83,7 +83,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
     styles: containerStyles
   } = StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -95,22 +95,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...createMediaQueryStyles({
-        xs: {
-          maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
-        },
-        md: {
-          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
-        },
-        lg: {
-          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
-        },
-        sm: {
-          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
-        },
-        xl: {
-          maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
-        }
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && {
+        alignSelf: 'center'
       })
     }
   });
@@ -175,17 +162,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && {
+        alignSelf: 'center'
+      })
     }
   },
   staticContentContainerStyles: {
@@ -303,7 +292,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = viewports.map.get(viewports.xl);
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -325,7 +314,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
     notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }

package/lib/esm/Tabs/TabsItem.js

@@ -61,7 +61,9 @@ const selectContainerStyles = _ref3 => {
     borderWidth = 0,
     borderRadius,
     paddingHorizontal = 0,
-    paddingVertical = 0
+    paddingVertical = 0,
+    marginHorizontal = 0,
+    marginVertical = 0
   } = _ref3;
   return {
     backgroundColor,
@@ -69,7 +71,9 @@ const selectContainerStyles = _ref3 => {
     borderWidth,
     borderRadius,
     paddingHorizontal: paddingHorizontal - borderWidth,
-    paddingVertical: paddingVertical - borderWidth
+    paddingVertical: paddingVertical - borderWidth,
+    marginHorizontal,
+    marginVertical
   };
 };
 

package/lib/esm/TextInput/TextInputBase.js

@@ -363,32 +363,6 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     ...themeTokens,
     height
   }, themeOptions, inactive, type, buttons?.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
-  const {
-    minHeight = 0,
-    maxHeight = Infinity
-  } = nativeInputStyle;
-  const [inputHeight, setInputHeight] = React.useState(minHeight || 0);
-
-  /* get the new height between the limits and update 
-  the state with the new height */
-  const measureHeightWeb = React.useCallback(() => {
-    const el = inputRef.current;
-    const scrollHeight = el.scrollHeight || 0;
-    let newHeight = Math.max(scrollHeight, minHeight);
-    newHeight = Math.min(newHeight, maxHeight);
-    setInputHeight(newHeight);
-  }, [inputRef, minHeight, maxHeight]);
-
-  /* restores the height and the value first to then 
-  calculate the height correctly */
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && inputRef.current) {
-      const el = inputRef.current;
-      el.style.height = 'auto';
-      el.value = currentValue;
-      measureHeightWeb();
-    }
-  }, [currentValue, measureHeightWeb, inputRef]);
   const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
@@ -408,10 +382,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       ref: inputRef,
       keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric ? 'numeric' : undefined,
-      style: {
-        ...nativeInputStyle,
-        height: Math.max(inputHeight, minHeight)
-      },
+      style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {

package/lib/esm/Typography/Typography.js

@@ -63,7 +63,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tag = typeof heading === 'string' ? heading : undefined,
     accessibilityRole = heading === true ? 'header' : undefined,
     block = false,
-    align = undefined,
+    align = Platform.OS === 'web' ? 'inherit' : undefined,
     tokens,
     dataSet,
     strikeThrough = false,

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.0.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.0.0",
+  "version": "3.2.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.0.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.0.0",
+  "version": "3.2.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -47,12 +47,7 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
+    left: 0
   },
   animationControlButton: {
     position: 'absolute',
@@ -872,7 +867,12 @@ const Carousel = React.forwardRef(
             width={containerLayout.width}
           >
             <View
-              style={[staticStyles.root]}
+              style={[
+                staticStyles.root,
+                {
+                  ...(Platform.OS === 'web' ? { outline: 'none' } : {})
+                }
+              ]}
               onLayout={onContainerLayout}
               ref={ref}
               {...systemProps}

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Animated, Platform, View, Text } from 'react-native'
+import { Animated, Platform, View, Text, StyleSheet, ScrollView } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -117,7 +117,7 @@ const ExpandCollapsePanel = React.forwardRef(
     })
 
     const handleControlPress = (event) => {
-      onToggle(panelId, event)
+      onToggle?.(panelId, event)
       if (onPress) onPress(panelId, event)
     }
 
@@ -141,7 +141,7 @@ const ExpandCollapsePanel = React.forwardRef(
 
     return content ? (
       <View
-        style={selectContentPanelStyles(themeTokens)}
+        style={[selectContentPanelStyles(themeTokens), staticStyles.panelContainer]}
         accessibilityLabel={panelAccessibilityLabel}
       >
         {typeof children === 'string' ? (
@@ -156,7 +156,11 @@ const ExpandCollapsePanel = React.forwardRef(
         )}
       </View>
     ) : (
-      <View ref={ref} style={themeTokens} accessibilityLabel={panelAccessibilityLabel}>
+      <View
+        ref={ref}
+        style={[themeTokens, staticStyles.container]}
+        accessibilityLabel={panelAccessibilityLabel}
+      >
         <View style={selectControlPanelStyles(themeTokens)}>
           <ExpandCollapseControl
             {...selectedProps}
@@ -179,32 +183,58 @@ const ExpandCollapsePanel = React.forwardRef(
             }}
           />
         )}
-        <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
+        <Animated.ScrollView ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
           <View
             onLayout={onContainerLayout}
             style={{
               ...Platform.select({
                 default: {
-                  flex: 1
+                  flex: 1,
+                  overflow: 'hidden'
                 },
-                web: {}
+                web: {
+                  overflow: 'hidden'
+                }
               })
             }}
           >
-            <View
-              style={selectContainerStyles(themeTokens)}
-              accessibilityLabel={subPanelAccessibilityLabel}
-            >
-              {children}
-            </View>
+            {Platform.OS === 'web' ? (
+              <View
+                style={selectContainerStyles(themeTokens)}
+                accessibilityLabel={subPanelAccessibilityLabel}
+              >
+                {children}
+              </View>
+            ) : (
+              <ScrollView
+                onContentSizeChange={(_, height) => {
+                  setContainerHeight(height)
+                }}
+                style={selectContainerStyles(themeTokens)}
+                accessibilityLabel={subPanelAccessibilityLabel}
+              >
+                {children}
+              </ScrollView>
+            )}
           </View>
-        </Animated.View>
+        </Animated.ScrollView>
       </View>
     )
   }
 )
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel'
 
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
+  panelContainer: {
+    flexGrow: 1,
+    alignSelf: 'stretch'
+  }
+})
+
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,

package/src/Icon/Icon.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Platform, View } from 'react-native'
+import { Platform, View, useWindowDimensions } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, scaleWithText, variantProp } from '../utils'
+import { getTokensPropType, variantProp } from '../utils'
 
 const Icon = React.forwardRef(
   (
@@ -19,8 +19,9 @@ const Icon = React.forwardRef(
     ref
   ) => {
     const themeTokens = useThemeTokens('Icon', tokens, variant)
+    const { fontScale } = useWindowDimensions()
 
-    const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size
+    const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size
 
     const iconContent = (
       <IconComponent title={accessibilityLabel} size={size} color={themeTokens.color} />

package/src/Link/LinkBase.jsx

@@ -89,7 +89,9 @@ const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX, icon
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
   const translateY =
-    iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+    iconTranslateY && iconTranslateY !== 0
+      ? iconTranslateY
+      : blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
   return {
     color,
     translateX: iconTranslateX,

package/src/List/ListItemMark.jsx

@@ -27,8 +27,13 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+const selectBulletContainerStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerHeight,
+  itemBulletContainerAlign
+}) => ({
   width: itemBulletContainerWidth,
+  height: itemBulletContainerHeight,
   alignItems: itemBulletContainerAlign
 })
 
@@ -45,11 +50,12 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
 
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
 
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens)
     return (
-      <View style={sideItemContainerStyles}>
+      <View style={[sideItemContainerStyles, bulletContainerStyles]}>
         <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
       </View>
     )
@@ -66,7 +72,7 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
         style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
         testID="unordered-item-bullet"
       >
-        <Icon icon={bulletIcon} tokens={{ color: bulletColor }} />
+        <Icon icon={bulletIcon} tokens={{ color: bulletColor, size: themeTokens.itemIconSize }} />
       </View>
     </View>
   )

package/src/Modal/Modal.jsx

@@ -241,10 +241,10 @@ const Modal = React.forwardRef(
                 cancelButtonText={cancelButtonText}
                 cancelButtonType={cancelButtonType}
               >
-                {Platform !== 'web' ? (
+                {Platform.OS !== 'web' ? (
                   <ScrollView style={selectScrollViewStyles}>{children}</ScrollView>
                 ) : (
-                  { children }
+                  children
                 )}
               </ModalContent>
             </View>

package/src/Modal/ModalContent.jsx

@@ -117,7 +117,7 @@ const ModalContent = React.forwardRef(
                 <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
               </View>
             )}
-            {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
+            {Boolean((bodyText || children) && hasHeadingSection) && <Spacer space={3} />}
           </View>
         )}
         {bodyText && (

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -109,6 +109,7 @@ const MultiSelectFilter = React.forwardRef(
       headerFontColor,
       headerFontSize,
       buttonDirection,
+      buttonIconBackgroundColor,
       headerFontWeight,
       headerLineHeight,
       subHeaderFontWeight,
@@ -151,7 +152,8 @@ const MultiSelectFilter = React.forwardRef(
       paddingTop: labelPaddingTop,
       paddingBottom: labelPaddingBottom,
       paddingLeft: labelPaddingLeft,
-      paddingRight: labelPaddingRight
+      paddingRight: labelPaddingRight,
+      iconBackground: buttonIconBackgroundColor
     }
     const getButtonDropdownTokens = useThemeTokensCallback(
       'ButtonDropdown',

package/src/Notification/Notification.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { View, Platform } from 'react-native'
-
+import { View } from 'react-native'
 import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+
 import {
   applyTextStyles,
   useTheme,
@@ -16,7 +17,6 @@ import {
   variantProp,
   viewProps,
   wrapStringsInText,
-  useResponsiveProp,
   createMediaQueryStyles,
   StyleSheet
 } from '../utils'
@@ -65,8 +65,8 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
 })
 
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+  width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 })
@@ -74,6 +74,7 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (
   themeTokens,
   themeOptions,
+  maxWidth,
   mediaIdsRef,
   dismissible,
   viewport,
@@ -91,7 +92,7 @@ const getMediaQueryStyles = (
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   })
@@ -101,13 +102,8 @@ const getMediaQueryStyles = (
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...createMediaQueryStyles({
-        xs: { maxWidth: themeOptions?.contentMaxWidth?.xs || '100%' },
-        md: { maxWidth: themeOptions?.contentMaxWidth?.md || '100%' },
-        lg: { maxWidth: themeOptions?.contentMaxWidth?.lg || '100%' },
-        sm: { maxWidth: themeOptions?.contentMaxWidth?.sm || '100%' },
-        xl: { maxWidth: themeOptions?.contentMaxWidth?.xl || '100%' }
-      })
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && { alignSelf: 'center' })
     }
   })
 
@@ -162,18 +158,17 @@ const getMediaQueryStyles = (
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection:
-        (system === true && viewport === 'xl') || Platform.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && { alignSelf: 'center' })
     }
   },
   staticContentContainerStyles: {
@@ -257,7 +252,7 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
-    const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = viewports.map.get(viewports.xl)
 
     const notificationComponentRef = React.useRef({
       containerStyles: {},
@@ -284,6 +279,7 @@ const Notification = React.forwardRef(
       notificationComponentRef.current = getMediaQueryStyles(
         themeTokens,
         themeOptions,
+        maxWidth,
         mediaIdsRef,
         dismissible,
         viewport,

package/src/Tabs/TabsItem.jsx

@@ -60,14 +60,18 @@ const selectContainerStyles = ({
   borderWidth = 0,
   borderRadius,
   paddingHorizontal = 0,
-  paddingVertical = 0
+  paddingVertical = 0,
+  marginHorizontal = 0,
+  marginVertical = 0
 }) => ({
   backgroundColor,
   borderColor,
   borderWidth,
   borderRadius,
   paddingHorizontal: paddingHorizontal - borderWidth,
-  paddingVertical: paddingVertical - borderWidth
+  paddingVertical: paddingVertical - borderWidth,
+  marginHorizontal,
+  marginVertical
 })
 
 /**

package/src/TextInput/TextInputBase.jsx

@@ -361,32 +361,6 @@ const TextInputBase = React.forwardRef(
       direction
     )
 
-    const { minHeight = 0, maxHeight = Infinity } = nativeInputStyle
-    const [inputHeight, setInputHeight] = React.useState(minHeight || 0)
-
-    /* get the new height between the limits and update 
-    the state with the new height */
-    const measureHeightWeb = React.useCallback(() => {
-      const el = inputRef.current
-      const scrollHeight = el.scrollHeight || 0
-
-      let newHeight = Math.max(scrollHeight, minHeight)
-      newHeight = Math.min(newHeight, maxHeight)
-
-      setInputHeight(newHeight)
-    }, [inputRef, minHeight, maxHeight])
-
-    /* restores the height and the value first to then 
-    calculate the height correctly */
-    React.useEffect(() => {
-      if (Platform.OS === 'web' && inputRef.current) {
-        const el = inputRef.current
-        el.style.height = 'auto'
-        el.value = currentValue
-        measureHeightWeb()
-      }
-    }, [currentValue, measureHeightWeb, inputRef])
-
     const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive
 
     return (
@@ -413,10 +387,7 @@ const TextInputBase = React.forwardRef(
           ref={inputRef}
           keyboardType={isNumeric ? 'numeric' : 'default'}
           inputMode={isNumeric ? 'numeric' : undefined}
-          style={{
-            ...nativeInputStyle,
-            height: Math.max(inputHeight, minHeight)
-          }}
+          style={nativeInputStyle}
           secureTextEntry={isPassword && !showPassword}
           {...inputProps}
         />