@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/ExpandCollapse/Panel.js

@@ -35,17 +35,20 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectGroupStyles = () => {};
 
-const selectContainerStyles = ({
-  contentPaddingLeft,
-  contentPaddingRight,
-  contentPaddingTop,
-  contentPaddingBottom
-}) => ({
-  paddingLeft: contentPaddingLeft,
-  paddingRight: contentPaddingRight,
-  paddingTop: contentPaddingTop,
-  paddingBottom: contentPaddingBottom
-});
+const selectContainerStyles = _ref => {
+  let {
+    contentPaddingLeft,
+    contentPaddingRight,
+    contentPaddingTop,
+    contentPaddingBottom
+  } = _ref;
+  return {
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom
+  };
+};
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -58,18 +61,19 @@ const selectContainerStyles = ({
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
-  openIds = [],
-  panelId,
-  onToggle,
-  onPress,
-  control,
-  controlTokens,
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    openIds = [],
+    panelId,
+    onToggle,
+    onPress,
+    control,
+    controlTokens,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps(rest);
@@ -97,7 +101,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   };
 
-  const animatedStyles = (0, _utils.useVerticalExpandAnimation)({
+  const [animatedStyles, animatedRef] = (0, _utils.useVerticalExpandAnimation)({
     containerHeight,
     isExpanded,
     tokens: themeTokens
@@ -118,6 +122,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
       onPress: handleControlPress,
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      ref: animatedRef,
       style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
       ...focusabilityProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Feedback/Feedback.js

@@ -33,33 +33,45 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
-const selectTitleTextStyles = ({
-  titleFontSize,
-  ...tokens
-}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-  fontSize: titleFontSize
-}));
-
-const selectContentTextStyles = ({
-  contentFontSize,
-  ...tokens
-}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-  fontSize: contentFontSize
-}));
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectTitleTextStyles = _ref => {
+  let {
+    titleFontSize,
+    ...tokens
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
+    fontSize: titleFontSize
+  }));
+};
 
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  paddingRight: iconGap
-});
+const selectContentTextStyles = _ref2 => {
+  let {
+    contentFontSize,
+    ...tokens
+  } = _ref2;
+  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
+    fontSize: contentFontSize
+  }));
+};
+
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+
+const selectIconContainerStyles = _ref4 => {
+  let {
+    iconGap
+  } = _ref4;
+  return {
+    paddingRight: iconGap
+  };
+};
 /**
  * A feedback box commonly used with form fields.
  *
@@ -80,15 +92,16 @@ const selectIconContainerStyles = ({
  */
 
 
-const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
-  title,
-  children,
-  id,
-  validation,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    title,
+    children,
+    id,
+    validation,
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
     validation
   });

package/lib/Fieldset/Fieldset.js

@@ -37,20 +37,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
-  space,
-  feedback,
-  feedbackPosition = 'top',
-  validation,
-  legend,
-  hint,
-  hintPosition,
-  tooltip,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName,
-  children
-}, ref) => {
+const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    copy = 'en',
+    space,
+    feedback,
+    feedbackPosition = 'top',
+    validation,
+    legend,
+    hint,
+    hintPosition,
+    tooltip,
+    inactive,
+    accessibilityRole,
+    name: fieldsetName,
+    children
+  } = _ref;
   // Skips `inputId` because a fieldset' legend describes multiple inputs
   const {
     hintId,
@@ -64,6 +66,7 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      copy: copy,
       label: legend,
       hint: hint,
       hintPosition: hintPosition,
@@ -100,6 +103,11 @@ Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
    * props are not supported because there is not an appropriate counterpart for Fieldsets.

package/lib/Fieldset/FieldsetContainer.js

@@ -22,19 +22,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-  ref: ref,
-  disabled: inactive,
-  style: _cssReset.default,
-  role: accessibilityRole,
-  name: fieldsetName,
-  children: children
-}));
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    inactive,
+    accessibilityRole,
+    name: fieldsetName
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+    ref: ref,
+    disabled: inactive,
+    style: _cssReset.default,
+    role: accessibilityRole,
+    name: fieldsetName,
+    children: children
+  });
+});
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   accessibilityRole: _propTypes.default.string,

package/lib/Fieldset/FieldsetContainer.native.js

@@ -21,14 +21,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  accessibilityRole
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-  ref: ref,
-  accessibilityRole: accessibilityRole,
-  children: children
-}));
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    accessibilityRole
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    children: children
+  });
+});
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   children: _propTypes.default.node,

package/lib/Fieldset/Legend.js

@@ -23,13 +23,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
-  children
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
-  ref: ref,
-  style: _cssReset.default,
-  children: children
-}));
+const Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+    ref: ref,
+    style: _cssReset.default,
+    children: children
+  });
+});
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: _propTypes.default.node

package/lib/Fieldset/Legend.native.js

@@ -25,13 +25,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
-  children
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-  ref: ref,
-  style: staticStyles.stretch,
-  children: children
-}));
+const Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: staticStyles.stretch,
+    children: children
+  });
+});
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: _propTypes.default.node

package/lib/FlexGrid/Col/Col.js

