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

package/lib/Fieldset/FieldsetContainer.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,22 +15,27 @@ 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; }
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = ({
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   inactive,
   accessibilityRole,
   name: fieldsetName
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+  ref: ref,
   disabled: inactive,
   style: _cssReset.default,
   role: accessibilityRole,
   name: fieldsetName,
   children: children
-});
-
+}));
+FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   accessibilityRole: _propTypes.default.string,
   children: _propTypes.default.node,

package/lib/Fieldset/FieldsetContainer.native.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,16 +15,21 @@ 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; }
+
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = ({
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   accessibilityRole
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
   accessibilityRole: accessibilityRole,
   children: children
-});
-
+}));
+FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   children: _propTypes.default.node,
   accessibilityRole: _propTypes.default.string

package/lib/Fieldset/Legend.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,17 +15,22 @@ 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; }
+
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = ({
+const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
   children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+  ref: ref,
   style: _cssReset.default,
   children: children
-});
-
+}));
+Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: _propTypes.default.node
 };

package/lib/Fieldset/Legend.native.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
@@ -17,17 +17,22 @@ 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; }
+
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = ({
+const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
   children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
   style: staticStyles.stretch,
   children: children
-});
-
+}));
+Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: _propTypes.default.node
 };

package/lib/FlexGrid/Col/Col.js

