@telus-uds/components-base 1.72.0 → 1.73.0

package/package.json

@@ -11,9 +11,10 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.48.0",
+    "@telus-uds/system-theme-tokens": "^2.49.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
+    "expo-linear-gradient": "^12.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -38,6 +39,16 @@
     "lib": "lib",
     "test": "__tests__"
   },
+  "exports": {
+    ".": {
+      "import": "./lib-module/index.js",
+      "require": "./lib/index.js"
+    },
+    "./server": {
+      "import": "./lib-module/server.js",
+      "require": "./lib/server.js"
+    }
+  },
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "base"
@@ -74,5 +85,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.72.0"
+  "version": "1.73.0"
 }

package/src/Box/Box.jsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView } from 'react-native'
+import { View, ScrollView, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
@@ -23,17 +23,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = ({
-  backgroundColor,
-  gradient,
-  borderWidth,
-  borderColor,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  ...rest
-}) => {
+const selectBoxStyles = (
+  {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  },
+  customGradient
+) => {
   const styles = {
     backgroundColor,
     borderWidth,
@@ -48,7 +51,12 @@ const selectBoxStyles = ({
       angle,
       stops: [stopOne, stopTwo]
     } = gradient
-    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`
+    } else if (customGradient && Platform.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color]
+    }
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
@@ -145,6 +153,7 @@ const Box = forwardRef(
       accessibilityRole,
       testID,
       dataSet,
+      customGradient,
       ...rest
     },
     ref
@@ -162,21 +171,26 @@ const Box = forwardRef(
       paddingRight: useSpacingScale(right),
       paddingTop: useSpacingScale(top),
       paddingBottom: useSpacingScale(bottom),
-      ...selectBoxStyles(themeTokens)
+      ...selectBoxStyles(themeTokens, customGradient)
     }
 
+    const childrenToRender =
+      typeof customGradient === 'function'
+        ? customGradient(styles.colors, styles)(children)
+        : children
+
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
       scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {children}
+          {childrenToRender}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {children}
+        {childrenToRender}
       </View>
     )
   }
@@ -266,7 +280,11 @@ Box.propTypes = {
   /**
    * Box accepts any content as children.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func
 }
 
 export default Box

package/src/FlexGrid/Col/Col.jsx

@@ -5,6 +5,8 @@ import { Platform } from 'react-native'
 import GutterContext from '../providers/GutterContext'
 import applyInheritance from '../helpers'
 import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
+import { useViewport } from '../../ViewportProvider'
+import { useTheme } from '../../ThemeProvider'
 
 const Col = forwardRef(
   (
@@ -27,6 +29,10 @@ const Col = forwardRef(
     ref
   ) => {
     const gutter = useContext(GutterContext)
+    const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
     const hiddenLevels = applyInheritance([xs, sm, md, lg, xl])
 
     const getHorizontalAlignLevel = () => {
@@ -104,7 +110,16 @@ const Col = forwardRef(
       xl: offsetsWithIheritance[4]
     }
 
-    const mediaQueryStyles = createMediaQueryStyles({
+    const staticStyles = {
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      maxWidth: '100%',
+      paddingLeft: gutter ? 16 : 0,
+      paddingRight: gutter ? 16 : 0
+    }
+
+    const stylesByViewport = {
       xs: {
         display: hiddenLevels[0] === 0 ? 'none' : shown,
         textAlign: horizontalAlignLevel[0],
@@ -135,21 +150,35 @@ const Col = forwardRef(
         ...calculateWidth(sizes.xl),
         ...calculateOffset(offsets.xl)
       }
-    })
+    }
 
-    const { ids, styles } = StyleSheet.create({
-      col: {
-        flexGrow: 1,
-        flexShrink: 0,
-        flexBasis: 'auto',
-        maxWidth: '100%',
-        paddingLeft: gutter ? 16 : 0,
-        paddingRight: gutter ? 16 : 0,
-        ...mediaQueryStyles
+    let colStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        col: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      colStyles = styles.col
+      mediaIds = ids.col
+    } else {
+      colStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
+
     return (
-      <BaseView ref={ref} {...viewProps} style={[styles.col]} dataSet={{ media: ids.col }}>
+      <BaseView
+        ref={ref}
+        {...viewProps}
+        style={colStyles}
+        dataSet={mediaIds && { media: mediaIds }}
+      >
         {children}
       </BaseView>
     )

package/src/FlexGrid/FlexGrid.jsx

@@ -16,6 +16,8 @@ import Row from './Row'
 import Col from './Col'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
+import { useTheme } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -42,7 +44,15 @@ const FlexGrid = forwardRef(
     ref
   ) => {
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-    const mediaQueryStyles = createMediaQueryStyles({
+    const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    let flexgridStyles
+    let mediaIds
+
+    const stylesByViewport = {
       xs: {
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
@@ -62,17 +72,31 @@ const FlexGrid = forwardRef(
         maxWidth: limitWidth && viewports.map.get('xl'),
         flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
       }
-    })
+    }
 
-    const { ids, styles } = StyleSheet.create({
-      flexgrid: {
-        flexWrap: 'wrap',
-        width: outsideGutter ? '100%' : 'auto',
-        marginVertical: 0,
-        marginHorizontal: outsideGutter ? 'auto' : -16,
-        ...mediaQueryStyles
+    const staticStyles = {
+      flexWrap: 'wrap',
+      width: outsideGutter ? '100%' : 'auto',
+      marginVertical: 0,
+      marginHorizontal: outsideGutter ? 'auto' : -16
+    }
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        flexgrid: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      flexgridStyles = styles.flexgrid
+      mediaIds = ids.flexgrid
+    } else {
+      flexgridStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
 
     const props = {
       accessibilityRole,
@@ -82,7 +106,12 @@ const FlexGrid = forwardRef(
 
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView ref={ref} {...props} style={[styles.flexgrid]} dataSet={{ media: ids.flexgrid }}>
+        <BaseView
+          ref={ref}
+          {...props}
+          style={flexgridStyles}
+          dataSet={mediaIds && { media: mediaIds }}
+        >
           {children}
         </BaseView>
       </GutterContext.Provider>

package/src/FlexGrid/Row/Row.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 
 import applyInheritance from '../helpers'
 import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
+import { useTheme } from '../../ThemeProvider'
+import { useViewport } from '../../ViewportProvider'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -66,8 +68,23 @@ const Row = forwardRef(
     },
     ref
   ) => {
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+    const viewport = useViewport()
+    const staticStyles = {
+      width: '100%',
+      marginVertical: 0,
+      marginHorizontal: 'auto',
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      ...horizontalAlignStyles(horizontalAlign),
+      ...verticalAlignStyles(verticalAlign),
+      ...distributeStyles(distribute)
+    }
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-    const mediaQueryStyles = createMediaQueryStyles({
+    const stylesByViewport = {
       xs: {
         flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
         flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
@@ -88,23 +105,30 @@ const Row = forwardRef(
         flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
         flexWrap: reverseLevel[4] ? 'wrap-reverse' : 'wrap'
       }
-    })
-    const { ids, styles } = StyleSheet.create({
-      row: {
-        width: '100%',
-        marginVertical: 0,
-        marginHorizontal: 'auto',
-        flexGrow: 0,
-        flexShrink: 1,
-        flexBasis: 'auto',
-        ...horizontalAlignStyles(horizontalAlign),
-        ...verticalAlignStyles(verticalAlign),
-        ...distributeStyles(distribute),
-        ...mediaQueryStyles
+    }
+
+    let rowStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        row: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      rowStyles = styles.row
+      mediaIds = ids.row
+    } else {
+      rowStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
+
     return (
-      <BaseView ref={ref} {...rest} style={[styles.row]} dataSet={{ media: ids.row }}>
+      <BaseView ref={ref} {...rest} style={rowStyles} dataSet={mediaIds && { media: mediaIds }}>
         {children}
       </BaseView>
     )

package/src/Listbox/ListboxGroup.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import { withLinkRouter } from '../utils'
 import ExpandCollapse from '../ExpandCollapse'
 import ListboxItem from './ListboxItem'
@@ -20,6 +20,13 @@ const styles = StyleSheet.create({
   }
 })
 
+const getAccessibilityRole = () =>
+  Platform.select({
+    ios: 'listitem',
+    android: 'none',
+    web: 'listitem'
+  })
+
 const ListboxGroup = forwardRef(
   (
     {
@@ -39,7 +46,7 @@ const ListboxGroup = forwardRef(
 
     // TODO: implement keyboard navigation via refs for grouped items separately here
     return (
-      <View id="test" style={styles.groupWrapper} accessibilityRole="listitem">
+      <View id="test" style={styles.groupWrapper} accessibilityRole={getAccessibilityRole()}>
         <ExpandCollapse.Panel
           panelId={id ?? label}
           controlTokens={{

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -89,6 +89,8 @@ const MultiSelectFilter = ({
     return colSize === 2 && setMaxWidth(true)
   }, [colSize])
 
+  useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
+
   const {
     headerFontColor,
     headerFontSize,

package/src/Notification/Notification.jsx

@@ -22,8 +22,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
-const selectTextStyles = (tokens, themeOptions) =>
-  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
+const selectTextStyles = (tokens, themeOptions, isDismissible) => {
+  const textTokens = selectTokens('Typography', tokens)
+  const styles = {
+    ...textTokens,
+    themeOptions,
+    overflow: 'hidden'
+  }
+
+  if (!isDismissible) {
+    styles.flexShrink = 1
+  }
+
+  return applyTextStyles(styles)
+}
 
 const selectIconProps = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -113,7 +125,7 @@ const Notification = forwardRef(
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens, themeOptions)
+    const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible)
 
     const content = wrapStringsInText(
       typeof children === 'function' ? children({ textStyles, variant }) : children,

package/src/OrderedList/ItemBase.jsx

@@ -1,10 +1,22 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
+
+const getAccessibilityRole = () =>
+  Platform.select({
+    ios: 'listitem',
+    android: 'none',
+    web: 'listitem'
+  })
 
 const Item = forwardRef(({ children, style, ...rest }, ref) => (
-  <View accessibilityRole="listitem" ref={ref} style={[staticStyles.container, style]} {...rest}>
+  <View
+    accessibilityRole={getAccessibilityRole()}
+    ref={ref}
+    style={[staticStyles.container, style]}
+    {...rest}
+  >
     {children}
   </View>
 ))

package/src/Responsive/Responsive.jsx

@@ -1,29 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { viewports } from '@telus-uds/system-constants'
-import { useResponsiveProp } from '../utils'
+import { useTheme } from '../ThemeProvider'
+import ResponsiveProp from './ResponsiveProp'
+import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet'
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
  * min and max viewports.
  *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * If enableMediaQueryStyleSheet themeOption is set to false in ThemeProvider, then in SSR,
+ * like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
  * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
  * after hydration. This may cause a layout shift on devices other than the narrowest.
+ *
+ * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
+ * is used to hide and show children of `Responsive` within a View.
  */
 
 const Responsive = ({ min = 'xs', max, children }) => {
-  // Start returning children at the 'min' viewport or greater
-  const byViewports = { [min]: children }
-  if (max && max !== 'xl') {
-    // Stop returning children at the viewport one above 'max' or greater
-    const maxIndex = viewports.keys.indexOf(max)
-    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
-    if (maxPlusOne) byViewports[maxPlusOne] = null
+  const {
+    themeOptions: { enableMediaQueryStyleSheet }
+  } = useTheme()
+  if (enableMediaQueryStyleSheet) {
+    return (
+      <ResponsiveWithMediaQueryStyleSheet min={min} max={max}>
+        {children}
+      </ResponsiveWithMediaQueryStyleSheet>
+    )
   }
-  return <>{useResponsiveProp(byViewports, null)}</>
+  return (
+    <ResponsiveProp min={min} max={max}>
+      {children}
+    </ResponsiveProp>
+  )
 }
 
+Responsive.displayName = 'Responsive'
+
 Responsive.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is smaller than `min`

package/src/Responsive/ResponsiveProp.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+const ResponsiveProp = ({ min = 'xs', max, children }) => {
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  const responsiveProp = useResponsiveProp(byViewports, null)
+  return <>{responsiveProp}</>
+}
+
+ResponsiveProp.displayName = 'Responsive'
+
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveProp

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils'
+
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = viewports.keys
+  const minIndex = viewportsArray.indexOf(min)
+  const maxIndex = viewportsArray.indexOf(max)
+  let hiddenViewports = []
+
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex)
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1))
+  }
+
+  const styles = {}
+
+  viewportsArray.forEach((viewport) => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = { display: 'none' }
+    }
+  })
+  return createMediaQueryStyles(styles, false)
+}
+const ResponsiveWithMediaQueryStyleSheet = ({ min, max, children }) => {
+  const { ids, styles } = StyleSheet.create({
+    responsive: {
+      flexDirection: 'inherit',
+      alignItems: 'inherit',
+      justifyContent: 'inherit',
+      ...generateResponsiveStyles(min, max)
+    }
+  })
+  return (
+    <BaseView style={styles.responsive} dataSet={ids.responsive && { media: ids.responsive }}>
+      {children}
+    </BaseView>
+  )
+}
+
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive'
+
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveWithMediaQueryStyleSheet

package/src/ThemeProvider/ThemeProvider.jsx

@@ -16,7 +16,8 @@ const defaultThemeOptions = {
   // TODO: switch `forceZIndex` to be false by default in the next major version
   forceZIndex: true,
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 }
 
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
@@ -65,12 +66,14 @@ ThemeProvider.propTypes = {
    * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
    *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
     enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 }
 

package/src/ThemeProvider/index.js

@@ -2,6 +2,7 @@ import ThemeProvider from './ThemeProvider'
 
 export { default as useTheme } from './useTheme'
 export { default as useSetTheme } from './useSetTheme'
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens'
 export * from './useThemeTokens'
 
 export * from './utils'