@telus-uds/components-base 3.21.0 → 3.23.0

package/lib/esm/Listbox/ListboxOverlay.js

@@ -30,12 +30,14 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     maxWidth,
     minWidth,
     onLayout,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const systemTokens = useThemeTokens('Listbox', {}, {});
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     onLayout: onLayout,
+    testID: testID,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
@@ -74,6 +76,7 @@ DropdownOverlay.propTypes = {
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
-  tokens: PropTypes.object
+  tokens: PropTypes.object,
+  testID: PropTypes.string
 };
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/esm/Listbox/PressableItem.js

@@ -41,10 +41,14 @@ const getItemStyles = _ref => {
     color: itemColor,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+    borderLeftWidth: itemBorderLeftWidth,
+    borderLeftColor: itemBorderLeftColor,
+    borderRightWidth: itemBorderRightWidth,
+    borderRightColor: itemBorderRightColor,
+    borderTopWidth: itemBorderTopWidth,
+    borderTopColor: itemBorderTopColor,
+    borderBottomWidth: itemBorderBottomWidth,
+    borderBottomColor: itemBorderBottomColor,
     borderRadius: itemBorderRadius,
     justifyContent: 'center'
   };

package/lib/esm/TextInput/TextInputBase.js

@@ -279,6 +279,10 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       // Add a space every 4 digits starting from the 5th position
       filteredText = formattedValue.replace(regex, '$1 ').trim();
     }
+    // Apply maxLength if provided
+    if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+      filteredText = filteredText.substring(0, rest.maxLength);
+    }
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -351,7 +355,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    maxLength: type === 'card' ? 19 : undefined,
+    maxLength: type === 'card' ? 19 : rest.maxLength,
     value: isControlled ? currentValue : undefined,
     onKeyPress
   };

package/lib/esm/ThemeProvider/index.js

@@ -2,6 +2,7 @@ import ThemeProvider from './ThemeProvider';
 export { default as useTheme } from './useTheme';
 export { default as useSetTheme } from './useSetTheme';
 export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
+export { default as useResponsiveThemeTokensCallback } from './useResponsiveThemeTokensCallback';
 export * from './useThemeTokens';
 export * from './utils';
 export default ThemeProvider;

package/lib/esm/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+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 memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const getResponsiveThemeTokensCallback = useCallback((states, tokenOverrides) => {
+    const resolvedTokens = resolveThemeTokens(tokens, mergeAppearances(variants, states), tokenOverrides);
+    return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
+  }, [componentTheme, tokens, variants]);
+  return getResponsiveThemeTokensCallback;
+};
+export default useResponsiveThemeTokensCallback;

package/lib/esm/Validator/Validator.js

@@ -37,11 +37,10 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [, setIndividualCodes] = React.useState({});
-  const [text, setText] = React.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
+  const [codes, setCodes] = React.useState(() => Array(validatorsLength).fill(''));
   const [isHover, setIsHover] = React.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
