@telus-uds/components-base 1.8.4 → 1.10.0

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/Link/InlinePressable.js

@@ -21,11 +21,12 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     style,
+    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -34,6 +35,9 @@ InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 });

package/lib-module/Link/LinkBase.js

@@ -158,17 +158,20 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
 
   const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
     iconPosition
-  }); // On web, this makes focus rings wrap only the link, not the entire block
+  });
 
+  const defaultThemeTokens = resolveLinkTokens({});
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
+    inline: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const hasIcon = Boolean(icon || themeTokens.icon);
       return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {

package/lib-module/StepTracker/StepTracker.js

@@ -109,7 +109,10 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     dictionary,
     copy
   });
-  const stepTrackerLabel = getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]);
+  const stepTrackerLabel = showStepTrackerLabel ? getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+
+  const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
+
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -135,7 +138,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
           return /*#__PURE__*/_jsx(Step, {
             status: current,
             label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
             tokens: themeTokens

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

@@ -3,6 +3,7 @@ export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Box } from './Box';
 export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
+export * from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export { default as Divider } from './Divider';

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.4",
+  "version": "1.10.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": {
@@ -66,7 +66,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.0.2",
+    "@telus-uds/system-theme-tokens": "^2.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

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,