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

package/src/Link/Link.jsx

@@ -1,10 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { LinkBase } from './LinkBase'
+import { iconComponentPropTypes } from '../Icon/Icon'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { linkProps as linkPropTypes } from '../utils/props/linkProps'
+import { viewProps } from '../utils/props/viewProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import LinkBase from './LinkBase'
+// eslint-disable-next-line no-unused-vars
+const [_, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  linkPropTypes,
+  viewProps,
+  contentfulProps
+])
 
-const Link = React.forwardRef(
+export const Link = React.forwardRef(
   (
     { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
     ref
@@ -27,11 +43,40 @@ const Link = React.forwardRef(
 Link.displayName = 'Link'
 
 Link.propTypes = {
-  ...LinkBase.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccessibilityRole for the link base
+   */
+  accessibilityRole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  variant: variantProp.propType,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * On Web if href is passed, React Native Web maps this object's props to
+   * `rel`, `target` and `download` attrs.
+   */
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: PropTypes.object
 }
-
-export default Link

package/src/Link/LinkBase.jsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
-import {
-  a11yProps,
-  clickProps,
-  getTokensPropType,
-  hrefAttrsProp,
-  linkProps,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  contentfulProps
-} from '../utils/props'
+import { a11yProps } from '../utils/props/a11yProps'
+import { clickProps } from '../utils/props/clickProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
 import { resolvePressableTokens } from '../utils/pressability'
-import { withLinkRouter } from '../utils'
-
-import InlinePressable from './InlinePressable'
-import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
-import { IconText, iconComponentPropTypes } from '../Icon'
+import { MobileIconTextContent } from './MobileIconTextContent'
+import { InlinePressable } from './InlinePressable'
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { iconComponentPropTypes } from '../Icon/Icon'
+import { IconText } from '../Icon/IconText'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -122,7 +122,7 @@ const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX, icon
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = React.forwardRef(
+const LinkBaseInner = React.forwardRef(
   (
     {
       href,
@@ -133,6 +133,7 @@ const LinkBase = React.forwardRef(
       tokens = {},
       children,
       dataSet,
+      useMeasuredMobileIconLayout = false,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -171,12 +172,14 @@ const LinkBase = React.forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
-          const mobileCompensation = null
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
 
           return [
             outerBorderStyles,
-            mobileCompensation,
+            shouldUseMeasuredMobileContent
+              ? staticStyles.measuredMobileOuterBorderCompensation
+              : null,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -196,28 +199,50 @@ const LinkBase = React.forwardRef(
 
           const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link'
           const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
+          const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline
+
+          const linkTextContent = (
+            <Text
+              style={[
+                textStyles,
+                blockTextStyles,
+                textBaselineStyle,
+                staticStyles.bubblePointerEvents
+              ]}
+            >
+              {typeof children === 'function' ? children(linkState) : children}
+            </Text>
+          )
+
+          const sharedIconProps = {
+            ...iconProps,
+            tokens: iconTokens,
+            style: staticStyles.bubblePointerEvents
+          }
+
+          if (shouldUseMeasuredMobileContent) {
+            return (
+              <MobileIconTextContent
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={adjustedIconSpace}
+                iconProps={sharedIconProps}
+              >
+                {linkTextContent}
+              </MobileIconTextContent>
+            )
+          }
 
           return (
             <IconText
               icon={IconComponent}
               iconPosition={iconPosition}
               space={adjustedIconSpace}
-              iconProps={{
-                ...iconProps,
-                tokens: iconTokens,
-                style: staticStyles.bubblePointerEvents
-              }}
+              iconProps={sharedIconProps}
             >
-              <Text
-                style={[
-                  textStyles,
-                  blockTextStyles,
-                  staticStyles.baseline,
-                  staticStyles.bubblePointerEvents
-                ]}
-              >
-                {typeof children === 'function' ? children(linkState) : children}
-              </Text>
+              {linkTextContent}
             </IconText>
           )
         }}
@@ -225,9 +250,9 @@ const LinkBase = React.forwardRef(
     )
   }
 )
-LinkBase.displayName = 'LinkBase'
+LinkBaseInner.displayName = 'LinkBase'
 
-LinkBase.propTypes = {
+LinkBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
   /**
@@ -235,9 +260,9 @@ LinkBase.propTypes = {
    */
   href: PropTypes.string,
   /**
-   * AccesibilityRole for the link base
+   * AccessibilityRole for the link base
    */
-  accessibilityrole: PropTypes.string,
+  accessibilityRole: PropTypes.string,
   /**
    * Children nodes that can be added
    */
@@ -280,13 +305,14 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 })
 
-export default withLinkRouter(LinkBase)
+export const LinkBase = withLinkRouter(LinkBaseInner)

package/src/Link/MobileIconTextContent.jsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text, View, StyleSheet } from 'react-native'
+
+import { Icon, iconComponentPropTypes } from '../Icon/Icon'
+import { spacingProps } from '../utils/props/spacingProps'
+
+export const MobileIconTextContent = React.forwardRef(
+  ({ space = 0, iconPosition = 'left', icon: IconComponent, iconProps = {}, children }, ref) => {
+    const [translateY, setTranslateY] = React.useState(0)
+    const latestTranslateYRef = React.useRef(0)
+    const layoutsRef = React.useRef({
+      container: null,
+      text: null,
+      icon: null
+    })
+
+    const applyAlignment = React.useCallback(() => {
+      const { container, text, icon } = layoutsRef.current
+
+      if (!container || !icon || !icon.height) return
+
+      const targetY = text ? text.y + text.height / 2 : container.height / 2
+      const iconY = icon.y + icon.height / 2
+      const nextTranslateY = Math.round((targetY - iconY) * 100) / 100
+
+      if (!Number.isFinite(nextTranslateY)) return
+      if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return
+
+      latestTranslateYRef.current = nextTranslateY
+      setTranslateY(nextTranslateY)
+    }, [])
+
+    const handleContainerLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.container = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleTextLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.text = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleIconLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.icon = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const iconContent = IconComponent ? (
+      <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
+    ) : null
+
+    const iconWrapper = IconComponent ? (
+      <View
+        onLayout={handleIconLayout}
+        style={[staticStyles.iconContainer, { transform: [{ translateY }] }]}
+      >
+        {iconContent}
+      </View>
+    ) : null
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text onLayout={handleContainerLayout}>
+          <Text onLayout={handleTextLayout}>{children}</Text>{' '}
+          <View style={staticStyles.inlineIconContainer}>{iconWrapper}</View>
+        </Text>
+      )
+    }
+
+    const iconSpaceStyle = iconPosition === 'left' ? { marginRight: space } : { marginLeft: space }
+
+    return (
+      <View onLayout={handleContainerLayout} style={staticStyles.rowContainer}>
+        {iconPosition === 'left' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+        <View onLayout={handleTextLayout}>{children}</View>
+        {iconPosition === 'right' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+      </View>
+    )
+  }
+)
+
+MobileIconTextContent.displayName = 'MobileIconTextContent'
+
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+}
+
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+})

package/src/Link/TextButton.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import LinkBase from './LinkBase'
-import { variantProp } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { LinkBase } from './LinkBase'
+import { variantProp } from '../utils/props/variantProp'
 
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = React.forwardRef(
+export const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
@@ -38,5 +38,3 @@ TextButton.propTypes = {
   /** Accesibility role for TextButton */
   accessibilityRole: PropTypes.string
 }
-
-export default TextButton

package/src/List/List.jsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+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])
 
@@ -27,7 +31,7 @@ const isListItem = (element) => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = React.forwardRef(
+export const List = React.forwardRef(
   (
     {
       children,
@@ -98,9 +102,7 @@ List.propTypes = {
   showDivider: PropTypes.bool,
   /**
    * The vertical alignment of the icon in ListItems.
-   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   * This prop is passed down to ListItem components and can be overridden in individual ListItem components.
    */
   iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom'])
 }
-
-export default List

package/src/List/ListItem.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ListItemBase from './ListItemBase'
-import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { ListItemBase } from './ListItemBase'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = React.forwardRef(
+export const ListItem = React.forwardRef(
   ({ tokens, variant, children, title, iconVerticalAlign = 'top', ...listItemProps }, ref) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
     return (
@@ -43,5 +44,3 @@ ListItem.propTypes = {
   /** Size of the icon */
   iconSize: PropTypes.number
 }
-
-export default ListItem

package/src/List/ListItemBase.jsx

@@ -1,11 +1,15 @@
 import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import ListItemContent from './ListItemContent'
-import ListItemMark from './ListItemMark'
-import Typography from '../Typography'
-import { useThemeTokens } from '../ThemeProvider'
+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 { ListItemContent } from './ListItemContent'
+import { ListItemMark } from './ListItemMark'
+import { Typography } from '../Typography/Typography'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -39,7 +43,7 @@ const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
   return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR
 }
 
-const ListItemBase = React.forwardRef(
+export const ListItemBase = React.forwardRef(
   (
     {
       tokens,
@@ -166,5 +170,3 @@ ListItemBase.propTypes = {
    */
   showDivider: PropTypes.bool
 }
-
-export default ListItemBase

package/src/List/ListItemContent.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View, StyleSheet } from 'react-native'
-import { wrapStringsInText } from '../utils'
-import { useTheme, applyTextStyles } from '../ThemeProvider'
+import { wrapStringsInText } from '../utils/children'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
 
 export const tokenTypes = {
   itemFontWeight: PropTypes.string.isRequired,
@@ -34,7 +35,7 @@ const selectItemTextStyles = (
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = React.forwardRef(({ tokens, children }, ref) => {
+export const ListItemContent = React.forwardRef(({ tokens, children }, ref) => {
   const { themeOptions } = useTheme()
   const textStyles = selectItemTextStyles(tokens, themeOptions)
   return (
@@ -66,5 +67,3 @@ ListItemContent.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,
   children: PropTypes.node.isRequired
 }
-
-export default ListItemContent

package/src/List/ListItemMark.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-import Icon from '../Icon'
-import { useVariants } from '../utils'
+import { Icon } from '../Icon/Icon'
+import { useVariants } from '../utils/useVariants'
 
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
@@ -35,7 +35,7 @@ const getIconColorVariants = (iconVariants) =>
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
+export const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
   const containerStyles = selectContainerStyles(themeTokens)
 
@@ -99,5 +99,3 @@ ListItemMark.propTypes = {
    */
   iconSize: PropTypes.number
 }
-
-export default ListItemMark

package/src/List/PressableListItemBase.jsx

@@ -1,21 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 
 import { Pressable, StyleSheet, Platform } from 'react-native'
 
-import {
-  resolvePressableTokens,
-  clickProps,
-  linkProps,
-  hrefAttrsProp,
-  selectTokens,
-  withLinkRouter
-} from '../utils'
+import { resolvePressableTokens } from '../utils/pressability'
+import { clickProps } from '../utils/props/clickProps'
+import { linkProps } from '../utils/props/linkProps'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { selectTokens } from '../utils/props/tokens'
+import { withLinkRouter } from '../utils/withLinkRouter'
 
-import ListItemBase from './ListItemBase'
-import ListItemContent from './ListItemContent'
-import ListItemMark from './ListItemMark'
+import { ListItemBase } from './ListItemBase'
+import { ListItemContent } from './ListItemContent'
+import { ListItemMark } from './ListItemMark'
 
 const selectPressableStyles = ({
   backgroundColor,
@@ -36,7 +33,7 @@ const selectPressableStyles = ({
   ...Platform.select({ web: { outline: 'none' } })
 })
 
-const PressableListItemBase = React.forwardRef(
+const PressableListItemBaseInner = React.forwardRef(
   ({ href, tokens, icon, children, listItemRef, ...rest }, ref) => {
     const { onPress, ...props } = clickProps.toPressProps(rest)
     const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)
@@ -80,8 +77,7 @@ const PressableListItemBase = React.forwardRef(
   }
 )
 
-PressableListItemBase.displayName = 'PressableListItemBase'
-PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'
+PressableListItemBaseInner.displayName = 'PressableListItemBase'
 
 const staticStyles = StyleSheet.create({
   itemContainer: {
@@ -90,7 +86,7 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-PressableListItemBase.propTypes = {
+PressableListItemBaseInner.propTypes = {
   ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
@@ -98,7 +94,8 @@ PressableListItemBase.propTypes = {
   tokens: PropTypes.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  listItemRef: ABBPropTypes.ref()
+  listItemRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])
 }
 
-export default withLinkRouter(PressableListItemBase)
+export const PressableListItemBase = withLinkRouter(PressableListItemBaseInner)
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'

package/src/Listbox/GroupControl.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
-import { useThemeTokens } from '../ThemeProvider'
-import Icon from '../Icon'
-import Spacer from '../Spacer'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Icon } from '../Icon/Icon'
+import { Spacer } from '../Spacer/Spacer'
 import { useListboxContext } from './ListboxContext'
-import { variantProp } from '../utils'
+import { variantProp } from '../utils/props/variantProp'
 
 const styles = StyleSheet.create({
   container: {
@@ -48,7 +48,7 @@ const selectContainerStyles = (tokens) => ({
   borderBottomColor: tokens.groupBorderBottomColor
 })
 
-const GroupControl = React.forwardRef(
+export const GroupControl = React.forwardRef(
   ({ expanded, pressed, hover, focus, label, id, variant = {} }, ref) => {
     const { selectedId, setSelectedId } = useListboxContext()
     const isSecondLevel = variant?.secondLevel === true
@@ -99,5 +99,3 @@ GroupControl.propTypes = {
   label: PropTypes.string,
   variant: variantProp.propType
 }
-
-export default GroupControl