@telus-uds/components-base 4.0.0-alpha.1 → 4.0.0-beta.0

package/CHANGELOG.md

@@ -1,9 +1,51 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Apr 2026 17:20:02 GMT and should not be manually modified.
+This log was last generated on Thu, 21 May 2026 03:01:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.0.0-beta.0
+
+Thu, 21 May 2026 03:01:22 GMT
+
+### Minor changes
+
+- `Autocomplete`: Add scroll to overlay in mobile (david.melara1@telus.com)
+
+### Patches
+
+- `TextInput`: Fix `onChangeText` returning `undefined` instead of an empty string when `isNumeric` is set and no text is provided (david.melara1@telus.com)
+- `Autocomplete`: inside modal story fixed to show the close button properly (josue.higueroscalderon@telus.com)
+- `TypeScript`: fix types (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: position issues fixed in MFE (josue.higueroscalderon@telus.com)
+
+## 4.0.0-alpha.2
+
+Fri, 17 Apr 2026 23:54:32 GMT
+
+### Minor changes
+
+- `Scroll`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.2
+
+### Patches
+
+- `FootnoteLink`: fixed superscript text positioning on native to correctly align with surrounding text (josue.higueroscalderon@telus.com)
+
+## 3.30.0
+
+Thu, 16 Apr 2026 21:04:33 GMT
+
+### Minor changes
+
+- `Carousel`: Add `isVideo` prop to thumbnail navigation to display a play icon overlay on video thumbnails (josue.higueros@telus.com)
+- `Scroll`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.21.0
+
+### Patches
+
+- `FootnoteLink`: fixed superscript text positioning on native to correctly align with surrounding text (josue.higueroscalderon@telus.com)
+
 ## 4.0.0-alpha.1
 
 Fri, 10 Apr 2026 17:20:02 GMT

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -134,6 +134,7 @@ const Autocomplete = exports.Autocomplete = /*#__PURE__*/_react.default.forwardR
     value,
     helpText = '',
     loadingLabel,
+    dropdownPosition = 'bottom',
     tokens,
     ...rest
   } = _ref2;
@@ -189,6 +190,13 @@ const Autocomplete = exports.Autocomplete = /*#__PURE__*/_react.default.forwardR
     isShown: isExpanded || hintExpansionEnabled,
     offsets: {
       vertical: _Platform.default.OS !== 'web' && (hint || inputLabel) ? 28 : 4
+    },
+    align: dropdownPosition === 'top' ? {
+      center: 'center',
+      bottom: 'top'
+    } : {
+      center: 'center',
+      top: 'bottom'
     }
   });
   const targetRef = _react.default.useRef(null);
@@ -541,5 +549,9 @@ Autocomplete.propTypes = {
   /**
    * Input value for controlled usage
    */
-  value: _propTypes.default.string
+  value: _propTypes.default.string,
+  /**
+   * Controls whether the dropdown renders above or below the input. Defaults to 'bottom'.
+   */
+  dropdownPosition: _propTypes.default.oneOf(['top', 'bottom'])
 };

package/lib/cjs/Autocomplete/constants.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = void 0;
 const DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MIN_TO_SUGGESTION = 1;
 const DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_SUGGESTIONS = 5;
-const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
+const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 500;
 const INPUT_LEFT_PADDING = exports.INPUT_LEFT_PADDING = 16;
 const MIN_LISTBOX_WIDTH = exports.MIN_LISTBOX_WIDTH = 288;

package/lib/cjs/Footnote/FootnoteLink.js

@@ -22,28 +22,28 @@ var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const DEFAULT_LINE_HEIGHT = 1;
+const LINE_HEIGHT_MULTIPLIER = 2;
 const selectTextStyle = _ref => {
   let {
     fontSize,
     lineHeight
   } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ..._Platform.default.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
+  return _Platform.default.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
+    },
+    web: {
+      fontSize,
+      lineHeight: lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
+    }
+  });
 };
 const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
@@ -87,6 +87,7 @@ const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardR
   });
 });
 FootnoteLink.displayName = 'FootnoteLink';
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink';
 const copyShape = _propTypes.default.shape({
   a11yLabel: _propTypes.default.string.isRequired
 });

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _Portal = require("../Portal/Portal");
 var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _Card = require("../Card/Card");
