@telus-uds/components-base 3.21.0 → 3.23.0

package/src/Listbox/GroupControl.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import Icon from '../Icon'
 import Spacer from '../Spacer'
 import { useListboxContext } from './ListboxContext'
 
 const styles = StyleSheet.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -17,6 +17,36 @@ const styles = StyleSheet.create({
   }
 })
 
+const selectTextStyles = (tokens) => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+})
+
+const selectContainerStyles = (tokens) => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+})
+
 const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label, id }, ref) => {
   const { selectedId, setSelectedId } = useListboxContext()
   const tokens = useThemeTokens(
@@ -31,58 +61,22 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
       focus
     }
   )
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens
-
-  const getTextStyles = () => ({
-    color: groupColor
-  })
 
   return (
     <View
       onPress={() => setSelectedId(id)}
-      style={[
-        styles.controlWrapper,
-        {
-          fontFamily: `${groupFontName}${groupFontWeight}normal`,
-          fontSize: groupFontSize,
-          color: groupColor,
-          textDecoration: itemTextDecoration,
-          backgroundColor: groupBackgroundColor,
-          outline: itemOutline,
-          height: groupHeight,
-          border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-          borderRadius: groupBorderRadius,
-          paddingLeft: groupPaddingLeft - groupBorderWidth,
-          paddingRight: groupPaddingRight - groupBorderWidth,
-          paddingTop: groupPaddingTop - groupBorderWidth,
-          paddingBottom: groupPaddingBottom - groupBorderWidth
-        }
-      ]}
+      style={[styles.container, selectContainerStyles(tokens)]}
       ref={ref}
     >
-      <Text style={getTextStyles()}>{label}</Text>
+      <Text style={selectTextStyles(tokens)}>{label}</Text>
       <Spacer space={1} direction="row" />
-      <Icon
-        icon={tokens.groupIcon}
-        tokens={{ color: tokens.groupColor }}
-        variant={{ size: 'micro' }}
-      />
+      {tokens.groupIcon && (
+        <Icon
+          icon={tokens.groupIcon}
+          tokens={{ color: tokens.groupColor }}
+          variant={{ size: 'micro' }}
+        />
+      )}
     </View>
   )
 })

package/src/Listbox/Listbox.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, Platform, StyleSheet } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
-import { withLinkRouter, getTokensPropType } from '../utils'
+import { withLinkRouter, getTokensPropType, variantProp } from '../utils'
 import ExpandCollapse from '../ExpandCollapse'
 import ListboxGroup from './ListboxGroup'
 import ListboxItem from './ListboxItem'
