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

package/src/RadioCard/RadioCard.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 RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton'
+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 { RadioButton, selectRadioButtonTokens } from '../Radio/RadioButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -59,7 +58,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = React.forwardRef(
+export const RadioCard = React.forwardRef(
   (
     {
       tokens,
@@ -211,5 +210,3 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   }
 })
-
-export default RadioCard

package/src/RadioCard/RadioCardGroup.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,
-  useInputValue,
-  variantProp,
-  viewProps
-} from '../utils'
-import StackView, { StackWrap } from '../StackView'
-import RadioCard from './RadioCard'
-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 { useInputValue } 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 { RadioCard } from './RadioCard'
+import { Fieldset } from '../Fieldset/Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -74,7 +73,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioCardGroup = React.forwardRef(
+export const RadioCardGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -277,5 +276,3 @@ RadioCardGroup.propTypes = {
    */
   name: PropTypes.string
 }
-
-export default RadioCardGroup

package/src/Responsive/Responsive.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useTheme } from '../ThemeProvider'
-import ResponsiveProp from './ResponsiveProp'
-import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { ResponsiveProp } from './ResponsiveProp'
+import { ResponsiveWithMediaQueryStyleSheet } from './ResponsiveWithMediaQueryStyleSheet'
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
@@ -17,28 +17,30 @@ import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleS
  * is used to hide and show children of `Responsive` within a View.
  */
 
-const Responsive = React.forwardRef(({ min = 'xs', max, inheritedStyles = [], children }, ref) => {
-  const {
-    themeOptions: { enableMediaQueryStyleSheet }
-  } = useTheme()
-  if (enableMediaQueryStyleSheet) {
+export const Responsive = React.forwardRef(
+  ({ min = 'xs', max, inheritedStyles = [], children }, ref) => {
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+    if (enableMediaQueryStyleSheet) {
+      return (
+        <ResponsiveWithMediaQueryStyleSheet
+          inheritedStyles={inheritedStyles}
+          min={min}
+          max={max}
+          ref={ref}
+        >
+          {children}
+        </ResponsiveWithMediaQueryStyleSheet>
+      )
+    }
     return (
-      <ResponsiveWithMediaQueryStyleSheet
-        inheritedStyles={inheritedStyles}
-        min={min}
-        max={max}
-        ref={ref}
-      >
+      <ResponsiveProp min={min} max={max}>
         {children}
-      </ResponsiveWithMediaQueryStyleSheet>
+      </ResponsiveProp>
     )
   }
-  return (
-    <ResponsiveProp min={min} max={max}>
-      {children}
-    </ResponsiveProp>
-  )
-})
+)
 
 Responsive.displayName = 'Responsive'
 
@@ -59,5 +61,3 @@ Responsive.propTypes = {
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
-
-export default Responsive

package/src/Responsive/ResponsiveProp.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { viewports } from '@telus-uds/system-constants'
-import { useResponsiveProp } from '../utils'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
 
-const ResponsiveProp = ({ min = 'xs', max, children }) => {
+export const ResponsiveProp = ({ min = 'xs', max, children }) => {
   const byViewports = { [min]: children }
   if (max && max !== 'xl') {
     // Stop returning children at the viewport one above 'max' or greater
@@ -29,5 +29,3 @@ ResponsiveProp.propTypes = {
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
 }
-
-export default ResponsiveProp

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
-import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils'
+import { BaseView } from '../utils/BaseView/BaseView'
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query'
 
 function generateResponsiveStyles(min, max) {
   const viewportsArray = viewports.keys
@@ -26,7 +27,7 @@ function generateResponsiveStyles(min, max) {
   return createMediaQueryStyles(styles, false)
 }
 
-const ResponsiveWithMediaQueryStyleSheet = React.forwardRef(
+export const ResponsiveWithMediaQueryStyleSheet = React.forwardRef(
   ({ min, max, inheritedStyles = [], children }, ref) => {
     const { ids, styles } = StyleSheet.create({
       responsive: {
@@ -63,5 +64,3 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
-
-export default ResponsiveWithMediaQueryStyleSheet

package/src/Search/Search.jsx

@@ -2,25 +2,22 @@ import React from 'react'
 import { View, Platform } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  selectTokens,
-  useInputValue,
-  useSpacingScale,
-  textInputHandlerProps,
-  textInputProps,
-  variantProp,
-  viewProps,
-  contentfulProps
-} from '../utils'
-import TextInputBase from '../TextInput/TextInputBase'
-import ButtonBase from '../Button/ButtonBase'
-import useCopy from '../utils/useCopy'
-import dictionary from './dictionary'
-import Icon from '../Icon'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useInputValue } from '../utils/input'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { textInputHandlerProps } from '../utils/props/handlerProps'
+import { textInputProps } from '../utils/props/textInputProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { TextInputBase } from '../TextInput/TextInputBase'
+import { ButtonBase } from '../Button/ButtonBase'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
+import { Icon } from '../Icon/Icon'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([
   a11yProps,
@@ -77,7 +74,7 @@ const modifyButtonTokens = (tokens) => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = React.forwardRef(
+export const Search = React.forwardRef(
   (
     {
       initialValue,
@@ -284,5 +281,3 @@ Search.propTypes = {
    */
   nativeSubmitBtnID: PropTypes.string
 }
-
-export default Search

package/src/Search/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     accessibilityLabel: 'Search',
     clearButtonAccessibilityLabel: 'Clear',

package/src/Select/Picker.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
 
 import PropTypes from 'prop-types'
-import { componentPropType, selectSystemProps, htmlAttrs } from '../utils'
+import { componentPropType } from '../utils/props/componentPropType'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { htmlAttrs } from '../utils/htmlAttrs'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const Picker = React.forwardRef(
+export const Picker = React.forwardRef(
   (
     {
       value,
@@ -69,9 +71,7 @@ const Picker = React.forwardRef(
     )
   }
 )
-Picker.displayName = 'Picker'
-
-export default Picker
+Picker.displayName = 'SelectPicker'
 
 Picker.propTypes = {
   ...selectedSystemPropTypes,

package/src/Select/Picker.native.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 import NativePicker from 'react-native-picker-select'
 
-import { a11yProps, componentPropType } from '../utils'
-import Group from './Group'
+import { a11yProps } from '../utils/props/a11yProps'
+import { componentPropType } from '../utils/props/componentPropType'
+import { SelectGroup } from './SelectGroup'
 
 import {
   ANDROID_HORIZONTAL_PADDING_OFFSET,
@@ -41,11 +42,11 @@ const selectAndroidContainerStyles = ({
   paddingTop: ANDROID_DEFAULT_PADDING
 })
 
-const Picker = React.forwardRef(
+export const Picker = React.forwardRef(
   ({ value, onChange, onFocus, onBlur, style, inactive, children, placeholder, ...rest }, ref) => {
     // Ungroup items, since there's no way to support groups on native
     const flatChildren = React.Children.toArray(children).flatMap((child) => {
-      if (child.type === Group) {
+      if (child.type === SelectGroup) {
         return child.props.children
       }
 
@@ -107,8 +108,6 @@ const Picker = React.forwardRef(
 )
 Picker.displayName = 'Picker'
 
-export default Picker
-
 Picker.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,

package/src/Select/Select.jsx

@@ -3,20 +3,20 @@ import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
-import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider'
-import {
-  a11yProps,
-  componentPropType,
-  getTokensPropType,
-  inputSupportsProps,
-  selectSystemProps,
-  useInputValue,
-  variantProp,
-  viewProps,
-  htmlAttrs
-} from '../utils'
-import Picker from './Picker'
-import InputSupports from '../InputSupports'
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { a11yProps } from '../utils/props/a11yProps'
+import { componentPropType } from '../utils/props/componentPropType'
+import { getTokensPropType } from '../utils/props/tokens'
+import { inputSupportsProps } from '../utils/props/inputSupportsProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useInputValue } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { Picker } from './Picker'
+import { InputSupports } from '../InputSupports/InputSupports'
 
 import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants'
 
@@ -187,11 +187,11 @@ const selectCustomFeedbackStyles = ({ feedbackBackgroundColor }) => ({
  * When a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.
  *
  * ## Grouping options
- * `Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.
+ * `Select` supports option groups. Use a `SelectGroup` component to render an `<optgroup>` element with its items.
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = React.forwardRef(
+export const Select = React.forwardRef(
   (
     {
       value,
@@ -342,8 +342,6 @@ Select.propTypes = {
   testID: PropTypes.string
 }
 
-export default Select
-
 const staticStyles = StyleSheet.create({
   iconContainer: {
     position: 'absolute',

package/src/Select/{Group.jsx → SelectGroup.jsx}

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { componentPropType } from '../utils'
+import { componentPropType } from '../utils/props/componentPropType'
 
-const Group = React.forwardRef(({ children, label }, ref) => {
+export const SelectGroup = React.forwardRef(({ children, label }, ref) => {
   return (
     <optgroup label={label} ref={ref}>
       {children}
@@ -11,11 +11,9 @@ const Group = React.forwardRef(({ children, label }, ref) => {
   )
 })
 
-Group.displayName = 'Group'
+SelectGroup.displayName = 'SelectGroup'
 
-export default Group
-
-Group.propTypes = {
+SelectGroup.propTypes = {
   children: componentPropType('Item'),
   /**
    * The label for the group.

package/src/Select/{Group.native.jsx → SelectGroup.native.jsx}

@@ -1,14 +1,12 @@
 import PropTypes from 'prop-types'
 
-import { componentPropType } from '../utils'
+import { componentPropType } from '../utils/props/componentPropType'
 
-const Group = ({ children }) => {
+export const SelectGroup = ({ children }) => {
   return children
 }
 
-export default Group
-
-Group.propTypes = {
+SelectGroup.propTypes = {
   children: componentPropType('Item'),
   /**
    * The label for the group.

package/src/Select/{Item.jsx → SelectItem.jsx}

@@ -1,17 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Item = React.forwardRef(({ children, value }, ref) => (
+export const SelectItem = React.forwardRef(({ children, value }, ref) => (
   <option value={value} ref={ref}>
     {children}
   </option>
 ))
 
-Item.displayName = 'Item'
+SelectItem.displayName = 'SelectItem'
 
-export default Item
-
-Item.propTypes = {
+SelectItem.propTypes = {
   children: PropTypes.string.isRequired,
   /**
    * The value of the option

package/src/Select/SelectItem.native.jsx

@@ -0,0 +1 @@
+export const SelectItem = () => null

package/src/Shortcuts/Shortcuts.jsx

@@ -3,21 +3,18 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
 
-import { useTheme, useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  useResponsiveProp,
-  variantProp,
-  viewProps
-} from '../utils'
-
-import HorizontalScroll, {
-  horizontalScrollUtils,
-  HorizontalScrollButton
-} from '../HorizontalScroll'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+
+import { HorizontalScroll, horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll'
+import { HorizontalScrollButton } from '../HorizontalScroll/HorizontalScrollButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -79,7 +76,7 @@ const selectStyles = (themeTokens, maxWidth, viewport) => {
  *   <ShortcutsItem icon={SettingsIcon} label="Settings" />
  * </Shortcuts>
  */
-const Shortcuts = React.forwardRef(
+export const Shortcuts = React.forwardRef(
   (
     { tokens, variant, scrollButtonTokens, hideLabels = false, iconVariant, children, ...rest },
     ref
@@ -170,5 +167,3 @@ const staticStyles = StyleSheet.create({
     flex: 1
   }
 })
-
-export default Shortcuts

package/src/Shortcuts/ShortcutsItem.jsx

@@ -2,20 +2,19 @@ import React from 'react'
 import { Image, Platform, Pressable, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  clickProps,
-  getTokensPropType,
-  hrefAttrsProp,
-  linkProps,
-  resolvePressableState,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText
-} from '../utils'
-import Icon from '../Icon'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+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 { resolvePressableState } from '../utils/pressability'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { wrapStringsInText } from '../utils/children'
+import { Icon } from '../Icon/Icon'
 
 const DYNAMIC_WIDTH_VARIANT = 'dynamic'
 const EQUAL_WIDTH_VARIANT = 'equal'
@@ -125,7 +124,7 @@ const selectTitleTextStyles = (tokens) =>
  *   onPressableStateChange={(state) => console.log(state)}
  * />
  */
-const ShortcutsItem = React.forwardRef(
+export const ShortcutsItem = React.forwardRef(
   (
     {
       icon,
@@ -290,8 +289,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   },
   label: {
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   }
 })
-
-export default ShortcutsItem