@telus-uds/components-base 3.5.2 → 3.6.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 08 Apr 2025 19:33:55 GMT and should not be manually modified.
+This log was last generated on Thu, 24 Apr 2025 18:52:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.6.0
+
+Thu, 24 Apr 2025 18:52:13 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: add new tokens (sergio.ramirez@telus.com)
+- `Box`: add RNMQ support (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.4.0
+
+### Patches
+
+- `ExpandCollapseMini`: allow support for style variants (Mauricio.BatresMontejo@telus.com)
+- Update react dependencies to match valid versions (sergio.ramirez@telus.com)
+
 ## 3.5.2
 
-Tue, 08 Apr 2025 19:33:55 GMT
+Tue, 08 Apr 2025 19:36:14 GMT
 
 ### Patches
 

package/lib/cjs/Box/Box.js

@@ -15,6 +15,7 @@ var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/I
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
@@ -203,8 +204,19 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
-  const styles = {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = (0, _ThemeProvider.useThemeTokensCallback)('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: (0, _utils.useSpacingScale)(left),
     paddingRight: (0, _utils.useSpacingScale)(right),
@@ -212,8 +224,38 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: (0, _utils.getSpacingScale)(left, vp, getSpacingTokens),
+        paddingRight: (0, _utils.getSpacingScale)(right, vp, getSpacingTokens),
+        paddingTop: (0, _utils.getSpacingScale)(top, vp, getSpacingTokens),
+        paddingBottom: (0, _utils.getSpacingScale)(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
+    const {
+      ids
+    } = _utils.StyleSheet.create({
+      box: {
+        ...mediaQueryStyles
+      }
+    });
+    boxStyles = {
+      flex,
+      ...selectBoxStyles(themeTokens[viewport], customGradient)
+    };
+    boxMediaIds = ids.box;
+  }
   let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  if (typeof customGradient === 'function') content = customGradient(boxStyles.colors, boxStyles)(children);
   const {
     src = '',
     alt = '',
@@ -247,23 +289,27 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       });
     }
   }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  const dataSetValue = boxMediaIds ? {
+    media: boxMediaIds,
+    ...dataSet
+  } : dataSet;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle];
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
 var _utils = require("../utils");
+var _props = require("../utils/props");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -85,6 +86,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: _props.variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -23,21 +23,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -46,22 +32,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref;
   const {
     expanded,
     hover,
-    focus
+    focus,
+    pressed
   } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
