@telus-uds/components-base 2.0.0 → 2.0.1

package/src/List/ListItemBase.jsx

@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
+import Typography from '../Typography'
+import { useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -22,7 +24,7 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = forwardRef(
+const ListItemBase = React.forwardRef(
   (
     {
       tokens,
@@ -31,6 +33,7 @@ const ListItemBase = forwardRef(
       iconSize,
       showDivider,
       children,
+      title,
       isLastItem,
       accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
       ...rest
@@ -41,7 +44,16 @@ const ListItemBase = forwardRef(
 
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
-
+    const { iconMarginTop, itemIconSize } = themeTokens
+    let adjustedIconMarginTop = iconMarginTop
+    const { fontSize, lineHeight: lineHeightRatio } = useThemeTokens(
+      'Typography',
+      {},
+      { size: 'h4', bold: true }
+    )
+    if (title) {
+      adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2
+    }
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
      * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -62,17 +74,27 @@ const ListItemBase = forwardRef(
     return (
       <View
         ref={ref}
-        style={[staticStyles.itemContainer, getContainerStyle()]}
+        style={[staticStyles.container, getContainerStyle()]}
         accessibilityRole={accessibilityRole}
         {...selectProps(rest)}
       >
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <>
-            <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
-            <ListItemContent tokens={tokens}>{children}</ListItemContent>
-          </>
+          <View style={staticStyles.container}>
+            <ListItemMark
+              tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
+              icon={icon}
+              iconColor={iconColor}
+              iconSize={iconSize}
+            />
+            <View style={staticStyles.titleAndContentContainer}>
+              {Boolean(title) && (
+                <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>
+              )}
+              <ListItemContent tokens={tokens}>{children}</ListItemContent>
+            </View>
+          </View>
         )}
       </View>
     )
@@ -81,8 +103,15 @@ const ListItemBase = forwardRef(
 ListItemBase.displayName = 'ListItem'
 
 const staticStyles = StyleSheet.create({
-  itemContainer: {
+  container: {
+    flex: 1,
     flexDirection: 'row'
+  },
+  titleAndContentContainer: {
+    flexDirection: 'column',
+    flexShrink: 1,
+    flexGrow: 1,
+    textAlign: 'justify'
   }
 })
 

package/src/List/ListItemContent.jsx

@@ -9,14 +9,16 @@ export const tokenTypes = {
   itemFontWeight: PropTypes.string.isRequired,
   itemFontSize: PropTypes.number.isRequired,
   itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired
+  itemFontName: PropTypes.string.isRequired,
+  itemFontColor: PropTypes.string
 }
 
 const selectItemTextStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
@@ -32,15 +34,31 @@ const selectItemTextStyles = (
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = ({ tokens, children }) => {
+const ListItemContent = React.forwardRef(({ tokens, children }, ref) => {
   const { themeOptions } = useTheme()
   const textStyles = selectItemTextStyles(tokens, themeOptions)
-  return <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: textStyles })}</View>
-}
+  return (
+    <View
+      style={[
+        staticStyles.wrap,
+        tokens?.itemUnderline && {
+          textDecorationLine: tokens.itemUnderline,
+          textDecorationColor: tokens.itemFontColor
+        }
+      ]}
+      ref={ref}
+    >
+      {wrapStringsInText(children, { style: textStyles })}
+    </View>
+  )
+})
+
+ListItemContent.displayName = 'ListItemContent'
 
 const staticStyles = StyleSheet.create({
   wrap: {
-    flex: 1
+    flex: 1,
+    justifyContent: 'center'
   }
 })
 

package/src/List/ListItemMark.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View, StyleSheet } from 'react-native'
+import Icon from '../Icon'
 
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
@@ -26,13 +27,6 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-})
-
 const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
   width: itemBulletContainerWidth,
   alignItems: itemBulletContainerAlign
@@ -45,7 +39,7 @@ const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletConta
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
+const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
   const IconComponent = icon || <></>
 
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
@@ -61,17 +55,24 @@ const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
     )
   }
 
+  const bulletColor = themeTokens.itemBulletColor
+  const { bulletIcon } = themeTokens
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-  const itemBulletStyles = selectBulletStyles(themeTokens)
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+
   return (
-    <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-      <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
-        <View style={itemBulletStyles} testID="unordered-item-bullet" />
+    <View style={[sideItemContainerStyles, itemBulletContainerStyles]} ref={ref}>
+      <View
+        style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
+        testID="unordered-item-bullet"
+      >
+        <Icon icon={bulletIcon} tokens={{ color: bulletColor }} />
       </View>
     </View>
   )
-}
+})
+
+ListItemMark.displayName = 'ListItemMark'
 
 ListItemMark.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,

