@telus-uds/components-base 1.60.0 → 1.62.0

package/src/SideNav/Item.jsx

@@ -111,12 +111,12 @@ Item.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -128,25 +128,19 @@ Item.propTypes = {
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType,
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: PropTypes.string,
-  /**
-   * test ID
-   */
-  testID: PropTypes.number
+  testID: PropTypes.number,
+  tokens: getTokensPropType('SideNavItem'),
+  variant: variantProp.propType
 }
 
 export default Item

package/src/TextInput/TextInputBase.jsx

@@ -253,7 +253,8 @@ const TextInputBase = forwardRef(
           icon={!showPassword ? passwordShowButtonIcon : passwordHideButtonIcon}
           key={!showPassword ? 'hide' : 'show'}
           onPress={handleShowOrHide}
-          variant={{ compact: true, password: true, inactive: !!variant.inactive }}
+          variant={{ compact: true, password: true, inactive: variant.inactive, size: 'large' }}
+          tokens={{ width: 40, height: 40 }}
         />
       )
     }
@@ -341,6 +342,8 @@ export default TextInputBase
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,

package/src/Tooltip/Tooltip.jsx

@@ -83,7 +83,17 @@ const defaultControl = (pressableState, variant) => (
  */
 const Tooltip = forwardRef(
   (
-    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -118,7 +128,10 @@ const Tooltip = forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({

package/src/Tooltip/Tooltip.native.jsx

@@ -109,7 +109,17 @@ const defaultControl = (pressableState, variant) => (
  */
 const Tooltip = forwardRef(
   (
-    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -133,7 +143,10 @@ const Tooltip = forwardRef(
       return () => subscription?.remove()
     })
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({

package/src/Tooltip/shared.js

@@ -24,6 +24,10 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: PropTypes.bool,
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: PropTypes.func,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/index.js

@@ -1,10 +1,11 @@
 export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
+export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export * from './Carousel'
-export * from './Listbox'
+export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'

package/src/utils/useOverlaidPosition.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset)
@@ -169,8 +169,9 @@ const useOverlaidPosition = ({
   const readyToShow = Boolean(isShown && sourceRef.current)
   useEffect(() => {
     const handleDimensionsChange = ({ window }) => {
-      sourceRef.current?.measureInWindow((x, y, width, height) => {
-        // Could add a debouncer here if there's too many rerenders during gradual resizes
+      const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure'
+
+      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window)
         setSourceLayout({ x, y, width, height })
       })
@@ -181,9 +182,9 @@ const useOverlaidPosition = ({
       if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove()
-      } else if (typeof Dimensions.removeEventListener === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        Dimensions.removeEventListener('change', handleDimensionsChange)
+        Dimensions.remove('change', handleDimensionsChange)
       }
       setSourceLayout(null)
       setTargetDimensions(null)