@telus-uds/components-base 3.7.1 → 3.9.0

package/src/ActivityIndicator/RenderActivityIndicator.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Spinner from './Spinner'
+import Dots from './Dots'
+import { DOTS_STYLE } from './shared'
+
+/**
+ * Return <Dots/> or <Spinner/> based on `variant?.dots`.
+ * Reused in all the variants of the component.
+ */
+const RenderActivityIndicator = React.forwardRef(
+  (
+    { variant = {}, dotSize, size, color, indicatorBackgroundColor, thickness, label, isStatic },
+    ref
+  ) => {
+    const { dots, style } = variant || {}
+    const isDots = dots === true || style === DOTS_STYLE
+
+    return isDots ? (
+      <Dots
+        ref={ref}
+        size={dotSize}
+        color={color}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+        label={label}
+        isStatic={isStatic}
+      />
+    ) : (
+      <Spinner
+        ref={ref}
+        size={size}
+        color={color}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+        thickness={thickness}
+        label={label}
+        isStatic={isStatic}
+      />
+    )
+  }
+)
+
+RenderActivityIndicator.displayName = 'RenderActivityIndicator'
+
+RenderActivityIndicator.propTypes = {
+  /**
+   * ActivityIndicator variants
+   * */
+  variant: PropTypes.shape({
+    dots: PropTypes.bool,
+    style: PropTypes.oneOf([DOTS_STYLE])
+  }),
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the indicator
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Label for the ActivityIndicator
+   * */
+  label: PropTypes.string,
+  /**
+   * if true, there's no animation for ActivityIndicator
+   * */
+  isStatic: PropTypes.bool
+}
+
+export default RenderActivityIndicator

package/src/ActivityIndicator/index.jsx

@@ -1,42 +1,95 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import { useScrollBlocking } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils/props'
 
-import Spinner from './Spinner'
-import Dots from './Dots'
+import FullScreenIndicator from './FullScreenIndicator'
+import OverlayIndicator from './OverlayIndicator'
+import InlineIndicator from './InlineIndicator'
+
+const labelMapping = {
+  top: 'column-reverse',
+  bottom: 'column',
+  left: 'row-reverse',
+  right: 'row'
+}
 
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = React.forwardRef(({ variant, tokens, label, isStatic = false }, ref) => {
-  const { size, dotSize, color, indicatorBackgroundColor, thickness } = useThemeTokens(
-    'ActivityIndicator',
-    tokens,
-    variant
-  )
-  return variant?.dots ? (
-    <Dots
-      ref={ref}
-      size={dotSize}
-      color={color}
-      indicatorBackgroundColor={indicatorBackgroundColor}
-      label={label}
-      isStatic={isStatic}
-    />
-  ) : (
-    <Spinner
-      ref={ref}
-      size={size}
-      color={color}
-      indicatorBackgroundColor={indicatorBackgroundColor}
-      thickness={thickness}
-      label={label}
-      isStatic={isStatic}
-    />
-  )
-})
+const ActivityIndicator = React.forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      label,
+      labelPosition = 'bottom',
+      showLabel = true,
+      inline = false,
+      fullScreen = false,
+      overlay = false,
+      isStatic = false,
+      children,
+      fullScreenBackgroundColor
+    },
+    ref
+  ) => {
+    const {
+      size,
+      dotSize,
+      color,
+      indicatorBackgroundColor,
+      fullScreenOverlayBackground,
+      thickness
+    } = useThemeTokens('ActivityIndicator', tokens, variant)
+
+    useScrollBlocking([Platform.OS === 'web' && fullScreen])
+
+    const variantProps = {
+      variant,
+      dotSize,
+      size,
+      color,
+      indicatorBackgroundColor,
+      thickness,
+      isStatic
+    }
+
+    const visibleLabel = showLabel && !!label
+
+    const commonProps = {
+      ref,
+      variantProps,
+      label,
+      labelPosition,
+      labelMapping,
+      showLabel: visibleLabel
+    }
+
+    switch (true) {
+      case fullScreen:
+        return (
+          <FullScreenIndicator
+            {...commonProps}
+            backgroundColor={fullScreenBackgroundColor || fullScreenOverlayBackground}
+          />
+        )
+
+      case overlay:
+        return (
+          <OverlayIndicator {...commonProps} inline={inline} isActive={overlay}>
+            {children}
+          </OverlayIndicator>
+        )
+
+      default:
+        return <InlineIndicator {...commonProps} />
+    }
+  }
+)
 
 ActivityIndicator.displayName = 'ActivityIndicator'
 
@@ -46,11 +99,39 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  /**
+   * If true, it should render a static ActivityIndicator
+   */
+  isStatic: PropTypes.bool,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * show or hide the label
+   */
+  showLabel: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in full screen mode
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed inline
+   */
+  inline: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in overlay mode
+   */
+  overlay: PropTypes.bool,
+  /**
+   * Children to be rendered inside ActivityIndicator
+   */
+  children: PropTypes.node,
   /**
-   * If true, it should render a static spinner
+   * Background color of the full screen overlay
    */
-  isStatic: PropTypes.bool
+  fullScreenBackgroundColor: PropTypes.string
 }
 
 export default ActivityIndicator

package/src/ActivityIndicator/shared.js

@@ -51,6 +51,17 @@ export const DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1]
 export const DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1]
 export const DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1]
 
+// Backdrop
+export const BACKDROP_OPACITY = 0.06
+export const BACKDROP_Z_INDEX = 1400
+
+// Space
+export const SPACE_WITH_LABEL = 3
+export const SPACE_WITHOUT_LABEL = 0
+
+// Style
+export const DOTS_STYLE = 'dots'
+
 export const propTypes = {
   color: PropTypes.string.isRequired,
   baseColor: PropTypes.string,

package/src/ActivityIndicator/sharedProptypes.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types'
+
+/**
+ * PropTypes for the 3 variants of the ActivityIndicator:
+ *   - InlineIndicator
+ *   - OverlayIndicator
+ *   - FullScreenIndicator
+ */
+export const activityIndicatorVariantProps = PropTypes.shape({
+  /**
+   * Indicates the variant style for the ActivityIndicator
+   * */
+  variant: PropTypes.object,
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the ActivityIndicator Spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color (Spinner)
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the ActivityIndicator Spinner
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Indicates if the ActivityIndicator is static
+   * (not animated)
+   * */
+  isStatic: PropTypes.bool
+}).isRequired
+
+export const activityIndicatorCommonProps = {
+  /**
+   * Props used by RenderActivityIndicator
+   * */
+  variantProps: activityIndicatorVariantProps,
+  /**
+   * Shows or hide the label
+   * */
+  showLabel: PropTypes.bool,
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: PropTypes.string,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Map of flex-direction position for label
+   * */
+  labelMapping: PropTypes.object.isRequired
+}

package/src/Card/Card.jsx

@@ -128,6 +128,7 @@ const Card = React.forwardRef(
     const selected = interactiveCard?.variant?.selected
     const inactive = interactiveCard?.variant?.inactive
     const selectionType = interactiveCard?.selectionType
+    const isControl = interactiveCard?.variant?.isControl === true
 
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
@@ -196,6 +197,10 @@ const Card = React.forwardRef(
     }
 
     const renderInputPerSelectionType = (props) => {
+      if (!isControl) {
+        return null
+      }
+
       switch (selectionType) {
         case SelectionType.Checkbox:
           return (
@@ -214,10 +219,6 @@ const Card = React.forwardRef(
       }
     }
 
-    const renderNoSelectionView = () => (
-      <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
-    )
-
     return (
       <>
         <CardBase
@@ -227,57 +228,53 @@ const Card = React.forwardRef(
           dataSet={mediaIds && { media: mediaIds }}
           {...selectProps(rest)}
         >
-          {interactiveCard?.body ? (
-            <>
-              <PressableCardBase
-                ref={ref}
-                tokens={getThemeTokens}
-                dataSet={dataSet}
-                onPress={onPress}
-                href={interactiveCard?.href}
-                hrefAttrs={interactiveCard?.hrefAttrs}
-                {...selectProps(rest)}
-              >
-                {(cardState) => {
-                  const {
-                    iconColor: checkColor,
-                    inputBackgroundColor: boxBackgroundColor,
-                    iconBackgroundColor: checkBackgroundColor
-                  } = getThemeTokens(
-                    {
-                      ...cardState,
-                      selected,
-                      interactive: true,
-                      isControl: true
-                    },
-                    interactiveCard?.tokens
-                  )
-                  return (
-                    <>
-                      {renderInputPerSelectionType(
-                        getInputProps({
-                          id,
-                          checkColor,
-                          boxBackgroundColor,
-                          checkBackgroundColor,
-                          isControlled: true,
-                          isChecked: selected || cardState?.hover,
-                          isInactive: inactive,
-                          onPress
-                        })
-                      )}
-                      {typeof interactiveCard?.body === 'function'
-                        ? interactiveCard.body(cardState)
-                        : interactiveCard.body}
-                    </>
-                  )
-                }}
-              </PressableCardBase>
-              {children && selectionType !== SelectionType.None ? renderNoSelectionView() : null}
-            </>
-          ) : (
-            children
+          {interactiveCard?.body && (
+            <PressableCardBase
+              ref={ref}
+              tokens={getThemeTokens}
+              dataSet={dataSet}
+              onPress={onPress}
+              href={interactiveCard?.href}
+              hrefAttrs={interactiveCard?.hrefAttrs}
+              {...selectProps(rest)}
+            >
+              {(cardState) => {
+                const {
+                  iconColor: checkColor,
+                  inputBackgroundColor: boxBackgroundColor,
+                  iconBackgroundColor: checkBackgroundColor
+                } = getThemeTokens(
+                  {
+                    ...cardState,
+                    selected,
+                    interactive: true,
+                    isControl
+                  },
+                  interactiveCard?.tokens
+                )
+                return (
+                  <>
+                    {renderInputPerSelectionType(
+                      getInputProps({
+                        id,
+                        checkColor,
+                        boxBackgroundColor,
+                        checkBackgroundColor,
+                        isControlled: true,
+                        isChecked: selected || cardState?.hover,
+                        isInactive: inactive,
+                        onPress
+                      })
+                    )}
+                    {typeof interactiveCard?.body === 'function'
+                      ? interactiveCard.body(cardState)
+                      : interactiveCard.body}
+                  </>
+                )
+              }}
+            </PressableCardBase>
           )}
+          {children}
         </CardBase>
       </>
     )

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -35,7 +35,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
     const linkTokens = useThemeTokens(
       'Link',
       {},
-      { ...variant, quiet: expanded ?? quiet },
+      { ...variant, quiet },
       {
         focus: isFocusVisible,
         hover,

package/src/List/ListItemMark.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import { View, StyleSheet } from 'react-native'
 import Icon from '../Icon'
+import { useVariants } from '../utils'
 
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
@@ -37,6 +38,9 @@ const selectBulletContainerStyles = ({
   alignItems: itemBulletContainerAlign
 })
 
+const getIconColorVariants = (iconVariants) =>
+  iconVariants?.filter((variant) => variant[0] === 'color').map((variant) => variant[1])
+
 /**
  * Subcomponent used within ListItem and similar components for rendering bullets or icons
  * that sit alongside a ListIconContent in a { flexDirection: row } container.
@@ -50,14 +54,26 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
 
+  // TODO: Remove it when iconColor custom colors are deprecated.
+  const iconVariants = useVariants('Icon')
+  const iconColorVariants = getIconColorVariants(iconVariants)
+
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens)
     return (
       <View style={[sideItemContainerStyles, bulletContainerStyles]}>
         <Icon
           icon={icon}
-          tokens={{ size: iconSize ?? iconTokens.size }}
-          variant={{ color: iconColor ?? iconTokens.color }}
+          tokens={{
+            size: iconSize ?? iconTokens.size,
+            ...(((iconColor && !iconColorVariants?.includes(iconColor)) || !iconColor) && {
+              color:
+                iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
+            })
+          }}
+          variant={{
+            ...(iconColorVariants?.includes(iconColor) && { color: iconColor })
+          }}
         />
       </View>
     )

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -9,6 +9,7 @@ import dictionary from './dictionary'
 
 import Card from '../Card'
 import IconButton from '../IconButton'
+import useDetectOutsideClick from '../utils/useDetectOutsideClick'
 
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -49,6 +50,7 @@ const staticStyles = StyleSheet.create({
 
 const selectContainerStyle = (enableFullscreen, themeTokens) => ({
   borderColor: themeTokens.borderColor,
+  backgroundColor: themeTokens.backgroundColor,
   ...Platform.select({
     web: {
       position: enableFullscreen ? 'fixed' : 'absolute'
@@ -80,12 +82,17 @@ const ModalOverlay = React.forwardRef(
       tokens,
       copy,
       onClose,
-      enableFullscreen = false
+      enableFullscreen = false,
+      dismissWhenPressedOutside = false
     },
     ref
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+
+    const containerRef = React.useRef(ref || null)
+    useDetectOutsideClick(containerRef, onClose, dismissWhenPressedOutside)
+
     const containerWidthHeight = {
       minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
       minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -93,7 +100,7 @@ const ModalOverlay = React.forwardRef(
       maxHeight: maxHeightSize
     }
 
-    const { closeIcon: CloseIconComponent } = themeTokens
+    const { closeIcon: CloseIconComponent, backgroundColor } = themeTokens
 
     const getCopy = useCopy({ dictionary, copy })
     const closeLabel = getCopy('closeButton')
@@ -101,7 +108,7 @@ const ModalOverlay = React.forwardRef(
     return (
       <Portal>
         <View
-          ref={ref}
+          ref={containerRef}
           onLayout={onLayout}
           style={[
             overlaidPosition,
@@ -111,7 +118,7 @@ const ModalOverlay = React.forwardRef(
             selectContainerStyle(enableFullscreen, themeTokens)
           ]}
         >
-          <Card tokens={staticStyles.card}>
+          <Card tokens={{ ...staticStyles.card, backgroundColor }}>
             <View
               style={[
                 staticStyles.closeButtonContainer,
@@ -132,6 +139,7 @@ const ModalOverlay = React.forwardRef(
     )
   }
 )
+
 ModalOverlay.displayName = 'ModalOverlay'
 
 ModalOverlay.propTypes = {
@@ -153,7 +161,12 @@ ModalOverlay.propTypes = {
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
   onClose: PropTypes.func,
-  enableFullscreen: PropTypes.bool
+  enableFullscreen: PropTypes.bool,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: PropTypes.bool
 }
 
 export default ModalOverlay