@telus-uds/components-base 3.22.0 → 3.24.0

package/src/Listbox/GroupControl.jsx

@@ -1,13 +1,14 @@
 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'
+import { variantProp } from '../utils'
 
 const styles = StyleSheet.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -17,76 +18,76 @@ const styles = StyleSheet.create({
   }
 })
 
-const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label, id }, ref) => {
-  const { selectedId, setSelectedId } = useListboxContext()
-  const tokens = useThemeTokens(
-    'Listbox',
-    {},
-    {},
-    {
-      expanded,
-      pressed,
-      hover,
-      current: selectedId === id && id !== undefined,
-      focus
-    }
-  )
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens
-
-  const getTextStyles = () => ({
-    color: groupColor
-  })
+const selectTextStyles = (tokens) => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+})
 
-  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
-        }
-      ]}
-      ref={ref}
-    >
-      <Text style={getTextStyles()}>{label}</Text>
-      <Spacer space={1} direction="row" />
-      <Icon
-        icon={tokens.groupIcon}
-        tokens={{ color: tokens.groupColor }}
-        variant={{ size: 'micro' }}
-      />
-    </View>
-  )
+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, variant = {} }, ref) => {
+    const { selectedId, setSelectedId } = useListboxContext()
+    const isSecondLevel = variant?.secondLevel === true
+    const tokens = useThemeTokens(
+      'Listbox',
+      variant,
+      {},
+      {
+        expanded,
+        pressed,
+        hover,
+        current: selectedId === id && id !== undefined,
+        focus,
+        secondLevel: isSecondLevel
+      }
+    )
+
+    const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon
+
+    return (
+      <View
+        onPress={() => setSelectedId(id)}
+        style={[styles.container, selectContainerStyles(tokens)]}
+        ref={ref}
+      >
+        <Text style={selectTextStyles(tokens)}>{label}</Text>
+        <Spacer space={1} direction="row" />
+        {displayIcon && (
+          <Icon
+            icon={displayIcon}
+            tokens={{ color: tokens.groupColor }}
+            variant={{ size: 'micro' }}
+          />
+        )}
+      </View>
+    )
+  }
+)
+
 GroupControl.displayName = 'GroupControl'
 
 GroupControl.propTypes = {
@@ -95,7 +96,8 @@ GroupControl.propTypes = {
   pressed: PropTypes.bool,
   hover: PropTypes.bool,
   focus: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  variant: variantProp.propType
 }
 
 export default GroupControl

package/src/Listbox/Listbox.jsx

@@ -1,21 +1,30 @@
 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'
 import { ListboxContext } from './ListboxContext'
 import DropdownOverlay from './ListboxOverlay'
+import defaultDictionary from './dictionary'
 
 const styles = StyleSheet.create({
-  list: {
+  container: {
     padding: 0,
-    margin: 0
+    margin: 0,
+    position: 'relative',
+    overflow: 'visible'
   }
 })
 
+const selectContainerStyles = (tokens) => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+})
+
 const getInitialOpen = (items, selectedId) =>
   items
     .filter(
@@ -35,16 +44,18 @@ const Listbox = React.forwardRef(
       LinkRouter,
       itemRouterProps,
       onClose,
+      copy = 'en',
+      dictionary = defaultDictionary,
       variant,
-      tokens
+      tokens,
+      testID
     },
     ref
   ) => {
     const initialOpen = getInitialOpen(items, defaultSelectedId)
-
     const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
-
-    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const [activeSecondLevelGroup, setActiveSecondLevelGroup] = React.useState(null)
+    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
@@ -97,11 +108,22 @@ const Listbox = React.forwardRef(
       return () => {}
     }, [onClose, handleKeydown])
 
+    const contextValue = {
+      selectedId,
+      setSelectedId,
+      activeSecondLevelGroup,
+      setActiveSecondLevelGroup
+    }
+
     return (
-      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+      <ListboxContext.Provider value={contextValue}>
         <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
@@ -112,6 +134,10 @@ const Listbox = React.forwardRef(
                   return currentItemRef
                 }
 
+                if (!nestedItems && activeSecondLevelGroup) {
+                  return null
+                }
+
                 return nestedItems ? (
                   <ListboxGroup
                     {...item}
@@ -122,6 +148,11 @@ const Listbox = React.forwardRef(
                     nextItemRef={itemRefs.current[index + 1] ?? null}
                     ref={index === 0 ? firstItemRef : itemRef}
                     key={itemId}
+                    copy={copy}
+                    dictionary={dictionary}
+                    variant={variant}
+                    tokens={tokens}
+                    onClose={onClose}
                   />
                 ) : (
                   <ListboxItem
@@ -133,6 +164,8 @@ const Listbox = React.forwardRef(
                     prevItemRef={itemRefs.current[index - 1] ?? null}
                     nextItemRef={itemRefs.current[index + 1] ?? null}
                     ref={index === 0 ? firstItemRef : itemRef}
+                    variant={variant}
+                    tokens={tokens}
                   />
                 )
               })}
@@ -169,7 +202,30 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Test ID for testing
+   */
+  testID: PropTypes.string,
+  /**
+   * Select English or French copy
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    })
+  }),
+  /**
+   * Listbox variant
+   */
+  variant: variantProp.propType
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/Listbox/ListboxGroup.jsx

@@ -2,21 +2,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { withLinkRouter } from '../utils'
+import { withLinkRouter, variantProp, copyPropTypes } from '../utils'
+import { useThemeTokens } from '../ThemeProvider'
 import ExpandCollapse from '../ExpandCollapse'
 import ListboxItem from './ListboxItem'
 import { useListboxContext } from './ListboxContext'
 import GroupControl from './GroupControl'
+import SecondLevelHeader from './SecondLevelHeader'
+import defaultDictionary from './dictionary'
 
 const styles = StyleSheet.create({
   groupWrapper: {
     margin: 0,
     padding: 0,
-    overflow: 'hidden'
+    overflow: 'visible'
   },
   list: {
     margin: 0,
     padding: 0
+  },
+  secondLevelContainer: {
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  secondLevelList: {
+    margin: 0,
+    padding: 0,
+    width: '100%'
   }
 })
 
@@ -27,6 +42,10 @@ const getAccessibilityRole = () =>
     web: 'listitem'
   })
 
+const selectSecondLevelContainerStyles = ({ secondLevelHeaderBackgroundColor }) => ({
+  backgroundColor: secondLevelHeaderBackgroundColor
+})
+
 const ListboxGroup = React.forwardRef(
   (
     {
@@ -38,11 +57,86 @@ const ListboxGroup = React.forwardRef(
       expandProps,
       onLastItemBlur,
       nextItemRef,
-      prevItemRef
+      prevItemRef,
+      copy = 'en',
+      dictionary = defaultDictionary,
+      variant = {},
+      tokens = {},
+      onClose
     },
     ref
   ) => {
-    const { selectedId } = useListboxContext()
+    const { selectedId, activeSecondLevelGroup, setActiveSecondLevelGroup } = useListboxContext()
+    const [secondLevelOpen, setSecondLevelOpen] = React.useState(false)
+    const isSecondLevel = variant?.secondLevel === true
+    const listboxTokens = useThemeTokens('Listbox', variant, tokens)
+    const groupId = id ?? label
+
+    const handleGroupClick = React.useCallback(() => {
+      if (isSecondLevel) {
+        setSecondLevelOpen(true)
+        setActiveSecondLevelGroup(groupId)
+      }
+    }, [isSecondLevel, groupId, setActiveSecondLevelGroup])
+
+    const handleBackClick = React.useCallback(() => {
+      setSecondLevelOpen(false)
+      setActiveSecondLevelGroup(null)
+    }, [setActiveSecondLevelGroup])
+
+    const handleCloseClick = React.useCallback(() => {
+      setSecondLevelOpen(false)
+      setActiveSecondLevelGroup(null)
+      if (onClose) {
+        onClose()
+      }
+    }, [setActiveSecondLevelGroup, onClose])
+
+    if (isSecondLevel && activeSecondLevelGroup && activeSecondLevelGroup !== groupId) {
+      return null
+    }
+
+    if (isSecondLevel && secondLevelOpen) {
+      return (
+        <View
+          style={[styles.secondLevelContainer, selectSecondLevelContainerStyles(listboxTokens)]}
+        >
+          <SecondLevelHeader
+            label={label}
+            onBack={handleBackClick}
+            onClose={handleCloseClick}
+            copy={copy}
+            dictionary={dictionary}
+            variant={variant}
+            tokens={tokens}
+          />
+          <View style={styles.secondLevelList}>
+            {items &&
+              items.map((item, index) => {
+                return (
+                  <ListboxItem
+                    key={item.label}
+                    id={item.id ?? item.label}
+                    {...item}
+                    selected={
+                      (item.id && item.id === selectedId) ||
+                      (item.label && item.label === selectedId)
+                    }
+                    isChild={false}
+                    LinkRouter={LinkRouter}
+                    linkRouterProps={linkRouterProps}
+                    variant={variant}
+                    tokens={tokens}
+                    {...(index === 0 && { prevItemRef })}
+                    {...(index === items.length - 1 && { nextItemRef })}
+                    {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
+                  />
+                )
+              })}
+          </View>
+        </View>
+      )
+    }
 
     // TODO: implement keyboard navigation via refs for grouped items separately here
     return (
@@ -63,9 +157,11 @@ const ListboxGroup = React.forwardRef(
           // TODO refactor
           // eslint-disable-next-line react/no-unstable-nested-components
           control={(controlProps) => (
-            <GroupControl id={id ?? label} {...controlProps} label={label} />
+            <GroupControl id={id ?? label} {...controlProps} label={label} variant={variant} />
           )}
           {...expandProps}
+          {...(isSecondLevel && { open: false })}
+          {...(isSecondLevel && { onPress: handleGroupClick })}
           tokens={{
             contentPaddingLeft: 0,
             contentPaddingRight: 0,
@@ -74,30 +170,36 @@ const ListboxGroup = React.forwardRef(
             borderColor: 'transparent',
             borderRadius: 0,
             borderWidth: 0,
-            marginBottom: 0
+            marginBottom: 0,
+            contentPanelBackgroundColor: 'transparent'
           }}
           controlRef={ref}
         >
-          <View style={styles.list}>
-            {items.map((item, index) => {
-              return (
-                <ListboxItem
-                  key={item.label}
-                  id={item.id ?? item.label}
-                  {...item}
-                  selected={
-                    (item.id && item.id === selectedId) || (item.label && item.label === selectedId)
-                  }
-                  isChild
-                  LinkRouter={LinkRouter}
-                  linkRouterProps={linkRouterProps}
-                  {...(index === 0 && { prevItemRef })}
-                  {...(index === items.length - 1 && { nextItemRef })}
-                  {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
-                />
-              )
-            })}
-          </View>
+          {!isSecondLevel && (
+            <View style={styles.list}>
+              {items.map((item, index) => {
+                return (
+                  <ListboxItem
+                    key={item.label}
+                    id={item.id ?? item.label}
+                    {...item}
+                    selected={
+                      (item.id && item.id === selectedId) ||
+                      (item.label && item.label === selectedId)
+                    }
+                    isChild
+                    LinkRouter={LinkRouter}
+                    linkRouterProps={linkRouterProps}
+                    variant={variant}
+                    tokens={tokens}
+                    {...(index === 0 && { prevItemRef })}
+                    {...(index === items.length - 1 && { nextItemRef })}
+                    {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
+                  />
+                )
+              })}
+            </View>
+          )}
         </ExpandCollapse.Panel>
       </View>
     )
@@ -107,6 +209,10 @@ ListboxGroup.displayName = 'ListboxGroup'
 
 ListboxGroup.propTypes = {
   ...withLinkRouter.propTypes,
+  /**
+   * Unique identifier for the group
+   */
+  id: PropTypes.string,
   label: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.shape({
@@ -121,7 +227,34 @@ ListboxGroup.propTypes = {
   /**
    * Use this callback to redirect the focus after it leaves the last item of the group.
    */
-  onLastItemBlur: PropTypes.func
+  onLastItemBlur: PropTypes.func,
+  /**
+   * Select English or French copy
+   */
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    })
+  }),
+  /**
+   * Variant configuration for secondLevel behavior
+   */
+  variant: variantProp.propType,
+  /**
+   * Custom tokens
+   */
+  tokens: PropTypes.object,
+  /**
+   * Callback when the menu is closed
+   */
+  onClose: PropTypes.func
 }
 
 export default ListboxGroup

package/src/Listbox/ListboxOverlay.jsx

@@ -22,13 +22,28 @@ const paddingVertical = 0
 const paddingHorizontal = 0
 
 const DropdownOverlay = React.forwardRef(
-  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens }, ref) => {
-    const systemTokens = useThemeTokens('Listbox', {}, {})
+  (
+    {
+      children,
+      isReady = false,
+      overlaidPosition,
+      maxWidth,
+      minWidth,
+      onLayout,
+      tokens,
+      testID,
+      variant
+    },
+
+    ref
+  ) => {
+    const systemTokens = useThemeTokens('Listbox', variant, tokens)
 
     return (
       <View
         ref={ref}
         onLayout={onLayout}
+        testID={testID}
         style={[
           overlaidPosition,
           { maxWidth, minWidth },
@@ -39,11 +54,12 @@ const DropdownOverlay = React.forwardRef(
         <Card
           tokens={{
             shadow: systemTokens.shadow,
+            borderRadius: systemTokens.borderRadius,
+            ...(Platform.OS === 'web' && { overflowY: 'hidden' }),
             paddingBottom: paddingVertical,
             paddingTop: paddingVertical,
             paddingLeft: paddingHorizontal,
-            paddingRight: paddingHorizontal,
-            ...tokens
+            paddingRight: paddingHorizontal
           }}
         >
           {children}
@@ -75,7 +91,9 @@ DropdownOverlay.propTypes = {
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
-  tokens: PropTypes.object
+  tokens: PropTypes.object,
+  testID: PropTypes.string,
+  variant: PropTypes.object
 }
 
 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'
 })