@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/Feedback/Feedback.js

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

package/lib-module/Fieldset/Fieldset.js

@@ -16,21 +16,22 @@ import Legend from './Legend';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const Fieldset = /*#__PURE__*/forwardRef(({
-  copy = 'en',
-  space,
-  feedback,
-  feedbackPosition = 'top',
-  validation,
-  legend,
-  hint,
-  hintPosition,
-  tooltip,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName,
-  children
-}, ref) => {
+const Fieldset = /*#__PURE__*/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,

package/lib-module/Fieldset/FieldsetContainer.js

@@ -6,19 +6,22 @@ import cssReset from './cssReset';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const FieldsetContainer = /*#__PURE__*/forwardRef(({
-  children,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName
-}, ref) => /*#__PURE__*/_jsx("fieldset", {
-  ref: ref,
-  disabled: inactive,
-  style: cssReset,
-  role: accessibilityRole,
-  name: fieldsetName,
-  children: children
-}));
+const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    inactive,
+    accessibilityRole,
+    name: fieldsetName
+  } = _ref;
+  return /*#__PURE__*/_jsx("fieldset", {
+    ref: ref,
+    disabled: inactive,
+    style: cssReset,
+    role: accessibilityRole,
+    name: fieldsetName,
+    children: children
+  });
+});
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   accessibilityRole: PropTypes.string,

package/lib-module/Fieldset/FieldsetContainer.native.js

@@ -4,14 +4,17 @@ import View from "react-native-web/dist/exports/View"; // No equivalent of `<fie
 // If a11y testing finds any additional handling is needed at the container level, add it here.
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const FieldsetContainer = /*#__PURE__*/forwardRef(({
-  children,
-  accessibilityRole
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  accessibilityRole: accessibilityRole,
-  children: children
-}));
+const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    accessibilityRole
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    children: children
+  });
+});
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   children: PropTypes.node,

package/lib-module/Fieldset/Legend.js

@@ -7,13 +7,16 @@ import cssReset from './cssReset';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => /*#__PURE__*/_jsx("legend", {
-  ref: ref,
-  style: cssReset,
-  children: children
-}));
+const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("legend", {
+    ref: ref,
+    style: cssReset,
+    children: children
+  });
+});
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: PropTypes.node

package/lib-module/Fieldset/Legend.native.js

@@ -8,13 +8,16 @@ import PropTypes from 'prop-types';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  style: staticStyles.stretch,
-  children: children
-}));
+const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: staticStyles.stretch,
+    children: children
+  });
+});
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: PropTypes.node

package/lib-module/FlexGrid/Col/Col.js

