@telus-uds/components-base 1.80.0 → 1.81.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 12 Mar 2024 22:22:38 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:39:50 GMT
+
+### Patches
+
+- prevent flexgrid dataset property to be overruled (guillermo.peitzner@telus.com)
+- `Autocomplete`: Component breaks on Android because of type-casting (shahzaibkhalidmalik@outlook.com)
+- `Autocomplete`: Overlay does not render next to `TextInput` (shahzaibkhalidmalik@outlook.com)
+
 ## 1.80.0
 
-Tue, 12 Mar 2024 22:22:38 GMT
+Tue, 12 Mar 2024 22:26:51 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -193,7 +193,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       const throttledUpdateInputWidth = (0, _lodash.default)(updateInputWidth, 100, {
         leading: false
       });
-      updateInputWidth();
+      throttledUpdateInputWidth();
       _Dimensions.default.addEventListener('change', throttledUpdateInputWidth);
       return () => {
         _Dimensions.default.removeEventListener('change', throttledUpdateInputWidth);

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/FlexGrid/FlexGrid.js

@@ -37,6 +37,7 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tag,
     accessibilityRole,
     children,
+    dataSet,
     ...rest
   } = _ref;
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
@@ -99,15 +100,17 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
     value: gutter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: children
     })
   });

package/lib/Listbox/ListboxOverlay.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 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 _portal = require("@gorhom/portal");
+var _Portal = _interopRequireDefault(require("../Portal"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Card = _interopRequireDefault(require("../Card"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,7 +66,7 @@ const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
   return props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
         ...props
       })

package/lib/Portal/Portal.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [portalContainer, setPortalContainer] = (0, _react.useState)(null);
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined';
+  (0, _react.useEffect)(() => {
+    if (!isWebClient) {
+      return;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, [isWebClient]);
+  if (!portalContainer || !isWebClient) return null;
+  return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
+};
+Portal.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = Portal;
+exports.default = _default;

package/lib/Portal/Portal.native.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _portal = require("@gorhom/portal");
+var _default = _portal.Portal;
+exports.default = _default;

package/lib/Portal/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Portal = _interopRequireDefault(require("./Portal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Portal.default;
+exports.default = _default;

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
@@ -357,7 +359,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
-      keyboardType: isNumeric && 'numeric',
+      keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,
@@ -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/index.js

@@ -277,7 +277,7 @@ Object.defineProperty(exports, "Pagination", {
 Object.defineProperty(exports, "Portal", {
   enumerable: true,
   get: function () {
-    return _portal.Portal;
+    return _Portal.default;
   }
 });
 Object.defineProperty(exports, "PressableCardBase", {
@@ -695,7 +695,7 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
-var _portal = require("@gorhom/portal");
+var _Portal = _interopRequireDefault(require("./Portal"));
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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/Autocomplete/Autocomplete.js

@@ -185,7 +185,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       const throttledUpdateInputWidth = throttle(updateInputWidth, 100, {
         leading: false
       });
-      updateInputWidth();
+      throttledUpdateInputWidth();
       Dimensions.addEventListener('change', throttledUpdateInputWidth);
       return () => {
         Dimensions.removeEventListener('change', throttledUpdateInputWidth);

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/FlexGrid/FlexGrid.js

@@ -28,6 +28,7 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     tag,
     accessibilityRole,
     children,
+    dataSet,
     ...rest
   } = _ref;
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
@@ -90,15 +91,17 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return /*#__PURE__*/_jsx(GutterContext.Provider, {
     value: gutter,
     children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: children
     })
   });

package/lib-module/Listbox/ListboxOverlay.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 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 { Portal } from '@gorhom/portal';
+import Portal from '../Portal';
 import { useThemeTokens } from '../ThemeProvider';
 import Card from '../Card';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib-module/Portal/Portal.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [portalContainer, setPortalContainer] = useState(null);
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined';
+  useEffect(() => {
+    if (!isWebClient) {
+      return;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, [isWebClient]);
+  if (!portalContainer || !isWebClient) return null;
+  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
+};
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default Portal;

package/lib-module/Portal/Portal.native.js

@@ -0,0 +1,2 @@
+import { Portal } from '@gorhom/portal';
+export default Portal;

package/lib-module/Portal/index.js

@@ -0,0 +1,2 @@
+import Portal from './Portal';
+export default Portal;

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
@@ -349,7 +351,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
       })
     }), /*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
-      keyboardType: isNumeric && 'numeric',
+      keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,
@@ -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/index.js

@@ -65,4 +65,4 @@ export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';
-export { Portal } from '@gorhom/portal';
+export { default as Portal } from './Portal';

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.0",
+  "version": "1.81.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -167,7 +167,7 @@ const Autocomplete = forwardRef(
 
         const throttledUpdateInputWidth = throttle(updateInputWidth, 100, { leading: false })
 
-        updateInputWidth()
+        throttledUpdateInputWidth()
 
         Dimensions.addEventListener('change', throttledUpdateInputWidth)
 

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/FlexGrid/FlexGrid.jsx

@@ -39,6 +39,7 @@ const FlexGrid = forwardRef(
       tag,
       accessibilityRole,
       children,
+      dataSet,
       ...rest
     },
     ref
@@ -104,14 +105,11 @@ const FlexGrid = forwardRef(
       ...selectProps(rest)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView
-          ref={ref}
-          {...props}
-          style={flexgridStyles}
-          dataSet={mediaIds && { media: mediaIds }}
-        >
+        <BaseView ref={ref} {...props} style={flexgridStyles} dataSet={dataSetValue}>
           {children}
         </BaseView>
       </GutterContext.Provider>

package/src/Listbox/ListboxOverlay.jsx

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { Portal } from '@gorhom/portal'
+import Portal from '../Portal'
 import { useThemeTokens } from '../ThemeProvider'
 import Card from '../Card'
 

package/src/Portal/Portal.jsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = ({ children }) => {
+  const [portalContainer, setPortalContainer] = useState(null)
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined'
+
+  useEffect(() => {
+    if (!isWebClient) {
+      return
+    }
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    setPortalContainer(container)
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container)
+      }
+    }
+  }, [isWebClient])
+
+  if (!portalContainer || !isWebClient) return null
+
+  return ReactDOM.createPortal(children, portalContainer)
+}
+
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default Portal

package/src/Portal/Portal.native.jsx

@@ -0,0 +1,3 @@
+import { Portal } from '@gorhom/portal'
+
+export default Portal

package/src/Portal/index.js

@@ -0,0 +1,3 @@
+import Portal from './Portal'
+
+export default Portal

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()
@@ -334,7 +336,7 @@ const TextInputBase = forwardRef(
         )}
         <NativeTextInput
           ref={inputRef}
-          keyboardType={isNumeric && 'numeric'}
+          keyboardType={isNumeric ? 'numeric' : 'default'}
           inputMode={isNumeric && 'numeric'}
           style={nativeInputStyle}
           secureTextEntry={isPassword && !showPassword}
@@ -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/index.js

@@ -77,4 +77,4 @@ export {
 } from './ThemeProvider'
 
 export * from './utils'
-export { Portal } from '@gorhom/portal'
+export { default as Portal } from './Portal'

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 }

package/types/Portal.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export interface PortalProps {
+  children: ReactNode
+}

package/types/index.d.ts

@@ -59,4 +59,7 @@ export { TooltipTokens, TooltipVariants, TooltipProps } from './ToolTip'
 export { default as Typography } from './Typography'
 export { TypographyProps, TypographyVariants, TypographyTokens } from './Typography'
 
+export { default as Portal } from './Portal'
+export { PortalProps } from './Portal'
+
 export * from './Common'