@telus-uds/components-base 1.92.0 → 1.94.0

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -2,8 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
 import defaultDictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
@@ -16,7 +20,6 @@ import StackView from '../StackView';
 import Typography from '../Typography';
 import { TextButton } from '../Link';
 import ModalOverlay from './ModalOverlay';
-import Modal from '../Modal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,21 +35,54 @@ const selectSubTitleTokens = _ref => {
     color: subtitleColor
   };
 };
-const selectDividerToknes = _ref2 => {
+const selectDividerTokens = _ref2 => {
   let {
-    dividerColor,
-    width,
-    decorative = true,
-    weight = 'thin'
+    dividerColor
   } = _ref2;
   return {
-    color: dividerColor,
-    width,
-    decorative,
-    weight
+    color: dividerColor
   };
 };
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const selectHeaderTokens = _ref3 => {
+  let {
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref3;
+  return {
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    flexGrow: 1
+  };
+};
+const selectControlsTokens = _ref4 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref4;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight
+  };
+};
+const selectContainerStyle = (windowHeight, windowWidth) => ({
+  height: windowHeight,
+  width: windowWidth
+});
+const TOTAL_COLUMNS = 12;
+const MAX_ITEMS_THRESHOLD = 12;
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     label,
     subtitle,
@@ -68,7 +104,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     rowLimit = 12,
     dictionary = defaultDictionary,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const viewport = useViewport();
   const {
     currentValues,
@@ -112,7 +148,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     maxWidthSize,
     subHeaderLineHeight,
     minHeight,
-    minWidth
+    minWidth,
+    ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
@@ -190,21 +227,35 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     offsets,
     align
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: sourceRef,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
-      isOpen: isOpen,
-      onClose: onClose,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx(Row, {
+  const [isScrolling, setIsScrolling] = React.useState(false);
+  const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
+  const [rowHeight, setRowHeight] = React.useState(0);
+  const modalRef = useScrollBlocking(isOpen);
+  const windowWidth = Dimensions.get('window').width;
+  const windowHeight = Dimensions.get('window').height;
+  React.useEffect(() => {
+    if (rowHeight > scrollViewHeight) {
+      setIsScrolling(true);
+    } else {
+      setIsScrolling(false);
+    }
+  }, [scrollViewHeight, rowHeight]);
+  const handleScrollViewLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setScrollViewHeight(height);
+  };
+  const handleRowLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setRowHeight(height);
+  };
+  const headerContent = /*#__PURE__*/_jsxs(View, {
+    style: [selectHeaderTokens(restTokens), styles.container],
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsx(View, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             ...headerStyles,
@@ -212,26 +263,30 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
-      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Spacer, {
-          space: 5
-        }), /*#__PURE__*/_jsx(Row, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
+      })
+    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            ...subeHeaderStyles,
+            lineHeight: subHeaderLineHeight
+          },
+          children: subtitle
+        })
       }), /*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/_jsx(Box, {
-        scroll: true,
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.options,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onLayout: handleScrollViewLayout,
         children: /*#__PURE__*/_jsx(Row, {
           distribute: "between",
+          onLayout: handleRowLayout,
           children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: 12 / colSize,
+            xs: TOTAL_COLUMNS / colSize,
             children: [/*#__PURE__*/_jsx(CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
@@ -241,13 +296,18 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             })]
           }, i))
         })
