@telus-uds/components-base 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
+This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.1.0
+
+Mon, 10 Feb 2025 17:30:58 GMT
+
+### Minor changes
+
+- `TabsItem`: Add new tokens & design (sergio.ramirez@telus.com)
+- `Listbox`: Include export type members for component. (jaime.tuyuc@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+
+### Patches
+
+- `Notification`: remove flex 1 as it was breaking notification on IOS (kristina.kirpichnikova@telus.com)
+- Carousel: may throw a runtime error regarding `outline` property (shahzaibkhalidmalik@outlook.com)
+- `Modal`: fix conditional platform rendering (guillermo.peitzner@telus.com)
+- `ChevronLink`: fix icon resize on IOS after font size increase (kristina.kirpichnikova@telus.com)
+- `ExpandCollapse`: Fix when have another ExpandCollapse nested (Mauricio.BatresMontejo@telus.com)
+- `LinkBase`: fix icon alignment (guillermo.peitzner@telus.com)
+- `TextInputBase`: fix rendering on mobile devices and default value rendering (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: add token to modify icon color background (Mauricio.BatresMontejo@telus.com)
+
 ## 3.0.0
 
-Fri, 31 Jan 2025 20:49:19 GMT
+Fri, 31 Jan 2025 20:53:28 GMT
 
 ### Major changes
 

package/lib/cjs/Carousel/Carousel.js

@@ -41,12 +41,7 @@ const staticStyles = _StyleSheet.default.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0,
-    ..._Platform.default.select({
-      web: {
-        outline: 'none'
-      }
-    })
+    left: 0
   },
   animationControlButton: {
     position: 'absolute',
@@ -752,7 +747,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         refocus: refocus,
         width: containerLayout.width,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          style: [staticStyles.root],
+          style: [staticStyles.root, {
+            ...(_Platform.default.OS === 'web' ? {
+              outline: 'none'
+            } : {})
+          }],
           onLayout: onContainerLayout,
           ref: ref,
           ...systemProps,

package/lib/cjs/ExpandCollapse/Panel.js

@@ -9,6 +9,8 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Control = _interopRequireDefault(require("./Control"));
@@ -127,7 +129,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     expanded: isExpanded
   });
   const handleControlPress = event => {
-    onToggle(panelId, event);
+    onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
   };
   const onContainerLayout = event => {
@@ -149,7 +151,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: selectContentPanelStyles(themeTokens),
+    style: [selectContentPanelStyles(themeTokens), staticStyles.panelContainer],
     accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: selectTextStyles(themeTokens),
@@ -158,7 +160,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     }) : children
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
-    style: themeTokens,
+    style: [themeTokens, staticStyles.container],
     accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlPanelStyles(themeTokens),
@@ -178,7 +180,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.ScrollView, {
       ref: animatedRef,
       style: animatedStyles,
       ...focusabilityProps,
@@ -187,12 +189,22 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         style: {
           ..._Platform.default.select({
             default: {
-              flex: 1
+              flex: 1,
+              overflow: 'hidden'
             },
-            web: {}
+            web: {
+              overflow: 'hidden'
+            }
           })
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
+          children: children
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+          onContentSizeChange: (_, height) => {
+            setContainerHeight(height);
+          },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
           children: children
@@ -202,6 +214,16 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   });
 });
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
+  panelContainer: {
+    flexGrow: 1,
+    alignSelf: 'stretch'
+  }
+});
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,

package/lib/cjs/Icon/Icon.js

@@ -7,6 +7,7 @@ exports.iconComponentPropTypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _useWindowDimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/useWindowDimensions"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -23,7 +24,10 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
-  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
+  const {
+    fontScale
+  } = (0, _useWindowDimensions.default)();
+  const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size;
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
     title: accessibilityLabel,
     size: size,

package/lib/cjs/Link/LinkBase.js

@@ -103,7 +103,7 @@ const selectIconTokens = _ref5 => {
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  const translateY = iconTranslateY && iconTranslateY !== 0 ? iconTranslateY : blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,

package/lib/cjs/Modal/Modal.js

@@ -230,12 +230,10 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
-            children: _Platform.default !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+            children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
               style: selectScrollViewStyles,
               children: children
-            }) : {
-              children
-            }
+            }) : children
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -112,6 +112,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     headerFontColor,
     headerFontSize,
     buttonDirection,
+    buttonIconBackgroundColor,
     headerFontWeight,
     headerLineHeight,
     subHeaderFontWeight,
@@ -155,7 +156,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     paddingTop: labelPaddingTop,
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
-    paddingRight: labelPaddingRight
+    paddingRight: labelPaddingRight,
+    iconBackground: buttonIconBackgroundColor
   };
   const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/cjs/Notification/Notification.js

@@ -188,7 +188,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',

package/lib/cjs/Tabs/TabsItem.js

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

package/lib/cjs/TextInput/TextInputBase.js

