@telus-uds/components-base 1.0.0 → 1.2.0

package/generate-component-docs.js

@@ -0,0 +1,56 @@
+const fs = require('fs')
+const schema = require('@telus-uds/system-theme-tokens')
+const allExports = require('./src')
+
+const { a11yProps } = allExports
+const a11yPropTypes = Object.keys(a11yProps.types)
+
+const parseComponentDocs = (name, generated) => {
+  const { description } = generated // TODO parse markdown and split by heading
+  const props = {} // store derived prop data
+  const attributes = {
+    // any other computed attributes
+    acceptsRNA11yProps: a11yPropTypes.every((key) => key in generated.props)
+  }
+
+  Object.entries(generated.props).forEach(([propName, prop]) => {
+    if (prop.description?.includes('@ignore')) {
+      return // remove ignored props
+    }
+    if (attributes.acceptsRNA11yProps && a11yPropTypes.includes(propName)) {
+      return // remove a11y props if all supported (there are 30+, instead we have the above attribute to show this)
+    }
+
+    const out = { ...prop }
+
+    // check if this prop references the tokens schema
+    const tokensProp = out.type?.raw?.match(/getTokensPropType\('([A-z]+)'\)/)?.[1]
+    if (tokensProp) {
+      if (!schema.components[tokensProp]) {
+        throw new Error(`Unknown schema component reference: ${tokensProp} from component: ${name}`)
+      }
+      out.type = { ...out.type, raw: schema.components[tokensProp] }
+    }
+    props[propName] = out
+  })
+
+  return { docs: { description, props, attributes } }
+}
+
+const components = {}
+
+Object.entries(allExports).forEach(([name, exp]) => {
+  if (exp.__docgenInfo) {
+    // populated by babel-plugin-react-docgen
+    components[name] = parseComponentDocs(name, exp.__docgenInfo)
+
+    // check for second-level components e.g List.Item (can only be on a component)
+    Object.entries(exp).forEach(([subComponentName, prop]) => {
+      if (prop.__docgenInfo) {
+        components[name][subComponentName] = parseComponentDocs(subComponentName, prop.__docgenInfo)
+      }
+    })
+  }
+}, {})
+
+fs.writeFileSync('./component-docs.json', JSON.stringify({ schema, components }, null, 2))

package/lib/Box/Box.js

@@ -166,6 +166,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 Box.displayName = 'Box';
 Box.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Box'),
 

package/lib/Button/ButtonBase.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -17,7 +19,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _utils = require("../ThemeProvider/utils");
 
-var _propTypes = _interopRequireDefault(require("./propTypes"));
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
 var _utils2 = require("../utils");
 
@@ -170,18 +172,23 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
 };
 
 const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
+  id,
   href,
   hrefAttrs,
   children,
