@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,76 +1,63 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { validateThemeTokensVersion } from './utils';
+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__*/React.createContext(uninitialisedError);
+export const ThemeSetterContext = /*#__PURE__*/React.createContext(uninitialisedError);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uninitialisedError = exports.default = exports.ThemeSetterContext = exports.ThemeContext = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("./utils");
-
-var _responsiveProps = _interopRequireDefault(require("../utils/props/responsiveProps"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-exports.uninitialisedError = uninitialisedError;
-const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
-exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// 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
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 };
-
 const ThemeProvider = _ref => {
   let {
     children,
     defaultTheme,
     themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
-  const appliedThemeOptions = { ...defaultThemeOptions,
+  const [theme, setTheme] = React.useState(defaultTheme);
+  React.useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
+  const appliedThemeOptions = {
+    ...defaultThemeOptions,
     ...themeOptions
-  }; // Validate the theme tokens version on every render.
+  };
+
+  // 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.
-
-  (0, _utils.validateThemeTokensVersion)(theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
+  validateThemeTokensVersion(theme);
+  return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
-      value: { ...theme,
+    children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
+      value: {
+        ...theme,
         themeOptions: appliedThemeOptions
       },
       children: children
     })
   });
 };
-
 ThemeProvider.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  defaultTheme: _propTypes.default.shape({
-    metadata: _propTypes.default.shape({
-      themeTokensVersion: _propTypes.default.string.isRequired
+  children: PropTypes.node.isRequired,
+  defaultTheme: PropTypes.shape({
+    metadata: PropTypes.shape({
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
-
   /**
    * An object containing options allowing to customize the theming experience:
    *
@@ -84,13 +71,14 @@ ThemeProvider.propTypes = {
    * - `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
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
-  themeOptions: _propTypes.default.shape({
-    forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool,
-    enableHelmetSSR: _propTypes.default.bool,
-    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool,
+    enableHelmetSSR: PropTypes.bool,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 };
-var _default = ThemeProvider;
-exports.default = _default;
+export default ThemeProvider;

package/lib/ThemeProvider/index.js

@@ -1,61 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  useTheme: true,
-  useSetTheme: true
-};
-exports.default = void 0;
-Object.defineProperty(exports, "useSetTheme", {
-  enumerable: true,
-  get: function () {
-    return _useSetTheme.default;
-  }
-});
-Object.defineProperty(exports, "useTheme", {
-  enumerable: true,
-  get: function () {
-    return _useTheme.default;
-  }
-});
-
-var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
-
-var _useThemeTokens = require("./useThemeTokens");
-
-Object.keys(_useThemeTokens).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useThemeTokens[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useThemeTokens[key];
-    }
-  });
-});
-
-var _utils = require("./utils");
-
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _ThemeProvider.default;
-exports.default = _default;
+import ThemeProvider from './ThemeProvider';
+export { default as useTheme } from './useTheme';
+export { default as useSetTheme } from './useSetTheme';
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
+export * from './useThemeTokens';
+export * from './utils';
+export default ThemeProvider;

package/lib/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,81 @@
+import { viewports } from '@telus-uds/system-constants';
+import useTheme from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = mergeAppearances(variants, states);
+  const tokensByViewport = Object.fromEntries(viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = resolveThemeTokens(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
+  return themeTokens;
+};
+export default useResponsiveThemeTokens;

package/lib/ThemeProvider/useSetTheme.js

@@ -1,26 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _ThemeProvider = require("./ThemeProvider");
-
+import { useCallback, useContext } from 'react';
+import { ThemeSetterContext } from './ThemeProvider';
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
-
+  const setTheme = useContext(ThemeSetterContext);
+  // Fail fast if dev uses useSetTheme outside of ThemeProvider
   if (setTheme instanceof Error) {
     throw setTheme;
-  } // Merge provided object into current theme
-
+  }
 
-  const editTheme = (0, _react.useCallback)(newTheme => setTheme(function () {
+  // Merge provided object into current theme
+  const editTheme = useCallback(newTheme => setTheme(function () {
     let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return { ...oldTheme,
+    return {
+      ...oldTheme,
       ...newTheme
     };
   }), [setTheme]);
@@ -29,6 +21,4 @@ const useSetTheme = () => {
     editTheme
   };
 };
-
-var _default = useSetTheme;
-exports.default = _default;
+export default useSetTheme;

package/lib/ThemeProvider/useTheme.js

@@ -1,23 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _ThemeProvider = require("./ThemeProvider");
-
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeProvider';
 const useTheme = () => {
-  const theme = (0, _react.useContext)(_ThemeProvider.ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
-
+  const theme = useContext(ThemeContext);
+  // Fail fast if dev uses useTheme outside of ThemeProvider
   if (theme instanceof Error) {
     throw theme;
   }
-
   return theme;
 };
-
-var _default = useTheme;
-exports.default = _default;
+export default useTheme;

package/lib/ThemeProvider/useThemeTokens.js

@@ -1,18 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
-
-var _react = require("react");
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-var _utils = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+import { useCallback } from 'react';
+import useTheme from './useTheme';
+import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils';
 /**
  * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
@@ -45,15 +33,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-const useThemeTokens = function (componentName) {
+export const useThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
-  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
   return themeTokens;
 };
+
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
  * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
@@ -106,21 +95,15 @@ const useThemeTokens = function (componentName) {
  *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope,
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
-
-
-exports.useThemeTokens = useThemeTokens;
-
-const useThemeTokensCallback = function (componentName) {
+export const useThemeTokensCallback = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
-  const getThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
-    const appearances = (0, _utils.mergeAppearances)(variants, states);
-    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, appearances, tokenOverrides);
-    return (0, _utils.getThemeTokens)(componentTheme, resolvedTokens, appearances);
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
+    const appearances = mergeAppearances(variants, states);
+    const resolvedTokens = resolveThemeTokens(tokens, appearances, tokenOverrides);
+    return getThemeTokens(componentTheme, resolvedTokens, appearances);
   }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
-};
-
-exports.useThemeTokensCallback = useThemeTokensCallback;
+};

package/lib/ThemeProvider/utils/index.js

@@ -1,31 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _styles = require("./styles");
-
-Object.keys(_styles).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _styles[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _styles[key];
-    }
-  });
-});
-
-var _themeTokens = require("./theme-tokens");
-
-Object.keys(_themeTokens).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _themeTokens[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _themeTokens[key];
-    }
-  });
-});
+export * from './styles';
+export * from './theme-tokens';