@telus-uds/components-base 3.18.0 → 3.20.0

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -71,7 +71,6 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MAX_ITEMS_THRESHOLD = 12;
 const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     label,
@@ -178,12 +177,13 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   });
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
   const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  let rowLength = items.length;
+  if (viewport !== 'xs' && colSize === 2) {
+    rowLength = Math.ceil(items.length / 2);
+  }
   _react.default.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
+    setMaxWidth(items.length >= rowLimit);
+  }, [items.length, rowLimit]);
   _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
@@ -430,14 +430,14 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
       overlaidPosition: overlaidPosition,
-      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
+      maxHeight: items.length >= rowLimit ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+        maxWidth: items.length >= rowLimit ? true : maxWidth,
         borderColor: containerBorderColor
       },
       copy: copy,
@@ -489,9 +489,9 @@ MultiSelectFilter.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: _propTypes.default.string,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib/cjs/Spacer/Spacer.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _utils = require("../utils");
+var _useMediaQuerySpacing = _interopRequireDefault(require("../utils/useMediaQuerySpacing"));
+var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -65,13 +67,66 @@ const Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
+    dataSet,
     ...rest
   } = _ref;
-  const size = (0, _utils.useSpacingScale)(space);
-  const sizeStyle = selectSizeStyle(size, direction);
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _useTheme.default)();
+  const {
+    sizeByViewport
+  } = (0, _useMediaQuerySpacing.default)(space);
+  const fallbackSize = (0, _utils.useSpacingScale)(space);
+  const sizeStyle = selectSizeStyle(fallbackSize, direction);
+  let spacerStyles;
+  let dataSetValue = dataSet;
+  if (enableMediaQueryStyleSheet) {
+    const sizeKey = direction === 'row' ? 'width' : 'height';
+    const stylesByViewport = {
+      xs: {
+        [sizeKey]: sizeByViewport.xs,
+        ...staticStyles.stretch
+      },
+      sm: {
+        [sizeKey]: sizeByViewport.sm,
+        ...staticStyles.stretch
+      },
+      md: {
+        [sizeKey]: sizeByViewport.md,
+        ...staticStyles.stretch
+      },
+      lg: {
+        [sizeKey]: sizeByViewport.lg,
+        ...staticStyles.stretch
+      },
+      xl: {
+        [sizeKey]: sizeByViewport.xl,
+        ...staticStyles.stretch
+      }
+    };
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      spacer: {
+        ...mediaQueryStyles
+      }
+    });
+    spacerStyles = styles.spacer;
+    dataSetValue = {
+      media: ids.spacer,
+      ...dataSet
+    };
+  } else {
+    spacerStyles = [staticStyles.stretch, sizeStyle];
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.stretch, sizeStyle],
+    style: spacerStyles,
+    dataSet: dataSetValue,
     ...selectProps(rest)
   });
 });
