@telus-uds/components-base 1.8.5 → 1.9.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 28 Jun 2022 21:35:29 GMT and should not be manually modified.
+This log was last generated on Fri, 08 Jul 2022 22:41:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.9.0
+
+Fri, 08 Jul 2022 22:41:05 GMT
+
+### Minor changes
+
+- feat: add a controlRef prop to ExpandCollapse.Panel (ruslan.bredikhin@nearform.com)
+
+### Patches
+
+- don't throw if pattern used without ref (alan.slater@nearform.com)
+- Add forwardRef to Card (alan.slater@nearform.com)
+- Support pattern in all text input components (alan.slater@nearform.com)
+
 ## 1.8.5
 
-Tue, 28 Jun 2022 21:35:29 GMT
+Tue, 28 Jun 2022 21:36:14 GMT
 
 ### Patches
 

package/component-docs.json

@@ -1810,6 +1810,14 @@
               },
               "required": false,
               "description": "Optional theme token overrides that may be passed to the ExpandCollapseControl element."
+            },
+            "controlRef": {
+              "type": {
+                "name": "custom",
+                "raw": "ABBPropTypes.ref()"
+              },
+              "required": false,
+              "description": "An optional ref to be attached to the control"
             }
           },
           "attributes": {
@@ -2694,6 +2702,14 @@
               },
               "required": false,
               "description": "Optional theme token overrides that may be passed to the ExpandCollapseControl element."
+            },
+            "controlRef": {
+              "type": {
+                "name": "custom",
+                "raw": "ABBPropTypes.ref()"
+              },
+              "required": false,
+              "description": "An optional ref to be attached to the control"
             }
           },
           "attributes": {

package/lib/Card/Card.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,6 +23,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
 /**
  * A basic card component, unstyled by default.
@@ -73,7 +77,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * depending on what you are trying to achieve.
  */
 
-const Card = _ref => {
+const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     tokens,
@@ -86,13 +90,14 @@ const Card = _ref => {
     viewport
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    ref: ref,
     tokens: themeTokens,
     dataSet: dataSet,
     ...selectProps(rest),
     children: children
   });
-};
-
+});
+Card.displayName = 'Card';
 Card.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node,
   tokens: (0, _utils.getTokensPropType)('Card'),

package/lib/ExpandCollapse/Panel.js

@@ -15,6 +15,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _Control = _interopRequireDefault(require("./Control"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -70,6 +72,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
+    controlRef,
     ...rest
   } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
@@ -112,6 +115,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       isExpanded: isExpanded,
       tokens: controlTokens,
       onPress: handleControlPress,
+      ref: controlRef,
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
       ref: animatedRef,
@@ -167,7 +171,12 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl')
+  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: _airbnbPropTypes.default.ref()
 };
 var _default = ExpandCollapsePanel;
 exports.default = _default;

package/lib/TextInput/TextInput.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
@@ -49,17 +47,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
     variant = {},
-    pattern,
     ...rest
   } = _ref;
-
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
-
   const {
     supportsProps,
     ...selectedProps

package/lib/TextInput/TextInputBase.js

@@ -156,6 +156,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    pattern,
     tokens,
     variant = {},
     ...rest
@@ -194,6 +195,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onChange,
     readOnly
   });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
 
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;

package/lib/TextInput/propTypes.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -38,12 +38,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: _propTypes.default.func,
-  ..._Platform.default.select({
-    web: {
-      pattern: _propTypes.default.string
-    }
-  })
+  onChange: _propTypes.default.func
 };
 var _default = textInputPropTypes;
 exports.default = _default;

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-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'),

package/lib-module/ExpandCollapse/Panel.js

@@ -3,6 +3,7 @@ import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
@@ -49,6 +50,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children,
     tokens,
     variant,
+    controlRef,
     ...rest
   } = _ref2;
   const [containerHeight, setContainerHeight] = useState(null);
@@ -91,6 +93,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       isExpanded: isExpanded,
       tokens: controlTokens,
       onPress: handleControlPress,