-      }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
+      })
+    })]
+  });
+  const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
+      tokens: selectDividerTokens(themeTokens),
+      space: 4
+    }) : /*#__PURE__*/_jsx(Spacer, {
+      space: 4
+    }), /*#__PURE__*/_jsx(View, {
+      style: selectControlsTokens(restTokens),
+      children: /*#__PURE__*/_jsx(Row, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/_jsxs(StackView, {
           direction: buttonDirection,
@@ -261,7 +321,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           children: [/*#__PURE__*/_jsx(Button, {
             onPress: () => onApply(checkedIds),
             variant: {
-              size: 'small',
               priority: 'high',
               ...(viewport === 'xs' && {
                 width: 'full'
@@ -275,105 +334,85 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             })
           })]
         })
-      })]
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: sourceRef,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsx(ModalOverlay, {
+      overlaidPosition: {
+        top: 0,
+        left: 0
+      },
+      onClose: onClose,
+      maxHeight: true,
+      maxHeightSize: windowHeight,
+      maxWidthSize: windowWidth,
+      minHeight: windowHeight,
+      minWidth: windowWidth,
+      tokens: {
+        ...tokens,
+        maxWidth: true
+      },
+      copy: copy,
+      isReady: isReady,
+      onLayout: onTargetLayout,
+      ref: modalRef,
+      enableFullscreen: true,
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
+        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
+        ref: ref,
+        children: [headerContent, /*#__PURE__*/_jsx(View, {
+          style: styles.controls,
+          children: controlsContent
+        })]
+      })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
       overlaidPosition: overlaidPosition,
       onClose: onClose,
-      maxHeight: maxHeight,
+      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth
+        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
       },
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
       ref: ref,
-      children: [/*#__PURE__*/_jsx(Row, {
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.textContainerStyle,
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...headerStyles,
-              lineHeight: headerLineHeight
-            },
-            children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-          })
-        })
-      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Spacer, {
-          space: 5
-        }), /*#__PURE__*/_jsx(Row, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      }), /*#__PURE__*/_jsx(Box, {
-        scroll: true,
-        children: /*#__PURE__*/_jsx(Row, {
-          distribute: "between",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
-              items: items.slice(i * rowLength, (i + 1) * rowLength),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/_jsx(Spacer, {
-              size: 4
-            })]
-          }, i))
-        })
-      }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
-        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/_jsxs(StackView, {
-          direction: buttonDirection,
-          space: 3,
-          tokens: {
-            alignItems: 'center',
-            ...(viewport === 'xs' && {
-              flexGrow: 1
-            })
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              size: 'small',
-              priority: 'high',
-              ...(viewport === 'xs' && {
-                width: 'full'
-              })
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: onClear,
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })]
+      children: [headerContent, controlsContent]
     })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = StyleSheet.create({
-  textContainerStyle: {
-    marginRight: 52
+  container: {
+    flex: 1
+  },
+  controls: Platform.select({
+    web: {},
+    default: {
+      flex: 0.35
+    }
+  }),
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent'
+  },
+  options: {
+    flex: 1
   }
 });
 

package/lib-module/Notification/Notification.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
@@ -176,7 +177,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -281,6 +282,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    onDismiss,
     ...rest
   } = _ref6;
   const [isDismissed, setIsDismissed] = React.useState(false);
@@ -340,7 +342,10 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     dismissIcon: DismissIconComponent,
     dismissIconColor
   } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
-  const onDismissPress = () => setIsDismissed(true);
+  const onDismissPress = () => {
+    setIsDismissed(true);
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+  };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: notificationComponentRef.current.containerStyles.container,
@@ -414,6 +419,10 @@ Notification.propTypes = {
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
     dismiss: PropTypes.string
   })]),
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: PropTypes.func,
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 };

package/lib-module/Status/Status.js

@@ -75,7 +75,8 @@ const selectTextStyles = _ref3 => {
     textLineHeight,
     fontName,
     fontSize,
-    fontWeight
+    fontWeight,
+    marginLeft
   } = _ref3;
   return applyTextStyles({
     fontColor: textColor,
@@ -83,7 +84,7 @@ const selectTextStyles = _ref3 => {
     fontSize,
     fontWeight,
     lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
-    marginLeft: 8
+    marginLeft
   });
 };
 
@@ -95,6 +96,7 @@ const selectTextStyles = _ref3 => {
  * @param {string} variant - The variant of the status component.
  * @param {ReactNode} children - The content to be displayed inside the status component.
  * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {elementType} customGradient - Defines an icon to be rendered.
  * @param {object} rest - The rest of the props to be applied to the status component.
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
@@ -108,14 +110,17 @@ const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     ...rest
   } = _ref4;
   const themeTokens = useThemeTokens('Status', tokens, variant);
