@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/Typography/Typography.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
@@ -41,7 +41,7 @@ const selectTextStyles = (_ref, themeOptions) => {
 };
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,

package/lib-module/Validator/Validator.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, createRef, useRef, useMemo, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -21,7 +21,7 @@ const selectCodeTextInputTokens = _ref => {
     icon: null
   };
 };
-const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
@@ -30,18 +30,18 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant = {},
     ...rest
   } = _ref2;
-  const defaultRef = useRef();
+  const defaultRef = React.useRef();
   const codeRef = ref ?? defaultRef;
   const {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [individualCodes, setIndividualCodes] = useState({});
-  const [text, setText] = useState(value);
+  const [individualCodes, setIndividualCodes] = React.useState({});
+  const [text, setText] = React.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
-  const [isHover, setIsHover] = useState(false);
+  const [isHover, setIsHover] = React.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
   };
@@ -51,11 +51,11 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = useMemo(() => {
+  const [codeReferences, singleCodes] = React.useMemo(() => {
     const codes = [];
     const valueCodes = {};
     for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      codes[prefix + i] = /*#__PURE__*/createRef();
+      codes[prefix + i] = /*#__PURE__*/React.createRef();
       valueCodes[prefix + i] = '';
       valueCodes[prefix + i + sufixValidation] = '';
     }
@@ -135,13 +135,13 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return components;
   };
-  useEffect(() => {
+  React.useEffect(() => {
     /* eslint-disable no-unused-expressions */
     if (Number(value).toString() !== 'NaN') setText(value);
   }, [value]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => {
+  React.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
       codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
@@ -149,7 +149,7 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }, [text]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => {
+  React.useEffect(() => {
     const handlePasteCode = event => {
       setText('');
       const clipBoardText = event.clipboardData.getData('text');

package/lib-module/ViewportProvider/ViewportProvider.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { ViewportContext } from './useViewport';
@@ -14,7 +14,7 @@ const ViewportProvider = _ref => {
   } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = useState(viewports.keys[0]);
+  const [viewport, setViewport] = React.useState(viewports.keys[0]);
   useViewportListener(setViewport);
   return /*#__PURE__*/_jsx(ViewportContext.Provider, {
     value: viewport,

package/lib-module/index.js

@@ -5,6 +5,7 @@ export { default as Box } from './Box';
 export { default as Badge } from './Badge';
 export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
+export { default as CardGroup } from './CardGroup';
 export * from './Carousel';
 export { default as Listbox } from './Listbox';
 export { default as Checkbox } from './Checkbox';

package/lib-module/utils/BaseView/BaseView.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import NativeView from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
@@ -9,7 +9,7 @@ import { useTheme } from '../../ThemeProvider';
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
+const BaseView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     style,

package/lib-module/utils/children.js

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react';
+import React from 'react';
 import Text from "react-native-web/dist/exports/Text";
 import A11yText from '../A11yText';
 
@@ -38,10 +38,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const unpackFragment = child => {
   var _child$props;
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment);
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
   // When a fragment is found, unpack its children to the top level and check them
-  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
@@ -84,7 +84,7 @@ const wrapChild = (child, wrappedText) => {
  */
 export const wrapStringsInText = function (children) {
   let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const childrenArray = unpackFragment(Children.toArray(children));
+  const childrenArray = unpackFragment(React.Children.toArray(children));
 
   // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>

package/lib-module/utils/withLinkRouter.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import hasOwnProperty from './hasOwnProperty';
 
@@ -17,7 +17,7 @@ import hasOwnProperty from './hasOwnProperty';
  * @example A LinkRouter component to be used with link-like components might look like:
  *
  * ```jsx
- * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ * const LinkLinkRouter = React.forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
  *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
  *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
  * })
@@ -32,7 +32,7 @@ import hasOwnProperty from './hasOwnProperty';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  const wrappedComponent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
       linkRouterProps,

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.54.0",
+    "@telus-uds/system-theme-tokens": "^2.56.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.83.0",
+  "version": "1.85.0",
   "types": "types/index.d.ts"
 }

package/src/A11yInfoProvider/index.jsx

@@ -1,15 +1,15 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { AccessibilityInfo, Platform } from 'react-native'
 
-const ScreenReaderContext = createContext(false)
-const ReducedMotionContext = createContext(false)
+const ScreenReaderContext = React.createContext(false)
+const ReducedMotionContext = React.createContext(false)
 
 const A11yInfoProvider = ({ children }) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
@@ -65,8 +65,8 @@ A11yInfoProvider.propTypes = {
 export default A11yInfoProvider
 
 export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext)
-  const reduceMotionEnabled = useContext(ReducedMotionContext)
+  const screenReaderEnabled = React.useContext(ScreenReaderContext)
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext)
 
   return {
     reduceMotionEnabled,

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -12,7 +12,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
+const A11yText = React.forwardRef(({ text, heading, ...rest }, ref) => {
   const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.

package/src/ActivityIndicator/Spinner.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
 
@@ -21,7 +21,7 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic
   return (

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
@@ -6,7 +6,7 @@ import { useA11yInfo } from '../A11yInfoProvider'
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic

package/src/Autocomplete/Autocomplete.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, Platform, View, StyleSheet } from 'react-native'
 import throttle from 'lodash.throttle'
@@ -83,7 +82,7 @@ const highlight = (items = [], text = '', color) =>
     return [...acc, item]
   }, [])
 
-const Autocomplete = forwardRef(
+const Autocomplete = React.forwardRef(
   (
     {
       children,
@@ -116,22 +115,24 @@ const Autocomplete = forwardRef(
     const isControlled = value !== undefined
 
     // We need to store current items for uncontrolled usage
-    const [currentItems, setCurrentItems] = useState(initialItems)
+    const [currentItems, setCurrentItems] = React.useState(initialItems)
 
-    const [otherItems, setOtherItems] = useState(items)
+    const [otherItems, setOtherItems] = React.useState(items)
 
     // We need to store the current value as well to be able to highlight it
-    const [currentValue, setCurrentValue] = useState(value ?? initialValue)
+    const [currentValue, setCurrentValue] = React.useState(value ?? initialValue)
     const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
 
     // Setting up the overlay
-    const openOverlayRef = useRef()
-    const [isExpanded, setIsExpanded] = useState((value ?? initialValue)?.length >= minToSuggestion)
-    const [isFocused, setisFocused] = useState(false)
-    const [sourceLayout, setSourceLayout] = useState(null)
+    const openOverlayRef = React.useRef()
+    const [isExpanded, setIsExpanded] = React.useState(
+      (value ?? initialValue)?.length >= minToSuggestion
+    )
+    const [isFocused, setisFocused] = React.useState(false)
+    const [sourceLayout, setSourceLayout] = React.useState(null)
 
     // When it's nested, selected value
-    const [nestedSelectedValue, setNestedSelectedValue] = useState(null)
+    const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null)
 
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
@@ -148,7 +149,7 @@ const Autocomplete = forwardRef(
         vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
       }
     })
-    const targetRef = useRef(null)
+    const targetRef = React.useRef(null)
     // We limit the number of suggestions displayed to avoid huge lists
     // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
     // within that height, which will unlock similar behaviour for `AutoComplete` as well
@@ -157,7 +158,7 @@ const Autocomplete = forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
     // Tracking input width changes to resize the listbox overlay accordingly
-    const [inputWidth, setInputWidth] = useState()
+    const [inputWidth, setInputWidth] = React.useState()
     useSafeLayoutEffect(() => {
       if (Platform.OS === 'web') {
         const updateInputWidth = () => {
@@ -227,7 +228,7 @@ const Autocomplete = forwardRef(
      * within the list, if doesn't exist the nested item is added to the top of the list,
      * the nested item is added with an id equal "0"
      */
-    useEffect(() => {
+    React.useEffect(() => {
       if (nestedSelectedValue && !items.find((item) => item.id === 0)) {
         const tmpItems = [...items]
         tmpItems.unshift({ label: nestedSelectedValue, title: true, id: 0 })

package/src/Autocomplete/Loading.jsx

@@ -5,14 +5,17 @@ import Typography from '../Typography'
 import Box from '../Box'
 import StackView from '../StackView'
 
-const Loading = ({ label }) => (
-  <Box space={3}>
+const Loading = React.forwardRef(({ label }, ref) => (
+  <Box space={3} ref={ref}>
     <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
       <ActivityIndicator variant={{ size: 'large' }} />
       <Typography>{label}</Typography>
     </StackView>
   </Box>
-)
+))
+
+Loading.displayName = 'Loading'
+
 Loading.propTypes = { label: PropTypes.string }
 
 export default Loading

package/src/Autocomplete/Suggestions.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import A11yText from '../A11yText'
 import Typography from '../Typography'
 import Box from '../Box'
 import Listbox from '../Listbox'
 
-const Suggestions = forwardRef(
+const Suggestions = React.forwardRef(
   ({ hasResults, items = [], noResults, onClose, onSelect, parentRef }, ref) => {
     const pressableItems = items.map(({ id, ...rest }) => ({
       id,

package/src/Badge/Badge.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
@@ -32,7 +32,7 @@ const getTypographyTokens = ({ fontName, fontWeight, color }) => ({ fontName, fo
 
 const getTypographyVariant = ({ fontSize }) => ({ size: fontSizeMapping[fontSize] })
 
-const Badge = forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
+const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Badge', tokens, variant)
 
   return (

package/src/BaseProvider/HydrationContext.jsx

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
 
-const HydrationContext = createContext()
+const HydrationContext = React.createContext()
 const isSSR = typeof window === 'undefined'
 const hasWebStyleTag = () => {
   if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
@@ -18,15 +18,15 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-export const useHydrationContext = () => useContext(HydrationContext)
+export const useHydrationContext = () => React.useContext(HydrationContext)
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
 export const HydrationProvider = ({ children }) => {
-  const [hasMounted, setHasMounted] = useState(false)
-  useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false)
+  React.useEffect(() => {
     setHasMounted(true)
   }, [])
 

package/src/Box/Box.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -181,7 +181,7 @@ const setBackgroundImage = ({
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = forwardRef(
+const Box = React.forwardRef(
   (
     {
       space,
@@ -230,8 +230,8 @@ const Box = forwardRef(
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
     const backgroundImagePosition = useResponsiveProp(position, 'none')
     const backgroundImageAlign = useResponsiveProp(align, 'stretch')
-    const [backgroundImageWidth, setBackgroundImageWidth] = useState(0)
-    const [backgroundImageHeight, setBackgroundImageHeight] = useState(0)
+    const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0)
+    const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0)
     if (backgroundImage)
       content = setBackgroundImage({
         src,
@@ -244,7 +244,7 @@ const Box = forwardRef(
         content
       })
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
         Image.getSize(src, (width, height) => {
           // Only update the state if the size has changed

package/src/Button/Button.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -6,14 +6,16 @@ import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 
-const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
-  const viewport = useViewport()
-  const buttonVariant = { viewport, ...variant }
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
-  return (
-    <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
-  )
-})
+const Button = React.forwardRef(
+  ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+    return (
+      <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+    )
+  }
+)
 Button.displayName = 'Button'
 
 Button.propTypes = {

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
@@ -185,7 +185,7 @@ const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   color: iconColor || color
 })
 
-const ButtonBase = forwardRef(
+const ButtonBase = React.forwardRef(
   (
     {
       id,
@@ -303,7 +303,6 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ...buttonPropTypes
 }
-ButtonBase.defaultProps = { id: undefined }
 
 const staticStyles = StyleSheet.create({
   row: {

package/src/Button/ButtonDropdown.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Text, View } from 'react-native'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -50,7 +50,7 @@ const selectIconTokens = ({
   }
 })
 
-const ButtonDropdown = forwardRef(
+const ButtonDropdown = React.forwardRef(
   (
     {
       value,

package/src/Button/ButtonGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
@@ -30,10 +30,11 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const ButtonGroup = forwardRef(
+const ButtonGroup = React.forwardRef(
   (
     {
       variant,
+      buttonVariant,
       tokens,
       items = [],
       values,
@@ -140,6 +141,7 @@ const ButtonGroup = forwardRef(
                 <ButtonBase
                   ref={itemRef}
                   key={id}
+                  variant={buttonVariant}
                   {...pressHandlers}
                   onPress={handlePress}
                   tokens={getButtonTokens}
@@ -167,6 +169,13 @@ ButtonGroup.displayName = 'ButtonGroup'
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
+  /**
+   * To allow Button specific variant
+   */
+  buttonVariant: variantProp.propType,
+  /**
+   * Default variant prop
+   */
   variant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves

package/src/Button/ButtonLink.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -10,7 +10,7 @@ import { useViewport } from '../ViewportProvider'
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = forwardRef(
+const ButtonLink = React.forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const viewport = useViewport()