@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Tooltip/Tooltip.native.js

@@ -1,328 +0,0 @@
-import React from 'react';
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import Platform from "react-native-web/dist/exports/Platform";
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import propTypes from './shared';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
-import Backdrop from './Backdrop';
-import getTooltipPosition from './getTooltipPosition';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectTooltipStyles = _ref => {
-  let {
-    backgroundColor,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    borderRadius
-  } = _ref;
-  return {
-    backgroundColor,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    borderRadius
-  };
-};
-const selectTooltipShadowStyles = _ref2 => {
-  let {
-    shadow,
-    borderRadius
-  } = _ref2;
-  return {
-    borderRadius,
-    ...applyShadowToken(shadow)
-  };
-};
-const selectTooltipPositionStyles = _ref3 => {
-  let {
-    top,
-    left,
-    width
-  } = _ref3;
-  return {
-    top,
-    left,
-    width
-  };
-};
-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
-  const verticalOffset = -1 * rectangleSide / 2;
-  const horizontalOffset = rectangleSide / 2;
-
-  // percentage-based absolute positioning doesn't act well on native, so we have to
-  // calculate the pixel values
-  const directionalStyles = {
-    above: {
-      bottom: verticalOffset,
-      left: tooltipWidth / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '45deg'
-      }]
-    },
-    below: {
-      top: verticalOffset,
-      left: tooltipWidth / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '-135deg'
-      }]
-    },
-    left: {
-      right: verticalOffset,
-      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
-      transform: [{
-        rotateZ: '-45deg'
-      }]
-    },
-    right: {
-      left: verticalOffset,
-      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
-      transform: [{
-        rotateZ: '135deg'
-      }]
-    }
-  };
-  return {
-    backgroundColor,
-    width: rectangleSide,
-    height: rectangleSide,
-    borderBottomRightRadius: arrowBorderRadius,
-    // this corner will be the arrow tip after rotation
-    ...applyShadowToken(shadow),
-    ...directionalStyles[position]
-  };
-};
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipButton, {
-  pressableState: pressableState,
-  variant: variant
-});
-
-/**
- * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
- * to help a user fill it in, or as a standalone component.
- *
- * By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
- * a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
- *
- * ### Positioning
- * By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
- * You may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.
- *
- * ### Usage criteria
- * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
- * - Tooltips may also be useful when vertical space is an issue.
- */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let {
-    children,
-    content,
-    position = 'auto',
-    copy = 'en',
-    onPress = () => {},
-    tokens,
-    variant,
-    inline = false,
-    nativeID,
-    ...rest
-  } = _ref6;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const controlRef = React.useRef();
-  const [controlLayout, setControlLayout] = React.useState(null);
-  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
-  const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'));
-  const [tooltipPosition, setTooltipPosition] = React.useState(null);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
-  const {
-    arrowWidth,
-    arrowOffset
-  } = themeTokens;
-  React.useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', _ref7 => {
-      let {
-        window
-      } = _ref7;
-      setWindowDimensions(window);
-    });
-    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
-  });
-  const toggleIsOpen = () => {
-    onPress();
-    setIsOpen(!isOpen);
-  };
-  const close = () => setIsOpen(false);
-  const getPressableState = _ref8 => {
-    let {
-      pressed,
-      hovered,
-      focused
-    } = _ref8;
-    return {
-      pressed,
-      hover: hovered,
-      focus: focused
-    };
-  };
-  const onTooltipLayout = _ref9 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width,
-          height
-        }
-      }
-    } = _ref9;
-    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
-      setTooltipDimensions({
-        width: Platform.select({
-          web: width + 0.3,
-          // avoids often unnecessary line breaks due to subpixel rendering of fonts
-          native: width
-        }),
-        height
-      });
-    }
-  };
-  React.useEffect(() => {
-    if (isOpen) {
-      controlRef.current.measureInWindow((x, y, width, height) => {
-        setControlLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    } else {
-      setControlLayout(null);
-      setTooltipDimensions(null);
-      setTooltipPosition(null);
-    }
-  }, [isOpen]);
-  React.useEffect(() => {
-    setIsOpen(false);
-  }, [windowDimensions]);
-  React.useEffect(() => {
-    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
-      return;
-    }
-    const updatedPosition = getTooltipPosition(position, {
-      controlLayout,
-      tooltipDimensions,
-      windowDimensions,
-      arrowWidth,
-      arrowOffset
-    });
-
-    // avoid ending up in an infinite normalization loop
-    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
-      return;
-    }
-    setTooltipPosition(updatedPosition);
-  }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
-  const control = children !== undefined ? children : defaultControl;
-  const pressableStyles = control === defaultControl ? Platform.select({
-    web: {
-      outline: 'none'
-    }
-  }) : undefined;
-  const pressableHitSlop = control === defaultControl ? {
-    top: 10,
-    bottom: 10,
-    left: 10,
-    right: 10
-  } : undefined;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.container, Platform.select({
-      web: {
-        display: inline ? 'inline-block' : 'flex'
-      }
-    })],
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: toggleIsOpen,
-      ref: controlRef,
-      onBlur: close,
-      style: pressableStyles,
-      hitSlop: pressableHitSlop,
-      accessibilityLabel: getCopy('a11yText'),
-      accessibilityRole: "button",
-      nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
-    }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
-      onPress: close,
-      children: /*#__PURE__*/_jsxs(View, {
-        ref: ref,
-        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
-        // applied separately so that it doesn't cover the arrow
-        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
-        ],
-
-        onLayout: onTooltipLayout,
-        accessibilityRole: "alert",
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectTooltipStyles(themeTokens),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: selectTextStyles(themeTokens),
-            children: content
-          })
-        })]
-      })
-    })]
-  });
-});
-Tooltip.displayName = 'NativeTooltip';
-Tooltip.propTypes = {
-  ...selectedSystemPropTypes,
-  ...propTypes
-};
-export default Tooltip;
-const staticStyles = StyleSheet.create({
-  container: {
-    alignItems: 'flex-start'
-  },
-  tooltip: {
-    position: 'absolute',
-    maxWidth: 240,
-    top: 0,
-    left: 0
-  },
-  tooltipHidden: {
-    opacity: 0
-  },
-  arrow: {
-    position: 'absolute'
-  }
-});

package/lib-module/Tooltip/dictionary.js

@@ -1,8 +0,0 @@
-export default {
-  en: {
-    a11yText: 'Reveal additional information.'
-  },
-  fr: {
-    a11yText: 'Afficher des renseignements supplémentaires.'
-  }
-};

package/lib-module/Tooltip/getTooltipPosition.js

@@ -1,170 +0,0 @@
-function getAbsolutePosition(position) {
-  const {
-    left,
-    right,
-    bottom,
-    top,
-    width,
-    ...rest
-  } = position;
-
-  // adjust the coordinates so that it fits within the window
-  const finalPosition = {
-    left: Math.max(0, left),
-    right: Math.max(0, right),
-    top: Math.max(0, top),
-    bottom // since it's ok the make the document grow downwards - no need to normalize here
-  };
-
-  const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2));
-
-  // adjust the width by whatever has been subtracted from left or right
-  finalPosition.width = width - Math.abs(getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right));
-  if (finalPosition.top !== top) {
-    finalPosition.bottom += finalPosition.top - top;
-  }
-  return {
-    ...finalPosition,
-    ...rest,
-    isNormalized: false
-  };
-}
-function invertPosition(position) {
-  switch (position) {
-    case 'above':
-      return 'below';
-    case 'below':
-      return 'above';
-    case 'left':
-      return 'right';
-    default:
-      return 'left';
-  }
-}
-function findRectByPosition(position, rectsArray) {
-  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
- * to the control (button) and we have a limited set of positions, an easy and consistent way
- * of positioning it is to check all of the possible positions and pick one that will be rendered
- * within the window bounds. This way we can also rely on the tooltip being actually rendered
- * before it is shown, which makes it account for the width being limiting in styles, custom font
- * rendering, etc.
- */
-function getTooltipPosition(position, _ref2) {
-  let {
-    controlLayout,
-    tooltipDimensions,
-    windowDimensions,
-    arrowWidth = 0,
-    arrowOffset = 0
-  } = _ref2;
-  const {
-    width: controlWidth,
-    height: controlHeight,
-    x: controlX,
-    y: controlY
-  } = controlLayout;
-  const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipDimensions;
-  const {
-    width: windowWidth,
-    height: windowHeight
-  } = windowDimensions;
-  const arrowSize = arrowWidth / 2 + arrowOffset;
-  const horizontalBounds = {
-    left: controlX + controlWidth / 2 - tooltipWidth / 2,
-    right: windowWidth - (controlX + controlWidth / 2 + tooltipWidth / 2)
-  };
-  const verticalBounds = {
-    top: controlY,
-    bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
-  };
-
-  // calculate absolute coordinates for each of the potential positions (relative to window)
-  const boundingRects = [{
-    position: 'above',
-    ...horizontalBounds,
-    top: controlY - tooltipHeight - arrowSize,
-    bottom: windowHeight - (controlY - arrowSize)
-  }, {
-    position: 'right',
-    ...verticalBounds,
-    left: controlX + controlWidth + arrowSize,
-    right: windowWidth - (controlX + controlWidth + tooltipWidth + arrowSize)
-  }, {
-    position: 'below',
-    ...horizontalBounds,
-    top: controlY + controlHeight + arrowSize,
-    bottom: windowHeight - (controlY + controlHeight + tooltipHeight + arrowSize)
-  }, {
-    position: 'left',
-    ...verticalBounds,
-    left: controlX - tooltipWidth - arrowSize,
-    right: windowWidth - (controlX - arrowSize)
-  }].map(rect => {
-    // an absolute value representing how much of the tooltip is overflowing the window on each side
-    const windowOverflow = Math.abs(Math.min(rect.top, 0) - Math.min(rect.left, 0) - Math.min(rect.right, 0) - Math.min(rect.bottom, 0));
-    return {
-      ...rect,
-      ...tooltipDimensions,
-      overflow: windowOverflow,
-      isNormalized: false
-    };
-  });
-
-  // the 'position' prop overrides the automatic positioning
-  if (position !== 'auto') {
-    let rect = findRectByPosition(position, boundingRects);
-
-    // check if the suggested 'position' fits in window
-    if (rect.overflow === 0) {
-      return rect;
-    }
-
-    // otherwise try the inverted position (e.g. left -> right)
-    rect = findRectByPosition(invertPosition(position), boundingRects);
-    if (rect.overflow === 0) {
-      return rect;
-    }
-  }
-  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) {
-    return inWindow[0];
-  }
-
-  // if all positions would end up being out of window bounds, let's pick the one that is
-  // the least overflowing and normalize its position to fit within window bounds
-  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
-  return getAbsolutePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
-}
-export default getTooltipPosition;

