@telus-uds/components-base 3.5.1 → 3.6.0

package/src/Box/Box.jsx

@@ -1,9 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
-import { useThemeTokens } from '../ThemeProvider'
+import {
+  useTheme,
+  useThemeTokens,
+  useResponsiveThemeTokens,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
+  createMediaQueryStyles,
   getA11yPropsFromHtmlTag,
   getTokensPropType,
   layoutTags,
@@ -13,9 +19,12 @@ import {
   useResponsiveProp,
   useSpacingScale,
   variantProp,
-  viewProps
+  viewProps,
+  StyleSheet as RNMQStyleSheet,
+  getSpacingScale
 } from '../utils'
 import backgroundImageStylesMap from './backgroundImageStylesMap'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -212,8 +221,20 @@ const Box = React.forwardRef(
       ...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),
@@ -221,10 +242,40 @@ const Box = React.forwardRef(
       paddingBottom: useSpacingScale(bottom),
       ...selectBoxStyles(themeTokens, customGradient)
     }
+    let boxMediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const { transformedThemeTokens } = Object.entries(themeTokens).reduce(
+        (acc, [vp]) => {
+          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)
+      content = customGradient(boxStyles.colors, boxStyles)(children)
 
     const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
@@ -256,17 +307,19 @@ const Box = React.forwardRef(
       }
     }, [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 (
-        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
+        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSetValue} ref={ref}>
           {content}
         </ScrollView>
       )
     }
     return (
-      <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
+      <View {...props} style={boxStyles} testID={testID} dataSet={dataSetValue} ref={ref}>
         {content}
       </View>
     )

package/src/Carousel/Carousel.jsx

@@ -31,7 +31,10 @@ import {
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
   LARGE_VIEWPORT_MARGIN,
-  DEFAULT_VIEWPORT_MARGIN
+  DEFAULT_VIEWPORT_MARGIN,
+  PEEKING_MULTIPLIER,
+  ACTIVE_INDEX_OFFSET_MULTIPLIER,
+  NEGATIVE_MULTIPLIER
 } from './Constants'
 
 const TRANSITION_MODES = {
@@ -245,63 +248,26 @@ 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 } =
-      getPeekingProps(viewport)
+    const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+    const slideWide =
+      containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
 
-    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
-      }
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace
+    } else {
+      finalWidth = slideWide + peekingGap
     }
   }
 
@@ -495,15 +461,40 @@ const Carousel = React.forwardRef(
     )
 
     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,
         y: animatedY.current
       })
       pan.setValue({ x: 0, 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,
@@ -511,7 +502,7 @@ const Carousel = React.forwardRef(
         })
         heroPan.setValue({ x: 0, y: 0 })
       }
