@telus-uds/components-base 1.14.2 → 1.16.0

package/lib-module/ViewportProvider/useViewportListener.js

@@ -33,10 +33,16 @@ const useViewportListenerCSR = setViewport => {
       return setViewport(viewports.select(window.width));
     };
 
-    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
-    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
-
-    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    const listener = Dimensions.addEventListener('change', onChange);
+    return () => {
+      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove(); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        Dimensions.removeEventListener('change', onChange);
+      }
+    };
   }, [setViewport]);
 }; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
 

package/lib-module/utils/hasOwnProperty.js

@@ -0,0 +1,11 @@
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+export default function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}

package/lib-module/utils/props/a11yProps.js

@@ -83,6 +83,167 @@ const a11yPropTypes = { ...nativeA11yPropTypes,
   accessibilityValueNow: PropTypes.number,
   accessibilityValueText: PropTypes.string
 };
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
+  // Ignore web-only props in native builds
+  default: nativeA11yPropTypes
+}); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
+// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
+// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
+// - On web, split them into both of:
+//   - The appropriate aria-* attr, like `aria-valuenow`, which will work regardless of RNW version
+//   - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
+//     than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
+//     and future releases might add more features here).
+
+const rwnPropMappings = {
+  // Former accessibilityValue props.
+  accessibilityValueMax: value => Platform.select({
+    web: {
+      'aria-valuemax': value,
+      accessibilityValueMax: value
+    },
+    default: {
+      accessibilityValue: {
+        max: value
+      }
+    }
+  }),
+  accessibilityValueMin: value => Platform.select({
+    web: {
+      'aria-valuemin': value,
+      accessibilityValueMin: value
+    },
+    default: {
+      accessibilityValue: {
+        min: value
+      }
+    }
+  }),
+  accessibilityValueNow: value => Platform.select({
+    web: {
+      'aria-valuenow': value,
+      accessibilityValueNow: value
+    },
+    default: {
+      accessibilityValue: {
+        now: value
+      }
+    }
+  }),
+  accessibilityValueText: value => Platform.select({
+    web: {
+      'aria-valuetext': value,
+      accessibilityValueText: value
+    },
+    default: {
+      accessibilityValue: {
+        text: value
+      }
+    }
+  }),
+  // Former accessibilityState props
+  accessibilityBusy: value => Platform.select({
+    web: {
+      'aria-busy': value,
+      accessibilityBusy: value
+    },
+    default: {
+      accessibilityState: {
+        busy: value
+      }
+    }
+  }),
+  accessibilityChecked: value => Platform.select({
+    web: {
+      'aria-checked': value,
+      accessibilityChecked: value
+    },
+    default: {
+      accessibilityState: {
+        checked: value
+      }
+    }
+  }),
+  accessibilityDisabled: value => Platform.select({
+    web: {
+      'aria-disabled': value,
+      // RNW >= 0.18 maps `accessibilityDisabled` to `disabled` attr if element supports it
+      accessibilityDisabled: value,
+      // As of RNW 0.18.9, Pressable doesn't support `accessibilityDisabled`, only `disabled`,
+      // but everything else supports `accessibilityDisabled` but not `disabled`.
+      disabled: value
+    },
+    default: {
+      accessibilityState: {
+        disabled: value
+      }
+    }
+  }),
+  accessibilityExpanded: value => Platform.select({
+    web: {
+      'aria-expanded': value,
+      accessibilityExpanded: value
+    },
+    default: {
+      accessibilityState: {
+        expanded: value
+      }
+    }
+  }),
+  accessibilitySelected: value => Platform.select({
+    web: {
+      'aria-selected': value,
+      accessibilitySelected: value
+    },
+    default: {
+      accessibilityState: {
+        selected: value
+      }
+    }
+  })
+};
+
+if (Platform.OS === 'web') {
+  const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value); // On Web only, these React Native object props need manual mapping in RNW >=0.18
+  // which dropped support for the React Native shape of these props.
+  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
+  // new features added in >=0.18 (e.g. for accessibilityDisabled).
+
+
+  rwnPropMappings.accessibilityValue = function () {
+    let {
+      max,
+      min,
+      now,
+      text
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+      ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+      ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+      ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+    };
+  };
+
+  rwnPropMappings.accessibilityState = function () {
+    let {
+      busy,
+      checked,
+      disabled,
+      expanded,
+      selected
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+      ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+      ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+      ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+      ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+    };
+  };
+}
+
 export default {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -96,7 +257,14 @@ export default {
    * Where components accept React Native a11y props, pass { ...rest } from its props to this,
    * then spread the returned object into the component's props (usually its outer container).
    */
-  select: getPropSelector(a11yPropTypes, /^aria-/),
+  select: getPropSelector( // Allow all React Native accessibility props
+  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
+  Platform.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
+  // a form that is platform-appropriate and RNW-version safe
+  (key, value) => {
+    const rnwPropMapper = rwnPropMappings[key];
+    return rnwPropMapper ? rnwPropMapper(value) : undefined;
+  }),
 
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.

package/lib-module/utils/props/getPropSelector.js

@@ -1,9 +1,48 @@
-export default function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes);
+import merge from 'lodash.merge';
+import hasOwnProperty from '../hasOwnProperty';
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined;
+  const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
+
+  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
+
+  return merge({}, items, newItems);
+};
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+
+
+export default function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
-    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-      [key]: value
-    } : items;
+    return (// If there's a callback and it matches something, applyCallback merges it in; return that
+      applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
+      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
+        [key]: value
+      } : items)
+    );
   }, {});
 }

