@telus-uds/components-base 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 08 Nov 2022 01:32:09 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Nov 2022 21:41:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.21.0
+
+Wed, 23 Nov 2022 21:41:19 GMT
+
+### Minor changes
+
+- Export useHydrationContext, add enableHelmetSSR opt-out (alan.slater@nearform.com)
+
+### Patches
+
+- fix: enforce specific font weight rule application (ruslan.bredikhin@nearform.com)
+
 ## 1.20.0
 
-Tue, 08 Nov 2022 01:32:09 GMT
+Tue, 08 Nov 2022 01:35:30 GMT
 
 ### Minor changes
 

package/__tests17__/ThemeProvider/ThemeProvider.test.jsx

@@ -17,6 +17,7 @@ const theme = {
   },
   components: {},
   themeOptions: {
+    enableHelmetSSR: true,
     forceAbsoluteFontSizing: true,
     forceZIndex: true
   }

package/component-docs.json

@@ -8500,7 +8500,7 @@
         "props": {
           "themeOptions": {
             "defaultValue": {
-              "value": "{ forceAbsoluteFontSizing: true, forceZIndex: true }",
+              "value": "{}",
               "computed": false
             },
             "type": {
@@ -8514,6 +8514,10 @@
                   "name": "bool",
                   "required": false
                 },
+                "enableHelmetSSR": {
+                  "name": "bool",
+                  "required": false
+                },
                 "contentMaxWidth": {
                   "name": "custom",
                   "raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
@@ -8522,7 +8526,7 @@
               }
             },
             "required": false,
-            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width\n- `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`\n  and when true, sets zIndex to be `0` (the default from `react-native-web`)"
+            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width\n- `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`\n  and when true, sets zIndex to be `0` (the default from `react-native-web`)\n- `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be\n  disabled unless a web app has been specifically configured to stop React Helmet accumulating\n  instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet"
           },
           "children": {
             "type": {

package/lib/ThemeProvider/ThemeProvider.js

@@ -25,21 +25,29 @@ const uninitialisedError = new Error('Theme context used outside of ThemeProvide
 exports.uninitialisedError = uninitialisedError;
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
+
 exports.ThemeSetterContext = ThemeSetterContext;
+const defaultThemeOptions = {
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  forceAbsoluteFontSizing: true,
+  // TODO: switch `forceZIndex` to be false by default in the next major version
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+};
 
 const ThemeProvider = _ref => {
   let {
     children,
     defaultTheme,
-    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-    // TODO: switch `forceZIndex` to be false by default in the next major version
-    themeOptions = {
-      forceAbsoluteFontSizing: true,
-      forceZIndex: true
-    }
+    themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  const appliedThemeOptions = { ...defaultThemeOptions,
+    ...themeOptions
+  }; // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
 
@@ -48,7 +56,7 @@ const ThemeProvider = _ref => {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
       value: { ...theme,
-        themeOptions
+        themeOptions: appliedThemeOptions
       },
       children: children
     })
@@ -73,10 +81,14 @@ ThemeProvider.propTypes = {
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
    * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
    *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
+   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
+   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
+   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    */
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
     forceZIndex: _propTypes.default.bool,
+    enableHelmetSSR: _propTypes.default.bool,
     contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
   })
 };

package/lib/ThemeProvider/utils/styles.js

@@ -59,7 +59,9 @@ function applyTextStyles(_ref) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
     styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
-  } else if (fontWeight) {
+  }
+
+  if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = _Platform.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;

package/lib/index.js

@@ -50,6 +50,7 @@ var _exportNames = {
   A11yInfoProvider: true,
   useA11yInfo: true,
   BaseProvider: true,
+  useHydrationContext: true,
   ViewportProvider: true,
   useViewport: true,
   ViewportContext: true,
@@ -387,6 +388,12 @@ Object.defineProperty(exports, "useA11yInfo", {
     return _A11yInfoProvider.useA11yInfo;
   }
 });
+Object.defineProperty(exports, "useHydrationContext", {
+  enumerable: true,
+  get: function () {
+    return _HydrationContext.useHydrationContext;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -636,6 +643,8 @@ var _A11yInfoProvider = _interopRequireWildcard(require("./A11yInfoProvider"));
 
 var _BaseProvider = _interopRequireDefault(require("./BaseProvider"));
 
+var _HydrationContext = require("./BaseProvider/HydrationContext");
+
 var _ViewportProvider = _interopRequireWildcard(require("./ViewportProvider"));
 
 var _ThemeProvider = _interopRequireWildcard(require("./ThemeProvider"));

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -5,20 +5,28 @@ import responsiveProps from '../utils/props/responsiveProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
 export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError);
+export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
+
+const defaultThemeOptions = {
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  forceAbsoluteFontSizing: true,
+  // TODO: switch `forceZIndex` to be false by default in the next major version
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+};
 
 const ThemeProvider = _ref => {
   let {
     children,
     defaultTheme,
-    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-    // TODO: switch `forceZIndex` to be false by default in the next major version
-    themeOptions = {
-      forceAbsoluteFontSizing: true,
-      forceZIndex: true
-    }
+    themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
+  const [theme, setTheme] = useState(defaultTheme);
+  const appliedThemeOptions = { ...defaultThemeOptions,
+    ...themeOptions
+  }; // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
 
@@ -27,7 +35,7 @@ const ThemeProvider = _ref => {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
       value: { ...theme,
-        themeOptions
+        themeOptions: appliedThemeOptions
       },
       children: children
     })
@@ -52,10 +60,14 @@ ThemeProvider.propTypes = {
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
    * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
    *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
+   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
+   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
+   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
+    enableHelmetSSR: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 };

package/lib-module/ThemeProvider/utils/styles.js

@@ -45,7 +45,9 @@ export function applyTextStyles(_ref) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
     styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
-  } else if (fontWeight) {
+  }
+
+  if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;

package/lib-module/index.js

@@ -50,6 +50,7 @@ export { default as TooltipButton } from './TooltipButton';
 export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
+export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';

package/package.json

@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.20.0"
+  "version": "1.21.0"
 }

package/src/ThemeProvider/ThemeProvider.jsx

@@ -8,15 +8,22 @@ export const uninitialisedError = new Error('Theme context used outside of Theme
 export const ThemeContext = createContext(uninitialisedError)
 export const ThemeSetterContext = createContext(uninitialisedError)
 
-const ThemeProvider = ({
-  children,
-  defaultTheme,
+// These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
+const defaultThemeOptions = {
   // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  forceAbsoluteFontSizing: true,
   // TODO: switch `forceZIndex` to be false by default in the next major version
-  themeOptions = { forceAbsoluteFontSizing: true, forceZIndex: true }
-}) => {
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+}
+
+const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
   const [theme, setTheme] = useState(defaultTheme)
 
+  const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
+
   // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
@@ -24,7 +31,9 @@ const ThemeProvider = ({
 
   return (
     <ThemeSetterContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={{ ...theme, themeOptions }}>{children}</ThemeContext.Provider>
+      <ThemeContext.Provider value={{ ...theme, themeOptions: appliedThemeOptions }}>
+        {children}
+      </ThemeContext.Provider>
     </ThemeSetterContext.Provider>
   )
 }
@@ -46,10 +55,14 @@ ThemeProvider.propTypes = {
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
    * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
    *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
+   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
+   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
+   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
+    enableHelmetSSR: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 }

package/src/ThemeProvider/utils/styles.js

@@ -45,7 +45,9 @@ export function applyTextStyles({
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
     styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`
-  } else if (fontWeight) {
+  }
+
+  if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight

package/src/index.js

@@ -51,6 +51,7 @@ export { default as Typography } from './Typography'
 
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
+export { useHydrationContext } from './BaseProvider/HydrationContext'
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,