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

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,17 @@ 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,
+  ..._utils.viewProps.types,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
   variant: _utils.variantProp.propType,
 
   /**
@@ -119,6 +130,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,8 +17,19 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// CSS.supports needs an example of the type of value you intend to use.
+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; }
+
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (...args) => {
+  var _window$CSS;
+
+  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...args);
+}; // 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.
@@ -28,28 +39,28 @@ 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) => {
   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 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);
+  const gap = props.gap ?? space;
+  const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && cssSupports('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;

package/lib/StackView/StackWrapBox.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,6 +25,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 offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -50,22 +54,25 @@ const spaceSides = {
  * between the container and the stacked children, and requires a negative margin on the container.
  */
 
-const StackWrapBox = ({
+const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   gap = space,
   direction: directionProp = 'row',
   children,
   tokens,
   variant,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ..._utils.a11yProps.select(rest),
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   }; // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
 
@@ -82,13 +89,17 @@ const StackWrapBox = ({
     space: 0,
     box: boxProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
     children: content
   });
-};
-
+});
+StackWrapBox.displayName = 'StackWrapBox';
 StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
 
   /**
    * Sets the `flexDirection` of the container
@@ -96,12 +107,27 @@ StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
   direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
 
   /**
-   * The size of the spacer according to the theme's spacing scale.
+   * The size of the space between items 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: _utils.spacingProps.types.spacingValue,
 
+  /**
+   * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
+   * 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).
+   */
+  gap: _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 StackWrap 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/StackWrapGap.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"));
 
@@ -25,6 +25,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; }
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -35,21 +39,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = ({
+const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   tokens,
   variant,
   direction: directionProp = 'row',
   children,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ..._utils.a11yProps.select(rest),
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   };
   const size = (0, _utils.useSpacingScale)(space);
@@ -60,12 +67,14 @@ const StackWrapGap = ({
     direction,
     space: 0
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
     children: content
   });
-};
-
+});
+StackWrapGap.displayName = 'StackWrapGap';
 StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
 var _default = StackWrapGap;
 exports.default = _default;

package/lib/StackView/common.js

@@ -12,11 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const selectFlexStyles = ({
   alignItems,
   justifyContent,
-  flexGrow
+  flexGrow,
+  flexShrink
 }) => ({
   alignItems,
   justifyContent,
-  flexGrow
+  flexGrow,
+  flexShrink
 });
 
 exports.selectFlexStyles = selectFlexStyles;

package/lib/StackView/getStackedContent.js

