@telus-uds/components-base 1.73.0 → 1.75.0

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/Responsive/Responsive.js

@@ -21,6 +21,7 @@ const Responsive = _ref => {
   let {
     min = 'xs',
     max,
+    inheritedStyles = [],
     children
   } = _ref;
   const {
@@ -30,6 +31,7 @@ const Responsive = _ref => {
   } = useTheme();
   if (enableMediaQueryStyleSheet) {
     return /*#__PURE__*/_jsx(ResponsiveWithMediaQueryStyleSheet, {
+      inheritedStyles: inheritedStyles,
       min: min,
       max: max,
       children: children
@@ -51,6 +53,12 @@ Responsive.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  /**
+   * Styles to be inherited by `Responsive`.
+   * It should be an array of style property names.
+   * Note: This prop is only applicable when `enableMediaQueryStylesheet` is set to true in the `ThemeProvider`.
+   */
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 };
 export default Responsive;

package/lib-module/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -28,6 +28,7 @@ const ResponsiveWithMediaQueryStyleSheet = _ref => {
   let {
     min,
     max,
+    inheritedStyles = [],
     children
   } = _ref;
   const {
@@ -35,9 +36,10 @@ const ResponsiveWithMediaQueryStyleSheet = _ref => {
     styles
   } = StyleSheet.create({
     responsive: {
-      flexDirection: 'inherit',
-      alignItems: 'inherit',
-      justifyContent: 'inherit',
+      ...inheritedStyles.reduce((acc, prop) => {
+        acc[prop] = 'inherit';
+        return acc;
+      }, {}),
       ...generateResponsiveStyles(min, max)
     }
   });
@@ -59,6 +61,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 };
 export default ResponsiveWithMediaQueryStyleSheet;

package/lib-module/Typography/Typography.js

@@ -61,7 +61,9 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     enableMediaQueryStyleSheet
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Typography', tokens, variant);
+  const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
   let textStyles;

package/lib-module/index.js

@@ -17,6 +17,7 @@ export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
 export { default as Feedback } from './Feedback';
 export { default as Fieldset } from './Fieldset';
 export { default as FlexGrid } from './FlexGrid';
+export { default as Footnote } from './Footnote';
 export { default as HorizontalScroll } from './HorizontalScroll';
 export * from './HorizontalScroll';
 export { default as Icon } from './Icon';

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.49.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.73.0"
+  "version": "1.75.0"
 }

package/src/ExpandCollapse/Panel.jsx

@@ -168,7 +168,7 @@ const ExpandCollapsePanel = forwardRef(
               })
             }}
           >
-            <View style={selectContainerStyles(themeTokens)}>{isExpanded ? children : null}</View>
+            <View style={selectContainerStyles(themeTokens)}>{children}</View>
           </View>
         </Animated.View>
       </View>