@telus-uds/components-base 1.5.0 → 1.6.0

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.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.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.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
   }
 });
 

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -23,9 +23,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _props = require("../utils/props");
-
-var _input = require("../utils/input");
+var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -35,7 +33,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.viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
@@ -70,7 +69,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     currentValues,
     toggleOneValue
-  } = (0, _input.useMultipleInputValues)({
+  } = (0, _utils.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -82,13 +81,20 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   });
   const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.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);
 
@@ -103,7 +109,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       },
       accessibilityRole: itemA11yRole,
       accessibilityLabel,
-      ..._props.a11yProps.getPositionInSet(items.length, index)
+      ..._utils.a11yProps.getPositionInSet(items.length, index)
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
       id: id,
@@ -114,7 +120,8 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
-      ...itemA11y
+      ...itemA11y,
+      ...selectItemProps(itemRest)
     }, id);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
@@ -136,8 +143,8 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
 ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('ToggleSwitchGroup'),
-  variant: _props.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _utils.variantProp.propType,
 
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
@@ -148,7 +155,8 @@ ToggleSwitchGroup.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 on the label.
      */
@@ -217,7 +225,7 @@ ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * Toggle switch token overrides.
    */
-  toggleSwitchTokens: (0, _props.getTokensPropType)('ToggleSwitch'),
+  toggleSwitchTokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
 
   /**
    * Current validation status of the group, passed to the feedback element if there is one.

package/lib/utils/containUniqueFields.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+// 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;
+};
+
+var _default = containUniqueFields;
+exports.default = _default;

package/lib/utils/index.js

@@ -10,7 +10,8 @@ var _exportNames = {
   useSpacingScale: true,
   useResponsiveProp: true,
   useUniqueId: true,
-  withLinkRouter: true
+  withLinkRouter: true,
+  containUniqueFields: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -54,6 +55,12 @@ Object.defineProperty(exports, "withLinkRouter", {
     return _withLinkRouter.default;
   }
 });
+Object.defineProperty(exports, "containUniqueFields", {
+  enumerable: true,
+  get: function () {
+    return _containUniqueFields.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -179,6 +186,8 @@ Object.keys(_ssr).forEach(function (key) {
   });
 });
 
+var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/props/handlerProps.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: _propTypes.default.func,
+
+    /**
+     * onFocus handler
+     */
+    onFocus: _propTypes.default.func
+  },
+  select: ({
+    onBlur,
+    onFocus
+  }) => ({
+    onBlur,
+    onFocus
+  })
+};
+exports.focusHandlerProps = focusHandlerProps;
+const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: _propTypes.default.func,
+
+    /**
+     * onChangeText handler
+     */
+    onChangeText: _propTypes.default.func,
+
+    /**
+     * onSubmit handler
+     */
+    onSubmit: _propTypes.default.func,
+
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: _propTypes.default.func
+  },
+  select: ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+};
+exports.textInputHandlerProps = textInputHandlerProps;
+var _default = {
+  focusHandlerProps,
+  textInputHandlerProps
+};
+exports.default = _default;

package/lib/utils/props/index.js

@@ -125,6 +125,20 @@ Object.keys(_tokens).forEach(function (key) {
   });
 });
 
+var _handlerProps = require("./handlerProps");
+
+Object.keys(_handlerProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _handlerProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _handlerProps[key];
+    }
+  });
+});
+
 var _a11yProps = _interopRequireDefault(require("./a11yProps"));
 
 var _clickProps = _interopRequireDefault(require("./clickProps"));

package/lib/utils/props/inputSupportsProps.js

@@ -48,18 +48,16 @@ var _default = {
     hintPosition,
     feedback,
     tooltip,
-    validation,
-    ...rest
+    validation
   }) => ({
-    props: {
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 };
 exports.default = _default;

package/lib-module/Button/ButtonBase.js

@@ -6,9 +6,9 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils';
 import buttonPropTypes from './propTypes';
-import { a11yProps, getCursorStyle, clickProps, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,

package/lib-module/Button/ButtonGroup.js

@@ -6,11 +6,11 @@ import ButtonBase from './ButtonBase';
 import { StackWrap } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils/props';
-import { useMultipleInputValues } from '../utils/input';
+import { a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, 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 ButtonGroup = /*#__PURE__*/forwardRef(({
   variant,
   tokens,
@@ -53,6 +53,12 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
     ...rest
   });
   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 /*#__PURE__*/_jsx(StackWrap, { ...systemProps,
     space: space,
     direction: direction,
@@ -62,7 +68,8 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
       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
 
@@ -73,7 +80,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
       }]);
 
       const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress();
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
 
@@ -95,6 +102,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
         selected: isSelected,
         inactive: inactive,
         ...itemA11y,
+        ...selectItemProps(itemRest),
         children: label
       }, id);
     })
@@ -114,7 +122,8 @@ ButtonGroup.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/Card/PressableCardBase.js

@@ -4,10 +4,10 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const tokenKeys = [...getTokenNames('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];