@telus-uds/components-base 1.14.3 → 1.15.0

package/lib/utils/props/a11yProps.js

@@ -48,53 +48,213 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: _propTypes.default.func,
   onAccessibilityTap: _propTypes.default.func
 };
-const a11yPropTypes = { ...nativeA11yPropTypes,
+
+const a11yPropTypes = _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/
-  accessibilityActiveDescendant: _propTypes.default.string,
-  accessibilityAtomic: _propTypes.default.bool,
-  accessibilityAutoComplete: _propTypes.default.string,
-  accessibilityBusy: _propTypes.default.bool,
-  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
-  accessibilityColumnCount: _propTypes.default.number,
-  accessibilityColumnIndex: _propTypes.default.number,
-  accessibilityColumnSpan: _propTypes.default.number,
-  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  accessibilityDetails: _propTypes.default.string,
-  accessibilityDisabled: _propTypes.default.bool,
-  accessibilityErrorMessage: _propTypes.default.string,
-  accessibilityExpanded: _propTypes.default.bool,
-  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  accessibilityHasPopup: _propTypes.default.string,
-  accessibilityHidden: _propTypes.default.bool,
-  accessibilityInvalid: _propTypes.default.bool,
-  accessibilityKeyShortcuts: _propTypes.default.string,
-  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  accessibilityLevel: _propTypes.default.number,
-  accessibilityModal: _propTypes.default.bool,
-  accessibilityMultiline: _propTypes.default.bool,
-  accessibilityMultiSelectable: _propTypes.default.bool,
-  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  accessibilityPlaceholder: _propTypes.default.string,
-  accessibilityPosInSet: _propTypes.default.number,
-  accessibilityPressed: _propTypes.default.bool,
-  accessibilityReadOnly: _propTypes.default.bool,
-  accessibilityRequired: _propTypes.default.bool,
-  accessibilityRoleDescription: _propTypes.default.string,
-  accessibilityRowCount: _propTypes.default.number,
-  accessibilityRowIndex: _propTypes.default.number,
-  accessibilityRowSpan: _propTypes.default.number,
-  accessibilitySelected: _propTypes.default.bool,
-  accessibilitySetSize: _propTypes.default.number,
-  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
-  accessibilityValueMax: _propTypes.default.number,
-  accessibilityValueMin: _propTypes.default.number,
-  accessibilityValueNow: _propTypes.default.number,
-  accessibilityValueText: _propTypes.default.string
+  web: { ...nativeA11yPropTypes,
+    accessibilityActiveDescendant: _propTypes.default.string,
+    accessibilityAtomic: _propTypes.default.bool,
+    accessibilityAutoComplete: _propTypes.default.string,
+    accessibilityBusy: _propTypes.default.bool,
+    accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+    accessibilityColumnCount: _propTypes.default.number,
+    accessibilityColumnIndex: _propTypes.default.number,
+    accessibilityColumnSpan: _propTypes.default.number,
+    accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+    accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+    accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+    accessibilityDetails: _propTypes.default.string,
+    accessibilityDisabled: _propTypes.default.bool,
+    accessibilityErrorMessage: _propTypes.default.string,
+    accessibilityExpanded: _propTypes.default.bool,
+    accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+    accessibilityHasPopup: _propTypes.default.string,
+    accessibilityHidden: _propTypes.default.bool,
+    accessibilityInvalid: _propTypes.default.bool,
+    accessibilityKeyShortcuts: _propTypes.default.string,
+    accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+    accessibilityLevel: _propTypes.default.number,
+    accessibilityModal: _propTypes.default.bool,
+    accessibilityMultiline: _propTypes.default.bool,
+    accessibilityMultiSelectable: _propTypes.default.bool,
+    accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+    accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+    accessibilityPlaceholder: _propTypes.default.string,
+    accessibilityPosInSet: _propTypes.default.number,
+    accessibilityPressed: _propTypes.default.bool,
+    accessibilityReadOnly: _propTypes.default.bool,
+    accessibilityRequired: _propTypes.default.bool,
+    accessibilityRoleDescription: _propTypes.default.string,
+    accessibilityRowCount: _propTypes.default.number,
+    accessibilityRowIndex: _propTypes.default.number,
+    accessibilityRowSpan: _propTypes.default.number,
+    accessibilitySelected: _propTypes.default.bool,
+    accessibilitySetSize: _propTypes.default.number,
+    accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+    accessibilityValueMax: _propTypes.default.number,
+    accessibilityValueMin: _propTypes.default.number,
+    accessibilityValueNow: _propTypes.default.number,
+    accessibilityValueText: _propTypes.default.string
+  },
+  // 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 +268,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
+  a11yPropTypes, // 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/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);
       })

package/lib-module/Checkbox/Checkbox.js

@@ -191,6 +191,14 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'checkbox',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -201,12 +209,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
         disabled: inactive,
         onKeyDown: handleKeyDown,
         onPress: handleChange,
-        accessibilityRole: "checkbox",
-        accessibilityState: {
-          checked: isChecked,
-          disabled: inactive
-        },
-        ...selectProps(rest),
+        ...selectedProps,
         children: _ref6 => {
           let {
             focused: focus,

package/lib-module/ExpandCollapse/Control.js

@@ -67,12 +67,13 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
-  const selectedProps = selectProps({ ...rest,
-    accessibilityRole
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
   });
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
 
   const getControlState = _ref4 => {
     let {

package/lib-module/ExpandCollapse/Panel.js

@@ -55,10 +55,11 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = _ref2;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
-  const selectedProps = selectProps(rest);
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
+  const selectedProps = selectProps({ ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
+  });
   const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });