@telus-uds/components-base 3.12.2 → 3.13.0

package/src/Button/ButtonDropdown.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import ButtonBase from './ButtonBase'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -13,9 +13,10 @@ import {
   useInputValue
 } from '../utils'
 import Icon from '../Icon'
-import { getStackedContent } from '../StackView'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const FULL_WIDTH_STYLE = 'full'
+
 const selectIconTokens = ({
   icon,
   iconPosition,
@@ -50,6 +51,44 @@ const selectIconTokens = ({
   }
 })
 
+const selectDescriptionTextStyles = (tokens) => ({
+  ...applyTextStyles({
+    fontName: tokens?.descriptionFontName,
+    fontSize: tokens?.descriptionFontSize,
+    fontWeight: tokens?.descriptionFontWeight,
+    fontColor: tokens?.color
+  }),
+  paddingBottom: tokens?.descriptionTextPaddingBottom
+})
+
+const selectLeadIconTokens = (tokens) => ({
+  color: tokens?.leadIconColor,
+  backgroundColor: tokens?.leadIconBackgroundColor,
+  size: tokens?.leadIconSize,
+  borderRadius: tokens?.leadIconBorderRadius,
+  padding: tokens?.leadIconPadding
+})
+
+const selectLeadIconContainerStyles = (tokens) => ({
+  paddingTop: tokens?.leadIconContainerPaddingTop,
+  paddingBottom: tokens?.leadIconContainerPaddingBottom,
+  paddingLeft: tokens?.leadIconContainerPaddingLeft,
+  paddingRight: tokens?.leadIconContainerPaddingRight
+})
+
+const selectTextContainerStyles = (tokens) => ({
+  paddingLeft: tokens?.textPaddingLeft,
+  paddingRight: tokens?.textPaddingRight
+})
+
+const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
+  ...staticStyles.stackedContent,
+  gap: tokens?.iconSpace,
+  flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
+  ...(Platform.OS === 'web' && { flex: 1 }),
+  ...(isFullWidth && { justifyContent: 'space-between', flex: 1 })
+})
+
 const ButtonDropdown = React.forwardRef(
   (
     {
@@ -63,10 +102,14 @@ const ButtonDropdown = React.forwardRef(
       readOnly = false,
       children = null,
       accessibilityRole = 'radio',
+      description,
+      singleOption,
       ...props
     },
     ref
   ) => {
+    const isFullWidth = variant?.width === FULL_WIDTH_STYLE
+
     const { currentValue: isOpen, setValue: setIsOpen } = useInputValue(
       {
         value,
@@ -85,7 +128,11 @@ const ButtonDropdown = React.forwardRef(
 
     const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => ({
+      ...selectTokens('Button', getTokens(buttonState)),
+      iconSpace: props?.icon ? getTokens(buttonState)?.iconSpace : 0,
+      ...(isFullWidth && { width: 'full' })
+    })
 
     // Pass an object of relevant component state as first argument for any passed-in press handlers
     const pressHandlers = getPressHandlersWithArgs(props, [{ label, open: isOpen }])
@@ -103,7 +150,7 @@ const ButtonDropdown = React.forwardRef(
         {...pressHandlers}
         onPress={handlePress}
         tokens={getButtonTokens}
-        inactive={inactive}
+        inactive={singleOption || inactive}
         icon={() => null}
         accessibilityRole={accessibilityRole}
         {...props}
@@ -116,31 +163,50 @@ const ButtonDropdown = React.forwardRef(
           // - Token sets: https://github.com/telus/universal-design-system/issues/782
 
           const itemTokens = getTokens(buttonState)
+          const leadIcon = itemTokens?.leadIcon
 
           const {
             iconTokens,
             iconPosition,
-            iconSpace,
             iconWrapperStyle,
             icon: IconComponent
           } = selectIconTokens(itemTokens)
 
-          const iconContent = IconComponent ? (
-            <View style={iconWrapperStyle}>
-              <Icon icon={IconComponent} tokens={iconTokens} />
-            </View>
-          ) : null
+          const iconContent =
+            IconComponent && !singleOption ? (
+              <View style={iconWrapperStyle}>
+                <Icon icon={IconComponent} tokens={iconTokens} />
+              </View>
+            ) : null
 
           const childrenContent = () =>
             typeof children === 'function'
               ? children({ ...resolvePressableState(buttonState, extraState), textStyles })
               : children
 
-          const content = children ? childrenContent() : <Text style={textStyles}>{label}</Text>
+          const content = children ? (
+            childrenContent()
+          ) : (
+            <View style={staticStyles.contentContainer}>
+              {leadIcon && (
+                <View style={selectLeadIconContainerStyles(itemTokens)}>
+                  <Icon icon={leadIcon} tokens={selectLeadIconTokens(itemTokens)} />
+                </View>
+              )}
+              <View style={[staticStyles.textContainer, selectTextContainerStyles(itemTokens)]}>
+                <Text style={textStyles}>{label}</Text>
+                {description && (
+                  <Text style={selectDescriptionTextStyles(itemTokens)}>{description}</Text>
+                )}
+              </View>
+            </View>
+          )
 
-          return getStackedContent(
-            iconPosition === 'left' ? [iconContent, content] : [content, iconContent],
-            { space: iconSpace, direction: 'row' }
+          return (
+            <View style={selectStackedContentStyles(itemTokens, iconPosition, isFullWidth)}>
+              {iconContent}
+              {content}
+            </View>
           )
         }}
       </ButtonBase>
@@ -176,7 +242,34 @@ ButtonDropdown.propTypes = {
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  /**
+   * The description of ButtonDropdown.
+   */
+  description: PropTypes.string,
+  /**
+   * Use this prop to render the ButtonDropdown as display only without any interaction when there is only one option.
+   */
+  singleOption: PropTypes.bool
 }
 
+const staticStyles = StyleSheet.create({
+  textContainer: {
+    alignItems: 'flex-start',
+    flexShrink: 1,
+    ...(Platform.OS === 'web' && { flex: 1 })
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    ...(Platform.OS === 'web' && { flex: 1 }),
+    flexShrink: 1
+  },
+  stackedContent: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+})
+
 export default ButtonDropdown

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -10,7 +10,8 @@ import {
   useMultipleInputValues,
   variantProp,
   viewProps,
-  contentfulProps
+  contentfulProps,
+  useUniqueId
 } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
@@ -36,6 +37,8 @@ function selectBorderStyles(tokens) {
  */
 const ExpandCollapse = React.forwardRef(
   ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, dataSet, ...rest }, ref) => {
+    const instanceId = useUniqueId('ExpandCollapse')
+
     const {
       currentValues: openIds,
       toggleOneValue: onToggle,
@@ -54,7 +57,7 @@ const ExpandCollapse = React.forwardRef(
       <View style={staticStyles.container} ref={ref} {...selectProps(rest)} dataSet={dataSet}>
         <View style={selectBorderStyles(themeTokens)}>
           {typeof children === 'function'
-            ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
+            ? children({ openIds, onToggle, resetValues, setValues, unsetValues, instanceId })
             : children}
         </View>
       </View>

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ExpandCollapse from '../ExpandCollapse'
-import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils'
+import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils'
 import { variantProp } from '../utils/props'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
@@ -12,7 +12,7 @@ const ExpandCollapseMini = React.forwardRef(
     { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
     ref
   ) => {
-    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
+    const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
     const handleChange = (openPanels, event) => {
       if (typeof onToggle === 'function') {
         const isOpen = openPanels.length > 0

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -42,10 +42,15 @@ const ExpandCollapseMiniControl = React.forwardRef(
         pressed
       }
     )
-    const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-      expanded,
-      focus
-    })
+    const { fontSize, lineHeight, iconSize, icon } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      {
+        expanded,
+        focus
+      }
+    )
 
     // Choose hover styles when any part of Control is hoverred
     const appearance = { ...variant, hover }
@@ -54,16 +59,39 @@ const ExpandCollapseMiniControl = React.forwardRef(
       const { hover: linkHover } = linkState || {}
       const isHovered = hover || linkHover
 
+      const iconBaselineOffset = 0
+      const hoverTranslateY = 4
+
+      // Calculate baseline alignment to vertically center icon with text
+      // This combines font and icon metrics with adjustments for visual balance
+      const fontBaseline = fontSize / hoverTranslateY // Quarter of font size - adjusts for text's visual center point
+      const iconBaseline = iconSize / hoverTranslateY // Quarter of icon size - adjusts for icon's visual center point
+      const staticOffset = hoverTranslateY // Fixed downward adjustment to fine-tune vertical alignment
+      const sizeCompensation = -Math.abs(iconSize - fontSize) // Compensates when icon and text sizes differ significantly
+
+      const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation
+
       if (Platform.OS !== 'web') {
-        return { iconTranslateY: -1 }
+        // For native platforms, use baseline alignment with optional offset
+        return { iconTranslateY: baselineAlignment + iconBaselineOffset }
       }
 
       if (isHovered) {
-        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-        return { iconTranslateY: (expanded ? -1 : 1) * size }
+        // Apply animation offset to the baseline-aligned position
+        // When expanded: move icon UP (1.3 the hover distance for clear movement)
+        // When collapsed: move icon DOWN (single hover distance)
+        const hoverMovementDistance = 1.3
+        const animationOffset = expanded
+          ? -(hoverTranslateY * hoverMovementDistance)
+          : hoverTranslateY
+
+        return {
+          iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
+        }
       }
 
-      return {}
+      // Default state uses baseline alignment with optional offset
+      return { iconTranslateY: baselineAlignment + iconBaselineOffset }
     }
 
     return (
@@ -73,7 +101,9 @@ const ExpandCollapseMiniControl = React.forwardRef(
         iconPosition={iconPosition}
         tokens={(linkState) => ({
           ...linkTokens,
-          ...getTokens(linkState)
+          ...getTokens(linkState),
+          iconSize,
+          blockLineHeight: lineHeight
         })}
         ref={ref}
         {...presentationOnly}

package/src/FlexGrid/FlexGrid.jsx

@@ -10,7 +10,8 @@ import {
   selectSystemProps,
   BaseView,
   StyleSheet,
-  createMediaQueryStyles
+  createMediaQueryStyles,
+  useResponsiveProp
 } from '../utils'
 import Row from './Row'
 import Col from './Col'
@@ -21,6 +22,37 @@ import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const CONTENT_MAX_WIDTH = 'max'
+const CONTENT_FULL_WIDTH = 'full'
+
+/**
+ * Resolves the maximum width for content based on the provided value and responsive width.
+ *
+ * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
+ *        Can be a number (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue) {
+    return null
+  }
+
+  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return '100%'
+  }
+
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue
+  }
+
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth
+  }
+
+  return contentMinWidthValue
+}
+
 /**
  * A mobile-first flexbox grid.
  */
@@ -40,6 +72,7 @@ const FlexGrid = React.forwardRef(
       accessibilityRole,
       children,
       dataSet,
+      contentMinWidth,
       ...rest
     },
     ref
@@ -47,30 +80,36 @@ const FlexGrid = React.forwardRef(
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
     const viewport = useViewport()
     const {
+      themeOptions,
       themeOptions: { enableMediaQueryStyleSheet }
     } = useTheme()
 
     let flexgridStyles
     let mediaIds
 
+    const contentMinWidthValue = useResponsiveProp(contentMinWidth)
+    const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth)
+
     const stylesByViewport = {
       xs: {
+        maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
       sm: {
-        maxWidth: limitWidth && viewports.map.get('sm'),
+        maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
         flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
       },
       md: {
-        maxWidth: limitWidth && viewports.map.get('md'),
+        maxWidth: limitWidth ? viewports.map.get('md') : maxWidth,
         flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
       },
       lg: {
-        maxWidth: limitWidth && viewports.map.get('lg'),
+        maxWidth: limitWidth ? viewports.map.get('lg') : maxWidth,
         flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
       },
       xl: {
-        maxWidth: limitWidth && viewports.map.get('xl'),
+        maxWidth: limitWidth ? viewports.map.get('xl') : maxWidth,
         flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
       }
     }
@@ -162,7 +201,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 }
 
 FlexGrid.Row = Row

package/src/Icon/Icon.jsx

@@ -38,7 +38,9 @@ const Icon = React.forwardRef(
           width: themeTokens.size + themeTokens.width * 2, // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
           height: themeTokens.size + themeTokens.width * 2
         }
-      : {}
+      : {
+          padding: themeTokens.padding
+        }
 
     const getIconContentForMobile = () => {
       if (Object.keys(paddingStyles).length) {

package/src/InputLabel/InputLabel.jsx

@@ -161,7 +161,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/src/InputSupports/InputSupports.jsx

@@ -121,7 +121,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/src/Notification/Notification.jsx

@@ -26,6 +26,8 @@ import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
 
+const CONTENT_MAX_WIDTH = 'max'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
@@ -65,8 +67,14 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   placeContent: 'start'
 })
 
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (
+  themeTokens,
+  maxWidth,
+  system,
+  viewport,
+  useContentMaxWidth
+) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -79,7 +87,8 @@ const getMediaQueryStyles = (
   mediaIdsRef,
   dismissible,
   viewport,
-  system
+  system,
+  useContentMaxWidth
 ) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
@@ -100,7 +109,7 @@ const getMediaQueryStyles = (
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
       acc[vp] = {
-        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
         flexDirection: 'row',
         flexShrink: 1,
         justifyContent: 'space-between',
@@ -169,7 +178,15 @@ const getMediaQueryStyles = (
   }
 }
 
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (
+  themeTokens,
+  themeOptions,
+  maxWidth,
+  dismissible,
+  viewport,
+  system,
+  useContentMaxWidth
+) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +198,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && { alignSelf: 'center' })
     }
   },
@@ -251,7 +268,20 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = React.forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant, onDismiss, ...rest }, ref) => {
+  (
+    {
+      children,
+      system,
+      dismissible,
+      copy = 'en',
+      tokens,
+      variant,
+      onDismiss,
+      contentMinWidth,
+      ...rest
+    },
+    ref
+  ) => {
     const [isDismissed, setIsDismissed] = React.useState(false)
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
@@ -266,6 +296,7 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
+    const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH
     const maxWidth = useResponsiveProp(
       themeOptions?.contentMaxWidth,
       viewports.map.get(viewports.xl)
@@ -300,7 +331,8 @@ const Notification = React.forwardRef(
         mediaIdsRef,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
@@ -309,7 +341,8 @@ const Notification = React.forwardRef(
         maxWidth,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     }
 
@@ -434,6 +467,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: PropTypes.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOf(['max', 'full']),
+    lg: PropTypes.oneOf(['max', 'full']),
+    md: PropTypes.oneOf(['max', 'full']),
+    sm: PropTypes.oneOf(['max', 'full']),
+    xs: PropTypes.oneOf(['max', 'full'])
+  }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 }

package/src/utils/props/inputSupportsProps.js

@@ -38,7 +38,7 @@ export default {
      * 1. `tooltip` as a string - The content of the tooltip.
      * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+    tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */