@telus-uds/components-base 1.2.0 → 1.4.0

package/lib/Checkbox/Checkbox.js

@@ -31,8 +31,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,6 +41,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 selectInputStyles = ({
   iconBackgroundColor,
   inputBorderColor,
@@ -200,8 +200,6 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
-  const accessibilityProps = _propTypes2.a11yProps.select(rest);
-
   const uniqueId = (0, _useUniqueId.default)('checkbox');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -219,7 +217,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
           checked: isChecked,
           disabled: inactive
         },
-        ...accessibilityProps,
+        ...selectProps(rest),
         children: ({
           focused: focus,
           hovered: hover,
@@ -273,7 +271,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Checkbox.displayName = 'Checkbox';
-Checkbox.propTypes = { ..._propTypes2.a11yProps.propTypes,
+Checkbox.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.

package/lib/Divider/Divider.js

@@ -29,9 +29,10 @@ 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]);
 /**
- * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
 /**
@@ -70,12 +71,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
+
 const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   vertical = false,
   space,
   tokens,
-  testID
+  ...rest
 }, ref) => {
   const {
     color,
@@ -94,11 +96,17 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};
+  const {
+    testID,
+    ...selectedProps
+  } = selectProps({ ...a11y,
+    ...rest
+  });
   const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: [styles.divider, borderStyles],
     testID: testID,
-    ...a11y
+    ...selectedProps
   });
   if (!space) return divider;
   const spacerProps = {
@@ -114,7 +122,7 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Divider.displayName = 'Divider';
-Divider.propTypes = {
+Divider.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Divider'),
   space: _utils.spacingProps.types.spacingValue,
   variant: _utils.variantProp.propType,
@@ -123,14 +131,7 @@ Divider.propTypes = {
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
    */
-  vertical: _propTypes.default.bool,
-
-  /**
-   * @ignore
-   * In tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,
-   * no accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.
-   */
-  testID: _propTypes.default.string
+  vertical: _propTypes.default.bool
 };
 
 const styles = _StyleSheet.default.create({

package/lib/ExpandCollapse/Control.js

@@ -25,6 +25,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]);
+
 function selectContainerStyles({
   backgroundColor,
   borderColor,
@@ -77,15 +79,13 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   accessibilityRole = 'button',
   variant,
-  rest
+  ...rest
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
-
-  const a11y = _utils.a11yProps.select({ ...rest,
+  const selectedProps = selectProps({ ...rest,
     accessibilityRole
   });
-
-  a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
+  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
     expanded: isExpanded
   };
 
@@ -106,7 +106,7 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     onPress: onPress,
     style: getPressableStyle,
     children: pressableState => {
@@ -125,7 +125,7 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ExpandCollapseControl.displayName = 'ExpandCollapseControl';
-ExpandCollapseControl.propTypes = { ..._utils.a11yProps.propTypes,
+ExpandCollapseControl.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
   variant: _utils.variantProp.propType,
 

package/lib/ExpandCollapse/ExpandCollapse.js

@@ -23,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]);
+
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -46,7 +48,8 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
   maxOpen,
   open,
   initialOpen,
-  onChange
+  onChange,
+  ...rest
 }, ref) => {
   const {
     currentValues: openIds,
@@ -64,6 +67,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectBorderStyles(themeTokens),
+    ...selectProps(rest),
     children: typeof children === 'function' ? children({
       openIds,
       onToggle,
@@ -74,7 +78,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ExpandCollapse.displayName = 'ExpandCollapse';
-ExpandCollapse.propTypes = {
+ExpandCollapse.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
 

package/lib/ExpandCollapse/Panel.js

@@ -31,7 +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; }
 
-// just void functions for now, since there are no style tokens for a panel or control at this point
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
+
 const selectGroupStyles = () => {};
 
 const selectContainerStyles = ({
@@ -71,10 +72,8 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
-
-  const a11y = _utils.a11yProps.select(rest);
-
-  a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
+  const selectedProps = selectProps(rest);
+  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
     expanded: isExpanded
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
@@ -112,7 +111,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: selectGroupStyles(themeTokens),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...a11y,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...selectedProps,
       isExpanded: isExpanded,
       tokens: controlTokens,
       onPress: handleControlPress,
@@ -132,7 +131,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
-ExpandCollapsePanel.propTypes = {
+ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapsePanel'),
 

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

@@ -35,9 +35,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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * A mobile-first flexbox grid.
  */
+
 const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)(({
   limitWidth = true,
   gutter = true,
@@ -86,8 +88,7 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)(({
   }
 
   const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils.a11yProps.select(rest),
-    ..._utils.viewProps.select(rest)
+    ...selectProps(rest)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
     value: gutter,
@@ -113,8 +114,7 @@ const styles = _StyleSheet.default.create({
   }
 });
 
-FlexGrid.propTypes = { ..._utils.a11yProps.propTypes,
-  ..._utils.viewProps.types,
+FlexGrid.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.

package/lib/FlexGrid/helpers/index.js

@@ -8,11 +8,8 @@ exports.default = void 0;
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
-    if (size) {
-      prevSize = size;
-    }
-
     if (size !== undefined) {
+      prevSize = size;
       return size;
     }
 

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.
 
 
@@ -159,7 +158,7 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
         borderBottomWidth,
         borderBottomColor
       }],
-      ...a11y,
+      ...selectProps(rest),
       children: children
     }), showPreviousButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
       icon: previousIcon,
@@ -188,7 +187,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/IconButton/IconButton.js

@@ -21,8 +21,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 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 = _propTypes2.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 = { ..._propTypes2.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

@@ -15,7 +15,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _propTypes2 = require("../utils/propTypes");
+var _props = require("../utils/props");
 
 var _pressability = require("../utils/pressability");
 
@@ -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,23 +131,22 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens = {},
   children,
   accessibilityRole = 'link',
-  dataSet,
   ...rawRest
 }, ref) => {
   const {
     onPress,
     ...props
-  } = _propTypes2.clickProps.toPressProps(rawRest);
+  } = _props.clickProps.toPressProps(rawRest);
 
   const {
     hrefAttrs,
     rest
-  } = _propTypes2.hrefAttrsProp.bundle(props);
+  } = _props.hrefAttrsProp.bundle(props);
 
-  const linkPropSet = _propTypes2.linkProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _propTypes2.linkProps.handleHref({
+    onPress: _props.linkProps.handleHref({
       href,
       onPress
     }),
@@ -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,10 +195,9 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
-  ..._propTypes2.linkProps.types,
-  tokens: (0, _propTypes2.getTokensPropType)('Link'),
-  variant: _propTypes2.variantProp.propType,
+LinkBase.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('Link'),
+  variant: _props.variantProp.propType,
 
   /**
    * Optional variant that may be passed down to the link's icon if there is one
@@ -220,7 +219,7 @@ LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: _propTypes.default.shape(_propTypes2.hrefAttrsProp.types)
+  hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
 };
 
 const staticStyles = _StyleSheet.default.create({

package/lib/List/List.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 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 = _propTypes2.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 = { ..._propTypes2.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,