@telus-uds/components-base 1.3.0 → 1.5.0

package/lib/Feedback/Feedback.js

@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
 const selectTitleTextStyles = ({
@@ -102,17 +104,15 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
     style: contentTextStyles,
     children: children
   }) : children;
-
-  const accessibilityProps = _utils.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole: validation === 'error' ? 'alert' : undefined,
     ...rest
   });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectStyles(themeTokens),
-    ...accessibilityProps,
     nativeID: id,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: space,
       children: [title !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
@@ -133,7 +133,8 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Feedback.displayName = 'Feedback';
-Feedback.propTypes = {
+Feedback.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
    */

package/lib/Fieldset/Fieldset.js

@@ -81,9 +81,7 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
 
   const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: typeof children === 'function' ? children({
-      a11yProps
-    }) : children
+    children: typeof children === 'function' ? children(a11yProps) : children
   });
   const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
   const stackedContent = (0, _StackView.getStackedContent)(orderedContent, {

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -31,6 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
 
 const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
@@ -38,7 +39,7 @@ const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectT
  * Base component that scrolls horizontally and displays left and right buttons if
  * there is content to the left and the right which can be scrolled to.
  *
- * @TODO revist `ScrollButton` after IconButton is stable.
+ * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 
 
@@ -138,9 +139,7 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
 
-  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
-
-  const a11y = _utils.a11yProps.select(rest); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
   // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
 
 
@@ -155,11 +154,10 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
       onLayout: handleContainerLayout,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [staticStyles.scrollContainer, {
-        marginBottom: gutter,
         borderBottomWidth,
         borderBottomColor
       }],
-      ...a11y,
+      ...selectProps(rest),
       children: children
     }), showPreviousButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
       icon: previousIcon,
