@telus-uds/components-base 1.60.0 → 1.62.0

package/src/IconButton/IconButton.jsx

@@ -18,20 +18,30 @@ import {
 } from '../utils'
 import Icon from '../Icon'
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? { width, height } : {}
+}
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectOuterStyle = ({
-  backgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  borderRadius,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  shadow
-}) => [
+const selectOuterStyle = (
+  {
+    backgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    shadow,
+    width,
+    height
+  },
+  password
+) => [
   {
     backgroundColor,
     ...applyShadowToken(shadow),
@@ -45,31 +55,44 @@ const selectOuterStyle = ({
       outerBorderColor,
       outerBorderGap
     }),
-    ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
+    ...getPasswordDimensions(password, width, height),
+    ...Platform.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    })
   },
   staticStyles.outer
 ]
 
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth) // Stable size as border changes
 
-const selectInnerStyle = ({
-  borderColor,
-  borderWidth,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  borderRadius,
-  padding = 0,
-  borderTopWidth,
-  borderRightWidth,
-  borderBottomWidth,
-  borderLeftWidth,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom
-}) => ({
+const selectInnerStyle = (
+  {
+    borderColor,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    width,
+    height
+  },
+  password
+) => ({
   // Inner borders animate with the icon and should be treated like a themable feature of the icon
   borderColor,
   borderRadius,
@@ -89,9 +112,13 @@ const selectInnerStyle = ({
   paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
   ...Platform.select({
     web: {
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
-  })
+  }),
+  ...getPasswordDimensions(password, width, height)
 })
 
 /**
@@ -124,7 +151,7 @@ const IconButton = forwardRef(
 
     const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
     const getOuterStyle = (pressableState) =>
-      selectOuterStyle(getTokens(resolvePressableState(pressableState)))
+      selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password))
 
     return (
       <Pressable
@@ -139,7 +166,7 @@ const IconButton = forwardRef(
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
           return (
-            <View style={selectInnerStyle(themeTokens)}>
+            <View style={selectInnerStyle(themeTokens, variant.password)}>
               <Icon
                 icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}

package/src/Listbox/GroupControl.jsx

@@ -0,0 +1,93 @@
+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 = ({ expanded, pressed, hover, focus, label, id }) => {
+  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
+  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
+        }
+      ]}
+    >
+      <Text>{label}</Text>
+      <Spacer space={1} direction="row" />
+      <Icon
+        icon={tokens.groupIcon}
+        tokens={{ color: tokens.groupColor }}
+        variant={{ size: 'micro' }}
+      />
+    </View>
+  )
+}
+
+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,165 @@
+import React, { useCallback, useEffect, useRef, useState } 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 = ({
+  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
+}) => {
+  const initialOpen = getInitialOpen(items, defaultSelectedId)
+
+  const [selectedId, setSelectedId] = 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 = useRef([])
+  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+  const [focusedIndex, setFocusedIndex] = useState(0)
+  const handleKeydown = 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)
+      }
+    },
+    [focusedIndex, onClose, parentRef]
+  )
+
+  // Add listeners for mouse clicks outside and for key presses
+  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}>
+        {(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 = (ref) => {
+                itemRefs.current[index] = ref
+                return ref
+              }
+
+              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.propTypes = {
+  ...withLinkRouter.propTypes,
+  /**
+   * 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,
+  tokens: getTokensPropType('Listbox')
+}
+
+Listbox.Overlay = DropdownOverlay
+
+export default Listbox

package/src/Listbox/ListboxGroup.jsx

@@ -0,0 +1,120 @@
+/* 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 { 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 ListboxGroup = 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="listitem">
+        <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

package/src/Listbox/ListboxItem.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils'
+import PressableItem from './PressableItem'
+import { useThemeTokensCallback } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    display: 'flex',
+    margin: 0
+  },
+  childContainer: {
+    paddingLeft: 16
+  }
+})
+
+const ListboxItem = forwardRef(
+  (
+    {
+      href,
+      label,
+      isChild = false,
+      onBlur,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      variant = {},
+      LinkRouter,
+      linkRouterProps,
+      id,
+      onPress = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const selectedProps = selectProps({ href, ...rest })
+
+    const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
+    return (
+      <View style={[styles.itemContainer, isChild && styles.childContainer]} role="option">
+        <PressableItem
+          href={href}
+          isChild={isChild}
+          onPress={onPress}
+          onBlur={onBlur}
+          nextItemRef={nextItemRef}
+          prevItemRef={prevItemRef}
+          ref={ref}
+          tokens={getTokens}
+          selectedProps={selectedProps}
+          id={id}
+        >
+          {label}
+        </PressableItem>
+      </View>
+    )
+  }
+)
+ListboxItem.displayName = 'ListboxItem'
+
+ListboxItem.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  onPress: PropTypes.func
+}
+
+export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { Portal } from '@gorhom/portal'
+import { useThemeTokens } from '../ThemeProvider'
+import Card from '../Card'
+
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1, // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+})
+
+const paddingVertical = 0
+const paddingHorizontal = 0
+
+const DropdownOverlay = forwardRef(
+  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
+    const systemTokens = useThemeTokens('Listbox', {}, {})
+
+    return (
+      <View
+        ref={ref}
+        onLayout={onLayout}
+        style={[
+          overlaidPosition,
+          { maxWidth, minWidth },
+          staticStyles.positioner,
+          !isReady && staticStyles.hidden
+        ]}
+      >
+        <Card
+          tokens={{
+            shadow: systemTokens.shadow,
+            paddingBottom: paddingVertical,
+            paddingTop: paddingVertical,
+            paddingLeft: paddingHorizontal,
+            paddingRight: paddingHorizontal
+          }}
+        >
+          {children}
+        </Card>
+      </View>
+    )
+  }
+)
+
+const withPortal = (Overlay) => {
+  // eslint-disable-next-line react/display-name, react/no-multi-comp
+  return (props) => {
+    return (
+      <Portal>
+        <Overlay {...props} />
+      </Portal>
+    )
+  }
+}
+
+DropdownOverlay.displayName = 'DropdownOverlay'
+
+DropdownOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
+}
+
+export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -18,7 +18,6 @@ const getItemStyles = ({
   itemPaddingRight,
   itemBackgroundColor,
   itemColor,
-  itemDisplay,
   itemOutline,
   itemTextDecoration,
   itemBorderLeftColor,
@@ -39,7 +38,6 @@ const getItemStyles = ({
   width: '100%',
   backgroundColor: itemBackgroundColor,
   color: itemColor,
-  display: itemDisplay,
   outline: itemOutline,
   textDecoration: itemTextDecoration,
   borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,

package/src/Listbox/index.js

@@ -1,2 +1,3 @@
-export * from './ListboxContext'
-export { default as PressableItem } from './PressableItem'
+import Listbox from './Listbox'
+
+export default Listbox