@telus-uds/components-base 1.93.0 → 1.95.0

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import { Portal } from '@gorhom/portal';
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
@@ -15,10 +16,32 @@ 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',
     top: 0,
@@ -31,6 +54,17 @@ const staticStyles = StyleSheet.create({
     opacity: 0
   }
 });
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ...Platform.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+});
 const selectCloseButtonContainerStyles = _ref => {
   let {
     paddingRight,
@@ -41,20 +75,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const selectPaddingContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  } = _ref2;
-  return {
-    paddingBottom: 35,
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  };
-};
-const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -68,22 +89,19 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     variant,
     tokens,
     copy,
-    onClose
-  } = _ref3;
+    onClose,
+    enableFullscreen = false
+  } = _ref2;
   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
@@ -97,9 +115,9 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/_jsx(View, {
       ref: ref,
       onLayout: onLayout,
-      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden],
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/_jsxs(Card, {
-        tokens: selectPaddingContainerStyles(themeTokens),
+        tokens: staticStyles.card,
         children: [/*#__PURE__*/_jsx(View, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/_jsx(IconButton, {
@@ -132,6 +150,7 @@ ModalOverlay.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  enableFullscreen: PropTypes.bool
 };
 export default ModalOverlay;

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -2,8 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
 import defaultDictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
@@ -16,7 +20,6 @@ import StackView from '../StackView';
 import Typography from '../Typography';
 import { TextButton } from '../Link';
 import ModalOverlay from './ModalOverlay';
-import Modal from '../Modal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,21 +35,54 @@ const selectSubTitleTokens = _ref => {
     color: subtitleColor
   };
 };
-const selectDividerToknes = _ref2 => {
+const selectDividerTokens = _ref2 => {
   let {
-    dividerColor,
-    width,
-    decorative = true,
-    weight = 'thin'
+    dividerColor
   } = _ref2;
   return {
-    color: dividerColor,
-    width,
-    decorative,
-    weight
+    color: dividerColor
   };
 };
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const selectHeaderTokens = _ref3 => {
+  let {
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref3;
+  return {
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    flexGrow: 1
+  };
+};
+const selectControlsTokens = _ref4 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref4;
+  return {
+    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 = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     label,
     subtitle,
@@ -68,7 +104,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     rowLimit = 12,
     dictionary = defaultDictionary,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const viewport = useViewport();
   const {
     currentValues,
@@ -112,7 +148,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     maxWidthSize,
     subHeaderLineHeight,
     minHeight,
-    minWidth
+    minWidth,
+    ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
@@ -190,21 +227,35 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     offsets,
     align
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: sourceRef,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
-      isOpen: isOpen,
-      onClose: onClose,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx(Row, {
+  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 = /*#__PURE__*/_jsxs(View, {
+    style: [selectHeaderTokens(restTokens), styles.container],
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsx(View, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             ...headerStyles,
@@ -212,26 +263,30 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
-      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Spacer, {
-          space: 5
-        }), /*#__PURE__*/_jsx(Row, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
+      })
+    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            ...subeHeaderStyles,
+            lineHeight: subHeaderLineHeight
+          },
+          children: subtitle
+        })
       }), /*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/_jsx(Box, {
-        scroll: true,
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.options,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onLayout: handleScrollViewLayout,
         children: /*#__PURE__*/_jsx(Row, {
           distribute: "between",
+          onLayout: handleRowLayout,
           children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: 12 / colSize,
+            xs: TOTAL_COLUMNS / colSize,
             children: [/*#__PURE__*/_jsx(CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
@@ -241,13 +296,18 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             })]
           }, i))
         })
-      }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
+      })
+    })]
+  });
+  const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
+      tokens: selectDividerTokens(themeTokens),
+      space: 4
+    }) : /*#__PURE__*/_jsx(Spacer, {
+      space: 4
+    }), /*#__PURE__*/_jsx(View, {
+      style: selectControlsTokens(restTokens),
+      children: /*#__PURE__*/_jsx(Row, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/_jsxs(StackView, {
           direction: buttonDirection,
@@ -261,7 +321,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           children: [/*#__PURE__*/_jsx(Button, {
             onPress: () => onApply(checkedIds),
             variant: {
-              size: 'small',
               priority: 'high',
               ...(viewport === 'xs' && {
                 width: 'full'
@@ -275,105 +334,85 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             })
           })]
         })
-      })]
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: sourceRef,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsx(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: true,
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
+        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
+        ref: ref,
+        children: [headerContent, /*#__PURE__*/_jsx(View, {
+          style: styles.controls,
+          children: controlsContent
+        })]
+      })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(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,
-      children: [/*#__PURE__*/_jsx(Row, {
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.textContainerStyle,
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...headerStyles,
-              lineHeight: headerLineHeight
-            },
-            children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-          })
-        })
-      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Spacer, {
-          space: 5
-        }), /*#__PURE__*/_jsx(Row, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      }), /*#__PURE__*/_jsx(Box, {
-        scroll: true,
-        children: /*#__PURE__*/_jsx(Row, {
-          distribute: "between",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
-              items: items.slice(i * rowLength, (i + 1) * rowLength),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/_jsx(Spacer, {
-              size: 4
-            })]
-          }, i))
-        })
-      }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
-        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/_jsxs(StackView, {
-          direction: buttonDirection,
-          space: 3,
-          tokens: {
-            alignItems: 'center',
-            ...(viewport === 'xs' && {
-              flexGrow: 1
-            })
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              size: 'small',
-              priority: 'high',
-              ...(viewport === 'xs' && {
-                width: 'full'
-              })
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: onClear,
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })]
+      children: [headerContent, controlsContent]
     })]
   });
 });
 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
   }
 });
 

package/lib-module/Notification/Notification.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
@@ -176,7 +177,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 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)
     }
   },
@@ -281,6 +282,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    onDismiss,
     ...rest
   } = _ref6;
   const [isDismissed, setIsDismissed] = React.useState(false);
@@ -340,7 +342,10 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     dismissIcon: DismissIconComponent,
     dismissIconColor
   } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
-  const onDismissPress = () => setIsDismissed(true);
+  const onDismissPress = () => {
+    setIsDismissed(true);
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+  };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: notificationComponentRef.current.containerStyles.container,
@@ -414,6 +419,10 @@ Notification.propTypes = {
   copy: PropTypes.oneOfType([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/lib-module/Status/Status.js

@@ -75,7 +75,8 @@ const selectTextStyles = _ref3 => {
     textLineHeight,
     fontName,
     fontSize,
-    fontWeight
+    fontWeight,
+    marginLeft
   } = _ref3;
   return applyTextStyles({
     fontColor: textColor,
@@ -83,7 +84,7 @@ const selectTextStyles = _ref3 => {
     fontSize,
     fontWeight,
     lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
-    marginLeft: 8
+    marginLeft
   });
 };
 
@@ -95,6 +96,7 @@ const selectTextStyles = _ref3 => {
  * @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.
@@ -108,14 +110,17 @@ const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     ...rest
   } = _ref4;
   const themeTokens = useThemeTokens('Status', tokens, variant);
+  const {
+    icon
+  } = themeTokens;
   const containerStyles = {
     ...selectContainerStyles(themeTokens),
     ...staticStyles.container
   };
   let content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Icon, {
+    children: [icon ? /*#__PURE__*/_jsx(Icon, {
       ...selectIconProps(themeTokens)
-    }), wrapStringsInText(children, {
+    }) : null, wrapStringsInText(children, {
       style: selectTextStyles(themeTokens)
     })]
   });