package/lib-module/utils/ssr.js

@@ -1,9 +1,113 @@
+import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
 /** @typedef {import('react').ComponentType} ReactComponent */
 
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      AppRegistry.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
+
+      const {
+        element,
+        getStyleElement
+      } = AppRegistry.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+        children: /*#__PURE__*/_jsx(App, { ...props
+        })
+      }) : /*#__PURE__*/_jsx(App, { ...props
+      });
+
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+
+      styleGetters.push(getRNWStyle);
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+
+      hasAppRendered = true;
+      return renderedApp;
+    },
+
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+    }
+  };
+};
+export default ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
  * Registers the app's root component with React Native Web and generates
  * the main <style> tag containing React Native Web stylesheet styles.
  *
@@ -21,6 +125,8 @@ export const getReactNativeWebSSRStyles = function (AppRoot) {
   return [getStyleElement()];
 };
 /**
+ * @deprecated - use ssrStyles instead
+ *
  * Gets style tags for each currently supported CSS-in-JS library and returns
  * them alongside any existing style tags.
  *

package/lib-module/utils/useResponsiveProp.js

@@ -1,9 +1,8 @@
 import { viewports } from '@telus-uds/system-constants';
 import { useViewport } from '../ViewportProvider';
+import hasOwnProperty from './hasOwnProperty';
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
-
-const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -21,7 +20,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
   const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
   viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[viewports.keys.find(key => hasOwn(prop, key))];
+  prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 /**

package/lib-module/utils/withLinkRouter.js

@@ -1,9 +1,6 @@
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+import PropTypes from 'prop-types';
+import hasOwnProperty from './hasOwnProperty';
 /**
  * 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.
@@ -33,6 +30,7 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
  * ```
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.4.0",
+    "@telus-uds/system-theme-tokens": "^2.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -18,17 +18,14 @@
   },
   "description": "Base components",
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/cli": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-native": "11.0.0",
+    "react-test-renderer": "~18.0.0",
+    "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
+    "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
   "directories": {
@@ -44,10 +41,10 @@
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
     "react-native": "*",
-    "react-native-web": "~0.17.5"
+    "react-native-web": "~0.17.7 || ~0.18.7"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -63,13 +60,11 @@
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
-    "storybook": "start-storybook",
-    "build-storybook": "build-storybook"
+    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.14.2"
+  "version": "1.16.0"
 }

package/src/A11yInfoProvider/index.jsx

@@ -16,8 +16,14 @@ const A11yInfoProvider = ({ children }) => {
       return () => {}
     }
 
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled)
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled)
+    const motionSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotionEnabled
+    )
+    const screenReaderSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      setScreenReaderEnabled
+    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -38,8 +44,18 @@ const A11yInfoProvider = ({ children }) => {
     }
 
     return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof motionSubscription?.remove === 'function') {
+        motionSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
+      }
+
+      if (typeof screenReaderSubscription?.remove === 'function') {
+        screenReaderSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      }
     }
   }, [])
 

package/src/Button/ButtonGroup.jsx

@@ -141,8 +141,10 @@ const ButtonGroup = forwardRef(
                   tokens={getButtonTokens}
                   selected={isSelected}
                   inactive={inactive}
-                  {...itemA11y}
-                  {...selectItemProps(itemRest)}
+                  {...selectItemProps({
+                    ...itemRest,
+                    ...itemA11y
+                  })}
                 >
                   {label}
                 </ButtonBase>

package/src/Carousel/Carousel.jsx

@@ -22,6 +22,8 @@ import SkipLink from '../SkipLink'
 import A11yText from '../A11yText'
 import CarouselStepTracker from './CarouselStepTracker'
 import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
@@ -150,7 +152,8 @@ const Carousel = React.forwardRef(
       onAnimationEnd,
       onIndexChanged,
       skipLinkHref,
-      refocus,
+      tabs,
+      refocus = Boolean(tabs),
       title = 'carousel',
       springConfig = undefined,
       thumbnails = undefined,
@@ -177,6 +180,7 @@ const Carousel = React.forwardRef(
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
+      showPanelTabs,
       spaceBetweenSlideAndPreviousNextNavigation
     } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
@@ -415,6 +419,9 @@ const Carousel = React.forwardRef(
       [activeIndex, childrenArray.length, itemLabel, getCopy, title]
     )
 
+    const activePanelNavigation =
+      tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -511,7 +518,7 @@ const Carousel = React.forwardRef(
             </View>
           )}
         </View>
-        {showPanelNavigation ? panelNavigation : null}
+        {showPanelNavigation ? activePanelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -587,6 +594,12 @@ Carousel.propTypes = {
    * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
    */
   skipLinkHref: PropTypes.string,
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 
 import { useResponsiveProp } from '../../utils'
 import Carousel from '../Carousel'
-import CarouselTabsPanel from './CarouselTabsPanel'
 
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
 const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
-  const panelNavigation = useResponsiveProp({ md: <CarouselTabsPanel items={items} /> })
+  const tabs = useResponsiveProp({ md: items })
 
   return (
-    <Carousel refocus={refocus} {...carouselProps} ref={ref} panelNavigation={panelNavigation}>
+    <Carousel refocus={refocus} {...carouselProps} ref={ref} tabs={tabs}>
       {items.map(({ title, content }) => (
         <React.Fragment key={title}>{content}</React.Fragment>
       ))}

package/src/Checkbox/Checkbox.jsx

@@ -176,6 +176,12 @@ const Checkbox = forwardRef(
     const inputId = id ?? uniqueId
     const { themeOptions } = useTheme()
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'checkbox',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <View style={staticStyles.wrapper} ref={ref}>
         <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
@@ -183,9 +189,7 @@ const Checkbox = forwardRef(
             disabled={inactive}
             onKeyDown={handleKeyDown}
             onPress={handleChange}
-            accessibilityRole="checkbox"
-            accessibilityState={{ checked: isChecked, disabled: inactive }}
-            {...selectProps(rest)}
+            {...selectedProps}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })