@telus-uds/components-base 1.3.0 → 1.5.0

package/lib/A11yText/index.js

@@ -25,18 +25,20 @@ 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.viewProps]);
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
  *
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
+
 const A11yText = /*#__PURE__*/(0, _react.forwardRef)(({
   text,
   heading,
   ...rest
 }, ref) => {
-  const a11y = _props.a11yProps.select({
+  const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
     // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
@@ -46,15 +48,14 @@ const A11yText = /*#__PURE__*/(0, _react.forwardRef)(({
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: styles.invisible,
     ref: ref,
-    ...a11y
+    ...selectedProps
   });
 });
 A11yText.displayName = 'A11yText';
-A11yText.propTypes = {
+A11yText.propTypes = { ...selectedSystemPropTypes,
   text: _propTypes.default.string.isRequired,
   heading: _propTypes.default.bool
 };

package/lib/ActivityIndicator/Spinner.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _shared = require("./shared");
 
+var _A11yInfoProvider = require("../A11yInfoProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 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); }
@@ -37,44 +39,51 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
   color,
   thickness,
   label
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-  ref: ref,
-  width: `${size}px`,
-  height: `${size}px`,
-  viewBox: "0 0 48 48",
-  "aria-valuetext": label,
-  role: "progressbar",
-  "aria-busy": true,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
-      ...animationProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("circle", {
-      fill: "none",
-      stroke: color,
-      strokeWidth: thickness * 48 / size,
-      strokeLinecap: "round",
-      cx: "24",
-      cy: "24",
-      r: "20",
-      strokeDasharray: [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-      strokeDashoffset: 0,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
-        attributeName: "stroke-dashoffset",
-        values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
-        ...animationProps,
-        ...bezierProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
-        attributeName: "stroke-dasharray",
-        values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
-        ...animationProps,
-        ...bezierProps
+}, ref) => {
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    ref: ref,
+    width: `${size}px`,
+    height: `${size}px`,
+    viewBox: "0 0 48 48",
+    "aria-valuetext": label,
+    role: "progressbar",
+    "aria-busy": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+        attributeName: "transform",
+        type: "rotate",
+        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
+        ...animationProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        fill: "none",
+        stroke: color,
+        strokeWidth: thickness * 48 / size,
+        strokeLinecap: "round",
+        cx: "24",
+        cy: "24",
+        r: "20",
+        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDashoffset: 0,
+        children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            attributeName: "stroke-dashoffset",
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+            ...animationProps,
+            ...bezierProps
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            attributeName: "stroke-dasharray",
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
+            ...animationProps,
+            ...bezierProps
+          })]
+        })
       })]
-    })]
-  })
-}));
+    })
+  });
+});
 Spinner.displayName = 'Spinner';
 Spinner.propTypes = _shared.propTypes;
 var _default = Spinner;

package/lib/ActivityIndicator/Spinner.native.js

@@ -17,6 +17,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _shared = require("./shared");
 
+var _A11yInfoProvider = require("../A11yInfoProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,6 +39,10 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
     current: timer
   } = _react.default.useRef(new _Animated.default.Value(0));
 
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+
   _react.default.useLayoutEffect(() => {
     const loop = _Animated.default.timing(timer, {
       duration: _shared.DURATION,
@@ -47,8 +53,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
       isInteraction: false
     });
 
-    _Animated.default.loop(loop).start();
-  }, [timer]);
+    if (!reduceMotionEnabled) _Animated.default.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotionEnabled]);
 
   const frames = 60 * _shared.DURATION / 1000;
 
@@ -56,9 +62,10 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const containerStyle = {
     width: size,
-    height: size / 2,
+    height: size / (reduceMotionEnabled ? 1.5 : 2),
     overflow: 'hidden'
-  }; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  };
+  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -75,7 +82,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
         height: size
       }],
       collapsable: false,
-      children: [0, 1].map(index => {
+      children: animationFrequency.map(index => {
         const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
         const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
           let progress = 2 * frameIndex / (frames - 1);
@@ -90,26 +97,30 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
         });
         const layerStyle = {
           width: size,
-          height: size,
-          transform: [{
+          height: size
+        };
+        const viewportStyle = {
+          width: size,
+          height: size
+        };
+
+        if (!reduceMotionEnabled) {
+          layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
               outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
-          }]
-        };
-        const viewportStyle = {
-          width: size,
-          height: size,
-          transform: [{
+          }];
+          viewportStyle.transform = [{
             translateY: index ? -size / 2 : 0
           }, {
             rotate: timer.interpolate({
               inputRange,
               outputRange
             })
-          }]
-        };
+          }];
+        }
+
         const offsetStyle = index ? {
           top: size / 2
         } : null;

package/lib/Box/Box.js

@@ -25,12 +25,14 @@ 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/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
+
 const selectBoxStyles = tokens => {
   const styles = {
     backgroundColor: tokens.backgroundColor
@@ -131,8 +133,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)(({
   ...rest
 }, ref) => {
   const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils.a11yProps.select(rest),
-    ..._utils.viewProps.select(rest)
+    ...selectProps(rest)
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
   const styles = {
@@ -165,8 +166,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Box.displayName = 'Box';
-Box.propTypes = { ..._utils.a11yProps.propTypes,
-  ..._utils.viewProps.types,
+Box.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Box'),
 

package/lib/Button/ButtonBase.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, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.linkProps, _utils2.viewProps]);
+
 const getOuterBorderOffset = ({
   outerBorderGap = 0,
   outerBorderWidth = 0
@@ -181,7 +183,6 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
   // alias for inactive
   inactive = disabled,
   selected = false,
-  dataSet,
   ...rawRest
 }, ref) => {
   const {
@@ -196,11 +197,11 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const resolveButtonTokens = pressableState => (0, _utils2.resolvePressableTokens)(tokens, pressableState, extraButtonState);
 
-  const a11y = _utils2.a11yProps.select(rest);
+  const systemProps = selectProps(rest);
 
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, a11y), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -212,9 +213,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
     }),
     style: getPressableStyle,
     disabled: inactive,
-    dataSet: dataSet,
     hrefAttrs: hrefAttrs,
-    ...a11y,
+    ...systemProps,
     children: pressableState => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
@@ -245,9 +245,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
 ButtonBase.displayName = 'ButtonBase';
 ButtonBase.propTypes = {
   id: _propTypes.default.string,
-  ..._utils2.a11yProps.types,
-  ..._propTypes2.default,
-  ..._utils2.linkProps.types
+  ...selectedSystemPropTypes,
+  ..._propTypes2.default
 };
 ButtonBase.defaultProps = {
   id: undefined

package/lib/Card/Card.js

@@ -23,6 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
 /**
  * A basic card component, unstyled by default.
  *
@@ -71,6 +72,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
+
 const Card = ({
   children,
   tokens,
@@ -85,16 +87,15 @@ const Card = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
     tokens: themeTokens,
     dataSet: dataSet,
-    ...rest,
+    ...selectProps(rest),
     children: children
   });
 };
 
-Card.propTypes = {
+Card.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node,
   tokens: (0, _utils.getTokensPropType)('Card'),
-  variant: _utils.variantProp.propType,
-  ..._props.a11yProps.types
+  variant: _utils.variantProp.propType
 };
 var _default = Card;
 exports.default = _default;

package/lib/Card/PressableCardBase.js

@@ -19,8 +19,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 var _CardBase = _interopRequireDefault(require("./CardBase"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,6 +29,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 = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
@@ -61,11 +60,6 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   } = _utils.clickProps.toPressProps(rawRest);
 
   const viewport = (0, _ViewportProvider.useViewport)();
-
-  const a11y = _props.a11yProps.select({ ...rest,
-    accessibilityRole
-  });
-
   const additionalState = {
     checked,
     validation,
@@ -124,7 +118,9 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
     onKeyDown: handleKeyDown,
     hrefAttrs: hrefAttrs,
     style: getOuterBorderStyle,
-    ...a11y,
+    ...selectProps({ ...rest,
+      accessibilityRole
+    }),
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
@@ -132,14 +128,13 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = {
+PressableCardBase.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     requireAll: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType,
-  ..._props.a11yProps.types
+  variant: _utils.variantProp.propType
 };
 
 var _default = (0, _utils.withLinkRouter)(PressableCardBase);

package/lib/Checkbox/Checkbox.js

@@ -31,8 +31,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 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 = _props.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 = { ..._props.a11yProps.propTypes,
+Checkbox.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.

package/lib/Divider/Divider.js

@@ -29,6 +29,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]);
 /**
  * @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'),