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

package/lib/Tags/Tags.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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -35,6 +37,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 selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -71,7 +77,7 @@ const selectIconTextTokens = ({
   }
 });
 
-const Tags = ({
+const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   items = [],
@@ -86,7 +92,7 @@ const Tags = ({
     default: 'none'
   }),
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
@@ -117,14 +123,17 @@ const Tags = ({
   });
 
   const itemA11yRole = 'checkbox';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...a11y,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    ref: ref,
+    ...a11y,
     space: space,
     direction: direction,
     tokens: stackTokens,
     children: items.map(({
       label,
       id = label,
-      accessibilityLabel
+      accessibilityLabel,
+      ref: itemRef
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -134,9 +143,9 @@ const Tags = ({
         currentValues
       }]);
 
-      const handlePress = () => {
+      const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress();
-        toggleOneValue(id);
+        toggleOneValue(id, event);
       };
 
       const itemA11y = {
@@ -147,7 +156,9 @@ const Tags = ({
         accessibilityLabel,
         ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...pressHandlers,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        ref: itemRef,
+        ...pressHandlers,
         onPress: handlePress,
         tokens: getButtonTokens,
         selected: isSelected,
@@ -189,8 +200,8 @@ const Tags = ({
       }, id);
     })
   });
-};
-
+});
+Tags.displayName = 'Tags';
 Tags.propTypes = { ..._propTypes2.a11yProps.propTypes,
   ..._propTypes2.pressProps.propTypes,
   tokens: (0, _propTypes2.getTokensPropType)('Tags'),
@@ -222,7 +233,12 @@ Tags.propTypes = { ..._propTypes2.a11yProps.propTypes,
      * which will be used in code and passed to any onChange function.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+
+    /**
+     * An optional ref for one individual Tag button in the tags
+     */
+    ref: _airbnbPropTypes.default.ref()
   })),
 
   /**

package/lib/TextInput/TextArea.js

@@ -53,11 +53,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-function TextArea({
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
 
@@ -92,13 +92,15 @@ function TextArea({
     children: ({
       a11yProps,
       inputId
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
       ...a11yProps,
       nativeID: inputId
     })
   });
-}
-
+});
+TextArea.displayName = 'TextArea';
 TextArea.propTypes = { ..._propTypes.default.types,
   ..._propTypes2.default,
   tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),

package/lib/TextInput/TextInput.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
@@ -21,6 +21,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 basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -39,11 +43,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-function TextInput({
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const {
     props: supportsProps,
     rest
@@ -59,13 +63,15 @@ function TextInput({
     children: ({
       a11yProps,
       inputId
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
       ...a11yProps,
       nativeID: inputId
     })
   });
-}
-
+});
+TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ..._propTypes.default.types,
   ..._propTypes2.default,
   tokens: (0, _utils.getTokensPropType)('TextInput'),

package/lib/TextInput/TextInputBase.js

@@ -130,7 +130,7 @@ const selectIconContainerStyles = ({
   paddingBottom
 });
 
-function TextInputBase({
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   height,
   initialValue,
@@ -145,7 +145,7 @@ function TextInputBase({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {
@@ -181,9 +181,12 @@ function TextInputBase({
     readOnly
   });
 
-  const handleChangeText = text => {
-    setValue(text);
-    if (typeof onChangeText === 'function') onChangeText(text);
+  const handleChangeText = event => {
+    var _event$nativeEvent, _event$target;
+
+    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    setValue(text, event);
+    if (typeof onChangeText === 'function') onChangeText(text, event);
   };
 
   const states = {
@@ -201,7 +204,7 @@ function TextInputBase({
     onBlur: handleBlur,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    onChangeText: handleChangeText,
+    onChange: handleChangeText,
     defaultValue: initialValue,
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
@@ -213,6 +216,7 @@ function TextInputBase({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -223,8 +227,8 @@ function TextInputBase({
       })
     })]
   });
-}
-
+});
+TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = {
   value: _propTypes.default.string,
   height: _propTypes.default.number,

package/lib/ThemeProvider/ThemeProvider.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.themeType = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+exports.default = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("./utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,18 +23,18 @@ const uninitialisedError = new Error('Theme context used outside of ThemeProvide
 exports.uninitialisedError = uninitialisedError;
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // TODO: develop this as theme metadata is added
-// https://github.com/telus/universal-design-system/issues/92
-
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeSetterContext = ThemeSetterContext;
-const themeType = _propTypes.default.object;
-exports.themeType = themeType;
 
 const ThemeProvider = ({
   children,
   defaultTheme
 }) => {
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
+  // This will intentionally break the application when attempting to use an invalid theme.
+  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
+
+  (0, _utils.validateThemeTokensVersion)(theme);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
@@ -43,10 +45,12 @@ const ThemeProvider = ({
 };
 
 ThemeProvider.propTypes = {
-  // TODO: implement a custom propType that validates schema version
-  // https://github.com/telus/universal-design-system/issues/92
   children: _propTypes.default.node.isRequired,
-  defaultTheme: themeType.isRequired
+  defaultTheme: _propTypes.default.shape({
+    metadata: _propTypes.default.shape({
+      themeTokensVersion: _propTypes.default.string.isRequired
+    }).isRequired
+  }).isRequired
 };
 var _default = ThemeProvider;
 exports.default = _default;

package/lib/ThemeProvider/useSetTheme.js

@@ -11,7 +11,12 @@ var _ThemeProvider = require("./ThemeProvider");
 
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Merge provided object into current theme
+  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
+
+  if (setTheme instanceof Error) {
+    throw setTheme;
+  } // Merge provided object into current theme
+
 
   const editTheme = (0, _react.useCallback)(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
     ...newTheme

package/lib/ThemeProvider/utils/styles.js

@@ -50,7 +50,7 @@ function applyTextStyles({
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
+    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
@@ -99,7 +99,7 @@ function applyWebShadow({
 }) {
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
+    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
   };
   return boxShadow;
 }

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
+exports.validateThemeTokensVersion = exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _satisfies = _interopRequireDefault(require("semver/functions/satisfies"));
+
+var _package = _interopRequireDefault(require("../../../package.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -24,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
+    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
+    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
+    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
   }
 
   return componentTheme;
@@ -45,10 +49,8 @@ const getComponentTheme = (theme, componentName) => {
 exports.getComponentTheme = getComponentTheme;
 
 const doesThemeConditionApply = ([key, value], appearances) => {
-  var _appearances$key;
-
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
+  const appearanceValue = appearances[key] ?? null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -154,5 +156,34 @@ const getThemeTokens = ({
 exports.getThemeTokens = getThemeTokens;
 
 const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+/**
+ * Throws an error if the theme was built with an incompatible version of @telus-uds/system-theme-tokens
+ *
+ * This is used internally by the ThemeProvider to force a fast failure when an incompatible version is detected.
+ *
+ * Version compatibility is calculated with semver.satisfies.
+ * Refer to https://github.com/npm/node-semver and https://semver.npmjs.com/ for details about how
+ * semver compatibility.
+ *
+ * @param {object} theme - UDS theme built for react-native
+ */
+
+
+exports.toArray = toArray;
+
+const validateThemeTokensVersion = theme => {
+  var _theme$metadata2;
+
+  const expectedThemeTokensVersion = _package.default.dependencies['@telus-uds/system-theme-tokens'];
+  const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
+
+  if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
+    throw new Error(`Invalid UDS token schema version detected.
+
+The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
+
+If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`);
+  }
+};
 
-exports.toArray = toArray;
+exports.validateThemeTokensVersion = validateThemeTokensVersion;

package/lib/ToggleSwitch/ToggleSwitch.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,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 selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
@@ -76,7 +80,7 @@ const selectSwitchStyles = ({
   })
 });
 
-const ToggleSwitch = ({
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
@@ -84,7 +88,7 @@ const ToggleSwitch = ({
   tokens,
   variant,
   accessibilityRole = 'switch'
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const {
     currentValue,
@@ -95,11 +99,12 @@ const ToggleSwitch = ({
     onChange
   });
 
-  const handlePress = () => setValue(!currentValue);
+  const handlePress = event => setValue(!currentValue, event);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
     selected: currentValue,
     inactive: inactive,
     tokens: getButtonTokens,
@@ -134,8 +139,8 @@ const ToggleSwitch = ({
       });
     }
   });
-};
-
+});
+ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
   ..._propTypes2.pressProps.propTypes,
   tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),

package/lib/Tooltip/Backdrop.js

@@ -19,7 +19,15 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  node.style.cssText = `
+  position: absolute; 
+  top: ${window.scrollY}px;
+  left: ${window.scrollX}px; 
+  right: 0; 
+  bottom: 0; 
+  z-index: 9999; 
+  pointer-events: none;
+  `;
   document.body.appendChild(node);
   return node;
 }
@@ -39,7 +47,7 @@ function Backdrop({
 }) {
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib/Tooltip/Tooltip.js

@@ -161,14 +161,14 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  */
 
 
-const Tooltip = ({
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   content,
   position = 'auto',
   copy = 'en',
   tokens,
   variant
-}) => {
+}, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
   const [controlLayout, setControlLayout] = (0, _react.useState)(null);
@@ -292,6 +292,7 @@ const Tooltip = ({
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
       onPress: close,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        ref: ref,
         style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
         tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
         ],
@@ -309,8 +310,8 @@ const Tooltip = ({
       })
     })]
   });
-};
-
+});
+Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the