@telus-uds/components-base 1.80.1 → 1.82.0

package/lib/ProductCard/ProductCard.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _utils = require("../utils");
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _PriceLockup = _interopRequireDefault(require("../PriceLockup"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _Button = require("../Button");
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const selectProductCardTokens = _ref => {
+  let {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  } = _ref;
+  return {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  };
+};
+const ProductCard = _ref2 => {
+  var _getCopy;
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    image = {
+      src: '',
+      alt: ''
+    },
+    cardId,
+    isSelected,
+    onSelect,
+    tokens,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProductCard', tokens, {
+    viewport
+  });
+  const getCopy = (0, _utils.useCopy)({
+    copy,
+    dictionary
+  });
+  const {
+    currentValue,
+    setValue
+  } = (0, _utils.useInputValue)();
+  const hasClicked = isSelected || currentValue;
+  const handlePress = event => {
+    if (cardId) {
+      onSelect(cardId);
+    } else {
+      setValue(!currentValue, event);
+    }
+  };
+  const renderButton = hasClicked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    vertical: 1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: 2,
+      direction: "row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: themeTokens.selectedButtonIcon,
+        variant: {
+          color: 'success'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          fontWeight: 400
+        },
+        children: getCopy('selectedButtonLabel')
+      })]
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+    onPress: handlePress,
+    variant: {
+      purpose: 'primary',
+      size: 'small',
+      width: 'full'
+    },
+    children: getCopy('buttonLabel')
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ...selectProps(rest),
+    style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.imageContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: image.src,
+        style: staticStyles.image,
+        alt: image.alt,
+        accessibilityLabel: image.alt,
+        resizeMethod: "resize",
+        accessibilityIgnoresInvertColors: true
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.textContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        left: 3,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          space: 1,
+          children: [getCopy('badgeText') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+            variant: {
+              outline: true,
+              purpose: 'editorial'
+            },
+            children: getCopy('badgeText')
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h6'
+            },
+            children: getCopy('brandName')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h4',
+              colour: 'brand'
+            },
+            tokens: {
+              fontWeight: 400
+            },
+            children: getCopy('productName')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+            space: 3,
+            divider: true,
+            direction: "row",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+              ...getCopy('primaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+              ...getCopy('secondaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            top: 2,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+              space: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                variant: {
+                  size: 'h6'
+                },
+                tokens: {
+                  fontWeight: 500
+                },
+                children: getCopy('term')
+              }), getCopy('buttonLabel') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                top: 1,
+                children: renderButton
+              }) : null]
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+ProductCard.displayName = 'ProductCard';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  badgeText: _propTypes.default.string,
+  brandName: _propTypes.default.string.isRequired,
+  productName: _propTypes.default.string.isRequired,
+  primaryPrice: _propTypes.default.object.isRequired,
+  secondaryPrice: _propTypes.default.object,
+  term: _propTypes.default.string.isRequired,
+  buttonLabel: _propTypes.default.string.isRequired,
+  selectedButtonLabel: _propTypes.default.string.isRequired
+});
+ProductCard.propTypes = {
+  ...selectedSystemPropTypes,
+  image: _propTypes.default.shape({
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    alt: _propTypes.default.string
+  }),
+  /**
+   * Select English or French copy for the place holder labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  tokens: (0, _utils.getTokensPropType)('ProductCard')
+};
+var _default = ProductCard;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  imageContainer: {
+    width: '30%',
+    minWidth: 96,
+    maxWidth: 96
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+    height: undefined,
+    // This is to maintain the aspect ratio
+    aspectRatio: 0.8
+  },
+  textContainer: {
+    width: '70%'
+  }
+});

package/lib/ProductCard/dictionary.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'left',
+      rateText: '/month'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'left',
+      rateText: 'Upfront'
+    },
+    term: '24 months | 0% APR Bring-it-Back applied',
+    buttonLabel: 'Select this phone',
+    selectedButtonLabel: 'Selected phone'
+  },
+  fr: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'right',
+      rateText: '/mois'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'right',
+      rateText: "d'acompte"
+    },
+    term: '24 mois | TAP de 0% | avec Option retour',
+    buttonLabel: 'Sélectionner ce téléphone',
+    selectedButtonLabel: 'Téléphone sélectionné'
+  }
+};
+exports.default = _default;

package/lib/ProductCard/index.js

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

package/lib/ProductCardGroup/ProductCardGroup.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _ProductCard = _interopRequireDefault(require("../ProductCard"));
+var _StackView = require("../StackView");
+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.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const ProductCardGroup = _ref => {
+  let {
+    productCards,
+    maxSelection = 1,
+    ...rest
+  } = _ref;
+  const [selectedCardIds, setSelectedCardIds] = (0, _react.useState)([]);
+  const handleSelect = id => {
+    const isAlreadySelected = selectedCardIds.includes(id);
+    let updatedSelectedCardIds;
+    if (isAlreadySelected) {
+      updatedSelectedCardIds = selectedCardIds.filter(cardId => cardId !== id);
+    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
+      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id);
+    } else {
+      updatedSelectedCardIds = [...selectedCardIds, id];
+    }
+    setSelectedCardIds(updatedSelectedCardIds);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: {
+        xs: 'column',
+        lg: 'row'
+      },
+      space: 4,
+      children: productCards.map((cardProperties, index) => {
+        const cardId = cardProperties.id || index;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.default, {
+            cardId: cardId,
+            isSelected: selectedCardIds.includes(cardId),
+            onSelect: handleSelect,
+            ...cardProperties
+          }, cardId)
+        }, cardId);
+      })
+    })
+  });
+};
+ProductCardGroup.displayName = 'ProductCardGroup';
+ProductCardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The maximum number of ProductCards a user may select at once. Defaults to 1.
+   * To have no limit and allow any number of selections, pass `null`.
+   */
+  maxSelection: _propTypes.default.number,
+  /**
+   * Props to be passed to the `ProductCard` component.
+   * id is required for each card.
+   * You may also pass in a custom dictionary object.
+   */
+  productCards: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    image: _propTypes.default.object,
+    dictionary: _propTypes.default.object
+  })).isRequired
+};
+var _default = ProductCardGroup;
+exports.default = _default;

package/lib/ProductCardGroup/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _ProductCardGroup.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
@@ -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

@@ -37,6 +37,8 @@ var _exportNames = {
   OrderedList: true,
   Pagination: true,
   PriceLockup: true,
+  ProductCard: true,
+  ProductCardGroup: true,
   Progress: true,
   QuickLinks: true,
   QuickLinksFeature: true,
@@ -292,6 +294,18 @@ Object.defineProperty(exports, "PriceLockup", {
     return _PriceLockup.default;
   }
 });
+Object.defineProperty(exports, "ProductCard", {
+  enumerable: true,
+  get: function () {
+    return _ProductCard.default;
+  }
+});
+Object.defineProperty(exports, "ProductCardGroup", {
+  enumerable: true,
+  get: function () {
+    return _ProductCardGroup.default;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -600,6 +614,8 @@ var _Notification = _interopRequireDefault(require("./Notification"));
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
+var _ProductCard = _interopRequireDefault(require("./ProductCard"));
+var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
 var _Progress = _interopRequireDefault(require("./Progress"));
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
 var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));

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

@@ -239,6 +239,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
     if (nested) setNestedSelectedValue(newValue);
+    inputRef.current.focus();
   };
 
   /**
@@ -268,7 +269,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+      event.preventDefault();
       targetRef.current.focus();
     }
   };

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