@telus-uds/components-base 3.12.2 → 3.14.0

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.11.0",
+    "@telus-uds/system-theme-tokens": "^4.13.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.12.2",
+  "version": "3.14.0",
   "types": "types/index.d.ts"
 }

package/src/BaseProvider/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { PortalProvider } from '@gorhom/portal'
+import { viewports } from '@telus-uds/system-constants'
 import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
@@ -10,7 +11,7 @@ import { HydrationProvider } from './HydrationContext'
 const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
   <HydrationProvider>
     <A11yInfoProvider>
-      <ViewportProvider>
+      <ViewportProvider defaultViewport={themeOptions?.defaultViewport}>
         <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
           <PortalProvider>{children}</PortalProvider>
         </ThemeProvider>
@@ -26,7 +27,8 @@ BaseProvider.propTypes = {
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
-    forceZIndex: PropTypes.bool
+    forceZIndex: PropTypes.bool,
+    defaultViewport: PropTypes.oneOf(viewports.keys)
   })
 }
 

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/Card/Card.jsx

@@ -17,7 +17,7 @@ import {
   responsiveProps,
   hrefAttrsProp
 } from '../utils/props'
-import CardBase from './CardBase'
+import CardBase, { selectStyles } from './CardBase'
 import PressableCardBase from './PressableCardBase'
 import CheckboxButton from '../Checkbox/CheckboxButton'
 import RadioButton from '../Radio/RadioButton'
@@ -186,10 +186,28 @@ const Card = React.forwardRef(
     let mediaIds
 
     if (enableMediaQueryStyleSheet) {
-      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+      const transformedThemeTokens = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          const tokensToTransform = selectionType
+            ? selectStyles({
+                ...viewportTokens,
+                paddingTop: 0,
+                paddingBottom: 0,
+                paddingLeft: 0,
+                paddingRight: 0
+              })
+            : selectStyles(viewportTokens)
+
+          acc[vp] = tokensToTransform
+          return acc
+        },
+        {}
+      )
+
+      const mediaQueryStyleSheet = createMediaQueryStyles(transformedThemeTokens)
 
       const { ids, styles } = StyleSheet.create({
-        card: mediaQueryStyleSheet
+        card: { ...themeTokens[viewport], ...mediaQueryStyleSheet }
       })
       cardStyles = styles.card
       mediaIds = ids.card
@@ -336,6 +354,12 @@ Card.propTypes = {
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
   }),
   /**

package/src/Card/CardBase.jsx

@@ -1,15 +1,117 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, Platform, ImageBackground, StyleSheet } from 'react-native'
+import { View, Platform, ImageBackground, Image, StyleSheet } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
+import backgroundImageStylesMap from './backgroundImageStylesMap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const setBackgroundImage = ({
+  src,
+  alt,
+  backgroundImageResizeMode,
+  backgroundImagePosition,
+  backgroundImageAlign,
+  content,
+  cardStyle
+}) => {
+  const borderRadius = cardStyle?.borderRadius || 0
+  const borderWidth = cardStyle?.borderWidth || 0
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth)
+
+  // For contain mode with position and align, use CSS background properties for web
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
+
+    if (Platform.OS === 'web') {
+      // Create background position based on position and align
+      let backgroundPosition
+
+      switch (positionKey) {
+        case 'top-start':
+          backgroundPosition = 'left top'
+          break
+        case 'top-center':
+          backgroundPosition = 'center top'
+          break
+        case 'top-end':
+          backgroundPosition = 'right top'
+          break
+        case 'bottom-start':
+          backgroundPosition = 'left bottom'
+          break
+        case 'bottom-center':
+          backgroundPosition = 'center bottom'
+          break
+        case 'bottom-end':
+          backgroundPosition = 'right bottom'
+          break
+        case 'left-center':
+          backgroundPosition = 'left center'
+          break
+        case 'right-center':
+          backgroundPosition = 'right center'
+          break
+        default:
+          backgroundPosition = 'center center'
+      }
+
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition,
+        borderRadius: adjustedBorderRadius
+      }
+
+      return (
+        <View
+          style={[staticStyles.imageBackground, backgroundImageStyle]}
+          role="img"
+          aria-label={alt}
+        >
+          {content}
+        </View>
+      )
+    }
+    // For React Native, apply positioning styles with full dimensions
+    const positionStyles = backgroundImageStylesMap[positionKey] || {}
+
+    return (
+      <View style={[staticStyles.containContainer, { borderRadius: adjustedBorderRadius }]}>
+        <Image
+          source={src}
+          resizeMode={backgroundImageResizeMode}
+          style={[staticStyles.containImage, positionStyles]}
+          accessible={true}
+          accessibilityLabel={alt}
+          accessibilityIgnoresInvertColors={true}
+        />
+        <View style={staticStyles.contentOverlay}>{content}</View>
+      </View>
+    )
+  }
+
+  // Use ImageBackground for all other resize modes and React Native
+  return (
+    <ImageBackground
+      source={src}
+      imageStyle={{ borderRadius: adjustedBorderRadius }}
+      resizeMode={backgroundImageResizeMode}
+      style={staticStyles.imageBackground}
+      accessible={true}
+      accessibilityLabel={alt}
+    >
+      {content}
+    </ImageBackground>
+  )
+}
+
 // Ensure explicit selection of tokens
-const selectStyles = ({
+export const selectStyles = ({
   flex,
   backgroundColor,
   borderColor,
@@ -64,34 +166,72 @@ const CardBase = React.forwardRef(
     const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
     const props = selectProps(rest)
 
-    const { src = '', alt = '', resizeMode = '' } = backgroundImage || {}
+    let content = children
+
+    const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const backgroundImagePosition = useResponsiveProp(position)
+    const backgroundImageAlign = useResponsiveProp(align)
     const imageSourceViewport = formatImageSource(useResponsiveProp(src))
 
+    if (backgroundImage && src) {
+      // When there's a background image, separate the padding from the container style
+      // so the image can fill the entire container without padding interference
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+
+      // Only create padding wrapper if there's actually padding defined
+      const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
+      const paddedContent = hasPadding ? (
+        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+      ) : (
+        children
+      )
+
+      content = setBackgroundImage({
+        src: imageSourceViewport,
+        alt,
+        backgroundImageResizeMode,
+        backgroundImagePosition,
+        backgroundImageAlign,
+        content: paddedContent,
+        cardStyle: containerStyle
+      })
+
+      return (
+        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+          {content}
+        </View>
+      )
+    }
+
     return (
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
-        {src ? (
-          <ImageBackground
-            source={imageSourceViewport}
-            imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
-            resizeMode={backgroundImageResizeMode}
-            style={styles.imageBackground}
-            accessible={true}
-            accessibilityLabel={alt}
-          >
-            {children}
-          </ImageBackground>
-        ) : (
-          children
-        )}
+        {content}
       </View>
     )
   }
 )
 CardBase.displayName = 'CardBase'
 
-const styles = StyleSheet.create({
-  imageBackground: { width: '100%', height: '100%' }
+const staticStyles = StyleSheet.create({
+  imageBackground: { width: '100%', height: '100%' },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
+  },
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  containImage: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  }
 })
 
 CardBase.propTypes = {
@@ -108,6 +248,12 @@ CardBase.propTypes = {
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
   })
 }

package/src/Card/PressableCardBase.jsx

@@ -80,6 +80,7 @@ const PressableCardBase = React.forwardRef(
       href,
       hrefAttrs,
       dataSet,
+      backgroundImage,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -158,10 +159,13 @@ const PressableCardBase = React.forwardRef(
               setFocused(false)
               setPressed(false)
             }}
-            style={{ ...staticStyles.container, textDecoration: 'none' }}
+            style={staticStyles.linkContainer}
             {...(hrefAttrs || {})}
           >
-            <CardBase tokens={getCardTokens({ pressed, focused, hovered })}>
+            <CardBase
+              tokens={getCardTokens({ pressed, focused, hovered })}
+              backgroundImage={backgroundImage}
+            >
               {typeof children === 'function'
                 ? children(getCardState({ pressed, focused, hovered }))
                 : children}
@@ -183,7 +187,7 @@ const PressableCardBase = React.forwardRef(
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
-          <CardBase tokens={getCardTokens(pressableState)}>
+          <CardBase tokens={getCardTokens(pressableState)} backgroundImage={backgroundImage}>
             {typeof children === 'function' ? children(getCardState(pressableState)) : children}
           </CardBase>
         )}
@@ -196,6 +200,11 @@ const staticStyles = StyleSheet.create({
   container: {
     flex: 1,
     display: 'flex'
+  },
+  linkContainer: {
+    flex: 1,
+    display: 'flex',
+    textDecoration: 'none'
   }
 })
 
@@ -205,7 +214,25 @@ PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, { partial: true, allowFunction: true }),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  backgroundImage: PropTypes.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: PropTypes.oneOfType([
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']),
+      PropTypes.object
+    ]),
+    position: PropTypes.oneOfType([
+      PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+      PropTypes.object
+    ]),
+    align: PropTypes.oneOfType([
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch']),
+      PropTypes.object
+    ])
+  })
 }
 
 export default withLinkRouter(PressableCardBase)

package/src/Card/backgroundImageStylesMap.js

@@ -0,0 +1,41 @@
+import { Platform } from 'react-native'
+
+const webStyles = {
+  'top-start': { top: 0, left: 0 },
+  'top-center': { top: 0, left: '50%', transform: [{ translateX: '-50%' }] },
+  'top-end': { top: 0, right: 0 },
+  'right-start': { top: 0, right: 0 },
+  'left-start': { top: 0, left: 0 },
+  'left-center': { top: '50%', left: 0, transform: [{ translateY: '-50%' }] },
+  'right-center': { top: '50%', right: 0, transform: [{ translateY: '-50%' }] },
+  'bottom-start': { bottom: 0, left: 0 },
+  'left-end': { bottom: 0, left: 0 },
+  'bottom-center': { bottom: 0, left: '50%', transform: [{ translateX: '-50%' }] },
+  'bottom-end': { bottom: 0, right: 0 },
+  'right-end': { bottom: 0, right: 0 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
+}
+
+const nativeStyles = {
+  'top-start': { top: 0, left: 0, width: 150, height: 200 },
+  'top-center': { top: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'top-end': { top: 0, right: 0, width: 150, height: 200 },
+  'right-start': { top: 0, right: 0, width: 150, height: 200 },
+  'left-start': { top: 0, left: 0, width: 150, height: 200 },
+  'left-center': { left: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'right-center': { right: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'bottom-start': { bottom: 0, left: 0, width: 150, height: 200 },
+  'left-end': { bottom: 0, left: 0, width: 150, height: 200 },
+  'bottom-center': { bottom: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'bottom-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'right-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
+}
+
+export default Platform.OS === 'web' ? webStyles : nativeStyles

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