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

package/lib/Icon/Icon.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.iconComponentPropTypes = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -21,13 +21,18 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Icon = ({
+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 Icon = /*#__PURE__*/(0, _react.forwardRef)(({
   icon: IconComponent,
   accessibilityLabel,
   variant,
   tokens,
-  scalesWithText = false
-}) => {
+  scalesWithText = false,
+  dataSet
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
   const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
@@ -35,18 +40,20 @@ const Icon = ({
     size: size,
     color: themeTokens.color
   });
-  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default // eslint-disable-next-line react-native/no-inline-styles
-  , {
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref // eslint-disable-next-line react-native/no-inline-styles
+    ,
     style: {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     },
+    dataSet: dataSet,
     children: iconContent
   }) : iconContent;
-};
-
+});
+Icon.displayName = 'Icon';
 const iconComponentPropTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Icon'),

package/lib/Icon/IconText.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"));
 
@@ -21,12 +21,12 @@ var _utils = require("../utils");
 
 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 }; }
-
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
  * intended for use when creating components, not intended for use in applications on its own.
@@ -35,16 +35,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = ({
+const IconText = /*#__PURE__*/(0, _react.forwardRef)(({
   space,
   iconPosition = 'left',
   icon: IconComponent,
   iconProps,
   children
-}) => {
+}, ref) => {
   var _iconProps$tokens;
 
   const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ref: ref,
     icon: IconComponent,
     scalesWithText: true,
     ...iconProps
@@ -64,8 +65,8 @@ const IconText = ({
     space,
     direction: 'row'
   });
-};
-
+});
+IconText.displayName = 'IconText';
 IconText.propTypes = {
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale

package/lib/IconButton/IconButton.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"));
 
@@ -29,6 +29,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 selectOuterStyle = ({
   backgroundColor,
   borderRadius,
@@ -73,7 +77,7 @@ const selectInnerStyle = ({
  */
 
 
-const IconButton = ({
+const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   icon: IconComponent,
@@ -82,7 +86,7 @@ const IconButton = ({
   onPress,
   accessibilityRole = href ? 'link' : 'button',
   ...rest
-}) => {
+}, ref) => {
   const a11y = _propTypes2.a11yProps.select({ ...rest,
     accessibilityRole
   });
@@ -97,6 +101,7 @@ const IconButton = ({
   const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     href: href,
     onPress: handlePress,
     hrefAttrs: hrefAttrs,
@@ -114,8 +119,8 @@ const IconButton = ({
       });
     }
   });
-};
-
+});
+IconButton.displayName = 'IconButton';
 IconButton.propTypes = { ..._propTypes2.a11yProps.types,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('IconButton'),

package/lib/InputLabel/InputLabel.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
@@ -27,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 selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
 const selectHintStyles = ({
@@ -49,7 +53,7 @@ const selectGapStyles = ({
   marginRight: gap
 });
 
-function InputLabel({
+const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
   forId,
   hint,
@@ -58,11 +62,12 @@ function InputLabel({
   tooltip,
   tokens,
   variant
-}) {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
     style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
@@ -85,14 +90,37 @@ function InputLabel({
       children: hint
     })]
   });
-}
-
+});
+InputLabel.displayName = 'InputLabel';
 InputLabel.propTypes = {
+  /**
+   * The input label.
+   */
   label: _propTypes.default.string.isRequired,
+
+  /**
+   * The id attribute of the input which this label refers to.
+   */
   forId: _propTypes.default.string,
+
+  /**
+   * A short description of the expected input.
+   */
   hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
   hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * The id attribute passed down to the hint element.
+   */
   hintId: _propTypes.default.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
   tooltip: _propTypes.default.string,
   tokens: (0, _utils.getTokensPropType)('InputLabel'),
   variant: _utils.variantProp.propType

package/lib/InputLabel/LabelContent.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"));
 
@@ -13,19 +13,29 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function LabelContent({
+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 LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   forId
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-    htmlFor: forId,
-    children: children
-  });
-}
-
-var _default = LabelContent;
-exports.default = _default;
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+  ref: ref,
+  htmlFor: forId,
+  style: staticStyles.inheritCursor,
+  children: children
+}));
+LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: _propTypes.default.string,
   forId: _propTypes.default.string
