@telus-uds/components-base 1.10.0 → 1.12.1

package/lib/ThemeProvider/utils/styles.js

@@ -28,14 +28,21 @@ function applyTextStyles(_ref) {
     fontWeight = '400',
     fontName,
     fontStyle = 'normal',
+    themeOptions = {
+      // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+      forceAbsoluteFontSizing: true
+    },
     ...rest
   } = _ref;
   const styles = { ...rest
   };
+  const {
+    forceAbsoluteFontSizing
+  } = themeOptions;
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize;
+    styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / _systemConstants.fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -194,7 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
   }
 };
 

package/lib/Typography/Typography.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
 const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -52,6 +52,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -76,10 +77,13 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };

package/lib/index.js

@@ -20,6 +20,7 @@ var _exportNames = {
   Icon: true,
   IconButton: true,
   InputLabel: true,
+  InputSupports: true,
   List: true,
   ListItem: true,
   ListBase: true,
@@ -158,6 +159,12 @@ Object.defineProperty(exports, "InputLabel", {
     return _InputLabel.default;
   }
 });
+Object.defineProperty(exports, "InputSupports", {
+  enumerable: true,
+  get: function () {
+    return _InputSupports.default;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -455,6 +462,8 @@ var _IconButton = _interopRequireDefault(require("./IconButton"));
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
+var _InputSupports = _interopRequireDefault(require("./InputSupports"));
+
 var _Link = require("./Link");
 
 Object.keys(_Link).forEach(function (key) {

package/lib/utils/index.js

@@ -9,6 +9,7 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
+  useScrollBlocking: true,
   useUniqueId: true,
   withLinkRouter: true,
   containUniqueFields: true
@@ -43,6 +44,12 @@ Object.defineProperty(exports, "useResponsiveProp", {
     return _useResponsiveProp.default;
   }
 });
+Object.defineProperty(exports, "useScrollBlocking", {
+  enumerable: true,
+  get: function () {
+    return _useScrollBlocking.default;
+  }
+});
 Object.defineProperty(exports, "useSpacingScale", {
   enumerable: true,
   get: function () {
@@ -168,6 +175,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
   });
 });
 
+var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));
+
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
 var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));

package/lib/utils/props/clickProps.js

@@ -11,8 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 };
 var _default = {
   /**

package/lib/utils/props/handlerProps.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textInputHandlerProps = exports.focusHandlerProps = exports.default = void 0;
+exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const focusHandlerProps = {
@@ -20,19 +24,10 @@ const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: _propTypes.default.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
 exports.focusHandlerProps = focusHandlerProps;
+focusHandlerProps.select = (0, _getPropSelector.default)(focusHandlerProps.types);
 const textInputHandlerProps = {
   types: {
     /**
@@ -53,26 +48,77 @@ const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: _propTypes.default.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: _propTypes.default.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: _propTypes.default.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: _propTypes.default.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: _propTypes.default.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: _propTypes.default.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: _propTypes.default.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: _propTypes.default.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: _propTypes.default.func
   }
 };
 exports.textInputHandlerProps = textInputHandlerProps;
-var _default = {
-  focusHandlerProps,
-  textInputHandlerProps
-};
-exports.default = _default;
+const selectTextInputHandlers = (0, _getPropSelector.default)(textInputHandlerProps.types);
+
+textInputHandlerProps.select = props => {
+  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
+  const {
+    onKeyPress,
+    onKeyUp,
+    onKeyDown,
+    ...resolvedProps
+  } = selectTextInputHandlers(props);
+
+  if (onKeyPress || onKeyUp || onKeyDown) {
+    if (_Platform.default.OS !== 'web') {
+      // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
+      resolvedProps.onKeyPress = event => {
+        if (typeof onKeyDown === 'function') onKeyDown(event);
+        if (typeof onKeyPress === 'function') onKeyPress(event);
+        if (typeof onKeyUp === 'function') onKeyUp(event);
+      };
+    } else {
+      // React Native Web supports onKeyUp the normal way.
+      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
+      // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
+
+      if (onKeyPress || onKeyDown) {
+        resolvedProps.onKeyPress = event => {
+          if (typeof onKeyDown === 'function') onKeyDown(event);
+          if (typeof onKeyPress === 'function') onKeyPress(event);
+        };
+      }
+    }
+  }
+
+  return resolvedProps;
+};

package/lib/utils/useScrollBlocking.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current;
+
+  document.body.addEventListener('touchmove', preventScrolling, {
+    passive: false
+  });
+  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'hidden';
+};
+
+const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current2;
+
+  document.body.removeEventListener('touchmove', preventScrolling);
+  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'inherit';
+};
+/**
+ * Disables scrolling when passed `true` or an array where all items are `true`.
+ *
+ * Returns an optional callback ref. Pass this to an element if it or its children
+ * should allow touch-based scrolling within that element's bounds.
+ *
+ * @param {boolean | boolean[]} conditionProps
+ * @returns
+ */
+
+
+const useScrollBlocking = conditionProps => {
+  // useRef refs are null on first render and don't trigger a re-render when they get their
+  // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
+  const ref = (0, _react.useRef)();
+  const [refIsMounted, setRefIsMounted] = (0, _react.useState)(false);
+  const callbackRef = (0, _react.useCallback)(element => {
+    ref.current = element;
+    setRefIsMounted(Boolean(element));
+  }, []);
+  const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
+  const preventScrolling = (0, _react.useCallback)(event => event.preventDefault(), []);
+  const stopPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
+  (0, _react.useEffect)(() => {
+    const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
+
+    if (conditionsMet) {
+      addScrollBlocking(preventScrolling, stopPropagation, ref);
+    } else {
+      cleanup();
+    }
+
+    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    // will re-run when conditionsMet or refIsMounted flip between true and false.
+  }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
+  return callbackRef;
+};
+
+var _default = useScrollBlocking;
+exports.default = _default;

package/lib/utils/useScrollBlocking.native.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+// This is a no-op to emphasize that the original hook is web-only
+var _default = () => {};
+
+exports.default = _default;

package/lib-module/BaseProvider/index.js

@@ -10,12 +10,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const BaseProvider = _ref => {
   let {
     defaultTheme,
-    children
+    children,
+    themeOptions
   } = _ref;
   return /*#__PURE__*/_jsx(A11yInfoProvider, {
     children: /*#__PURE__*/_jsx(ViewportProvider, {
       children: /*#__PURE__*/_jsx(ThemeProvider, {
         defaultTheme: defaultTheme,
+        themeOptions: themeOptions,
         children: children
       })
     })
@@ -23,7 +25,10 @@ const BaseProvider = _ref => {
 };
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool
+  })
 };
 export default BaseProvider;

package/lib-module/Button/ButtonBase.js

@@ -4,7 +4,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils';
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
 import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -131,7 +131,7 @@ const selectBorderStyles = _ref5 => {
   };
 };
 
-const selectTextStyles = _ref6 => {
+const selectTextStyles = (_ref6, themeOptions) => {
   let {
     fontSize,
     color,
@@ -146,6 +146,7 @@ const selectTextStyles = _ref6 => {
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   });
 };
@@ -197,6 +198,9 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -212,7 +216,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;