@@ -52,84 +51,87 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = React.useMemo(() => {
-    const codes = [];
-    const valueCodes = {};
-    Array.from({
+
+  // Create refs for input elements
+  const codeReferences = React.useMemo(() => {
+    return Array.from({
       length: validatorsLength
-    }, (_, i) => {
-      codes[prefix + i] = /*#__PURE__*/React.createRef();
-      valueCodes[prefix + i] = '';
-      valueCodes[prefix + i + sufixValidation] = '';
-      return null;
+    }, () => /*#__PURE__*/React.createRef());
+  }, [validatorsLength]);
+
+  // Keep onChange and mask in refs to avoid re-creating event listeners
+  const onChangeRef = React.useRef(onChange);
+  const maskRef = React.useRef(mask);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+    maskRef.current = mask;
+  }, [onChange, mask]);
+
+  // Update a single code digit
+  const updateCode = React.useCallback((index, digit) => {
+    setCodes(prevCodes => {
+      const newCodes = [...prevCodes];
+      newCodes[index] = digit;
+      if (onChangeRef.current) {
+        const codeString = newCodes.join('');
+        const singleCodesObj = {};
+        newCodes.forEach((code, i) => {
+          singleCodesObj[prefix + i] = code;
+          singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : '';
+        });
+        onChangeRef.current(codeString, singleCodesObj);
+      }
+      return newCodes;
     });
-    return [codes, valueCodes];
-  }, [validatorsLength, prefix, sufixValidation]);
-  const handleSingleCodes = React.useCallback((codeId, val, validation) => {
-    singleCodes[codeId] = val;
-    singleCodes[codeId + sufixValidation] = validation;
-    setIndividualCodes(prev => ({
-      ...prev,
-      [codeId]: val
-    }));
-  }, [singleCodes, sufixValidation]);
-  const changeDataMasking = React.useCallback(boxElement => {
-    let charMasking = '';
-    const element = boxElement;
-    if (mask && mask.length === 1) {
-      charMasking = mask;
-    } else if (mask && mask.length > 1) {
-      charMasking = mask.substring(0, 1);
-    }
-    if (charMasking && element) {
-      element.value = charMasking;
-    }
-  }, [mask]);
-  const handleChangeCode = React.useCallback(() => {
-    const code = Array.from({
-      length: validatorsLength
-    }, (_, i) => singleCodes[prefix + i] || '').join('');
-    if (typeof onChange === 'function') {
-      onChange(code, singleCodes);
-    }
-  }, [validatorsLength, singleCodes, prefix, onChange]);
-  const handleChangeCodeValues = React.useCallback((event, codeId, nextIndex) => {
-    const codeElement = codeReferences[codeId]?.current;
+  }, [prefix, sufixValidation]);
+
+  // Handle input change
+  const handleInputChange = React.useCallback((index, event) => {
     const val = event.nativeEvent?.value || event.target?.value;
 
-    // Only allow numeric characters and limit to single digit
-    const numericOnly = val.replace(/\D/g, '').substring(0, 1);
-    if (codeElement && codeElement.value) {
-      codeElement.value = numericOnly;
-    }
-    handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '');
-    handleChangeCode();
-    if (nextIndex === validatorsLength) {
-      codeElement?.blur();
-      changeDataMasking(codeElement);
+    // This prevents the infinite loop where setting element.value triggers another input event
+    if (maskRef.current && val === maskRef.current.substring(0, 1)) {
       return;
     }
-    if (numericOnly.length > 0) {
-      const nextElement = codeReferences[prefix + nextIndex]?.current;
+    const numericOnly = val.replace(/\D/g, '').substring(0, 1);
+
+    // Update state
+    updateCode(index, numericOnly);
+
+    // Update DOM element
+    const element = codeReferences[index]?.current;
+    if (element) {
+      if (maskRef.current && numericOnly) {
+        element.value = maskRef.current.substring(0, 1);
+      } else {
+        element.value = numericOnly;
+      }
+    }
+
+    // Move to next field if digit entered
+    if (numericOnly && index < validatorsLength - 1) {
+      const nextElement = codeReferences[index + 1]?.current;
       nextElement?.focus();
-      changeDataMasking(codeElement);
+    } else if (index === validatorsLength - 1) {
+      element?.blur();
     }
-  }, [codeReferences, handleSingleCodes, handleChangeCode, validatorsLength, changeDataMasking, prefix]);
-  const handleKeyPress = (event, currentIndex, previousIndex) => {
+  }, [codeReferences, updateCode, validatorsLength]);
+
+  // Handle backspace
+  const handleKeyPress = React.useCallback((index, event) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) {
       return;
     }
-    if (currentIndex > 0) {
-      const currentElement = codeReferences[prefix + currentIndex]?.current;
-      const previousElement = codeReferences[prefix + previousIndex]?.current;
-      if (currentElement && currentElement.value) {
-        currentElement.value = '';
-      }
+    const currentElement = codeReferences[index]?.current;
+    if (currentElement) {
+      currentElement.value = '';
+    }
+    updateCode(index, '');
+    if (index > 0) {
+      const previousElement = codeReferences[index - 1]?.current;
       previousElement?.focus();
     }
-    handleSingleCodes(prefix + currentIndex, '', '');
-    handleChangeCode();
-  };
+  }, [codeReferences, updateCode]);
   const getCodeComponents = () => {
     return Array.from({
       length: validatorsLength
@@ -138,11 +140,14 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       const codeInputProps = {
         nativeID: codeId,
         keyboardType: 'numeric',
-        ref: codeReferences[codeId] ?? null,
-        validation: strValidation || singleCodes[codeId + sufixValidation],
+        ref: codeReferences[i] ?? null,
+        validation: strValidation || (codes[i] ? 'success' : ''),
         tokens: selectCodeTextInputTokens(themeTokens),
+        // Only use secureTextEntry in React Native, web handles mask differently
+        secureTextEntry: !!(Platform.OS !== 'web' && mask),
+        selectTextOnFocus: Platform.OS !== 'web',
         onFocus: () => {
-          const element = codeReferences[codeId]?.current;
+          const element = codeReferences[i]?.current;
           if (Platform.OS === 'web' && element?.select) {
             return element.select() ?? null;
           }
@@ -151,11 +156,35 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           }
           return null;
         },
-        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onKeyPress: event => handleKeyPress(i, event),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
         inactive
       };
+
+      // For React Native, use onChangeText and maxLength
+      if (Platform.OS !== 'web') {
+        codeInputProps.maxLength = 1;
+        codeInputProps.value = codes[i];
+        codeInputProps.onChange = () => {};
+        codeInputProps.onChangeText = text => {
+          if (text) {
+            updateCode(i, text);
+            if (i < validatorsLength - 1) {
+              setTimeout(() => {
+                codeReferences[i + 1]?.current?.focus();
+              }, 50);
+            }
+          } else {
+            updateCode(i, '');
+            if (i > 0) {
+              setTimeout(() => {
+                codeReferences[i - 1]?.current?.focus();
+              }, 50);
+            }
+          }
+        };
+      }
       if (!codeInputProps.validation) {
         delete codeInputProps.validation;
       }
@@ -167,89 +196,96 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }, codeId);
     });
   };
