@telus-uds/components-base 1.59.2 → 1.61.0

package/src/Progress/ProgressBarBackground.jsx

@@ -3,8 +3,8 @@ import { ImageBackground, StyleSheet } from 'react-native'
 
 import { variantProp } from '../utils'
 
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`
 const ProgressBarBackground = forwardRef(({ variant }, ref) => {
   let source = null
   if (variant?.inactive) {

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,17 +128,25 @@ 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
+  variant: variantProp.propType,
+  /**
+   * Accesibility Role
+   */
+  accessibilityRole: PropTypes.string,
+  /**
+   * test ID
+   */
+  testID: PropTypes.number
 }
 
 export default Item

package/src/Tags/Tags.jsx

@@ -249,7 +249,11 @@ Tags.propTypes = {
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: PropTypes.string
 }
 
 export default Tags

package/src/TextInput/TextInputBase.jsx

@@ -341,6 +341,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

@@ -82,7 +82,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
     const arrowRef = useRef()
 
@@ -157,7 +160,18 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+        ref={ref}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={reference}

package/src/Tooltip/Tooltip.native.jsx

@@ -108,7 +108,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -217,7 +220,17 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}

package/src/Tooltip/shared.js

@@ -20,6 +20,10 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: PropTypes.bool,
   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)