@telus-uds/components-base 1.83.0 → 1.85.0

package/src/Modal/ModalContent.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import Box from '../Box'
@@ -9,137 +9,144 @@ import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 
-const ModalContent = ({
-  heading,
-  headingLevel = 'h3',
-  subHeading,
-  subHeadingSize = 'medium',
-  bodyText,
-  confirmButtonText,
-  confirmButtonVariant = { priority: 'high' },
-  onConfirm,
-  tokens,
-  variant,
-  cancelButtonText,
-  cancelButtonType: CancelButton = TextButton,
-  children,
-  onCancel
-}) => {
-  const viewport = useViewport()
-  const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
-    'Modal',
-    tokens,
-    variant,
-    { viewport }
-  )
-  const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
-  const [scrollContentHeight, setScrollContentHeight] = useState(0)
+const ModalContent = React.forwardRef(
+  (
+    {
+      heading,
+      headingLevel = 'h3',
+      subHeading,
+      subHeadingSize = 'medium',
+      bodyText,
+      confirmButtonText,
+      confirmButtonVariant = { priority: 'high' },
+      onConfirm,
+      tokens,
+      variant,
+      cancelButtonText,
+      cancelButtonType: CancelButton = TextButton,
+      children,
+      onCancel
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
+      'Modal',
+      tokens,
+      variant,
+      { viewport }
+    )
+    const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0)
+    const [scrollContentHeight, setScrollContentHeight] = React.useState(0)
 
-  const handleContainerLayout = ({
-    nativeEvent: {
-      layout: { height }
-    }
-  }) => setScrollContainerHeight(height)
-  const onContentSizeChange = (_, height) => setScrollContentHeight(height)
-  const isContentOverflowing = scrollContentHeight > scrollContainerHeight
+    const handleContainerLayout = ({
+      nativeEvent: {
+        layout: { height }
+      }
+    }) => setScrollContainerHeight(height)
+    const onContentSizeChange = (_, height) => setScrollContentHeight(height)
+    const isContentOverflowing = scrollContentHeight > scrollContainerHeight
 
-  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined
-  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined
-  const hasHeadingSection = Boolean(heading || subHeading)
+    const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined
+    const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined
+    const hasHeadingSection = Boolean(heading || subHeading)
 
-  const selectFooterContainerStyles = ({
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    marginLeft,
-    marginRight,
-    borderColor,
-    gap,
-    direction,
-    hasBorder
-  }) => ({
-    flexDirection: direction,
-    alignItems: 'center',
-    gap,
-    marginLeft: -marginLeft,
-    marginRight: -marginRight,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    borderTopColor: hasBorder ? borderColor : 'transparent',
-    borderTopWidth: hasBorder ? 1 : 0
-  })
+    const selectFooterContainerStyles = ({
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      marginLeft,
+      marginRight,
+      borderColor,
+      gap,
+      direction,
+      hasBorder
+    }) => ({
+      flexDirection: direction,
+      alignItems: 'center',
+      gap,
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      borderTopColor: hasBorder ? borderColor : 'transparent',
+      borderTopWidth: hasBorder ? 1 : 0
+    })
 
-  const headingStyles = {
-    flexDirection: 'column',
-    paddingTop: 8,
-    paddingRight: themeTokens.headingPaddingRight
-  }
+    const headingStyles = {
+      flexDirection: 'column',
+      paddingTop: 8,
+      paddingRight: themeTokens.headingPaddingRight
+    }
 
-  const subheadingStyles = {
-    marginTop: themeTokens.subHeadingMarginTop
+    const subheadingStyles = {
+      marginTop: themeTokens.subHeadingMarginTop
+    }
+
+    return (
+      <View style={styles.modalContent} ref={ref}>
+        {hasHeadingSection && (
+          <View style={headingStyles}>
+            {heading && (
+              <Typography
+                variant={{ size: headingLevel }}
+                tokens={{ color: headingColor }}
+                heading={headingLevel}
+              >
+                {heading}
+              </Typography>
+            )}
+            {subHeading && (
+              <View style={subheadingStyles}>
+                <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
+              </View>
+            )}
+            {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
+          </View>
+        )}
+        {bodyText && (
+          <Box
+            scroll={{ onContentSizeChange, showsVerticalScrollIndicator: true }}
+            onLayout={handleContainerLayout}
+          >
+            <Typography>{bodyText}</Typography>
+          </Box>
+        )}
+        {children}
+        {(hasConfirmButton || hasCancelButton) && (
+          <View
+            style={[
+              selectFooterContainerStyles({
+                ...themeTokens,
+                hasBorder: isContentOverflowing
+              })
+            ]}
+          >
+            {hasConfirmButton && (
+              <Button
+                variant={confirmButtonVariant}
+                tokens={{ width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined }}
+                onPress={onConfirm}
+              >
+                {confirmButtonText}
+              </Button>
+            )}
+            {hasCancelButton ? (
+              <View>
+                <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
+                  {cancelButtonText}
+                </CancelButton>
+              </View>
+            ) : null}
+          </View>
+        )}
+      </View>
+    )
   }
+)
 
-  return (
-    <View style={styles.modalContent}>
-      {hasHeadingSection && (
-        <View style={headingStyles}>
-          {heading && (
-            <Typography
-              variant={{ size: headingLevel }}
-              tokens={{ color: headingColor }}
-              heading={headingLevel}
-            >
-              {heading}
-            </Typography>
-          )}
-          {subHeading && (
-            <View style={subheadingStyles}>
-              <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
-            </View>
-          )}
-          {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
-        </View>
-      )}
-      {bodyText && (
-        <Box
-          scroll={{ onContentSizeChange, showsVerticalScrollIndicator: true }}
-          onLayout={handleContainerLayout}
-        >
-          <Typography>{bodyText}</Typography>
-        </Box>
-      )}
-      {children}
-      {(hasConfirmButton || hasCancelButton) && (
-        <View
-          style={[
-            selectFooterContainerStyles({
-              ...themeTokens,
-              hasBorder: isContentOverflowing
-            })
-          ]}
-        >
-          {hasConfirmButton && (
-            <Button
-              variant={confirmButtonVariant}
-              tokens={{ width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined }}
-              onPress={onConfirm}
-            >
-              {confirmButtonText}
-            </Button>
-          )}
-          {hasCancelButton ? (
-            <View>
-              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
-                {cancelButtonText}
-              </CancelButton>
-            </View>
-          ) : null}
-        </View>
-      )}
-    </View>
-  )
-}
+ModalContent.displayName = 'ModalContent'
 
 const styles = StyleSheet.create({
   modalContent: {

package/src/Modal/WebModal.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
+import Portal from '../Portal'
 import { a11yProps, selectSystemProps, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -13,13 +14,19 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = ({ children, ...rest }) => {
+const WebModal = React.forwardRef(({ children, ...rest }, ref) => {
   return (
-    <View style={staticStyles.container} {...selectProps(rest)}>
-      <View style={staticStyles.content}>{children}</View>
-    </View>
+    <Portal>
+      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+        <div style={staticStyles.content} role="dialog" aria-modal={true}>
+          {children}
+        </div>
+      </View>
+    </Portal>
   )
-}
+})
+
+WebModal.displayName = 'WebModal'
 
 WebModal.propTypes = {
   ...selectedSystemPropTypes,
@@ -46,14 +53,16 @@ const staticStyles = StyleSheet.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000,
+    display: 'flex'
   }
 })
 

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 import { Portal } from '@gorhom/portal'
@@ -41,7 +41,7 @@ const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight })
   paddingRight
 })
 
-const ModalOverlay = forwardRef(
+const ModalOverlay = React.forwardRef(
   (
     {
       children,