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

package/lib/Search/Search.js

@@ -87,7 +87,7 @@ const selectIconTokens = ({
  */
 
 
-const Search = ({
+const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   initialValue = '',
   placeholder = 'Search',
   inactive,
@@ -98,7 +98,7 @@ const Search = ({
   copy = 'en',
   tokens,
   variant
-}) => {
+}, ref) => {
   const [value, setValue] = (0, _react.useState)(initialValue);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
@@ -118,26 +118,28 @@ const Search = ({
 
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
 
-  const handleSubmit = () => {
+  const handleSubmit = event => {
     if (onSubmit !== undefined) {
-      onSubmit(value);
+      onSubmit(value, event);
     }
   };
 
-  const handleChange = currentValue => {
-    setValue(currentValue);
-    if (onChange !== undefined) onChange(currentValue);
+  const handleChange = (currentValue, event) => {
+    setValue(currentValue, event);
+    if (onChange !== undefined) onChange(currentValue, event);
   };
 
-  const handleClear = () => {
-    setValue('');
-    if (onClear !== undefined) onClear();
-    if (onChange !== undefined) onChange('');
+  const handleClear = event => {
+    setValue('', event);
+    if (onClear !== undefined) onClear('', event);
+    if (onChange !== undefined) onChange('', event);
   };
 
   const isEmpty = value === '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
         buttonTokens,
@@ -164,8 +166,7 @@ const Search = ({
           accessibilityRole: "button",
           accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
           tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, {
-            tokens: selectIconTokens(getButtonTokens(buttonState))
+          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
           })
         }), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
           onPress: handleSubmit,
@@ -175,8 +176,7 @@ const Search = ({
           tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
           })),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, {
-            tokens: selectIconTokens(getButtonTokens({ ...buttonState,
+          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
               priority: 'high'
             }))
           })
@@ -184,8 +184,8 @@ const Search = ({
       })
     })]
   });
-};
-
+});
+Search.displayName = 'Search';
 Search.propTypes = {
   /**
    * Use this to set the initial value of the search input.
@@ -225,7 +225,16 @@ Search.propTypes = {
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: _propTypes.default.string,
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.object]),
+
+  /**
+   * Select english or french copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    clearButtonAccessibilityLabel: _propTypes.default.string,
+    submitButtonAccessibilityLabel: _propTypes.default.string
+  })]),
   tokens: (0, _utils.getTokensPropType)('Search'),
   variant: _utils.variantProp.propType
 };
@@ -233,6 +242,8 @@ var _default = Search;
 exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
+  container: {// No styles needed here except the View defaults (position: relative etc)
+  },
   iconsContainer: {
     position: 'absolute',
     right: 0,

package/lib/Select/Picker.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"));
 
@@ -15,7 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Picker = ({
+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 Picker = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   onChange,
   onFocus,
@@ -29,13 +33,14 @@ const Picker = ({
   nativeID,
   testID,
   ...rest
-}) => {
+}, ref) => {
   const {
     accessibilityLabel,
     accessibilityDescribedBy,
     accessibilityInvalid
   } = rest;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+    ref: ref,
     style: style,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
@@ -43,7 +48,7 @@ const Picker = ({
     onBlur: onBlur,
     disabled: inactive,
     value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value),
+    onChange: event => onChange(event.target.value, event),
     id: nativeID,
     "aria-label": accessibilityLabel,
     "aria-describedby": accessibilityDescribedBy,
@@ -56,8 +61,8 @@ const Picker = ({
       children: placeholder.label
     }), children]
   });
-};
-
+});
+Picker.displayName = 'Picker';
 var _default = Picker;
 exports.default = _default;
 Picker.propTypes = {

package/lib/Select/Picker.native.js

@@ -50,7 +50,7 @@ const selectAndroidContainerStyles = ({
   ...rest
 });
 
-const Picker = ({
+const Picker = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   onChange,
   onFocus,
@@ -60,7 +60,7 @@ const Picker = ({
   children,
   placeholder,
   ...rest
-}) => {
+}, ref) => {
   // ungroup items, since there's no way to support groups on native
   const flatChildren = _react.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
@@ -75,15 +75,30 @@ const Picker = ({
   }) => ({
     label: props.children,
     value: props.value
-  }));
+  })); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+
+  const handleChange = (newValue, index) => {
+    if (onChange) onChange(newValue, {
+      // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
+      // object with a shape where if an onChange deconstructs `event.nativeEvent`, it won't crash.
+      nativeEvent: {
+        index,
+        value: newValue
+      }
+    });
+  };
+
   const picker = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePickerSelect.default, {
+    pickerProps: {
+      ref
+    },
     touchableWrapperProps: _utils.a11yProps.select(rest),
     onOpen: onFocus,
     onClose: onBlur,
     disabled: inactive,
     items: items,
     value: value,
-    onValueChange: onChange,
+    onValueChange: handleChange,
     style: {
       inputIOS: style,
       inputAndroid: selectAndroidInputStyles(style)
@@ -96,8 +111,8 @@ const Picker = ({
       children: picker
     }) : picker
   });
-};
-
+});
+Picker.displayName = 'Picker';
 var _default = Picker;
 exports.default = _default;
 Picker.propTypes = {

package/lib/Select/Select.js

@@ -185,7 +185,7 @@ const selectValidationIconContainerStyles = ({
  */
 
 
-const Select = ({
+const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
@@ -198,7 +198,7 @@ const Select = ({
   variant,
   testID,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue,
     setValue
@@ -241,6 +241,7 @@ const Select = ({
     }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: selectOuterBorderStyles(themeTokens),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+        ref: ref,
         style: selectInputStyles(themeTokens, inactive),
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -274,18 +275,59 @@ const Select = ({
       })]
     })
   });
-};
-
+});
+Select.displayName = 'Select';
 Select.propTypes = { ..._propTypes2.default.types,
+
+  /**
+   * Initial value for the uncontrolled version.
+   */
   initialValue: _propTypes.default.string,
+
+  /**
+   * Current value to be set as selected.
+   */
   value: _propTypes.default.string,
+
+  /**
+   * Callback to be called when the value changes.
+   */
   onChange: _propTypes.default.func,
+
+  /**
+   * An array of items or item groups to be used as options.
+   */
   children: (0, _utils.componentPropType)(['Item', 'Group']),
+
+  /**
+   * Whether the select is disabled.
+   */
   inactive: _propTypes.default.bool,
+
+  /**
+   * Whether the select is read-only.
+   */
   readOnly: _propTypes.default.bool,
+
+  /**
+   * A placeholder to provide instructions (such as "Please select...")
+   * as an unselectable option
+   */
   placeholder: _propTypes.default.string,
+
+  /**
+   * Select tokens.
+   */
   tokens: (0, _utils.getTokensPropType)('Select'),
+
+  /**
+   * Select variant.
+   */
   variant: _utils.variantProp.propType,
+
+  /**
+   * Dedicated ID for testing.
+   */
   testID: _propTypes.default.string
 };
 var _default = Select;

