@telus-uds/components-base 1.80.1 → 1.81.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Mar 2024 21:09:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.81.0
+
+Wed, 27 Mar 2024 21:09:55 GMT
+
+### Minor changes
+
+- add test-id prop to radio-group component (guillermo.peitzner@telus.com)
+
+### Patches
+
+- SSR: sanitize function values in CSS styles (guillermo.peitzner@telus.com)
+- validation added to the datepicker input and input cleaned after the content is deleted (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.80.1
 
-Tue, 19 Mar 2024 18:37:02 GMT
+Tue, 19 Mar 2024 18:39:50 GMT
 
 ### Patches
 

package/lib/Badge/Badge.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
@@ -86,15 +85,7 @@ const Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Badge', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: _Platform.default.select({
-      native: {
-        ...staticStyles.container,
-        ...selectContainerBackground(themeTokens),
-        ...selectContainerBorder(themeTokens),
-        ...selectContainerPadding(themeTokens)
-      },
-      web: {}
-    }),
+    style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       tokens: getTypographyTokens(themeTokens),

package/lib/Fieldset/Fieldset.js

@@ -40,7 +40,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     name: fieldsetName,
     children,
     variant = {},
-    tokens = {}
+    tokens = {},
+    ...rest
   } = _ref;
   /* Fieldset tokenization:
   - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
@@ -126,6 +127,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     name: fieldsetName,
     borderStyle: borderStyles(themeTokens),
     showBorderStyle: showErrorBorder,
+    ...rest,
     children: stackedContent
   });
 });

package/lib/Fieldset/FieldsetContainer.js

@@ -7,20 +7,25 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cssReset = _interopRequireDefault(require("./cssReset"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.htmlAttrs]);
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
- */const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inactive,
     accessibilityRole,
     name: fieldsetName,
     showBorderStyle = false,
-    borderStyle
+    borderStyle,
+    ...rest
   } = _ref;
   // If needs border for error design or reset the component style
   const styleContainer = showBorderStyle && borderStyle ? borderStyle : _cssReset.default;
@@ -30,11 +35,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     style: styleContainer,
     role: accessibilityRole,
     name: fieldsetName,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: _propTypes.default.string,
   children: _propTypes.default.node,
   inactive: _propTypes.default.bool,

package/lib/Fieldset/FieldsetContainer.native.js

@@ -7,25 +7,31 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
 const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
-    accessibilityRole
+    accessibilityRole,
+    ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: _propTypes.default.node,
   accessibilityRole: _propTypes.default.string
 };

package/lib/TextInput/TextInput.js

@@ -80,6 +80,7 @@ TextInput.propTypes = {
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('TextInput'),
   variant: _utils.variantProp.propType
 };

package/lib/TextInput/TextInputBase.js

@@ -203,6 +203,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     value,
     variant = {},
     type,
+    onKeyPress,
     ...rest
   } = _ref7;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
@@ -335,7 +336,8 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     onChange: handleChangeText,
     defaultValue: initialValue,
     maxLength: type === 'card' ? 19 : undefined,
-    value: isControlled ? currentValue : undefined
+    value: isControlled ? currentValue : undefined,
+    onKeyPress
   };
   const {
     themeOptions
@@ -404,6 +406,7 @@ TextInputBase.propTypes = {
   onFocus: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
   onMouseOver: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
   readOnly: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
   value: _propTypes.default.string,

package/lib/utils/ssr-media-query/create-stylesheet/index.js

@@ -22,7 +22,8 @@ const createStyleSheet = stylesWithQuery => {
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
-      const css = (0, _createDeclarationBlock.default)(stylesWithQuery[key][query]);
+      const sanitizedStyle = (0, _common.sanitizeStyle)(stylesWithQuery[key][query]);
+      const css = (0, _createDeclarationBlock.default)(sanitizedStyle);
       const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
       const rule = (0, _common.createCssRule)(query, stringHash, css);
       (0, _inject.addCss)(`${stringHash}`, rule);

package/lib/utils/ssr-media-query/utils/common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPseudo = exports.isMediaOrPseudo = exports.isMedia = exports.deepClone = exports.createCssRule = void 0;
+exports.sanitizeStyle = exports.isPseudo = exports.isMediaOrPseudo = exports.isMedia = exports.deepClone = exports.createCssRule = void 0;
 const isMedia = query => query.indexOf('@media') === 0;
 exports.isMedia = isMedia;
 const isPseudo = query => query.indexOf(':') === 0;
@@ -22,4 +22,23 @@ const createCssRule = (query, stringHash, css) => {
   }
   return rule;
 };
-exports.createCssRule = createCssRule;
+
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+exports.createCssRule = createCssRule;
+const sanitizeStyle = style => {
+  const sanitizedStyle = {
+    ...style
+  };
+  Object.keys(sanitizedStyle).forEach(property => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString();
+    }
+  });
+  return sanitizedStyle;
+};
+exports.sanitizeStyle = sanitizeStyle;

