@telus-uds/components-base 1.24.1 → 1.24.2

package/lib-module/Tooltip/Tooltip.js

@@ -1,15 +1,13 @@
 import React, { forwardRef, useEffect, useRef, useState } 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 'prop-types';
+import propTypes from './shared';
+import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui';
 import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import Backdrop from './Backdrop';
-import getTooltipPosition from './getTooltipPosition';
+import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
 import TooltipButton from '../TooltipButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -47,20 +45,20 @@ const selectTooltipShadowStyles = _ref2 => {
   };
 };
 
-const selectTooltipPositionStyles = _ref3 => {
+const selectMobileTooltipPositionStyles = _ref3 => {
   let {
     top,
     left,
-    width
+    position
   } = _ref3;
   return {
     top,
     left,
-    width
+    position
   };
 };
 
-const selectArrowStyles = (_ref4, _ref5) => {
+const selectMobileArrowStyles = (_ref4, _ref5) => {
   let {
     backgroundColor,
     arrowWidth,
@@ -68,56 +66,31 @@ const selectArrowStyles = (_ref4, _ref5) => {
     shadow
   } = _ref4;
   let {
-    position,
-    width: tooltipWidth,
-    height: tooltipHeight
+    placement,
+    x: arrowX,
+    y: arrowY
   } = _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 / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '-45deg'
-      }]
-    },
-    right: {
-      left: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '135deg'
-      }]
-    }
-  };
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[placement.split('-')[0]];
   return {
     backgroundColor,
-    width: rectangleSide,
-    height: rectangleSide,
+    width: arrowWidth,
+    height: arrowWidth,
     borderBottomRightRadius: arrowBorderRadius,
     // this corner will be the arrow tip after rotation
+    transform: [{
+      rotateZ: '45deg'
+    }],
     ...applyShadowToken(shadow),
-    ...directionalStyles[position]
+    left: arrowX != null && arrowX,
+    top: arrowY != null && arrowY,
+    right: '',
+    bottom: '',
+    [staticSide]: '-4px'
   };
 };
 
@@ -155,40 +128,50 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
-  const controlRef = useRef();
-  const [controlLayout, setControlLayout] = useState(null);
+  const arrowRef = useRef();
   const [tooltipDimensions, setTooltipDimensions] = useState(null);
-  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));
-  const [tooltipPosition, setTooltipPosition] = useState(null);
+  const positions = {
+    auto: undefined,
+    // Auto needs to specifically bet set to undefined
+    above: 'top',
+    right: 'right',
+    below: 'bottom',
+    left: 'left'
+  }; // "AutoPlacement" can't be used with "flip"
+
+  const additionalMiddleware = position !== 'auto' ? autoPlacement : flip;
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement,
+    middlewareData: {
+      arrow: arrowData = {}
+    }
+  } = useFloating({
+    placement: positions[position],
+    middleware: [shift(), additionalMiddleware(), offset(15), arrow({
+      element: arrowRef
+    })]
+  });
   const getCopy = useCopy({
     dictionary,
     copy
   });
   const themeTokens = useThemeTokens('Tooltip', tokens, variant);
-  const {
-    arrowWidth,
-    arrowOffset
-  } = themeTokens;
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', _ref7 => {
-      let {
-        window
-      } = _ref7;
-      setWindowDimensions(window);
-    });
-    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
-  });
 
   const toggleIsOpen = () => setIsOpen(!isOpen);
 
   const close = () => setIsOpen(false);
 
-  const getPressableState = _ref8 => {
+  const getPressableState = _ref7 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref8;
+    } = _ref7;
     return {
       pressed,
       hover: hovered,
@@ -196,7 +179,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     };
   };
 
-  const onTooltipLayout = _ref9 => {
+  const onTooltipLayout = _ref8 => {
     let {
       nativeEvent: {
         layout: {
@@ -204,7 +187,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref8;
 
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
@@ -219,43 +202,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
   };
 
   useEffect(() => {
-    if (isOpen) {
-      controlRef.current.measureInWindow((x, y, width, height) => {
-        setControlLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    } else {
-      setControlLayout(null);
+    if (!isOpen) {
       setTooltipDimensions(null);
-      setTooltipPosition(null);
     }
   }, [isOpen]);
-  useEffect(() => {
-    setIsOpen(false);
-  }, [windowDimensions]);
-  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: {
@@ -271,67 +221,50 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
     ...selectProps(rest),
+    ref: ref,
     children: [/*#__PURE__*/_jsx(Pressable, {
       onPress: toggleIsOpen,
-      ref: controlRef,
+      ref: reference,
       onBlur: close,
       style: pressableStyles,
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
       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
-          })
-        })]
-      })
+    }), isOpen && /*#__PURE__*/_jsxs(View, {
+      ref: floating,
+      style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip, // applied separately so that it doesn't cover the arrow
+      selectMobileTooltipPositionStyles({
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0
+      })],
+      onLayout: onTooltipLayout,
+      accessibilityRole: "alert",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [staticStyles.arrow, selectMobileArrowStyles(themeTokens, { ...arrowData,
+          placement
+        })],
+        ref: arrowRef
+      }), /*#__PURE__*/_jsx(View, {
+        style: selectTooltipStyles(themeTokens),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: selectTextStyles(themeTokens),
+          children: content
+        })
+      })]
     })]
   });
 });
 Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * 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']),
-  tokens: getTokensPropType('Tooltip'),
-  variant: variantProp.propType
+  ...propTypes
 };
 export default Tooltip;
 const staticStyles = StyleSheet.create({
   container: {
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    position: 'absolute'
   },
   tooltip: {
     position: 'absolute',
@@ -339,9 +272,6 @@ const staticStyles = StyleSheet.create({
     top: 0,
     left: 0
   },
-  tooltipHidden: {
-    opacity: 0
-  },
   arrow: {
     position: 'absolute'
   }

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

@@ -0,0 +1,326 @@
+import React, { forwardRef, useEffect, useRef, useState } 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 / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-45deg'
+      }]
+    },
+    right: {
+      left: verticalOffset,
+      top: tooltipHeight / 2 - horizontalOffset,
+      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__*/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);
+  const [tooltipDimensions, setTooltipDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));
+  const [tooltipPosition, setTooltipPosition] = useState(null);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
+  const {
+    arrowWidth,
+    arrowOffset
+  } = themeTokens;
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', _ref7 => {
+      let {
+        window
+      } = _ref7;
+      setWindowDimensions(window);
+    });
+    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+  });
+
+  const toggleIsOpen = () => 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
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      controlRef.current.measureInWindow((x, y, width, height) => {
+        setControlLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    } else {
+      setControlLayout(null);
+      setTooltipDimensions(null);
+      setTooltipPosition(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    setIsOpen(false);
+  }, [windowDimensions]);
+  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,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: toggleIsOpen,
+      ref: controlRef,
+      onBlur: close,
+      style: pressableStyles,
+      hitSlop: pressableHitSlop,
+      accessibilityLabel: getCopy('a11yText'),
+      accessibilityRole: "button",
+      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/index.js

@@ -1,2 +1,5 @@
-import Tooltip from './Tooltip';
+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;