package/lib/SideNav/Item.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"));
 
@@ -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; }
+
 function selectItemStyles({
   backgroundColor,
   borderColor,
@@ -53,7 +57,7 @@ function selectItemStyles({
  */
 
 
-const Item = ({
+const Item = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   itemId,
   groupId,
@@ -66,7 +70,7 @@ const Item = ({
   accessibilityRole = 'link',
   testID,
   ...props
-}) => {
+}, ref) => {
   const handlePress = () => onPress(itemId, groupId);
 
   const {
@@ -95,6 +99,7 @@ const Item = ({
   const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     style: getPressableStyle,
     ...linkPropSet,
     accessibilityState: {
@@ -109,8 +114,8 @@ const Item = ({
       });
     }
   });
-};
-
+});
+Item.displayName = 'Item';
 Item.propTypes = {
   /**
    * Text content of the `Item`.

package/lib/SideNav/ItemsGroup.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,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; }
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -31,7 +35,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = ({
+const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   label,
   openGroups,
@@ -41,7 +45,7 @@ const ItemsGroup = ({
   tokens,
   itemTokens,
   onToggle
-}) => {
+}, ref) => {
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
   const getAppearance = appearance => ({ ...variant,
@@ -74,6 +78,7 @@ const ItemsGroup = ({
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+    ref: ref,
     openIds: openGroups,
     panelId: groupId,
     onToggle: onToggle,
@@ -86,8 +91,8 @@ const ItemsGroup = ({
     ,
     children: children
   });
-};
-
+});
+ItemsGroup.displayName = 'ItemsGroup';
 ItemsGroup.propTypes = {
   /**
    * Specifies the links contained within. It may only contain `SideNav.Item`.

package/lib/SideNav/SideNav.js

@@ -41,14 +41,14 @@ function selectBorderStyles(tokens) {
  */
 
 
-const SideNav = ({
+const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant = {},
   tokens,
   accordion = true,
   itemTokens,
   groupTokens
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = (0, _react.useState)({
     groupId: undefined,
@@ -67,6 +67,7 @@ const SideNav = ({
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    ref: ref,
     maxOpen: accordion ? 1 : null,
     style: selectBorderStyles(themeTokens),
     children: ({
@@ -75,7 +76,7 @@ const SideNav = ({
     }) => {
       const renderItem = (item, index, groupId) => {
         const {
-          itemId = "item-".concat(index),
+          itemId = `item-${index}`,
           onPress
         } = item.props;
 
@@ -103,9 +104,12 @@ const SideNav = ({
 
         if (child.type === _ItemsGroup.default) {
           const {
-            groupId = "group-".concat(index)
+            groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
+
+          const handleToggle = event => onToggle(groupId, event);
+
           return /*#__PURE__*/(0, _react.createElement)(_ItemsGroup.default, { ...child.props,
             key: groupId,
             groupId: groupId,
@@ -114,7 +118,7 @@ const SideNav = ({
             itemTokens: itemTokens,
             openGroups: openIds,
             isActive: isGroupActive,
-            onToggle: () => onToggle(groupId)
+            onToggle: handleToggle
           }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
         }
 
@@ -122,8 +126,8 @@ const SideNav = ({
       });
     }
   });
-};
-
+});
+SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.

package/lib/Skeleton/Skeleton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 
@@ -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 selectSkeletonStyles = ({
   color,
   radius,
@@ -58,14 +62,14 @@ const selectSquareStyles = ({
   borderRadius: radius
 });
 
-const Skeleton = ({
+const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   size,
   characters,
   lines,
   shape = 'line'
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
   const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
@@ -112,19 +116,15 @@ const Skeleton = ({
     style: [selectSkeletonStyles({ ...themeTokens,
       fadeAnimation: getAnimationBaseOnPlatform()
     }), getStyledBasedOnShape()]
-  }, "skeleton-".concat(index + 1));
-
-  if (lines) {
-    const arrayOfSkeletons = [...Array(lines)];
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
-      space: themeTokens.spaceBetweenLines,
-      children: arrayOfSkeletons.map((_, index) => renderSkeleton(index))
-    });
-  }
-
-  return renderSkeleton();
-};
+  }, `skeleton-${index + 1}`);
 
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    space: themeTokens.spaceBetweenLines,
+    ref: ref,
+    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
+  });
+});
+Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   tokens: (0, _utils.getTokensPropType)('Skeleton'),
   variant: _utils.variantProp.propType,

package/lib/Skeleton/skeletonWebAnimation.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _skeleton = require("./skeleton.constant");
 
 var _default = {
-  animationDuration: "".concat(_skeleton.ANIMATION_DURATION, "ms"),
+  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
   animationTimingFunction: 'ease-in-out',
   animationDelay: '0.5s',
   animationIterationCount: 'infinite',

package/lib/Spacer/Spacer.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,6 +19,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('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
@@ -70,19 +74,22 @@ const selectSizeStyle = (size, direction) => ({
  */
 
 
-const Spacer = ({
+const Spacer = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   direction = 'column',
-  testID
-}) => {
+  testID,
+  dataSet
+}, ref) => {
   const size = (0, _utils.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(size, direction);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     testID: testID,
-    style: [staticStyles.stretch, sizeStyle]
+    style: [staticStyles.stretch, sizeStyle],
+    dataSet: dataSet
   });
-};
-
+});
+Spacer.displayName = 'Spacer';
 Spacer.propTypes = {
   /**
    * The size of the spacer according to the theme's spacing scale.
@@ -99,6 +106,11 @@ Spacer.propTypes = {
    */
   direction: _propTypes.default.oneOf(['column', 'row']),
 
+  /**
+   * @ignore
+   */
+  dataSet: _propTypes.default.object,
+
   /**
    * @ignore
    * In tests, the only way to select Spacers is with testID prop and getByTestId, since they have no content,