@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/lib/Progress/ProgressBar.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -25,6 +27,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 selectBarStyles = ({
   backgroundColor,
   borderRadius,
@@ -35,7 +41,7 @@ const selectBarStyles = ({
   borderRadius,
   outlineWidth,
   outlineColor,
-  width: "".concat(percentage, "%")
+  width: `${percentage}%`
 });
 /**
  * The `ProgressBar` is a visual representation of linear progression.
@@ -73,13 +79,13 @@ const selectBarStyles = ({
  */
 
 
-const ProgressBar = ({
+const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(({
   children = null,
   percentage = 0,
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
 
   if (percentage < 0) {
@@ -94,19 +100,20 @@ const ProgressBar = ({
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ..._propTypes2.a11yProps.select(rest)
   };
   return percentage > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...accessibilityProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant
     })
   }) : null;
-};
-
+});
+ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = {
   /**
    * Optional children that can be used to customize the progress bar filling.
@@ -139,8 +146,12 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   bar: {
     height: '100%',
-    outlineStyle: 'solid',
     overflow: 'hidden',
-    position: 'absolute'
+    position: 'absolute',
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid'
+      }
+    })
   }
 });

package/lib/Progress/ProgressBarBackground.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
 
@@ -17,12 +17,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const inactiveBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E";
-const negativeBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E";
+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); }
 
-const ProgressBarBackground = ({
+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 inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
+const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)(({
   variant
-}) => {
+}, ref) => {
   let source = null;
 
   if (variant !== null && variant !== void 0 && variant.inactive) {
@@ -34,13 +37,14 @@ const ProgressBarBackground = ({
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    ref: ref,
     source: {
-      uri: "data:image/svg+xml,".concat(source)
+      uri: `data:image/svg+xml,${source}`
     },
     style: staticStyles.imageBackground
   });
-};
-
+});
+ProgressBarBackground.displayName = 'ProgressBarBackground';
 ProgressBarBackground.propTypes = {
   /**
    * Progress bar variant.

package/lib/Radio/Radio.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"));
 
@@ -31,12 +31,12 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // @todo move `LabelContent` outside of the `InputLabel` and fix
 // the issue with the cursor not being pointer on Web
 const selectContainerStyles = ({
@@ -67,7 +67,7 @@ const selectDescriptionStyles = ({
   inputSize,
   labelMarginLeft = 0
 }) => ({
-  marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+  marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
   ...(0, _ThemeProvider.applyTextStyles)({
     fontSize: descriptionFontSize,
     lineHeight: descriptionLineHeight
@@ -123,7 +123,7 @@ const selectLabelStyles = ({
  */
 
 
-const Radio = ({
+const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
   checked,
   defaultChecked,
   description,
@@ -137,7 +137,7 @@ const Radio = ({
   value,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -154,22 +154,23 @@ const Radio = ({
     ...variant
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive && !isChecked) {
-      setIsChecked(true);
+      setIsChecked(true, event);
     }
   };
 
-  const handleKeyDown = e => {
+  const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio is the Space key
-    if ((e === null || e === void 0 ? void 0 : e.key) === ' ') handleChange();
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
   const accessibilityProps = _propTypes2.a11yProps.select(rest);
 
   const uniqueId = (0, _utils.useUniqueId)('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
@@ -217,8 +218,8 @@ const Radio = ({
       });
     }
   });
-};
-
+});
+Radio.displayName = 'Radio';
 Radio.propTypes = { ..._propTypes2.a11yProps.propTypes,
 
   /**

package/lib/Radio/RadioButton.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.selectRadioButtonTokens = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -23,6 +25,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; }
+
 // TODO: roll out a standard approach to token sets
 // https://github.com/telus/universal-design-system/issues/782
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
@@ -55,11 +61,15 @@ const selectInputStyles = ({
   borderRadius: getBorderRadius(inputSize),
   borderWidth: inputBorderWidth,
   backgroundColor: inputBackgroundColor,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
   height: inputSize,
-  width: inputSize
+  width: inputSize,
+  ..._Platform.default.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
 });
 
 const selectOuterBorderStyles = ({
@@ -80,7 +90,7 @@ const selectOuterBorderStyles = ({
  */
 
 
-const RadioButton = ({
+const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
   isChecked,
   tokens,
   inactive,
@@ -90,7 +100,7 @@ const RadioButton = ({
   handleChange,
   name: inputName,
   value
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
     checked: isChecked
   }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
@@ -100,6 +110,7 @@ const RadioButton = ({
       style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
       testID: "Radio-Input",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioInput.default, {
+        ref: ref,
         checked: isChecked,
         defaultChecked: defaultChecked,
         disabled: inactive,
@@ -114,8 +125,8 @@ const RadioButton = ({
       })]
     })
   });
-};
-
+});
+RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
   isChecked: _propTypes.default.bool,
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {

package/lib/Radio/RadioGroup.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -25,6 +27,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; }
+
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -73,7 +79,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * />
  * ```
  */
-const RadioGroup = ({
+const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioTokens,
   variant,
@@ -89,7 +95,7 @@ const RadioGroup = ({
   readOnly,
   name: inputGroupName,
   inactive
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -109,18 +115,21 @@ const RadioGroup = ({
   const radios = items.map(({
     label,
     id,
-    onChange: itemOnChange
+    onChange: itemOnChange,
+    ref: itemRef
   }, index) => {
-    const radioId = id || "Radio[".concat(index, "]");
+    const radioId = id || `Radio[${index}]`;
+    const isChecked = currentValue === radioId;
 
-    const handleChange = (...args) => {
-      if (typeof itemOnChange === 'function') itemOnChange(...args);
-      setValue(radioId);
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      if (newCheckedState) setValue(radioId, event);
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
+      ref: itemRef,
       id: radioId,
-      checked: currentValue === radioId,
+      checked: isChecked,
       onChange: handleChange,
       inactive: inactive,
       label: label,
@@ -130,6 +139,7 @@ const RadioGroup = ({
     }, radioId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
     name: inputGroupName,
     legend: legend,
     tooltip: tooltip,
@@ -137,15 +147,15 @@ const RadioGroup = ({
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
-    status: validation,
+    validation: validation,
     accessibilityRole: "radiogroup",
     children: (0, _StackView.getStackedContent)(radios, {
       space,
       direction: 'column'
     })
   });
-};
-
+});
+RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioGroup component
@@ -168,7 +178,8 @@ RadioGroup.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.exact({
     label: _propTypes.default.string,
     id: _propTypes.default.string,
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    ref: _airbnbPropTypes.default.ref()
   })),
 
   /**

package/lib/RadioCard/RadioCard.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"));
 
@@ -27,12 +27,12 @@ var _RadioButton = _interopRequireWildcard(require("../Radio/RadioButton"));
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
  * with need to show additional information for each option. The whole card is interactive as one item.
@@ -68,7 +68,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = ({
+const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   title,
@@ -81,7 +81,7 @@ const RadioCard = ({
   id,
   onChange,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -92,21 +92,22 @@ const RadioCard = ({
     onChange
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive && !isChecked) {
-      setIsChecked(true);
+      setIsChecked(true, event);
     }
   };
 
   const a11y = _utils.a11yProps.select(rest);
 
   const uniqueId = (0, _utils.useUniqueId)('RadioCard');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
+    ref: ref,
     inactive: inactive,
     checked: isChecked,
     tokens: getCardTokens,
@@ -147,6 +148,9 @@ const RadioCard = ({
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
           direction: "column",
           space: contentSpace,
+          tokens: {
+            flexShrink: 1
+          },
           children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
             style: textStyle,
             children: title
@@ -155,8 +159,8 @@ const RadioCard = ({
       });
     }
   });
-};
-
+});
+RadioCard.displayName = 'RadioCard';
 RadioCard.propTypes = { ..._utils.a11yProps.propTypes,
 
   /**

package/lib/RadioCard/RadioCardGroup.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,12 +23,12 @@ var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
  * exclusive options with need to show additional information for each option. The whole cards are each
@@ -79,7 +79,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * />
  * ```
  */
-const RadioCardGroup = ({
+const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioCardTokens,
   variant,
@@ -95,7 +95,7 @@ const RadioCardGroup = ({
   readOnly,
   name: inputGroupName,
   inactive
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -118,6 +118,7 @@ const RadioCardGroup = ({
   // TODO: test this on more web screen readers.
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
     name: inputGroupName,
     legend: legend,
     tooltip: tooltip,
@@ -125,7 +126,7 @@ const RadioCardGroup = ({
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive || readOnly,
-    status: validation,
+    validation: validation,
     accessibilityRole: "radiogroup",
     children: ({
       a11yProps
@@ -138,11 +139,11 @@ const RadioCardGroup = ({
         id,
         onChange: itemOnChange
       }, index) => {
-        const cardId = id || "RadioCard[".concat(index, "]");
+        const cardId = id || `RadioCard[${index}]`;
 
-        const handleChange = (...args) => {
-          if (typeof itemOnChange === 'function') itemOnChange(...args);
-          setValue(cardId);
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+          if (newCheckedState) setValue(cardId, event);
         };
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.default, {
@@ -161,8 +162,8 @@ const RadioCardGroup = ({
       })
     })
   });
-};
-
+});
+RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioCardGroup component