@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/cjs/Carousel/Carousel.js

@@ -364,6 +364,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
+  const isTransitioningRef = _react.default.useRef(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
@@ -434,9 +435,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsAnimating(true);
   }, [onAnimationStart]);
   const handleAnimationEnd = _react.default.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.default.useCallback(() => {
     if (enablePeeking) {
       const {
@@ -544,6 +550,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
+      isTransitioningRef.current = true;
       animate(pan, toValue, index);
       if (enableHero) {
         animate(heroPan, toValue, index);
@@ -559,6 +566,7 @@ const Carousel = /*#__PURE__*/_react.default.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);
@@ -614,29 +622,29 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     heroContainerLayoutRef.current = heroContainerLayout;
   }, [heroContainerLayout]);
   _react.default.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;
       });
     }
@@ -673,7 +681,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onContainerLayout = _ref8 => {
+  const onContainerLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -683,7 +691,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -692,7 +700,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref9 => {
+  const onHeroContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -702,7 +710,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -711,14 +719,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref10 => {
+  const onPreviousNextNavigationButtonLayout = _ref11 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref10;
+    } = _ref11;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = _react.default.useCallback(() => {
@@ -880,6 +888,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  const handleKeyDown = _react.default.useCallback(event => {
+    if (isTransitioningRef.current && event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }, [isTransitioningRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -905,6 +918,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           ref: ref,
           ...systemProps,
           ...containerProps,
+          ...(_Platform.default.OS === 'web' ? {
+            onKeyDown: handleKeyDown
+          } : {}),
           children: [isAutoPlayEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
               positionVariant: previousNextNavigationPosition,
@@ -959,10 +975,27 @@ const Carousel = /*#__PURE__*/_react.default.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.default.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  hidden,
                   enablePeeking,
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -104,13 +104,33 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
   const handleFocus = _react.default.useCallback(event => {
-    if (_Platform.default.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-      goTo(activeIndex + 1);
+    if (_Platform.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContainerStyle({
       width,

package/lib/cjs/HorizontalScroll/HorizontalScroll.js

@@ -35,6 +35,7 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ScrollButton,
     tokens,
     itemPositions,
+    variant,
     children,
     ...rest
   } = _ref;
@@ -78,8 +79,9 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setScrollOffset(x);
   };
   const scrollMax = Math.max(0, contentWidth - containerWidth);
-  const showNextButton = scrollOffset < scrollMax;
-  const showPreviousButton = scrollOffset > 0;
+  const hideNavigationButtons = variant?.hideNavigationButtons || false;
+  const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons;
+  const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons;
   const scrollRef = _react.default.useRef(null);
   const scrollTo = targetX => {
     if (typeof scrollRef.current?.scrollTo === 'function') {
@@ -170,6 +172,7 @@ HorizontalScroll.propTypes = {
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
+  variant: _utils.variantProp.propType,
   children: _propTypes.default.node
 };
 var _default = exports.default = HorizontalScroll;

package/lib/cjs/Icon/Icon.js

@@ -21,6 +21,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     scalesWithText = false,
     style = {},
+    testID,
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
@@ -43,19 +44,18 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding: themeTokens.padding
   };
   const getIconContentForMobile = () => {
-    if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: {
-          backgroundColor: themeTokens.backgroundColor,
-          borderRadius: themeTokens.borderRadius,
-          ...paddingStyles
-        },
-        children: iconContent
-      });
-    }
-    return iconContent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      testID: testID,
+      style: {
+        backgroundColor: themeTokens.backgroundColor,
+        borderRadius: themeTokens.borderRadius,
+        ...paddingStyles
+      },
+      children: iconContent
+    });
   };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    testID: testID,
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,

package/lib/cjs/Icon/IconText.js

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

package/lib/cjs/Listbox/GroupControl.js

@@ -7,16 +7,17 @@ exports.default = void 0;
 var _react = _interopRequireDefault(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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 var _ListboxContext = require("./ListboxContext");
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const styles = _StyleSheet.default.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -25,6 +26,34 @@ const styles = _StyleSheet.default.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.default.forwardRef((_ref, ref) => {
   let {
     expanded,
@@ -32,65 +61,35 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hover,
     focus,
     label,
-    id
+    id,
+    variant = {}
   } = _ref;
   const {
     selectedId,
     setSelectedId
   } = (0, _ListboxContext.useListboxContext)();
-  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {}, {
+  const isSecondLevel = variant?.secondLevel === true;
+  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, {}, {
     expanded,
     pressed,
     hover,
     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
+    focus,
+    secondLevel: isSecondLevel
   });
+  const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     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__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      style: getTextStyles(),
+      style: selectTextStyles(tokens),
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      icon: tokens.groupIcon,
+    }), displayIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: displayIcon,
       tokens: {
         color: tokens.groupColor
       },
@@ -107,6 +106,7 @@ GroupControl.propTypes = {
   pressed: _propTypes.default.bool,
   hover: _propTypes.default.bool,
   focus: _propTypes.default.bool,
-  label: _propTypes.default.string
+  label: _propTypes.default.string,
+  variant: _utils.variantProp.propType
 };
 var _default = exports.default = GroupControl;

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"));
@@ -16,16 +16,24 @@ var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
 var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
 var _ListboxContext = require("./ListboxContext");
 var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 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
+    margin: 0,
+    position: 'relative',
+    overflow: 'visible'
   }
 });
+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 {
@@ -38,15 +46,16 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     LinkRouter,
     itemRouterProps,
     onClose,
+    copy = 'en',
+    dictionary = _dictionary.default,
     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 [activeSecondLevelGroup, setActiveSecondLevelGroup] = _react.default.useState(null);
+  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
@@ -95,21 +104,22 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return () => {};
   }, [onClose, handleKeydown]);
+  const contextValue = {
+    selectedId,
+    setSelectedId,
+    activeSecondLevelGroup,
+    setActiveSecondLevelGroup
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
-    value: {
-      selectedId,
-      setSelectedId
-    },
+    value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       initialOpen: initialOpen,
       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,
@@ -123,6 +133,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRefs.current[index] = currentItemRef;
             return currentItemRef;
           };
+          if (!nestedItems && activeSecondLevelGroup) {
+            return null;
+          }
           return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
             ...item,
             expandProps: expandProps,
@@ -131,7 +144,12 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
-            key: itemId
+            key: itemId,
+            copy: copy,
+            dictionary: dictionary,
+            variant: variant,
+            tokens: tokens,
+            onClose: onClose
           }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, {
             ...item,
             key: itemId,
@@ -140,7 +158,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRouterProps: itemRouterProps,
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: index === 0 ? firstItemRef : itemRef
+            ref: index === 0 ? firstItemRef : itemRef,
+            variant: variant,
+            tokens: tokens
           });
         })
       })
@@ -171,7 +191,30 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  /**
+   * Test ID for testing
+   */
+  testID: _propTypes.default.string,
+  /**
+   * Select English or French copy
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    }),
+    fr: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    })
+  }),
+  /**
+   * Listbox variant
+   */
+  variant: _utils.variantProp.propType
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = exports.default = Listbox;