@telus-uds/components-base 3.7.1 → 3.9.0

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -89,6 +89,7 @@ const MultiSelectFilter = React.forwardRef(
       inactive = false,
       rowLimit = 12,
       dictionary = defaultDictionary,
+      dismissWhenPressedOutside = false,
       ...rest
     },
     ref
@@ -138,6 +139,7 @@ const MultiSelectFilter = React.forwardRef(
       buttonBackgroundColor,
       iconColorSelected,
       buttonBackgroundColorSelected,
+      containerBorderColor,
       ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
@@ -269,7 +271,7 @@ const MultiSelectFilter = React.forwardRef(
         <Row>
           <View>
             <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label)}
             </Typography>
           </View>
         </Row>
@@ -285,7 +287,7 @@ const MultiSelectFilter = React.forwardRef(
         )}
         <Spacer space={4} />
         <View style={styles.options}>
-          <ScrollView onLayout={handleScrollViewLayout}>
+          <ScrollView onLayout={handleScrollViewLayout} style={styles.scrollContainer}>
             <Row distribute="between" onLayout={handleRowLayout}>
               {[...Array(colSize).keys()].map((i) => (
                 <Col xs={TOTAL_COLUMNS / colSize} key={i}>
@@ -305,16 +307,14 @@ const MultiSelectFilter = React.forwardRef(
 
     const controlsContent = (
       <>
-        {isScrolling ? (
+        {isScrolling && (
           <Divider
             tokens={{
               color: dividerColor
             }}
-            space={4}
           />
-        ) : (
-          <Spacer space={4} />
         )}
+        <Spacer space={4} />
         <View style={selectControlsTokens(restTokens)}>
           <Row horizontalAlign={buttonDirection === 'column' ? 'center' : 'start'}>
             <StackView
@@ -367,7 +367,8 @@ const MultiSelectFilter = React.forwardRef(
             minWidth={windowWidth}
             tokens={{
               ...tokens,
-              maxWidth: true
+              maxWidth: true,
+              borderColor: containerBorderColor
             }}
             copy={copy}
             isReady={isReady}
@@ -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}
@@ -395,7 +397,8 @@ const MultiSelectFilter = React.forwardRef(
             minWidth={minWidth}
             tokens={{
               ...tokens,
-              maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
+              maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+              borderColor: containerBorderColor
             }}
             copy={copy}
             isReady={isReady}
@@ -428,6 +431,9 @@ const styles = StyleSheet.create({
   },
   options: {
     flex: 1
+  },
+  scrollContainer: {
+    padding: 1
   }
 })
 
@@ -539,7 +545,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/ToggleSwitch/ToggleSwitch.jsx

@@ -77,6 +77,18 @@ const selectSwitchStyles = ({
   })
 })
 
+const selectMobileTokens = (tokens) => ({
+  ...Platform.select({
+    web: {},
+    default: {
+      switchSize: tokens?.mobileSwitchSize,
+      trackHeight: tokens?.mobileTrackHeight,
+      width: tokens?.mobileWidth,
+      trackBorderWidth: tokens?.mobileTrackBorderWidth
+    }
+  })
+})
+
 const selectLabelStyles = ({ labelMarginLeft }) => ({ marginLeft: labelMarginLeft })
 const selectLabelTokens = ({
   labelColor,
@@ -123,7 +135,10 @@ const ToggleSwitch = React.forwardRef(
 
     const handlePress = (event) => setValue(!currentValue, event)
     const getButtonTokens = (buttonState) =>
-      selectButtonTokens(getTokens(buttonState), getTokens(themeTokens))
+      selectButtonTokens(
+        getTokens(buttonState, selectMobileTokens(themeTokens)),
+        getTokens(themeTokens, selectMobileTokens(themeTokens))
+      )
     const uniqueId = useUniqueId('toggleSwitch')
     const inputId = id ?? uniqueId
 
@@ -157,7 +172,7 @@ const ToggleSwitch = React.forwardRef(
           {...selectProps(rest)}
         >
           {(buttonState) => {
-            const stateTokens = getTokens(buttonState)
+            const stateTokens = getTokens(buttonState, selectMobileTokens(themeTokens))
             const IconComponent = stateTokens.icon
             const switchStyles = selectSwitchStyles(stateTokens)
             const trackStyles = selectTrackStyles(stateTokens)

package/src/Validator/Validator.jsx

@@ -24,7 +24,7 @@ const Validator = React.forwardRef(
 
     const { supportsProps } = selectProps(rest)
     const strValidation = supportsProps.validation
-    const [individualCodes, setIndividualCodes] = React.useState({})
+    const [, setIndividualCodes] = React.useState({})
     const [text, setText] = React.useState(value)
     const validatorsLength = 6
     const prefix = 'code'
@@ -44,75 +44,110 @@ const Validator = React.forwardRef(
     const [codeReferences, singleCodes] = React.useMemo(() => {
       const codes = []
       const valueCodes = {}
-      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      Array.from({ length: validatorsLength }, (_, i) => {
         codes[prefix + i] = React.createRef()
         valueCodes[prefix + i] = ''
         valueCodes[prefix + i + sufixValidation] = ''
-      }
-      return [codes, valueCodes]
-    }, [])
-
-    const handleSingleCodes = (codeId, val, validation) => {
-      singleCodes[codeId] = val
-      singleCodes[codeId + sufixValidation] = validation
-      /* eslint-disable no-unused-expressions */
-      setIndividualCodes({
-        ...individualCodes,
-        [codeId]: val
+        return null
       })
-    }
-
-    const changeDataMasking = (boxElement) => {
-      let charMasking = ''
-      const element = boxElement
-      if (mask && mask.length === 1) charMasking = mask
-      else if (mask && mask.length > 1) charMasking = mask.substring(0, 1)
+      return [codes, valueCodes]
+    }, [validatorsLength, prefix, sufixValidation])
 
-      if (charMasking) element.value = charMasking
-    }
+    const handleSingleCodes = React.useCallback(
+      (codeId, val, validation) => {
+        singleCodes[codeId] = val
+        singleCodes[codeId + sufixValidation] = validation
+        setIndividualCodes((prev) => ({
+          ...prev,
+          [codeId]: val
+        }))
+      },
+      [singleCodes, sufixValidation]
+    )
 
-    const handleChangeCode = () => {
-      let code = ''
-      for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
-      if (typeof onChange === 'function') onChange(code, singleCodes)
-    }
+    const changeDataMasking = React.useCallback(
+      (boxElement) => {
+        let charMasking = ''
+        const element = boxElement
+        if (mask && mask.length === 1) {
+          charMasking = mask
+        } else if (mask && mask.length > 1) {
+          charMasking = mask.substring(0, 1)
+        }
 
-    const handleChangeCodeValues = (event, codeId, nextIndex) => {
-      const codeElement = codeReferences[codeId]?.current
-      const val = event.nativeEvent?.value || event.target?.value
+        if (charMasking && element) {
+          element.value = charMasking
+        }
+      },
+      [mask]
+    )
 
-      if (Number(val).toString() === 'NaN') {
-        codeElement.value = singleCodes[codeId] ?? ''
-        return
+    const handleChangeCode = React.useCallback(() => {
+      const code = Array.from(
+        { length: validatorsLength },
+        (_, i) => singleCodes[prefix + i] || ''
+      ).join('')
+      if (typeof onChange === 'function') {
+        onChange(code, singleCodes)
       }
+    }, [validatorsLength, singleCodes, prefix, onChange])
 
-      handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
-      handleChangeCode()
-      if (nextIndex === validatorsLength) {
-        codeElement.blur()
-        changeDataMasking(codeElement)
-        return
-      }
-      if (codeElement?.value?.length > 0) {
-        codeReferences[prefix + nextIndex].current.focus()
-        changeDataMasking(codeElement)
-      }
-    }
+    const handleChangeCodeValues = React.useCallback(
+      (event, codeId, nextIndex) => {
+        const codeElement = codeReferences[codeId]?.current
+        const val = event.nativeEvent?.value || event.target?.value
+
+        // Only allow numeric characters and limit to single digit
+        const numericOnly = val.replace(/\D/g, '').substring(0, 1)
+
+        if (codeElement && codeElement.value) {
+          codeElement.value = numericOnly
+        }
+
+        handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '')
+        handleChangeCode()
+
+        if (nextIndex === validatorsLength) {
+          codeElement?.blur()
+          changeDataMasking(codeElement)
+          return
+        }
+
+        if (numericOnly.length > 0) {
+          const nextElement = codeReferences[prefix + nextIndex]?.current
+          nextElement?.focus()
+          changeDataMasking(codeElement)
+        }
+      },
+      [
+        codeReferences,
+        handleSingleCodes,
+        handleChangeCode,
+        validatorsLength,
+        changeDataMasking,
+        prefix
+      ]
+    )
 
     const handleKeyPress = (event, currentIndex, previousIndex) => {
-      if (!(event.keyCode === 8 || event.code === 'Backspace')) return
+      if (!(event.keyCode === 8 || event.code === 'Backspace')) {
+        return
+      }
       if (currentIndex > 0) {
-        codeReferences[prefix + currentIndex].current.value = ''
-        codeReferences[prefix + previousIndex].current.focus()
+        const currentElement = codeReferences[prefix + currentIndex]?.current
+        const previousElement = codeReferences[prefix + previousIndex]?.current
+
+        if (currentElement && currentElement.value) {
+          currentElement.value = ''
+        }
+        previousElement?.focus()
       }
       handleSingleCodes(prefix + currentIndex, '', '')
       handleChangeCode()
     }
 
     const getCodeComponents = () => {
-      const components = []
-
-      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      return Array.from({ length: validatorsLength }, (_, i) => {
         const codeId = prefix + i
         const codeInputProps = {
           nativeID: codeId,
@@ -120,75 +155,127 @@ const Validator = React.forwardRef(
           ref: codeReferences[codeId] ?? null,
           validation: strValidation || singleCodes[codeId + sufixValidation],
           tokens: selectCodeTextInputTokens(themeTokens),
-          onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+          onFocus: () => {
+            const element = codeReferences[codeId]?.current
+            if (Platform.OS === 'web' && element?.select) {
+              return element.select() ?? null
+            }
+            if (element?.focus) {
+              return element.focus() ?? null
+            }
+            return null
+          },
           onKeyPress: (event) => handleKeyPress(event, i, i - 1),
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
           inactive
         }
-        codeInputProps.validation || delete codeInputProps.validation
+        if (!codeInputProps.validation) {
+          delete codeInputProps.validation
+        }
 
-        components.push(
+        return (
           <View key={codeId} style={staticStyles.codeInputWidth}>
             <TextInput {...codeInputProps} />
           </View>
         )
-      }
-      return components
+      })
     }
 
     React.useEffect(() => {
-      /* eslint-disable no-unused-expressions */
-      if (Number(value).toString() !== 'NaN') setText(value)
+      if (Number(value).toString() !== 'NaN') {
+        setText(value)
+      }
     }, [value])
 
-    /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
-      for (let i = 0; i < validatorsLength; i += 1) {
-        if (mask && text[i]) codeReferences[prefix + i].current.value = mask
-        else codeReferences[prefix + i].current.value = text[i] ?? ''
+      Array.from({ length: validatorsLength }, (_, i) => {
+        const element = codeReferences[prefix + i]?.current
+        if (element && element.value !== undefined) {
+          if (mask && text[i]) {
+            element.value = mask
+          } else {
+            element.value = text[i] ?? ''
+          }
+        }
         handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
-      }
-    }, [text])
+        return null
+      })
+    }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes])
 
-    /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
       const handlePasteCode = (event) => {
+        event.preventDefault()
+
+        // Clear current state first
         setText('')
+
+        // Clear all individual input fields and their state
+        Array.from({ length: validatorsLength }, (_, i) => {
+          const element = codeReferences[prefix + i]?.current
+          if (element && element.value !== undefined) {
+            element.value = ''
+          }
+          handleSingleCodes(prefix + i, '', '')
+          return null
+        })
+
         const clipBoardText = event.clipboardData.getData('text')
-        if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText)
+
+        // Validate that input contains only digits and truncate to 6 characters
+        const numericOnly = clipBoardText.replace(/\D/g, '').substring(0, validatorsLength)
+
+        if (numericOnly.length > 0) {
+          setText(numericOnly)
+        }
       }
 
       const handleCopy = (event) => {
-        let clipBoardText = ''
-        for (let i = 0; i < validatorsLength; i += 1)
-          singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i])
+        const clipBoardText = Array.from(
+          { length: validatorsLength },
+          (_, i) => singleCodes[prefix + i] || ''
+        ).join('')
         event.clipboardData.setData('text/plain', clipBoardText)
         event.preventDefault()
       }
 
       if (Platform.OS === 'web') {
-        for (let i = 0; i < validatorsLength; i += 1) {
-          codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode)
-          codeReferences[prefix + i].current.addEventListener('copy', handleCopy)
-          codeReferences[prefix + i].current.addEventListener('input', (event) =>
-            handleChangeCodeValues(event, prefix + i, i + 1)
-          )
-        }
-      }
-
-      return () => {
-        if (Platform.oldValue === 'web') {
-          for (let i = 0; i < validatorsLength; i += 1) {
-            codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode)
-            codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy)
-            codeReferences[prefix + i]?.current?.removeEventListener('input', (event) =>
+        Array.from({ length: validatorsLength }, (_, i) => {
+          const element = codeReferences[prefix + i]?.current
+          if (element && typeof element.addEventListener === 'function') {
+            element.addEventListener('paste', handlePasteCode)
+            element.addEventListener('copy', handleCopy)
+            element.addEventListener('input', (event) =>
               handleChangeCodeValues(event, prefix + i, i + 1)
             )
           }
+          return null
+        })
+      }
+
+      return () => {
+        if (Platform.OS === 'web') {
+          Array.from({ length: validatorsLength }, (_, i) => {
+            const element = codeReferences[prefix + i]?.current
+            if (element && typeof element.removeEventListener === 'function') {
+              element.removeEventListener('paste', handlePasteCode)
+              element.removeEventListener('copy', handleCopy)
+              element.removeEventListener('input', (event) =>
+                handleChangeCodeValues(event, prefix + i, i + 1)
+              )
+            }
+            return null
+          })
         }
       }
-    }, [])
+    }, [
+      validatorsLength,
+      prefix,
+      codeReferences,
+      handleChangeCodeValues,
+      handleSingleCodes,
+      singleCodes
+    ])
 
     return (
       <InputSupports

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