@@ -188,7 +186,7 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-HorizontalScroll.propTypes = {
+HorizontalScroll.propTypes = { ...selectedSystemPropTypes,
   itemPositions: _itemPositions.itemPositionsPropType,
   ScrollButton: _propTypes.default.elementType,
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -9,17 +9,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _ThemeProvider = require("../ThemeProvider");
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _utils = require("../utils");
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _ThemeProvider = require("../ThemeProvider");
 
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
@@ -31,19 +29,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -57,47 +47,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ..._utils.a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = (0, _utils.selectTokens)('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ..._utils.a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';

package/lib/IconButton/IconButton.js

@@ -21,8 +21,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,6 +31,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectOuterStyle = ({
   backgroundColor,
   borderRadius,
@@ -91,7 +91,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
 
-  const a11y = _props.a11yProps.select({ ...rest,
+  const selectedProps = selectProps({ ...rest,
     accessibilityRole
   });
 
@@ -110,14 +110,14 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
     onPress: handlePress,
     hrefAttrs: hrefAttrs,
     style: getOuterStyle,
-    ...a11y,
+    ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
-          title: a11y.accessibilityLabel,
+          title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
         })
       });
@@ -125,7 +125,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 IconButton.displayName = 'IconButton';
-IconButton.propTypes = { ..._props.a11yProps.types,
+IconButton.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('IconButton'),
   icon: _propTypes.default.elementType.isRequired,

package/lib/InputLabel/InputLabel.js

@@ -31,6 +31,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
 const selectHintStyles = ({
@@ -61,7 +63,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   hintId,
   tooltip,
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
@@ -69,6 +72,7 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
@@ -92,7 +96,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 InputLabel.displayName = 'InputLabel';
-InputLabel.propTypes = {
+InputLabel.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * The input label.
    */

package/lib/InputSupports/InputSupports.js

@@ -61,8 +61,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
       tooltip: tooltip,
       forId: inputId
     }), typeof children === 'function' ? children({
-      a11yProps,
-      inputId
+      inputId,
+      ...a11yProps
     }) : children, feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback,

package/lib/Link/LinkBase.js

@@ -35,6 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
+
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -129,7 +131,6 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens = {},
   children,
   accessibilityRole = 'link',
-  dataSet,
   ...rawRest
 }, ref) => {
   const {
@@ -142,7 +143,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
     rest
   } = _props.hrefAttrsProp.bundle(props);
 
-  const linkPropSet = _props.linkProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     href,
     onPress: _props.linkProps.handleHref({
@@ -159,9 +160,8 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
 
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...linkPropSet,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
     ref: ref,
-    dataSet: dataSet,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
@@ -195,8 +195,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ..._props.a11yProps.types,
-  ..._props.linkProps.types,
+LinkBase.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _props.getTokensPropType)('Link'),
   variant: _props.variantProp.propType,
 

package/lib/List/List.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 var _ListItem = _interopRequireDefault(require("./ListItem"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
+
 const List = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   showDivider,
@@ -43,8 +43,6 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
     default: 'none'
   });
 
-  const a11y = _props.a11yProps.select(rest);
-
   const items = _react.Children.map(children, (child, index) => {
     if (child.type.name === _ListItem.default.name) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
@@ -61,12 +59,12 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,
-    ...a11y,
+    ...selectProps(rest),
     children: items
   });
 });
 List.displayName = 'List';
-List.propTypes = { ..._props.a11yProps.types,
+List.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: (0, _utils.componentPropType)('ListItem'),

package/lib/List/ListItem.js

@@ -27,6 +27,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectBulletStyles = ({
   itemBulletWidth,
   itemBulletHeight,
@@ -108,7 +110,8 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   iconSize,
   showDivider,
   children,
-  isLastItem
+  isLastItem,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
@@ -182,6 +185,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     style: [staticStyles.itemContainer, getContainerStyle()],
     accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
     children: [renderMarker(), renderItem()]
   });
 });
@@ -196,7 +200,7 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-ListItem.propTypes = {
+ListItem.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: _propTypes.default.node.isRequired,

package/lib/Modal/Modal.js

@@ -37,6 +37,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectContainerStyles = ({
   containerPaddingLeft,
   containerPaddingRight,
@@ -119,7 +121,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   maxWidth,
   tokens,
   variant,
-  copy
+  copy,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
@@ -150,6 +153,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.positioningContainer],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -182,7 +186,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Modal.displayName = 'Modal';
-Modal.propTypes = {
+Modal.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
   copy: _utils.copyPropTypes,
   isOpen: _propTypes.default.bool,

package/lib/Notification/Notification.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -33,6 +31,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
@@ -124,7 +124,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   dismissible,
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
@@ -140,10 +141,11 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   }
 
   const textStyles = selectTextStyles(themeTokens);
-  const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-    style: textStyles,
-    children: children
-  }) : children;
+  const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+    textStyles
+  }) : children, {
+    style: textStyles
+  });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent
@@ -155,6 +157,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    ...selectProps(rest),
     children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectIconContainerStyles(themeTokens),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
@@ -178,7 +181,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Notification.displayName = 'Notification';
-Notification.propTypes = {
+Notification.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Content of the `Notification`.
    */

package/lib/Pagination/Pagination.js

@@ -35,6 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectTextStyles = ({
   color,
   fontName,
@@ -57,7 +59,8 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   sideButtonVariant,
   sideButtonTokens,
   LinkRouter,
-  linkRouterProps
+  linkRouterProps,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -98,7 +101,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     tokens: sideButtonTokens,
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
-  }), ...items.map((child, itemIndex) => {
+  }), ...items.map((_child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
     const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
@@ -135,6 +138,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
     ref: ref,
+    ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
     .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       right: gap,
@@ -144,7 +148,8 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = { ..._utils.withLinkRouter.propTypes,
+Pagination.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.propTypes,
   children: (0, _utils.componentPropType)('PageButton'),
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,

package/lib/Progress/Progress.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _props = require("../utils/props");
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -25,6 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -79,12 +79,13 @@ const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectProgressStyles(themeTokens),
-    ..._props.a11yProps.select(rest),
+    ...selectProps(rest),
     children: children
   });
 });
 Progress.displayName = 'Progress';
-Progress.propTypes = {
+Progress.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */