@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/Skeleton/Skeleton.js

@@ -1,9 +1,35 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Platform } from 'react-native';
-import propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, useSpacingScale, variantProp } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _useSkeletonNativeAnimation = _interopRequireDefault(require("./useSkeletonNativeAnimation"));
+
+var _skeletonWebAnimation = _interopRequireDefault(require("./skeletonWebAnimation"));
+
+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,
@@ -12,7 +38,7 @@ const selectSkeletonStyles = ({
 }) => ({
   backgroundColor: color,
   borderRadius: radius,
-  opacity: fadeAnimation
+  ...fadeAnimation
 });
 
 const selectLineStyles = ({
@@ -36,17 +62,25 @@ const selectSquareStyles = ({
   borderRadius: radius
 });
 
-const Skeleton = ({
+const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   size,
   characters,
   lines,
   shape = 'line'
-}) => {
-  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
-  const skeletonHeight = useSpacingScale(size || themeTokens.size);
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
+  const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
+
+  const getAnimationBaseOnPlatform = () => {
+    if (_Platform.default.OS !== 'web') {
+      return nativeAnimation;
+    }
+
+    return _skeletonWebAnimation.default;
+  };
 
   const getLineWidth = () => {
     if (characters) {
@@ -56,19 +90,6 @@ const Skeleton = ({
     return themeTokens.characters * themeTokens.baseWidth;
   };
 
-  useEffect(() => {
-    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
-      toValue: 1,
-      duration: 1000,
-      useNativeDriver: Platform.OS !== 'web'
-    }), Animated.timing(fadeAnimation, {
-      toValue: 0,
-      duration: 1000,
-      useNativeDriver: Platform.OS !== 'web'
-    })]);
-    Animated.loop(fade).start();
-  }, [fadeAnimation]);
-
   const getStyledBasedOnShape = () => {
     if (shape === 'circle') {
       return selectShapeStyles({
@@ -90,30 +111,27 @@ const Skeleton = ({
     });
   };
 
-  const renderSkeleton = (index = 0) => /*#__PURE__*/React.createElement(Animated.View, {
+  const renderSkeleton = (index = 0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
     testID: "skeleton",
-    key: `skeleton-${index + 1}`,
     style: [selectSkeletonStyles({ ...themeTokens,
-      fadeAnimation
+      fadeAnimation: getAnimationBaseOnPlatform()
     }), getStyledBasedOnShape()]
-  });
-
-  if (lines) {
-    const arrayOfSkeletons = [...Array(lines)];
-    return /*#__PURE__*/React.createElement(StackView, {
-      space: themeTokens.spaceBetweenLines
-    }, 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: getTokensPropType('Skeleton'),
-  variant: variantProp.propType,
-  size: propTypes.number,
-  characters: propTypes.number,
-  lines: propTypes.number,
-  shape: propTypes.oneOf(['line', 'circle', 'box'])
+  tokens: (0, _utils.getTokensPropType)('Skeleton'),
+  variant: _utils.variantProp.propType,
+  size: _propTypes.default.number,
+  characters: _propTypes.default.number,
+  lines: _propTypes.default.number,
+  shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
 };
-export default Skeleton;
+var _default = Skeleton;
+exports.default = _default;

package/lib/Skeleton/index.js

@@ -1,2 +1,13 @@
-import Skeleton from './Skeleton';
-export default Skeleton;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Skeleton.default;
+exports.default = _default;

package/lib/Skeleton/skeleton.constant.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANIMATION_DURATION = exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
+const DEFAULT_OPACITY = 1;
+exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
+const OPACITY_STOP = 0.4;
+exports.OPACITY_STOP = OPACITY_STOP;
+const ANIMATION_DURATION = 1500;
+exports.ANIMATION_DURATION = ANIMATION_DURATION;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _skeleton = require("./skeleton.constant");
+
+var _default = {
+  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
+  animationTimingFunction: 'ease-in-out',
+  animationDelay: '0.5s',
+  animationIterationCount: 'infinite',
+  animationKeyframes: {
+    '0%': {
+      opacity: _skeleton.DEFAULT_OPACITY
+    },
+    '50%': {
+      opacity: _skeleton.OPACITY_STOP
+    },
+    '100%': {
+      opacity: _skeleton.DEFAULT_OPACITY
+    }
+  }
+};
+exports.default = _default;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+
+var _skeleton = require("./skeleton.constant");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useSkeletonNativeAnimation = () => {
+  const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
+  (0, _react.useEffect)(() => {
+    const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
+      toValue: _skeleton.OPACITY_STOP,
+      duration: _skeleton.ANIMATION_DURATION,
+      useNativeDriver: true
+    }), _Animated.default.timing(fadeAnimation, {
+      toValue: _skeleton.DEFAULT_OPACITY,
+      duration: _skeleton.ANIMATION_DURATION,
+      useNativeDriver: true
+    })]);
+
+    _Animated.default.loop(fade).start();
+  }, [fadeAnimation]);
+  return {
+    opacity: fadeAnimation
+  };
+};
+
+var _default = useSkeletonNativeAnimation;
+exports.default = _default;

package/lib/Spacer/Spacer.js

@@ -1,12 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-import { useSpacingScale, spacingProps } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+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; }
+
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
  */
-
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
@@ -54,26 +74,29 @@ const selectSizeStyle = (size, direction) => ({
  */
 
 
-const Spacer = ({
+const Spacer = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   direction = 'column',
-  testID
-}) => {
-  const size = useSpacingScale(space);
+  testID,
+  dataSet
+}, ref) => {
+  const size = (0, _utils.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(size, direction);
-  return /*#__PURE__*/React.createElement(View, {
+  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.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: spacingProps.types.spacingValue,
+  space: _utils.spacingProps.types.spacingValue,
 
   /**
    * The spacer applies space in only one direction, which is controlled by the `direction` prop:
@@ -81,18 +104,26 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  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,
    * no accessibility role, and there is no equivalent of nextSibling in React Native Testing Library.
    */
-  testID: PropTypes.string
+  testID: _propTypes.default.string
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   stretch: {
     alignSelf: 'stretch'
   }
 });
-export default Spacer;
+
+var _default = Spacer;
+exports.default = _default;

package/lib/Spacer/index.js

@@ -1,2 +1,13 @@
-import Spacer from './Spacer';
-export default Spacer;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Spacer = _interopRequireDefault(require("./Spacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Spacer.default;
+exports.default = _default;

package/lib/StackView/StackView.js

@@ -1,12 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import Divider from '../Divider';
-import { spacingProps, a11yProps, responsiveProps, variantProp, useResponsiveProp } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _Divider = _interopRequireDefault(require("../Divider"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+var _common = require("./common");
+
+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.
  *
@@ -49,59 +73,76 @@ import { staticStyles, selectFlexStyles } from './common';
  * 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
-}) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'column');
-  const a11y = a11yProps.select({ ...rest
-  });
-  const content = getStackedContent(children, {
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
+  const content = (0, _getStackedContent.default)(children, {
     direction,
     divider,
     space
   });
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
-  const flexStyles = selectFlexStyles(themeTokens);
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
-    style: [flexStyles, staticStyles[direction]]
-  }), content);
-};
-
-StackView.propTypes = { ...a11yProps.propTypes,
-  variant: variantProp.propType,
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  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,
+  ..._utils.viewProps.types,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
+  variant: _utils.variantProp.propType,
 
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
-  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
 
   /**
    * If true, renders a UDS `Divider` component between each item. If an object is passed,
    * this object is passes as props to each Divider.
    */
-  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
+  divider: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.default.propTypes)]),
 
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: spacingProps.types.spacingValue,
+  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.
    */
-  children: PropTypes.node
+  children: _propTypes.default.node
 };
-export default StackView;
+var _default = StackView;
+exports.default = _default;

package/lib/StackView/StackWrap.js

@@ -1,8 +1,28 @@
-import React from 'react';
-import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap'; // 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.
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+
+var _StackWrapGap = _interopRequireDefault(require("./StackWrapGap"));
+
+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';
 /**
  * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
@@ -12,21 +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 => {
+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 ?? space;
-  return gap === space && CSS?.supports('gap', exampleGapValue) ?
+  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.
-  React.createElement(StackWrapGap, props) :
+  (0, _jsxRuntime.jsx)(_StackWrapGap.default, {
+    ref: ref,
+    ...props
+  }) :
   /*#__PURE__*/
   // Else, use the fallback implementation which renders a `Box` component around each child.
-  React.createElement(StackWrapBox, props);
-};
-
-StackWrap.propTypes = StackWrapBox.propTypes;
-export default StackWrap;
+  (0, _jsxRuntime.jsx)(_StackWrapBox.default, {
+    ref: ref,
+    ...props
+  });
+});
+StackWrap.displayName = 'StackWrap';
+StackWrap.propTypes = _StackWrapBox.default.propTypes;
+var _default = StackWrap;
+exports.default = _default;

package/lib/StackView/StackWrap.native.js

@@ -1,3 +1,14 @@
-import StackWrapBox from './StackWrapBox'; // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+"use strict";
 
-export default StackWrapBox;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+var _default = _StackWrapBox.default;
+exports.default = _default;