@telus-uds/components-base 1.65.0 → 1.67.0

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

@@ -6,7 +6,6 @@ import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
 import { BaseView } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
     case 'start':
@@ -14,63 +13,52 @@ const horizontalAlignStyles = horizontalAlign => {
         justifyContent: 'flex-start',
         textAlign: 'left'
       };
-
     case 'center':
       return {
         justifyContent: 'center',
         textAlign: 'center'
       };
-
     case 'end':
       return {
         justifyContent: 'flex-end',
         textAlign: 'right'
       };
-
     default:
       return {};
   }
 };
-
 const verticalAlignStyles = verticalAlign => {
   switch (verticalAlign) {
     case 'top':
       return {
         alignItems: 'flex-start'
       };
-
     case 'middle':
       return {
         alignItems: 'center'
       };
-
     case 'bottom':
       return {
         alignItems: 'flex-end'
       };
-
     default:
       return {};
   }
 };
-
 const distributeStyles = distribute => {
   switch (distribute) {
     case 'between':
       return {
         justifyContent: 'space-between'
       };
-
     case 'around':
       return {
         justifyContent: 'space-around'
       };
-
     default:
       return {};
   }
 };
-
 const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
@@ -88,32 +76,26 @@ const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
   let flexWrap = '';
-
   if (viewPort === viewports.xs) {
     flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
     flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap';
   }
-
   if (viewPort === viewports.sm) {
     flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
     flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap';
   }
-
   if (viewPort === viewports.md) {
     flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
     flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap';
   }
-
   if (viewPort === viewports.lg) {
     flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
     flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap';
   }
-
   if (viewPort === viewports.xl) {
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
     flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap';
   }
-
   return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...rest,
@@ -144,37 +126,30 @@ Row.propTypes = {
    * Align columns horizontally within their row.
    */
   horizontalAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
   /**
    * Align columns vertically within their row.
    */
   verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
-
   /**
    * Distribute empty space around columns.
    */
   distribute: PropTypes.oneOf(['around', 'between']),
-
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
   xsReverse: PropTypes.bool,
-
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
   smReverse: PropTypes.bool,
-
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
   mdReverse: PropTypes.bool,
-
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
   lgReverse: PropTypes.bool,
-
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */

package/lib-module/FlexGrid/helpers/index.js

@@ -5,14 +5,11 @@ const applyInheritance = sizes => {
       prevSize = size;
       return size;
     }
-
     if (index) {
       const value = prevSize;
       return value;
     }
-
     return undefined;
   });
 };
-
 export default applyInheritance;

package/lib-module/HorizontalScroll/HorizontalScroll.js

@@ -12,13 +12,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
 export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
+
 /**
  * Base component that scrolls horizontally and displays left and right buttons if
  * there is content to the left and the right which can be scrolled to.
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-
 const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     ScrollButton,
@@ -34,15 +34,14 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
     borderBottomWidth,
     borderBottomColor,
     buttonClearance = 0
-  } = validateThemeTokens(resolveThemeTokens(tokens), // Allow missing icons
+  } = validateThemeTokens(resolveThemeTokens(tokens),
+  // Allow missing icons
   getTokensSetPropType(tokenKeys, {
     partial: true
   }), 'HorizontalScroll');
   const [containerWidth, setContainerWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
-
   const handleContentWidth = width => setContentWidth(width);
-
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -52,12 +51,11 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     } = _ref2;
     return setContainerWidth(width);
-  }; // Update the scroll position only when scrolling actions ends to minimally rerender
-  // and update which buttons are conditionally rendered.
-
+  };
 
+  // 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 = _ref3 => {
     let {
       nativeEvent: {
@@ -68,22 +66,18 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
     } = _ref3;
     setScrollOffset(x);
   };
-
   const scrollMax = Math.max(0, contentWidth - containerWidth);
   const showNextButton = scrollOffset < scrollMax;
   const showPreviousButton = scrollOffset > 0;
   const scrollRef = useRef(null);
-
   const scrollTo = targetX => {
     var _scrollRef$current;
-
     if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo) === 'function') {
       const x = getItemPositionScrollTarget(targetX, scrollMax, itemPositions.positions, buttonClearance);
       scrollRef.current.scrollTo({
         x,
         animated: true
       });
-
       if (Platform.OS === 'android') {
         // React Native calls onScrollMomentumEnd after scrollTo for iOS, but not Android.
         // See https://github.com/facebook/react-native/issues/26661
@@ -91,38 +85,33 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
         setTimeout(() => setScrollOffset(x), 300);
       }
     }
-  }; // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
+  };
+  // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
   // ItemPositions is a mutable ref object intended to have its properties mutated without any rerenders.
-
   /* eslint-disable-next-line no-param-reassign */
