@telus-uds/components-base 1.93.0 → 1.95.0

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _portal = require("@gorhom/portal");
 var _utils = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
@@ -21,10 +22,32 @@ const staticStyles = _StyleSheet.default.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.default.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,
@@ -37,6 +60,17 @@ const staticStyles = _StyleSheet.default.create({
     opacity: 0
   }
 });
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ..._Platform.default.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+});
 const selectCloseButtonContainerStyles = _ref => {
   let {
     paddingRight,
@@ -47,20 +81,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const selectPaddingContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  } = _ref2;
-  return {
-    paddingBottom: 35,
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  };
-};
-const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -74,22 +95,19 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     variant,
     tokens,
     copy,
-    onClose
-  } = _ref3;
+    onClose,
+    enableFullscreen = false
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.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
@@ -103,9 +121,9 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       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__*/(0, _jsxRuntime.jsxs)(_Card.default, {
-        tokens: selectPaddingContainerStyles(themeTokens),
+        tokens: staticStyles.card,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -138,7 +156,8 @@ ModalOverlay.propTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Modal'),
   copy: _utils.copyPropTypes,
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  enableFullscreen: _propTypes.default.bool
 };
 var _default = ModalOverlay;
 exports.default = _default;

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -8,6 +8,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -22,7 +26,6 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _Link = require("../Link");
 var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
-var _Modal = _interopRequireDefault(require("../Modal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const {
@@ -37,21 +40,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.default.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.default.forwardRef((_ref5, ref) => {
   let {
     label,
     subtitle,
@@ -73,7 +109,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     rowLimit = 12,
     dictionary = _dictionary.default,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     currentValues,
@@ -117,7 +153,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     maxWidthSize,
     subHeaderLineHeight,
     minHeight,
-    minWidth
+    minWidth,
+    ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
@@ -195,21 +232,35 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     offsets,
     align
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: sourceRef,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-      isOpen: isOpen,
-      onClose: onClose,
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+  const [isScrolling, setIsScrolling] = _react.default.useState(false);
+  const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
+  const [rowHeight, setRowHeight] = _react.default.useState(0);
+  const modalRef = (0, _utils.useScrollBlocking)(isOpen);
+  const windowWidth = _Dimensions.default.get('window').width;
+  const windowHeight = _Dimensions.default.get('window').height;
+  _react.default.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [selectHeaderTokens(restTokens), styles.container],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           tokens: {
             ...headerStyles,
@@ -217,26 +268,30 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-          space: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
+      })
+    }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          tokens: {
+            ...subeHeaderStyles,
+            lineHeight: subHeaderLineHeight
+          },
+          children: subtitle
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        scroll: true,
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: styles.options,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        onLayout: handleScrollViewLayout,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
           distribute: "between",
+          onLayout: handleRowLayout,
           children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
-            xs: 12 / colSize,
+            xs: TOTAL_COLUMNS / colSize,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
@@ -246,13 +301,18 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             })]
           }, i))
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      })
+    })]
+  });
+  const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isScrolling ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      tokens: selectDividerTokens(themeTokens),
+      space: 4
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 4
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectControlsTokens(restTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
           direction: buttonDirection,
@@ -266,7 +326,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onPress: () => onApply(checkedIds),
             variant: {
-              size: 'small',
               priority: 'high',
               ...(viewport === 'xs' && {
                 width: 'full'
@@ -280,105 +339,85 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             })
           })]
         })
-      })]
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: sourceRef,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalOverlay.default, {
+      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__*/(0, _jsxRuntime.jsxs)(_SafeAreaView.default, {
+        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
+        ref: ref,
+        children: [headerContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: styles.controls,
+          children: controlsContent
+        })]
+      })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       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__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: styles.textContainerStyle,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...headerStyles,
-              lineHeight: headerLineHeight
-            },
-            children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-          })
-        })
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-          space: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        scroll: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          distribute: "between",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
-              items: items.slice(i * rowLength, (i + 1) * rowLength),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-              size: 4
-            })]
-          }, i))
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-          direction: buttonDirection,
-          space: 3,
-          tokens: {
-            alignItems: 'center',
-            ...(viewport === 'xs' && {
-              flexGrow: 1
-            })
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              size: 'small',
-              priority: 'high',
-              ...(viewport === 'xs' && {
-                width: 'full'
-              })
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: onClear,
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })]
+      children: [headerContent, controlsContent]
     })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = _StyleSheet.default.create({
-  textContainerStyle: {
-    marginRight: 52
+  container: {
+    flex: 1
+  },
+  controls: _Platform.default.select({
+    web: {},
+    default: {
+      flex: 0.35
+    }
+  }),
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent'
+  },
+  options: {
+    flex: 1
   }
 });
 

package/lib/Notification/Notification.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -182,7 +183,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.default.OS === 'android' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -287,6 +288,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    onDismiss,
     ...rest
   } = _ref6;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
@@ -346,7 +348,10 @@ const Notification = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: notificationComponentRef.current.containerStyles.container,
@@ -420,6 +425,10 @@ Notification.propTypes = {
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     dismiss: _propTypes.default.string
   })]),
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Notification'),
   variant: _utils.variantProp.propType
 };

package/lib/Status/Status.js

@@ -80,7 +80,8 @@ const selectTextStyles = _ref3 => {
     textLineHeight,
     fontName,
     fontSize,
-    fontWeight
+    fontWeight,
+    marginLeft
   } = _ref3;
   return (0, _ThemeProvider.applyTextStyles)({
     fontColor: textColor,
@@ -88,7 +89,7 @@ const selectTextStyles = _ref3 => {
     fontSize,
     fontWeight,
     lineHeight: _Platform.default.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
-    marginLeft: 8
+    marginLeft
   });
 };
 
@@ -100,6 +101,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.
@@ -113,14 +115,17 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     ...rest
   } = _ref4;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const {
+    icon
+  } = themeTokens;
   const containerStyles = {
     ...selectContainerStyles(themeTokens),
     ...staticStyles.container
   };
   let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       ...selectIconProps(themeTokens)
-    }), (0, _utils.wrapStringsInText)(children, {
+    }) : null, (0, _utils.wrapStringsInText)(children, {
       style: selectTextStyles(themeTokens)
     })]
   });