@telus-uds/components-base 1.10.0 → 1.12.1

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

@@ -158,6 +158,6 @@ export 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 (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(pkg.name, " v").concat(pkg.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(pkg.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(pkg.name, " v").concat(pkg.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(pkg.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-module/Typography/Typography.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
 import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -31,6 +31,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -55,10 +56,13 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = useTheme();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };

package/lib-module/index.js

@@ -17,6 +17,7 @@ export { default as Icon } from './Icon';
 export * from './Icon';
 export { default as IconButton } from './IconButton';
 export { default as InputLabel } from './InputLabel';
+export { default as InputSupports } from './InputSupports';
 export * from './Link';
 export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';

package/lib-module/utils/index.js

@@ -9,6 +9,7 @@ export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';
 export { default as useSpacingScale } from './useSpacingScale';
 export { default as useResponsiveProp } from './useResponsiveProp';
+export { default as useScrollBlocking } from './useScrollBlocking';
 export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';

package/lib-module/utils/props/clickProps.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 };
 export default {
   /**

package/lib-module/utils/props/handlerProps.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-export const focusHandlerProps = {
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
+const focusHandlerProps = {
   types: {
     /**
      * onBlur handler
@@ -10,19 +12,10 @@ export const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: PropTypes.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
-export const textInputHandlerProps = {
+focusHandlerProps.select = getPropSelector(focusHandlerProps.types);
+const textInputHandlerProps = {
   types: {
     /**
      * onChange handler
@@ -42,24 +35,78 @@ export const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: PropTypes.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: PropTypes.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: PropTypes.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: PropTypes.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: PropTypes.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: PropTypes.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: PropTypes.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: PropTypes.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: PropTypes.func
   }
 };
-export default {
-  focusHandlerProps,
-  textInputHandlerProps
-};
+const selectTextInputHandlers = getPropSelector(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.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;
+};
+
+export { focusHandlerProps, textInputHandlerProps };

package/lib-module/utils/useScrollBlocking.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from '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 = useRef();
+  const [refIsMounted, setRefIsMounted] = useState(false);
+  const callbackRef = useCallback(element => {
+    ref.current = element;
+    setRefIsMounted(Boolean(element));
+  }, []);
+  const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
+  const preventScrolling = useCallback(event => event.preventDefault(), []);
+  const stopPropagation = useCallback(event => event.stopPropagation(), []);
+  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;
+};
+
+export default useScrollBlocking;

package/lib-module/utils/useScrollBlocking.native.js

@@ -0,0 +1,2 @@
+// This is a no-op to emphasize that the original hook is web-only
+export default (() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.10.0",
+  "version": "1.12.1",
   "description": "Base components",
   "keywords": [
     "base"
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "^0.17.0"
+    "react-native": "*",
+    "react-native-web": "~0.17.5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.6",

package/src/BaseProvider/index.jsx

@@ -4,17 +4,20 @@ import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 
-const BaseProvider = ({ defaultTheme, children }) => (
+const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
   <A11yInfoProvider>
     <ViewportProvider>
-      <ThemeProvider defaultTheme={defaultTheme}>{children}</ThemeProvider>
+      <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
+        {children}
+      </ThemeProvider>
     </ViewportProvider>
   </A11yInfoProvider>
 )
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
 }
 
 export default BaseProvider

package/src/Button/ButtonBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider'
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
@@ -121,13 +121,17 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
   borderRadius
 })
 
-const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, textAlign }) =>
+const selectTextStyles = (
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  themeOptions
+) =>
   applyTextStyles({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   })
 
@@ -174,6 +178,7 @@ const ButtonBase = forwardRef(
         selectOuterWidthStyles(themeTokens)
       ]
     }
+    const { themeOptions } = useTheme()
 
     return (
       <Pressable
@@ -189,7 +194,7 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+          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.