@telus-uds/components-base 1.24.0 → 1.24.2

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;

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.0"
+  "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/Feedback/Feedback.jsx

@@ -56,14 +56,10 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * All accessibility props set on this component will be applied to the outer container.
  */
 const Feedback = forwardRef(
-  (
-    { title, children, id, validation, tokens, variant, showFeedbackIcon = false, ...rest },
-    ref
-  ) => {
+  ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,
-      validation,
-      icon: showFeedbackIcon
+      validation
     })
     const { space } = themeTokens
 
@@ -121,8 +117,7 @@ Feedback.propTypes = {
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType,
-  showFeedbackIcon: PropTypes.bool
+  variant: variantProp.propType
 }
 
 export default Feedback

package/src/Fieldset/Fieldset.jsx

@@ -59,7 +59,7 @@ const Fieldset = forwardRef(
         id={feedbackId}
         title={feedback}
         validation={validation}
-        showFeedbackIcon={showIcon}
+        variant={{ icon: showIcon }}
       />
     )
 

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/List/ListItem.jsx

@@ -1,16 +1,18 @@
 import React, { forwardRef } from 'react'
 
 import ListItemBase from './ListItemBase'
+import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(({ tokens, variant, children, ...listItemProps }, ref) => {
+const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
     <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
+      {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
       {children}
     </ListItemBase>
   )

package/src/Radio/RadioGroup.jsx

@@ -155,8 +155,8 @@ const RadioGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        showIcon
         showErrorBorder
+        showIcon
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >

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