@telus-uds/components-base 1.71.0 → 1.73.0

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/Modal/ModalContent.jsx

@@ -25,14 +25,15 @@ const ModalContent = ({
   children,
   onCancel
 }) => {
+  const viewport = useViewport()
   const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
     'Modal',
     tokens,
-    variant
+    variant,
+    { viewport }
   )
   const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
   const [scrollContentHeight, setScrollContentHeight] = useState(0)
-  const viewport = useViewport()
 
   const handleContainerLayout = ({
     nativeEvent: {
@@ -128,7 +129,7 @@ const ModalContent = ({
             </Button>
           )}
           {hasCancelButton ? (
-            <View style={styles.styledTextButtonContainer}>
+            <View>
               <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
                 {cancelButtonText}
               </CancelButton>
@@ -145,9 +146,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
-  },
-  styledTextButtonContainer: {
-    flex: 1
   }
 })
 

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/Item.jsx

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+import {
+  getTokensPropType,
+  htmlAttrs,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText
+} from '../utils'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import ItemBase from './ItemBase'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectItemTextStyles = (
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  })
+
+const selectItemCounterStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerAlign,
+  itemFontWeight,
+  itemFontSize,
+  itemFontName,
+  itemLineHeight,
+  themeOptions,
+  listGutter,
+  itemColor
+}) => ({
+  color: itemColor,
+  width: itemBulletContainerWidth,
+  paddingRight: listGutter,
+  textAlign: itemBulletContainerAlign,
+  ...applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    themeOptions
+  }),
+  lineHeight: itemLineHeight * itemFontSize
+})
+
+const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChild) => ({
+  ...themeTokens,
+  marginBottom: !isLastChild ? interItemMargin : 0
+})
+
+const Item = forwardRef(
+  ({ children, index, isLastChild, title, tokens, variant, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('OrderedList', tokens, variant)
+    const headingTokens = title && {
+      lineHeight: themeTokens.itemLineHeight,
+      fontSize: themeTokens.itemFontSize,
+      color: themeTokens.itemColor,
+      fontName: themeTokens.headerFontName,
+      fontWeight: themeTokens.headerFontWeight
+    }
+
+    const { themeOptions } = useTheme()
+    const itemContent = wrapStringsInText(children, {
+      style: selectItemTextStyles(themeTokens, themeOptions)
+    })
+    const itemCounter = wrapStringsInText(`${index}.`, {
+      style: selectItemTextStyles(themeTokens, themeOptions)
+    })
+
+    return (
+      <ItemBase
+        ref={ref}
+        style={{ ...staticStyles.container, ...themeTokens }}
+        {...selectProps(rest)}
+      >
+        <View style={[staticStyles.itemCounter, selectItemCounterStyles(themeTokens)]}>
+          {itemCounter}
+        </View>
+        <View style={staticStyles.itemContent}>
+          {title ? (
+            <StackView tokens={{ flexShrink: 1 }} space={0}>
+              <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+                {title}
+              </Typography>
+              <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+            </StackView>
+          ) : (
+            <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+          )}
+        </View>
+      </ItemBase>
+    )
+  }
+)
+
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item index
+   */
+  index: PropTypes.number,
+  /**
+   * If true, the item is the last one on the list
+   */
+  isLastChild: PropTypes.bool,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: PropTypes.string,
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List'),
+  /**
+   * Item variant
+   */
+  variant: variantProp.propType
+}
+
+Item.displayName = 'OrderedListItem'
+
+Item.defaultProps = { title: undefined, tokens: {} }
+
+export default Item
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  itemCounter: {
+    flexWrap: 'wrap'
+  },
+  itemContent: {
+    flexDirection: 'column',
+    marginLeft: 8
+  }
+})

package/src/OrderedList/ItemBase.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+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={getAccessibilityRole()}
+    ref={ref}
+    style={[staticStyles.container, style]}
+    {...rest}
+  >
+    {children}
+  </View>
+))
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item custom styles
+   */
+  style: PropTypes.object
+}
+
+Item.displayName = 'OrderedListItem'
+
+export default Item
+
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+})

package/src/OrderedList/OrderedList.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import OrderedListBase from './OrderedListBase'
+import Item from './Item'
+
+const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const getChildrenWithParentVariants = (variant, children, start) => {
+  if (variant)
+    return children.map((child, i) => {
+      const existingChildVariants = child.props?.variant ?? {}
+      return {
+        ...child,
+        props: {
+          ...child.props,
+          index: start + i,
+          isLastChild: i === children.length - 1,
+          variant: { ...existingChildVariants, ...variant }
+        }
+      }
+    })
+
+  return children
+}
+
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  const childrenWithParentVariants = useMemo(
+    () => getChildrenWithParentVariants(variant, children, start),
+    [children, variant, start]
+  )
+
+  return (
+    <OrderedListBase ref={ref} {...selectProps(rest)}>
+      {childrenWithParentVariants}
+    </OrderedListBase>
+  )
+})
+
+OrderedList.propTypes = {
+  ...selectedSystemPropsTypes,
+  tokens: getTokensPropType('OrderedList'),
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType
+}
+
+OrderedList.defaultProps = { start: 1, tokens: {}, variant: {} }
+
+OrderedList.displayName = 'OrderedList'
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -0,0 +1,33 @@
+/* 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 ItemBase from './ItemBase'
+
+const OrderedListBase = forwardRef(({ children, ...rest }, ref) => (
+  <View accessibilityRole="list" ref={ref} style={staticStyles.container} {...rest}>
+    {children}
+  </View>
+))
+
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired
+}
+
+OrderedListBase.displayName = 'OrderedList'
+
+OrderedListBase.Item = ItemBase
+
+export default OrderedListBase
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0
+  }
+})

package/src/OrderedList/index.js

@@ -0,0 +1,3 @@
+import OrderedList from './OrderedList'
+
+export default OrderedList