@telus-uds/components-base 1.1.0 → 1.2.0

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
+var _StackView = require("../StackView");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _input = require("../utils/input");
+
+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 ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant,
+  tokens,
+  items = [],
+  values,
+  initialValues,
+  maxValues = 1,
+  onChange,
+  readOnly = false,
+  inactive = false,
+  feedback,
+  hint,
+  tooltip,
+  legend,
+  name: inputGroupName,
+  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+  : _Platform.default.select({
+    web: 'group',
+    default: 'none'
+  }),
+  toggleSwitchTokens,
+  validation,
+  ...rest
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _input.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+
+  const a11y = _propTypes2.a11yProps.select({
+    accessibilityRole,
+    ...rest
+  });
+
+  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const toggleSwitches = items.map(({
+    label,
+    id = label,
+    accessibilityLabel = label,
+    onChange: itemOnChange,
+    ref: itemRef,
+    tooltip: itemTooltip
+  }, index) => {
+    const isSelected = currentValues.includes(id);
+
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      toggleOneValue(id, event);
+    };
+
+    const itemA11y = {
+      accessibilityState: {
+        checked: isSelected
+      },
+      accessibilityRole: itemA11yRole,
+      accessibilityLabel,
+      ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      id: id,
+      ref: itemRef,
+      onChange: handleChange,
+      tokens: toggleSwitchTokens,
+      value: isSelected,
+      inactive: inactive,
+      label: label,
+      tooltip: itemTooltip,
+      ...itemA11y
+    }, id);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    validation: validation,
+    ...a11y,
+    children: (0, _StackView.getStackedContent)(toggleSwitches, {
+      space,
+      direction: 'column'
+    })
+  });
+});
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
+ToggleSwitchGroup.propTypes = { ..._propTypes2.a11yProps.propTypes,
+  ..._propTypes2.pressProps.propTypes,
+  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _propTypes2.variantProp.propType,
+
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user on the label.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional accessibility label may be passed to each ToggleSwitch
+     * and will be applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: _propTypes.default.string,
+
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string,
+
+    /**
+     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+     */
+    ref: _airbnbPropTypes.default.ref()
+  })),
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * If the selected item(s) in the toggle switch group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ToggleSwitchGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If `values` is not passed, making the ToggleSwitchGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = ToggleSwitchGroup;
+exports.default = _default;

package/lib/ToggleSwitch/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitchGroup.default;
+  }
+});
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ToggleSwitchGroup = _interopRequireDefault(require("./ToggleSwitchGroup"));
 
-var _default = _ToggleSwitch.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.js

@@ -38,7 +38,6 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
-  ToggleSwitch: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -257,12 +256,6 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
-Object.defineProperty(exports, "ToggleSwitch", {
-  enumerable: true,
-  get: function () {
-    return _ToggleSwitch.default;
-  }
-});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -516,7 +509,19 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
-var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _ToggleSwitch = require("./ToggleSwitch");
+
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleSwitch[key];
+    }
+  });
+});
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 

package/lib/utils/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
-  useUniqueId: true
+  useUniqueId: true,
+  withLinkRouter: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -47,6 +48,12 @@ Object.defineProperty(exports, "useUniqueId", {
     return _useUniqueId.default;
   }
 });
+Object.defineProperty(exports, "withLinkRouter", {
+  enumerable: true,
+  get: function () {
+    return _withLinkRouter.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -156,6 +163,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
 
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
+var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
+
 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; }

package/lib/utils/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
+exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.clickProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -319,6 +319,31 @@ const pressProps = {
   selectHandlers: getPropSelector(pressHandlerPropTypes)
 };
 exports.pressProps = pressProps;
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+};
+const clickProps = {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, _propTypes.default.func])),
+
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+    const translatedName = clickHandlerMapping[originalName];
+    return translatedName ? [translatedName, value] : [originalName, value];
+  }))
+};
+exports.clickProps = clickProps;
 const linkPropTypes = { ...pressPropTypes,
   href: _propTypes.default.string,
   hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),