-};
+}; // Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+
+const staticStyles = {
+  inheritCursor: {
+    cursor: 'inherit'
+  }
+};
+var _default = LabelContent;
+exports.default = _default;

package/lib/InputLabel/LabelContent.native.js

@@ -5,12 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+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; }
+
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-function LabelContent({
+const LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
   children
-}) {
-  return children;
-}
-
+}, ref) => ref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
+  children: children
+}) : children);
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: _propTypes.default.node
+};
 var _default = LabelContent;
 exports.default = _default;

package/lib/InputSupports/InputSupports.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,7 +23,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function InputSupports({
+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 InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   label,
   hint,
@@ -31,7 +35,7 @@ function InputSupports({
   feedback,
   tooltip,
   validation
-}) {
+}, ref) => {
   const {
     space
   } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
@@ -48,6 +52,7 @@ function InputSupports({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: space,
+    ref: ref,
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
       label: label,
       hint: hint,
@@ -64,8 +69,8 @@ function InputSupports({
       validation: validation
     })]
   });
-}
-
+});
+InputSupports.displayName = 'InputSupports';
 InputSupports.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 

package/lib/Link/ChevronLink.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"));
 
@@ -19,19 +19,24 @@ 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; }
+
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
  * It effectively pre-binds left and right icons, and a directional translation of the icon on hover.
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = ({
+const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'right',
   children,
   tokens,
   variant,
+  dataSet,
   ...linkProps
-}) => {
+}, ref) => {
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
 
   const applyChevronTokens = linkState => {
@@ -51,10 +56,12 @@ const ChevronLink = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, { ...linkProps,
     iconPosition: direction,
     tokens: getTokens,
+    dataSet: dataSet,
+    ref: ref,
     children: children
   });
-};
-
+});
+ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = { ..._LinkBase.default.propTypes,
   tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
   direction: _propTypes.default.oneOf(['left', 'right'])

package/lib/Link/InlinePressable.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
@@ -15,6 +15,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; }
+
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -29,15 +33,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = ({
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   style,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  ref: ref,
   style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
   ...props,
   children: pressState => typeof children === 'function' ? children(pressState) : children
-});
+}));
+InlinePressable.displayName = 'InlinePressable';
 
 const staticStyles = _StyleSheet.default.create({
   inline: {

package/lib/Link/InlinePressable.native.js

@@ -57,12 +57,12 @@ const pressablePropsToTouchable = ({
 // eslint-disable-next-line react/prop-types
 
 
-const InlinePressable = ({
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   children,
   style,
   ...rest
-}) => {
+}, ref) => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = () => setIsFocused(true);
@@ -89,13 +89,14 @@ const InlinePressable = ({
     onPressOut: handlePressOut,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    ref: ref,
     ...pressablePropsToTouchable(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: currentStyle,
       children: typeof children === 'function' ? children(pressState) : children
     })
   });
-};
-
+});
+InlinePressable.displayName = 'InlinePressable';
 var _default = InlinePressable;
 exports.default = _default;

package/lib/Link/Link.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
@@ -15,24 +15,31 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Link = ({
+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 Link = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
   children,
   accessibilityRole = 'link',
   variant = {},
   tokens,
+  dataSet,
   ...linkProps
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     href: href,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
+    ref: ref,
+    dataSet: dataSet,
     ...linkProps,
     children: children
   });
-};
-
+});
+Link.displayName = 'Link';
 Link.propTypes = _LinkBase.default.propTypes;
 var _default = Link;
 exports.default = _default;

package/lib/Link/LinkBase.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"));
 
@@ -29,6 +29,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 selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -114,7 +118,7 @@ const selectIconTokens = ({
  */
 
 
-const LinkBase = ({
+const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
   onPress,
   icon,
@@ -124,8 +128,9 @@ const LinkBase = ({
   tokens = {},
   children,
   accessibilityRole = 'link',
+  dataSet,
   ...props
-}) => {
+}, ref) => {
   const {
     hrefAttrs,
     rest
@@ -149,6 +154,8 @@ const LinkBase = ({
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...linkPropSet,
+    ref: ref,
+    dataSet: dataSet,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
@@ -180,8 +187,8 @@ const LinkBase = ({
       });
     }
   });
-};
-
+});
+LinkBase.displayName = 'LinkBase';
 LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
   ..._propTypes2.linkProps.types,
   tokens: (0, _propTypes2.getTokensPropType)('Link'),