@@ -33,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 Col = ({
+const Col = /*#__PURE__*/(0, _react.forwardRef)(({
   horizontalAlign,
   children,
   xs,
@@ -47,7 +47,7 @@ const Col = ({
   lgOffset,
   xlOffset,
   ...viewProps
-}) => {
+}, ref) => {
   const gutter = (0, _react.useContext)(_GutterContext.default);
   const viewPort = (0, _ViewportProvider.useViewport)();
   const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
@@ -67,7 +67,7 @@ const Col = ({
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return "".concat(num / 12 * 100, "%");
+    return `${num / 12 * 100}%`;
   };
 
   const calculateWidth = value => {
@@ -175,12 +175,15 @@ const Col = ({
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...viewProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...viewProps,
     style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
     }],
     children: children
   });
-};
+});
+Col.displayName = 'Col';
 
 const styles = _StyleSheet.default.create({
   col: {

package/lib/FlexGrid/FlexGrid.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"));
 
@@ -25,14 +25,20 @@ var _GutterContext = _interopRequireDefault(require("./providers/GutterContext")
 
 var _helpers = _interopRequireDefault(require("./helpers"));
 
+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; }
+
 /**
  * A mobile-first flexbox grid.
  */
-const FlexGrid = ({
+const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)(({
   limitWidth = true,
   gutter = true,
   outsideGutter = true,
@@ -41,9 +47,11 @@ const FlexGrid = ({
   mdReverse,
   lgReverse,
   xlReverse,
+  tag,
+  accessibilityRole,
   children,
   ...rest
-}) => {
+}, ref) => {
   const viewPort = (0, _ViewportProvider.useViewport)();
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const marginVertical = 0;
@@ -77,9 +85,15 @@ const FlexGrid = ({
     flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
   }
 
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
     value: gutter,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      ...props,
       style: [styles.grid, {
         marginHorizontal,
         marginVertical,
@@ -90,7 +104,8 @@ const FlexGrid = ({
       children: children
     })
   });
-};
+});
+FlexGrid.displayName = 'FlexGrid';
 
 const styles = _StyleSheet.default.create({
   grid: {
@@ -98,7 +113,9 @@ const styles = _StyleSheet.default.create({
   }
 });
 
-FlexGrid.propTypes = {
+FlexGrid.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.propTypes,
+
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */
@@ -139,6 +156,14 @@ FlexGrid.propTypes = {
    */
   xlReverse: _propTypes.default.bool,
 
+  /**
+   * 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),
+
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */

package/lib/FlexGrid/Row/Row.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,6 +23,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 horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
     case 'start':
@@ -87,7 +91,7 @@ const distributeStyles = distribute => {
   }
 };
 
-const Row = ({
+const Row = /*#__PURE__*/(0, _react.forwardRef)(({
   horizontalAlign,
   verticalAlign,
   distribute,
@@ -98,7 +102,7 @@ const Row = ({
   xlReverse,
   children,
   ...rest
-}) => {
+}, ref) => {
   const viewPort = (0, _ViewportProvider.useViewport)();
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
@@ -123,7 +127,9 @@ const Row = ({
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...rest,
     style: [styles.row, {
       flexDirection,
       ...horizontalAlignStyles(horizontalAlign),
@@ -132,7 +138,8 @@ const Row = ({
     }],
     children: children
   });
-};
+});
+Row.displayName = 'Row';
 
 const styles = _StyleSheet.default.create({
   row: {

package/lib/{Tabs → HorizontalScroll}/HorizontalScroll.js

@@ -43,14 +43,13 @@ const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectT
 
 
 exports.selectHorizontalScrollTokens = selectHorizontalScrollTokens;
-
-const HorizontalScroll = ({
+const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
   ScrollButton,
   tokens,
   itemPositions,
   children,
   ...rest
-}) => {
+}, ref) => {
   const {
     nextIcon,
     previousIcon,
@@ -146,6 +145,7 @@ const HorizontalScroll = ({
 
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
     style: staticStyles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.default, {
       onScrollEnd: handleScrollEnd,
@@ -173,7 +173,8 @@ const HorizontalScroll = ({
       direction: "next"
     })]
   });
-};
+});
+HorizontalScroll.displayName = 'HorizontalScroll';
 
 const staticStyles = _StyleSheet.default.create({
   scrollContainer: {

package/lib/{Tabs/TabsScrollButton.js → HorizontalScroll/HorizontalScrollButton.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 selectButtonStyles = ({
   borderRadius,
   backgroundColor,
@@ -50,7 +54,7 @@ const selectButtonStyles = ({
  */
 
 
-const TabsScrollButton = ({
+const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'next',
   icon,
   onPress,
@@ -58,8 +62,8 @@ const TabsScrollButton = ({
   variant,
   tokens,
   copy
-}) => {
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsScrollButton', tokens, variant);
+}, ref) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('HorizontalScrollButton', tokens, variant);
 
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState);
 
@@ -73,6 +77,7 @@ const TabsScrollButton = ({
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     style: getPressableStyle,
     onPress: onPress,
     accessibilityLabel: label,
@@ -94,7 +99,8 @@ const TabsScrollButton = ({
       });
     }
   });
-};
+});
+HorizontalScrollButton.displayName = 'HorizontalScrollButton';
 
 const staticStyles = _StyleSheet.default.create({
   absolute: {
@@ -108,8 +114,8 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-TabsScrollButton.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('TabsScrollButton'),
+HorizontalScrollButton.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
   variant: _utils.variantProp.propType,
   copy: _utils.copyPropTypes,
   direction: _propTypes.default.oneOf(['previous', 'next']),
@@ -117,5 +123,5 @@ TabsScrollButton.propTypes = {
   icon: _propTypes.default.elementType,
   onPress: _propTypes.default.func.isRequired
 };
-var _default = TabsScrollButton;
+var _default = HorizontalScrollButton;
 exports.default = _default;

package/lib/HorizontalScroll/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HorizontalScrollButton", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalScrollButton.default;
+  }
+});
+exports.horizontalScrollUtils = exports.default = void 0;
+
+var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+
+var _itemPositions = require("./itemPositions");
+
+var _HorizontalScrollButton = _interopRequireDefault(require("./HorizontalScrollButton"));
+
+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; }
+
+var _default = _HorizontalScroll.default;
+exports.default = _default;
+const horizontalScrollUtils = {
+  selectHorizontalScrollTokens: _HorizontalScroll.selectHorizontalScrollTokens,
+  useItemPositions: _itemPositions.useItemPositions,
+  getItemPositionScrollTarget: _itemPositions.getItemPositionScrollTarget,
+  getItemPositionLayoutHandler: _itemPositions.getItemPositionLayoutHandler,
+  itemPositionsPropType: _itemPositions.itemPositionsPropType
+};
+exports.horizontalScrollUtils = horizontalScrollUtils;

package/lib/Icon/Icon.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.iconComponentPropTypes = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -21,13 +21,18 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Icon = ({
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Icon = /*#__PURE__*/(0, _react.forwardRef)(({
   icon: IconComponent,
   accessibilityLabel,
   variant,
   tokens,
-  scalesWithText = false
-}) => {
+  scalesWithText = false,
+  dataSet
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
   const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
@@ -35,18 +40,20 @@ const Icon = ({
     size: size,
     color: themeTokens.color
   });
-  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default // eslint-disable-next-line react-native/no-inline-styles
-  , {
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref // eslint-disable-next-line react-native/no-inline-styles
+    ,
     style: {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     },
+    dataSet: dataSet,
     children: iconContent
   }) : iconContent;
-};
-
+});
+Icon.displayName = 'Icon';
 const iconComponentPropTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Icon'),

package/lib/Icon/IconText.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,12 +21,12 @@ var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
  * intended for use when creating components, not intended for use in applications on its own.
@@ -35,16 +35,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = ({
+const IconText = /*#__PURE__*/(0, _react.forwardRef)(({
   space,
   iconPosition = 'left',
   icon: IconComponent,
   iconProps,
   children
-}) => {
+}, ref) => {
   var _iconProps$tokens;
 
   const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ref: ref,
     icon: IconComponent,
     scalesWithText: true,
     ...iconProps
@@ -64,8 +65,8 @@ const IconText = ({
     space,
     direction: 'row'
   });
-};
-
+});
+IconText.displayName = 'IconText';
 IconText.propTypes = {
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale