@telus-uds/components-base 1.14.2 → 1.16.0

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -35,32 +35,39 @@ 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.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
 
-const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
-  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-  width: null
-}); // Map and rename icon-specific tokens to name used within Icon
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...tokens
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', { ...tokens,
+    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    width: null
+  });
+}; // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = _ref => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref;
+  } = _ref2;
   return {
     size: iconSize,
     color: iconColor
   };
 };
 
-const selectTrackStyles = _ref2 => {
+const selectTrackStyles = _ref3 => {
   let {
     trackBorderWidth,
     trackBorderColor,
     trackBorderRadius,
     width
-  } = _ref2;
+  } = _ref3;
   return {
     borderWidth: trackBorderWidth,
     borderColor: trackBorderColor,
@@ -69,7 +76,7 @@ const selectTrackStyles = _ref2 => {
   };
 };
 
-const selectSwitchStyles = _ref3 => {
+const selectSwitchStyles = _ref4 => {
   let {
     switchSize,
     switchColor,
@@ -77,7 +84,7 @@ const selectSwitchStyles = _ref3 => {
     switchBorderColor,
     switchBorderRadius,
     switchShadow
-  } = _ref3;
+  } = _ref4;
   return {
     width: switchSize,
     height: switchSize,
@@ -95,23 +102,23 @@ const selectSwitchStyles = _ref3 => {
   };
 };
 
-const selectLabelStyles = _ref4 => {
+const selectLabelStyles = _ref5 => {
   let {
     labelMarginLeft
-  } = _ref4;
+  } = _ref5;
   return {
     marginLeft: labelMarginLeft
   };
 };
 
-const selectLabelTokens = _ref5 => {
+const selectLabelTokens = _ref6 => {
   let {
     labelColor,
     labelFontName,
     labelFontSize,
     labelFontWeight,
     labelLineHeight
-  } = _ref5;
+  } = _ref6;
   return {
     color: labelColor,
     fontName: labelFontName,
@@ -121,7 +128,7 @@ const selectLabelTokens = _ref5 => {
   };
 };
 
-const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   let {
     copy = 'en',
     value,
@@ -136,7 +143,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     accessibilityRole = 'switch',
     accessibilityLabel = label,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -260,8 +267,6 @@ ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
 
 const staticStyles = _StyleSheet.default.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

package/lib/ViewportProvider/useViewportListener.js

@@ -45,11 +45,17 @@ const useViewportListenerCSR = setViewport => {
       return setViewport(_systemConstants.viewports.select(window.width));
     };
 
-    const listener = _Dimensions.default.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
-    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
-
-
-    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => _Dimensions.default.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    const listener = _Dimensions.default.addEventListener('change', onChange);
+
+    return () => {
+      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove(); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+        _Dimensions.default.removeEventListener('change', onChange);
+      }
+    };
   }, [setViewport]);
 }; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
 

package/lib/utils/hasOwnProperty.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hasOwnProperty;
+
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}

package/lib/utils/props/a11yProps.js

@@ -95,6 +95,169 @@ const a11yPropTypes = { ...nativeA11yPropTypes,
   accessibilityValueNow: _propTypes.default.number,
   accessibilityValueText: _propTypes.default.string
 };
+
+const a11yPropTypesByPlatform = _Platform.default.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
+  // Ignore web-only props in native builds
+  default: nativeA11yPropTypes
+}); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
+// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
+// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
+// - On web, split them into both of:
+//   - The appropriate aria-* attr, like `aria-valuenow`, which will work regardless of RNW version
+//   - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
+//     than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
+//     and future releases might add more features here).
+
+
+const rwnPropMappings = {
+  // Former accessibilityValue props.
+  accessibilityValueMax: value => _Platform.default.select({
+    web: {
+      'aria-valuemax': value,
+      accessibilityValueMax: value
+    },
+    default: {
+      accessibilityValue: {
+        max: value
+      }
+    }
+  }),
+  accessibilityValueMin: value => _Platform.default.select({
+    web: {
+      'aria-valuemin': value,
+      accessibilityValueMin: value
+    },
+    default: {
+      accessibilityValue: {
+        min: value
+      }
+    }
+  }),
+  accessibilityValueNow: value => _Platform.default.select({
+    web: {
+      'aria-valuenow': value,
+      accessibilityValueNow: value
+    },
+    default: {
+      accessibilityValue: {
+        now: value
+      }
+    }
+  }),
+  accessibilityValueText: value => _Platform.default.select({
+    web: {
+      'aria-valuetext': value,
+      accessibilityValueText: value
+    },
+    default: {
+      accessibilityValue: {
+        text: value
+      }
+    }
+  }),
+  // Former accessibilityState props
+  accessibilityBusy: value => _Platform.default.select({
+    web: {
+      'aria-busy': value,
+      accessibilityBusy: value
+    },
+    default: {
+      accessibilityState: {
+        busy: value
+      }
+    }
+  }),
+  accessibilityChecked: value => _Platform.default.select({
+    web: {
+      'aria-checked': value,
+      accessibilityChecked: value
+    },
+    default: {
+      accessibilityState: {
+        checked: value
+      }
+    }
+  }),
+  accessibilityDisabled: value => _Platform.default.select({
+    web: {
+      'aria-disabled': value,
+      // RNW >= 0.18 maps `accessibilityDisabled` to `disabled` attr if element supports it
+      accessibilityDisabled: value,
+      // As of RNW 0.18.9, Pressable doesn't support `accessibilityDisabled`, only `disabled`,
+      // but everything else supports `accessibilityDisabled` but not `disabled`.
+      disabled: value
+    },
+    default: {
+      accessibilityState: {
+        disabled: value
+      }
+    }
+  }),
+  accessibilityExpanded: value => _Platform.default.select({
+    web: {
+      'aria-expanded': value,
+      accessibilityExpanded: value
+    },
+    default: {
+      accessibilityState: {
+        expanded: value
+      }
+    }
+  }),
+  accessibilitySelected: value => _Platform.default.select({
+    web: {
+      'aria-selected': value,
+      accessibilitySelected: value
+    },
+    default: {
+      accessibilityState: {
+        selected: value
+      }
+    }
+  })
+};
+
+if (_Platform.default.OS === 'web') {
+  const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value); // On Web only, these React Native object props need manual mapping in RNW >=0.18
+  // which dropped support for the React Native shape of these props.
+  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
+  // new features added in >=0.18 (e.g. for accessibilityDisabled).
+
+
+  rwnPropMappings.accessibilityValue = function () {
+    let {
+      max,
+      min,
+      now,
+      text
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+      ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+      ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+      ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+    };
+  };
+
+  rwnPropMappings.accessibilityState = function () {
+    let {
+      busy,
+      checked,
+      disabled,
+      expanded,
+      selected
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+      ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+      ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+      ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+      ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+    };
+  };
+}
+
 var _default = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -108,7 +271,14 @@ var _default = {
    * Where components accept React Native a11y props, pass { ...rest } from its props to this,
    * then spread the returned object into the component's props (usually its outer container).
    */
-  select: (0, _getPropSelector.default)(a11yPropTypes, /^aria-/),
+  select: (0, _getPropSelector.default)( // Allow all React Native accessibility props
+  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
+  _Platform.default.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
+  // a form that is platform-appropriate and RNW-version safe
+  (key, value) => {
+    const rnwPropMapper = rwnPropMappings[key];
+    return rnwPropMapper ? rnwPropMapper(value) : undefined;
+  }),
 
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.

package/lib/utils/props/getPropSelector.js

@@ -5,12 +5,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = getPropSelector;
 
-function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes);
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+
+var _hasOwnProperty = _interopRequireDefault(require("../hasOwnProperty"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined;
+  const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
+
+  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
+
+  return (0, _lodash.default)({}, items, newItems);
+};
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+
+
+function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
-    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-      [key]: value
-    } : items;
+    return (// If there's a callback and it matches something, applyCallback merges it in; return that
+      applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
+      (0, _hasOwnProperty.default)(propTypes, key) || regexp && regexp.test(key) ? { ...items,
+        [key]: value
+      } : items)
+    );
   }, {});
 }

package/lib/utils/ssr.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSSRStyles = exports.getReactNativeWebSSRStyles = void 0;
+exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /** @typedef {import('react').ComponentType} ReactComponent */
@@ -14,6 +18,112 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      _AppRegistry.default.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
+
+
+      const {
+        element,
+        getStyleElement
+      } = _AppRegistry.default.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+
+      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+      });
+
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+
+      styleGetters.push(getRNWStyle);
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+
+      hasAppRendered = true;
+      return renderedApp;
+    },
+
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+    }
+  };
+};
+
+exports.ssrStyles = ssrStyles;
+var _default = ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
  * Registers the app's root component with React Native Web and generates
  * the main <style> tag containing React Native Web stylesheet styles.
  *
@@ -21,6 +131,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
+
+exports.default = _default;
+
 const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
 
@@ -33,6 +146,8 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
   return [getStyleElement()];
 };
 /**
+ * @deprecated - use ssrStyles instead
+ *
  * Gets style tags for each currently supported CSS-in-JS library and returns
  * them alongside any existing style tags.
  *

package/lib/utils/useResponsiveProp.js

@@ -9,9 +9,11 @@ var _systemConstants = require("@telus-uds/system-constants");
 
 var _ViewportProvider = require("../ViewportProvider");
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
+var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
 
-const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => hasOwn(objectProp, key));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => (0, _hasOwnProperty.default)(objectProp, key));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -29,7 +31,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
   const value = _systemConstants.viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
   _systemConstants.viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[_systemConstants.viewports.keys.find(key => hasOwn(prop, key))];
+  prop[_systemConstants.viewports.keys.find(key => (0, _hasOwnProperty.default)(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 /**

package/lib/utils/withLinkRouter.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,8 +19,6 @@ 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; }
 
-// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
  * This may be used to provide custom wrappers for integrations with third party libraries.
@@ -47,8 +47,6 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
  */
-
-
 const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     let {
@@ -84,7 +82,7 @@ const withLinkRouter = Component => {
 
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
-    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+    if ((0, _hasOwnProperty.default)(Component, key) && !(0, _hasOwnProperty.default)(wrappedComponent, key)) {
       wrappedComponent[key] = Component[key];
     }
   });

package/lib-module/A11yInfoProvider/index.js

@@ -19,8 +19,8 @@ const A11yInfoProvider = _ref => {
       return () => {};
     }
 
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    const screenReaderSubscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -36,8 +36,18 @@ const A11yInfoProvider = _ref => {
     }
 
     return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
+        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      }
+
+      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
+        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      }
     };
   }, []);
   return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {

package/lib-module/Button/ButtonGroup.js

@@ -130,8 +130,9 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           tokens: getButtonTokens,
           selected: isSelected,
           inactive: inactive,
-          ...itemA11y,
-          ...selectItemProps(itemRest),
+          ...selectItemProps({ ...itemRest,
+            ...itemA11y
+          }),
           children: label
         }, id);
       })