@telus-uds/components-base 3.21.0 → 3.23.0

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

package/lib/esm/Card/PressableCardBase.js

@@ -173,7 +173,9 @@ const staticStyles = StyleSheet.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';

package/lib/esm/Carousel/Carousel.js

@@ -351,11 +351,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     copy,
     slideDuration = 0,
     transitionDuration = 0,
+    loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
+  const isTransitioningRef = React.useRef(false);
   const viewport = useViewport();
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
@@ -426,9 +428,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsAnimating(true);
   }, [onAnimationStart]);
   const handleAnimationEnd = React.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
+    var _ref4;
+    const result = (_ref4 = arguments.length - 1, _ref4 < 0 || arguments.length <= _ref4 ? undefined : arguments[_ref4]);
+    if (result?.finished) {
+      if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+      setIsAnimating(false);
+      isTransitioningRef.current = false;
+    }
+  }, [onAnimationEnd, isTransitioningRef]);
   const updateOffset = React.useCallback(() => {
     if (enablePeeking) {
       const {
@@ -470,6 +477,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
+    const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -487,14 +495,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration * 1000
+        duration: applicableTransitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       Animated.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
+        duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
       Animated.spring(panToAnimate, {
@@ -503,7 +511,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -535,6 +543,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
+      isTransitioningRef.current = true;
       animate(pan, toValue, index);
       if (enableHero) {
         animate(heroPan, toValue, index);
@@ -550,6 +559,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       y: 0
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
+    isTransitioningRef.current = true;
     animate(pan, toValue, index);
     if (enableHero) {
       animate(heroPan, heroToValue, index);
@@ -605,29 +615,29 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     heroContainerLayoutRef.current = heroContainerLayout;
   }, [heroContainerLayout]);
   React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     if (enableHero) {
-      heroPan.x.addListener(_ref6 => {
+      heroPan.x.addListener(_ref7 => {
         let {
           value
-        } = _ref6;
+        } = _ref7;
         heroAnimatedX.current = value;
       });
-      heroPan.y.addListener(_ref7 => {
+      heroPan.y.addListener(_ref8 => {
         let {
           value
-        } = _ref7;
+        } = _ref8;
         heroAnimatedY.current = value;
       });
     }
@@ -664,7 +674,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onContainerLayout = _ref8 => {
+  const onContainerLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -674,7 +684,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -683,7 +693,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref9 => {
+  const onHeroContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -693,7 +703,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -702,14 +712,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref10 => {
+  const onPreviousNextNavigationButtonLayout = _ref11 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref10;
+    } = _ref11;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = React.useCallback(() => {
@@ -871,6 +881,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  const handleKeyDown = React.useCallback(event => {
+    if (isTransitioningRef.current && event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }, [isTransitioningRef]);
   return /*#__PURE__*/_jsxs(View, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/_jsx(View, {
@@ -896,6 +911,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           ref: ref,
           ...systemProps,
           ...containerProps,
+          ...(Platform.OS === 'web' ? {
+            onKeyDown: handleKeyDown
+          } : {}),
           children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
             style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
               positionVariant: previousNextNavigationPosition,
@@ -950,10 +968,27 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
               accessibilityLiveRegion: accessibilityLiveRegion,
               children: childrenArray.map((element, index) => {
-                const hidden = !isAnimating && index !== activeIndex;
+                let hidden = !isAnimating && index !== activeIndex;
+                if (enablePeeking && !isAnimating) {
+                  if (enableDisplayMultipleItemsPerSlide) {
+                    const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                    if (index >= activeIndex * maxItemsForSlide - 1 && index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1) {
+                      hidden = false;
+                    } else {
+                      hidden = true;
+                    }
+                  } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                    hidden = false;
+                  }
+                } else if (!enablePeeking && enableDisplayMultipleItemsPerSlide && !isAnimating) {
+                  const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                  if (index >= activeIndex * maxItemsForSlide && index < activeIndex * maxItemsForSlide + maxItemsForSlide) {
+                    hidden = false;
+                  }
+                }
                 const clonedElement = /*#__PURE__*/React.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  hidden,
                   enablePeeking,
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,
@@ -1197,6 +1232,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: PropTypes.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -97,13 +97,33 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : a11yProps.nonFocusableProps;
   const handleFocus = React.useCallback(event => {
-    if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-      goTo(activeIndex + 1);
+    if (Platform.OS === 'web') {
+      if (enablePeeking) {
+        if (enableDisplayMultipleItemsPerSlide) {
+          const startIndex = maximumItemsForSlide * activeIndex;
+          const endIndex = startIndex + maximumItemsForSlide - 1;
+          if (elementIndex < startIndex) {
+            if (activeIndex - 1 < 0) {
+              goTo(0);
+            } else {
+              goTo(activeIndex - 1);
+            }
+          } else if (elementIndex > endIndex) {
+            goTo(activeIndex + 1);
+          }
+        } else if (elementIndex !== activeIndex) {
+          if (elementIndex > activeIndex) {
+            goTo(activeIndex + 1);
+          } else if (elementIndex < activeIndex) {
+            goTo(activeIndex - 1);
+          }
+        }
+      }
     }
     if (rest.onFocus) {
       rest.onFocus(event);
     }
-  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   return /*#__PURE__*/_jsx(View, {
     style: selectContainerStyle({
       width,

package/lib/esm/Icon/Icon.js

@@ -36,17 +36,14 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     padding: themeTokens.padding
   };
   const getIconContentForMobile = () => {
-    if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/_jsx(View, {
-        style: {
-          backgroundColor: themeTokens.backgroundColor,
-          borderRadius: themeTokens.borderRadius,
-          ...paddingStyles
-        },
-        children: iconContent
-      });
-    }
-    return iconContent;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        backgroundColor: themeTokens.backgroundColor,
+        borderRadius: themeTokens.borderRadius,
+        ...paddingStyles
+      },
+      children: iconContent
+    });
   };
   return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
     ref: ref

package/lib/esm/Icon/IconText.js

@@ -100,7 +100,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
-  /* eslint-enable react/no-unused-prop-types */
 };
 const staticStyles = StyleSheet.create({
   adjustedContainer: {

package/lib/esm/Listbox/GroupControl.js

@@ -1,15 +1,15 @@
 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 Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens } from '../ThemeProvider';
 import Icon from '../Icon';
 import Spacer from '../Spacer';
 import { useListboxContext } from './ListboxContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -18,6 +18,34 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box'
   }
 });
+const selectTextStyles = tokens => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+});
+const selectContainerStyles = tokens => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+});
 const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     expanded,
@@ -38,51 +66,17 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     current: selectedId === id && id !== undefined,
     focus
   });
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens;
-  const getTextStyles = () => ({
-    color: groupColor
-  });
   return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
-    style: [styles.controlWrapper, {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: groupFontSize,
-      color: groupColor,
-      textDecoration: itemTextDecoration,
-      backgroundColor: groupBackgroundColor,
-      outline: itemOutline,
-      height: groupHeight,
-      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-      borderRadius: groupBorderRadius,
-      paddingLeft: groupPaddingLeft - groupBorderWidth,
-      paddingRight: groupPaddingRight - groupBorderWidth,
-      paddingTop: groupPaddingTop - groupBorderWidth,
-      paddingBottom: groupPaddingBottom - groupBorderWidth
-    }],
+    style: [styles.container, selectContainerStyles(tokens)],
     ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
-      style: getTextStyles(),
+      style: selectTextStyles(tokens),
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/_jsx(Icon, {
+    }), tokens.groupIcon && /*#__PURE__*/_jsx(Icon, {
       icon: tokens.groupIcon,
       tokens: {
         color: tokens.groupColor

package/lib/esm/Listbox/Listbox.js

@@ -1,10 +1,10 @@
 import React, { createElement as _createElement } 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 Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens } from '../ThemeProvider';
-import { withLinkRouter, getTokensPropType } from '../utils';
+import { withLinkRouter, getTokensPropType, variantProp } from '../utils';
 import ExpandCollapse from '../ExpandCollapse';
 import ListboxGroup from './ListboxGroup';
 import ListboxItem from './ListboxItem';
@@ -12,11 +12,16 @@ import { ListboxContext } from './ListboxContext';
 import DropdownOverlay from './ListboxOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = StyleSheet.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.forwardRef((_ref, ref) => {
   let {
@@ -30,14 +35,12 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemRouterProps,
     onClose,
     variant,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
-  const {
-    minHeight,
-    minWidth
-  } = useThemeTokens('Listbox', variant, tokens);
+  const listboxTokens = 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
@@ -96,11 +99,9 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       maxOpen: 1,
       ref: ref,
       children: expandProps => /*#__PURE__*/_jsx(View, {
-        style: [styles.list, {
-          minHeight,
-          minWidth
-        }],
-        role: "listbox",
+        style: [styles.container, selectContainerStyles(listboxTokens)],
+        accessibilityRole: "combobox",
+        testID: testID,
         children: items.map((item, index) => {
           const {
             id,
@@ -162,7 +163,15 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Test ID for testing
+   */
+  testID: PropTypes.string,
+  /**
+   * Listbox variant
+   */
+  variant: variantProp.propType
 };
 Listbox.Overlay = DropdownOverlay;
 export default Listbox;

package/lib/esm/Listbox/ListboxGroup.js

@@ -77,7 +77,8 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         borderRadius: 0,
         borderWidth: 0,
-        marginBottom: 0
+        marginBottom: 0,
+        contentPanelBackgroundColor: 'transparent'
       },
       controlRef: ref,
       children: /*#__PURE__*/_jsx(View, {