package/src/List/PressableListItemBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -19,6 +19,7 @@ import ListItemMark from './ListItemMark'
 
 const selectPressableStyles = ({
   backgroundColor,
+  itemFontColor,
   paddingLeft,
   paddingRight,
   paddingTop,
@@ -26,6 +27,7 @@ const selectPressableStyles = ({
   interItemMargin
 }) => ({
   backgroundColor,
+  itemFontColor,
   paddingLeft,
   paddingRight,
   paddingTop,
@@ -34,7 +36,7 @@ const selectPressableStyles = ({
   ...Platform.select({ web: { outline: 'none' } })
 })
 
-const PressableListItemBase = forwardRef(
+const PressableListItemBase = React.forwardRef(
   ({ href, tokens, icon, children, listItemRef, ...rest }, ref) => {
     const { onPress, ...props } = clickProps.toPressProps(rest)
     const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)

package/src/Listbox/GroupControl.jsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Text } from 'react-native'
+import { useThemeTokens } from '../ThemeProvider'
+import Icon from '../Icon'
+import Spacer from '../Spacer'
+import { useListboxContext } from './ListboxContext'
+
+const styles = StyleSheet.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+})
+
+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
+  })
+
+  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>
+  )
+})
+
+GroupControl.displayName = 'GroupControl'
+
+GroupControl.propTypes = {
+  id: PropTypes.string,
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  label: PropTypes.string
+}
+
+export default GroupControl

package/src/Listbox/Listbox.jsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { useThemeTokens } from '../ThemeProvider'
+import { withLinkRouter, getTokensPropType } from '../utils'
+import ExpandCollapse from '../ExpandCollapse'
+import ListboxGroup from './ListboxGroup'
+import ListboxItem from './ListboxItem'
+import { ListboxContext } from './ListboxContext'
+import DropdownOverlay from './ListboxOverlay'
+
+const styles = StyleSheet.create({
+  list: {
+    padding: 0,
+    margin: 0
+  }
+})
+
+const getInitialOpen = (items, selectedId) =>
+  items
+    .filter(
+      (item) =>
+        item.items &&
+        item.items.some((nestedItem) => (nestedItem.id ?? nestedItem.label) === selectedId)
+    )
+    .map((item) => item.id ?? item.label)
+
+const Listbox = React.forwardRef(
+  (
+    {
+      items = [],
+      firstItemRef = null, // focus will be moved to this one once within the menu
+      parentRef = null, // to return focus to after leaving the last menu item
+      selectedId: defaultSelectedId,
+      LinkRouter,
+      itemRouterProps,
+      onClose,
+      variant,
+      tokens
+    },
+    ref
+  ) => {
+    const initialOpen = getInitialOpen(items, defaultSelectedId)
+
+    const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
+
+    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+
+    // We need to keep track of each item's ref in order to be able to
+    // focus on a specific item via keyboard navigation
+    const itemRefs = React.useRef([])
+    if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+    const [focusedIndex, setFocusedIndex] = React.useState(0)
+    const handleKeydown = React.useCallback(
+      (event) => {
+        const nextItemRef = itemRefs.current[focusedIndex + 1]
+        const prevItemRef = itemRefs.current[focusedIndex - 1]
+        if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
+          // Move the focus to the previous item or to the parent one if on the first
+          if (prevItemRef) {
+            event.preventDefault()
+            prevItemRef.focus()
+          } else if (parentRef) parentRef.current?.focus()
+          setFocusedIndex(focusedIndex - 1)
+        } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
+          event.preventDefault()
+          setFocusedIndex(focusedIndex + 1)
+          nextItemRef.focus()
+        } else if (event.key === 'Escape') {
+          // Close the dropdown
+          parentRef?.current?.click()
+          // Return focus to the dropdown control after leaving the last item
+          parentRef?.current?.focus()
+          if (onClose) onClose(event)
+        } else if (!nextItemRef && firstItemRef) {
+          // If the last item is focused, move the focus to the first one
+          event.preventDefault()
+          setFocusedIndex(0)
+          firstItemRef.current?.focus()
+        }
+      },
+      [focusedIndex, onClose, parentRef, firstItemRef]
+    )
+
+    // Add listeners for mouse clicks outside and for key presses
+    React.useEffect(() => {
+      if (Platform.OS === 'web') {
+        window.addEventListener('click', onClose)
+        window.addEventListener('keydown', handleKeydown)
+        window.addEventListener('touchstart', onClose)
+        return () => {
+          window.removeEventListener('click', onClose)
+          window.removeEventListener('keydown', handleKeydown)
+          window.removeEventListener('touchstart', onClose)
+        }
+      }
+      return () => {}
+    }, [onClose, handleKeydown])
+
+    return (
+      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+        <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
+          {(expandProps) => (
+            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+              {items.map((item, index) => {
+                const { id, label, items: nestedItems } = item
+                const itemId = id ?? label
+
+                // Give the list of refs.
+                const itemRef = (currentItemRef) => {
+                  itemRefs.current[index] = currentItemRef
+                  return currentItemRef
+                }
+
+                return nestedItems ? (
+                  <ListboxGroup
+                    {...item}
+                    expandProps={expandProps}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                    key={itemId}
+                  />
+                ) : (
+                  <ListboxItem
+                    {...item}
+                    key={itemId}
+                    id={itemId}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                  />
+                )
+              })}
+            </View>
+          )}
+        </ExpandCollapse>
+      </ListboxContext.Provider>
+    )
+  }
+)
+
+Listbox.displayName = 'Listbox'
+
+Listbox.propTypes = {
+  ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: PropTypes.object,
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: PropTypes.object,
+  /**
+   * `Listbox` items
+   */
+  items: PropTypes.array,
+  /**
+   * To select an item by default
+   */
+  selectedId: PropTypes.string,
+  /**
+   * onClose event
+   */
+  onClose: PropTypes.func
+}
+
+Listbox.Overlay = DropdownOverlay
+
+export default Listbox

