@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/A11yInfoProvider/index.js

@@ -24,9 +24,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const ScreenReaderContext = /*#__PURE__*/(0, _react.createContext)(false);
 const ReducedMotionContext = /*#__PURE__*/(0, _react.createContext)(false);
 
-const A11yInfoProvider = ({
-  children
-}) => {
+const A11yInfoProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [reduceMotionEnabled, setReduceMotionEnabled] = (0, _react.useState)(false);
   const [screenReaderEnabled, setScreenReaderEnabled] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {

package/lib/A11yText/index.js

@@ -33,11 +33,12 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * 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 A11yText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    text,
+    heading,
+    ...rest
+  } = _ref;
   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.

package/lib/ActivityIndicator/Spinner.js

@@ -34,12 +34,13 @@ const bezierProps = {
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
+const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label
+  } = _ref;
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();

package/lib/ActivityIndicator/Spinner.native.js

@@ -29,12 +29,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const ea = _shared.MIN_EMPTY_ANGLE / 2;
 const sa = _shared.MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
+const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label
+  } = _ref;
+
   const {
     current: timer
   } = _react.default.useRef(new _Animated.default.Value(0));

package/lib/ActivityIndicator/index.js

@@ -23,11 +23,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = ({
-  variant,
-  tokens,
-  label
-}) => {
+const ActivityIndicator = _ref => {
+  let {
+    variant,
+    tokens,
+    label
+  } = _ref;
   const {
     size,
     color,

package/lib/ActivityIndicator/shared.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.BEZIER = exports.MIN_STROKE_ANGLE = exports.MIN_EMPTY_ANGLE = exports.DURATION = void 0;
+exports.propTypes = exports.MIN_STROKE_ANGLE = exports.MIN_EMPTY_ANGLE = exports.DURATION = exports.BEZIER = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/BaseProvider/index.js

@@ -21,17 +21,20 @@ var _ThemeProvider$propTy;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const BaseProvider = ({
-  defaultTheme,
-  children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
-      defaultTheme: defaultTheme,
-      children: children
+const BaseProvider = _ref => {
+  let {
+    defaultTheme,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+        defaultTheme: defaultTheme,
+        children: children
+      })
     })
-  })
-});
+  });
+};
 
 BaseProvider.propTypes = {
   defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,

package/lib/Box/Box.js

@@ -113,25 +113,26 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/(0, _react.forwardRef)(({
-  space,
-  horizontal = space,
-  vertical = space,
-  top = vertical,
-  bottom = vertical,
-  left = horizontal,
-  right = horizontal,
-  flex,
-  children,
-  variant,
-  tokens,
-  scroll,
-  tag,
-  accessibilityRole,
-  testID,
-  dataSet,
-  ...rest
-}, ref) => {
+const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    space,
+    horizontal = space,
+    vertical = space,
+    top = vertical,
+    bottom = vertical,
+    left = horizontal,
+    right = horizontal,
+    flex,
+    children,
+    variant,
+    tokens,
+    scroll,
+    tag,
+    accessibilityRole,
+    testID,
+    dataSet,
+    ...rest
+  } = _ref;
   const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };

package/lib/Button/Button.js

@@ -23,12 +23,13 @@ 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 Button = /*#__PURE__*/(0, _react.forwardRef)(({
-  accessibilityRole = 'button',
-  tokens,
-  variant,
-  ...props
-}, ref) => {
+const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    accessibilityRole = 'button',
+    tokens,
+    variant,
+    ...props
+  } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
     tokens: getTokens,

package/lib/Button/ButtonBase.js

@@ -33,36 +33,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
 
-const getOuterBorderOffset = ({
-  outerBorderGap = 0,
-  outerBorderWidth = 0
-}) => outerBorderGap + outerBorderWidth;
-
-const selectOuterContainerStyles = ({
-  alignSelf,
-  opacity,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBackgroundColor
-}) => ({
-  alignSelf,
-  backgroundColor: outerBackgroundColor,
-  opacity,
-  ...(0, _utils.applyOuterBorder)({
-    outerBorderGap,
-    outerBorderWidth,
+const getOuterBorderOffset = _ref => {
+  let {
+    outerBorderGap = 0,
+    outerBorderWidth = 0
+  } = _ref;
+  return outerBorderGap + outerBorderWidth;
+};
+
+const selectOuterContainerStyles = _ref2 => {
+  let {
+    alignSelf,
+    opacity,
     outerBorderColor,
-    borderRadius
-  })
-});
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBackgroundColor
+  } = _ref2;
+  return {
+    alignSelf,
+    backgroundColor: outerBackgroundColor,
+    opacity,
+    ...(0, _utils.applyOuterBorder)({
+      outerBorderGap,
+      outerBorderWidth,
+      outerBorderColor,
+      borderRadius
+    })
+  };
+};
 
-const selectOuterWidthStyles = ({
-  outerBorderGap,
-  outerBorderWidth,
-  width
-}) => {
+const selectOuterWidthStyles = _ref3 => {
+  let {
+    outerBorderGap,
+    outerBorderWidth,
+    width
+  } = _ref3;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({
@@ -107,16 +114,18 @@ const selectOuterWidthStyles = ({
   return widthStyles;
 };
 
-const selectInnerContainerStyles = ({
-  backgroundColor,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow,
-  borderWidth,
-  minWidth
-}) => {
+const selectInnerContainerStyles = _ref4 => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow,
+    borderWidth,
+    minWidth
+  } = _ref4;
+
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -132,35 +141,42 @@ const selectInnerContainerStyles = ({
   };
 };
 
-const selectBorderStyles = ({
-  borderColor,
-  borderWidth,
-  borderRadius
-}) => ({
-  borderColor,
-  borderWidth,
-  borderRadius
-});
+const selectBorderStyles = _ref5 => {
+  let {
+    borderColor,
+    borderWidth,
+    borderRadius
+  } = _ref5;
+  return {
+    borderColor,
+    borderWidth,
+    borderRadius
+  };
+};
 
-const selectTextStyles = ({
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  fontWeight,
-  textAlign
-}) => (0, _utils.applyTextStyles)({
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  fontWeight,
-  textAlign
-});
+const selectTextStyles = _ref6 => {
+  let {
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    textAlign
+  } = _ref6;
+  return (0, _utils.applyTextStyles)({
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    textAlign
+  });
+};
 
-const selectWebOnlyStyles = (inactive, themeTokens, {
-  accessibilityRole
-}) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
+  let {
+    accessibilityRole
+  } = _ref7;
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -173,18 +189,20 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
   });
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
-  id,
-  href,
-  hrefAttrs,
-  children,
-  tokens = {},
-  disabled = false,
-  // alias for inactive
-  inactive = disabled,
-  selected = false,
-  ...rawRest
-}, ref) => {
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
+  let {
+    id,
+    href,
+    hrefAttrs,
+    children,
+    tokens = {},
+    disabled = false,
+    // alias for inactive
+    inactive = disabled,
+    selected = false,
+    ...rawRest
+  } = _ref8;
+
   const {
     onPress,
     ...rest

package/lib/Button/ButtonGroup.js

@@ -17,6 +17,8 @@ var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 var _StackView = require("../StackView");
 
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
 var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -35,23 +37,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-  : _Platform.default.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
+const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues = 1,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    name: inputGroupName,
+    copy,
+    accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+    : _Platform.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
@@ -59,7 +69,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
   const {
     direction,
-    space
+    space,
+    fieldSpace
   } = themeTokens;
   const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
   const {
@@ -81,54 +92,72 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
-  }
+  } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...systemProps,
-    space: space,
-    direction: direction,
-    tokens: stackTokens,
+
+  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, { ...systemProps,
     ref: ref,
-    children: items.map(({
-      label,
-      id = label,
-      accessibilityLabel,
-      ref: itemRef,
-      ...itemRest
-    }, index) => {
-      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-      const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
-        id,
-        label,
-        currentValues
-      }]);
-
-      const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress(event);
-        toggleOneValue(id, event);
-      };
-
-      const itemA11y = {
-        accessibilityState: {
-          checked: isSelected
-        },
-        accessibilityRole: itemA11yRole,
-        accessibilityLabel,
-        ..._utils.a11yProps.getPositionInSet(items.length, index)
-      }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-      // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-        ref: itemRef,
-        ...pressHandlers,
-        onPress: handlePress,
-        tokens: getButtonTokens,
-        selected: isSelected,
-        inactive: inactive,
-        ...itemA11y,
-        ...selectItemProps(itemRest),
-        children: label
-      }, id);
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    readOnly: readOnly,
+    inactive: inactive,
+    validation: validation,
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      accessibilityRole: innerRole,
+      space: space,
+      direction: direction,
+      tokens: stackTokens,
+      ref: ref,
+      children: items.map((_ref2, index) => {
+        let {
+          label,
+          id = label,
+          accessibilityLabel,
+          ref: itemRef,
+          ...itemRest
+        } = _ref2;
+        const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+        const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+          id,
+          label,
+          currentValues
+        }]);
+
+        const handlePress = event => {
+          if (pressHandlers.onPress) pressHandlers.onPress(event);
+          toggleOneValue(id, event);
+        };
+
+        const itemA11y = {
+          accessibilityState: {
+            checked: isSelected
+          },
+          accessibilityRole: itemA11yRole,
+          accessibilityLabel,
+          ..._utils.a11yProps.getPositionInSet(items.length, index)
+        }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          ref: itemRef,
+          ...pressHandlers,
+          onPress: handlePress,
+          tokens: getButtonTokens,
+          selected: isSelected,
+          inactive: inactive,
+          ...itemA11y,
+          ...selectItemProps(itemRest),
+          children: label
+        }, id);
+      })
     })
   });
 });
@@ -192,7 +221,53 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * If true, the buttons cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr'])
 };
 var _default = ButtonGroup;
 exports.default = _default;