package/lib-module/Tooltip/index.js

@@ -1,5 +0,0 @@
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import NonNativeTooltip from './Tooltip';
-import NativeToolTip from './Tooltip.native';
-const Tooltip = !Dimensions.get('screen').width <= 340 ? NativeToolTip : NonNativeTooltip;
-export default Tooltip;

package/lib-module/Tooltip/shared.js

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp } from '../utils';
-const propTypes = {
-  /**
-   * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
-   * pressable state and tooltip variant as an argument.
-   */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  /**
-   * The message. Can be raw text or text components.
-   */
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * Select English or French copy for the accessible label.
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  /**
-   * Use to place the tooltip in a specific location (only if it fits within viewport).
-   */
-  position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
-  /**
-   * Display tooltip icon button as an inline element.
-   */
-  inline: PropTypes.bool,
-  /**
-   * Callback function triggered when the tooltip is pressed.
-   */
-  onPress: PropTypes.func,
-  /**
-   * The `id` of the tooltip button.
-   */
-  nativeID: PropTypes.string,
-  tokens: getTokensPropType('Tooltip'),
-  variant: variantProp.propType
-};
-export default propTypes;

package/lib-module/TooltipButton/TooltipButton.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import Icon from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectInnerContainerStyles = _ref => {
-  let {
-    borderRadius,
-    width,
-    backgroundColor
-  } = _ref;
-  return {
-    borderRadius,
-    width,
-    backgroundColor
-  };
-};
-const selectIconTokens = _ref2 => {
-  let {
-    iconSize,
-    iconColor,
-    iconScale = 1
-  } = _ref2;
-  return {
-    size: iconSize,
-    color: iconColor,
-    scale: iconScale
-  };
-};
-
-/**
- * `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.
- * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
- */
-const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    pressableState,
-    tokens,
-    variant,
-    ...rest
-  } = _ref3;
-  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState);
-  const {
-    icon: IconComponent
-  } = themeTokens;
-  return /*#__PURE__*/_jsx(View, {
-    style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
-      margin: -themeTokens.outerBorderWidth
-    }, staticStyles.bubblePointerEvents],
-    ...selectProps(rest),
-    ref: ref,
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectInnerContainerStyles(themeTokens),
-      children: IconComponent && /*#__PURE__*/_jsx(Icon, {
-        icon: IconComponent,
-        tokens: selectIconTokens(themeTokens)
-      })
-    })
-  });
-});
-TooltipButton.displayName = 'TooltipButton';
-const staticStyles = StyleSheet.create({
-  bubblePointerEvents: {
-    ...Platform.select({
-      web: {
-        pointerEvents: 'none'
-      }
-    })
-  }
-});
-TooltipButton.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Used as appearances when resolving theme tokens.
-   */
-  pressableState: PropTypes.shape({
-    pressed: PropTypes.bool,
-    hover: PropTypes.bool,
-    focus: PropTypes.bool
-  }),
-  tokens: getTokensPropType('TooltipButton'),
-  variant: variantProp.propType
-};
-export default TooltipButton;

package/lib-module/TooltipButton/index.js

@@ -1,2 +0,0 @@
-import TooltipButton from './TooltipButton';
-export default TooltipButton;