@telus-uds/components-base 3.12.0 → 3.12.2

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 11 Jul 2025 22:15:36 GMT and should not be manually modified.
+This log was last generated on Fri, 25 Jul 2025 04:09:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.12.2
+
+Fri, 25 Jul 2025 04:09:38 GMT
+
+### Patches
+
+- `Carousel`: fix tab navigation (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.11.0
+
+## 3.12.1
+
+Wed, 16 Jul 2025 15:18:31 GMT
+
+### Patches
+
+- `ListboxOverlay`: fix console warning (guillermo.peitzner@telus.com)
+
 ## 3.12.0
 
-Fri, 11 Jul 2025 22:15:36 GMT
+Fri, 11 Jul 2025 22:22:37 GMT
 
 ### Minor changes
 

package/lib/cjs/Carousel/Carousel.js

@@ -172,6 +172,31 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   }
   return childrenArray.length;
 };
+
+/**
+ * Determines the maximum number of items that can be displayed per slide based on viewport
+ *
+ * @param {boolean} enableDisplayMultipleItemsPerSlide - Flag indicating whether multiple items per slide is enabled
+ * @param {string} viewport - The current viewport size ('xs', 'sm', 'md', 'lg', 'xl')
+ * @returns {number} The maximum number of items that can be displayed per slide
+ */
+const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+      case 'md':
+        return _Constants.ITEMS_PER_VIEWPORT_MD;
+      case 'lg':
+      case 'xl':
+        return _Constants.ITEMS_PER_VIEWPORT_LG_XL;
+      default:
+        return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+    }
+  }
+  return _Constants.ITEMS_PER_VIEWPORT_XS_SM;
+};
 const selectRootContainerStyles = (enableHero, viewport) => {
   if (enableHero && viewport === 'xl' && _Platform.default.OS === 'web') {
     return {
@@ -867,6 +892,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         firstFocusRef: firstFocusRef,
         refocus: refocus,
         width: containerLayout.width,
+        maximumItemsForSlide: getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
           style: [staticStyles.root, {
             ...(_Platform.default.OS === 'web' ? {

package/lib/cjs/Carousel/CarouselContext.js

@@ -21,7 +21,8 @@ const CarouselProvider = _ref => {
     refocus = false,
     themeTokens,
     totalItems,
-    width
+    width,
+    maximumItemsForSlide
   } = _ref;
   const value = _react.default.useMemo(() => ({
     activeIndex,
@@ -31,8 +32,9 @@ const CarouselProvider = _ref => {
     refocus,
     themeTokens,
     totalItems,
-    width
-  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
+    width,
+    maximumItemsForSlide
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width, maximumItemsForSlide]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: value,
     children: children
@@ -55,5 +57,6 @@ CarouselProvider.propTypes = {
   refocus: _propTypes.default.bool,
   themeTokens: (0, _utils.getTokensPropType)('Carousel'),
   totalItems: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired
+  width: _propTypes.default.number.isRequired,
+  maximumItemsForSlide: _propTypes.default.number
 };

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

@@ -94,13 +94,23 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = _ref2;
   const {
     width,
-    activeIndex
+    activeIndex,
+    goTo,
+    maximumItemsForSlide
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({
     ...rest,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  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 (rest.onFocus) {
+      rest.onFocus(event);
+    }
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContainerStyle({
       width,
@@ -114,6 +124,7 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
+    onFocus: handleFocus,
     children: children
   });
 });

package/lib/cjs/Carousel/Constants.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+const ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_XS_SM = 1;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
 const GAP_BETWEEN_ITEMS = exports.GAP_BETWEEN_ITEMS = 16;

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -62,13 +62,12 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
-  return props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
-        ...props
-      })
-    });
-  };
+  return /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
+      ...props,
+      ref: ref
+    })
+  }));
 };
 DropdownOverlay.displayName = 'DropdownOverlay';
 DropdownOverlay.propTypes = {

package/lib/esm/Carousel/Carousel.js

@@ -21,7 +21,7 @@ import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import Box from '../Box';
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER } from './Constants';
+import { ITEMS_PER_VIEWPORT_XS_SM, ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -165,6 +165,31 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   }
   return childrenArray.length;
 };