@@ -370,32 +370,6 @@ const TextInputBase = /*#__PURE__*/_react.default.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.default.useState(minHeight || 0);
-
-  /* get the new height between the limits and update 
-  the state with the new height */
-  const measureHeightWeb = _react.default.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.default.useEffect(() => {
-    if (_Platform.default.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
@@ -415,10 +389,7 @@ const TextInputBase = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/esm/Carousel/Carousel.js

@@ -34,12 +34,7 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
+    left: 0
   },
   animationControlButton: {
     position: 'absolute',
@@ -745,7 +740,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         refocus: refocus,
         width: containerLayout.width,
         children: [/*#__PURE__*/_jsxs(View, {
-          style: [staticStyles.root],
+          style: [staticStyles.root, {
+            ...(Platform.OS === 'web' ? {
+              outline: 'none'
+            } : {})
+          }],
           onLayout: onContainerLayout,
           ref: ref,
           ...systemProps,

package/lib/esm/ExpandCollapse/Panel.js

@@ -3,6 +3,8 @@ import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
@@ -120,7 +122,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     expanded: isExpanded
   });
   const handleControlPress = event => {
-    onToggle(panelId, event);
+    onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
   };
   const onContainerLayout = event => {
@@ -142,7 +144,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/_jsx(View, {
-    style: selectContentPanelStyles(themeTokens),
+    style: [selectContentPanelStyles(themeTokens), staticStyles.panelContainer],
     accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       style: selectTextStyles(themeTokens),
@@ -151,7 +153,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }) : children
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
-    style: themeTokens,
+    style: [themeTokens, staticStyles.container],
     accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/_jsx(View, {
       style: selectControlPanelStyles(themeTokens),
@@ -171,7 +173,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }
-    }), /*#__PURE__*/_jsx(Animated.View, {
+    }), /*#__PURE__*/_jsx(Animated.ScrollView, {
       ref: animatedRef,
       style: animatedStyles,
       ...focusabilityProps,
@@ -180,12 +182,22 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         style: {
           ...Platform.select({
             default: {
-              flex: 1
+              flex: 1,
+              overflow: 'hidden'
             },
-            web: {}
+            web: {
+              overflow: 'hidden'
+            }
           })
         },
-        children: /*#__PURE__*/_jsx(View, {
+        children: Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+          style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
+          children: children
+        }) : /*#__PURE__*/_jsx(ScrollView, {
+          onContentSizeChange: (_, height) => {
+            setContainerHeight(height);
+          },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
           children: children
@@ -195,6 +207,16 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   });
 });
 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/lib/esm/Icon/Icon.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
+import useWindowDimensions from "react-native-web/dist/exports/useWindowDimensions";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+import { getTokensPropType, variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -16,7 +17,10 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
-  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
+  const {
+    fontScale
+  } = useWindowDimensions();
+  const size = scalesWithText ? themeTokens.size * fontScale : themeTokens.size;
   const iconContent = /*#__PURE__*/_jsx(IconComponent, {
     title: accessibilityLabel,
     size: size,

package/lib/esm/Link/LinkBase.js

@@ -96,7 +96,7 @@ const selectIconTokens = _ref5 => {
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  const translateY = iconTranslateY && iconTranslateY !== 0 ? iconTranslateY : blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,

package/lib/esm/Modal/Modal.js

@@ -223,12 +223,10 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
-            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+            children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
               style: selectScrollViewStyles,
               children: children
-            }) : {
-              children
-            }
+            }) : children
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {

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

@@ -181,7 +181,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',

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/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.1.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.1.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.1.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.1.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/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/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

@@ -169,7 +169,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
   },
   contentContainerStyles: {
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',

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}
         />

package/types/Listbox.d.ts

@@ -0,0 +1,60 @@
+type ListboxTokens = {
+  groupBorderRadius?: number | string
+  groupBorderWidth?: number | string
+  groupFontSize?: number
+  groupFontName?: string
+  groupFontWeight?: string
+  groupColor?: string
+  groupBorderColor?: string
+  groupBackgroundColor?: string
+  groupPaddingTop?: number
+  groupPaddingBottom?: number
+  groupPaddingLeft?: number
+  groupPaddingRight?: number
+  groupIcon?: string
+  itemDisplay?: boolean
+  itemFontName?: string
+  itemFontWeight?: string
+  itemFontSize?: number
+  itemPaddingTop?: number
+  itemPaddingBottom?: number
+  itemPaddingLeft?: number
+  itemPaddingRight?: number
+  itemColor?: string
+  itemBackgroundColor?: string
+  itemBorderLeftColor?: string
+  itemBorderLeftWidth?: number | string
+  itemBorderWidth?: number | string
+  itemTextDecoration?: string
+  itemOutline?: number | string
+  shadow?: string
+  itemBorderRightColor?: string
+  itemBorderBottomColor?: string
+  itemBorderTopColor?: string
+  itemBorderRightWidth?: number | string
+  itemBorderBottomWidth?: number | string
+  itemBorderTopWidth?: number | string
+  itemBorderRadius?: number | string
+  minWidth?: number
+  minHeight?: number
+  itemHeight?: number
+  groupHeight?: number
+  lineHeight?: number
+}
+
+type ListboxItems = {
+  label: string
+  href: string
+  tokens?: ListboxTokens
+}
+
+export interface ListboxProps {
+  items: ListboxItems[]
+  firstItemRef?: object
+  parentRef?: object
+  LinkRouter?: React.ElementType
+  linkRouterProps?: object
+  tokens?: ListboxTokens
+  selectedId?: string
+  onClose?: () => void
+}

package/types/index.d.ts

@@ -75,4 +75,7 @@ export { TypographyProps, TypographyVariants, TypographyTokens } from './Typogra
 export { default as Portal } from './Portal'
 export { PortalProps } from './Portal'
 
+export { default as Listbox } from './Listbox'
+export { ListboxProps, ListboxTokens } from './Listbox'
+
 export * from './Common'