@@ -33,22 +33,23 @@ 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 Col = /*#__PURE__*/(0, _react.forwardRef)(({
-  horizontalAlign,
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xsOffset,
-  smOffset,
-  mdOffset,
-  lgOffset,
-  xlOffset,
-  flex,
-  ...viewProps
-}, ref) => {
+const Col = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    horizontalAlign,
+    children,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xsOffset,
+    smOffset,
+    mdOffset,
+    lgOffset,
+    xlOffset,
+    flex,
+    ...viewProps
+  } = _ref;
   const gutter = (0, _react.useContext)(_GutterContext.default);
   const viewPort = (0, _ViewportProvider.useViewport)();
   const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);

package/lib/FlexGrid/FlexGrid.js

@@ -40,20 +40,21 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)(({
-  limitWidth = true,
-  gutter = true,
-  outsideGutter = true,
-  xsReverse,
-  smReverse,
-  mdReverse,
-  lgReverse,
-  xlReverse,
-  tag,
-  accessibilityRole,
-  children,
-  ...rest
-}, ref) => {
+const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    limitWidth = true,
+    gutter = true,
+    outsideGutter = true,
+    xsReverse,
+    smReverse,
+    mdReverse,
+    lgReverse,
+    xlReverse,
+    tag,
+    accessibilityRole,
+    children,
+    ...rest
+  } = _ref;
   const viewPort = (0, _ViewportProvider.useViewport)();
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const marginVertical = 0;

package/lib/FlexGrid/Row/Row.js

@@ -91,18 +91,19 @@ const distributeStyles = distribute => {
   }
 };
 
-const Row = /*#__PURE__*/(0, _react.forwardRef)(({
-  horizontalAlign,
-  verticalAlign,
-  distribute,
-  xsReverse,
-  smReverse,
-  mdReverse,
-  lgReverse,
-  xlReverse,
-  children,
-  ...rest
-}, ref) => {
+const Row = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    horizontalAlign,
+    verticalAlign,
+    distribute,
+    xsReverse,
+    smReverse,
+    mdReverse,
+    lgReverse,
+    xlReverse,
+    children,
+    ...rest
+  } = _ref;
   const viewPort = (0, _ViewportProvider.useViewport)();
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.selectHorizontalScrollTokens = void 0;
+exports.selectHorizontalScrollTokens = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -44,13 +44,14 @@ const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectT
 
 
 exports.selectHorizontalScrollTokens = selectHorizontalScrollTokens;
-const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
-  ScrollButton,
-  tokens,
-  itemPositions,
-  children,
-  ...rest
-}, ref) => {
+const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    ScrollButton,
+    tokens,
+    itemPositions,
+    children,
+    ...rest
+  } = _ref;
   const {
     nextIcon,
     previousIcon,
@@ -67,25 +68,29 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const handleContentWidth = width => setContentWidth(width);
 
-  const handleContainerLayout = ({
-    nativeEvent: {
-      layout: {
-        width
+  const handleContainerLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
       }
-    }
-  }) => setContainerWidth(width); // Update the scroll position only when scrolling actions ends to minimally rerender
+    } = _ref2;
+    return setContainerWidth(width);
+  }; // Update the scroll position only when scrolling actions ends to minimally rerender
   // and update which buttons are conditionally rendered.
 
 
   const [scrollOffset, setScrollOffset] = (0, _react.useState)(0);
 
-  const handleScrollEnd = ({
-    nativeEvent: {
-      contentOffset: {
-        x
+  const handleScrollEnd = _ref3 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
       }
-    }
-  }) => {
+    } = _ref3;
     setScrollOffset(x);
   };
 

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -29,11 +29,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 selectContainerStyles = ({
-  offset
-}) => ({
-  marginTop: offset ? -offset : 0
-});
+const selectContainerStyles = _ref => {
+  let {
+    offset
+  } = _ref;
+  return {
+    marginTop: offset ? -offset : 0
+  };
+};
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -44,15 +47,16 @@ const selectContainerStyles = ({
  */
 
 
-const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  direction = 'next',
-  icon,
-  offset,
-  onPress,
-  variant,
-  tokens,
-  copy
-}, ref) => {
+const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    direction = 'next',
+    icon,
+    offset,
+    onPress,
+    variant,
+    tokens,
+    copy
+  } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,

package/lib/HorizontalScroll/ScrollViewEnd.js

@@ -30,11 +30,12 @@ const DEBOUNCE_MS = 100;
  * https://github.com/necolas/react-native-web/issues/1021
  */
 
-const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)(({
-  onScrollEnd,
-  onScroll,
-  ...props
-}, ref) => {
+const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onScrollEnd,
+    onScroll,
+    ...props
+  } = _ref;
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/HorizontalScroll/ScrollViewEnd.native.js

@@ -24,15 +24,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
-const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)(({
-  onScrollEnd,
-  ...props
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
-  ref: ref,
-  ...props,
-  onScrollEndDrag: onScrollEnd,
-  onMomentumScrollEnd: onScrollEnd
-}));
+const ScrollViewEnd = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onScrollEnd,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+    ref: ref,
+    ...props,
+    onScrollEndDrag: onScrollEnd,
+    onMomentumScrollEnd: onScrollEnd
+  });
+});
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: _propTypes.default.func.isRequired