@@ -10,12 +10,18 @@ import { ListboxContext } from './ListboxContext'
 import DropdownOverlay from './ListboxOverlay'
 
 const styles = StyleSheet.create({
-  list: {
+  container: {
     padding: 0,
     margin: 0
   }
 })
 
+const selectContainerStyles = (tokens) => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+})
+
 const getInitialOpen = (items, selectedId) =>
   items
     .filter(
@@ -36,15 +42,14 @@ const Listbox = React.forwardRef(
       itemRouterProps,
       onClose,
       variant,
-      tokens
+      tokens,
+      testID
     },
     ref
   ) => {
     const initialOpen = getInitialOpen(items, defaultSelectedId)
-
     const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
-
-    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const listboxTokens = useThemeTokens('Listbox', tokens, variant)
 
     // We need to keep track of each item's ref in order to be able to
     // focus on a specific item via keyboard navigation
@@ -101,7 +106,11 @@ const Listbox = React.forwardRef(
       <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
         <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
           {(expandProps) => (
-            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+            <View
+              style={[styles.container, selectContainerStyles(listboxTokens)]}
+              accessibilityRole="combobox"
+              testID={testID}
+            >
               {items.map((item, index) => {
                 const { id, label, items: nestedItems } = item
                 const itemId = id ?? label
@@ -169,7 +178,15 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Test ID for testing
+   */
+  testID: PropTypes.string,
+  /**
+   * Listbox variant
+   */
+  variant: variantProp.propType
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/Listbox/ListboxGroup.jsx

@@ -74,7 +74,8 @@ const ListboxGroup = React.forwardRef(
             borderColor: 'transparent',
             borderRadius: 0,
             borderWidth: 0,
-            marginBottom: 0
+            marginBottom: 0,
+            contentPanelBackgroundColor: 'transparent'
           }}
           controlRef={ref}
         >

package/src/Listbox/ListboxOverlay.jsx

@@ -22,13 +22,17 @@ const paddingVertical = 0
 const paddingHorizontal = 0
 
 const DropdownOverlay = React.forwardRef(
-  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens }, ref) => {
+  (
+    { children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens, testID },
+    ref
+  ) => {
     const systemTokens = useThemeTokens('Listbox', {}, {})
 
     return (
       <View
         ref={ref}
         onLayout={onLayout}
+        testID={testID}
         style={[
           overlaidPosition,
           { maxWidth, minWidth },
@@ -75,7 +79,8 @@ DropdownOverlay.propTypes = {
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
-  tokens: PropTypes.object
+  tokens: PropTypes.object,
+  testID: PropTypes.string
 }
 
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -39,10 +39,14 @@ const getItemStyles = ({
   color: itemColor,
   outline: itemOutline,
   textDecoration: itemTextDecoration,
-  borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-  borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-  borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-  borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+  borderLeftWidth: itemBorderLeftWidth,
+  borderLeftColor: itemBorderLeftColor,
+  borderRightWidth: itemBorderRightWidth,
+  borderRightColor: itemBorderRightColor,
+  borderTopWidth: itemBorderTopWidth,
+  borderTopColor: itemBorderTopColor,
+  borderBottomWidth: itemBorderBottomWidth,
+  borderBottomColor: itemBorderBottomColor,
   borderRadius: itemBorderRadius,
   justifyContent: 'center'
 })

package/src/PriceLockup/utils/renderPrice.jsx

@@ -102,28 +102,26 @@ const renderPrice = (
               )}
             </Text>
           ) : null}
-          {
-            <Text>
-              {renderAmount(
-                amount,
-                amountTypographyTokens,
+          <Text>
+            {renderAmount(
+              amount,
+              amountTypographyTokens,
+              strikeThrough,
+              a11yText,
+              fontColor,
+              themeTokens
+            )}
+            {isPriceBaseline &&
+              cents &&
+              renderAmount(
+                `${separator}${cents}`,
+                centsTypographyTokens,
                 strikeThrough,
                 a11yText,
                 fontColor,
                 themeTokens
               )}
-              {isPriceBaseline &&
-                cents &&
-                renderAmount(
-                  `${separator}${cents}`,
-                  centsTypographyTokens,
-                  strikeThrough,
-                  a11yText,
-                  fontColor,
-                  themeTokens
-                )}
-            </Text>
-          }
+          </Text>
           {cents && !isPriceBaseline
             ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
             : null}

package/src/TextInput/TextInputBase.jsx

@@ -263,6 +263,10 @@ const TextInputBase = React.forwardRef(
         // Add a space every 4 digits starting from the 5th position
         filteredText = formattedValue.replace(regex, '$1 ').trim()
       }
+      // Apply maxLength if provided
+      if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+        filteredText = filteredText.substring(0, rest.maxLength)
+      }
       setValue(filteredText, event)
       if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
@@ -340,7 +344,7 @@ const TextInputBase = React.forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
-      maxLength: type === 'card' ? 19 : undefined,
+      maxLength: type === 'card' ? 19 : rest.maxLength,
       value: isControlled ? currentValue : undefined,
       onKeyPress
     }

package/src/ThemeProvider/index.js

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

package/src/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,129 @@
+import { useCallback } from 'react'
+import { viewports } from '@telus-uds/system-constants'
+import useTheme from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+
+const getResponsiveThemeTokens = (
+  { rules = [], tokens: defaultThemeTokens = {} },
+  tokensProp,
+  variants = {},
+  states
+) => {
+  const appearances = mergeAppearances(variants, states)
+
+  const tokensByViewport = Object.fromEntries(
+    viewports.keys.map((viewport) => [viewport, { ...defaultThemeTokens }])
+  )
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach((rule) => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports]
+      }
+      targetViewports.forEach((viewport) => {
+        tokensByViewport[viewport] = { ...tokensByViewport[viewport], ...rule.tokens }
+      })
+    }
+  })
+
+  Object.keys(tokensByViewport).forEach((viewport) => {
+    tokensByViewport[viewport] = resolveThemeTokens(
+      tokensByViewport[viewport],
+      appearances,
+      tokensProp
+    )
+  })
+
+  return tokensByViewport
+}
+
+const doesRuleApply = (rule, appearances) =>
+  Object.entries(rule.if).every((condition) => doesConditionApply(condition, appearances))
+
+const doesConditionApply = ([key, value], appearances) => {
+  if (key === 'viewport') {
+    return true
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue
+}
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const getResponsiveThemeTokensCallback = useCallback(
+    (states, tokenOverrides) => {
+      const resolvedTokens = resolveThemeTokens(
+        tokens,
+        mergeAppearances(variants, states),
+        tokenOverrides
+      )
+      return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states)
+    },
+    [componentTheme, tokens, variants]
+  )
+  return getResponsiveThemeTokensCallback
+}
+
+export default useResponsiveThemeTokensCallback