-    outerBorderColor
-  } = (0, _ThemeProvider.useThemeTokens)('Link', {}, {}, {
-    focus: _Platform.default.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = (0, _ThemeProvider.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -95,9 +87,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -137,6 +137,10 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonIconPadding,
     subtitleColor,
     dividerColor,
+    iconColor,
+    buttonBackgroundColor,
+    iconColorSelected,
+    buttonBackgroundColorSelected,
     ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
@@ -159,7 +163,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
     paddingRight: labelPaddingRight,
-    iconBackground: buttonIconBackgroundColor
+    iconBackground: buttonIconBackgroundColor,
+    iconColor: isSelected ? iconColorSelected : iconColor,
+    backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
   const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/cjs/utils/getSpacingScale.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useResponsiveProp = require("./useResponsiveProp");
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number';
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && (spaceValue?.space ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+var _default = exports.default = getSpacingScale;

package/lib/cjs/utils/index.js

@@ -19,7 +19,8 @@ var _exportNames = {
   htmlAttrs: true,
   transformGradient: true,
   convertFromMegaByteToByte: true,
-  formatImageSource: true
+  formatImageSource: true,
+  getSpacingScale: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -45,6 +46,12 @@ Object.defineProperty(exports, "formatImageSource", {
     return _formatImageSource.default;
   }
 });
+Object.defineProperty(exports, "getSpacingScale", {
+  enumerable: true,
+  get: function () {
+    return _getSpacingScale.default;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -240,6 +247,7 @@ var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 var _transformGradient = require("./transformGradient");
 var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
+var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/esm/Box/Box.js

@@ -6,9 +6,10 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale } from '../utils';
 import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -196,8 +197,19 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = useThemeTokens('Box', tokens, variant);
-  const styles = {
+  const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = useThemeTokensCallback('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: useSpacingScale(left),
     paddingRight: useSpacingScale(right),
@@ -205,8 +217,38 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: getSpacingScale(left, vp, getSpacingTokens),
+        paddingRight: getSpacingScale(right, vp, getSpacingTokens),
+        paddingTop: getSpacingScale(top, vp, getSpacingTokens),
+        paddingBottom: getSpacingScale(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids
+    } = RNMQStyleSheet.create({
+      box: {
+        ...mediaQueryStyles
+      }
+    });
+    boxStyles = {
+      flex,
+      ...selectBoxStyles(themeTokens[viewport], customGradient)
+    };
+    boxMediaIds = ids.box;
+  }
   let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  if (typeof customGradient === 'function') content = customGradient(boxStyles.colors, boxStyles)(children);
   const {
     src = '',
     alt = '',
@@ -240,23 +282,27 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       });
     }
   }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  const dataSetValue = boxMediaIds ? {
+    media: boxMediaIds,
+    ...dataSet
+  } : dataSet;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle];
     return /*#__PURE__*/_jsx(ScrollView, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
+import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
@@ -78,6 +79,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -16,21 +16,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -39,22 +25,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref;
   const {
     expanded,
     hover,
-    focus
+    focus,
+    pressed
   } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
-    outerBorderColor
-  } = useThemeTokens('Link', {}, {}, {
-    focus: Platform.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = useThemeTokens('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -88,9 +80,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -130,6 +130,10 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     buttonIconPadding,
     subtitleColor,
     dividerColor,
+    iconColor,
+    buttonBackgroundColor,
+    iconColorSelected,
+    buttonBackgroundColorSelected,
     ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
@@ -152,7 +156,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
     paddingRight: labelPaddingRight,
-    iconBackground: buttonIconBackgroundColor
+    iconBackground: buttonIconBackgroundColor,
+    iconColor: isSelected ? iconColorSelected : iconColor,
+    backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
   const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));

package/lib/esm/utils/getSpacingScale.js

@@ -0,0 +1,61 @@
+import { resolveResponsiveProp } from './useResponsiveProp';
+
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number';
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+export default getSpacingScale;

package/lib/esm/utils/index.js

@@ -22,4 +22,5 @@ export { default as BaseView } from './BaseView';
 export { default as htmlAttrs } from './htmlAttrs';
 export { transformGradient } from './transformGradient';
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
-export { default as formatImageSource } from './formatImageSource';
+export { default as formatImageSource } from './formatImageSource';
+export { default as getSpacingScale } from './getSpacingScale';

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.3.0",
+    "@telus-uds/system-theme-tokens": "^4.4.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -56,8 +56,8 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": ">=18.2.0 <19.0.0",
+    "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
     "react-native-web": "^0.19.10",
     "react-native-svg": "15.7.1"
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.2",
+  "version": "3.6.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.3.0",
+    "@telus-uds/system-theme-tokens": "^4.4.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -56,8 +56,8 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": ">=18.2.0 <19.0.0",
+    "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
     "react-native-web": "^0.19.10",
     "react-native-svg": "15.7.1"
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.2",
+  "version": "3.6.0",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -1,9 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
-import { useThemeTokens } from '../ThemeProvider'
+import {
+  useTheme,
+  useThemeTokens,
+  useResponsiveThemeTokens,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
+  createMediaQueryStyles,
   getA11yPropsFromHtmlTag,
   getTokensPropType,
   layoutTags,
@@ -13,9 +19,12 @@ import {
   useResponsiveProp,
   useSpacingScale,
   variantProp,
-  viewProps
+  viewProps,
+  StyleSheet as RNMQStyleSheet,
+  getSpacingScale
 } from '../utils'
 import backgroundImageStylesMap from './backgroundImageStylesMap'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -212,8 +221,20 @@ const Box = React.forwardRef(
       ...selectProps(rest)
     }
 
-    const themeTokens = useThemeTokens('Box', tokens, variant)
-    const styles = {
+    const viewport = useViewport()
+    const { themeOptions } = useTheme()
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens(
+      'Box',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+    const getSpacingTokens = useThemeTokensCallback('spacingScale')
+
+    let boxStyles = {
       flex,
       paddingLeft: useSpacingScale(left),
       paddingRight: useSpacingScale(right),
@@ -221,10 +242,40 @@ const Box = React.forwardRef(
       paddingBottom: useSpacingScale(bottom),
       ...selectBoxStyles(themeTokens, customGradient)
     }
+    let boxMediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const { transformedThemeTokens } = Object.entries(themeTokens).reduce(
+        (acc, [vp]) => {
+          acc.transformedThemeTokens[vp] = {
+            paddingLeft: getSpacingScale(left, vp, getSpacingTokens),
+            paddingRight: getSpacingScale(right, vp, getSpacingTokens),
+            paddingTop: getSpacingScale(top, vp, getSpacingTokens),
+            paddingBottom: getSpacingScale(bottom, vp, getSpacingTokens)
+          }
+          return acc
+        },
+        {
+          transformedThemeTokens: {}
+        }
+      )
+
+      const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens)
+      const { ids } = RNMQStyleSheet.create({
+        box: {
+          ...mediaQueryStyles
+        }
+      })
+      boxStyles = {
+        flex,
+        ...selectBoxStyles(themeTokens[viewport], customGradient)
+      }
+      boxMediaIds = ids.box
+    }
 
     let content = children
     if (typeof customGradient === 'function')
-      content = customGradient(styles.colors, styles)(children)
+      content = customGradient(boxStyles.colors, boxStyles)(children)
 
     const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
@@ -256,17 +307,19 @@ const Box = React.forwardRef(
       }
     }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src])
 
+    const dataSetValue = boxMediaIds ? { media: boxMediaIds, ...dataSet } : dataSet
+
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
-      scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
+      scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle]
       return (
-        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
+        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSetValue} ref={ref}>
           {content}
         </ScrollView>
       )
     }
     return (
-      <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
+      <View {...props} style={boxStyles} testID={testID} dataSet={dataSetValue} ref={ref}>
         {content}
       </View>
     )

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ExpandCollapse from '../ExpandCollapse'
 import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils'
