@telus-uds/components-base 1.8.5 → 1.11.0

package/lib/utils/props/textInputProps.js

@@ -147,7 +147,14 @@ const crossPlatform = { ...textProps,
 const webOnly = {
   disabled: _propTypes.default.bool,
   dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
-  lang: _propTypes.default.string
+  lang: _propTypes.default.string,
+
+  /**
+   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
+   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+   */
+  pattern: _propTypes.default.string
 };
 /**
  * These props are supported in React Native but not React Native Web.

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/Card/Card.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils';
@@ -56,7 +56,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * depending on what you are trying to achieve.
  */
 
-const Card = _ref => {
+const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -69,13 +69,14 @@ const Card = _ref => {
     viewport
   });
   return /*#__PURE__*/_jsx(CardBase, {
+    ref: ref,
     tokens: themeTokens,
     dataSet: dataSet,
     ...selectProps(rest),
     children: children
   });
-};
-
+});
+Card.displayName = 'Card';
 Card.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),