@telus-uds/components-base 1.74.0 → 1.75.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 18 Jan 2024 22:43:26 GMT and should not be manually modified.
+This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.75.0
+
+Mon, 29 Jan 2024 18:26:01 GMT
+
+### Minor changes
+
+- Styles changed in notification component to be SSR (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.50.1
+
 ## 1.74.0
 
-Thu, 18 Jan 2024 22:43:26 GMT
+Thu, 18 Jan 2024 22:55:53 GMT
 
 ### Minor changes
 

package/lib/Notification/Notification.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
@@ -75,6 +74,156 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = maxWidth => ({
   width: maxWidth || '100%'
 });
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
+    let [vp, viewportTokens] = _ref5;
+    acc[vp] = selectContainerStyles({
+      ...viewportTokens
+    });
+    return acc;
+  }, {});
+  const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
+  const {
+    ids: containerIds,
+    styles: containerStyles
+  } = _utils.StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      ...selectContainerMediaQueryStyles
+    }
+  });
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = _utils.StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...(0, _utils.createMediaQueryStyles)({
+        xs: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+        },
+        md: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+        },
+        lg: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+        },
+        sm: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+        },
+        xl: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+        }
+      })
+    }
+  });
+  const {
+    ids: staticContentContainerIds,
+    styles: staticContentContainerStyles
+  } = _utils.StyleSheet.create({
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  });
+  const {
+    ids: iconContainerIds,
+    styles: iconContainerStyles
+  } = _utils.StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: dismissButtonContainerIds,
+    styles: dismissButtonContainerStyles
+  } = _utils.StyleSheet.create({
+    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: textIds,
+    styles: textStyles
+  } = _utils.StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  });
+  const {
+    styles: selectIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  });
+  const {
+    styles: selectDismissIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  };
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  };
+};
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: {
+      flexDirection: 'row',
+      ...selectContainerStyles(themeTokens)
+    }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  },
+  iconContainerStyles: {
+    iconContainer: {
+      ...selectIconContainerStyles(themeTokens)
+    }
+  },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: {
+      ...selectDismissButtonContainerStyles(themeTokens)
+    }
+  },
+  textStyles: {
+    text: {
+      ...selectTextStyles(themeTokens, themeOptions, dismissible)
+    }
+  },
+  selectIconPropsStyles: {
+    selectIconProps: {
+      ...selectIconProps(themeTokens)
+    }
+  },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: {
+      ...selectDismissIconProps(themeTokens)
+    }
+  }
+});
 
 /**
  * A banner that highlights important messages:
@@ -127,7 +276,7 @@ const selectContentContainerStyle = maxWidth => ({
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   let {
     children,
     system,
@@ -136,13 +285,9 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
-    system,
-    viewport
-  });
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
     copy
@@ -150,42 +295,89 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
-  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Notification', tokens, variant, {
+    system,
+    viewport
+  });
+  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const notificationComponentRef = (0, _react.useRef)({
+    containerStyles: {},
+    contentContainerStyles: {},
+    staticContentContainerStyles: {},
+    iconContainerStyles: {},
+    dismissButtonContainerStyles: {},
+    textStyles: {},
+    selectIconPropsStyles: {},
+    selectDismissIconPropsStyles: {}
+  });
+  const mediaIdsRef = (0, _react.useRef)({
+    containerIds: {},
+    contentContainerIds: {},
+    staticContentContainerIds: {},
+    iconContainerIds: {},
+    dismissButtonContainerIds: {},
+    textIds: {},
+    selectIconPropsIds: {},
+    selectDismissIconPropsIds: {}
+  });
+  if (enableMediaQueryStyleSheet) {
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+  } else {
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+  }
   if (isDismissed) {
     return null;
   }
-  const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible);
   const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
-    textStyles,
+    textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
-    style: textStyles
+    style: notificationComponentRef.current.textStyles.text
   });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent,
     dismissIconColor
-  } = themeTokens;
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => setIsDismissed(true);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
+      dataSet: mediaIdsRef && {
+        media: mediaIdsRef.current.contentContainerIds.contentContainer
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        style: staticStyles.contentContainer,
+        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+        },
         children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectIconContainerStyles(themeTokens),
+          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
+          dataSet: mediaIdsRef && {
+            media: mediaIdsRef.current.iconContainerIds.iconContainer
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-            ...selectIconProps(themeTokens)
+            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
           })
         }), content && typeof content === 'function' ? content({
-          textStyles,
+          textStyles: notificationComponentRef.current.textStyles.text,
           variant
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectDismissButtonContainerStyles(themeTokens),
+        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           action: "close",
           onPress: onDismissPress,
@@ -197,7 +389,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
             size: 'small'
           },
           children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, {
-            ...selectDismissIconProps(themeTokens)
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
           })
         })
       })]
@@ -229,18 +421,4 @@ Notification.propTypes = {
   variant: _utils.variantProp.propType
 };
 var _default = Notification;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});
+exports.default = _default;

package/lib/utils/ssr-media-query/create-stylesheet/index.js

@@ -15,12 +15,11 @@ const createStyleSheet = stylesWithQuery => {
     styles: {},
     fullStyles: {}
   };
-  let cleanStyles;
   let ids = {};
+  const cleanStyles = (0, _common.deepClone)(stylesWithQuery);
   Object.keys(stylesWithQuery).forEach(key => {
     if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
-    cleanStyles = (0, _common.deepClone)(stylesWithQuery);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
       const css = (0, _createDeclarationBlock.default)(stylesWithQuery[key][query]);

package/lib-module/Notification/Notification.js

@@ -1,9 +1,8 @@
-import React, { forwardRef, useState } from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import React, { forwardRef, useState, useRef } from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -67,6 +66,156 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = maxWidth => ({
   width: maxWidth || '100%'
 });
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
+    let [vp, viewportTokens] = _ref5;
+    acc[vp] = selectContainerStyles({
+      ...viewportTokens
+    });
+    return acc;
+  }, {});
+  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
+  const {
+    ids: containerIds,
+    styles: containerStyles
+  } = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      ...selectContainerMediaQueryStyles
+    }
+  });
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...createMediaQueryStyles({
+        xs: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+        },
+        md: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+        },
+        lg: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+        },
+        sm: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+        },
+        xl: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+        }
+      })
+    }
+  });
+  const {
+    ids: staticContentContainerIds,
+    styles: staticContentContainerStyles
+  } = StyleSheet.create({
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  });
+  const {
+    ids: iconContainerIds,
+    styles: iconContainerStyles
+  } = StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: dismissButtonContainerIds,
+    styles: dismissButtonContainerStyles
+  } = StyleSheet.create({
+    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: textIds,
+    styles: textStyles
+  } = StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  });
+  const {
+    styles: selectIconPropsStyles
+  } = StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  });
+  const {
+    styles: selectDismissIconPropsStyles
+  } = StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  };
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  };
+};
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: {
+      flexDirection: 'row',
+      ...selectContainerStyles(themeTokens)
+    }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  },
+  iconContainerStyles: {
+    iconContainer: {
+      ...selectIconContainerStyles(themeTokens)
+    }
+  },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: {
+      ...selectDismissButtonContainerStyles(themeTokens)
+    }
+  },
+  textStyles: {
+    text: {
+      ...selectTextStyles(themeTokens, themeOptions, dismissible)
+    }
+  },
+  selectIconPropsStyles: {
+    selectIconProps: {
+      ...selectIconProps(themeTokens)
+    }
+  },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: {
+      ...selectDismissIconProps(themeTokens)
+    }
+  }
+});
 
 /**
  * A banner that highlights important messages:
@@ -119,7 +268,7 @@ const selectContentContainerStyle = maxWidth => ({
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     children,
     system,
@@ -128,13 +277,9 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isDismissed, setIsDismissed] = useState(false);
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Notification', tokens, variant, {
-    system,
-    viewport
-  });
   const getCopy = useCopy({
     dictionary,
     copy
@@ -142,42 +287,89 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
-  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Notification', tokens, variant, {
+    system,
+    viewport
+  });
+  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const notificationComponentRef = useRef({
+    containerStyles: {},
+    contentContainerStyles: {},
+    staticContentContainerStyles: {},
+    iconContainerStyles: {},
+    dismissButtonContainerStyles: {},
+    textStyles: {},
+    selectIconPropsStyles: {},
+    selectDismissIconPropsStyles: {}
+  });
+  const mediaIdsRef = useRef({
+    containerIds: {},
+    contentContainerIds: {},
+    staticContentContainerIds: {},
+    iconContainerIds: {},
+    dismissButtonContainerIds: {},
+    textIds: {},
+    selectIconPropsIds: {},
+    selectDismissIconPropsIds: {}
+  });
+  if (enableMediaQueryStyleSheet) {
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+  } else {
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+  }
   if (isDismissed) {
     return null;
   }
-  const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible);
   const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles,
+    textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
-    style: textStyles
+    style: notificationComponentRef.current.textStyles.text
   });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent,
     dismissIconColor
-  } = themeTokens;
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => setIsDismissed(true);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
+      dataSet: mediaIdsRef && {
+        media: mediaIdsRef.current.contentContainerIds.contentContainer
+      },
       children: [/*#__PURE__*/_jsxs(View, {
-        style: staticStyles.contentContainer,
+        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+        },
         children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: selectIconContainerStyles(themeTokens),
+          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
+          dataSet: mediaIdsRef && {
+            media: mediaIdsRef.current.iconContainerIds.iconContainer
+          },
           children: /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconProps(themeTokens)
+            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
           })
         }), content && typeof content === 'function' ? content({
-          textStyles,
+          textStyles: notificationComponentRef.current.textStyles.text,
           variant
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-        style: selectDismissButtonContainerStyles(themeTokens),
+        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+        },
         children: /*#__PURE__*/_jsx(IconButton, {
           action: "close",
           onPress: onDismissPress,
@@ -189,7 +381,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
             size: 'small'
           },
           children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
-            ...selectDismissIconProps(themeTokens)
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
           })
         })
       })]
