@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/cjs/Validator/Validator.js

@@ -44,11 +44,10 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [, setIndividualCodes] = _react.default.useState({});
-  const [text, setText] = _react.default.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
+  const [codes, setCodes] = _react.default.useState(() => Array(validatorsLength).fill(''));
   const [isHover, setIsHover] = _react.default.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
@@ -59,84 +58,87 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = _react.default.useMemo(() => {
-    const codes = [];
-    const valueCodes = {};
-    Array.from({
+
+  // Create refs for input elements
+  const codeReferences = _react.default.useMemo(() => {
+    return Array.from({
       length: validatorsLength
-    }, (_, i) => {
-      codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
-      valueCodes[prefix + i] = '';
-      valueCodes[prefix + i + sufixValidation] = '';
-      return null;
+    }, () => /*#__PURE__*/_react.default.createRef());
+  }, [validatorsLength]);
+
+  // Keep onChange and mask in refs to avoid re-creating event listeners
+  const onChangeRef = _react.default.useRef(onChange);
+  const maskRef = _react.default.useRef(mask);
+  _react.default.useEffect(() => {
+    onChangeRef.current = onChange;
+    maskRef.current = mask;
+  }, [onChange, mask]);
+
+  // Update a single code digit
+  const updateCode = _react.default.useCallback((index, digit) => {
+    setCodes(prevCodes => {
+      const newCodes = [...prevCodes];
+      newCodes[index] = digit;
+      if (onChangeRef.current) {
+        const codeString = newCodes.join('');
+        const singleCodesObj = {};
+        newCodes.forEach((code, i) => {
+          singleCodesObj[prefix + i] = code;
+          singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : '';
+        });
+        onChangeRef.current(codeString, singleCodesObj);
+      }
+      return newCodes;
     });
-    return [codes, valueCodes];
-  }, [validatorsLength, prefix, sufixValidation]);
-  const handleSingleCodes = _react.default.useCallback((codeId, val, validation) => {
-    singleCodes[codeId] = val;
-    singleCodes[codeId + sufixValidation] = validation;
-    setIndividualCodes(prev => ({
-      ...prev,
-      [codeId]: val
-    }));
-  }, [singleCodes, sufixValidation]);
-  const changeDataMasking = _react.default.useCallback(boxElement => {
-    let charMasking = '';
-    const element = boxElement;
-    if (mask && mask.length === 1) {
-      charMasking = mask;
-    } else if (mask && mask.length > 1) {
-      charMasking = mask.substring(0, 1);
-    }
-    if (charMasking && element) {
-      element.value = charMasking;
-    }
-  }, [mask]);
-  const handleChangeCode = _react.default.useCallback(() => {
-    const code = Array.from({
-      length: validatorsLength
-    }, (_, i) => singleCodes[prefix + i] || '').join('');
-    if (typeof onChange === 'function') {
-      onChange(code, singleCodes);
-    }
-  }, [validatorsLength, singleCodes, prefix, onChange]);
-  const handleChangeCodeValues = _react.default.useCallback((event, codeId, nextIndex) => {
-    const codeElement = codeReferences[codeId]?.current;
+  }, [prefix, sufixValidation]);
+
+  // Handle input change
+  const handleInputChange = _react.default.useCallback((index, event) => {
     const val = event.nativeEvent?.value || event.target?.value;
 
-    // Only allow numeric characters and limit to single digit
-    const numericOnly = val.replace(/\D/g, '').substring(0, 1);
-    if (codeElement && codeElement.value) {
-      codeElement.value = numericOnly;
-    }
-    handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '');
-    handleChangeCode();
-    if (nextIndex === validatorsLength) {
-      codeElement?.blur();
-      changeDataMasking(codeElement);
+    // This prevents the infinite loop where setting element.value triggers another input event
+    if (maskRef.current && val === maskRef.current.substring(0, 1)) {
       return;
     }
-    if (numericOnly.length > 0) {
-      const nextElement = codeReferences[prefix + nextIndex]?.current;
+    const numericOnly = val.replace(/\D/g, '').substring(0, 1);
+
+    // Update state
+    updateCode(index, numericOnly);
+
+    // Update DOM element
+    const element = codeReferences[index]?.current;
+    if (element) {
+      if (maskRef.current && numericOnly) {
+        element.value = maskRef.current.substring(0, 1);
+      } else {
+        element.value = numericOnly;
+      }
+    }
+
+    // Move to next field if digit entered
+    if (numericOnly && index < validatorsLength - 1) {
+      const nextElement = codeReferences[index + 1]?.current;
       nextElement?.focus();
-      changeDataMasking(codeElement);
+    } else if (index === validatorsLength - 1) {
+      element?.blur();
     }
-  }, [codeReferences, handleSingleCodes, handleChangeCode, validatorsLength, changeDataMasking, prefix]);
-  const handleKeyPress = (event, currentIndex, previousIndex) => {
+  }, [codeReferences, updateCode, validatorsLength]);
+
+  // Handle backspace
+  const handleKeyPress = _react.default.useCallback((index, event) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) {
       return;
     }
-    if (currentIndex > 0) {
-      const currentElement = codeReferences[prefix + currentIndex]?.current;
-      const previousElement = codeReferences[prefix + previousIndex]?.current;
-      if (currentElement && currentElement.value) {
-        currentElement.value = '';
-      }
+    const currentElement = codeReferences[index]?.current;
+    if (currentElement) {
+      currentElement.value = '';
+    }
+    updateCode(index, '');
+    if (index > 0) {
+      const previousElement = codeReferences[index - 1]?.current;
       previousElement?.focus();
     }
-    handleSingleCodes(prefix + currentIndex, '', '');
-    handleChangeCode();
-  };
+  }, [codeReferences, updateCode]);
   const getCodeComponents = () => {
     return Array.from({
       length: validatorsLength
@@ -145,11 +147,14 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       const codeInputProps = {
         nativeID: codeId,
         keyboardType: 'numeric',
-        ref: codeReferences[codeId] ?? null,
-        validation: strValidation || singleCodes[codeId + sufixValidation],
+        ref: codeReferences[i] ?? null,
+        validation: strValidation || (codes[i] ? 'success' : ''),
         tokens: selectCodeTextInputTokens(themeTokens),
+        // Only use secureTextEntry in React Native, web handles mask differently
+        secureTextEntry: !!(_Platform.default.OS !== 'web' && mask),
+        selectTextOnFocus: _Platform.default.OS !== 'web',
         onFocus: () => {
-          const element = codeReferences[codeId]?.current;
+          const element = codeReferences[i]?.current;
           if (_Platform.default.OS === 'web' && element?.select) {
             return element.select() ?? null;
           }
@@ -158,11 +163,35 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           }
           return null;
         },
-        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onKeyPress: event => handleKeyPress(i, event),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
         inactive
       };
+
+      // For React Native, use onChangeText and maxLength
+      if (_Platform.default.OS !== 'web') {
+        codeInputProps.maxLength = 1;
+        codeInputProps.value = codes[i];
+        codeInputProps.onChange = () => {};
+        codeInputProps.onChangeText = text => {
+          if (text) {
+            updateCode(i, text);
+            if (i < validatorsLength - 1) {
+              setTimeout(() => {
+                codeReferences[i + 1]?.current?.focus();
+              }, 50);
+            }
+          } else {
+            updateCode(i, '');
+            if (i > 0) {
+              setTimeout(() => {
+                codeReferences[i - 1]?.current?.focus();
+              }, 50);
+            }
+          }
+        };
+      }
       if (!codeInputProps.validation) {
         delete codeInputProps.validation;
       }
@@ -174,89 +203,96 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }, codeId);
     });
   };
+
+  // Sync external value prop to internal state
   _react.default.useEffect(() => {
-    if (Number(value).toString() !== 'NaN') {
-      setText(value);
+    if (value && Number(value).toString() !== 'NaN') {
+      const digits = value.split('').slice(0, validatorsLength);
+      const newCodes = Array(validatorsLength).fill('');
+      digits.forEach((digit, i) => {
+        if (/\d/.test(digit)) {
+          newCodes[i] = digit;
+        }
+      });
+      setCodes(newCodes);
     }
-  }, [value]);
+  }, [value, validatorsLength]);
+
+  // Sync codes state to DOM elements
   _react.default.useEffect(() => {
-    Array.from({
-      length: validatorsLength
-    }, (_, i) => {
-      const element = codeReferences[prefix + i]?.current;
+    codes.forEach((code, i) => {
+      const element = codeReferences[i]?.current;
       if (element && element.value !== undefined) {
-        if (mask && text[i]) {
-          element.value = mask;
+        if (mask && code) {
+          element.value = mask.substring(0, 1);
         } else {
-          element.value = text[i] ?? '';
+          element.value = code;
         }
       }
-      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
-      return null;
     });
-  }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes]);
+  }, [codes, codeReferences, mask]);
+
+  // Setup event listeners - only runs once on mount
   _react.default.useEffect(() => {
-    const handlePasteCode = event => {
+    if (_Platform.default.OS !== 'web') {
+      return undefined;
+    }
+    const handlePaste = event => {
       event.preventDefault();
-
-      // Clear current state first
-      setText('');
-
-      // Clear all individual input fields and their state
-      Array.from({
-        length: validatorsLength
-      }, (_, i) => {
-        const element = codeReferences[prefix + i]?.current;
-        if (element && element.value !== undefined) {
-          element.value = '';
-        }
-        handleSingleCodes(prefix + i, '', '');
-        return null;
-      });
       const clipBoardText = event.clipboardData.getData('text');
-
-      // Validate that input contains only digits and truncate to 6 characters
       const numericOnly = clipBoardText.replace(/\D/g, '').substring(0, validatorsLength);
-      if (numericOnly.length > 0) {
-        setText(numericOnly);
+      const newCodes = Array(validatorsLength).fill('');
+      numericOnly.split('').forEach((digit, i) => {
+        newCodes[i] = digit;
+      });
+      setCodes(newCodes);
+      if (onChangeRef.current) {
+        const singleCodesObj = {};
+        newCodes.forEach((code, i) => {
+          singleCodesObj[prefix + i] = code;
+          singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : '';
+        });
+        onChangeRef.current(numericOnly, singleCodesObj);
       }
     };
     const handleCopy = event => {
-      const clipBoardText = Array.from({
-        length: validatorsLength
-      }, (_, i) => singleCodes[prefix + i] || '').join('');
-      event.clipboardData.setData('text/plain', clipBoardText);
-      event.preventDefault();
+      setCodes(currentCodes => {
+        const clipBoardText = currentCodes.join('');
+        event.clipboardData.setData('text/plain', clipBoardText);
+        event.preventDefault();
+        return currentCodes;
+      });
     };
-    if (_Platform.default.OS === 'web') {
-      Array.from({
-        length: validatorsLength
-      }, (_, i) => {
-        const element = codeReferences[prefix + i]?.current;
-        if (element && typeof element.addEventListener === 'function') {
-          element.addEventListener('paste', handlePasteCode);
-          element.addEventListener('copy', handleCopy);
-          element.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+
+    // Add event listeners to each input
+    codeReferences.forEach((inputRef, i) => {
+      const element = inputRef?.current;
+      if (element && typeof element.addEventListener === 'function') {
+        element.addEventListener('paste', handlePaste);
+        element.addEventListener('copy', handleCopy);
+        element.addEventListener('input', event => handleInputChange(i, event));
+      }
+    });
+
+    // Cleanup
+    return () => {
+      codeReferences.forEach(inputRef => {
+        const element = inputRef?.current;
+        if (element && typeof element.removeEventListener === 'function') {
+          element.removeEventListener('paste', handlePaste);
+          element.removeEventListener('copy', handleCopy);
+          element.removeEventListener('input', event => handleInputChange(event.target.dataset.index, event));
         }
-        return null;
       });
-    }
-    return () => {
-      if (_Platform.default.OS === 'web') {
-        Array.from({
-          length: validatorsLength
-        }, (_, i) => {
-          const element = codeReferences[prefix + i]?.current;
-          if (element && typeof element.removeEventListener === 'function') {
-            element.removeEventListener('paste', handlePasteCode);
-            element.removeEventListener('copy', handleCopy);
-            element.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-          }
-          return null;
-        });
-      }
     };
-  }, [validatorsLength, prefix, codeReferences, handleChangeCodeValues, handleSingleCodes, singleCodes]);
+    /*
+     * codeReferences and handleInputChange are intentionally omitted from dependencies
+     * because we want event listeners to be registered ONLY ONCE when the component mounts.
+     * codeReferences is stable (created with useMemo) and handleInputChange is stable (useCallback).
+     * Including them would cause unnecessary re-registration of listeners on each render.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
     ...supportsProps,
     feedbackProps: {

package/lib/cjs/index.js

@@ -59,6 +59,8 @@ var _exportNames = {
   Responsive: true,
   Search: true,
   Select: true,
+  Shortcuts: true,
+  ShortcutsItem: true,
   SideNav: true,
   Skeleton: true,
   SkipLink: true,
@@ -432,6 +434,18 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "Shortcuts", {
+  enumerable: true,
+  get: function () {
+    return _Shortcuts.default;
+  }
+});
+Object.defineProperty(exports, "ShortcutsItem", {
+  enumerable: true,
+  get: function () {
+    return _Shortcuts.ShortcutsItem;
+  }
+});
 Object.defineProperty(exports, "SideNav", {
   enumerable: true,
   get: function () {
@@ -744,6 +758,7 @@ var _RadioCard = _interopRequireWildcard(require("./RadioCard"));
 var _Responsive = _interopRequireDefault(require("./Responsive"));
 var _Search = _interopRequireDefault(require("./Search"));
 var _Select = _interopRequireDefault(require("./Select"));
+var _Shortcuts = _interopRequireWildcard(require("./Shortcuts"));
 var _SideNav = _interopRequireDefault(require("./SideNav"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));

package/lib/esm/Button/Button.js

@@ -10,6 +10,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityRole = 'button',
     tokens,
     variant,
+    heightFull = true,
     ...props
   } = _ref;
   const viewport = useViewport();
@@ -27,6 +28,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ButtonBase, {
     ...props,
     tokens: getTokens,
+    heightFull: heightFull,
     accessibilityRole: accessibilityRole,
     ref: ref,
     viewport: viewport

package/lib/esm/Button/ButtonBase.js

@@ -33,23 +33,27 @@ const selectFlexAndWidthStyles = _ref2 => {
   }
   return styles;
 };
-const selectOuterContainerStyles = _ref3 => {
+const selectOuterContainerStyles = (_ref3, heightFull) => {
   let {
     opacity,
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     borderRadius,
-    outerBackgroundColor
+    outerBackgroundColor,
+    alignSelf
   } = _ref3;
   return {
+    backgroundColor: outerBackgroundColor,
+    opacity,
     ...Platform.select({
       native: {
+        alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+      },
+      web: heightFull ? {} : {
         alignSelf: 'flex-start'
       }
     }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
     ...applyOuterBorder({
       outerBorderGap,
       outerBorderWidth,
@@ -248,6 +252,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     icon,
     iconPosition = icon ? 'left' : undefined,
     iconProps,
+    heightFull = true,
     ...rawRest
   } = _ref12;
   const {
@@ -307,7 +312,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     }
     const themeTokens = resolveButtonTokens(pressableState);
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens, heightFull), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
     dataSet: {

package/lib/esm/Button/ButtonDropdown.js

@@ -103,6 +103,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     accessibilityRole = 'radio',
     description,
     singleOption,
+    heightFull = true,
     ...props
   } = _ref2;
   const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
@@ -145,6 +146,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
+    heightFull: heightFull,
     inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,

package/lib/esm/Button/ButtonGroup.js

@@ -1,26 +1,18 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ButtonBase from './ButtonBase';
-import { StackWrap } from '../StackView';
 import Fieldset from '../Fieldset';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { useSpacingScale, a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
 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 getStackWrapTokens = variant => {
-  return Platform.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  });
-};
 const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -53,12 +45,6 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
   });
-  const themeStackTokens = selectTokens('StackView', themeTokens);
-  const variantStackTokens = getStackWrapTokens(variant);
-  const stackTokens = {
-    ...themeStackTokens,
-    ...variantStackTokens
-  };
   const {
     direction,
     space,
@@ -68,15 +54,34 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
+  const isMobileNonContained = Platform.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
-  const getButtonTokens = state => {
+  const gapValue = useSpacingScale(gap || space);
+  const getButtonTokens = useCallback(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
+    const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
     return {
       ...themeButtonTokens,
-      width: variant?.width === 'equal' ? '100%' : 'auto',
-      flex: variant?.width === 'equal' ? 1 : undefined
+      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...(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]);
   const {
     currentValues,
     toggleOneValue
@@ -113,25 +118,11 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
-    style: {
-      borderRadius,
-      backgroundColor,
-      padding,
-      ...(Platform.OS === 'web' ? {
-        gap,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      } : {
-        alignSelf: 'flex-start'
-      })
-    },
+    style: fieldsetStyles,
     ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(StackWrap, {
+    children: /*#__PURE__*/_jsx(View, {
       accessibilityRole: innerRole,
-      space: space,
-      direction: direction,
-      tokens: stackTokens,
-      gap: gap,
-      ref: ref,
+      style: viewStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -291,4 +282,18 @@ ButtonGroup.propTypes = {
    */
   copy: PropTypes.oneOf(['en', 'fr'])
 };
+const staticStyles = StyleSheet.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+});
 export default ButtonGroup;

package/lib/esm/Button/propTypes.js

@@ -6,6 +6,12 @@ import { iconComponentPropTypes } from '../Icon';
 export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: PropTypes.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme