@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/Tooltip/Tooltip.js

@@ -17,35 +17,42 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectTooltipStyles = ({
-  backgroundColor,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  borderRadius
-}) => ({
-  backgroundColor,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  borderRadius
-});
+const selectTooltipStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  };
+};
 
-const selectTooltipShadowStyles = ({
-  shadow,
-  borderRadius
-}) => ({
-  borderRadius,
-  ...applyShadowToken(shadow)
-});
+const selectTooltipShadowStyles = _ref2 => {
+  let {
+    shadow,
+    borderRadius
+  } = _ref2;
+  return {
+    borderRadius,
+    ...applyShadowToken(shadow)
+  };
+};
 
-const selectTooltipPositionStyles = ({
-  top,
-  left,
-  width
-}) => {
+const selectTooltipPositionStyles = _ref3 => {
+  let {
+    top,
+    left,
+    width
+  } = _ref3;
   return {
     top,
     left,
@@ -53,16 +60,18 @@ const selectTooltipPositionStyles = ({
   };
 };
 
-const selectArrowStyles = ({
-  backgroundColor,
-  arrowWidth,
-  arrowBorderRadius,
-  shadow
-}, {
-  position,
-  width: tooltipWidth,
-  height: tooltipHeight
-}) => {
+const selectArrowStyles = (_ref4, _ref5) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref4;
+  let {
+    position,
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = _ref5;
   // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
   const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2); // position the arrow at the side and center of the tooltip - this happens before rotation
   // so we use the rectangle size as basis
@@ -135,15 +144,16 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipBut
  */
 
 
-const Tooltip = /*#__PURE__*/forwardRef(({
-  children,
-  content,
-  position = 'auto',
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
   const controlRef = useRef();
   const [controlLayout, setControlLayout] = useState(null);
@@ -160,9 +170,10 @@ const Tooltip = /*#__PURE__*/forwardRef(({
     arrowOffset
   } = themeTokens;
   useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({
-      window
-    }) => {
+    const subscription = Dimensions.addEventListener('change', _ref7 => {
+      let {
+        window
+      } = _ref7;
       setWindowDimensions(window);
     });
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
@@ -172,24 +183,29 @@ const Tooltip = /*#__PURE__*/forwardRef(({
 
   const close = () => setIsOpen(false);
 
-  const getPressableState = ({
-    pressed,
-    hovered,
-    focused
-  }) => ({
-    pressed,
-    hover: hovered,
-    focus: focused
-  });
+  const getPressableState = _ref8 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref8;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
 
-  const onTooltipLayout = ({
-    nativeEvent: {
-      layout: {
-        width,
-        height
+  const onTooltipLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
       }
-    }
-  }) => {
+    } = _ref9;
+
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({

package/lib-module/Tooltip/getTooltipPosition.js

@@ -49,9 +49,12 @@ function invertPosition(position) {
 }
 
 function findRectByPosition(position, rectsArray) {
-  return rectsArray.find(({
-    position: rectPosition
-  }) => rectPosition === position);
+  return rectsArray.find(_ref => {
+    let {
+      position: rectPosition
+    } = _ref;
+    return rectPosition === position;
+  });
 }
 /**
  * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
@@ -63,13 +66,14 @@ function findRectByPosition(position, rectsArray) {
  */
 
 
-function getTooltipPosition(position, {
-  controlLayout,
-  tooltipDimensions,
-  windowDimensions,
-  arrowWidth = 0,
-  arrowOffset = 0
-}) {
+function getTooltipPosition(position, _ref2) {
+  let {
+    controlLayout,
+    tooltipDimensions,
+    windowDimensions,
+    arrowWidth = 0,
+    arrowOffset = 0
+  } = _ref2;
   const {
     width: controlWidth,
     height: controlHeight,
@@ -139,9 +143,12 @@ function getTooltipPosition(position, {
     }
   }
 
-  const inWindow = boundingRects.filter(({
-    overflow
-  }) => overflow === 0); // pick the first position that fits in window
+  const inWindow = boundingRects.filter(_ref3 => {
+    let {
+      overflow
+    } = _ref3;
+    return overflow === 0;
+  }); // pick the first position that fits in window
   // (these are sorted clockwise which makes them show where one would expect them to be)
 
   if (inWindow.length > 0) {
@@ -150,11 +157,15 @@ function getTooltipPosition(position, {
   // the least overflowing and normalize its position to fit within window bounds
 
 
-  boundingRects.sort(({
-    overflow: overflowA
-  }, {
-    overflow: overflowB
-  }) => overflowA - overflowB);
+  boundingRects.sort((_ref4, _ref5) => {
+    let {
+      overflow: overflowA
+    } = _ref4;
+    let {
+      overflow: overflowB
+    } = _ref5;
+    return overflowA - overflowB;
+  });
   const leastOverflowing = boundingRects[0]; // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
 

package/lib-module/TooltipButton/TooltipButton.js

@@ -7,24 +7,30 @@ import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectInnerContainerStyles = ({
-  borderRadius,
-  width
-}) => ({
-  borderRadius,
-  width
-});
+const selectInnerContainerStyles = _ref => {
+  let {
+    borderRadius,
+    width
+  } = _ref;
+  return {
+    borderRadius,
+    width
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-  /* iconScale = 1 */
+const selectIconTokens = _ref2 => {
+  let {
+    iconSize,
+    iconColor
+    /* iconScale = 1 */
 
-}) => ({
-  size: iconSize,
-  color: iconColor // scale: iconScale TODO re-enable with icon component
+  } = _ref2;
+  return {
+    size: iconSize,
+    color: iconColor // scale: iconScale TODO re-enable with icon component
 
-});
+  };
+};
 /**
  * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
@@ -32,12 +38,13 @@ const selectIconTokens = ({
  */
 
 
-const TooltipButton = ({
-  pressableState,
-  tokens,
-  variant,
-  ...rest
-}) => {
+const TooltipButton = _ref3 => {
+  let {
+    pressableState,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent

package/lib-module/Typography/Typography.js

@@ -14,39 +14,43 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) => applyTextStyles({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}); // General-purpose flexible theme-neutral base component for text
+const selectTextStyles = _ref => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  } = _ref;
+  return applyTextStyles({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  });
+}; // General-purpose flexible theme-neutral base component for text
 
 
-const Typography = /*#__PURE__*/forwardRef(({
-  children,
-  variant,
-  heading,
-  tag = typeof heading === 'string' ? heading : undefined,
-  accessibilityRole = heading === true ? 'header' : undefined,
-  block = false,
-  align = undefined,
-  tokens,
-  dataSet,
-  ...rest
-}, ref) => {
+const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport

package/lib-module/ViewportProvider/ViewportProvider.js

@@ -9,9 +9,10 @@ import useViewportListener from './useViewportListener';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const ViewportProvider = ({
-  children
-}) => {
+const ViewportProvider = _ref => {
+  let {
+    children
+  } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
   const [viewport, setViewport] = useState(viewports.keys[0]);

package/lib-module/ViewportProvider/useViewportListener.js

@@ -26,9 +26,12 @@ const useViewportListenerCSR = setViewport => {
   useLayoutEffect(() => {
     setViewport(lookupViewport());
 
-    const onChange = ({
-      window
-    }) => setViewport(viewports.select(window.width));
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(viewports.select(window.width));
+    };
 
     const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
     // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).

package/lib-module/utils/a11y/semantics.js

@@ -49,7 +49,10 @@ const rolesToTags =
 
 }; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 
-export const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(([key, value]) => [value, key]));
+export const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(_ref => {
+  let [key, value] = _ref;
+  return [value, key];
+}));
 /**
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.

package/lib-module/utils/a11y/textSize.js

@@ -8,7 +8,8 @@ import Platform from "react-native-web/dist/exports/Platform";
  * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
  */
 
-export const scaleWithText = (value, maxScale = Infinity) => {
+export const scaleWithText = function (value) {
+  let maxScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
   if (!value) return value;
   const scale = Math.min(PixelRatio.getFontScale(), maxScale) || 1;
   return value * scale;
@@ -24,10 +25,11 @@ export const scaleWithText = (value, maxScale = Infinity) => {
  * `maxFontSizeMultiplier` prop value.
  */
 
-export const getMaxFontMultiplier = ({
-  fontSize,
-  fontScaleCap
-}) => {
+export const getMaxFontMultiplier = _ref => {
+  let {
+    fontSize,
+    fontScaleCap
+  } = _ref;
   if (Platform.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
   if (fontScaleCap <= fontSize) return 1;
   return fontScaleCap / fontSize;

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -1,25 +1,32 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Platform from "react-native-web/dist/exports/Platform"; // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 
-function useVerticalExpandAnimation({
-  containerHeight,
-  isExpanded,
-  tokens
-}) {
+function useVerticalExpandAnimation(_ref) {
+  let {
+    containerHeight,
+    isExpanded,
+    tokens
+  } = _ref;
   const [isAnimating, setIsAnimating] = useState(false);
+  const [wasExpanded, setWasExpanded] = useState(isExpanded);
+  const expandStateChanged = isExpanded !== wasExpanded;
   const expandAnimatedValue = useRef(new Animated.Value(0)).current;
   const elementRef = useRef(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens; // Treat as animating from when expanded state changes, until animation completes
-
-  useEffect(() => setIsAnimating(true), [isExpanded]);
+  } = tokens;
+  useLayoutEffect(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true);
+      setWasExpanded(isExpanded);
+    }
+  }, [expandStateChanged, isExpanded]);
   useEffect(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false);
+    const onComplete = () => setIsAnimating(false);
 
     if (Platform.OS === 'web') {
       if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
@@ -39,20 +46,40 @@ function useVerticalExpandAnimation({
     const animation = Animated.timing(expandAnimatedValue, animationConfig);
     animation.start(onComplete);
     return () => animation.stop();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
+  const containerStyles = {};
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
 
-  const containerStyles = !isExpanded && !isAnimating ? {
-    visibility: 'hidden'
-  } : {}; // don't visually collapse the container until we have it measured
-
-  if (containerHeight !== null) {
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
-      containerStyles.height = isExpanded ? containerHeight : 0;
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden';
     } else {
-      containerStyles.height = expandAnimatedValue;
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0;
+    }
+  } // don't visually collapse the container until we have it measured
+
+
+  if (containerHeight === null) {
+    if (Platform.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0;
+      containerStyles.visibility = 'hidden';
     }
+  } else if (Platform.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
+    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.height = isExpanded ? containerHeight : 0;
+  } else if (Platform.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1;
+  } else {
+    containerStyles.height = expandAnimatedValue;
   }
 
   return [containerStyles, elementRef];

package/lib-module/utils/children.js

@@ -55,7 +55,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -64,7 +64,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
+    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
   } else {
     wrappedText.push(child);
   }
@@ -86,7 +86,8 @@ const wrapChild = (child, wrappedText) => {
  */
 
 
-export const wrapStringsInText = (children, textProps = {}) => {
+export const wrapStringsInText = function (children) {
+  let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const childrenArray = unpackFragment(Children.toArray(children)); // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>