+
+/**
+ * Determines the maximum number of items that can be displayed per slide based on viewport
+ *
+ * @param {boolean} enableDisplayMultipleItemsPerSlide - Flag indicating whether multiple items per slide is enabled
+ * @param {string} viewport - The current viewport size ('xs', 'sm', 'md', 'lg', 'xl')
+ * @returns {number} The maximum number of items that can be displayed per slide
+ */
+const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return ITEMS_PER_VIEWPORT_XS_SM;
+      case 'md':
+        return ITEMS_PER_VIEWPORT_MD;
+      case 'lg':
+      case 'xl':
+        return ITEMS_PER_VIEWPORT_LG_XL;
+      default:
+        return ITEMS_PER_VIEWPORT_XS_SM;
+    }
+  }
+  return ITEMS_PER_VIEWPORT_XS_SM;
+};
 const selectRootContainerStyles = (enableHero, viewport) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
@@ -860,6 +885,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         firstFocusRef: firstFocusRef,
         refocus: refocus,
         width: containerLayout.width,
+        maximumItemsForSlide: getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport),
         children: [/*#__PURE__*/_jsxs(View, {
           style: [staticStyles.root, {
             ...(Platform.OS === 'web' ? {

package/lib/esm/Carousel/CarouselContext.js

@@ -13,7 +13,8 @@ const CarouselProvider = _ref => {
     refocus = false,
     themeTokens,
     totalItems,
-    width
+    width,
+    maximumItemsForSlide
   } = _ref;
   const value = React.useMemo(() => ({
     activeIndex,
@@ -23,8 +24,9 @@ const CarouselProvider = _ref => {
     refocus,
     themeTokens,
     totalItems,
-    width
-  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
+    width,
+    maximumItemsForSlide
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width, maximumItemsForSlide]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: value,
     children: children
@@ -46,6 +48,7 @@ CarouselProvider.propTypes = {
   refocus: PropTypes.bool,
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number.isRequired,
+  maximumItemsForSlide: PropTypes.number
 };
 export { CarouselProvider, useCarousel };

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

@@ -87,13 +87,23 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   } = _ref2;
   const {
     width,
-    activeIndex
+    activeIndex,
+    goTo,
+    maximumItemsForSlide
   } = useCarousel();
   const selectedProps = selectProps({
     ...rest,
     ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : a11yProps.nonFocusableProps;
+  const handleFocus = React.useCallback(event => {
+    if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
+      goTo(activeIndex + 1);
+    }
+    if (rest.onFocus) {
+      rest.onFocus(event);
+    }
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
   return /*#__PURE__*/_jsx(View, {
     style: selectContainerStyle({
       width,
@@ -107,6 +117,7 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
+    onFocus: handleFocus,
     children: children
   });
 });

package/lib/esm/Carousel/Constants.js

@@ -1,3 +1,4 @@
+export const ITEMS_PER_VIEWPORT_XS_SM = 1;
 export const ITEMS_PER_VIEWPORT_MD = 2;
 export const ITEMS_PER_VIEWPORT_LG_XL = 3;
 export const GAP_BETWEEN_ITEMS = 16;

package/lib/esm/Listbox/ListboxOverlay.js

@@ -55,13 +55,12 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
-  return props => {
-    return /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Overlay, {
-        ...props
-      })
-    });
-  };
+  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(Overlay, {
+      ...props,
+      ref: ref
+    })
+  }));
 };
 DropdownOverlay.displayName = 'DropdownOverlay';
 DropdownOverlay.propTypes = {

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.10.0",
+    "@telus-uds/system-theme-tokens": "^4.11.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.12.0",
+  "version": "3.12.2",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.10.0",
+    "@telus-uds/system-theme-tokens": "^4.11.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.12.0",
+  "version": "3.12.2",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -27,6 +27,7 @@ import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
 import Box from '../Box'
 import {
+  ITEMS_PER_VIEWPORT_XS_SM,
   ITEMS_PER_VIEWPORT_MD,
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
@@ -211,6 +212,31 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   return childrenArray.length
 }
 
+/**
+ * Determines the maximum number of items that can be displayed per slide based on viewport
+ *
+ * @param {boolean} enableDisplayMultipleItemsPerSlide - Flag indicating whether multiple items per slide is enabled
+ * @param {string} viewport - The current viewport size ('xs', 'sm', 'md', 'lg', 'xl')
+ * @returns {number} The maximum number of items that can be displayed per slide
+ */
+const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return ITEMS_PER_VIEWPORT_XS_SM
+      case 'md':
+        return ITEMS_PER_VIEWPORT_MD
+      case 'lg':
+      case 'xl':
+        return ITEMS_PER_VIEWPORT_LG_XL
+      default:
+        return ITEMS_PER_VIEWPORT_XS_SM
+    }
+  }
+  return ITEMS_PER_VIEWPORT_XS_SM
+}
+
 const selectRootContainerStyles = (enableHero, viewport) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
@@ -993,6 +1019,10 @@ const Carousel = React.forwardRef(
             firstFocusRef={firstFocusRef}
             refocus={refocus}
             width={containerLayout.width}
+            maximumItemsForSlide={getMaximumItemsForSlide(
+              enableDisplayMultipleItemsPerSlide,
+              viewport
+            )}
           >
             <View
               style={[

package/src/Carousel/CarouselContext.jsx

@@ -13,7 +13,8 @@ const CarouselProvider = ({
   refocus = false,
   themeTokens,
   totalItems,
-  width
+  width,
+  maximumItemsForSlide
 }) => {
   const value = React.useMemo(
     () => ({
@@ -24,9 +25,20 @@ const CarouselProvider = ({
       refocus,
       themeTokens,
       totalItems,
-      width
+      width,
+      maximumItemsForSlide
     }),
-    [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]
+    [
+      activeIndex,
+      goTo,
+      getCopyWithPlaceholders,
+      itemLabel,
+      refocus,
+      totalItems,
+      themeTokens,
+      width,
+      maximumItemsForSlide
+    ]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
@@ -48,7 +60,8 @@ CarouselProvider.propTypes = {
   refocus: PropTypes.bool,
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number.isRequired,
+  maximumItemsForSlide: PropTypes.number
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -102,14 +102,28 @@ const CarouselItem = React.forwardRef(
     },
     ref
   ) => {
-    const { width, activeIndex } = useCarousel()
+    const { width, activeIndex, goTo, maximumItemsForSlide } = useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
       ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
     })
 
-    const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+    const focusabilityProps =
+      activeIndex === elementIndex || enablePeeking ? {} : a11yProps.nonFocusableProps
+
+    const handleFocus = React.useCallback(
+      (event) => {
+        if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
+          goTo(activeIndex + 1)
+        }
+
+        if (rest.onFocus) {
+          rest.onFocus(event)
+        }
+      },
+      [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]
+    )
 
     return (
       <View
@@ -125,6 +139,7 @@ const CarouselItem = React.forwardRef(
         {...selectedProps}
         {...focusabilityProps}
         ref={ref}
+        onFocus={handleFocus}
       >
         {children}
       </View>

package/src/Carousel/Constants.js

@@ -1,3 +1,4 @@
+export const ITEMS_PER_VIEWPORT_XS_SM = 1
 export const ITEMS_PER_VIEWPORT_MD = 2
 export const ITEMS_PER_VIEWPORT_LG_XL = 3
 export const GAP_BETWEEN_ITEMS = 16

package/src/Listbox/ListboxOverlay.jsx

@@ -55,13 +55,11 @@ const DropdownOverlay = React.forwardRef(
 
 const withPortal = (Overlay) => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
-  return (props) => {
-    return (
-      <Portal>
-        <Overlay {...props} />
-      </Portal>
-    )
-  }
+  return React.forwardRef((props, ref) => (
+    <Portal>
+      <Overlay {...props} ref={ref} />
+    </Portal>
+  ))
 }
 
 DropdownOverlay.displayName = 'DropdownOverlay'