@telus-uds/components-base 1.24.1 → 1.24.2

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 05 Jan 2023 03:41:27 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Jan 2023 21:35:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.24.2
+
+Thu, 19 Jan 2023 21:35:52 GMT
+
+### Patches
+
+- Tooltip implementation is separated into web and native for a fix on smaller screen size (akshay.pandey@telus.com)
+- fix: remove direct font weight application (ruslan.bredikhin@nearform.com)
+- fix: switch the order of the styling rules on the inline pressable (ruslan.bredikhin@nearform.com)
+- Fix missing passthrough of accessibilityRole in taggable container components (alan.slater@nearform.com)
+
 ## 1.24.1
 
-Thu, 05 Jan 2023 03:41:27 GMT
+Thu, 05 Jan 2023 03:43:21 GMT
 
 ### Patches
 

package/lib/Box/Box.js

@@ -146,7 +146,9 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const props = {
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);

package/lib/Divider/Divider.js

@@ -93,7 +93,10 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const a11y = _Platform.default.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/lib/FlexGrid/FlexGrid.js

@@ -86,7 +86,9 @@ const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
   }
 
-  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const props = {
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {

package/lib/Link/InlinePressable.js

@@ -27,6 +27,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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
@@ -34,12 +36,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
+    inlineFlex = true,
     style,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -48,7 +51,11 @@ InlinePressable.displayName = 'InlinePressable';
 
 const staticStyles = _StyleSheet.default.create({
   inline: {
+    // Stop Pressable defaulting to (block) flex
     display: 'inline'
+  },
+  inlineFlex: {
+    display: 'inline-flex'
   }
 });
 

package/lib/Link/LinkBase.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
 
-const selectOuterBorderStyles = (_ref, hasIcon) => {
+const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -55,11 +55,7 @@ const selectOuterBorderStyles = (_ref, hasIcon) => {
         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
-
+      })
     } : {}
   );
 };
@@ -198,12 +194,14 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...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];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);

package/lib/StackView/StackView.js

@@ -89,7 +89,9 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
-  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   });
   const content = (0, _getStackedContent.default)(children, {

package/lib/StackView/StackWrapBox.js

@@ -73,7 +73,9 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
 

package/lib/StackView/StackWrapGap.js

@@ -58,7 +58,9 @@ const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...rest
   });
   const size = (0, _utils.useSpacingScale)(space);

package/lib/ThemeProvider/utils/styles.js

@@ -59,9 +59,7 @@ function applyTextStyles(_ref) {
     // 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 = "".concat(fontName).concat(fontWeight).concat(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.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;

package/lib/Tooltip/Tooltip.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
@@ -19,16 +17,14 @@ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Te
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _shared = _interopRequireDefault(require("./shared"));
+
+var _floatingUi = require("../utils/floating-ui");
 
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _Backdrop = _interopRequireDefault(require("./Backdrop"));
-
-var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
-
 var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
 
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
@@ -75,20 +71,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,
@@ -96,56 +92,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'
+    }],
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
-    ...directionalStyles[position]
+    left: arrowX != null && arrowX,
+    top: arrowY != null && arrowY,
+    right: '',
+    bottom: '',
+    [staticSide]: '-4px'
   };
 };
 
@@ -183,41 +154,50 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const controlRef = (0, _react.useRef)();
-  const [controlLayout, setControlLayout] = (0, _react.useState)(null);
+  const arrowRef = (0, _react.useRef)();
   const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
-  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
-  const [tooltipPosition, setTooltipPosition] = (0, _react.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' ? _floatingUi.autoPlacement : _floatingUi.flip;
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement,
+    middlewareData: {
+      arrow: arrowData = {}
+    }
+  } = (0, _floatingUi.useFloating)({
+    placement: positions[position],
+    middleware: [(0, _floatingUi.shift)(), additionalMiddleware(), (0, _floatingUi.offset)(15), (0, _floatingUi.arrow)({
+      element: arrowRef
+    })]
+  });
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
     copy
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
-  const {
-    arrowWidth,
-    arrowOffset
-  } = themeTokens;
-  (0, _react.useEffect)(() => {
-    const subscription = _Dimensions.default.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,
@@ -225,7 +205,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     };
   };
 
-  const onTooltipLayout = _ref9 => {
+  const onTooltipLayout = _ref8 => {
     let {
       nativeEvent: {
         layout: {
@@ -233,7 +213,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref8;
 
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
@@ -248,43 +228,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   };
 
   (0, _react.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]);
-  (0, _react.useEffect)(() => {
-    setIsOpen(false);
-  }, [windowDimensions]);
-  (0, _react.useEffect)(() => {
-    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
-      return;
-    }
-
-    const updatedPosition = (0, _getTooltipPosition.default)(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.default.select({
     web: {
@@ -300,69 +247,52 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
     ...selectProps(rest),
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       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__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
-      onPress: close,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        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__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectTooltipStyles(themeTokens),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            style: selectTextStyles(themeTokens),
-            children: content
-          })
-        })]
-      })
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      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__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.arrow, selectMobileArrowStyles(themeTokens, { ...arrowData,
+          placement
+        })],
+        ref: arrowRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectTooltipStyles(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          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.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * The message. Can be raw text or text components.
-   */
-  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-
-  /**
-   * Select English or French copy for the accessible label.
-   */
-  copy: _propTypes.default.oneOf(['en', 'fr']),
-
-  /**
-   * Use to place the tooltip in a specific location (only if it fits within viewport).
-   */
-  position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
-  tokens: (0, _utils.getTokensPropType)('Tooltip'),
-  variant: _utils.variantProp.propType
+  ..._shared.default
 };
 var _default = Tooltip;
 exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    position: 'absolute'
   },
   tooltip: {
     position: 'absolute',
@@ -370,9 +300,6 @@ const staticStyles = _StyleSheet.default.create({
     top: 0,
     left: 0
   },
-  tooltipHidden: {
-    opacity: 0
-  },
   arrow: {
     position: 'absolute'
   }