-
-
   itemPositions.scrollTo = scrollTo;
   /* eslint-disable-next-line no-param-reassign */
-
   itemPositions.containerWidth = containerWidth;
   /* eslint-disable-next-line no-param-reassign */
-
   itemPositions.contentWidth = contentWidth;
   /* eslint-disable-next-line no-param-reassign */
-
   itemPositions.scrollOffset = scrollOffset;
   const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0;
   useEffect(() => {
-    if (hasWidths) itemPositions.setIsReady(true); // itemPositions is a ref object so this should occur only when elements' widths are set in state
-  }, [hasWidths, itemPositions]); // When scrolling, allow clearance around scroll buttons, so e.g. this...
+    if (hasWidths) itemPositions.setIsReady(true);
+    // itemPositions is a ref object so this should occur only when elements' widths are set in state
+  }, [hasWidths, itemPositions]);
+
+  // When scrolling, allow clearance around scroll buttons, so e.g. this...
   // (<-) Item 5   Item 6   Item 7   Item 8   It(->)
   // ...doesn't scroll like this with Item 9 never being properly visible:
   // (<-)em 9   Item 10  Item 11  Item 12  Item (->)
-
   const scrollDistance = containerWidth - buttonClearance * 2;
-
   const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
+  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
 
-  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
   // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
-
-
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: staticStyles.container,
@@ -164,7 +153,8 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   }
 });
