@telus-uds/components-base 1.5.0 → 1.7.0

package/lib/Modal/Modal.js

@@ -25,7 +25,7 @@ var _utils = require("../utils");
 
 var _ViewportProvider = require("../ViewportProvider");
 
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
@@ -90,14 +90,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.
@@ -122,6 +114,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   copy,
+  closeButton,
   ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -144,12 +137,15 @@ const Modal = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
@@ -164,15 +160,14 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
           ref: ref,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onPress: handleClose,
+              icon: CloseIconComponent,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
-              children: // TODO: add close button interactive states after IconButton is done
-              () => /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIconComponent, { ...selectCloseIconProps(themeTokens)
-              })
+              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
             })
           }), children]
         })
@@ -193,7 +188,12 @@ Modal.propTypes = { ...selectedSystemPropTypes,
   onClose: _propTypes.default.func,
   maxWidth: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('Modal'),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: _propTypes.default.node
 };
 var _default = Modal;
 exports.default = _default;

package/lib/Radio/Radio.js

@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
 const selectContainerStyles = ({
   containerBackgroundColor,
@@ -186,22 +186,29 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
         hover,
         pressed
       });
+      const labelStyles = selectLabelStyles(stateTokens);
+      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+        height: labelStyles.lineHeight
+      }] : null;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
         space: 0,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
           style: [staticStyles.container, selectContainerStyles(stateTokens)],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
-            tokens: (0, _RadioButton.selectRadioButtonTokens)(stateTokens),
-            isControlled: isControlled,
-            isChecked: isChecked,
-            inactive: inactive,
-            defaultChecked: defaultChecked,
-            inputId: inputId,
-            handleChange: handleChange,
-            name: inputName,
-            value: value
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: alignWithLabel,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+              tokens: (0, _RadioButton.selectRadioButtonTokens)(stateTokens),
+              isControlled: isControlled,
+              isChecked: isChecked,
+              inactive: inactive,
+              defaultChecked: defaultChecked,
+              inputId: inputId,
+              handleChange: handleChange,
+              name: inputName,
+              value: value
+            })
           }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            style: selectLabelStyles(stateTokens),
+            style: labelStyles,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
               forId: inputId,
               children: label
@@ -285,5 +292,9 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib/Radio/RadioGroup.js

@@ -32,6 +32,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -115,11 +116,18 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly: readOnly || inactive
   });
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.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;
@@ -138,7 +146,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       label: label,
       name: inputGroupName,
       tokens: radioTokens,
-      variant: variant
+      variant: variant,
+      ...selectItemProps(itemRest)
     }, radioId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
@@ -180,7 +189,7 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * Array of objects containing specifics for each Radio to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({ ...selectedItemPropTypes,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,

package/lib/RadioCard/RadioCard.js

@@ -33,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.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/RadioCard/RadioCardGroup.js

@@ -30,6 +30,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.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
@@ -120,6 +121,12 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.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 (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
     ref: ref,
     name: inputGroupName,
@@ -139,7 +146,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
         title,
         content,
         id,
-        onChange: itemOnChange
+        onChange: itemOnChange,
+        ...itemRest
       }, index) => {
         const cardId = id || `RadioCard[${index}]`;
 
@@ -158,6 +166,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
           tokens: radioCardTokens,
           variant: variant,
           readOnly: readOnly,
+          ...selectItemProps(itemRest),
           ...props,
           children: content
         }, cardId);
