@telus-uds/components-base 1.4.0 → 1.6.1

package/lib-module/HorizontalScroll/HorizontalScrollButton.js

@@ -1,27 +1,18 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { resolvePressableTokens, selectTokens, variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
+import View from "react-native-web/dist/exports/View";
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -35,47 +26,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/forwardRef(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = useThemeTokensCallback('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => resolvePressableTokens(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant);
   const getCopy = useCopy({
     dictionary,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ...a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/_jsx(Typography, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ...a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';

package/lib-module/InputLabel/InputLabel.js

@@ -9,6 +9,7 @@ import LabelContent from './LabelContent';
 import Tooltip from '../Tooltip';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
@@ -47,25 +48,29 @@ const InputLabel = /*#__PURE__*/forwardRef(({
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
-      children: /*#__PURE__*/_jsx(LabelContent, {
-        forId: forId,
-        children: label
-      })
-    }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
-      style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
-      nativeID: hintId,
-      children: hint
-    }), hasTooltip && /*#__PURE__*/_jsx(View, {
-      style: staticStyles.tooltipAlign,
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        content: tooltip
-      })
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      style: staticStyles.container,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        children: /*#__PURE__*/_jsx(LabelContent, {
+          forId: forId,
+          children: label
+        })
+      }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
+        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        nativeID: hintId,
+        children: hint
+      }), hasTooltip && /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.tooltipAlign, {
+          height: themeTokens.fontSize * themeTokens.lineHeight
+        }],
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltip
+        })
+      })]
     }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
       style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
       nativeID: hintId,
