@telus-uds/components-base 1.73.0 → 1.75.0

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

@@ -26,6 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   let {
     min = 'xs',
     max,
+    inheritedStyles = [],
     children
   } = _ref;
   const {
@@ -35,6 +36,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   } = (0, _ThemeProvider.useTheme)();
   if (enableMediaQueryStyleSheet) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveWithMediaQueryStyleSheet.default, {
+      inheritedStyles: inheritedStyles,
       min: min,
       max: max,
       children: children
@@ -56,6 +58,12 @@ Responsive.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: _propTypes.default.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.default.arrayOf(_propTypes.default.string),
   children: _propTypes.default.node.isRequired
 };
 var _default = Responsive;

package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js

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

package/lib/Typography/Typography.js

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

package/lib/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   Feedback: true,
   Fieldset: true,
   FlexGrid: true,
+  Footnote: true,
   HorizontalScroll: true,
   Icon: true,
   IconButton: true,
@@ -182,6 +183,12 @@ Object.defineProperty(exports, "FlexGrid", {
     return _FlexGrid.default;
   }
 });
+Object.defineProperty(exports, "Footnote", {
+  enumerable: true,
+  get: function () {
+    return _Footnote.default;
+  }
+});
 Object.defineProperty(exports, "HorizontalScroll", {
   enumerable: true,
   get: function () {
@@ -539,6 +546,7 @@ var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
 var _Feedback = _interopRequireDefault(require("./Feedback"));
 var _Fieldset = _interopRequireDefault(require("./Fieldset"));
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+var _Footnote = _interopRequireDefault(require("./Footnote"));
 var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
 Object.keys(_HorizontalScroll).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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/ExpandCollapse/Panel.js

@@ -166,7 +166,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
-          children: isExpanded ? children : null
+          children: children
         })
       })
     })]