+  const {
+    icon
+  } = themeTokens;
   const containerStyles = {
     ...selectContainerStyles(themeTokens),
     ...staticStyles.container
   };
   let content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Icon, {
+    children: [icon ? /*#__PURE__*/_jsx(Icon, {
       ...selectIconProps(themeTokens)
-    }), wrapStringsInText(children, {
+    }) : null, wrapStringsInText(children, {
       style: selectTextStyles(themeTokens)
     })]
   });

package/lib-module/index.js

@@ -8,6 +8,7 @@ export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
 export { default as CardGroup } from './CardGroup';
 export * from './Carousel';
+export { default as FileUpload } from './FileUpload';
 export { default as Listbox } from './Listbox';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';

package/lib-module/utils/convertFromMegaByteToByte.js

@@ -0,0 +1,10 @@
+/**
+ * Converts a value from megabytes to bytes.
+ *
+ * @param {number} megaByte - The value in megabytes to be converted.
+ * @returns {number} The converted value in bytes.
+ */
+const BYTES_IN_A_MEGABYTE = 1024 * 1024;
+export default function convertFromMegaByteToByte(megaByte) {
+  return megaByte * BYTES_IN_A_MEGABYTE;
+}

package/lib-module/utils/formatImageSource.js

@@ -0,0 +1,27 @@
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
+  uri: source
+} : source;
+export default formatImageSource;

package/lib-module/utils/index.js

@@ -20,4 +20,6 @@ export * from './ssr';
 export { default as containUniqueFields } from './containUniqueFields';
 export { default as BaseView } from './BaseView';
 export { default as htmlAttrs } from './htmlAttrs';
-export { transformGradient } from './transformGradient';
+export { transformGradient } from './transformGradient';
+export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
+export { default as formatImageSource } from './formatImageSource';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.62.0",
+    "@telus-uds/system-theme-tokens": "^2.63.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -21,7 +21,8 @@
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4",
     "semver": "7.5.2",
-    "string.prototype.matchall": "^4.0.9"
+    "string.prototype.matchall": "^4.0.9",
+    "expo-document-picker": "~10.3.0"
   },
   "description": "Base components",
   "devDependencies": {
@@ -85,6 +86,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.92.0",
+  "version": "1.94.0",
   "types": "types/index.d.ts"
 }

package/src/A11yText/index.jsx

@@ -12,7 +12,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = React.forwardRef(({ text, heading, ...rest }, ref) => {
+const A11yText = React.forwardRef(({ text, heading, role = 'text', ...rest }, ref) => {
   const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -20,7 +20,7 @@ const A11yText = React.forwardRef(({ text, heading, ...rest }, ref) => {
     // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
     accessible: Platform.OS === 'ios',
     accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : 'text',
+    accessibilityRole: heading ? 'header' : role,
     ...rest
   })
 
@@ -38,7 +38,11 @@ A11yText.propTypes = {
   /**
    * Whether text should be rendered as a heading
    */
-  heading: PropTypes.bool
+  heading: PropTypes.bool,
+  /**
+   * Role of the element
+   */
+  role: PropTypes.string
 }
 
 const styles = StyleSheet.create({

package/src/Button/ButtonGroup.jsx

@@ -63,7 +63,8 @@ const ButtonGroup = React.forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
     const stackTokens = selectTokens('StackView', themeTokens)
-    const { direction, space, fieldSpace } = themeTokens
+    const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
+      themeTokens
 
     const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
@@ -105,6 +106,12 @@ const ButtonGroup = React.forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole={accessibilityRole}
+        style={{
+          borderRadius,
+          backgroundColor,
+          padding,
+          ...(Platform.OS === 'web' ? { gap, width: 'fit-content' } : { alignSelf: 'flex-start' })
+        }}
         {...selectProps(rest)}
       >
         <StackWrap
@@ -112,6 +119,7 @@ const ButtonGroup = React.forwardRef(
           space={space}
           direction={direction}
           tokens={stackTokens}
+          gap={gap}
           ref={ref}
         >
           {items.map(