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

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,

package/lib/StackView/StackView.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; }
+
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -69,18 +73,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = ({
+const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   divider,
   direction: directionProp = 'column',
   children,
   variant,
   tokens,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
-  const props = { ..._utils.a11yProps.select(rest),
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   };
   const content = (0, _getStackedContent.default)(children, {
@@ -92,13 +99,16 @@ const StackView = ({
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
     style: [flexStyles, _common.staticStyles[direction]],
     children: content
   });
-};
-
+});
+StackView.displayName = 'StackView';
 StackView.propTypes = { ..._utils.a11yProps.propTypes,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
   variant: _utils.variantProp.propType,
 
   /**
@@ -119,6 +129,14 @@ StackView.propTypes = { ..._utils.a11yProps.propTypes,
    */
   space: _utils.spacingProps.types.spacingValue,
 
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+
   /**
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/StackView/StackWrap.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -17,6 +17,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; }
+
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 const exampleGapValue = '1px';
@@ -28,28 +32,31 @@ const exampleGapValue = '1px';
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
 
-const StackWrap = props => {
-  var _props$gap, _CSS;
+const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var _CSS;
 
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
-  // eslint-disable-next-line react/destructuring-assignment
 
-  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
+  const gap = props.gap ?? space;
   const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
   typeof ((_CSS = CSS) === null || _CSS === void 0 ? void 0 : _CSS.supports) === 'function' && CSS.supports('gap', exampleGapValue);
   return canUseCSSGap ?
   /*#__PURE__*/
   // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
-  (0, _jsxRuntime.jsx)(_StackWrapGap.default, { ...props
+  (0, _jsxRuntime.jsx)(_StackWrapGap.default, {
+    ref: ref,
+    ...props
   }) :
   /*#__PURE__*/
   // Else, use the fallback implementation which renders a `Box` component around each child.
-  (0, _jsxRuntime.jsx)(_StackWrapBox.default, { ...props
+  (0, _jsxRuntime.jsx)(_StackWrapBox.default, {
+    ref: ref,
+    ...props
   });
-};
-
+});
+StackWrap.displayName = 'StackWrap';
 StackWrap.propTypes = _StackWrapBox.default.propTypes;
 var _default = StackWrap;
 exports.default = _default;