-  onPress,
   tokens = {},
   disabled = false,
   // alias for inactive
   inactive = disabled,
   selected = false,
   dataSet,
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils2.clickProps.toPressProps(rawRest);
+
   const extraButtonState = {
     inactive,
     selected
@@ -217,6 +224,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
           web: {
             maxWidth: '100%',
@@ -235,10 +243,15 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ButtonBase.displayName = 'ButtonBase';
-ButtonBase.propTypes = { ..._utils2.a11yProps.types,
-  ..._propTypes.default,
+ButtonBase.propTypes = {
+  id: _propTypes.default.string,
+  ..._utils2.a11yProps.types,
+  ..._propTypes2.default,
   ..._utils2.linkProps.types
 };
+ButtonBase.defaultProps = {
+  id: undefined
+};
 
 const staticStyles = _StyleSheet.default.create({
   row: {
@@ -265,5 +278,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = ButtonBase;
+var _default = (0, _utils2.withLinkRouter)(ButtonBase);
+
 exports.default = _default;

package/lib/Card/CardBase.js

@@ -79,6 +79,7 @@ CardBase.displayName = 'CardBase';
 CardBase.propTypes = {
   children: _propTypes.default.node,
   tokens: (0, _utils.getTokensPropType)('Card'),
+  ..._propTypes2.viewProps.types,
   ..._propTypes2.a11yProps.types
 };
 var _default = CardBase;

package/lib/Card/PressableCardBase.js

@@ -52,10 +52,14 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   inactive,
   href,
   hrefAttrs,
-  onPress,
   accessibilityRole = href ? 'link' : undefined,
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const viewport = (0, _ViewportProvider.useViewport)();
 
   const a11y = _propTypes2.a11yProps.select({ ...rest,
@@ -137,5 +141,7 @@ PressableCardBase.propTypes = {
   variant: _utils.variantProp.propType,
   ..._propTypes2.a11yProps.types
 };
-var _default = PressableCardBase;
+
+var _default = (0, _utils.withLinkRouter)(PressableCardBase);
+
 exports.default = _default;

package/lib/Checkbox/Checkbox.js

@@ -43,8 +43,6 @@ 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; }
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 const selectInputStyles = ({
   iconBackgroundColor,
   inputBorderColor,

package/lib/FlexGrid/FlexGrid.js

@@ -114,7 +114,7 @@ const styles = _StyleSheet.default.create({
 });
 
 FlexGrid.propTypes = { ..._utils.a11yProps.propTypes,
-  ..._utils.viewProps.propTypes,
+  ..._utils.viewProps.types,
 
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.

package/lib/IconButton/IconButton.js

@@ -83,10 +83,14 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
   icon: IconComponent,
   href,
   hrefAttrs,
-  onPress,
   accessibilityRole = href ? 'link' : 'button',
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const a11y = _propTypes2.a11yProps.select({ ...rest,
     accessibilityRole
   });
@@ -136,5 +140,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = IconButton;
+var _default = (0, _utils.withLinkRouter)(IconButton);
+
 exports.default = _default;

package/lib/Link/LinkBase.js

@@ -19,6 +19,8 @@ var _propTypes2 = require("../utils/propTypes");
 
 var _pressability = require("../utils/pressability");
 
+var _utils = require("../utils");
+
 var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -120,7 +122,6 @@ const selectIconTokens = ({
 
 const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
-  onPress,
   icon,
   iconPosition = icon ? 'left' : undefined,
   iconProps,
@@ -129,8 +130,13 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   accessibilityRole = 'link',
   dataSet,
-  ...props
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...props
+  } = _propTypes2.clickProps.toPressProps(rawRest);
+
   const {
     hrefAttrs,
     rest
@@ -231,5 +237,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = LinkBase;
+var _default = (0, _utils.withLinkRouter)(LinkBase);
+
 exports.default = _default;

package/lib/List/List.js

@@ -28,7 +28,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; }
 
 /**
- * A Unordered List component has a child a ListItem that
+ * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 const List = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -66,7 +66,6 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 List.displayName = 'List';
-List.Item = _ListItem.default;
 List.propTypes = { ..._propTypes2.a11yProps.types,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,

package/lib/List/ListItem.js

@@ -11,8 +11,6 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -57,6 +55,12 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
+const selectCommonIconStyles = ({
+  iconMarginTop
+}) => ({
+  marginTop: iconMarginTop
+});
+
 const selectSideItemContainerStyles = ({
   listGutter
 }) => ({
@@ -113,6 +117,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
+  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
 
   const accessibilityRole = _Platform.default.select({
@@ -120,27 +125,12 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
     default: 'item'
   });
 
-  const areChildrenStrings = () => {
-    if (Array.isArray(children)) {
-      return children.every(child => typeof child === 'string');
-    }
-
-    return typeof children === 'string';
-  };
-
-  const renderItem = () => {
-    if (areChildrenStrings()) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: itemStyles,
-        children: children
-      });
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.wrap,
-      children: children
-    });
-  };
+  const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.wrap,
+    children: (0, _utils.wrapStringsInText)(children, {
+      style: itemStyles
+    })
+  });
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -171,7 +161,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
 
     if (icon) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined],
+        style: [sideItemContainerStyles, commonIconStyles],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -201,9 +191,6 @@ const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  centeredIcons: {
-    justifyContent: 'center'
-  },
   wrap: {
     flex: 1
   }

package/lib/List/index.js

@@ -3,11 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.default;
+  }
+});
 exports.default = void 0;
 
 var _List = _interopRequireDefault(require("./List"));
 
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+_List.default.Item = _ListItem.default;
 var _default = _List.default;
 exports.default = _default;

package/lib/Pagination/PageButton.js

@@ -78,18 +78,14 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 PageButton.displayName = 'PageButton';
-PageButton.propTypes = {
-  // Spreading any props into a secondary component accessed like Pagination.PageButton
-  // crashes a Docusaurus props table, but only in production, not in development
-  onPress: _propTypes.default.func,
-  href: _propTypes.default.string,
-  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
-  // ...linkProps.types,
+PageButton.propTypes = { ..._utils.linkProps.types,
   label: _propTypes.default.string,
   isActive: _propTypes.default.bool,
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
 };
-var _default = PageButton;
+
+var _default = (0, _utils.withLinkRouter)(PageButton);
+
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -55,7 +55,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   sideButtonVariant,
-  sideButtonTokens
+  sideButtonTokens,
+  LinkRouter,
+  linkRouterProps
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -93,13 +95,21 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
   }), ...items.map((child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const itemLinkRouterProps = { ...linkRouterProps,
+      ...itemProps.linkRouterProps
+    };
 
     if (shouldRenderButton(itemIndex)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
         isActive: isItemActive(itemIndex)
@@ -118,7 +128,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
@@ -132,7 +144,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = {
+Pagination.propTypes = { ..._utils.withLinkRouter.propTypes,
   children: (0, _utils.componentPropType)('PageButton'),
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,

package/lib/Pagination/SideButton.js

@@ -125,5 +125,7 @@ SideButton.propTypes = {
   copy: _utils.copyPropTypes,
   ..._utils.linkProps.types
 };
-var _default = SideButton;
+
+var _default = (0, _utils.withLinkRouter)(SideButton);
+
 exports.default = _default;

package/lib/Radio/Radio.js

@@ -37,8 +37,6 @@ 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; }
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,

package/lib/StackView/StackView.js

@@ -108,6 +108,7 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 StackView.displayName = 'StackView';
 StackView.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
   tokens: (0, _utils.getTokensPropType)('StackView'),
   variant: _utils.variantProp.propType,
 

package/lib/StackView/StackWrap.js

@@ -21,8 +21,15 @@ 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; }
 
-// CSS.supports needs an example of the type of value you intend to use.
+// 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.
@@ -33,15 +40,12 @@ const exampleGapValue = '1px';
  */
 
 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
 
   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);
+  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.

package/lib/StackView/StackWrapBox.js

@@ -98,6 +98,7 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 StackWrapBox.displayName = 'StackWrapBox';
 StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
   tokens: (0, _utils.getTokensPropType)('StackView'),
 
   /**

package/lib/Tabs/Tabs.js

@@ -46,7 +46,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
-  items = []
+  items = [],
+  LinkRouter,
+  linkRouterProps
 }, ref) => {
   const {
     space,
@@ -82,7 +84,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
         href,
         label,
         id,
-        ref: itemRef
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps
       }, index) => {
         const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
@@ -98,6 +102,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          LinkRouter: ItemLinkRouter,
+          linkRouterProps: { ...linkRouterProps,
+            ...itemLinkRouterProps
+          },
           children: label
         }, itemId);
       })
@@ -105,8 +113,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+Tabs.propTypes = { ..._utils.withLinkRouter.PropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,

package/lib/Tabs/TabsItem.js

@@ -99,7 +99,6 @@ const selectContainerStyles = ({
 
 
 const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
   href,
   variant,
   tokens,
@@ -114,8 +113,14 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   } : {
     selected
   },
-  ...rest
+  ...rawRest
 }, ref) => {
+  // Convert onClick etc to onPress etc if used in an integration
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -139,9 +144,9 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href
   });
 
-  const handlePress = onPress || openHref ? () => {
-    if (onPress) onPress();
-    if (openHref) openHref();
+  const handlePress = onPress || openHref ? (...args) => {
+    if (onPress) onPress(...args);
+    if (openHref) openHref(...args);
   } : undefined;
   const a11y = {
     accessibilityRole,
@@ -234,5 +239,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = TabsItem;
+var _default = (0, _utils.withLinkRouter)(TabsItem);
+
 exports.default = _default;