@telus-uds/components-base 2.0.0 → 2.0.2

package/src/Listbox/ListboxItem.jsx

@@ -0,0 +1,87 @@
+import React 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
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
+  }
+})
+
+const ListboxItem = React.forwardRef(
+  (
+    {
+      href,
+      label,
+      isChild = false,
+      nestedChild,
+      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,
+          nestedChild && styles.nestedChildContainer
+        ]}
+        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,
+  nestedChild: PropTypes.bool
+}
+
+export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import Portal from '../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 = React.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

@@ -0,0 +1,138 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Text } from 'react-native'
+import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils'
+import { useListboxContext } from './ListboxContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getItemStyles = ({
+  groupFontName,
+  groupFontWeight,
+  itemFontSize,
+  itemPaddingTop,
+  itemPaddingBottom,
+  itemPaddingLeft,
+  itemBorderLeftWidth,
+  itemPaddingRight,
+  itemBackgroundColor,
+  itemColor,
+  itemOutline,
+  itemTextDecoration,
+  itemBorderLeftColor,
+  itemBorderRightWidth,
+  itemBorderRightColor,
+  itemBorderTopWidth,
+  itemBorderTopColor,
+  itemBorderBottomWidth,
+  itemBorderBottomColor,
+  itemBorderRadius
+}) => ({
+  fontFamily: `${groupFontName}${groupFontWeight}normal`,
+  fontSize: itemFontSize,
+  paddingTop: itemPaddingTop - itemBorderTopWidth,
+  paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
+  paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
+  paddingRight: itemPaddingRight - itemBorderRightWidth,
+  width: '100%',
+  backgroundColor: itemBackgroundColor,
+  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}`,
+  borderRadius: itemBorderRadius,
+  justifyContent: 'center'
+})
+
+const PressableItem = React.forwardRef(
+  (
+    {
+      children,
+      href,
+      isChild = false,
+      onBlur,
+      onPress,
+      tabIndex = 0,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const { selectedId, setSelectedId } = useListboxContext()
+
+    const selectTextStyles = ({
+      groupFontName,
+      groupFontWeight,
+      itemFontSize,
+      itemColor,
+      lineHeight
+    }) => ({
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: itemFontSize,
+      color: itemColor,
+      lineHeight: lineHeight * itemFontSize
+    })
+
+    const resolveButtonTokens = (pressableState) => {
+      const themeTokens = resolvePressableTokens(tokens, pressableState, {
+        isChild,
+        current: id === selectedId && id !== undefined
+      })
+      return themeTokens
+    }
+
+    const handleKeyPress = (event) => {
+      if (['Enter', ' '].includes(event?.key)) {
+        onPress?.(event)
+      } else if (event?.key === 'ArrowDown') {
+        nextItemRef.current.focus()
+      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
+        prevItemRef.current.focus()
+      }
+    }
+
+    return (
+      <Pressable
+        isChild={isChild}
+        style={(pressableState) => getItemStyles(resolveButtonTokens(pressableState))}
+        onBlur={onBlur}
+        onClick={onPress}
+        onKeyPress={handleKeyPress}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(href && { href })}
+        {...(onPress && { onClick: onPress })}
+        {...selectProps(rest)}
+        onPress={() => {
+          setSelectedId(id)
+          onPress()
+        }}
+      >
+        {(pressableState) => {
+          return (
+            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children} </Text>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+PressableItem.displayName = 'PressableItem'
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+}
+
+export default PressableItem

package/src/Listbox/index.js

@@ -0,0 +1,3 @@
+import Listbox from './Listbox'
+
+export default Listbox

package/src/Modal/Modal.jsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import {
   StyleSheet,
   TouchableWithoutFeedback,
   View,
+  ScrollView,
   Modal as NativeModal,
   Platform
 } from 'react-native'
@@ -16,13 +17,14 @@ import {
   selectSystemProps,
   useCopy,
   variantProp,
-  viewProps,
-  selectTokens
+  viewProps
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
 import dictionary from './dictionary'
 import useScrollBlocking from '../utils/useScrollBlocking'
+import ModalContent from './ModalContent'
+import WebModal from './WebModal'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -57,7 +59,7 @@ const selectModalStyles = ({
   height,
   paddingLeft,
   paddingRight,
-  paddingTop,
+  paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop, // the 16 additions are due to the border that is present in the mobile version
   paddingBottom,
   ...applyShadowToken(shadow)
 })
@@ -69,7 +71,11 @@ const selectBackdropStyles = ({ backdropColor, backdropOpacity }) => ({
 
 const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingRight,
-  paddingTop
+  paddingTop: Platform.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
+})
+
+const selectScrollViewStyles = () => ({
+  flex: 1
 })
 
 /**
@@ -86,11 +92,37 @@ const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = forwardRef(
-  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
+const Modal = React.forwardRef(
+  (
+    {
+      children,
+      isOpen,
+      onClose,
+      maxWidth,
+      tokens,
+      copy,
+      closeButton,
+      onCancel = onClose,
+      onConfirm,
+      heading,
+      headingLevel,
+      subHeading,
+      subHeadingSize,
+      bodyText,
+      variant = {},
+      confirmButtonText,
+      confirmButtonVariant,
+      cancelButtonText,
+      cancelButtonType,
+      ...rest
+    },
+    ref
+  ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
     const modalRef = useScrollBlocking(isOpen)
+    const modalBodyRef = React.useRef(ref)
+    const modalContentRef = React.useRef(null)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -105,23 +137,70 @@ const Modal = forwardRef(
       if (event.key === 'Escape') onClose()
     }
 
+    const manageFocus = React.useCallback(
+      (event) => {
+        if (event.key === 'Tab') {
+          const focusableElements = Array.from(
+            modalBodyRef?.current?.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `)
+          )
+
+          const firstElement = focusableElements[0]
+          const lastElement = focusableElements[focusableElements.length - 1]
+
+          if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault()
+            lastElement.focus()
+          } else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault()
+            firstElement.focus()
+          }
+        }
+      },
+      [modalBodyRef]
+    )
+
     // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
     // Hide the close button if `closeButton` is `null`.
     const showCloseButton = closeButton !== null
 