-    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero])
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex) => {
@@ -593,9 +584,7 @@ const Carousel = React.forwardRef(
           containerLayoutRef.current.width,
           enablePeeking,
           viewport,
-          activeIndexRef,
-          totalItems,
-          calcDelta
+          activeIndexRef
         )
 
         toValue.x = finalWidth * -1 * calcDelta

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -19,19 +19,18 @@ const selectContainerStyle = ({
   elementIndex,
   enablePeeking,
   peekingMarginLeft,
-  peekingFirstSpace,
   peekingGap,
   hidden,
   enableDisplayMultipleItemsPerSlide,
-  viewport
+  viewport,
+  peekingMiddleSpace
 }) => {
   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 {
@@ -73,8 +72,7 @@ const selectContainerStyle = ({
 
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   }
 
   if (hidden && Platform.OS === 'web') {

package/src/Carousel/Constants.js

@@ -5,3 +5,6 @@ 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 PEEKING_MULTIPLIER = 2
+export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1
+export const NEGATIVE_MULTIPLIER = -1

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -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'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
@@ -79,6 +80,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/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -15,13 +15,6 @@ const presentationOnly = {
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 }
 
-const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
-  color,
-  textLine,
-  blockLineHeight: lineHeight,
-  blockFontSize: fontSize
-})
-
 const ExpandCollapseMiniControl = React.forwardRef(
   (
     {
@@ -35,20 +28,24 @@ const ExpandCollapseMiniControl = React.forwardRef(
     },
     ref
   ) => {
-    const { expanded, hover, focus } = pressableState || {}
-    // we only want focus outline when focusing, if user is pressing we don't want the border.
-    const { outerBorderColor } = useThemeTokens(
+    const { expanded, hover, focus, pressed } = pressableState || {}
+    const { quiet } = variant
+    const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded
+
+    const linkTokens = useThemeTokens(
       'Link',
       {},
-      {},
-      { focus: Platform.OS !== 'web' ? expanded : focus }
-    )
-    const { size, icon, ...themeTokens } = useThemeTokens(
-      'ExpandCollapseMiniControl',
-      tokens,
-      variant,
-      { expanded, focus }
+      { ...variant, quiet: expanded ?? quiet },
+      {
+        focus: isFocusVisible,
+        hover,
+        pressed
+      }
     )
+    const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
+      expanded,
+      focus
+    })
 
     // Choose hover styles when any part of Control is hoverred
     const appearance = { ...variant, hover }
@@ -75,9 +72,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
         icon={icon}
         iconPosition={iconPosition}
         tokens={(linkState) => ({
-          ...getTokens(linkState),
-          ...selectLinkTokens(themeTokens),
-          outerBorderColor
+          ...linkTokens,
+          ...getTokens(linkState)
         })}
         ref={ref}
         {...presentationOnly}

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -134,6 +134,10 @@ const MultiSelectFilter = React.forwardRef(
       buttonIconPadding,
       subtitleColor,
       dividerColor,
+      iconColor,
+      buttonBackgroundColor,
+      iconColorSelected,
+      buttonBackgroundColorSelected,
       ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
@@ -154,7 +158,9 @@ const MultiSelectFilter = React.forwardRef(
       paddingBottom: labelPaddingBottom,
       paddingLeft: labelPaddingLeft,
       paddingRight: labelPaddingRight,
-      iconBackground: buttonIconBackgroundColor
+      iconBackground: buttonIconBackgroundColor,
+      iconColor: isSelected ? iconColorSelected : iconColor,
+      backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
     }
     const getButtonDropdownTokens = useThemeTokensCallback(
       'ButtonDropdown',
@@ -236,7 +242,7 @@ const MultiSelectFilter = React.forwardRef(
     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
 

package/src/Notification/Notification.jsx

@@ -18,7 +18,8 @@ import {
   viewProps,
   wrapStringsInText,
   createMediaQueryStyles,
-  StyleSheet
+  StyleSheet,
+  useResponsiveProp
 } from '../utils'
 import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
@@ -64,8 +65,8 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   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
@@ -82,7 +83,7 @@ const getMediaQueryStyles = (
 ) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
-      acc[vp] = selectContainerStyles({ ...viewportTokens })
+      acc[vp] = { ...selectContainerStyles({ ...viewportTokens }), flexDirection: 'column' }
       return acc
     },
     {}
@@ -92,18 +93,31 @@ const getMediaQueryStyles = (
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   })
 
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce(
+    (acc, [vp, viewportTokens]) => {
+      acc[vp] = {
+        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+        flexDirection: 'row',
+        flexShrink: 1,
+        justifyContent: 'space-between',
+        ...(system && { alignSelf: 'center' })
+      }
+      return acc
+    },
+    {}
+  )
+
+  const selectContentContainerMediaQueryStyles = createMediaQueryStyles(
+    transformedSelectContentContainerStyles
+  )
+
   const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
     contentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
-      ...(system && { alignSelf: 'center' })
+      ...selectContentContainerMediaQueryStyles
     }
   })
 
@@ -167,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' })
     }
   },
@@ -252,7 +266,10 @@ const Notification = React.forwardRef(
       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: {},

package/src/utils/getSpacingScale.js

@@ -0,0 +1,50 @@
+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/src/utils/index.js

@@ -23,3 +23,4 @@ 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 getSpacingScale } from './getSpacingScale'

package/src/utils/useResponsiveProp.js

@@ -25,7 +25,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
     : // 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
 }
 
 /**