-HorizontalScroll.propTypes = { ...selectedSystemPropTypes,
+HorizontalScroll.propTypes = {
+  ...selectedSystemPropTypes,
   itemPositions: itemPositionsPropType,
   ScrollButton: PropTypes.elementType,
   tokens: getTokensSetPropType(tokenKeys, {

package/lib-module/HorizontalScroll/HorizontalScrollButton.js

@@ -7,7 +7,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const selectContainerStyles = _ref => {
   let {
     offset
@@ -16,6 +15,7 @@ const selectContainerStyles = _ref => {
     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.
@@ -24,8 +24,6 @@ const selectContainerStyles = _ref => {
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-
-
 const HorizontalScrollButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     direction = 'next',

package/lib-module/HorizontalScroll/ScrollViewEnd.js

@@ -4,6 +4,7 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
 import debounce from 'lodash.debounce';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEBOUNCE_MS = 100;
+
 /**
  * A wrapper for ScrollView that supports an `onScrollEnd` function.
  *
@@ -11,7 +12,6 @@ const DEBOUNCE_MS = 100;
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-
 const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
@@ -21,14 +21,15 @@ const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, 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
-  const debounceScrollEnd = useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]); // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
+  const debounceScrollEnd = useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
 
+  // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
   const handleScroll = event => {
     if (typeof onScroll === 'function') onScroll(event);
     if (typeof onScrollEnd === 'function') debounceScrollEnd(event);
-  }; // Cancel any lingering debounce timeouts on dismount
-
+  };
 
+  // Cancel any lingering debounce timeouts on dismount
   useEffect(() => debounceScrollEnd.cancel);
   return /*#__PURE__*/_jsx(ScrollView, {
     ref: ref,

package/lib-module/HorizontalScroll/ScrollViewEnd.native.js

@@ -6,7 +6,6 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
  *
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/lib-module/HorizontalScroll/itemPositions.js

@@ -1,5 +1,7 @@
 import { useRef, useState } from 'react';
-import PropTypes from 'prop-types'; // Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
+import PropTypes from 'prop-types';
+
+// Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
 
 /**
  * @typedef ItemPositionPosition
@@ -28,24 +30,26 @@ import PropTypes from 'prop-types'; // Utilities to assist scrolling a parent so
  * @param {number} [buttonClearance] - offset to allow space for a button
  * @returns {number}
  */
-
 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
+  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(_ref => {
     let {
       start,
       end
     } = _ref;
     return start <= x && end > x;
-  }); // If there's no target item we're landing at a gap between items
+  });
 
+  // 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);
 };
+
 /**
  * Returns a handler for React Native's `onLayout` which updates the values of
  * the ref object returned from `useItemPositions`.
@@ -54,7 +58,6 @@ export const getItemPositionScrollTarget = function (x, scrollMax, positions) {
  * @param {number} index
  * @returns {function}
  */
-
 export const getItemPositionLayoutHandler = (positions, index) => {
   const handleLayout = _ref2 => {
     let {
@@ -65,16 +68,15 @@ export const getItemPositionLayoutHandler = (positions, index) => {
         }
       }
     } = _ref2;
-
     /* eslint-disable-next-line no-param-reassign */
     positions[index] = {
       start: x,
       end: x + width
     };
   };
-
   return handleLayout;
 };
+
 /**
  * Wrapper for `useRef` which gives a mutable object in which item start/end coordinates,
  * scrollTo method and content/container widths may be set and updated without causing a re-render.
@@ -83,7 +85,6 @@ export const getItemPositionLayoutHandler = (positions, index) => {
  *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
  *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
  */
-
 export const useItemPositions = () => {
   const [isReady, setIsReady] = useState(false);
   return [useRef({
@@ -95,10 +96,10 @@ export const useItemPositions = () => {
     setIsReady
   }).current, isReady];
 };
+
 /**
  * PropType for the ref object returned by `useItemPositions`
  */
-
 export const itemPositionsPropType = PropTypes.exact({
   positions: PropTypes.objectOf(PropTypes.shape({
     start: PropTypes.number,

package/lib-module/Icon/Icon.js

@@ -17,15 +17,14 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
   const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
-
   const iconContent = /*#__PURE__*/_jsx(IconComponent, {
     title: accessibilityLabel,
     size: size,
     color: themeTokens.color
   });
-
   return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
-    ref: ref // eslint-disable-next-line react-native/no-inline-styles
+    ref: ref
+    // eslint-disable-next-line react-native/no-inline-styles
     ,
     style: {
       // TODO: systematise animations.
@@ -42,17 +41,14 @@ Icon.displayName = 'Icon';
 export const iconComponentPropTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Icon'),
-
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
   accessibilityLabel: PropTypes.string,
-
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
   scalesWithText: PropTypes.bool,
-
   /**
    * Custom style object to be applied to the icon component.
    * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
@@ -64,8 +60,8 @@ export const iconComponentPropTypes = {
    */
   style: PropTypes.object
 };
-Icon.propTypes = { ...iconComponentPropTypes,
-
+Icon.propTypes = {
+  ...iconComponentPropTypes,
   /**
    * A valid UDS icon component imported from a UDS palette
    * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`

package/lib-module/Icon/IconText.js

@@ -5,6 +5,7 @@ import View from "react-native-web/dist/exports/View";
 import Icon, { iconComponentPropTypes } from './Icon';
 import { getStackedContent } from '../StackView';
 import { spacingProps } from '../utils';
+
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
  * intended for use when creating components, not intended for use in applications on its own.
@@ -13,11 +14,9 @@ import { spacingProps } from '../utils';
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _iconProps$tokens;
-
   let {
     space,
     iconPosition = 'left',
@@ -25,18 +24,16 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
     iconProps,
     children
   } = _ref;
-
   const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
     ref: ref,
     icon: IconComponent,
     scalesWithText: true,
     ...iconProps
-  }); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
-  // See abandoned issue https://github.com/facebook/react-native/issues/6529
-
+  });
 
+  // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
+  // See abandoned issue https://github.com/facebook/react-native/issues/6529
   const size = (iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
-
   const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
@@ -45,7 +42,6 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     children: iconContent
   });
-
   const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
@@ -54,7 +50,6 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     children: iconContent
   });
-
   const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
   const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
   return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
@@ -64,38 +59,32 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
-  /* eslint-disable react/no-unused-prop-types */
-  // eslint is having hard time seeing these props through forwardRef
-
+  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
    */
   space: spacingProps.types.spacingValue,
-
   /**
    * Whether the icon should be to the left of the content or the right of the content.
    */
   iconPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
   icon: PropTypes.elementType,
-
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text
    * if users use accessibility settings to increase text size.
    */
   iconProps: PropTypes.exact(iconComponentPropTypes),
-
   /**
    * Content to be rendered alongside the Icon component. Usually this should be a
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
   /* eslint-enable react/no-unused-prop-types */
-
 };
+
 export default IconText;