package/lib/utils/withLinkRouter.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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; }
+
+// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+/**
+ * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
+ * This may be used to provide custom wrappers for integrations with third party libraries.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
+ * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
+ * ```
+ */
+
+
+const withLinkRouter = Component => {
+  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)(({
+    LinkRouter,
+    linkRouterProps,
+    ...props
+  }, ref) => {
+    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRouter, {
+      linkRouterProps: linkRouterProps,
+      Component: Component,
+      ref: ref,
+      ...props
+    });
+  }); // Ensure the returned component has appropriate outer properties set:
+
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+
+  const {
+    displayName,
+    name,
+    propTypes,
+    ...otherProperties
+  } = Component; // Apply unique component name as a displayName
+
+  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+
+  wrappedComponent.propTypes = { ...Component.propTypes,
+    ...withLinkRouter.propTypes
+  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+
+  Object.keys(otherProperties).forEach(key => {
+    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key];
+    }
+  });
+  return wrappedComponent;
+};
+
+withLinkRouter.propTypes = {
+  LinkRouter: _propTypes.default.elementType,
+  linkRouterProps: _propTypes.default.object
+};
+var _default = withLinkRouter;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -55,7 +55,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.1-prerelease.0",
-    "@telus-uds/system-theme-tokens": "^1.1.0",
+    "@telus-uds/system-theme-tokens": "^1.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v1.0.1",
-  "changelog": "## [1.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.1...@telus-uds/components-base/v1.1.0) (2022-02-28)\n\n\n### Features\n\n* **component-base:** add some fixes to the list component ([#1226](https://github.com/telus/universal-design-system/issues/1226)) ([35a42e0](https://github.com/telus/universal-design-system/commit/35a42e05e23630696286e7c8607e7a1e8da9d6c2))\n* **ds-allium:** add an Allium List ([#1304](https://github.com/telus/universal-design-system/issues/1304)) ([2f91c74](https://github.com/telus/universal-design-system/commit/2f91c74d6c0b30f09089e8f11beb3739e5be1887))\n* generate component docs ([#1292](https://github.com/telus/universal-design-system/issues/1292)) ([e0c03a5](https://github.com/telus/universal-design-system/commit/e0c03a5c4b5186e97d424c5b1c4594b1dda8201f))\n\n\n### Bug Fixes\n\n* **base:** no SSR crash on transpiled global CSS ([#1311](https://github.com/telus/universal-design-system/issues/1311)) ([7bc585c](https://github.com/telus/universal-design-system/commit/7bc585cc76bf7d760b1630a6f90f336f2be2abda))\n",
-  "releaseTag": "@telus-uds/components-base/v1.1.0",
-  "newVersion": "1.1.0",
+  "previousReleaseTag": "@telus-uds/components-base/v1.1.0",
+  "changelog": "## [1.2.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.1.0...@telus-uds/components-base/v1.2.0) (2022-03-02)\n\n\n### Features\n\n* add withLinkRouter to support router integration ([#1324](https://github.com/telus/universal-design-system/issues/1324)) ([e56f491](https://github.com/telus/universal-design-system/commit/e56f491ac088a005f364330cfc70901532df7cea))\n* **component-base:** refactor ToggleSwitch to use input label and add tooltip support ([#1341](https://github.com/telus/universal-design-system/issues/1341)) ([979da1a](https://github.com/telus/universal-design-system/commit/979da1afb5b319df51026f44299d363f50f1be7d))\n* **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))\n",
+  "releaseTag": "@telus-uds/components-base/v1.2.0",
+  "newVersion": "1.2.0",
   "packageName": "@telus-uds/components-base"
 }

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
 import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
@@ -6,10 +7,12 @@ import buttonPropTypes from './propTypes'
 import {
   a11yProps,
   getCursorStyle,
+  clickProps,
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
-  wrapStringsInText
+  wrapStringsInText,
+  withLinkRouter
 } from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
@@ -133,19 +136,20 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
 const ButtonBase = forwardRef(
   (
     {
+      id,
       href,
       hrefAttrs,
       children,
-      onPress,
       tokens = {},
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
       dataSet,
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const extraButtonState = { inactive, selected }
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
@@ -185,6 +189,7 @@ const ButtonBase = forwardRef(
 
           return (
             <View
+              id={id}
               style={[
                 containerStyles,
                 borderStyles,
@@ -218,10 +223,12 @@ const ButtonBase = forwardRef(
 ButtonBase.displayName = 'ButtonBase'
 
 ButtonBase.propTypes = {
+  id: PropTypes.string,
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types
 }
+ButtonBase.defaultProps = { id: undefined }
 
 const staticStyles = StyleSheet.create({
   row: {
@@ -245,4 +252,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default ButtonBase
+export default withLinkRouter(ButtonBase)

package/src/Card/PressableCardBase.jsx

@@ -11,7 +11,9 @@ import {
   getTokenNames,
   getTokensSetPropType,
   variantProp,
-  linkProps
+  linkProps,
+  clickProps,
+  withLinkRouter
 } from '../utils'
 import { a11yProps } from '../utils/propTypes'
 import CardBase from './CardBase'
@@ -43,12 +45,12 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : undefined,
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const viewport = useViewport()
     const a11y = a11yProps.select({
       ...rest,
@@ -116,4 +118,4 @@ PressableCardBase.propTypes = {
   ...a11yProps.types
 }
 
-export default PressableCardBase
+export default withLinkRouter(PressableCardBase)

package/src/Checkbox/Checkbox.jsx

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import CheckboxInput from './CheckboxInput'
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'

package/src/IconButton/IconButton.jsx

@@ -5,11 +5,13 @@ import { Pressable, Platform, StyleSheet, View } from 'react-native'
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   variantProp,
+  clickProps,
   linkProps,
   resolvePressableState,
   hrefAttrsProp,
   getTokensPropType,
-  selectTokens
+  selectTokens,
+  withLinkRouter
 } from '../utils'
 import { a11yProps } from '../utils/propTypes'
 import Icon from '../Icon'
@@ -52,12 +54,12 @@ const IconButton = forwardRef(
       icon: IconComponent,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : 'button',
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const a11y = a11yProps.select({
       ...rest,
       accessibilityRole
@@ -111,4 +113,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default IconButton
+export default withLinkRouter(IconButton)