@@ -220,18 +412,4 @@ Notification.propTypes = {
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 };
-export default Notification;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});
+export default Notification;

package/lib-module/utils/ssr-media-query/create-stylesheet/index.js

@@ -8,12 +8,11 @@ const createStyleSheet = stylesWithQuery => {
     styles: {},
     fullStyles: {}
   };
-  let cleanStyles;
   let ids = {};
+  const cleanStyles = deepClone(stylesWithQuery);
   Object.keys(stylesWithQuery).forEach(key => {
     if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
-    cleanStyles = deepClone(stylesWithQuery);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
       const css = createDeclarationBlock(stylesWithQuery[key][query]);

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.50.0",
+    "@telus-uds/system-theme-tokens": "^2.50.1",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,5 +85,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.74.0"
+  "version": "1.75.0"
 }

package/src/Notification/Notification.jsx

@@ -1,8 +1,13 @@
-import React, { forwardRef, useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { forwardRef, useState, useRef } from 'react'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
+import {
+  applyTextStyles,
+  useTheme,
+  useThemeTokens,
+  useResponsiveThemeTokens
+} from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -11,7 +16,9 @@ import {
   variantProp,
   viewProps,
   wrapStringsInText,
-  useResponsiveProp
+  useResponsiveProp,
+  createMediaQueryStyles,
+  StyleSheet
 } from '../utils'
 import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
@@ -61,6 +68,110 @@ const selectContentContainerStyle = (maxWidth) => ({
   width: maxWidth || '100%'
 })
 
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
+    (acc, [vp, viewportTokens]) => {
+      acc[vp] = selectContainerStyles({ ...viewportTokens })
+      return acc
+    },
+    {}
+  )
+
+  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles)
+
+  const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
+    container: { flexDirection: 'row', ...selectContainerMediaQueryStyles }
+  })
+
+  const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...createMediaQueryStyles({
+        xs: { width: themeOptions?.contentMaxWidth.xs || '100%' },
+        md: { width: themeOptions?.contentMaxWidth.md || '100%' },
+        lg: { width: themeOptions?.contentMaxWidth.lg || '100%' },
+        sm: { width: themeOptions?.contentMaxWidth.sm || '100%' },
+        xl: { width: themeOptions?.contentMaxWidth.xl || '100%' }
+      })
+    }
+  })
+
+  const { ids: staticContentContainerIds, styles: staticContentContainerStyles } =
+    StyleSheet.create({
+      staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+    })
+
+  const { ids: iconContainerIds, styles: iconContainerStyles } = StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  })
+
+  const { ids: dismissButtonContainerIds, styles: dismissButtonContainerStyles } =
+    StyleSheet.create({
+      dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+    })
+
+  const { ids: textIds, styles: textStyles } = StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  })
+
+  const { styles: selectIconPropsStyles } = StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  })
+
+  const { styles: selectDismissIconPropsStyles } = StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  })
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  }
+
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  }
+}
+
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: { flexDirection: 'row', ...selectContainerStyles(themeTokens) }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+  },
+  iconContainerStyles: { iconContainer: { ...selectIconContainerStyles(themeTokens) } },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: { ...selectDismissButtonContainerStyles(themeTokens) }
+  },
+  textStyles: { text: { ...selectTextStyles(themeTokens, themeOptions, dismissible) } },
+  selectIconPropsStyles: { selectIconProps: { ...selectIconProps(themeTokens) } },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: { ...selectDismissIconProps(themeTokens) }
+  }
+})
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -116,43 +227,121 @@ const Notification = forwardRef(
   ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Notification', tokens, variant, { system, viewport })
     const getCopy = useCopy({ dictionary, copy })
+
     const { themeOptions } = useTheme()
-    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const { enableMediaQueryStyleSheet } = themeOptions
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
+    const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+
+    const notificationComponentRef = useRef({
+      containerStyles: {},
+      contentContainerStyles: {},
+      staticContentContainerStyles: {},
+      iconContainerStyles: {},
+      dismissButtonContainerStyles: {},
+      textStyles: {},
+      selectIconPropsStyles: {},
+      selectDismissIconPropsStyles: {}
+    })
+    const mediaIdsRef = useRef({
+      containerIds: {},
+      contentContainerIds: {},
+      staticContentContainerIds: {},
+      iconContainerIds: {},
+      dismissButtonContainerIds: {},
+      textIds: {},
+      selectIconPropsIds: {},
+      selectDismissIconPropsIds: {}
+    })
+
+    if (enableMediaQueryStyleSheet) {
+      notificationComponentRef.current = getMediaQueryStyles(
+        themeTokens,
+        themeOptions,
+        viewport,
+        mediaIdsRef,
+        dismissible
+      )
+    } else {
+      notificationComponentRef.current = getDefaultStyles(
+        themeTokens,
+        themeOptions,
+        maxWidth,
+        dismissible
+      )
+    }
 
     if (isDismissed) {
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible)
-
     const content = wrapStringsInText(
-      typeof children === 'function' ? children({ textStyles, variant }) : children,
-      { style: textStyles }
+      typeof children === 'function'
+        ? children({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+        : children,
+      { style: notificationComponentRef.current.textStyles.text }
     )
 
-    const { icon: IconComponent, dismissIcon: DismissIconComponent, dismissIconColor } = themeTokens
+    const {
+      icon: IconComponent,
+      dismissIcon: DismissIconComponent,
+      dismissIconColor
+    } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport]
 
     const onDismissPress = () => setIsDismissed(true)
 
     return (
       <View
         ref={ref}
-        style={[staticStyles.container, selectContainerStyles(themeTokens)]}
+        style={notificationComponentRef.current.containerStyles.container}
+        dataSet={mediaIdsRef && { media: mediaIdsRef.current.containerIds.container }}
         {...selectProps(rest)}
       >
-        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
-          <View style={staticStyles.contentContainer}>
+        <View
+          style={notificationComponentRef.current.contentContainerStyles.contentContainer}
+          dataSet={
+            mediaIdsRef && { media: mediaIdsRef.current.contentContainerIds.contentContainer }
+          }
+        >
+          <View
+            style={
+              notificationComponentRef.current.staticContentContainerStyles.staticContentContainer
+            }
+            dataSet={
+              mediaIdsRef && {
+                media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+              }
+            }
+          >
             {IconComponent && (
-              <View style={selectIconContainerStyles(themeTokens)}>
-                <IconComponent {...selectIconProps(themeTokens)} />
+              <View
+                style={notificationComponentRef.current.iconContainerStyles.iconContainer}
+                dataSet={
+                  mediaIdsRef && { media: mediaIdsRef.current.iconContainerIds.iconContainer }
+                }
+              >
+                <IconComponent
+                  {...notificationComponentRef.current.selectIconPropsStyles.selectIconProps}
+                />
               </View>
             )}
-            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+            {content && typeof content === 'function'
+              ? content({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+              : content}
           </View>
           {dismissible && DismissIconComponent && (
-            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+            <View
+              style={
+                notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer
+              }
+              dataSet={
+                mediaIdsRef && {
+                  media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+                }
+              }
+            >
               <IconButton
                 action="close"
                 onPress={onDismissPress}
@@ -161,7 +350,12 @@ const Notification = forwardRef(
                 accessibilityLabel={getCopy('dismiss')}
                 variant={{ inverse: dismissIconColor === '#ffffff', size: 'small' }}
               >
-                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+                {() => (
+                  <DismissIconComponent
+                    {...notificationComponentRef.current.selectDismissIconPropsStyles
+                      .selectDismissIconProps}
+                  />
+                )}
               </IconButton>
             </View>
           )}
@@ -198,18 +392,3 @@ Notification.propTypes = {
 }
 
 export default Notification
-
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-})

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -5,13 +5,14 @@ import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
 
 const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
-  let cleanStyles
+
   let ids = {}
+  const cleanStyles = deepClone(stylesWithQuery)
+
   Object.keys(stylesWithQuery).forEach((key) => {
     if (!stylesWithQuery?.[key]) return
 
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
-    cleanStyles = deepClone(stylesWithQuery)
     mediaQueriesAndPseudoClasses.forEach((query) => {
       const css = createDeclarationBlock(stylesWithQuery[key][query])
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`