package/lib-module/Badge/Badge.js

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import Typography from '../Typography';
@@ -77,15 +76,7 @@ const Badge = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const themeTokens = useThemeTokens('Badge', tokens, variant);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: Platform.select({
-      native: {
-        ...staticStyles.container,
-        ...selectContainerBackground(themeTokens),
-        ...selectContainerBorder(themeTokens),
-        ...selectContainerPadding(themeTokens)
-      },
-      web: {}
-    }),
+    style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(Typography, {
       tokens: getTypographyTokens(themeTokens),

package/lib-module/Fieldset/Fieldset.js

@@ -34,7 +34,8 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     name: fieldsetName,
     children,
     variant = {},
-    tokens = {}
+    tokens = {},
+    ...rest
   } = _ref;
   /* Fieldset tokenization:
   - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
@@ -120,6 +121,7 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     name: fieldsetName,
     borderStyle: borderStyles(themeTokens),
     showBorderStyle: showErrorBorder,
+    ...rest,
     children: stackedContent
   });
 });

package/lib-module/Fieldset/FieldsetContainer.js

@@ -1,11 +1,13 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cssReset from './cssReset';
+import { selectSystemProps, a11yProps, htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
 
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -13,7 +15,8 @@ const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
     accessibilityRole,
     name: fieldsetName,
     showBorderStyle = false,
-    borderStyle
+    borderStyle,
+    ...rest
   } = _ref;
   // If needs border for error design or reset the component style
   const styleContainer = showBorderStyle && borderStyle ? borderStyle : cssReset;
@@ -23,11 +26,13 @@ const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
     style: styleContainer,
     role: accessibilityRole,
     name: fieldsetName,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: PropTypes.string,
   children: PropTypes.node,
   inactive: PropTypes.bool,

package/lib-module/Fieldset/FieldsetContainer.native.js

@@ -1,21 +1,28 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View"; // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
-// If a11y testing finds any additional handling is needed at the container level, add it here.
+import View from "react-native-web/dist/exports/View";
+import { selectSystemProps, a11yProps, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
+// If a11y testing finds any additional handling is needed at the container level, add it here.
 const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
-    accessibilityRole
+    accessibilityRole,
+    ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   accessibilityRole: PropTypes.string
 };

package/lib-module/TextInput/TextInput.js

@@ -73,6 +73,7 @@ TextInput.propTypes = {
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 };

package/lib-module/TextInput/TextInputBase.js

@@ -195,6 +195,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     value,
     variant = {},
     type,
+    onKeyPress,
     ...rest
   } = _ref7;
   const [isFocused, setIsFocused] = useState(false);
@@ -327,7 +328,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     onChange: handleChangeText,
     defaultValue: initialValue,
     maxLength: type === 'card' ? 19 : undefined,
-    value: isControlled ? currentValue : undefined
+    value: isControlled ? currentValue : undefined,
+    onKeyPress
   };
   const {
     themeOptions
@@ -396,6 +398,7 @@ TextInputBase.propTypes = {
   onFocus: PropTypes.func,
   onMouseOut: PropTypes.func,
   onMouseOver: PropTypes.func,
+  onKeyPress: PropTypes.func,
   readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
   value: PropTypes.string,

package/lib-module/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,7 +1,7 @@
 import { addCss } from '../utils/inject';
 import createDeclarationBlock from '../utils/create-declaration-block';
 import hash from '../hash';
-import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common';
+import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common';
 const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
@@ -15,7 +15,8 @@ const createStyleSheet = stylesWithQuery => {
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
-      const css = createDeclarationBlock(stylesWithQuery[key][query]);
+      const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query]);
+      const css = createDeclarationBlock(sanitizedStyle);
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
       const rule = createCssRule(query, stringHash, css);
       addCss(`${stringHash}`, rule);

package/lib-module/utils/ssr-media-query/utils/common.js

@@ -12,4 +12,22 @@ const createCssRule = (query, stringHash, css) => {
   }
   return rule;
 };
-export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule };
+
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+const sanitizeStyle = style => {
+  const sanitizedStyle = {
+    ...style
+  };
+  Object.keys(sanitizedStyle).forEach(property => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString();
+    }
+  });
+  return sanitizedStyle;
+};
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle };

package/package.json

@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.80.1",
+  "version": "1.81.0",
   "types": "types/index.d.ts"
 }

package/src/Badge/Badge.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import Typography from '../Typography'
@@ -38,15 +38,12 @@ const Badge = forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   return (
     <View
       ref={ref}
-      style={Platform.select({
-        native: {
-          ...staticStyles.container,
-          ...selectContainerBackground(themeTokens),
-          ...selectContainerBorder(themeTokens),
-          ...selectContainerPadding(themeTokens)
-        },
-        web: {}
-      })}
+      style={[
+        staticStyles.container,
+        selectContainerBackground(themeTokens),
+        selectContainerBorder(themeTokens),
+        selectContainerPadding(themeTokens)
+      ]}
       {...selectProps(rest)}
     >
       <Typography

package/src/Fieldset/Fieldset.jsx

@@ -34,7 +34,8 @@ const Fieldset = forwardRef(
       name: fieldsetName,
       children,
       variant = {},
-      tokens = {}
+      tokens = {},
+      ...rest
     },
     ref
   ) => {
@@ -118,6 +119,7 @@ const Fieldset = forwardRef(
         name={fieldsetName}
         borderStyle={borderStyles(themeTokens)}
         showBorderStyle={showErrorBorder}
+        {...rest}
       >
         {stackedContent}
       </FieldsetContainer>

package/src/Fieldset/FieldsetContainer.jsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
 
+import { selectSystemProps, a11yProps, htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
@@ -14,7 +18,8 @@ const FieldsetContainer = forwardRef(
       accessibilityRole,
       name: fieldsetName,
       showBorderStyle = false,
-      borderStyle
+      borderStyle,
+      ...rest
     },
     ref
   ) => {
@@ -28,6 +33,7 @@ const FieldsetContainer = forwardRef(
         style={styleContainer}
         role={accessibilityRole}
         name={fieldsetName}
+        {...selectProps(rest)}
       >
         {children}
       </fieldset>
@@ -37,6 +43,7 @@ const FieldsetContainer = forwardRef(
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: PropTypes.string,
   children: PropTypes.node,
   inactive: PropTypes.bool,

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -2,16 +2,21 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
+import { selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = forwardRef(({ children, accessibilityRole }, ref) => (
-  <View ref={ref} accessibilityRole={accessibilityRole}>
+const FieldsetContainer = forwardRef(({ children, accessibilityRole, ...rest }, ref) => (
+  <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
     {children}
   </View>
 ))
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   accessibilityRole: PropTypes.string
 }

package/src/TextInput/TextInput.jsx

@@ -71,6 +71,7 @@ TextInput.propTypes = {
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }

package/src/TextInput/TextInputBase.jsx

@@ -182,6 +182,7 @@ const TextInputBase = forwardRef(
       value,
       variant = {},
       type,
+      onKeyPress,
       ...rest
     },
     ref
@@ -311,7 +312,8 @@ const TextInputBase = forwardRef(
       onChange: handleChangeText,
       defaultValue: initialValue,
       maxLength: type === 'card' ? 19 : undefined,
-      value: isControlled ? currentValue : undefined
+      value: isControlled ? currentValue : undefined,
+      onKeyPress
     }
 
     const { themeOptions } = useTheme()
@@ -388,6 +390,7 @@ TextInputBase.propTypes = {
   onFocus: PropTypes.func,
   onMouseOut: PropTypes.func,
   onMouseOver: PropTypes.func,
+  onKeyPress: PropTypes.func,
   readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
   value: PropTypes.string,

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,7 +1,7 @@
 import { addCss } from '../utils/inject'
 import createDeclarationBlock from '../utils/create-declaration-block'
 import hash from '../hash'
-import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
+import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common'
 
 const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
@@ -14,7 +14,8 @@ const createStyleSheet = (stylesWithQuery) => {
 
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
     mediaQueriesAndPseudoClasses.forEach((query) => {
-      const css = createDeclarationBlock(stylesWithQuery[key][query])
+      const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query])
+      const css = createDeclarationBlock(sanitizedStyle)
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
       const rule = createCssRule(query, stringHash, css)
 

package/src/utils/ssr-media-query/utils/common.js

@@ -17,4 +17,22 @@ const createCssRule = (query, stringHash, css) => {
   return rule
 }
 
-export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule }
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+const sanitizeStyle = (style) => {
+  const sanitizedStyle = { ...style }
+
+  Object.keys(sanitizedStyle).forEach((property) => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString()
+    }
+  })
+
+  return sanitizedStyle
+}
+
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle }