@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/src/Checkbox/CheckboxGroup.jsx

@@ -1,22 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useMultipleInputValues,
-  variantProp,
-  viewProps
-} from '../utils'
-import { getStackedContent } from '../StackView'
-import Checkbox from './Checkbox'
-import Fieldset from '../Fieldset'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { getStackedContent } from '../StackView/getStackedContent'
+import { Checkbox } from './Checkbox'
+import { Fieldset } from '../Fieldset/Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -72,7 +69,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const CheckboxGroup = React.forwardRef(
+export const CheckboxGroup = React.forwardRef(
   (
     {
       tokens,
@@ -218,7 +215,7 @@ CheckboxGroup.propTypes = {
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,
-      ref: ABBPropTypes.ref(),
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
       inactive: PropTypes.bool,
       description: PropTypes.string
     })
@@ -275,5 +272,3 @@ CheckboxGroup.propTypes = {
    */
   name: PropTypes.string
 }
-
-export default CheckboxGroup

package/src/Checkbox/CheckboxInput.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 /**
  * On Web we need to include an actual input but hide it.
  */
-const CheckboxInput = React.forwardRef(
+export const CheckboxInput = React.forwardRef(
   (
     {
       checked,
@@ -54,5 +54,3 @@ CheckboxInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string
 }
-
-export default CheckboxInput

package/src/Checkbox/CheckboxInput.native.jsx

@@ -1,6 +1,4 @@
 /**
  * There's no checkbox input on native platforms, so this is a noop.
  */
-const CheckboxInput = () => null
-
-export default CheckboxInput
+export const CheckboxInput = () => null

package/src/CheckboxCard/CheckboxCard.jsx

@@ -2,21 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  selectTokens,
-  useInputValue,
-  useUniqueId,
-  variantProp,
-  viewProps
-} from '../utils'
-import { PressableCardBase, selectPressableCardTokens } from '../Card'
-import StackView from '../StackView'
-import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useInputValue } from '../utils/input'
+import { useUniqueId } from '../utils/useUniqueId'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { PressableCardBase, selectPressableCardTokens } from '../Card/PressableCardBase'
+import { StackView } from '../StackView/StackView'
+import { CheckboxButton, selectCheckboxTokens } from '../Checkbox/CheckboxButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -24,7 +23,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const CheckboxCard = React.forwardRef(
+export const CheckboxCard = React.forwardRef(
   (
     {
       tokens,
@@ -181,8 +180,6 @@ CheckboxCard.propTypes = {
   variant: variantProp.propType
 }
 
-export default CheckboxCard
-
 const staticStyles = StyleSheet.create({
   alignWithText: {
     justifyContent: 'center'

package/src/CheckboxCardGroup/CheckboxCardGroup.jsx

@@ -1,21 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useMultipleInputValues,
-  variantProp,
-  viewProps
-} from '../utils'
-import StackView, { StackWrap } from '../StackView'
-import CheckboxCard from '../CheckboxCard'
-import Fieldset from '../Fieldset'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { StackView } from '../StackView/StackView'
+import { StackWrap } from '../StackView/StackWrap'
+import { CheckboxCard } from '../CheckboxCard/CheckboxCard'
+import { Fieldset } from '../Fieldset/Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -24,7 +23,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const CheckboxCardGroup = React.forwardRef(
+export const CheckboxCardGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -227,5 +226,3 @@ CheckboxCardGroup.propTypes = {
    */
   name: PropTypes.string
 }
-
-export default CheckboxCardGroup

package/src/ColourToggle/ColourBubble.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 
 import { View, Pressable, Platform } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
-import { applyShadowToken } from '../ThemeProvider'
-import { getTokensPropType } from '../utils'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+import { getTokensPropType } from '../utils/props/tokens'
+import { Tooltip } from '../Tooltip/Tooltip.native'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -51,15 +52,15 @@ const selectBorderBubbleTokens = ({
   borderRadius: bubbleBorderRadius
 })
 
-const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+export const ColourBubble = React.forwardRef(
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
     const defaultTokens = tokens({ selected: isSelected })
 
     const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
 
     const themeTokens = React.useMemo(() => tokens(), [tokens])
 
-    return (
+    const pressable = (
       <Pressable
         style={(state) => [
           selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
@@ -76,6 +77,16 @@ const ColourBubble = React.forwardRef(
         <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
       </Pressable>
     )
+
+    if (showTooltip) {
+      return (
+        <Tooltip content={colourName} activateOnHover>
+          {pressable}
+        </Tooltip>
+      )
+    }
+
+    return pressable
   }
 )
 ColourBubble.displayName = 'ColourBubble'
@@ -106,7 +117,9 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: PropTypes.bool
 }
-
-export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -2,16 +2,20 @@ import React from 'react'
 import { View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import { StackWrap } from '../StackView'
-import Typography from '../Typography'
-import ColourBubble from './ColourBubble'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { StackWrap } from '../StackView/StackWrap'
+import { Typography } from '../Typography/Typography'
+import { ColourBubble } from './ColourBubble'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+export const ColourToggle = React.forwardRef(
+  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
     const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
 
@@ -40,6 +44,7 @@ const ColourToggle = React.forwardRef(
                 colourHexCode={colourHexCode}
                 colourName={colourName}
                 onPress={handleChangeColour}
+                showTooltip={showTooltips}
               />
             )
           })}
@@ -77,7 +82,9 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: PropTypes.bool
 }
-
-export default ColourToggle

package/src/Divider/Divider.jsx

@@ -1,16 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { useThemeTokens } from '../ThemeProvider'
-import Spacer from '../Spacer'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  spacingProps,
-  variantProp,
-  viewProps
-} from '../utils'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Spacer } from '../Spacer/Spacer'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { spacingProps } from '../utils/props/spacingProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -55,47 +53,49 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = React.forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
-  const { color, width } = useThemeTokens('Divider', tokens, variant)
+export const Divider = React.forwardRef(
+  ({ variant, vertical = false, space, tokens, ...rest }, ref) => {
+    const { color, width } = useThemeTokens('Divider', tokens, variant)
 
-  const borderStyles = vertical
-    ? {
-        borderRightColor: color,
-        borderRightWidth: width
-      }
-    : {
-        borderBottomColor: color,
-        borderBottomWidth: width
-      }
-
-  const a11y =
-    Platform.OS === 'web'
-      ? // There are aria attributes for dividers on web
-        {
-          // Early versions of React Native Web support 'aria-orientation' while
-          // later versions only support accessibilityOrientation and map it. Supply both.
-          'aria-orientation': vertical ? 'vertical' : 'horizontal',
-          accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
-          accessibilityRole: 'separator'
+    const borderStyles = vertical
+      ? {
+          borderRightColor: color,
+          borderRightWidth: width
+        }
+      : {
+          borderBottomColor: color,
+          borderBottomWidth: width
         }
-      : // There are no such equivalent attributes for native
-        {}
 
-  const { testID, ...selectedProps } = selectProps({ ...a11y, ...rest })
+    const a11y =
+      Platform.OS === 'web'
+        ? // There are aria attributes for dividers on web
+          {
+            // Early versions of React Native Web support 'aria-orientation' while
+            // later versions only support accessibilityOrientation and map it. Supply both.
+            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+            accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
+            accessibilityRole: 'separator'
+          }
+        : // There are no such equivalent attributes for native
+          {}
 
-  const divider = (
-    <View ref={ref} style={[styles.divider, borderStyles]} testID={testID} {...selectedProps} />
-  )
-  if (!space) return divider
-  const spacerProps = { space, direction: vertical ? 'row' : 'column' }
-  return (
-    <>
-      <Spacer {...spacerProps} testID={testID ? `${testID}-Spacer-before` : undefined} />
-      {divider}
-      <Spacer {...spacerProps} testID={testID ? `${testID}-Spacer-after` : undefined} />
-    </>
-  )
-})
+    const { testID, ...selectedProps } = selectProps({ ...a11y, ...rest })
+
+    const divider = (
+      <View ref={ref} style={[styles.divider, borderStyles]} testID={testID} {...selectedProps} />
+    )
+    if (!space) return divider
+    const spacerProps = { space, direction: vertical ? 'row' : 'column' }
+    return (
+      <>
+        <Spacer {...spacerProps} testID={testID ? `${testID}-Spacer-before` : undefined} />
+        {divider}
+        <Spacer {...spacerProps} testID={testID ? `${testID}-Spacer-after` : undefined} />
+      </>
+    )
+  }
+)
 Divider.displayName = 'Divider'
 
 Divider.propTypes = {
@@ -118,5 +118,3 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch'
   }
 })
-
-export default Divider

package/src/DownloadApp/DownloadApp.jsx

@@ -1,20 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, StyleSheet } from 'react-native'
-import {
-  a11yProps,
-  linkProps,
-  hrefAttrsProp,
-  viewProps,
-  getTokensPropType,
-  resolvePressableTokens,
-  variantProp,
-  copyPropTypes,
-  selectSystemProps,
-  useCopy
-} from '../utils'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import defaultDictionary from './dictionary'
+import { a11yProps } from '../utils/props/a11yProps'
+import { linkProps } from '../utils/props/linkProps'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { viewProps } from '../utils/props/viewProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { resolvePressableTokens } from '../utils/pressability'
+import { variantProp } from '../utils/props/variantProp'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useCopy } from '../utils/useCopy'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
@@ -27,7 +25,7 @@ const selectOuterStyles = ({ borderColor, borderWidth, borderGap, borderRadius,
   padding
 })
 
-const DownloadApp = React.forwardRef(
+export const DownloadApp = React.forwardRef(
   (
     {
       copy = 'en',
@@ -161,5 +159,3 @@ const staticImageSizes = {
     }
   }
 }
-
-export default DownloadApp

package/src/DownloadApp/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     altTextAndroid: 'Get it on Google Play',
     altTextIos: 'Download on the App Store'

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -2,17 +2,15 @@ import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  useMultipleInputValues,
-  variantProp,
-  viewProps,
-  contentfulProps,
-  useUniqueId
-} from '../utils'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { useUniqueId } from '../utils/useUniqueId'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -33,10 +31,10 @@ const selectWrapperStyles = ({ borderWidth, borderTopWidth, borderStyle, borderC
  * Flexible base component for lists where some or all items are collapsible headers.
  *
  * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
- * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
+ * <ExpandCollapsePanel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = React.forwardRef(
+export const ExpandCollapse = React.forwardRef(
   ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, dataSet, ...rest }, ref) => {
     const instanceId = useUniqueId('ExpandCollapse')
 
@@ -74,7 +72,7 @@ ExpandCollapse.propTypes = {
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
-   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
+   * onToggle (function) will usually be passed to `<ExpandCollapsePanel>`
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   /**
@@ -96,8 +94,6 @@ ExpandCollapse.propTypes = {
   initialOpen: PropTypes.arrayOf(PropTypes.string)
 }
 
-export default ExpandCollapse
-
 const staticStyles = StyleSheet.create({
   container: {
     display: 'flex'

package/src/ExpandCollapse/ExpandCollapseAccordion.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ExpandCollapse } from './ExpandCollapse'
+
+/**
+ * 'ExpandCollapseAccordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
+ */
+export const ExpandCollapseAccordion = React.forwardRef((props, ref) => (
+  <ExpandCollapse ref={ref} {...props} maxOpen={1} />
+))
+ExpandCollapseAccordion.displayName = 'ExpandCollapseAccordion'
+ExpandCollapseAccordion.propTypes = ExpandCollapse.propTypes

package/src/ExpandCollapse/{Control.jsx → ExpandCollapseControl.jsx}

@@ -2,8 +2,13 @@ import React from 'react'
 import { Pressable, View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { verticalAlignRow } from '../ThemeProvider/utils/styles'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -54,10 +59,11 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
-function selectTextContainerStyles({ textLine }) {
+function selectTextContainerStyles({ textLine, controlAlign }) {
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && { alignItems: controlAlign })
   }
 }
 
@@ -68,9 +74,18 @@ function selectIconTokens(tokens) {
   }
 }
 
-const ExpandCollapseControl = React.forwardRef(
+export const ExpandCollapseControl = React.forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      controlAlign,
+      accessibilityRole = 'button',
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
@@ -110,7 +125,13 @@ const ExpandCollapseControl = React.forwardRef(
                 </View>
               )}
               <View
-                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                style={[
+                  selectTextContainerStyles({
+                    ...themeTokens,
+                    ...(controlAlign && { controlAlign })
+                  }),
+                  staticStyles.bubblePointerEvents
+                ]}
               >
                 {typeof children === 'function'
                   ? children(getControlState(pressableState))
@@ -144,10 +165,12 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */
   onPress: PropTypes.func.isRequired
 }
-
-export default ExpandCollapseControl