@telus-uds/components-base 3.30.0 → 3.32.0

package/lib/cjs/ColourToggle/ColourToggle.js

@@ -12,6 +12,8 @@ var _utils = require("../utils");
 var _StackView = require("../StackView");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _ColourBubble = _interopRequireDefault(require("./ColourBubble"));
+var _constants = require("./constants");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
@@ -23,37 +25,49 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     items,
     onChange,
     showTooltips,
+    copy = 'en',
+    dictionary = _dictionary.default,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = _react.default.useState(defaultColourId);
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ColourToggle', tokens, variant);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
   const {
     space
   } = getTokens();
-  const {
-    colourName: currentColourName = ''
-  } = items.find(item => item.id === currentColourId) || '';
+  const currentItem = items.find(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    return id === currentColourId;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      children: currentColourName
+      children: currentItem?.unavailable ? `${currentItem.colourName} ${getCopy('unavailable')}` : currentItem?.colourName ?? ''
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
       space: space,
       accessibilityRole: "radiogroup",
-      children: items.map((_ref2, index) => {
+      children: items.map((_ref3, index) => {
         let {
           id,
           colourHexCode,
-          colourName
-        } = _ref2;
+          colourName,
+          unavailable,
+          disabled
+        } = _ref3;
         const colourBubbleId = id || `ColourBubble[${index}]`;
         const handleChangeColour = event => {
           setCurrentColourId(id);
           onChange?.(event, {
             id,
             colourHexCode,
-            colourName
+            colourName,
+            unavailable
           });
         };
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColourBubble.default, {
@@ -63,7 +77,9 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           colourHexCode: colourHexCode,
           colourName: colourName,
           onPress: handleChangeColour,
-          showTooltip: showTooltips
+          showTooltip: showTooltips,
+          unavailable: unavailable,
+          isDisabled: !!disabled
         }, colourBubbleId);
       })
     })]
@@ -90,7 +106,9 @@ ColourToggle.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.exact({
     colourHexCode: _propTypes.default.string,
     colourName: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    unavailable: _propTypes.default.oneOf(Object.values(_constants.UNAVAILABLE_VARIANT)),
+    disabled: _propTypes.default.bool
   })),
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
@@ -99,6 +117,17 @@ ColourToggle.propTypes = {
   /**
    * When true, displays each colour's name as a tooltip on hover (web only).
    */
-  showTooltips: _propTypes.default.bool
+  showTooltips: _propTypes.default.bool,
+  /**
+   * Select English or French copy.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * Override default labels.
+   */
+  dictionary: _propTypes.default.shape({
+    en: _constants.DICTIONARY_CONTENT_SHAPE,
+    fr: _constants.DICTIONARY_CONTENT_SHAPE
+  })
 };
 var _default = exports.default = ColourToggle;

package/lib/cjs/ColourToggle/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNAVAILABLE_VARIANT = exports.DICTIONARY_CONTENT_SHAPE = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UNAVAILABLE_VARIANT = exports.UNAVAILABLE_VARIANT = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+const DICTIONARY_CONTENT_SHAPE = exports.DICTIONARY_CONTENT_SHAPE = _propTypes.default.shape({
+  unavailable: _propTypes.default.string
+});

package/lib/cjs/ColourToggle/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const DEFAULT_COLOUR_TOGGLE_DICTIONARY = {
+  en: {
+    unavailable: '(Out of stock)'
+  },
+  fr: {
+    unavailable: '(En rupture de stock)'
+  }
+};
+var _default = exports.default = DEFAULT_COLOUR_TOGGLE_DICTIONARY;

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 = _interopRequireDefault(require("../Portal"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Card = _interopRequireDefault(require("../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 = _interopRequireDefault(require("../Portal/Portal"));
 var _utils = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
@@ -123,7 +124,12 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     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.default : _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.default = 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"));
@@ -219,20 +218,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     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
@@ -249,8 +234,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         left: 'left'
       },
       offsets: {
-        vertical: 4 - (rootOffsets?.vertical || 0),
-        horizontal: -rootOffsets?.horizontal || 0
+        vertical: 4
       }
     }
   });
@@ -387,12 +371,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     })]
   });
   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)(_Button.ButtonDropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -473,11 +452,6 @@ const styles = _StyleSheet.default.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 });
 

package/lib/cjs/TextInput/TextInputBase.js

@@ -279,7 +279,8 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   }, [element, pattern]);
   const handleChangeText = event => {
     const text = event.nativeEvent?.text ?? event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
+    // Do NOT use `|| undefined`: empty string is falsy and would break the controlled contract
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') ?? '' : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');