package/src/Listbox/ListboxContext.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+const ListboxContext = React.createContext({})
+const useListboxContext = () => React.useContext(ListboxContext)
+
+export { ListboxContext, useListboxContext }

package/src/Listbox/ListboxGroup.jsx

@@ -0,0 +1,127 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { withLinkRouter } from '../utils'
+import ExpandCollapse from '../ExpandCollapse'
+import ListboxItem from './ListboxItem'
+import { useListboxContext } from './ListboxContext'
+import GroupControl from './GroupControl'
+
+const styles = StyleSheet.create({
+  groupWrapper: {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  list: {
+    margin: 0,
+    padding: 0
+  }
+})
+
+const getAccessibilityRole = () =>
+  Platform.select({
+    ios: 'listitem',
+    android: 'none',
+    web: 'listitem'
+  })
+
+const ListboxGroup = React.forwardRef(
+  (
+    {
+      id,
+      label,
+      items,
+      LinkRouter,
+      linkRouterProps,
+      expandProps,
+      onLastItemBlur,
+      nextItemRef,
+      prevItemRef
+    },
+    ref
+  ) => {
+    const { selectedId } = useListboxContext()
+
+    // TODO: implement keyboard navigation via refs for grouped items separately here
+    return (
+      <View id="test" style={styles.groupWrapper} accessibilityRole={getAccessibilityRole()}>
+        <ExpandCollapse.Panel
+          panelId={id ?? label}
+          controlTokens={{
+            icon: null,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            textLine: 'none',
+            borderWidth: 0
+          }}
+          // TODO refactor
+          // eslint-disable-next-line react/no-unstable-nested-components
+          control={(controlProps) => (
+            <GroupControl id={id ?? label} {...controlProps} label={label} />
+          )}
+          {...expandProps}
+          tokens={{
+            contentPaddingLeft: 0,
+            contentPaddingRight: 0,
+            contentPaddingTop: 0,
+            contentPaddingBottom: 0,
+            borderColor: 'transparent',
+            borderRadius: 0,
+            borderWidth: 0,
+            marginBottom: 0
+          }}
+          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>
+        </ExpandCollapse.Panel>
+      </View>
+    )
+  }
+)
+ListboxGroup.displayName = 'ListboxGroup'
+
+ListboxGroup.propTypes = {
+  ...withLinkRouter.propTypes,
+  label: PropTypes.string,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      href: PropTypes.string,
+      label: PropTypes.string,
+      current: PropTypes.bool
+    })
+  ),
+  expandProps: PropTypes.object,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  /**
+   * Use this callback to redirect the focus after it leaves the last item of the group.
+   */
+  onLastItemBlur: PropTypes.func
+}
+
+export default ListboxGroup