@telus-uds/components-base 1.24.1 → 1.24.2

package/lib-module/Tooltip/shared.js

@@ -0,0 +1,27 @@
+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']),
+  tokens: getTokensPropType('Tooltip'),
+  variant: variantProp.propType
+};
+export default propTypes;

package/lib-module/Typography/Typography.js

@@ -66,7 +66,9 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };
-  const containerProps = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+  const containerProps = {
+    accessibilityRole,
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
   return block ? /*#__PURE__*/_jsx(View, {

package/lib-module/utils/floating-ui/index.js

@@ -0,0 +1 @@
+export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-dom';

package/lib-module/utils/floating-ui/index.native.js

@@ -0,0 +1 @@
+export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-native';

package/package.json

@@ -7,6 +7,8 @@
     "url": "https://github.com/telus/universal-design-system/issues"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^1.0.1",
+    "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
     "@telus-uds/system-theme-tokens": "^2.9.0",
@@ -64,11 +66,11 @@
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js"
+    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.24.1"
+  "version": "1.24.2"
 }

package/src/Box/Box.jsx

@@ -137,6 +137,7 @@ const Box = forwardRef(
     ref
   ) => {
     const props = {
+      accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...selectProps(rest)
     }

package/src/Divider/Divider.jsx

@@ -72,7 +72,10 @@ const Divider = forwardRef(({ variant, vertical = false, space, tokens, ...rest
     Platform.OS === 'web'
       ? // There are aria attributes for dividers on web
         {
+          // Early versions of React Native Web support 'aria-orientation' while
+          // later versions only support accessibilityOrientation and map it. Supply both.
           'aria-orientation': vertical ? 'vertical' : 'horizontal',
+          accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
           accessibilityRole: 'separator'
         }
       : // There are no such equivalent attributes for native

package/src/FlexGrid/FlexGrid.jsx

@@ -70,6 +70,7 @@ const FlexGrid = forwardRef(
     }
 
     const props = {
+      accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...selectProps(rest)
     }

package/src/Link/InlinePressable.jsx

@@ -9,16 +9,18 @@ import { Pressable, StyleSheet } from 'react-native'
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
+ * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
+ *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles.inline,
-      typeof style === 'function' ? style(pressState) : style
+      typeof style === 'function' ? style(pressState) : style,
+      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
     ]}
     {...props}
   >
@@ -29,7 +31,11 @@ InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {
+    // Stop Pressable defaulting to (block) flex
     display: 'inline'
+  },
+  inlineFlex: {
+    display: 'inline-flex'
   }
 })
 

package/src/Link/LinkBase.jsx

@@ -20,10 +20,13 @@ import { IconText, iconComponentPropTypes } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
-const selectOuterBorderStyles = (
-  { outerBorderColor, outerBorderWidth, outerBorderGap, borderRadius, outerBorderOutline },
-  hasIcon
-) =>
+const selectOuterBorderStyles = ({
+  outerBorderColor,
+  outerBorderWidth,
+  outerBorderGap,
+  borderRadius,
+  outerBorderOutline
+}) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
@@ -35,10 +38,7 @@ const selectOuterBorderStyles = (
           outerBorderWidth,
           outerBorderGap,
           borderRadius
-        }),
-        // Stops focus ring stretching horizontally if parent has display: block
-        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-        display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
+        })
       }
     : {}
 