+      ref: controlRef,
       children: control
     }), /*#__PURE__*/_jsx(Animated.View, {
       ref: animatedRef,
@@ -146,6 +149,11 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: getTokensPropType('ExpandCollapseControl')
+  controlTokens: getTokensPropType('ExpandCollapseControl'),
+
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: ABBPropTypes.ref()
 };
 export default ExpandCollapsePanel;

package/lib-module/TextInput/TextInput.js

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
 import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
@@ -29,15 +28,8 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
-    pattern,
     ...rest
   } = _ref;
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
   const {
     supportsProps,
     ...selectedProps

package/lib-module/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
@@ -133,6 +133,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    pattern,
     tokens,
     variant = {},
     ...rest
@@ -171,6 +172,14 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     onChange,
     readOnly
   });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  useEffect(() => {
+    if (Platform.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
 
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;

package/lib-module/TextInput/propTypes.js

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types'; // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
+
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -27,11 +28,6 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func,
-  ...Platform.select({
-    web: {
-      pattern: PropTypes.string
-    }
-  })
+  onChange: PropTypes.func
 };
 export default textInputPropTypes;

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

@@ -135,7 +135,14 @@ const crossPlatform = { ...textProps,
 const webOnly = {
   disabled: PropTypes.bool,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
+  lang: PropTypes.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.string
 };
 /**
  * These props are supported in React Native but not React Native Web.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -46,7 +46,7 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "*",
+    "react-native": "0.68.2",
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {

package/src/Card/Card.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -57,16 +57,18 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = ({ children, tokens, variant, dataSet, ...rest }) => {
+const Card = forwardRef(({ children, tokens, variant, dataSet, ...rest }, ref) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
 
   return (
-    <CardBase tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
+    <CardBase ref={ref} tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
       {children}
     </CardBase>
   )
-}
+})
+
+Card.displayName = 'Card'
 
 Card.propTypes = {
   ...selectedSystemPropTypes,

package/src/ExpandCollapse/Panel.jsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from 'react'
 import { Animated, Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 
 import ExpandCollapseControl from './Control'
 import { useThemeTokens } from '../ThemeProvider'
@@ -51,6 +52,7 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
+      controlRef,
       ...rest
     },
     ref
@@ -95,6 +97,7 @@ const ExpandCollapsePanel = forwardRef(
           isExpanded={isExpanded}
           tokens={controlTokens}
           onPress={handleControlPress}
+          ref={controlRef}
         >
           {control}
         </ExpandCollapseControl>
@@ -142,7 +145,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: getTokensPropType('ExpandCollapseControl')
+  controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: ABBPropTypes.ref()
 }
 
 export default ExpandCollapsePanel

package/src/TextInput/TextInput.jsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react'
-import { Platform } from 'react-native'
 import {
   a11yProps,
   focusHandlerProps,
@@ -42,13 +41,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) => {
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern
-    }
-  }, [ref, pattern])
+const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {

package/src/TextInput/TextInputBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -128,6 +128,7 @@ const TextInputBase = forwardRef(
       onBlur,
       onMouseOver,
       onMouseOut,
+      pattern,
       tokens,
       variant = {},
       ...rest
@@ -161,6 +162,15 @@ const TextInputBase = forwardRef(
       readOnly
     })
 
+    const element = ref?.current
+    useEffect(() => {
+      if (Platform.OS === 'web' && pattern && element) {
+        // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+        // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+        element.pattern = pattern
+      }
+    }, [element, pattern])
+
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text || event.target?.value
       setValue(text, event)

package/src/TextInput/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
-import { Platform } from 'react-native'
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -24,12 +25,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func,
-  ...Platform.select({
-    web: {
-      pattern: PropTypes.string
-    }
-  })
+  onChange: PropTypes.func
 }
 
 export default textInputPropTypes

package/src/utils/props/textInputProps.js

@@ -121,7 +121,13 @@ const crossPlatform = {
 const webOnly = {
   disabled: PropTypes.bool,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
+  lang: PropTypes.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.string
 }
 
 /**