@telus-uds/components-base 1.34.0 → 1.34.2

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { Portal } from '@gorhom/portal';
-import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils';
+import { selectTokens, useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
 import dictionary from './dictionary';
@@ -11,14 +11,12 @@ import Card from '../Card';
 import IconButton from '../IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     height: 330,
-    paddingTop: 5,
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
 
   },
@@ -27,6 +25,11 @@ const staticStyles = StyleSheet.create({
     top: 0,
     right: 0,
     zIndex: 1
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
   }
 });
 
@@ -58,8 +61,11 @@ const selectPaddingContainerStyles = _ref2 => {
 const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     children,
-    tokens,
+    isReady = false,
+    overlaidPosition,
+    onLayout,
     variant,
+    tokens,
     copy,
     onClose
   } = _ref3;
@@ -77,26 +83,25 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Portal, {
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(View, {
       ref: ref,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [{
-          minWidth: maxWidth
-        }, staticStyles.positioner],
-        children: /*#__PURE__*/_jsxs(Card, {
-          tokens: selectPaddingContainerStyles(themeTokens),
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onPress: onClose,
-              icon: CloseIconComponent,
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              tokens: selectTokens('IconButton', themeTokens, 'close')
-            })
-          }), children]
-        })
+      onLayout: onLayout,
+      style: [overlaidPosition, {
+        minWidth: maxWidth
+      }, staticStyles.positioner, !isReady && staticStyles.hidden],
+      children: /*#__PURE__*/_jsxs(Card, {
+        tokens: selectPaddingContainerStyles(themeTokens),
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onPress: onClose,
+            icon: CloseIconComponent,
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel,
+            tokens: selectTokens('IconButton', themeTokens, 'close')
+          })
+        }), children]
       })
     })
   });
@@ -104,6 +109,13 @@ const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
 ModalOverlay.displayName = 'ModalOverlay';
 ModalOverlay.propTypes = {
   children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  onLayout: PropTypes.func,
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
 import dictionary from './dictionary';
 import Box from '../Box';
 import { Button, ButtonDropdown } from '../Button';
@@ -45,7 +45,7 @@ const selectDividerToknes = _ref2 => {
   };
 };
 
-const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const MultiSelectFilter = _ref3 => {
   let {
     label,
     subtitle,
@@ -109,9 +109,41 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
     setIsOpen(false);
   };
 
+  const {
+    align,
+    offsets
+  } = useResponsiveProp({
+    xs: {
+      align: {
+        top: 'top',
+        left: 'left',
+        bottom: 'bottom',
+        right: 'right'
+      }
+    },
+    sm: {
+      align: {
+        top: 'bottom',
+        left: 'left'
+      },
+      offsets: {
+        vertical: 4
+      }
+    }
+  });
+  const {
+    overlaidPosition,
+    onTargetLayout,
+    isReady,
+    sourceRef
+  } = useOverlaidPosition({
+    isShown: isOpen,
+    offsets,
+    align
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: ref,
+      ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
       selected: isSelected,
@@ -120,10 +152,15 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
       tokens: getButtonTokens,
       inactive: inactive
     }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
+      overlaidPosition: overlaidPosition,
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
       onClose: () => setIsOpen(false),
+      tokens: tokens,
+      copy: copy,
+      isReady: isReady,
+      onLayout: onTargetLayout,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           variant: {
@@ -189,7 +226,8 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
       })]
     })]
   });
-});
+};
+
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 MultiSelectFilter.propTypes = {
   /**

package/lib-module/Tabs/TabsItem.js

@@ -31,8 +31,8 @@ const selectHighlightBarStyles = _ref => {
     borderRadius: highlightBarBorderRadius,
     borderWidth: highlightBarBorderWidth,
     bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-    left: -1 * highlightBarBorderWidth,
-    right: -1 * highlightBarBorderWidth,
+    left: 0,
+    right: 0,
     zIndex: 1 + highlightBarBorderWidth
   };
 };

package/lib-module/utils/index.js

@@ -9,6 +9,7 @@ export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';
 export { default as useSpacingScale } from './useSpacingScale';
 export { default as useResponsiveProp } from './useResponsiveProp';
+export { default as useOverlaidPosition } from './useOverlaidPosition';
 export { default as useSafeLayoutEffect } from './useSafeLayoutEffect';
 export { default as useScrollBlocking } from './useScrollBlocking';
 export * from './useResponsiveProp';

package/lib-module/utils/useOverlaidPosition.js

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (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 getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  useEffect(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        // React Native <0.65.0
+        Dimensions.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: Dimensions.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+export default useOverlaidPosition;

package/package.json

@@ -11,7 +11,7 @@
     "@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.18.0",
+    "@telus-uds/system-theme-tokens": "^2.19.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.34.0"
+  "version": "1.34.2"
 }

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native-web'
+import { View, StyleSheet } from 'react-native'
 import { Portal } from '@gorhom/portal'
-import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils'
+import { selectTokens, useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import dictionary from './dictionary'
@@ -15,7 +15,6 @@ const staticStyles = StyleSheet.create({
     flex: 1, // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     height: 330,
-    paddingTop: 5,
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
   },
   closeButtonContainer: {
@@ -23,6 +22,11 @@ const staticStyles = StyleSheet.create({
     top: 0,
     right: 0,
     zIndex: 1
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
   }
 })
 
@@ -38,19 +42,31 @@ const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight })
   paddingRight
 })
 
-const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+const ModalOverlay = forwardRef(
+  (
+    { children, isReady = false, overlaidPosition, onLayout, variant, tokens, copy, onClose },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
 
-  const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
+    const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
 
-  const getCopy = useCopy({ dictionary, copy })
-  const closeLabel = getCopy('closeButton')
+    const getCopy = useCopy({ dictionary, copy })
+    const closeLabel = getCopy('closeButton')
 
-  return (
-    <>
-      <Portal ref={ref}>
-        <View style={[{ minWidth: maxWidth }, staticStyles.positioner]}>
+    return (
+      <Portal>
+        <View
+          ref={ref}
+          onLayout={onLayout}
+          style={[
+            overlaidPosition,
+            { minWidth: maxWidth },
+            staticStyles.positioner,
+            !isReady && staticStyles.hidden
+          ]}
+        >
           <Card tokens={selectPaddingContainerStyles(themeTokens)}>
             <View
               style={[
@@ -70,13 +86,20 @@ const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, r
           </Card>
         </View>
       </Portal>
-    </>
-  )
-})
+    )
+  }
+)
 ModalOverlay.displayName = 'ModalOverlay'
 
 ModalOverlay.propTypes = {
   children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  onLayout: PropTypes.func,
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,