@telus-uds/components-base 3.30.0 → 3.32.0

package/lib/esm/utils/useOverlaidPosition.js

@@ -54,46 +54,45 @@ function getOverlaidPosition(_ref2) {
     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 = {};
   const verticalOffset = offsets.vertical ?? 0;
   const horizontalOffset = offsets.horizontal ?? 0;
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
-    fromEdge: sourceLayout.y + scrollY + verticalOffset,
+    fromEdge: sourceLayout.y + verticalOffset,
     sourceSize: sourceLayout.height
   });
   if (align.middle) positioning.top = getPosition({
     edge: getEdgeType(align, 'middle'),
-    fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
-    sourceSize: sourceLayout.height
-  });
-  if (align.bottom) positioning.bottom = getPosition({
-    edge: getEdgeType(align, 'bottom'),
-    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
+    fromEdge: sourceLayout.y + verticalOffset - targetDimensions.height / 2,
     sourceSize: sourceLayout.height
   });
+  if (align.bottom) {
+    if (Platform.OS !== 'web') {
+      // On native, position:absolute is parent-relative, so use negative top offset instead of window-based bottom math.
+      positioning.top = sourceLayout.y - targetDimensions.height - verticalOffset;
+    } else {
+      positioning.bottom = getPosition({
+        edge: getEdgeType(align, 'bottom'),
+        fromEdge: windowDimensions.height - (sourceLayout.y + sourceLayout.height - verticalOffset),
+        sourceSize: sourceLayout.height
+      });
+    }
+  }
   if (align.left) positioning.left = getPosition({
     edge: getEdgeType(align, 'left'),
-    fromEdge: sourceLayout.x + scrollX + horizontalOffset,
+    fromEdge: sourceLayout.x + horizontalOffset,
     sourceSize: sourceLayout.width
   });
   if (align.center) positioning.left = getPosition({
     edge: getEdgeType(align, 'center'),
-    fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
+    fromEdge: sourceLayout.x + horizontalOffset - targetDimensions.width / 2,
     sourceSize: sourceLayout.width
   });
   if (align.right) positioning.right = getPosition({
     edge: getEdgeType(align, 'right'),
-    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
+    fromEdge: windowDimensions.width - (sourceLayout.x + sourceLayout.width - horizontalOffset),
     sourceSize: sourceLayout.width
   });
   if (!(align.left && align.right)) {
@@ -134,6 +133,32 @@ const useOverlaidPosition = _ref3 => {
   const targetRef = useRef(null);
   const [targetDimensions, setTargetDimensions] = useState(null);
   const [windowDimensions, setWindowDimensions] = useState(null);
+  const hasRemeasuredRef = useRef(false);
+  const applySourceLayout = useCallback((dims, x, y, width, height) => {
+    setWindowDimensions(dims);
+    setSourceLayout({
+      x,
+      y,
+      width,
+      height
+    });
+  }, []);
+  const measureSourceOnWeb = useCallback(windowDims => {
+    const el = sourceRef.current;
+    if (!el) return;
+    const domNode = el._nativeTag ?? el;
+    const dims = windowDims ?? Dimensions.get('window');
+    const rect = typeof domNode.getBoundingClientRect === 'function' ? domNode.getBoundingClientRect() : null;
+    if (rect) {
+      const x = rect.left + (typeof window.scrollX === 'number' ? window.scrollX : 0);
+      const y = rect.top + (typeof window.scrollY === 'number' ? window.scrollY : 0);
+      applySourceLayout(dims, x, y, rect.width, rect.height);
+    } else {
+      el.measureInWindow((mx, my, width, height) => {
+        applySourceLayout(dims, mx, my, width, height);
+      });
+    }
+  }, [applySourceLayout]);
   const onTargetLayout = useCallback(_ref4 => {
     let {
       nativeEvent: {
@@ -164,16 +189,19 @@ const useOverlaidPosition = _ref3 => {
       let {
         window
       } = _ref5;
-      const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure';
-      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
-        setWindowDimensions(window);
-        setSourceLayout({
-          x,
-          y,
-          width,
-          height
+      if (Platform.OS === 'web') {
+        measureSourceOnWeb(window);
+      } else {
+        sourceRef.current?.measure((x, y, width, height) => {
+          setWindowDimensions(window);
+          setSourceLayout({
+            x,
+            y,
+            width,
+            height
+          });
         });
-      });
+      }
     };
     let subscription;
     const unsubscribe = () => {
@@ -186,6 +214,7 @@ const useOverlaidPosition = _ref3 => {
       }
       setSourceLayout(null);
       setTargetDimensions(null);
+      hasRemeasuredRef.current = false;
     };
     if (readyToShow) {
       subscription = Dimensions.addEventListener('change', handleDimensionsChange);
@@ -196,36 +225,48 @@ const useOverlaidPosition = _ref3 => {
       unsubscribe();
     }
     return unsubscribe;
-  }, [readyToShow]);
+  }, [readyToShow, measureSourceOnWeb]);
+
+  // Re-measure source when targetDimensions first becomes available.
+  // Without this, there is a race condition: getBoundingClientRect() resolves faster than
+  // measureInWindow used to, so sourceLayout may be set before the dropdown has rendered
+  // and reported its dimensions via onTargetLayout. When targetDimensions finally arrives,
+  // sourceLayout is stale (no scroll has occurred to trigger handleScroll).
+  // Setting hasRemeasuredRef.current=true here also prevents the blink: isReady (on web)
+  // won't become true until this effect completes, guaranteeing the dropdown is always shown
+  // at its final correct position without an intermediate incorrect-position frame.
+  useEffect(() => {
+    if (!isShown || !sourceRef.current || !targetDimensions || Platform.OS !== 'web') return;
+    measureSourceOnWeb();
+    hasRemeasuredRef.current = true;
+  }, [targetDimensions, isShown, measureSourceOnWeb]);
   useEffect(() => {
     if (Platform.OS !== 'web') {
       return undefined;
     }
-    const handleScroll = debounce(() => {
-      sourceRef.current?.measureInWindow((x, y, width, height) => {
-        setWindowDimensions(window);
-        setSourceLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    }, DEBOUNCE_DELAY);
+    const handleScroll = debounce(measureSourceOnWeb, DEBOUNCE_DELAY);
     window.addEventListener('scroll', handleScroll);
     return () => {
       window.removeEventListener('scroll', handleScroll);
       handleScroll.cancel();
     };
-  }, [sourceRef]);
-  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  }, [measureSourceOnWeb]);
+
+  // On web, require hasRemeasuredRef to be true before declaring isReady. This ensures
+  // the dropdown is never shown with an intermediate stale position (the blink).
+  // On native, hasRemeasuredRef stays false (the web-only effect never runs), so we skip
+  // that check to preserve the original native behaviour.
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions && (Platform.OS !== 'web' || hasRemeasuredRef.current));
   const overlaidPosition = isReady ? getOverlaidPosition({
     sourceLayout,
     targetDimensions,
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.21.0",
+    "@telus-uds/system-theme-tokens": "^4.22.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.30.0",
+  "version": "3.32.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.21.0",
+    "@telus-uds/system-theme-tokens": "^4.22.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.30.0",
+  "version": "3.32.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -131,6 +131,7 @@ const Autocomplete = React.forwardRef(
       value,
       helpText = '',
       loadingLabel,
+      dropdownPosition = 'bottom',
       tokens,
       ...rest
     },
@@ -182,7 +183,11 @@ const Autocomplete = React.forwardRef(
       isShown: isExpanded || hintExpansionEnabled,
       offsets: {
         vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
-      }
+      },
+      align:
+        dropdownPosition === 'top'
+          ? { center: 'center', bottom: 'top' }
+          : { center: 'center', top: 'bottom' }
     })
     const targetRef = React.useRef(null)
     // We limit the number of suggestions displayed to avoid huge lists
@@ -556,7 +561,11 @@ Autocomplete.propTypes = {
   /**
    * Input value for controlled usage
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+  /**
+   * Controls whether the dropdown renders above or below the input. Defaults to 'bottom'.
+   */
+  dropdownPosition: PropTypes.oneOf(['top', 'bottom'])
 }
 
 export default Autocomplete

package/src/Autocomplete/constants.js

@@ -1,5 +1,5 @@
 export const DEFAULT_MIN_TO_SUGGESTION = 1
 export const DEFAULT_MAX_SUGGESTIONS = 5
-export const DEFAULT_MAX_DROPDOWN_HEIGHT = 336 // Approximately 7 items (48px each)
+export const DEFAULT_MAX_DROPDOWN_HEIGHT = 500
 export const INPUT_LEFT_PADDING = 16
 export const MIN_LISTBOX_WIDTH = 288

package/src/Button/ButtonGroup.jsx

@@ -28,6 +28,8 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   pressProps,
   viewProps
 ])