+
+  // Sync external value prop to internal state
   React.useEffect(() => {
-    if (Number(value).toString() !== 'NaN') {
-      setText(value);
+    if (value && Number(value).toString() !== 'NaN') {
+      const digits = value.split('').slice(0, validatorsLength);
+      const newCodes = Array(validatorsLength).fill('');
+      digits.forEach((digit, i) => {
+        if (/\d/.test(digit)) {
+          newCodes[i] = digit;
+        }
+      });
+      setCodes(newCodes);
     }
-  }, [value]);
+  }, [value, validatorsLength]);
+
+  // Sync codes state to DOM elements
   React.useEffect(() => {
-    Array.from({
-      length: validatorsLength
-    }, (_, i) => {
-      const element = codeReferences[prefix + i]?.current;
+    codes.forEach((code, i) => {
+      const element = codeReferences[i]?.current;
       if (element && element.value !== undefined) {
-        if (mask && text[i]) {
-          element.value = mask;
+        if (mask && code) {
+          element.value = mask.substring(0, 1);
         } else {
-          element.value = text[i] ?? '';
+          element.value = code;
         }
       }
-      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
-      return null;
     });
-  }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes]);
+  }, [codes, codeReferences, mask]);
+
+  // Setup event listeners - only runs once on mount
   React.useEffect(() => {
-    const handlePasteCode = event => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handlePaste = event => {
       event.preventDefault();
-
-      // Clear current state first
-      setText('');
-
-      // Clear all individual input fields and their state
-      Array.from({
-        length: validatorsLength
-      }, (_, i) => {
-        const element = codeReferences[prefix + i]?.current;
-        if (element && element.value !== undefined) {
-          element.value = '';
-        }
-        handleSingleCodes(prefix + i, '', '');
-        return null;
-      });
       const clipBoardText = event.clipboardData.getData('text');
-
-      // Validate that input contains only digits and truncate to 6 characters
       const numericOnly = clipBoardText.replace(/\D/g, '').substring(0, validatorsLength);
-      if (numericOnly.length > 0) {
-        setText(numericOnly);
+      const newCodes = Array(validatorsLength).fill('');
+      numericOnly.split('').forEach((digit, i) => {
+        newCodes[i] = digit;
+      });
+      setCodes(newCodes);
+      if (onChangeRef.current) {
+        const singleCodesObj = {};
+        newCodes.forEach((code, i) => {
+          singleCodesObj[prefix + i] = code;
+          singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : '';
+        });
+        onChangeRef.current(numericOnly, singleCodesObj);
       }
     };
     const handleCopy = event => {
-      const clipBoardText = Array.from({
-        length: validatorsLength
-      }, (_, i) => singleCodes[prefix + i] || '').join('');
-      event.clipboardData.setData('text/plain', clipBoardText);
-      event.preventDefault();
+      setCodes(currentCodes => {
+        const clipBoardText = currentCodes.join('');
+        event.clipboardData.setData('text/plain', clipBoardText);
+        event.preventDefault();
+        return currentCodes;
+      });
     };
-    if (Platform.OS === 'web') {
-      Array.from({
-        length: validatorsLength
-      }, (_, i) => {
-        const element = codeReferences[prefix + i]?.current;
-        if (element && typeof element.addEventListener === 'function') {
-          element.addEventListener('paste', handlePasteCode);
-          element.addEventListener('copy', handleCopy);
-          element.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+
+    // Add event listeners to each input
+    codeReferences.forEach((inputRef, i) => {
+      const element = inputRef?.current;
+      if (element && typeof element.addEventListener === 'function') {
+        element.addEventListener('paste', handlePaste);
+        element.addEventListener('copy', handleCopy);
+        element.addEventListener('input', event => handleInputChange(i, event));
+      }
+    });
+
+    // Cleanup
+    return () => {
+      codeReferences.forEach(inputRef => {
+        const element = inputRef?.current;
+        if (element && typeof element.removeEventListener === 'function') {
+          element.removeEventListener('paste', handlePaste);
+          element.removeEventListener('copy', handleCopy);
+          element.removeEventListener('input', event => handleInputChange(event.target.dataset.index, event));
         }
-        return null;
       });
-    }
-    return () => {
-      if (Platform.OS === 'web') {
-        Array.from({
-          length: validatorsLength
-        }, (_, i) => {
-          const element = codeReferences[prefix + i]?.current;
-          if (element && typeof element.removeEventListener === 'function') {
-            element.removeEventListener('paste', handlePasteCode);
-            element.removeEventListener('copy', handleCopy);
-            element.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-          }
-          return null;
-        });
-      }
     };
-  }, [validatorsLength, prefix, codeReferences, handleChangeCodeValues, handleSingleCodes, singleCodes]);
+    /*
+     * codeReferences and handleInputChange are intentionally omitted from dependencies
+     * because we want event listeners to be registered ONLY ONCE when the component mounts.
+     * codeReferences is stable (created with useMemo) and handleInputChange is stable (useCallback).
+     * Including them would cause unnecessary re-registration of listeners on each render.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     feedbackProps: {

package/lib/esm/index.js

@@ -68,6 +68,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens, useResponsiveThemeTokensCallback } from './ThemeProvider';
 export * from './utils';
 export { default as Portal } from './Portal';

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.15.1",
+    "@telus-uds/system-theme-tokens": "^4.16.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.21.0",
+  "version": "3.23.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.15.1",
+    "@telus-uds/system-theme-tokens": "^4.16.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.21.0",
+  "version": "3.23.0",
   "types": "types/index.d.ts"
 }

package/src/Button/Button.jsx

@@ -2,17 +2,38 @@ import React from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  useThemeTokensCallback,
+  useResponsiveThemeTokensCallback,
+  useTheme
+} from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 
 const Button = React.forwardRef(
-  ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+  ({ accessibilityRole = 'button', tokens, variant, heightFull = true, ...props }, ref) => {
     const viewport = useViewport()
-    const buttonVariant = { viewport, ...variant }
-    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    const buttonVariant = enableMediaQueryStyleSheet ? variant : { viewport, ...variant }
+
+    const useTokens = enableMediaQueryStyleSheet
+      ? useResponsiveThemeTokensCallback
+      : useThemeTokensCallback
+
+    const getTokens = useTokens('Button', tokens, buttonVariant)
+
     return (
-      <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+      <ButtonBase
+        {...props}
+        tokens={getTokens}
+        heightFull={heightFull}
+        accessibilityRole={accessibilityRole}
+        ref={ref}
+        viewport={viewport}
+      />
     )
   }
 )