@telus-uds/components-base 1.5.0 → 1.6.0

package/lib-module/RadioCard/RadioCardGroup.js

@@ -2,12 +2,13 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import StackView, { StackWrap } from '../StackView';
 import RadioCard from './RadioCard';
 import Fieldset from '../Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
  * exclusive options with need to show additional information for each option. The whole cards are each
@@ -98,6 +99,12 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
   // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
   // TODO: test this on more web screen readers.
 
+  const uniqueFields = ['id'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/_jsx(Fieldset, {
     ref: ref,
     name: inputGroupName,
@@ -117,7 +124,8 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
         title,
         content,
         id,
-        onChange: itemOnChange
+        onChange: itemOnChange,
+        ...itemRest
       }, index) => {
         const cardId = id || `RadioCard[${index}]`;
 
@@ -136,6 +144,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
           tokens: radioCardTokens,
           variant: variant,
           readOnly: readOnly,
+          ...selectItemProps(itemRest),
           ...props,
           children: content
         }, cardId);
@@ -164,7 +173,7 @@ RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * Array of objects containing specifics for each RadioCard to be rendered in the group.
    */
-  items: PropTypes.arrayOf(PropTypes.exact({
+  items: PropTypes.arrayOf(PropTypes.exact({ ...selectedItemPropTypes,
     title: PropTypes.string,
     content: PropTypes.node,
     id: PropTypes.string,

package/lib-module/Select/Select.js

@@ -197,7 +197,7 @@ const Select = /*#__PURE__*/forwardRef(({
   const handleMouseOut = () => setIsHovered(false);
 
   const {
-    props: supportsProps,
+    supportsProps,
     ...selectedProps
   } = selectProps(rest);
   const themeTokens = useThemeTokens('Select', tokens, variant, {
@@ -238,8 +238,7 @@ const Select = /*#__PURE__*/forwardRef(({
       }), ValidationIconComponent && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
         style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/_jsx(ValidationIconComponent, {
-          tokens: selectValidationIconTokens(themeTokens)
+        children: /*#__PURE__*/_jsx(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
         })
       }), IconComponent && Platform.OS !== 'android' &&
       /*#__PURE__*/

package/lib-module/Tags/Tags.js

@@ -9,11 +9,11 @@ import Icon from '../Icon';
 import { StackWrap, getStackedContent } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils/props';
-import { useMultipleInputValues } from '../utils/input';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
 const selectIconTextTokens = ({
   icon,
@@ -95,6 +95,12 @@ const Tags = /*#__PURE__*/forwardRef(({
     ...rest
   });
   const itemA11yRole = 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/_jsx(StackWrap, {
     ref: ref,
     ...selectedProps,
@@ -104,8 +110,8 @@ const Tags = /*#__PURE__*/forwardRef(({
     children: items.map(({
       label,
       id = label,
-      accessibilityLabel,
-      ref: itemRef
+      ref: itemRef,
+      ...itemRest
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -116,17 +122,17 @@ const Tags = /*#__PURE__*/forwardRef(({
       }]);
 
       const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress();
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
 
-      const itemA11y = {
+      const itemProps = {
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
-        accessibilityLabel,
-        ...a11yProps.getPositionInSet(items.length, index)
+        ...a11yProps.getPositionInSet(items.length, index),
+        ...selectItemProps(itemRest)
       };
       return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
@@ -135,7 +141,7 @@ const Tags = /*#__PURE__*/forwardRef(({
         tokens: getButtonTokens,
         selected: isSelected,
         inactive: inactive,
-        ...itemA11y,
+        ...itemProps,
         children: ({
           textStyles,
           ...buttonState
@@ -188,7 +194,8 @@ Tags.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: PropTypes.arrayOf(PropTypes.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.

package/lib-module/TextInput/TextArea.js

@@ -1,12 +1,12 @@
 import React, { forwardRef, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, getTokensPropType, inputSupportsProps, selectSystemProps, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import { useThemeTokens } from '../ThemeProvider';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, viewProps]);
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -54,7 +54,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
   };
 
   const {
-    props: supportsProps,
+    supportsProps,
     ...selectedProps
   } = selectProps(rest);
   const inputProps = { ...selectedProps,

package/lib-module/TextInput/TextInput.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
-import { a11yProps, getTokensPropType, inputSupportsProps, selectSystemProps, variantProp, viewProps } from '../utils';
+import Platform from "react-native-web/dist/exports/Platform";
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -27,10 +28,17 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inp
 const TextInput = /*#__PURE__*/forwardRef(({
   tokens,
   variant = {},
+  pattern,
   ...rest
 }, ref) => {
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && pattern && ref.current) {
+      // eslint-disable-next-line no-param-reassign
+      ref.current.pattern = pattern;
+    }
+  }, [ref, pattern]);
   const {
-    props: supportsProps,
+    supportsProps,
     ...selectedProps
   } = selectProps(rest);
   const inputProps = { ...selectedProps,

package/lib-module/TextInput/TextInputBase.js

@@ -5,10 +5,10 @@ import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, useInputValue, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, viewProps]);
 
 const selectInputStyles = ({
   backgroundColor,

package/lib-module/TextInput/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -26,6 +27,11 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  ...Platform.select({
+    web: {
+      pattern: PropTypes.string
+    }
+  })
 };
 export default textInputPropTypes;

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -7,11 +7,11 @@ import InputLabel from '../InputLabel';
 import ButtonBase from '../Button/ButtonBase';
 import StackView from '../StackView';
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
 import { useInputValue } from '../utils/input';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
 const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -117,7 +117,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(({
     space: 2,
     direction: "row",
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
-      style: selectLabelStyles(themeTokens),
+      style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/_jsx(InputLabel, {
         forId: inputId,
         label: label,
@@ -219,6 +219,9 @@ const staticStyles = StyleSheet.create({
   switch: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
   }
 });
 export default ToggleSwitch;

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -7,10 +7,10 @@ import Fieldset from '../Fieldset';
 import { getStackedContent } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, pressProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
-import { useMultipleInputValues } from '../utils/input';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
   variant,
   tokens,
@@ -57,13 +57,20 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
     ...rest
   });
   const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   const toggleSwitches = items.map(({
     label,
     id = label,
     accessibilityLabel = label,
     onChange: itemOnChange,
     ref: itemRef,
-    tooltip: itemTooltip
+    tooltip: itemTooltip,
+    ...itemRest
   }, index) => {
     const isSelected = currentValues.includes(id);
 
@@ -89,7 +96,8 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
-      ...itemA11y
+      ...itemA11y,
+      ...selectItemProps(itemRest)
     }, id);
   });
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -123,7 +131,8 @@ ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: PropTypes.arrayOf(PropTypes.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user on the label.
      */

package/lib-module/utils/containUniqueFields.js

@@ -0,0 +1,26 @@
+// Returns true if there are no duplicate values of the fields listed
+// in the `fields` array across the objects in the `items` array, false
+// otherwise.
+// Note that if a value of a field in an item is not set, it will be
+// excluded from comparison.
+const containUniqueFields = (items, fields) => {
+  const map = [];
+  const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
+    if (!map[field]) {
+      map[field] = [];
+    }
+
+    if (!item[field]) {
+      // We exclude empty values from comparison
+      return false;
+    } // Duplicate found!
+
+
+    if (map[field][item[field]]) return true;
+    map[field][item[field]] = true;
+    return false;
+  }));
+  return !itemsHaveDuplicateFields;
+};
+
+export default containUniqueFields;

package/lib-module/utils/index.js

@@ -12,4 +12,5 @@ export { default as useResponsiveProp } from './useResponsiveProp';
 export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';
-export * from './ssr';
+export * from './ssr';
+export { default as containUniqueFields } from './containUniqueFields';

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

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+export const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: PropTypes.func,
+
+    /**
+     * onFocus handler
+     */
+    onFocus: PropTypes.func
+  },
+  select: ({
+    onBlur,
+    onFocus
+  }) => ({
+    onBlur,
+    onFocus
+  })
+};
+export const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * onChangeText handler
+     */
+    onChangeText: PropTypes.func,
+
+    /**
+     * onSubmit handler
+     */
+    onSubmit: PropTypes.func,
+
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: PropTypes.func
+  },
+  select: ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+};
+export default {
+  focusHandlerProps,
+  textInputHandlerProps
+};

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

@@ -1,4 +1,5 @@
 export * from './tokens';
+export * from './handlerProps';
 export { default as a11yProps } from './a11yProps';
 export { default as clickProps } from './clickProps';
 export { default as copyPropTypes } from './copyPropTypes';

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

@@ -38,17 +38,15 @@ export default {
     hintPosition,
     feedback,
     tooltip,
-    validation,
-    ...rest
+    validation
   }) => ({
-    props: {
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,14 +22,14 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "telus-standard",
-    "lint:fix": "telus-standard --fix",
+    "lint": "yarn --cwd ../.. lint:path --color packages/components-base",
+    "lint:fix": "yarn --cwd ../.. lint:path --fix packages/components-base",
     "format": "prettier --write .",
     "build": "yarn build:code && yarn build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "yarn build:main && yarn build:module",
-    "build:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
+    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
     "dev": "yarn build:code --watch",
     "release": "standard-version"
@@ -59,7 +59,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.2",
-    "@telus-uds/system-theme-tokens": "^1.4.0",
+    "@telus-uds/system-theme-tokens": "^1.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/Button/ButtonBase.jsx

@@ -6,8 +6,9 @@ import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemePro
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
-  getCursorStyle,
   clickProps,
+  focusHandlerProps,
+  getCursorStyle,
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
@@ -17,7 +18,12 @@ import {
   withLinkRouter
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  linkProps,
+  viewProps
+])
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth

package/src/Button/ButtonGroup.jsx

@@ -9,17 +9,25 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   pressProps,
   getTokensPropType,
   selectSystemProps,
   selectTokens,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
+} from '../utils'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const ButtonGroup = forwardRef(
   (
@@ -61,6 +69,11 @@ const ButtonGroup = forwardRef(
     })
     const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <StackWrap
         {...systemProps}
@@ -69,41 +82,44 @@ const ButtonGroup = forwardRef(
         tokens={stackTokens}
         ref={ref}
       >
-        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
-          const isSelected = currentValues.includes(id)
+        {items.map(
+          ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
+            const isSelected = currentValues.includes(id)
 
-          // Pass an object of relevant component state as first argument for any passed-in press handlers
-          const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+            // Pass an object of relevant component state as first argument for any passed-in press handlers
+            const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-          const handlePress = (event) => {
-            if (pressHandlers.onPress) pressHandlers.onPress()
-            toggleOneValue(id, event)
-          }
+            const handlePress = (event) => {
+              if (pressHandlers.onPress) pressHandlers.onPress(event)
+              toggleOneValue(id, event)
+            }
 
-          const itemA11y = {
-            accessibilityState: { checked: isSelected },
-            accessibilityRole: itemA11yRole,
-            accessibilityLabel,
-            ...a11yProps.getPositionInSet(items.length, index)
-          }
+            const itemA11y = {
+              accessibilityState: { checked: isSelected },
+              accessibilityRole: itemA11yRole,
+              accessibilityLabel,
+              ...a11yProps.getPositionInSet(items.length, index)
+            }
 
-          // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-          // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-          return (
-            <ButtonBase
-              ref={itemRef}
-              key={id}
-              {...pressHandlers}
-              onPress={handlePress}
-              tokens={getButtonTokens}
-              selected={isSelected}
-              inactive={inactive}
-              {...itemA11y}
-            >
-              {label}
-            </ButtonBase>
-          )
-        })}
+            // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+            // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+            return (
+              <ButtonBase
+                ref={itemRef}
+                key={id}
+                {...pressHandlers}
+                onPress={handlePress}
+                tokens={getButtonTokens}
+                selected={isSelected}
+                inactive={inactive}
+                {...itemA11y}
+                {...selectItemProps(itemRest)}
+              >
+                {label}
+              </ButtonBase>
+            )
+          }
+        )}
       </StackWrap>
     )
   }
@@ -124,6 +140,7 @@ ButtonGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user in the button, describing this option,
        * passed to the button as its child.

package/src/Card/PressableCardBase.jsx

@@ -7,6 +7,7 @@ import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   clickProps,
+  focusHandlerProps,
   getTokenNames,
   getTokensSetPropType,
   linkProps,
@@ -20,7 +21,11 @@ import {
 } from '../utils'
 import CardBase from './CardBase'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 const tokenKeys = [
   ...getTokenNames('Card'),