@@ -64,7 +64,7 @@ const getStackedContent = (children, {
   const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
 
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = "Stack-Box-".concat(index);
+    const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
@@ -74,7 +74,7 @@ const getStackedContent = (children, {
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
       key: testID,

package/lib/StepTracker/StepTracker.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"));
 
@@ -35,6 +35,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 selectContainerStyles = ({
   containerPaddingBottom,
   containerPaddingLeft,
@@ -100,7 +104,7 @@ const selectStepTrackerLabelStyles = ({
  */
 
 
-const StepTracker = ({
+const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
   current = 0,
   copy = 'en',
   dictionary = _dictionary.default,
@@ -108,7 +112,7 @@ const StepTracker = ({
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,
@@ -135,6 +139,7 @@ const StepTracker = ({
     ..._propTypes2.a11yProps.select(rest)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: selectContainerStyles(themeTokens),
     ...accessibilityProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -160,8 +165,8 @@ const StepTracker = ({
       })]
     })
   });
-};
-
+});
+StepTracker.displayName = 'StepTracker';
 StepTracker.propTypes = {
   current: _propTypes.default.number,
   copy: _propTypes.default.oneOf(['en', 'fr']),

package/lib/Tabs/Tabs.js

@@ -9,20 +9,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
-var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
 
-var _TabsScrollButton = _interopRequireDefault(require("./TabsScrollButton"));
-
-var _itemPositions = require("./itemPositions");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,11 +29,16 @@ 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 {
+  selectHorizontalScrollTokens,
+  useItemPositions
+} = _HorizontalScroll.horizontalScrollUtils;
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  */
-const Tabs = ({
+
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   itemTokens,
   scrollButtonTokens,
@@ -44,7 +47,7 @@ const Tabs = ({
   initialValue,
   onChange,
   items = []
-}) => {
+}, ref) => {
   const {
     space,
     ...themeTokens
@@ -57,18 +60,19 @@ const Tabs = ({
     initialValue,
     onChange
   });
-  const [itemPositions, isPositioningReady] = (0, _itemPositions.useItemPositions)();
-  (0, _utils.useHash)((0, _react.useCallback)(hash => {
+  const [itemPositions, isPositioningReady] = useItemPositions();
+  (0, _utils.useHash)((0, _react.useCallback)((hash, event) => {
     const hashItem = hash && items.find(({
       href
     }) => hash === href);
     const hashId = hashItem && (hashItem.id || hashItem.label);
-    if (hashId) setTimeout(setValue(hashId), 500);
+    if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
-    ScrollButton: _TabsScrollButton.default,
+    ref: ref,
+    ScrollButton: _HorizontalScroll.HorizontalScrollButton,
     itemPositions: itemPositions,
-    tokens: (0, _HorizontalScroll.selectHorizontalScrollTokens)(themeTokens),
+    tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
     accessibilityRole: "tablist",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
@@ -77,14 +81,16 @@ const Tabs = ({
       children: items.map(({
         href,
         label,
-        id
+        id,
+        ref: itemRef
       }, index) => {
-        const itemId = id !== null && id !== void 0 ? id : label;
+        const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
-        const handlePress = () => setValue(itemId);
+        const handlePress = event => setValue(itemId, event);
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
+          ref: itemRef,
           href: href,
           variant: variant,
           tokens: itemTokens,
@@ -97,20 +103,21 @@ const Tabs = ({
       })
     })
   });
-};
-
+});
+Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     href: _propTypes.default.string,
     label: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    ref: _airbnbPropTypes.default.ref()
   })),
   value: _propTypes.default.string,
   initialValue: _propTypes.default.string,
   onChange: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tabs'),
   itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
-  scrollButtonTokens: (0, _utils.getTokensPropType)('TabsScrollButton'),
+  scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
   variant: _utils.variantProp.propType
 };
 var _default = Tabs;

package/lib/Tabs/TabsItem.js

@@ -19,15 +19,13 @@ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Te
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
-var _itemPositions = require("./itemPositions");
+var _HorizontalScroll = require("../HorizontalScroll");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -37,6 +35,11 @@ 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 {
+  itemPositionsPropType,
+  getItemPositionLayoutHandler
+} = _HorizontalScroll.horizontalScrollUtils;
+
 const selectHighlightBarStyles = ({
   highlightColor,
   highlightBarBorderRadius = 0,
@@ -66,9 +69,9 @@ const selectHighlightTriangleStyles = ({
     width: 0,
     borderWidth: highlightTriangleSize,
     borderTopColor: highlightColor,
-    borderBottomColor: _rn.default.color.transparent,
-    borderLeftColor: _rn.default.color.transparent,
-    borderRightColor: _rn.default.color.transparent
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent'
   }
 });
 
@@ -95,7 +98,7 @@ const selectContainerStyles = ({
  */
 
 
-const TabsItem = ({
+const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   href,
   variant,
@@ -112,7 +115,7 @@ const TabsItem = ({
     selected
   },
   ...rest
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -130,7 +133,7 @@ const TabsItem = ({
     }];
   };
 
-  const handleLayout = (0, _itemPositions.getItemPositionLayoutHandler)(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
+  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
 
   const openHref = href && _utils.linkProps.handleHref({
     href
@@ -160,6 +163,7 @@ const TabsItem = ({
 
   }, [selected, index, itemPositions]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     onPress: handlePress,
     href: href,
     style: getPressableStyle,
@@ -200,8 +204,8 @@ const TabsItem = ({
       });
     }
   });
-};
-
+});
+TabsItem.displayName = 'TabsItem';
 TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
   tokens: (0, _utils.getTokensPropType)('TabsItem'),
   variant: _utils.variantProp.propType,
@@ -209,7 +213,7 @@ TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
   href: _propTypes.default.string,
   index: _propTypes.default.number,
   selected: _propTypes.default.bool,
-  itemPositions: _itemPositions.itemPositionsPropType,
+  itemPositions: itemPositionsPropType,
   children: _propTypes.default.string
 };