@telus-uds/components-base 1.93.0 → 1.95.0

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import { Portal } from '@gorhom/portal'
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
@@ -13,8 +13,26 @@ import IconButton from '../IconButton'
 const staticStyles = StyleSheet.create({
   positioner: {
     flex: 1, // Grow to maxWidth when possible, shrink when not possible
-    position: 'absolute',
-    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+    zIndex: 10000, // Position on top of all the other overlays, including backdrops and modals,
+    elevation: 10000, // Position on top of all the other overlays, including backdrops and modals,
+    borderRadius: 4,
+    ...Platform.select({
+      web: {
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
+      },
+      default: {
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 8
+      }
+    })
+  },
+  card: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0
   },
   closeButtonContainer: {
     position: 'absolute',
@@ -29,18 +47,23 @@ const staticStyles = StyleSheet.create({
   }
 })
 
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ...Platform.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+})
+
 const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingRight,
   paddingTop
 })
 
-const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight }) => ({
-  paddingBottom: 35,
-  paddingTop,
-  paddingLeft,
-  paddingRight
-})
-
 const ModalOverlay = React.forwardRef(
   (
     {
@@ -56,17 +79,18 @@ const ModalOverlay = React.forwardRef(
       variant,
       tokens,
       copy,
-      onClose
+      onClose,
+      enableFullscreen = false
     },
     ref
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
     const containerWidthHeight = {
-      minWidth,
-      minHeight,
-      ...(tokens.maxWidth && maxWidthSize && { maxWidth: maxWidthSize }),
-      ...(maxHeight && maxHeightSize && { maxHeight: maxHeightSize })
+      minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
+      minHeight: maxHeight ? maxHeightSize : minHeight,
+      maxWidth: maxWidthSize,
+      maxHeight: maxHeightSize
     }
 
     const { closeIcon: CloseIconComponent } = themeTokens
@@ -83,10 +107,11 @@ const ModalOverlay = React.forwardRef(
             overlaidPosition,
             containerWidthHeight,
             staticStyles.positioner,
-            !isReady && staticStyles.hidden
+            !isReady && staticStyles.hidden,
+            selectContainerStyle(enableFullscreen, themeTokens)
           ]}
         >
-          <Card tokens={selectPaddingContainerStyles(themeTokens)}>
+          <Card tokens={staticStyles.card}>
             <View
               style={[
                 staticStyles.closeButtonContainer,
@@ -127,7 +152,8 @@ ModalOverlay.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  enableFullscreen: PropTypes.bool
 }
 
 export default ModalOverlay

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   containUniqueFields,
@@ -12,7 +12,8 @@ import {
   useCopy,
   useMultipleInputValues,
   useResponsiveProp,
-  variantProp
+  variantProp,
+  useScrollBlocking
 } from '../utils'
 import defaultDictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
@@ -26,7 +27,6 @@ import StackView from '../StackView'
 import Typography from '../Typography'
 import { TextButton } from '../Link'
 import ModalOverlay from './ModalOverlay'
-import Modal from '../Modal'
 
 const { Col, Row } = FlexGrid
 
@@ -34,13 +34,47 @@ const selectSubTitleTokens = ({ subtitleColor }) => ({
   color: subtitleColor
 })
 
-const selectDividerToknes = ({ dividerColor, width, decorative = true, weight = 'thin' }) => ({
-  color: dividerColor,
-  width,
-  decorative,
-  weight
+const selectDividerTokens = ({ dividerColor }) => ({
+  color: dividerColor
 })
 
+const selectHeaderTokens = ({
+  contentMarginLeft,
+  contentMarginRight,
+  contentMarginTop,
+  contentPaddingLeft,
+  contentPaddingRight
+}) => ({
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  marginTop: contentMarginTop,
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight,
+  flexGrow: 1
+})
+
+const selectControlsTokens = ({
+  contentMarginBottom,
+  contentMarginLeft,
+  contentMarginRight,
+  contentPaddingLeft,
+  contentPaddingRight
+}) => ({
+  marginBottom: contentMarginBottom,
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight
+})
+
+const selectContainerStyle = (windowHeight, windowWidth) => ({
+  height: windowHeight,
+  width: windowWidth
+})
+
+const TOTAL_COLUMNS = 12
+const MAX_ITEMS_THRESHOLD = 12
+
 const MultiSelectFilter = React.forwardRef(
   (
     {
@@ -108,7 +142,8 @@ const MultiSelectFilter = React.forwardRef(
       maxWidthSize,
       subHeaderLineHeight,
       minHeight,
-      minWidth
+      minWidth,
+      ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
       tokens,
@@ -173,6 +208,105 @@ const MultiSelectFilter = React.forwardRef(
       align
     })
 
+    const [isScrolling, setIsScrolling] = React.useState(false)
+    const [scrollViewHeight, setScrollViewHeight] = React.useState(0)
+    const [rowHeight, setRowHeight] = React.useState(0)
+    const modalRef = useScrollBlocking(isOpen)
+    const windowWidth = Dimensions.get('window').width
+    const windowHeight = Dimensions.get('window').height
+
+    React.useEffect(() => {
+      if (rowHeight > scrollViewHeight) {
+        setIsScrolling(true)
+      } else {
+        setIsScrolling(false)
+      }
+    }, [scrollViewHeight, rowHeight])
+
+    const handleScrollViewLayout = (event) => {
+      const { height } = event.nativeEvent.layout
+      setScrollViewHeight(height)
+    }
+
+    const handleRowLayout = (event) => {
+      const { height } = event.nativeEvent.layout
+      setRowHeight(height)
+    }
+
+    const headerContent = (
+      <View style={[selectHeaderTokens(restTokens), styles.container]}>
+        <Row>
+          <View>
+            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+            </Typography>
+          </View>
+        </Row>
+        {subtitle && (
+          <>
+            <Spacer space={4} />
+            <Row>
+              <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
+                {subtitle}
+              </Typography>
+            </Row>
+            <Spacer space={4} />
+          </>
+        )}
+        <View style={styles.options}>
+          <ScrollView onLayout={handleScrollViewLayout}>
+            <Row distribute="between" onLayout={handleRowLayout}>
+              {[...Array(colSize).keys()].map((i) => (
+                <Col xs={TOTAL_COLUMNS / colSize} key={i}>
+                  <CheckboxGroup
+                    items={items.slice(i * rowLength, (i + 1) * rowLength)}
+                    checkedIds={checkedIds}
+                    onChange={(e) => setCheckedIds(e, i)}
+                  />
+                  <Spacer size={4} />
+                </Col>
+              ))}
+            </Row>
+          </ScrollView>
+        </View>
+      </View>
+    )
+
+    const controlsContent = (
+      <>
+        {isScrolling ? (
+          <Divider tokens={selectDividerTokens(themeTokens)} space={4} />
+        ) : (
+          <Spacer space={4} />
+        )}
+        <View style={selectControlsTokens(restTokens)}>
+          <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
+            <StackView
+              direction={buttonDirection}
+              space={3}
+              tokens={{
+                alignItems: 'center',
+                ...(viewport === 'xs' && { flexGrow: 1 })
+              }}
+            >
+              <Button
+                onPress={() => onApply(checkedIds)}
+                variant={{
+                  priority: 'high',
+                  ...(viewport === 'xs' && { width: 'full' })
+                }}
+              >
+                {getCopy('applyButtonLabel')}
+              </Button>
+              <Box>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
+              </Box>
+            </StackView>
+          </Row>
+        </View>
+      </>
+    )
+
     return (
       <>
         <ButtonDropdown
@@ -187,139 +321,53 @@ const MultiSelectFilter = React.forwardRef(
           inactive={inactive}
         />
         {isOpen && viewport === 'xs' && (
-          <Modal isOpen={isOpen} onClose={onClose} ref={ref}>
-            <Row>
-              <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-              </Typography>
-            </Row>
-            {subtitle && (
-              <>
-                <Spacer space={5} />
-                <Row>
-                  <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
-                    {subtitle}
-                  </Typography>
-                </Row>
-              </>
-            )}
-            <Spacer space={4} />
-            <Box scroll={true}>
-              <Row distribute="between">
-                {[...Array(colSize).keys()].map((i) => (
-                  <Col xs={12 / colSize} key={i}>
-                    <CheckboxGroup
-                      items={items.slice(i * rowLength, (i + 1) * rowLength)}
-                      checkedIds={checkedIds}
-                      onChange={(e) => setCheckedIds(e, i)}
-                    />
-                    <Spacer size={4} />
-                  </Col>
-                ))}
-              </Row>
-            </Box>
-            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-            <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
-              <StackView
-                direction={buttonDirection}
-                space={3}
-                tokens={{
-                  alignItems: 'center',
-                  ...(viewport === 'xs' && { flexGrow: 1 })
-                }}
-              >
-                <Button
-                  onPress={() => onApply(checkedIds)}
-                  variant={{
-                    size: 'small',
-                    priority: 'high',
-                    ...(viewport === 'xs' && { width: 'full' })
-                  }}
-                >
-                  {getCopy('applyButtonLabel')}
-                </Button>
-                <Box>
-                  <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
-                </Box>
-              </StackView>
-            </Row>
-          </Modal>
+          <ModalOverlay
+            overlaidPosition={{ top: 0, left: 0 }}
+            onClose={onClose}
+            maxHeight={true}
+            maxHeightSize={windowHeight}
+            maxWidthSize={windowWidth}
+            minHeight={windowHeight}
+            minWidth={windowWidth}
+            tokens={{
+              ...tokens,
+              maxWidth: true
+            }}
+            copy={copy}
+            isReady={isReady}
+            onLayout={onTargetLayout}
+            ref={modalRef}
+            enableFullscreen
+          >
+            <SafeAreaView
+              style={[selectContainerStyle(windowHeight, windowWidth), styles.content]}
+              ref={ref}
+            >
+              {headerContent}
+              <View style={styles.controls}>{controlsContent}</View>
+            </SafeAreaView>
+          </ModalOverlay>
         )}
         {isOpen && viewport !== 'xs' && (
           <ModalOverlay
             overlaidPosition={overlaidPosition}
             onClose={onClose}
-            maxHeight={maxHeight}
+            maxHeight={items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight}
             maxHeightSize={maxHeightSize}
             maxWidthSize={maxWidthSize}
             minHeight={minHeight}
             minWidth={minWidth}
             tokens={{
               ...tokens,
-              maxWidth
+              maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
             }}
             copy={copy}
             isReady={isReady}
             onLayout={onTargetLayout}
             ref={ref}
           >
-            <Row>
-              <View style={styles.textContainerStyle}>
-                <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-                  {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-                </Typography>
-              </View>
-            </Row>
-            {subtitle && (
-              <>
-                <Spacer space={5} />
-                <Row>
-                  <Typography tokens={{ ...subeHeaderStyles, lineHeight: subHeaderLineHeight }}>
-                    {subtitle}
-                  </Typography>
-                </Row>
-              </>
-            )}
-            <Spacer space={4} />
-            <Box scroll={true}>
-              <Row distribute="between">
-                {[...Array(colSize).keys()].map((i) => (
-                  <Col xs={12 / colSize} key={i}>
-                    <CheckboxGroup
-                      items={items.slice(i * rowLength, (i + 1) * rowLength)}
-                      checkedIds={checkedIds}
-                      onChange={(e) => setCheckedIds(e, i)}
-                    />
-                    <Spacer size={4} />
-                  </Col>
-                ))}
-              </Row>
-            </Box>
-            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-            <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
-              <StackView
-                direction={buttonDirection}
-                space={3}
-                tokens={{
-                  alignItems: 'center',
-                  ...(viewport === 'xs' && { flexGrow: 1 })
-                }}
-              >
-                <Button
-                  onPress={() => onApply(checkedIds)}
-                  variant={{
-                    size: 'small',
-                    priority: 'high',
-                    ...(viewport === 'xs' && { width: 'full' })
-                  }}
-                >
-                  {getCopy('applyButtonLabel')}
-                </Button>
-                <Box>
-                  <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
-                </Box>
-              </StackView>
-            </Row>
+            {headerContent}
+            {controlsContent}
           </ModalOverlay>
         )}
       </>
@@ -330,7 +378,21 @@ const MultiSelectFilter = React.forwardRef(
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 
 const styles = StyleSheet.create({
-  textContainerStyle: { marginRight: 52 }
+  container: { flex: 1 },
+  controls: Platform.select({
+    web: {},
+    default: {
+      flex: 0.35
+    }
+  }),
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent'
+  },
+  options: {
+    flex: 1
+  }
 })
 
 // If a language dictionary entry is provided, it must contain every key

package/src/Notification/Notification.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, Platform } from 'react-native'
 
 import PropTypes from 'prop-types'
 import {
@@ -162,7 +162,8 @@ const getMediaQueryStyles = (
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection:
+        (system === true && viewport === 'xl') || Platform.OS === 'android' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -241,7 +242,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = React.forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
+  ({ children, system, dismissible, copy = 'en', tokens, variant, onDismiss, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = React.useState(false)
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
@@ -310,7 +311,10 @@ const Notification = React.forwardRef(
       dismissIconColor
     } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport]
 
-    const onDismissPress = () => setIsDismissed(true)
+    const onDismissPress = () => {
+      setIsDismissed(true)
+      onDismiss?.()
+    }
 
     return (
       <View
@@ -407,6 +411,10 @@ Notification.propTypes = {
     PropTypes.oneOf(['en', 'fr']),
     PropTypes.shape({ dismiss: PropTypes.string })
   ]),
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: PropTypes.func,
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 }

package/src/Status/Status.jsx

@@ -63,14 +63,21 @@ const selectIconProps = ({ icon, iconColor }) => ({
   variant: { size: 'small' }
 })
 
-const selectTextStyles = ({ textColor, textLineHeight, fontName, fontSize, fontWeight }) =>
+const selectTextStyles = ({
+  textColor,
+  textLineHeight,
+  fontName,
+  fontSize,
+  fontWeight,
+  marginLeft
+}) =>
   applyTextStyles({
     fontColor: textColor,
     fontName,
     fontSize,
     fontWeight,
     lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
-    marginLeft: 8
+    marginLeft
   })
 
 /**
@@ -81,18 +88,22 @@ const selectTextStyles = ({ textColor, textLineHeight, fontName, fontSize, fontW
  * @param {string} variant - The variant of the status component.
  * @param {ReactNode} children - The content to be displayed inside the status component.
  * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {elementType} customGradient - Defines an icon to be rendered.
  * @param {object} rest - The rest of the props to be applied to the status component.
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
  */
 const Status = React.forwardRef(({ tokens, variant, children, customGradient, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Status', tokens, variant)
+  const { icon } = themeTokens
   const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
 
   let content = (
     <>
-      <Icon {...selectIconProps(themeTokens)} />
-      {wrapStringsInText(children, { style: selectTextStyles(themeTokens) })}
+      {icon ? <Icon {...selectIconProps(themeTokens)} /> : null}
+      {wrapStringsInText(children, {
+        style: selectTextStyles(themeTokens)
+      })}
     </>
   )
   if (typeof customGradient === 'function') {