package/lib/cjs/Validator/Validator.js

@@ -206,7 +206,11 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 
   // Sync external value prop to internal state
   _react.default.useEffect(() => {
-    if (value && Number(value).toString() !== 'NaN') {
+    if (value === '') {
+      setCodes(Array(validatorsLength).fill(''));
+      return;
+    }
+    if (Number(value).toString() !== 'NaN') {
       const digits = value.split('').slice(0, validatorsLength);
       const newCodes = Array(validatorsLength).fill('');
       digits.forEach((digit, i) => {

package/lib/cjs/utils/useOverlaidPosition.js

@@ -61,46 +61,45 @@ function getOverlaidPosition(_ref2) {
     offsets = {},
     align
   } = _ref2;
-  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
-  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
-  // that can be passed to the appropriate ScrollView?
-  const {
-    scrollX = 0,
-    scrollY = 0
-  } = typeof window === 'object' ? window : {};
-
   // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {};
   const verticalOffset = offsets.vertical ?? 0;
   const horizontalOffset = offsets.horizontal ?? 0;
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
-    fromEdge: sourceLayout.y + scrollY + verticalOffset,
+    fromEdge: sourceLayout.y + verticalOffset,
     sourceSize: sourceLayout.height
   });
   if (align.middle) positioning.top = getPosition({
     edge: getEdgeType(align, 'middle'),
-    fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
-    sourceSize: sourceLayout.height
-  });
-  if (align.bottom) positioning.bottom = getPosition({
-    edge: getEdgeType(align, 'bottom'),
-    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
+    fromEdge: sourceLayout.y + verticalOffset - targetDimensions.height / 2,
     sourceSize: sourceLayout.height
   });
+  if (align.bottom) {
+    if (_Platform.default.OS !== 'web') {
+      // On native, position:absolute is parent-relative, so use negative top offset instead of window-based bottom math.
+      positioning.top = sourceLayout.y - targetDimensions.height - verticalOffset;
+    } else {
+      positioning.bottom = getPosition({
+        edge: getEdgeType(align, 'bottom'),
+        fromEdge: windowDimensions.height - (sourceLayout.y + sourceLayout.height - verticalOffset),
+        sourceSize: sourceLayout.height
+      });
+    }
+  }
   if (align.left) positioning.left = getPosition({
     edge: getEdgeType(align, 'left'),
-    fromEdge: sourceLayout.x + scrollX + horizontalOffset,
+    fromEdge: sourceLayout.x + horizontalOffset,
     sourceSize: sourceLayout.width
   });
   if (align.center) positioning.left = getPosition({
     edge: getEdgeType(align, 'center'),
-    fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
+    fromEdge: sourceLayout.x + horizontalOffset - targetDimensions.width / 2,
     sourceSize: sourceLayout.width
   });
   if (align.right) positioning.right = getPosition({
     edge: getEdgeType(align, 'right'),
-    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
+    fromEdge: windowDimensions.width - (sourceLayout.x + sourceLayout.width - horizontalOffset),
     sourceSize: sourceLayout.width
   });
   if (!(align.left && align.right)) {
@@ -141,6 +140,32 @@ const useOverlaidPosition = _ref3 => {
   const targetRef = (0, _react.useRef)(null);
   const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
   const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
+  const hasRemeasuredRef = (0, _react.useRef)(false);
+  const applySourceLayout = (0, _react.useCallback)((dims, x, y, width, height) => {
+    setWindowDimensions(dims);
+    setSourceLayout({
+      x,
+      y,
+      width,
+      height
+    });
+  }, []);
+  const measureSourceOnWeb = (0, _react.useCallback)(windowDims => {
+    const el = sourceRef.current;
+    if (!el) return;
+    const domNode = el._nativeTag ?? el;
+    const dims = windowDims ?? _Dimensions.default.get('window');
+    const rect = typeof domNode.getBoundingClientRect === 'function' ? domNode.getBoundingClientRect() : null;
+    if (rect) {
+      const x = rect.left + (typeof window.scrollX === 'number' ? window.scrollX : 0);
+      const y = rect.top + (typeof window.scrollY === 'number' ? window.scrollY : 0);
+      applySourceLayout(dims, x, y, rect.width, rect.height);
+    } else {
+      el.measureInWindow((mx, my, width, height) => {
+        applySourceLayout(dims, mx, my, width, height);
+      });
+    }
+  }, [applySourceLayout]);
   const onTargetLayout = (0, _react.useCallback)(_ref4 => {
     let {
       nativeEvent: {
@@ -171,16 +196,19 @@ const useOverlaidPosition = _ref3 => {
       let {
         window
       } = _ref5;
-      const measurementFunction = _Platform.default.OS === 'web' ? 'measureInWindow' : 'measure';
-      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
-        setWindowDimensions(window);
-        setSourceLayout({
-          x,
-          y,
-          width,
-          height
+      if (_Platform.default.OS === 'web') {
+        measureSourceOnWeb(window);
+      } else {
+        sourceRef.current?.measure((x, y, width, height) => {
+          setWindowDimensions(window);
+          setSourceLayout({
+            x,
+            y,
+            width,
+            height
+          });
         });
-      });
+      }
     };
     let subscription;
     const unsubscribe = () => {
@@ -193,6 +221,7 @@ const useOverlaidPosition = _ref3 => {
       }
       setSourceLayout(null);
       setTargetDimensions(null);
+      hasRemeasuredRef.current = false;
     };
     if (readyToShow) {
       subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
@@ -203,36 +232,48 @@ const useOverlaidPosition = _ref3 => {
       unsubscribe();
     }
     return unsubscribe;
-  }, [readyToShow]);
+  }, [readyToShow, measureSourceOnWeb]);
+
+  // Re-measure source when targetDimensions first becomes available.
+  // Without this, there is a race condition: getBoundingClientRect() resolves faster than
+  // measureInWindow used to, so sourceLayout may be set before the dropdown has rendered
+  // and reported its dimensions via onTargetLayout. When targetDimensions finally arrives,
+  // sourceLayout is stale (no scroll has occurred to trigger handleScroll).
+  // Setting hasRemeasuredRef.current=true here also prevents the blink: isReady (on web)
+  // won't become true until this effect completes, guaranteeing the dropdown is always shown
+  // at its final correct position without an intermediate incorrect-position frame.
+  (0, _react.useEffect)(() => {
+    if (!isShown || !sourceRef.current || !targetDimensions || _Platform.default.OS !== 'web') return;
+    measureSourceOnWeb();
+    hasRemeasuredRef.current = true;
+  }, [targetDimensions, isShown, measureSourceOnWeb]);
   (0, _react.useEffect)(() => {
     if (_Platform.default.OS !== 'web') {
       return undefined;
     }
-    const handleScroll = (0, _lodash.default)(() => {
-      sourceRef.current?.measureInWindow((x, y, width, height) => {
-        setWindowDimensions(window);
-        setSourceLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    }, DEBOUNCE_DELAY);
+    const handleScroll = (0, _lodash.default)(measureSourceOnWeb, DEBOUNCE_DELAY);
     window.addEventListener('scroll', handleScroll);
     return () => {
       window.removeEventListener('scroll', handleScroll);
       handleScroll.cancel();
     };
-  }, [sourceRef]);
-  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  }, [measureSourceOnWeb]);
+
+  // On web, require hasRemeasuredRef to be true before declaring isReady. This ensures
+  // the dropdown is never shown with an intermediate stale position (the blink).
+  // On native, hasRemeasuredRef stays false (the web-only effect never runs), so we skip
+  // that check to preserve the original native behaviour.
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions && (_Platform.default.OS !== 'web' || hasRemeasuredRef.current));
   const overlaidPosition = isReady ? getOverlaidPosition({
     sourceLayout,
     targetDimensions,
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/lib/esm/Autocomplete/Autocomplete.js

@@ -119,6 +119,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     value,
     helpText = '',
     loadingLabel,
+    dropdownPosition = 'bottom',
     tokens,
     ...rest
   } = _ref2;
@@ -174,6 +175,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     isShown: isExpanded || hintExpansionEnabled,
     offsets: {
       vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
+    },
+    align: dropdownPosition === 'top' ? {
+      center: 'center',
+      bottom: 'top'
+    } : {
+      center: 'center',
+      top: 'bottom'
     }
   });
   const targetRef = React.useRef(null);
@@ -526,6 +534,10 @@ Autocomplete.propTypes = {
   /**
    * Input value for controlled usage
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+  /**
+   * Controls whether the dropdown renders above or below the input. Defaults to 'bottom'.
+   */
+  dropdownPosition: PropTypes.oneOf(['top', 'bottom'])
 };
 export default Autocomplete;

package/lib/esm/Autocomplete/constants.js

@@ -1,5 +1,5 @@
 export const DEFAULT_MIN_TO_SUGGESTION = 1;
 export const DEFAULT_MAX_SUGGESTIONS = 5;
-export const DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
+export const DEFAULT_MAX_DROPDOWN_HEIGHT = 500;
 export const INPUT_LEFT_PADDING = 16;
 export const MIN_LISTBOX_WIDTH = 288;

package/lib/esm/Button/ButtonGroup.js

@@ -13,6 +13,8 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+const EQUAL_WIDTH = 'equal';
+const RESPONSIVE_WIDTH = 'responsive';
 const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -57,31 +59,90 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const isMobileNonContained = Platform.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
   const gapValue = useSpacingScale(gap || space);
+  const isWeb = Platform.OS === 'web';
+  const buttonWidthVariant = variant?.width;
   const getButtonTokens = useCallback(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
     const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
+    let widthStyle;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+        widthStyle = staticStyles.equalWidth;
+        break;
+      case RESPONSIVE_WIDTH:
+        widthStyle = staticStyles.responsiveWidth;
+        break;
+      // no default
+    }
     return {
       ...themeButtonTokens,
-      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...widthStyle,
       ...(shouldUseTransparentBackground && {
         backgroundColor: 'transparent'
       }),
       alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
     };
-  }, [themeButtonTokensCallback, isMobileNonContained, variant?.width]);
-  const fieldsetStyles = useMemo(() => ({
-    ...staticStyles.fieldsetBase,
-    borderRadius,
-    backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
-    padding,
-    width: variant?.width === 'equal' ? '100%' : 'auto'
-  }), [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]);
-  const viewStyles = useMemo(() => ({
-    ...staticStyles.viewBase,
-    flexDirection: direction === 'column' ? 'column' : 'row',
-    gap: gapValue || 0,
-    justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
-  }), [direction, gapValue, variant?.width]);
+  }, [themeButtonTokensCallback, isMobileNonContained, buttonWidthVariant]);
+  const fieldsetStyles = useMemo(() => {
+    let fieldSetBase;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+      case RESPONSIVE_WIDTH:
+        fieldSetBase = staticStyles.fieldSetResponsive;
+        break;
+      default:
+        fieldSetBase = staticStyles.fieldsetBase;
+        break;
+    }
+    return {
+      ...fieldSetBase,
+      borderRadius,
+      backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+      padding
+    };
+  }, [borderRadius, backgroundColor, padding, isMobileNonContained, buttonWidthVariant]);
+  const buttonsContainerStyles = useMemo(() => {
+    let flexWrap;
+    if (isWeb) {
+      flexWrap = 'wrap';
+    } else {
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          flexWrap = 'nowrap';
+          break;
+        default:
+          flexWrap = 'wrap';
+          break;
+      }
+    }
+    let justifyContent;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+        justifyContent = 'space-evenly';
+        break;
+      default:
+        justifyContent = 'flex-start';
+        break;
+    }
+    let viewBaseStyle;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+      case RESPONSIVE_WIDTH:
+        viewBaseStyle = {};
+        break;
+      default:
+        viewBaseStyle = staticStyles.viewBase;
+        break;
+    }
+    return {
+      ...viewBaseStyle,
+      flexWrap,
+      flexDirection: direction === 'column' ? 'column' : 'row',
+      gap: gapValue || 0,
+      justifyContent
+    };
+  }, [direction, gapValue, buttonWidthVariant, isWeb]);
   const {
     currentValues,
     toggleOneValue
@@ -103,7 +164,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }
 
   // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-  const innerRole = Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  const buttonsWrapperRole = Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
   return /*#__PURE__*/_jsx(Fieldset, {
     ...systemProps,
     ref: ref,
@@ -121,8 +182,8 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: fieldsetStyles,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
-      accessibilityRole: innerRole,
-      style: viewStyles,
+      accessibilityRole: buttonsWrapperRole,
+      style: buttonsContainerStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -290,17 +351,24 @@ ButtonGroup.propTypes = {
   copy: PropTypes.oneOf(['en', 'fr'])
 };
 const staticStyles = StyleSheet.create({
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  },
+  responsiveWidth: {
+    width: 'auto'
+  },
   fieldsetBase: {
     alignSelf: 'flex-start',
-    display: 'inline'
+    display: 'inline',
+    width: 'auto'
+  },
+  fieldSetResponsive: {
+    width: '100%'
   },
   viewBase: {
     flexWrap: 'wrap',
     alignItems: 'center'
-  },
-  equalWidth: {
-    width: '100%',
-    flex: 1
   }
 });
 export default ButtonGroup;