@@ -67,7 +68,12 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         paddingLeft: paddingHorizontal,
         paddingRight: paddingHorizontal
       },
-      children: children
+      children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        style: {
+          maxHeight
+        },
+        children: children
+      }) : children
     })
   });
 });

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -10,6 +10,7 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _portal = require("@gorhom/portal");
+var _Portal = require("../Portal/Portal");
 var _useCopy = require("../utils/useCopy");
 var _copyPropTypes = require("../utils/props/copyPropTypes");
 var _tokens = require("../utils/props/tokens");
@@ -125,7 +126,12 @@ const ModalOverlay = exports.ModalOverlay = /*#__PURE__*/_react.default.forwardR
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+
+  // On web, use the local Portal (always appends to document.body) to ensure correct
+  // absolute positioning in MFE/iframe contexts. @gorhom/portal may render its host
+  // outside the iframe's document, causing coordinate mismatches when scrolled.
+  const PortalComponent = _Platform.default.OS === 'web' ? _Portal.Portal : _portal.Portal;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalComponent, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       ref: containerRef,
       onLayout: onLayout,

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MultiSelectFilter = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _portal = require("@gorhom/portal");
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
@@ -225,20 +224,6 @@ const MultiSelectFilter = exports.MultiSelectFilter = /*#__PURE__*/_react.defaul
     setIsOpen(false);
     onCancel();
   };
-  const appRootRef = _react.default.useRef(null);
-  const [rootOffsets, setRootOffsets] = _react.default.useState(null);
-  _react.default.useEffect(() => {
-    if (rootOffsets) return;
-    appRootRef.current?.measureInWindow((x, y) => {
-      // Only set offsets if they are positive
-      // this is because we want to avoid negative offsets that could cause
-      // the dropdown to be positioned incorrectly in some situations
-      if (y > 0) setRootOffsets({
-        horizontal: x,
-        vertical: y
-      });
-    });
-  }, [isOpen, rootOffsets]);
   const {
     align,
     offsets
@@ -255,8 +240,7 @@ const MultiSelectFilter = exports.MultiSelectFilter = /*#__PURE__*/_react.defaul
         left: 'left'
       },
       offsets: {
-        vertical: 4 - (rootOffsets?.vertical || 0),
-        horizontal: -rootOffsets?.horizontal || 0
+        vertical: 4
       }
     }
   });
@@ -393,12 +377,7 @@ const MultiSelectFilter = exports.MultiSelectFilter = /*#__PURE__*/_react.defaul
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        ref: appRootRef,
-        style: styles.appRootRef
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -478,11 +457,6 @@ const styles = _StyleSheet.default.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 });
 

package/lib/cjs/Progress/Progress.js

@@ -19,6 +19,8 @@ var _ProgressContext = require("./ProgressContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const BORDER_SIDES = 2;
+const CENTER_DIVISOR = 2;
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -37,6 +39,21 @@ const selectProgressStyles = _ref => {
     ...(0, _styles.applyShadowToken)(shadow)
   };
 };
+const selectBarWrapperStyles = _ref2 => {
+  let {
+    barHeight,
+    borderRadius,
+    borderWidth,
+    height
+  } = _ref2;
+  return {
+    height: barHeight,
+    width: '100%',
+    position: 'absolute',
+    top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+    borderRadius
+  };
+};
 
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
@@ -50,10 +67,11 @@ const selectProgressStyles = _ref => {
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -74,16 +92,23 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const themeTokens = (0, _useThemeTokens.useThemeTokens)('Progress', tokens, variant);
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false;
+  const {
+    barHeight,
+    height
+  } = themeTokens;
+  const content = barHeight && barHeight !== height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectBarWrapperStyles(themeTokens),
+    children: children
+  }) : children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.ProgressContext.Provider, {
     value: {
       layers
@@ -92,7 +117,7 @@ const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref
       ref: ref,
       style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
       ...selectProps(rest),
-      children: children
+      children: content
     })
   });
 });