@@ -9,22 +9,23 @@ import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
 import { responsiveProps } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Col = /*#__PURE__*/forwardRef(({
-  horizontalAlign,
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xsOffset,
-  smOffset,
-  mdOffset,
-  lgOffset,
-  xlOffset,
-  flex,
-  ...viewProps
-}, ref) => {
+const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    horizontalAlign,
+    children,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xsOffset,
+    smOffset,
+    mdOffset,
+    lgOffset,
+    xlOffset,
+    flex,
+    ...viewProps
+  } = _ref;
   const gutter = useContext(GutterContext);
   const viewPort = useViewport();
   const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
@@ -44,7 +45,7 @@ const Col = /*#__PURE__*/forwardRef(({
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return `${num / 12 * 100}%`;
+    return "".concat(num / 12 * 100, "%");
   };
 
   const calculateWidth = value => {

package/lib-module/FlexGrid/FlexGrid.js

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

package/lib-module/FlexGrid/Row/Row.js

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

package/lib-module/HorizontalScroll/HorizontalScroll.js

@@ -19,13 +19,14 @@ export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectToken
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 
-const HorizontalScroll = /*#__PURE__*/forwardRef(({
-  ScrollButton,
-  tokens,
-  itemPositions,
-  children,
-  ...rest
-}, ref) => {
+const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    ScrollButton,
+    tokens,
+    itemPositions,
+    children,
+    ...rest
+  } = _ref;
   const {
     nextIcon,
     previousIcon,
@@ -42,25 +43,29 @@ const HorizontalScroll = /*#__PURE__*/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] = useState(0);
 
-  const handleScrollEnd = ({
-    nativeEvent: {
-      contentOffset: {
-        x
+  const handleScrollEnd = _ref3 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
       }
-    }
-  }) => {
+    } = _ref3;
     setScrollOffset(x);
   };
 

package/lib-module/HorizontalScroll/HorizontalScrollButton.js

@@ -8,11 +8,14 @@ import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-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.
@@ -23,15 +26,16 @@ const selectContainerStyles = ({
  */
 
 
-const HorizontalScrollButton = /*#__PURE__*/forwardRef(({
-  direction = 'next',
-  icon,
-  offset,
-  onPress,
-  variant,
-  tokens,
-  copy
-}, ref) => {
+const HorizontalScrollButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    direction = 'next',
+    icon,
+    offset,
+    onPress,
+    variant,
+    tokens,
+    copy
+  } = _ref2;
   const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant);
   const getCopy = useCopy({
     dictionary,

package/lib-module/HorizontalScroll/ScrollViewEnd.js

@@ -12,11 +12,12 @@ const DEBOUNCE_MS = 100;
  * https://github.com/necolas/react-native-web/issues/1021
  */
 
-const ScrollViewEnd = /*#__PURE__*/forwardRef(({
-  onScrollEnd,
-  onScroll,
-  ...props
-}, ref) => {
+const ScrollViewEnd = /*#__PURE__*/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-module/HorizontalScroll/ScrollViewEnd.native.js

@@ -8,15 +8,18 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollViewEnd = /*#__PURE__*/forwardRef(({
-  onScrollEnd,
-  ...props
-}, ref) => /*#__PURE__*/_jsx(ScrollView, {
-  ref: ref,
-  ...props,
-  onScrollEndDrag: onScrollEnd,
-  onMomentumScrollEnd: onScrollEnd
-}));
+const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onScrollEnd,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: ref,
+    ...props,
+    onScrollEndDrag: onScrollEnd,
+    onMomentumScrollEnd: onScrollEnd
+  });
+});
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired

package/lib-module/HorizontalScroll/itemPositions.js

@@ -29,15 +29,19 @@ import PropTypes from 'prop-types'; // Utilities to assist scrolling a parent so
  * @returns {number}
  */
 
-export const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance = 0) => {
+export const getItemPositionScrollTarget = function (x, scrollMax, positions) {
+  let buttonClearance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   if (x <= 0) return 0;
   if (x >= scrollMax) return scrollMax; // If not scrolling all the way to the start or end, stop
   // where the first item is not coverred by the scroll previous button
 
-  const targetItem = Object.values(positions).find(({
-    start,
-    end
-  }) => start <= x && end > x); // If there's no target item we're landing at a gap between items
+  const targetItem = Object.values(positions).find(_ref => {
+    let {
+      start,
+      end
+    } = _ref;
+    return start <= x && end > x;
+  }); // If there's no target item we're landing at a gap between items
 
   const targetX = targetItem ? targetItem.start : x;
   return Math.max(0, targetX - buttonClearance);
@@ -52,14 +56,16 @@ export const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClear
  */
 
 export const getItemPositionLayoutHandler = (positions, index) => {
-  const handleLayout = ({
-    nativeEvent: {
-      layout: {
-        width,
-        x
+  const handleLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          x
+        }
       }
-    }
-  }) => {
+    } = _ref2;
+
     /* eslint-disable-next-line no-param-reassign */
     positions[index] = {
       start: x,

package/lib-module/Icon/Icon.js

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, scaleWithText, variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/forwardRef(({
-  icon: IconComponent,
-  accessibilityLabel,
-  variant,
-  tokens,
-  scalesWithText = false,
-  dataSet
-}, ref) => {
+const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon: IconComponent,
+    accessibilityLabel,
+    variant,
+    tokens,
+    scalesWithText = false,
+    dataSet
+  } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
   const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
 
@@ -29,7 +30,7 @@ const Icon = /*#__PURE__*/forwardRef(({
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
     },
     dataSet: dataSet,
     children: iconContent

package/lib-module/Icon/IconText.js

@@ -15,15 +15,17 @@ import { spacingProps } from '../utils';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/forwardRef(({
-  space,
-  iconPosition = 'left',
-  icon: IconComponent,
-  iconProps,
-  children
-}, ref) => {
+const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _iconProps$tokens;
 
+  let {
+    space,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps,
+    children
+  } = _ref;
+
   const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
     ref: ref,
     icon: IconComponent,