@telus-uds/components-base 3.7.0 → 3.8.0

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/Card/PressableCardBase.jsx

@@ -158,7 +158,7 @@ const PressableCardBase = React.forwardRef(
               setFocused(false)
               setPressed(false)
             }}
-            style={staticStyles.container}
+            style={{ ...staticStyles.container, textDecoration: 'none' }}
             {...(hrefAttrs || {})}
           >
             <CardBase tokens={getCardTokens({ pressed, focused, hovered })}>

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: {
@@ -80,12 +81,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,
@@ -101,7 +107,7 @@ const ModalOverlay = React.forwardRef(
     return (
       <Portal>
         <View
-          ref={ref}
+          ref={containerRef}
           onLayout={onLayout}
           style={[
             overlaidPosition,
@@ -132,6 +138,7 @@ const ModalOverlay = React.forwardRef(
     )
   }
 )
+
 ModalOverlay.displayName = 'ModalOverlay'
 
 ModalOverlay.propTypes = {
@@ -153,7 +160,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

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -89,6 +89,7 @@ const MultiSelectFilter = React.forwardRef(
       inactive = false,
       rowLimit = 12,
       dictionary = defaultDictionary,
+      dismissWhenPressedOutside = false,
       ...rest
     },
     ref
@@ -386,8 +387,9 @@ const MultiSelectFilter = React.forwardRef(
         )}
         {isOpen && viewport !== 'xs' && (
           <ModalOverlay
-            overlaidPosition={overlaidPosition}
+            dismissWhenPressedOutside={dismissWhenPressedOutside}
             onClose={onClose}
+            overlaidPosition={overlaidPosition}
             maxHeight={items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight}
             maxHeightSize={maxHeightSize}
             maxWidthSize={maxWidthSize}
@@ -539,7 +541,12 @@ MultiSelectFilter.propTypes = {
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: PropTypes.number
+  rowLimit: PropTypes.number,
+  /**
+   * 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 MultiSelectFilter

package/src/utils/index.js

@@ -24,3 +24,4 @@ export { transformGradient } from './transformGradient'
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte'
 export { default as formatImageSource } from './formatImageSource'
 export { default as getSpacingScale } from './getSpacingScale'
+export { default as useVariants } from './useVariants'

package/src/utils/useDetectOutsideClick.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Platform } from 'react-native'
+
+/**
+ * Hook to detect clicks outside of a ref, only on web.
+ *
+ * @param {React.RefObject<HTMLElement>} ref
+ *   Reference to the element you want to “protect.”
+ * @param {() => void} onOutside
+ *   Callback invoked when a click occurs outside that ref.
+ * @param {boolean} [enabled=true]
+ *   Flag to enable or disable the outside-click detection at runtime.
+ *   @deprecated Will be removed in next major release; detection will always be enabled.
+ */
+
+function useDetectOutsideClick(ref, onOutside, enabled = true) {
+  React.useEffect(() => {
+    if (!enabled || Platform.OS !== 'web') {
+      return undefined
+    }
+
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOutside()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [ref, onOutside, enabled])
+}
+
+export default useDetectOutsideClick

package/src/utils/useVariants.js

@@ -0,0 +1,44 @@
+import { getComponentTheme, useTheme } from '../ThemeProvider'
+
+/**
+ * Generates a label string for a variant based on the provided key and value.
+ *
+ * @param {string} key - The name of the variant.
+ * @param {*} value - The value of the variant. If it's a string, it will be appended to the key.
+ * @returns {string} The formatted variant label (e.g., "color: red" or "size").
+ */
+const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `: ${value}` : ''}`
+
+/**
+ * Retrieves the variant options for a given component from the theme.
+ *
+ * @param {string} componentName - The name of the component to get variants for.
+ * @returns {Array<Array>} An array of variant tuples. Each tuple contains:
+ *   - {string|undefined} The variant key (e.g., 'size', 'color', or undefined for default).
+ *   - {string|undefined} The variant value (e.g., 'small', 'primary', or undefined for default).
+ *   - {string} The human-readable label for the variant.
+ *   Returns [['default', {}]] if no componentName is provided.
+ * @throws {Error} If the theme does not define appearances for the given component.
+ */
+const useVariants = (componentName) => {
+  const theme = useTheme()
+  if (!componentName) return [['default', {}]]
+
+  const { appearances } = getComponentTheme(theme, componentName)
+  if (!appearances) {
+    throw new Error(
+      `Theme ${theme.metadata?.name} does not have any appearances set for ${componentName}`
+    )
+  }
+
+  const variants = Object.entries(appearances).reduce(
+    (pairs, [key, { values, type } = {}]) =>
+      type === 'variant'
+        ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
+        : pairs,
+    [[undefined, undefined, 'default style']]
+  )
+  return variants
+}
+
+export default useVariants