@telus-uds/components-base 4.0.0-alpha.2 → 4.0.0-beta.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 @@ export 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 @@ export 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 @@ export const useOverlaidPosition = _ref3 => {
       }
       setSourceLayout(null);
       setTargetDimensions(null);
+      hasRemeasuredRef.current = false;
     };
     if (readyToShow) {
       subscription = Dimensions.addEventListener('change', handleDimensionsChange);
@@ -196,36 +225,48 @@ export 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

@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-beta.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-beta.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -129,6 +129,7 @@ export const Autocomplete = React.forwardRef(
       value,
       helpText = '',
       loadingLabel,
+      dropdownPosition = 'bottom',
       tokens,
       ...rest
     },
@@ -180,7 +181,11 @@ export 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
@@ -554,5 +559,9 @@ 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'])
 }

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/Listbox/ListboxOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView } from 'react-native'
 import { Portal } from '../Portal/Portal'
 import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 import { Card } from '../Card/Card'
@@ -69,7 +69,11 @@ const DropdownOverlay = React.forwardRef(
             paddingRight: paddingHorizontal
           }}
         >
-          {children}
+          {Platform.OS !== 'web' ? (
+            <ScrollView style={{ maxHeight }}>{children}</ScrollView>
+          ) : (
+            children
+          )}
         </Card>
       </View>
     )

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { Portal } from '@gorhom/portal'
+import { Portal as GorhomPortal } from '@gorhom/portal'
+import { Portal as LocalPortal } from '../Portal/Portal'
 import { useCopy } from '../utils/useCopy'
 import { copyPropTypes } from '../utils/props/copyPropTypes'
 import { getTokensPropType } from '../utils/props/tokens'
@@ -107,8 +108,13 @@ export const ModalOverlay = React.forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const closeLabel = getCopy('closeButton')
 
+    // On web, use the local Portal (always appends to document.body) to ensure correct
+    // absolute positioning in MFE/iframe contexts. @gorhom/portal may render its host
+    // outside the iframe's document, causing coordinate mismatches when scrolled.
+    const PortalComponent = Platform.OS === 'web' ? LocalPortal : GorhomPortal
+
     return (
-      <Portal>
+      <PortalComponent>
         <View
           ref={containerRef}
           onLayout={onLayout}
@@ -137,7 +143,7 @@ export const ModalOverlay = React.forwardRef(
             {children}
           </Card>
         </View>
-      </Portal>
+      </PortalComponent>
     )
   }
 )

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Portal } from '@gorhom/portal'
 import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
 import { applyTextStyles } from '../ThemeProvider/utils/styles'
@@ -218,27 +217,11 @@ export const MultiSelectFilter = React.forwardRef(
       onCancel()
     }
 
-    const appRootRef = React.useRef(null)
-    const [rootOffsets, setRootOffsets] = React.useState(null)
-
-    React.useEffect(() => {
-      if (rootOffsets) return
-      appRootRef.current?.measureInWindow((x, y) => {
-        // Only set offsets if they are positive
-        // this is because we want to avoid negative offsets that could cause
-        // the dropdown to be positioned incorrectly in some situations
-        if (y > 0) setRootOffsets({ horizontal: x, vertical: y })
-      })
-    }, [isOpen, rootOffsets])
-
     const { align, offsets } = useResponsiveProp({
       xs: { align: { top: 'top', left: 'left' } },
       sm: {
         align: { top: 'bottom', left: 'left' },
-        offsets: {
-          vertical: 4 - (rootOffsets?.vertical || 0),
-          horizontal: -rootOffsets?.horizontal || 0
-        }
+        offsets: { vertical: 4 }
       }
     })
 
@@ -364,14 +347,6 @@ export const MultiSelectFilter = React.forwardRef(
 
     return (
       <>
-        {/* 
-        This View is rendered inside a Portal to determine the application's root position.
-        Capturing it is crucial to determine offsets to position the Modal correctly, preventing
-        misalignment that can occur when the Portal does not render the Modal at the body level.
-        */}
-        <Portal>
-          <View ref={appRootRef} style={styles.appRootRef} />
-        </Portal>
         <ButtonDropdown
           ref={sourceRef}
           key={id}
@@ -460,11 +435,6 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 })
 

package/src/TextInput/TextInputBase.jsx

@@ -256,7 +256,8 @@ export const TextInputBase = React.forwardRef(
 
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text ?? event.target?.value
-      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text
+      // Do NOT use `|| undefined`: empty string is falsy and would break the controlled contract
+      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') ?? '' : text
       if (type === 'card' && filteredText) {
         const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '')
         const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g')

package/src/utils/useOverlaidPosition.js

@@ -54,11 +54,6 @@ function getOverlaidPosition({
   offsets = {},
   align
 }) {
-  // 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 = {}
 
@@ -68,40 +63,44 @@ function getOverlaidPosition({
   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
     })
 
@@ -149,6 +148,34 @@ export const useOverlaidPosition = ({
 
   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(
     ({
       nativeEvent: {
@@ -173,12 +200,14 @@ export const useOverlaidPosition = ({
   const readyToShow = Boolean(isShown && sourceRef.current)
   useEffect(() => {
     const handleDimensionsChange = ({ window }) => {
-      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
@@ -192,6 +221,7 @@ export const useOverlaidPosition = ({
       }
       setSourceLayout(null)
       setTargetDimensions(null)
+      hasRemeasuredRef.current = false
     }
 
     if (readyToShow) {
@@ -202,19 +232,29 @@ export const useOverlaidPosition = ({
     }
 
     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)
 
@@ -222,9 +262,19 @@ export const useOverlaidPosition = ({
       window.removeEventListener('scroll', handleScroll)
       handleScroll.cancel()
     }
-  }, [sourceRef])
+  }, [measureSourceOnWeb])
 
-  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions)
+  // 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({
@@ -234,7 +284,7 @@ export const useOverlaidPosition = ({
         offsets,
         align
       })
-    : {}
+    : { top: 0, left: 0 }
 
   return {
     overlaidPosition,

package/types/A11yInfoProvider.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface A11yInfoProviderProps {
+  children: ReactNode
+}
+
+declare const A11yInfoProvider: ComponentType<A11yInfoProviderProps>
+
+export { A11yInfoProvider }

package/types/A11yText.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react'
+
+export interface A11yTextProps {
+  text: string
+  heading?: boolean
+  role?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const A11yText: ComponentType<A11yTextProps>
+
+export { A11yText }

package/types/ActionCard.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ActionCardProps {
+  icon?: ComponentType<any>
+  title?: string
+  children?: ReactNode
+  href?: string
+  direction?: boolean
+  accessibilityRole?: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  onPress?: () => void
+}
+
+declare const ActionCard: ComponentType<ActionCardProps>
+
+export { ActionCard }

package/types/ActivityIndicator.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react'
+
+export interface ActivityIndicatorProps {
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+declare const ActivityIndicator: ComponentType<ActivityIndicatorProps>
+
+export { ActivityIndicator }

package/types/Autocomplete.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface AutocompleteItem {
+  id: string
+  label: string
+  value?: string
+}
+
+export interface AutocompleteProps {
+  children?: (props: Record<string, any>) => ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  copy?: 'en' | 'fr'
+  items?: AutocompleteItem[]
+  value?: string
+  onChange?: (value: string) => void
+  onSearch?: (value: string) => void
+  onSelect?: (item: AutocompleteItem) => void
+  loading?: boolean
+  loadingMessage?: string
+  emptyText?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Autocomplete: ComponentType<AutocompleteProps>
+
+export { Autocomplete }