+import { variantProp } from '../utils/props'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
@@ -79,6 +80,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -15,13 +15,6 @@ const presentationOnly = {
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 }
 
-const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
-  color,
-  textLine,
-  blockLineHeight: lineHeight,
-  blockFontSize: fontSize
-})
-
 const ExpandCollapseMiniControl = React.forwardRef(
   (
     {
@@ -35,20 +28,24 @@ const ExpandCollapseMiniControl = React.forwardRef(
     },
     ref
   ) => {
-    const { expanded, hover, focus } = pressableState || {}
-    // we only want focus outline when focusing, if user is pressing we don't want the border.
-    const { outerBorderColor } = useThemeTokens(
+    const { expanded, hover, focus, pressed } = pressableState || {}
+    const { quiet } = variant
+    const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded
+
+    const linkTokens = useThemeTokens(
       'Link',
       {},
-      {},
-      { focus: Platform.OS !== 'web' ? expanded : focus }
-    )
-    const { size, icon, ...themeTokens } = useThemeTokens(
-      'ExpandCollapseMiniControl',
-      tokens,
-      variant,
-      { expanded, focus }
+      { ...variant, quiet: expanded ?? quiet },
+      {
+        focus: isFocusVisible,
+        hover,
+        pressed
+      }
     )
+    const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
+      expanded,
+      focus
+    })
 
     // Choose hover styles when any part of Control is hoverred
     const appearance = { ...variant, hover }
@@ -75,9 +72,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
         icon={icon}
         iconPosition={iconPosition}
         tokens={(linkState) => ({
-          ...getTokens(linkState),
-          ...selectLinkTokens(themeTokens),
-          outerBorderColor
+          ...linkTokens,
+          ...getTokens(linkState)
         })}
         ref={ref}
         {...presentationOnly}

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -134,6 +134,10 @@ const MultiSelectFilter = React.forwardRef(
       buttonIconPadding,
       subtitleColor,
       dividerColor,
+      iconColor,
+      buttonBackgroundColor,
+      iconColorSelected,
+      buttonBackgroundColorSelected,
       ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
@@ -154,7 +158,9 @@ const MultiSelectFilter = React.forwardRef(
       paddingBottom: labelPaddingBottom,
       paddingLeft: labelPaddingLeft,
       paddingRight: labelPaddingRight,
-      iconBackground: buttonIconBackgroundColor
+      iconBackground: buttonIconBackgroundColor,
+      iconColor: isSelected ? iconColorSelected : iconColor,
+      backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
     }
     const getButtonDropdownTokens = useThemeTokensCallback(
       'ButtonDropdown',

package/src/utils/getSpacingScale.js

@@ -0,0 +1,50 @@
+import { resolveResponsiveProp } from './useResponsiveProp'
+
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = (space) => {
+  if (!space?.options) return {}
+
+  const { size, variant, subtract = 0 } = space.options
+  const overridden = typeof size === 'number'
+
+  return { tokens: { size }, variant, overridden, subtract }
+}
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const { tokens, variant, overridden, subtract = 0 } = resolveSpacingOptions(spaceValue)
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0))
+
+  const { size } = getSpacingTokens(
+    {
+      ...variant,
+      space: typeof space === 'number' ? space : 0,
+      viewport
+    },
+    tokens
+  )
+  return Math.max(size - subtract, 0)
+}
+
+export default getSpacingScale

package/src/utils/index.js

@@ -23,3 +23,4 @@ export { default as htmlAttrs } from './htmlAttrs'
 export { transformGradient } from './transformGradient'
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte'
 export { default as formatImageSource } from './formatImageSource'
+export { default as getSpacingScale } from './getSpacingScale'