+const EQUAL_WIDTH = 'equal'
+const RESPONSIVE_WIDTH = 'responsive'
 
 const ButtonGroup = React.forwardRef(
   (
@@ -70,6 +72,9 @@ const ButtonGroup = React.forwardRef(
     const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
     const gapValue = useSpacingScale(gap || space)
 
+    const isWeb = Platform.OS === 'web'
+    const buttonWidthVariant = variant?.width
+
     const getButtonTokens = useCallback(
       (state) => {
         const themeButtonTokens = themeButtonTokensCallback(state)
@@ -77,36 +82,93 @@ const ButtonGroup = React.forwardRef(
         const shouldUseTransparentBackground =
           isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus
 
+        let widthStyle
+
+        switch (buttonWidthVariant) {
+          case EQUAL_WIDTH:
+            widthStyle = staticStyles.equalWidth
+            break
+          case RESPONSIVE_WIDTH:
+            widthStyle = staticStyles.responsiveWidth
+            break
+          // no default
+        }
+
         return {
           ...themeButtonTokens,
-          ...(variant?.width === 'equal' && staticStyles.equalWidth),
+          ...widthStyle,
           ...(shouldUseTransparentBackground && { backgroundColor: 'transparent' }),
           alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
         }
       },
-      [themeButtonTokensCallback, isMobileNonContained, variant?.width]
+      [themeButtonTokensCallback, isMobileNonContained, buttonWidthVariant]
     )
 
-    const fieldsetStyles = useMemo(
-      () => ({
-        ...staticStyles.fieldsetBase,
+    const fieldsetStyles = useMemo(() => {
+      let fieldSetBase
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          fieldSetBase = staticStyles.fieldSetResponsive
+          break
+        default:
+          fieldSetBase = staticStyles.fieldsetBase
+          break
+      }
+
+      return {
+        ...fieldSetBase,
         borderRadius,
         backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
-        padding,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      }),
-      [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]
-    )
+        padding
+      }
+    }, [borderRadius, backgroundColor, padding, isMobileNonContained, buttonWidthVariant])
 
-    const viewStyles = useMemo(
-      () => ({
-        ...staticStyles.viewBase,
+    const buttonsContainerStyles = useMemo(() => {
+      let flexWrap
+      if (isWeb) {
+        flexWrap = 'wrap'
+      } else {
+        switch (buttonWidthVariant) {
+          case EQUAL_WIDTH:
+          case RESPONSIVE_WIDTH:
+            flexWrap = 'nowrap'
+            break
+          default:
+            flexWrap = 'wrap'
+            break
+        }
+      }
+
+      let justifyContent
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+          justifyContent = 'space-evenly'
+          break
+        default:
+          justifyContent = 'flex-start'
+          break
+      }
+
+      let viewBaseStyle
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          viewBaseStyle = {}
+          break
+        default:
+          viewBaseStyle = staticStyles.viewBase
+          break
+      }
+
+      return {
+        ...viewBaseStyle,
+        flexWrap,
         flexDirection: direction === 'column' ? 'column' : 'row',
         gap: gapValue || 0,
-        justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
-      }),
-      [direction, gapValue, variant?.width]
-    )
+        justifyContent
+      }
+    }, [direction, gapValue, buttonWidthVariant, isWeb])
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,
@@ -128,7 +190,7 @@ const ButtonGroup = React.forwardRef(
     }
 
     // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-    const innerRole =
+    const buttonsWrapperRole =
       Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined
 
     return (
@@ -149,7 +211,7 @@ const ButtonGroup = React.forwardRef(
         style={fieldsetStyles}
         {...selectProps(rest)}
       >
-        <View accessibilityRole={innerRole} style={viewStyles}>
+        <View accessibilityRole={buttonsWrapperRole} style={buttonsContainerStyles}>
           {items.map(
             (
               {
@@ -329,17 +391,24 @@ ButtonGroup.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  },
+  responsiveWidth: {
+    width: 'auto'
+  },
   fieldsetBase: {
     alignSelf: 'flex-start',
-    display: 'inline'
+    display: 'inline',
+    width: 'auto'
+  },
+  fieldSetResponsive: {
+    width: '100%'
   },
   viewBase: {
     flexWrap: 'wrap',
     alignItems: 'center'
-  },
-  equalWidth: {
-    width: '100%',
-    flex: 1
   }
 })