@@ -144,12 +144,19 @@ const LinkBase = forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
+        inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
-          const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon)
+          const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer]
+
+          return [
+            outerBorderStyles,
+            blockLeftStyle,
+            decorationStyles,
+            hasIcon && staticStyles.rowContainer
+          ]
         }}
       >
         {(linkState) => {

package/src/StackView/StackView.jsx

@@ -82,6 +82,7 @@ const StackView = forwardRef(
     const viewport = useViewport()
     const direction = useResponsiveProp(directionProp, 'column')
     const selectedProps = selectProps({
+      accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...rest
     })

package/src/StackView/StackWrapBox.jsx

@@ -67,6 +67,7 @@ const StackWrapBox = forwardRef(
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
     const selectedProps = selectProps({
+      accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...rest
     })

package/src/StackView/StackWrapGap.jsx

@@ -46,6 +46,7 @@ const StackWrapGap = forwardRef(
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
     const selectedProps = selectProps({
+      accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...rest
     })

package/src/ThemeProvider/utils/styles.js

@@ -45,9 +45,7 @@ export function applyTextStyles({
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
     styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`
-  }
-
-  if (fontWeight) {
+  } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight

package/src/Tooltip/Tooltip.jsx

@@ -1,18 +1,10 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react'
-import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
+import propTypes from './shared'
+import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui'
 
-import PropTypes from 'prop-types'
 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'
@@ -38,53 +30,34 @@ const selectTooltipShadowStyles = ({ shadow, borderRadius }) => ({
   borderRadius,
   ...applyShadowToken(shadow)
 })
-const selectTooltipPositionStyles = ({ top, left, width }) => {
-  return { top, left, width }
+
+const selectMobileTooltipPositionStyles = ({ top, left, position }) => {
+  return { top, left, position }
 }
-const selectArrowStyles = (
+
+const selectMobileArrowStyles = (
   { backgroundColor, arrowWidth, arrowBorderRadius, shadow },
-  { position, width: tooltipWidth, height: tooltipHeight }
+  { placement, x: arrowX, y: arrowY }
 ) => {
-  // 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'
   }
 }
 
@@ -111,26 +84,37 @@ const defaultControl = (pressableState, variant) => (
 const Tooltip = forwardRef(
   ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(false)
+    const arrowRef = useRef()
 
-    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', ({ window }) => {
-        setWindowDimensions(window)
-      })
+    const positions = {
+      auto: undefined, // Auto needs to specifically bet set to undefined
+      above: 'top',
+      right: 'right',
+      below: 'bottom',
+      left: 'left'
+    }
 
-      return () => subscription?.remove()
+    // "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 toggleIsOpen = () => setIsOpen(!isOpen)
     const close = () => setIsOpen(false)
 
@@ -161,56 +145,11 @@ const Tooltip = forwardRef(
     }
 
     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?.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?.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
@@ -218,10 +157,10 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
         <Pressable
           onPress={toggleIsOpen}
-          ref={controlRef}
+          ref={reference}
           onBlur={close}
           style={pressableStyles}
           hitSlop={pressableHitSlop}
@@ -233,30 +172,34 @@ const Tooltip = forwardRef(
             : control}
         </Pressable>
         {isOpen && (
-          <Backdrop onPress={close}>
+          <View
+            ref={floating}
+            style={[
+              selectTooltipShadowStyles(themeTokens),
+              staticStyles.tooltip, // applied separately so that it doesn't cover the arrow
+              selectMobileTooltipPositionStyles({
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0
+              })
+            ]}
+            onLayout={onTooltipLayout}
+            accessibilityRole="alert"
+          >
             <View
-              ref={ref}
               style={[
-                staticStyles.tooltip,
-                selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
-                tooltipPosition && selectTooltipPositionStyles(tooltipPosition),
-                (tooltipPosition === null || tooltipPosition?.isNormalized) &&
-                  staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+                staticStyles.arrow,
+                selectMobileArrowStyles(themeTokens, {
+                  ...arrowData,
+                  placement
+                })
               ]}
-              onLayout={onTooltipLayout}
-              accessibilityRole="alert"
-            >
-              <View
-                style={[
-                  staticStyles.arrow,
-                  tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)
-                ]}
-              />
-              <View style={selectTooltipStyles(themeTokens)}>
-                <Text style={selectTextStyles(themeTokens)}>{content}</Text>
-              </View>
+              ref={arrowRef}
+            />
+            <View style={selectTooltipStyles(themeTokens)}>
+              <Text style={selectTextStyles(themeTokens)}>{content}</Text>
             </View>
-          </Backdrop>
+          </View>
         )}
       </View>
     )
@@ -266,32 +209,15 @@ 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',
@@ -299,9 +225,6 @@ const staticStyles = StyleSheet.create({
     top: 0,
     left: 0
   },
-  tooltipHidden: {
-    opacity: 0
-  },
   arrow: {
     position: 'absolute'
   }