@@ -90,7 +145,12 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: _propTypes.default.oneOf(['column', 'row'])
+  direction: _propTypes.default.oneOf(['column', 'row']),
+  /**
+   * Data attributes to be applied to the element. When media query stylesheet is enabled,
+   * this will include media query IDs for responsive styling.
+   */
+  dataSet: _propTypes.default.object
 };
 const staticStyles = _StyleSheet.default.create({
   stretch: {

package/lib/cjs/StepTracker/Step.js

@@ -157,6 +157,13 @@ const getStepTestID = (isCompleted, isCurrent) => {
   }
   return testID;
 };
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted ? themeTokens.barCompletedBackgroundColor : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+});
 
 /**
  * A single step of a StepTracker.
@@ -169,6 +176,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     stepCount = 0,
     stepIndex = 0,
     tokens,
+    isBarVariant,
     ...rest
   } = _ref8;
   const {
@@ -197,7 +205,10 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     accessibilityCurrent: status === stepIndex,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: [isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectBarContainerStyles(themeTokens, isCompleted, isCurrent),
+      testID: getStepTestID(isCompleted, isCurrent)
+    }), !isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: "row",
       space: 0,
       tokens: {

package/lib/cjs/StepTracker/StepTracker.js

@@ -19,6 +19,7 @@ var _Step = _interopRequireDefault(require("./Step"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const STYLE_BAR_VARIANT = 'bar';
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -59,6 +60,14 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+const selectStepsContainerStyles = _ref4 => {
+  let {
+    barGap
+  } = _ref4;
+  return {
+    gap: barGap
+  };
+};
 
 /**
  * StepTracker component shows the current position in a sequence of steps.
@@ -92,7 +101,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
@@ -101,7 +110,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref5;
+  const isBarVariant = variant?.style === STYLE_BAR_VARIANT;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,
@@ -147,7 +157,7 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: staticStyles.stepsContainer,
+        style: [staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)],
         accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
@@ -158,7 +168,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             stepCount: steps.length,
             tokens: themeTokens,
             accessibilityRole: stepAccessibilityRole,
-            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step'
+            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step',
+            isBarVariant: isBarVariant
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/TabBar/TabBar.js

@@ -91,7 +91,8 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist"
+        accessibilityRole: "tablist",
+        tokens: item.tokens
       }, item.id))
     })
   });
@@ -105,7 +106,8 @@ TabBar.propTypes = {
     icon: _propTypes.default.node,
     iconActive: _propTypes.default.node,
     label: _propTypes.default.string.isRequired,
-    href: _propTypes.default.string
+    href: _propTypes.default.string,
+    tokens: (0, _utils.getTokensPropType)('TabBarItem')
   })).isRequired,
   /** Id of the initially selected item. */
   initiallySelectedItem: _propTypes.default.number,

package/lib/cjs/TabBar/index.js

@@ -5,5 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _TabBar = _interopRequireDefault(require("./TabBar"));
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_TabBar.default.Item = _TabBarItem.default;
 var _default = exports.default = _TabBar.default;

package/lib/cjs/Tooltip/Backdrop.js

@@ -21,7 +21,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `;
   document.body.appendChild(node);

package/lib/cjs/utils/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   useCopy: true,
   useHash: true,
   useSpacingScale: true,
+  useMediaQuerySpacing: true,
   useResponsiveProp: true,
   useOverlaidPosition: true,
   useSafeLayoutEffect: true,
@@ -21,7 +22,8 @@ var _exportNames = {
   convertFromMegaByteToByte: true,
   formatImageSource: true,
   getSpacingScale: true,
-  useVariants: true
+  useVariants: true,
+  isTouchDevice: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -65,6 +67,12 @@ Object.defineProperty(exports, "info", {
     return _info.default;
   }
 });
+Object.defineProperty(exports, "isTouchDevice", {
+  enumerable: true,
+  get: function () {
+    return _isTouchDevice.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -83,6 +91,12 @@ Object.defineProperty(exports, "useHash", {
     return _useHash.default;
   }
 });
+Object.defineProperty(exports, "useMediaQuerySpacing", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuerySpacing.default;
+  }
+});
 Object.defineProperty(exports, "useOverlaidPosition", {
   enumerable: true,
   get: function () {
@@ -219,6 +233,7 @@ var _info = _interopRequireDefault(require("./info"));
 var _useCopy = _interopRequireDefault(require("./useCopy"));
 var _useHash = _interopRequireDefault(require("./useHash"));
 var _useSpacingScale = _interopRequireDefault(require("./useSpacingScale"));
+var _useMediaQuerySpacing = _interopRequireDefault(require("./useMediaQuerySpacing"));
 var _useResponsiveProp = _interopRequireWildcard(require("./useResponsiveProp"));
 Object.keys(_useResponsiveProp).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -256,6 +271,7 @@ var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMe
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
 var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 var _useVariants = _interopRequireDefault(require("./useVariants"));
+var _isTouchDevice = _interopRequireDefault(require("./isTouchDevice"));
 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/cjs/utils/isTouchDevice.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Determines if the current device supports touch interactions
+ *
+ * @returns {boolean} True if the device supports touch, false otherwise
+ */
+const isTouchDevice = () => {
+  if (_Platform.default.OS !== 'web') {
+    return true;
+  }
+  if (typeof window !== 'undefined') {
+    if ('ontouchstart' in window) {
+      return true;
+    }
+    if (window.navigator && window.navigator.maxTouchPoints > 0) {
+      return true;
+    }
+    if (window.navigator && window.navigator.msMaxTouchPoints > 0) {
+      return true;
+    }
+    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) {
+      return true;
+    }
+  }
+  return false;
+};
+var _default = exports.default = isTouchDevice;

package/lib/cjs/utils/useMediaQuerySpacing.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ThemeProvider = require("../ThemeProvider");
+var _useResponsiveProp = require("./useResponsiveProp");
+/**
+ * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ */
+
+/**
+ * A utility hook that simplifies implementing media query-based responsive spacing.
+ *
+ * This hook handles the complexity of:
+ * - Detecting if a space value is responsive (has viewport keys)
+ * - Fetching theme tokens for each viewport
+ * - Resolving the correct space index for each viewport
+ * - Extracting actual pixel values from theme tokens
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * const { sizeByViewport } = useMediaQuerySpacing(space, 'spacingScale')
+ *
+ * // Use sizeByViewport to create media query styles
+ * const stylesByViewport = {
+ *   xs: { padding: sizeByViewport.xs },
+ *   sm: { padding: sizeByViewport.sm },
+ *   md: { padding: sizeByViewport.md },
+ *   lg: { padding: sizeByViewport.lg },
+ *   xl: { padding: sizeByViewport.xl }
+ * }
+ * const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+ * ```
+ *
+ * ## Parameters
+ *
+ * @param {SpacingValue} spaceValue - A spacing value (number or responsive object with viewport keys)
+ * @param {string} tokenKey - The theme token key to use (e.g., 'spacingScale', 'Typography')
+ * @param {object} [tokens={}] - Additional tokens to pass to useThemeTokens
+ * @param {object} [variant={}] - Variant to pass to useThemeTokens
+ *
+ * ## Returns
+ *
+ * @returns {{
+ *   spaceIndexByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   sizeByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   tokensByViewport: { xs: object, sm: object, md: object, lg: object, xl: object }
+ * }}
+ *
+ * - `spaceIndexByViewport`: The resolved space index for each viewport
+ * - `sizeByViewport`: The actual pixel/number values for each viewport
+ * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
+ */
+const useMediaQuerySpacing = function (spaceValue) {
+  let tokenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'spacingScale';
+  let tokens = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let variant = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const isResponsive = typeof spaceValue === 'object' && spaceValue !== null && !spaceValue.space && !spaceValue.options;
+  const getSpaceIndex = viewport => {
+    if (isResponsive) {
+      return (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport);
+    }
+    if (typeof spaceValue === 'number') {
+      return spaceValue;
+    }
+    return spaceValue?.space ?? 1;
+  };
+  const spaceIndexByViewport = {
+    xs: getSpaceIndex('xs'),
+    sm: getSpaceIndex('sm'),
+    md: getSpaceIndex('md'),
+    lg: getSpaceIndex('lg'),
+    xl: getSpaceIndex('xl')
+  };
+  const tokensXs = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xs,
+    viewport: 'xs'
+  });
+  const tokensSm = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.sm,
+    viewport: 'sm'
+  });
+  const tokensMd = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.md,
+    viewport: 'md'
+  });
+  const tokensLg = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.lg,
+    viewport: 'lg'
+  });
+  const tokensXl = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xl,
+    viewport: 'xl'
+  });
+  const sizeByViewport = {
+    xs: tokensXs.size ?? 0,
+    sm: tokensSm.size ?? 0,
+    md: tokensMd.size ?? 0,
+    lg: tokensLg.size ?? 0,
+    xl: tokensXl.size ?? 0
+  };
+  const tokensByViewport = {
+    xs: tokensXs,
+    sm: tokensSm,
+    md: tokensMd,
+    lg: tokensLg,
+    xl: tokensXl
+  };
+  return {
+    spaceIndexByViewport,
+    sizeByViewport,
+    tokensByViewport
+  };
+};
+var _default = exports.default = useMediaQuerySpacing;