@telus-uds/components-base 1.8.5 → 1.11.0

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps } from '../../utils';
+import { useCarousel } from '../CarouselContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+
+const CarouselItem = _ref => {
+  let {
+    children,
+    elementIndex,
+    tag = 'li',
+    hidden,
+    ...rest
+  } = _ref;
+  const {
+    width,
+    activeIndex
+  } = useCarousel();
+  const selectedProps = selectProps({ ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  const style = {
+    width
+  };
+
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden';
+  }
+
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    ...selectedProps,
+    ...focusabilityProps,
+    children: children
+  });
+};
+
+CarouselItem.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Index of the current slide
+   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   */
+  elementIndex: PropTypes.number,
+
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: PropTypes.string,
+
+  /**
+   * Content of the slide
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags)
+};
+CarouselItem.displayName = 'Carousel.Item';
+export default CarouselItem;

package/lib-module/Carousel/CarouselItem/index.js

@@ -0,0 +1,2 @@
+import CarouselItem from './CarouselItem';
+export default CarouselItem;

package/lib-module/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export default {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+};

package/lib-module/Carousel/index.js

@@ -0,0 +1,2 @@
+export * from './CarouselContext';
+export { default as Carousel } from './Carousel';

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

@@ -16,7 +16,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     tooltip,
-    validation
+    validation,
+    nativeID
   } = _ref;
   const {
     space
@@ -30,7 +31,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     hint,
     label,
-    validation
+    validation,
+    nativeID
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -91,6 +93,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 };
 export default InputSupports;

package/lib-module/InputSupports/useInputSupports.js

@@ -7,7 +7,8 @@ const useInputSupports = _ref => {
     label,
     feedback,
     validation,
-    hint
+    hint,
+    nativeID
   } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
@@ -22,7 +23,7 @@ const useInputSupports = _ref => {
     accessibilityInvalid: hasValidationError
   };
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/lib-module/Modal/Modal.js

@@ -10,6 +10,7 @@ import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy
 import { useViewport } from '../ViewportProvider';
 import IconButton from '../IconButton';
 import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -110,6 +111,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     viewport,
     maxWidth
   });
+  const modalRef = useScrollBlocking(isOpen);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -140,6 +142,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.positioningContainer],
+      ref: modalRef,
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events

package/lib-module/Skeleton/Skeleton.js

@@ -19,6 +19,7 @@ const selectSkeletonStyles = _ref => {
   return {
     backgroundColor: color,
     borderRadius: radius,
+    maxWidth: '100%',
     ...fadeAnimation
   };
 };

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
@@ -151,19 +154,18 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker';
+StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+});
 StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    }),
-    fr: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),

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
@@ -48,7 +40,9 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    nativeID: selectedProps.nativeID,
+    ...supportsProps,
     children: _ref2 => {
       let {
         inputId,

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';
@@ -16,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/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/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/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.8.5",
+  "version": "1.11.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -47,7 +47,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-native": "*",
-    "react-native-web": "^0.17.0"
+    "react-native-web": "~0.17.5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.6",
@@ -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,