@telus-uds/components-base 3.5.1 → 3.6.0

package/lib/esm/Box/Box.js

@@ -6,9 +6,10 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale } from '../utils';
 import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -196,8 +197,19 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = useThemeTokens('Box', tokens, variant);
-  const styles = {
+  const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = useThemeTokensCallback('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: useSpacingScale(left),
     paddingRight: useSpacingScale(right),
@@ -205,8 +217,38 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: getSpacingScale(left, vp, getSpacingTokens),
+        paddingRight: getSpacingScale(right, vp, getSpacingTokens),
+        paddingTop: getSpacingScale(top, vp, getSpacingTokens),
+        paddingBottom: getSpacingScale(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids
+    } = RNMQStyleSheet.create({
+      box: {
+        ...mediaQueryStyles
+      }
+    });
+    boxStyles = {
+      flex,
+      ...selectBoxStyles(themeTokens[viewport], customGradient)
+    };
+    boxMediaIds = ids.box;
+  }
   let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  if (typeof customGradient === 'function') content = customGradient(boxStyles.colors, boxStyles)(children);
   const {
     src = '',
     alt = '',
@@ -240,23 +282,27 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       });
     }
   }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  const dataSetValue = boxMediaIds ? {
+    media: boxMediaIds,
+    ...dataSet
+  } : dataSet;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle];
     return /*#__PURE__*/_jsx(ScrollView, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

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 } from './Constants';
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -198,56 +198,27 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
 };
 
 /**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ * Calculates the final width of a carousel container based on the provided parameters.
  *
- * @param {number} containerWidth - The initial width of the container.
- * @param {boolean} enablePeeking - Flag indicating if peeking is enabled.
- * @param {object} viewport - The viewport properties.
- * @param {object} activeIndexRef - A ref object holding the current active index.
- * @param {number} totalItems - The total number of items in the carousel.
- * @param {number} calcDelta - The delta value used for calculations.
- * @returns {number} - The final calculated width of the container.
- *
- * The function adjusts the container width for displacement purposes based on the peeking properties and the position
- * of the active item (first, middle, or last). It considers different peeking spaces and gaps
- * to ensure the correct width is calculated for the carousel to display properly.
+ * @param {number} containerWidth - The width of the carousel container.
+ * @param {boolean} enablePeeking - Flag indicating whether peeking is enabled.
+ * @param {Object} viewport - The viewport configuration object used to determine peeking properties.
+ * @param {React.MutableRefObject<number>} activeIndexRef - A ref object holding the current active index of the carousel.
+ * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
   let finalWidth = containerWidth;
   if (enablePeeking) {
     const {
-      peekingFirstSpace,
       peekingGap,
-      peekingLastSpace,
-      peekingMiddleSpace
+      peekingMiddleSpace,
+      peekingMarginLeft
     } = getPeekingProps(viewport);
-    const isFirst = activeIndexRef.current === 0;
-    const isLast = activeIndexRef.current + 1 >= totalItems;
-    const isMiddle = !isFirst && !isLast;
-    const basePeekingSpace = peekingFirstSpace + peekingGap + peekingMiddleSpace;
-    const middlePeekingSpace = peekingMiddleSpace * 2 + peekingGap;
-    if (isFirst) {
-      finalWidth -= basePeekingSpace;
-      if (activeIndexRef.current + 1 === totalItems - 1) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
-    } else if (isMiddle) {
-      if (calcDelta > 0) {
-        finalWidth -= basePeekingSpace + middlePeekingSpace * activeIndexRef.current;
-        if (activeIndexRef.current + 1 === totalItems - 1) {
-          finalWidth -= peekingLastSpace - peekingMiddleSpace;
-        }
-      } else {
-        finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-        if (activeIndexRef.current - 1 === 0) {
-          finalWidth -= peekingFirstSpace - peekingMiddleSpace;
-        }
-      }
-    } else if (isLast) {
-      finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-      if (activeIndexRef.current - 1 === 0) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
+    const slideWide = containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER);
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace;
+    } else {
+      finalWidth = slideWide + peekingGap;
     }
   }
   return finalWidth;
@@ -434,7 +405,23 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsAnimating(false);
   }, [onAnimationEnd]);
   const updateOffset = React.useCallback(() => {
-    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
+    if (enablePeeking) {
+      const {
+        peekingGap,
+        peekingMiddleSpace,
+        peekingMarginLeft
+      } = getPeekingProps(viewport);
+      let finalWidth;
+      const slideWide = containerLayoutRef.current.width - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER);
+      if (activeIndexRef.current === 0) {
+        finalWidth = 0;
+      } else {
+        finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace + (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER);
+      }
+      animatedX.current = finalWidth * NEGATIVE_MULTIPLIER;
+    } else {
+      animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER;
+    }
     animatedY.current = 0;
     pan.setOffset({
       x: animatedX.current,
@@ -445,7 +432,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       y: 0
     });
     if (enableHero) {
-      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1;
+      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER;
       heroAnimatedY.current = 0;
       heroPan.setOffset({
         x: heroAnimatedX.current,
@@ -456,7 +443,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         y: 0
       });
     }
-  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero]);
+  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -531,7 +518,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     stopAutoplay();
     setActiveIndex(index);
-    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
+    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef);
     toValue.x = finalWidth * -1 * calcDelta;
     const heroToValue = {
       x: 0,

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

@@ -13,18 +13,17 @@ const selectContainerStyle = _ref => {
     elementIndex,
     enablePeeking,
     peekingMarginLeft,
-    peekingFirstSpace,
     peekingGap,
     hidden,
     enableDisplayMultipleItemsPerSlide,
-    viewport
+    viewport,
+    peekingMiddleSpace
   } = _ref;
   let adjustedWidth = width;
   let marginLeft = 0;
-  const marginRight = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2);
     if (isFirst) {
       marginLeft = peekingMarginLeft;
     } else {
@@ -61,8 +60,7 @@ const selectContainerStyle = _ref => {
   }
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   };
   if (hidden && Platform.OS === 'web') {
     style.visibility = 'hidden';

package/lib/esm/Carousel/Constants.js

@@ -4,4 +4,7 @@ export const GAP_BETWEEN_ITEMS = 16;
 export const HERO_POSITION_OFFSET = 20;
 export const DEFAULT_POSITION_OFFSET = 0;
 export const LARGE_VIEWPORT_MARGIN = 40;
-export const DEFAULT_VIEWPORT_MARGIN = 10;
+export const DEFAULT_VIEWPORT_MARGIN = 10;
+export const PEEKING_MULTIPLIER = 2;
+export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
+export const NEGATIVE_MULTIPLIER = -1;

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
+import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
@@ -78,6 +79,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -16,21 +16,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -39,22 +25,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref;
   const {
     expanded,
     hover,
-    focus
+    focus,
+    pressed
   } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
-    outerBorderColor
-  } = useThemeTokens('Link', {}, {}, {
-    focus: Platform.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = useThemeTokens('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -88,9 +80,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -130,6 +130,10 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     buttonIconPadding,
     subtitleColor,
     dividerColor,
+    iconColor,
+    buttonBackgroundColor,
+    iconColorSelected,
+    buttonBackgroundColorSelected,
     ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
@@ -152,7 +156,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
     paddingRight: labelPaddingRight,
-    iconBackground: buttonIconBackgroundColor
+    iconBackground: buttonIconBackgroundColor,
+    iconColor: isSelected ? iconColorSelected : iconColor,
+    backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
   const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));
@@ -242,7 +248,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
   const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
   const [rowHeight, setRowHeight] = React.useState(0);
-  const modalRef = useScrollBlocking(isOpen);
+  const modalRef = useScrollBlocking(isOpen && viewport === 'xs');
   const windowWidth = Dimensions.get('window').width;
   const windowHeight = Dimensions.get('window').height;
   React.useEffect(() => {

package/lib/esm/Notification/Notification.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet, useResponsiveProp } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -63,8 +63,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
+  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -72,9 +72,12 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
+    acc[vp] = {
+      ...selectContainerStyles({
+        ...viewportTokens
+      }),
+      flexDirection: 'column'
+    };
     return acc;
   }, {});
   const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
@@ -83,22 +86,29 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     styles: containerStyles
   } = StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = StyleSheet.create({
-    contentContainer: {
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
+    let [vp, viewportTokens] = _ref6;
+    acc[vp] = {
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
       ...(system && {
         alignSelf: 'center'
       })
+    };
+    return acc;
+  }, {});
+  const selectContentContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContentContainerStyles);
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = StyleSheet.create({
+    contentContainer: {
+      ...selectContentContainerMediaQueryStyles
     }
   });
   const {
@@ -171,7 +181,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
       ...(system && {
         alignSelf: 'center'
       })
@@ -261,7 +271,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     system,
@@ -271,7 +281,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     onDismiss,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isDismissed, setIsDismissed] = React.useState(false);
   const viewport = useViewport();
   const getCopy = useCopy({
@@ -292,7 +302,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = viewports.map.get(viewports.xl);
+  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},

package/lib/esm/utils/getSpacingScale.js

@@ -0,0 +1,61 @@
+import { resolveResponsiveProp } from './useResponsiveProp';
+
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number';
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+export default getSpacingScale;

package/lib/esm/utils/index.js

@@ -22,4 +22,5 @@ export { default as BaseView } from './BaseView';
 export { default as htmlAttrs } from './htmlAttrs';
 export { transformGradient } from './transformGradient';
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
-export { default as formatImageSource } from './formatImageSource';
+export { default as formatImageSource } from './formatImageSource';
+export { default as getSpacingScale } from './getSpacingScale';

package/lib/esm/utils/useResponsiveProp.js

@@ -21,7 +21,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   viewports.inherit(prop)[viewport] :
   // If no current viewport is available, default to smallest viewport
   prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
-  return value === undefined ? defaultValue : value;
+  return value === undefined || value === null ? defaultValue : value;
 };
 
 /**

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.3.0",
+    "@telus-uds/system-theme-tokens": "^4.4.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -56,8 +56,8 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": ">=18.2.0 <19.0.0",
+    "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
     "react-native-web": "^0.19.10",
     "react-native-svg": "15.7.1"
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.1",
+  "version": "3.6.0",
   "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.3.0",
+    "@telus-uds/system-theme-tokens": "^4.4.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -56,8 +56,8 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": ">=18.2.0 <19.0.0",
+    "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
     "react-native-web": "^0.19.10",
     "react-native-svg": "15.7.1"
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.1",
+  "version": "3.6.0",
   "types": "types/index.d.ts"
 }