+    // These refs are used to manage focus in the web modal container
+    const focusTrapRef = React.useRef(null)
+    const closeButtonRef = React.useRef(null)
+
+    React.useEffect(() => {
+      if (Platform.OS === 'web') {
+        // Add an event listener to manage keydown and focus in the web modal container
+        document.addEventListener('keydown', manageFocus)
+
+        // Clean up the event listener
+        return () => document.removeEventListener('keydown', manageFocus)
+      }
+      return undefined
+    }, [manageFocus])
+
+    React.useEffect(() => {
+      if (isOpen) {
+        modalContentRef?.current?.focus()
+      }
+    }, [isOpen, modalContentRef?.current?.focus])
+
     if (!isOpen) {
       return null
     }
 
-    return (
-      <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
+    const content = (
+      <>
+        <ScrollView contentContainerStyle={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events
           >
             <View
-              ref={ref}
+              ref={modalBodyRef}
               style={[staticStyles.modal, selectModalStyles(themeTokens)]}
               onKeyUp={handleKeyUp}
             >
@@ -138,12 +217,32 @@ const Modal = forwardRef(
                       icon={CloseIconComponent}
                       accessibilityRole="button"
                       accessibilityLabel={closeLabel}
-                      tokens={selectTokens('IconButton', themeTokens, 'close')}
+                      ref={closeButtonRef}
                     />
                   )}
                 </View>
               )}
-              {children}
+              <ModalContent
+                tokens={tokens}
+                variant={variant}
+                onCancel={onCancel}
+                onConfirm={onConfirm}
+                heading={heading}
+                headingLevel={headingLevel}
+                subHeading={subHeading}
+                subHeadingSize={subHeadingSize}
+                bodyText={bodyText}
+                confirmButtonText={confirmButtonText}
+                confirmButtonVariant={confirmButtonVariant}
+                cancelButtonText={cancelButtonText}
+                cancelButtonType={cancelButtonType}
+              >
+                {Platform !== 'web' ? (
+                  <ScrollView style={selectScrollViewStyles}>{children}</ScrollView>
+                ) : (
+                  { children }
+                )}
+              </ModalContent>
             </View>
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
@@ -151,7 +250,21 @@ const Modal = forwardRef(
           <TouchableWithoutFeedback onPress={handleClose}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
-        </View>
+        </ScrollView>
+      </>
+    )
+
+    if (Platform.OS === 'web') {
+      return (
+        <WebModal {...selectProps(rest)} ref={modalContentRef}>
+          {content}
+          <View accessibilityRole="button" ref={focusTrapRef} />
+        </WebModal>
+      )
+    }
+    return (
+      <NativeModal transparent {...selectProps(rest)}>
+        {content}
       </NativeModal>
     )
   }
@@ -161,16 +274,72 @@ Modal.displayName = 'Modal'
 Modal.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * To define the locale of the copy
+   */
   copy: copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
   isOpen: PropTypes.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
   onClose: PropTypes.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
-  closeButton: PropTypes.node
+  closeButton: PropTypes.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: PropTypes.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: PropTypes.elementType, // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: PropTypes.func
 }
 
 export default Modal
@@ -199,7 +368,12 @@ const staticStyles = StyleSheet.create({
     width: '100%' // ensure that the modal actually expands to the set maxWidth
   },
   modal: {
-    maxHeight: '100%' // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    maxHeight: '100%', // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    ...Platform.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',