@telus-uds/components-base 3.22.0 → 3.23.0

package/lib/cjs/Listbox/Listbox.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
@@ -21,11 +21,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const styles = _StyleSheet.default.create({
-  list: {
+  container: {
     padding: 0,
     margin: 0
   }
 });
+const selectContainerStyles = tokens => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+});
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
 const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
@@ -39,14 +44,12 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemRouterProps,
     onClose,
     variant,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
-  const {
-    minHeight,
-    minWidth
-  } = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', tokens, variant);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
@@ -105,11 +108,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       maxOpen: 1,
       ref: ref,
       children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [styles.list, {
-          minHeight,
-          minWidth
-        }],
-        role: "listbox",
+        style: [styles.container, selectContainerStyles(listboxTokens)],
+        accessibilityRole: "combobox",
+        testID: testID,
         children: items.map((item, index) => {
           const {
             id,
@@ -171,7 +172,15 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  /**
+   * Test ID for testing
+   */
+  testID: _propTypes.default.string,
+  /**
+   * Listbox variant
+   */
+  variant: _utils.variantProp.propType
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = exports.default = Listbox;

package/lib/cjs/Listbox/ListboxGroup.js

@@ -85,7 +85,8 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         borderRadius: 0,
         borderWidth: 0,
-        marginBottom: 0
+        marginBottom: 0,
+        contentPanelBackgroundColor: 'transparent'
       },
       controlRef: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -37,12 +37,14 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     maxWidth,
     minWidth,
     onLayout,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     onLayout: onLayout,
+    testID: testID,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
@@ -81,6 +83,7 @@ DropdownOverlay.propTypes = {
   maxWidth: _propTypes.default.number,
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func,
-  tokens: _propTypes.default.object
+  tokens: _propTypes.default.object,
+  testID: _propTypes.default.string
 };
 var _default = exports.default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/cjs/Listbox/PressableItem.js

@@ -48,10 +48,14 @@ const getItemStyles = _ref => {
     color: itemColor,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+    borderLeftWidth: itemBorderLeftWidth,
+    borderLeftColor: itemBorderLeftColor,
+    borderRightWidth: itemBorderRightWidth,
+    borderRightColor: itemBorderRightColor,
+    borderTopWidth: itemBorderTopWidth,
+    borderTopColor: itemBorderTopColor,
+    borderBottomWidth: itemBorderBottomWidth,
+    borderBottomColor: itemBorderBottomColor,
     borderRadius: itemBorderRadius,
     justifyContent: 'center'
   };

package/lib/cjs/TextInput/TextInputBase.js

@@ -286,6 +286,10 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       // Add a space every 4 digits starting from the 5th position
       filteredText = formattedValue.replace(regex, '$1 ').trim();
     }
+    // Apply maxLength if provided
+    if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+      filteredText = filteredText.substring(0, rest.maxLength);
+    }
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -358,7 +362,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    maxLength: type === 'card' ? 19 : undefined,
+    maxLength: type === 'card' ? 19 : rest.maxLength,
     value: isControlled ? currentValue : undefined,
     onKeyPress
   };

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