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

package/src/StackView/StackWrap.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Platform } from 'react-native'
 
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'
-import StackWrapBox from './StackWrapBox'
-import StackWrapGap from './StackWrapGap'
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect'
+import { StackWrapBox } from './StackWrapBox'
+import { StackWrapGap } from './StackWrapGap'
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 const cssSupports = (property, value) =>
@@ -23,7 +23,7 @@ const exampleGapValue = '1px'
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = React.forwardRef((props, ref) => {
+export const StackWrap = React.forwardRef((props, ref) => {
   const [canUseCSSGap, setCanUseCSSGap] = React.useState(false)
   const { space } = props
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
@@ -46,5 +46,3 @@ const StackWrap = React.forwardRef((props, ref) => {
 StackWrap.displayName = 'StackWrap'
 
 StackWrap.propTypes = StackWrapBox.propTypes
-
-export default StackWrap

package/src/StackView/StackWrap.native.jsx

@@ -1,4 +1,2 @@
-import StackWrapBox from './StackWrapBox'
-
 // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
-export default StackWrapBox
+export { StackWrapBox as StackWrap } from './StackWrapBox'

package/src/StackView/StackWrapBox.jsx

@@ -1,21 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-import {
-  a11yProps,
-  getA11yPropsFromHtmlTag,
-  getTokensPropType,
-  layoutTags,
-  responsiveProps,
-  selectSystemProps,
-  spacingProps,
-  useSpacingScale,
-  useResponsiveProp,
-  viewProps
-} from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import getStackedContent from './getStackedContent'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics'
+import { getTokensPropType } from '../utils/props/tokens'
+import { responsiveProps } from '../utils/props/responsiveProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { spacingProps } from '../utils/props/spacingProps'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { viewProps } from '../utils/props/viewProps'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { getStackedContent } from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -47,7 +44,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = React.forwardRef(
+export const StackWrapBox = React.forwardRef(
   (
     {
       space = 1,
@@ -125,5 +122,3 @@ StackWrapBox.propTypes = {
    */
   children: PropTypes.node
 }
-
-export default StackWrapBox

package/src/StackView/StackWrapGap.jsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import { View } from 'react-native'
 
-import StackWrapBox from './StackWrapBox'
-import {
-  a11yProps,
-  getA11yPropsFromHtmlTag,
-  selectSystemProps,
-  useSpacingScale,
-  useResponsiveProp,
-  viewProps
-} from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import getStackedContent from './getStackedContent'
+import { StackWrapBox } from './StackWrapBox'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getA11yPropsFromHtmlTag } from '../utils/a11y/semantics'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { viewProps } from '../utils/props/viewProps'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { getStackedContent } from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
 const [selectProps] = selectSystemProps([a11yProps, viewProps])
@@ -27,7 +25,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps])
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = React.forwardRef(
+export const StackWrapGap = React.forwardRef(
   (
     {
       space = 1,
@@ -70,5 +68,3 @@ const StackWrapGap = React.forwardRef(
 StackWrapGap.displayName = 'StackWrapGap'
 
 StackWrapGap.propTypes = StackWrapBox.propTypes
-
-export default StackWrapGap

package/src/StackView/common.jsx

@@ -10,7 +10,8 @@ export const selectFlexStyles = ({ alignItems, justifyContent, flexGrow, flexShr
 export const staticStyles = StyleSheet.create({
   wrap: {
     flexShrink: 1,
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   },
   row: {
     flexDirection: 'row'

package/src/StackView/getStackedContent.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import Box from '../Box'
-import Divider from '../Divider'
-import Spacer from '../Spacer'
+import { Box } from '../Box/Box'
+import { Divider } from '../Divider/Divider'
+import { Spacer } from '../Spacer/Spacer'
 
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
@@ -30,7 +30,7 @@ import Spacer from '../Spacer'
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
-const getStackedContent = (
+export const getStackedContent = (
   children,
   { divider, space, direction = 'column', box, preserveFragments = false }
 ) => {
@@ -117,5 +117,3 @@ const unpackFragment = (child) => {
   // Stop unpacking as soon as any non-fragment child is found
   return child
 }
-
-export default getStackedContent

package/src/Status/Status.jsx

@@ -2,18 +2,16 @@ import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText,
-  transformGradient
-} from '../utils'
-
-import Icon from '../Icon'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { applyTextStyles } 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'
+import { wrapStringsInText } from '../utils/children'
+import { transformGradient } from '../utils/transformGradient'
+import { Icon } from '../Icon/Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -93,29 +91,31 @@ const selectTextStyles = ({
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
  */
-const Status = React.forwardRef(({ tokens, variant, children, customGradient, ...rest }, ref) => {
-  const themeTokens = useThemeTokens('Status', tokens, variant)
-  const { icon } = themeTokens
-  const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
+export const Status = React.forwardRef(
+  ({ tokens, variant, children, customGradient, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('Status', tokens, variant)
+    const { icon } = themeTokens
+    const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
 
-  let content = (
-    <>
-      {icon ? <Icon {...selectIconProps(themeTokens)} /> : null}
-      {wrapStringsInText(children, {
-        style: selectTextStyles(themeTokens)
-      })}
-    </>
-  )
-  if (typeof customGradient === 'function') {
-    content = customGradient(containerStyles.gradient, containerStyles, content)
-  }
+    let content = (
+      <>
+        {icon ? <Icon {...selectIconProps(themeTokens)} /> : null}
+        {wrapStringsInText(children, {
+          style: selectTextStyles(themeTokens)
+        })}
+      </>
+    )
+    if (typeof customGradient === 'function') {
+      content = customGradient(containerStyles.gradient, containerStyles, content)
+    }
 
-  return (
-    <View ref={ref} style={containerStyles} {...selectProps(rest)}>
-      {content}
-    </View>
-  )
-})
+    return (
+      <View ref={ref} style={containerStyles} {...selectProps(rest)}>
+        {content}
+      </View>
+    )
+  }
+)
 
 Status.displayName = 'Status'
 
@@ -149,5 +149,3 @@ const staticStyles = StyleSheet.create({
     })
   }
 })
-
-export default Status

package/src/StepTracker/Step.jsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
-import StackView from '../StackView'
-import Icon from '../Icon'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import { applyTextStyles, useTheme } from '../ThemeProvider'
+import { StackView } from '../StackView/StackView'
+import { Icon } from '../Icon/Icon'
+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 { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -150,7 +155,7 @@ const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
 /**
  * A single step of a StepTracker.
  */
-const Step = React.forwardRef(
+export const Step = React.forwardRef(
   (
     { label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, isBarVariant, ...rest },
     ref
@@ -254,8 +259,6 @@ Step.propTypes = {
   variant: variantProp.propType
 }
 
-export default Step
-
 const staticStyles = StyleSheet.create({
   centeredText: { textAlign: 'center' },
   connector: { flex: 1, height: 1 },

package/src/StepTracker/StepTracker.jsx

@@ -1,13 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, Text, View } from 'react-native'
-import StackView from '../StackView'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import { useViewport } from '../ViewportProvider'
-import useCopy from '../utils/useCopy'
-import Step from './Step'
-import defaultDictionary from './dictionary'
+import { StackView } from '../StackView/StackView'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } 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 { useViewport } from '../ViewportProvider/useViewport'
+import { useCopy } from '../utils/useCopy'
+import { Step } from './Step'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const STYLE_BAR_VARIANT = 'bar'
 
@@ -76,7 +82,7 @@ const selectStepsContainerStyles = ({ barGap }) => ({
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = React.forwardRef(
+export const StepTracker = React.forwardRef(
   (
     {
       current = 0,
@@ -216,8 +222,6 @@ StepTracker.propTypes = {
   variant: variantProp.propType
 }
 
-export default StepTracker
-
 const staticStyles = StyleSheet.create({
   stepsContainer: {
     alignItems: 'flex-start',

package/src/StepTracker/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     1: {
       stepLabel: 'Step %{stepNumber}',

package/src/TabBar/TabBar.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
-import TabBarItem from './TabBarItem'
-import { useThemeTokens } from '../ThemeProvider'
-import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils'
+import { TabBarItem } from './TabBarItem'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { variantProp } from '../utils/props/variantProp'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
 
 const selectTabBarContainerStyles = ({
   paddingTop,
@@ -42,12 +46,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
-const TabBar = React.forwardRef(
-  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+export const TabBar = React.forwardRef(
+  (
+    {
+      items = [],
+      initiallySelectedItem = '0',
+      onChange,
+      variant,
+      tokens,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
     const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
     const themeTokens = useThemeTokens('TabBar', tokens, variant)
 
@@ -62,7 +78,11 @@ const TabBar = React.forwardRef(
         style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+        <View
+          style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
           {items.map((item, index) => (
             <TabBarItem
               key={item.id}
@@ -73,7 +93,6 @@ const TabBar = React.forwardRef(
               iconActive={item.iconActive}
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
-              accessibilityRole="tablist"
               tokens={item.tokens}
             />
           ))}
@@ -105,7 +124,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 }
 
 const styles = StyleSheet.create({
@@ -121,5 +142,3 @@ const styles = StyleSheet.create({
     width: '100%'
   }
 })
-
-export default TabBar

package/src/TabBar/TabBarItem.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet } from 'react-native'
-import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import Typography from '../Typography'
-import Spacer from '../Spacer'
+import { getTokensPropType } from '../utils/props/tokens'
+import { resolvePressableTokens } from '../utils/pressability'
+import { variantProp } from '../utils/props/variantProp'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { Typography } from '../Typography/Typography'
+import { Spacer } from '../Spacer/Spacer'
 
 const selectTypographyStyles = (
   { fontWeight, color, lineHeight, fontName, activeColor },
@@ -34,7 +36,7 @@ const selectContainerStyles = ({ borderRadius, backgroundColor }) => ({
   alignItems: 'center'
 })
 
-const TabBarItem = React.forwardRef(
+export const TabBarItem = React.forwardRef(
   (
     {
       href,
@@ -145,5 +147,3 @@ const styles = StyleSheet.create({
     aspectRatio: 1.1
   }
 })
-
-export default TabBarItem

package/src/Tabs/Tabs.jsx

@@ -1,28 +1,23 @@
 import React from 'react'
 import { Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
-import { useThemeTokens } from '../ThemeProvider'
-import StackView from '../StackView'
-import {
-  a11yProps,
-  getTokensPropType,
-  focusHandlerProps,
-  pressProps,
-  selectSystemProps,
-  useHash,
-  useInputValue,
-  useResponsiveProp,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import HorizontalScroll, {
-  horizontalScrollUtils,
-  HorizontalScrollButton
-} from '../HorizontalScroll'
-import TabsItem from './TabsItem'
-import TabsDropdown from './TabsDropdown'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { StackView } from '../StackView/StackView'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { pressProps } from '../utils/props/pressProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useHash } from '../utils/useHash'
+import { useInputValue } from '../utils/input'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { HorizontalScroll, horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll'
+import { HorizontalScrollButton } from '../HorizontalScroll/HorizontalScrollButton'
+import { TabsItem } from './TabsItem'
+import { TabsDropdown } from './TabsDropdown'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -70,7 +65,7 @@ const getStackViewTokens = (variant) => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = React.forwardRef(
+export const Tabs = React.forwardRef(
   (
     {
       tokens,
@@ -214,7 +209,7 @@ Tabs.propTypes = {
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,
-      ref: ABBPropTypes.ref(),
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
       render: PropTypes.func
     })
   ),
@@ -238,5 +233,3 @@ Tabs.propTypes = {
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
 }
-
-export default Tabs

package/src/Tabs/TabsDropdown.jsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
-import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  resolvePressableTokens,
-  selectSystemProps,
-  selectTokens,
-  useOverlaidPosition,
-  useCopy,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import { useViewport } from '../ViewportProvider'
-import Icon from '../Icon'
-import Listbox from '../Listbox'
-import dictionary from './dictionary'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { resolvePressableTokens } from '../utils/pressability'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useOverlaidPosition } from '../utils/useOverlaidPosition'
+import { useCopy } from '../utils/useCopy'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { Icon } from '../Icon/Icon'
+import { Listbox } from '../Listbox/Listbox'
+import { ListboxOverlay } from '../Listbox/ListboxOverlay'
+import { dictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -51,7 +51,7 @@ const selectButtonContentStyles = ({
  * This is rendered automatically by `Tabs` on mobile viewports and when variant
  * is dropdown and isn't intended to be used directly.
  */
-const TabsDropdown = React.forwardRef(
+export const TabsDropdown = React.forwardRef(
   (
     {
       itemTokens,
@@ -156,7 +156,7 @@ const TabsDropdown = React.forwardRef(
         </Pressable>
 
         {isOpen && (
-          <Listbox.Overlay
+          <ListboxOverlay
             overlaidPosition={overlaidPosition}
             maxWidth={400}
             minWidth={200}
@@ -172,7 +172,7 @@ const TabsDropdown = React.forwardRef(
               LinkRouter={LinkRouter}
               linkRouterProps={linkRouterProps}
             />
-          </Listbox.Overlay>
+          </ListboxOverlay>
         )}
       </View>
     )
@@ -262,5 +262,3 @@ const styles = StyleSheet.create({
     minHeight: 44
   }
 })
-
-export default TabsDropdown