@telus-uds/components-base 1.60.0 → 1.61.0

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

package/src/TextInput/TextInputBase.jsx

@@ -341,6 +341,8 @@ export default TextInputBase
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,

package/src/index.js

@@ -1,10 +1,11 @@
 export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
+export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export * from './Carousel'
-export * from './Listbox'
+export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'

package/src/utils/useOverlaidPosition.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset)
@@ -169,8 +169,9 @@ const useOverlaidPosition = ({
   const readyToShow = Boolean(isShown && sourceRef.current)
   useEffect(() => {
     const handleDimensionsChange = ({ window }) => {
-      sourceRef.current?.measureInWindow((x, y, width, height) => {
-        // Could add a debouncer here if there's too many rerenders during gradual resizes
+      const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure'
+
+      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window)
         setSourceLayout({ x, y, width, height })
       })
@@ -181,9 +182,9 @@ const useOverlaidPosition = ({
       if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove()
-      } else if (typeof Dimensions.removeEventListener === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        Dimensions.removeEventListener('change', handleDimensionsChange)
+        Dimensions.remove('change', handleDimensionsChange)
       }
       setSourceLayout(null)
       setTargetDimensions(null)