@@ -186,7 +195,7 @@ RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * Array of objects containing specifics for each RadioCard to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({ ...selectedItemPropTypes,
     title: _propTypes.default.string,
     content: _propTypes.default.node,
     id: _propTypes.default.string,

package/lib/Search/Search.js

@@ -35,7 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
 
 const selectInputTokens = ({
   searchTokens,
@@ -90,8 +91,9 @@ const selectIconTokens = ({
 
 
 const Search = /*#__PURE__*/(0, _react.forwardRef)(({
-  initialValue = '',
-  placeholder = 'Search',
+  initialValue,
+  value,
+  placeholder,
   inactive,
   onChange,
   onSubmit,
@@ -102,7 +104,14 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   ...rest
 }, ref) => {
-  const [value, setValue] = (0, _react.useState)(initialValue);
+  const {
+    currentValue = '',
+    setValue
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange
+  });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
@@ -123,26 +132,24 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
-      onSubmit(value, event);
+      onSubmit(currentValue, event);
     }
   };
 
-  const handleChange = (currentValue, event) => {
-    setValue(currentValue, event);
-    if (onChange !== undefined) onChange(currentValue, event);
-  };
-
   const handleClear = event => {
     setValue('', event);
     if (onClear !== undefined) onClear('', event);
-    if (onChange !== undefined) onChange('', event);
   };
 
-  const isEmpty = value === '';
+  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
+
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
+
+  const placeholderText = placeholder ?? a11yLabelText;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+    ...selectContainerProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...selectInputProps(rest),
       ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
@@ -150,15 +157,15 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
         buttonsGapSize,
         isEmpty
       }),
-      placeholder: placeholder,
+      placeholder: placeholderText,
       placeholderTextColor: placeholderColor,
       inactive: inactive,
       enablesReturnKeyAutomatically: true,
       returnKeyType: "search",
-      value: value,
-      onChange: handleChange,
+      value: currentValue,
+      onChange: setValue,
       onSubmitEditing: handleSubmit,
-      accessibilityLabel: accessibilityLabel || getCopy('accessibilityLabel')
+      accessibilityLabel: a11yLabelText
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -190,7 +197,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedSystemPropTypes,
+Search.propTypes = { ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
 
   /**
    * Use this to set the initial value of the search input.

package/lib/Select/Select.js

@@ -221,7 +221,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleMouseOut = () => setIsHovered(false);
 
   const {
-    props: supportsProps,
+    supportsProps,
     ...selectedProps
   } = selectProps(rest);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Select', tokens, variant, {
@@ -262,8 +262,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
       }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         pointerEvents: "none",
         style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, {
-          tokens: selectValidationIconTokens(themeTokens)
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
         })
       }), IconComponent && _Platform.default.OS !== 'android' &&
       /*#__PURE__*/

package/lib/Tags/Tags.js

@@ -27,9 +27,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _props = require("../utils/props");
-
-var _input = require("../utils/input");
+var _utils = require("../utils");
 
 var _pressability = require("../utils/pressability");
 
@@ -41,7 +39,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 
 const selectIconTextTokens = ({
   icon,
@@ -99,19 +98,19 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _props.selectTokens)('StackView', themeTokens);
+  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
   const {
     direction,
     space
   } = themeTokens;
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => (0, _props.selectTokens)('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
 
   const {
     currentValues,
     toggleOneValue
-  } = (0, _input.useMultipleInputValues)({
+  } = (0, _utils.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -123,6 +122,12 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   });
   const itemA11yRole = 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
     ref: ref,
     ...selectedProps,
@@ -132,8 +137,8 @@ const Tags = /*#__PURE__*/(0, _react.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
 
@@ -144,17 +149,17 @@ const Tags = /*#__PURE__*/(0, _react.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,
-        ..._props.a11yProps.getPositionInSet(items.length, index)
+        ..._utils.a11yProps.getPositionInSet(items.length, index),
+        ...selectItemProps(itemRest)
       };
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
         ref: itemRef,
@@ -163,7 +168,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
         tokens: getButtonTokens,
         selected: isSelected,
         inactive: inactive,
-        ...itemA11y,
+        ...itemProps,
         children: ({
           textStyles,
           ...buttonState
@@ -203,8 +208,8 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 Tags.displayName = 'Tags';
 Tags.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('Tags'),
-  variant: _props.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Tags'),
+  variant: _utils.variantProp.propType,
 
   /**
    * If provided, sets a maximum number of items a user may select at once.
@@ -214,7 +219,8 @@ Tags.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.

package/lib/TextInput/TextArea.js

@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.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.
@@ -75,7 +75,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   };
 
   const {
-    props: supportsProps,
+    supportsProps,
     ...selectedProps
   } = selectProps(rest);
   const inputProps = { ...selectedProps,

package/lib/TextInput/TextInput.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
@@ -23,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.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.
@@ -46,10 +48,18 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
+  pattern,
   ...rest
 }, ref) => {
+  _react.default.useEffect(() => {
+    if (_Platform.default.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/TextInput/TextInputBase.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
 const selectInputStyles = ({
   backgroundColor,

package/lib/TextInput/propTypes.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const textInputPropTypes = {
@@ -36,7 +38,12 @@ 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.default.func
+  onChange: _propTypes.default.func,
+  ..._Platform.default.select({
+    web: {
+      pattern: _propTypes.default.string
+    }
+  })
 };
 var _default = textInputPropTypes;
 exports.default = _default;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 
 const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -141,7 +141,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
     space: 2,
     direction: "row",
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectLabelStyles(themeTokens),
+      style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
         forId: inputId,
         label: label,
@@ -244,6 +244,9 @@ const staticStyles = _StyleSheet.default.create({
   switch: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
   }
 });