@@ -111,21 +116,19 @@ InputLabel.propTypes = { ...selectedSystemPropTypes,
 export default InputLabel;
 const staticStyles = StyleSheet.create({
   container: {
-    display: 'flex',
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'baseline'
   },
-  containerWithHintBelow: {
-    flexWrap: 'wrap'
-  },
   label: {
-    flexShrink: 0
+    flexShrink: 1
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'center'
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib-module/Link/LinkBase.js

@@ -35,13 +35,9 @@ Platform.OS === 'web' ? {
 } : {};
 
 const selectTextStyles = ({
-  color,
-  textLine,
-  textLineStyle
+  color
 }) => ({
   color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -62,6 +58,22 @@ const selectBlockStyles = ({
   fontName: blockFontName
 });
 
+const selectDecorationStyles = ({
+  color,
+  textLine,
+  textLineStyle
+}) => ({
+  color,
+  textDecorationLine: textLine,
+  textDecorationStyle: textLineStyle,
+  ...Platform.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
+});
+
 const selectIconTokens = ({
   color,
   iconSize,
@@ -138,8 +150,9 @@ const LinkBase = /*#__PURE__*/forwardRef(({
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const decorationStyles = selectDecorationStyles(themeTokens);
       const hasIcon = Boolean(icon || themeTokens.icon);
-      return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);

package/lib-module/Link/TextButton.js

@@ -1,5 +1,3 @@
-var _TextButton$propTypes;
-
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -16,8 +14,6 @@ const TextButton = /*#__PURE__*/forwardRef(({
   children,
   variant,
   tokens,
-  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
 }, ref) => {
@@ -34,10 +30,5 @@ const TextButton = /*#__PURE__*/forwardRef(({
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ...LinkBase.propTypes,
   onPress: PropTypes.func.isRequired
-}; // Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-
-if ((_TextButton$propTypes = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+};
 export default TextButton;

package/lib-module/Modal/Modal.js

@@ -6,9 +6,9 @@ import NativeModal from "react-native-web/dist/exports/Modal";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, selectTokens } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import ButtonBase from '../Button/ButtonBase';
+import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -65,14 +65,6 @@ const selectCloseButtonContainerStyles = ({
   paddingRight,
   paddingTop
 });
-
-const selectCloseIconProps = ({
-  closeIconSize,
-  closeIconColor
-}) => ({
-  size: closeIconSize,
-  color: closeIconColor
-});
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -97,6 +89,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   tokens,
   variant,
   copy,
+  closeButton,
   ...rest
 }, ref) => {
   const viewport = useViewport();
@@ -119,12 +112,15 @@ const Modal = /*#__PURE__*/forwardRef(({
 
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
-  };
+  }; // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
+
+
+  const showCloseButton = closeButton !== null;
 
   if (!isOpen) {
     return null;
-  } // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-
+  }
 
   return /*#__PURE__*/_jsx(NativeModal, {
     transparent: true,
@@ -139,15 +135,14 @@ const Modal = /*#__PURE__*/forwardRef(({
           ref: ref,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
-          children: [/*#__PURE__*/_jsx(View, {
+          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
             style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: /*#__PURE__*/_jsx(ButtonBase, {
+            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
               onPress: handleClose,
+              icon: CloseIconComponent,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
-              children: // TODO: add close button interactive states after IconButton is done
-              () => /*#__PURE__*/_jsx(CloseIconComponent, { ...selectCloseIconProps(themeTokens)
-              })
+              tokens: selectTokens('IconButton', themeTokens, 'close')
             })
           }), children]
         })
@@ -168,7 +163,12 @@ Modal.propTypes = { ...selectedSystemPropTypes,
   onClose: PropTypes.func,
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: PropTypes.node
 };
 export default Modal;
 const staticStyles = StyleSheet.create({

package/lib-module/Radio/Radio.js

@@ -7,11 +7,11 @@ import View from "react-native-web/dist/exports/View";
 import RadioLabel from '../InputLabel/LabelContent';
 import RadioButton, { selectRadioButtonTokens } from './RadioButton';
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
 import StackView from '../StackView';
 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, focusHandlerProps, viewProps]);
 
 const selectContainerStyles = ({
   containerBackgroundColor,
@@ -162,22 +162,29 @@ const Radio = /*#__PURE__*/forwardRef(({
         hover,
         pressed
       });
+      const labelStyles = selectLabelStyles(stateTokens);
+      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+        height: labelStyles.lineHeight
+      }] : null;
       return /*#__PURE__*/_jsxs(StackView, {
         space: 0,
         children: [/*#__PURE__*/_jsxs(View, {
           style: [staticStyles.container, selectContainerStyles(stateTokens)],
-          children: [/*#__PURE__*/_jsx(RadioButton, {
-            tokens: selectRadioButtonTokens(stateTokens),
-            isControlled: isControlled,
-            isChecked: isChecked,
-            inactive: inactive,
-            defaultChecked: defaultChecked,
-            inputId: inputId,
-            handleChange: handleChange,
-            name: inputName,
-            value: value
+          children: [/*#__PURE__*/_jsx(View, {
+            style: alignWithLabel,
+            children: /*#__PURE__*/_jsx(RadioButton, {
+              tokens: selectRadioButtonTokens(stateTokens),
+              isControlled: isControlled,
+              isChecked: isChecked,
+              inactive: inactive,
+              defaultChecked: defaultChecked,
+              inputId: inputId,
+              handleChange: handleChange,
+              name: inputName,
+              value: value
+            })
           }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
-            style: selectLabelStyles(stateTokens),
+            style: labelStyles,
             children: /*#__PURE__*/_jsx(RadioLabel, {
               forId: inputId,
               children: label
@@ -259,5 +266,9 @@ const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib-module/Radio/RadioGroup.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-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 { getStackedContent } from '../StackView';
 import Radio from './Radio';
 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 Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -92,11 +93,18 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
     onChange,
     readOnly: readOnly || inactive
   });
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   const radios = items.map(({
     label,
     id,
     onChange: itemOnChange,
-    ref: itemRef
+    ref: itemRef,
+    ...itemRest
   }, index) => {
     const radioId = id || `Radio[${index}]`;
     const isChecked = currentValue === radioId;
@@ -115,7 +123,8 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
       label: label,
       name: inputGroupName,
       tokens: radioTokens,
-      variant: variant
+      variant: variant,
+      ...selectItemProps(itemRest)
     }, radioId);
   });
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -157,7 +166,7 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * Array of objects containing specifics for each Radio to be rendered in the group.
    */
-  items: PropTypes.arrayOf(PropTypes.exact({
+  items: PropTypes.arrayOf(PropTypes.exact({ ...selectedItemPropTypes,
     label: PropTypes.string,
     id: PropTypes.string,
     onChange: PropTypes.func,

package/lib-module/RadioCard/RadioCard.js

@@ -4,13 +4,13 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
 import { PressableCardBase, selectPressableCardTokens } from '../Card';
 import StackView from '../StackView';
 import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton';
 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, focusHandlerProps, viewProps]);
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
  * with need to show additional information for each option. The whole card is interactive as one item.

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,