@telus-uds/components-base 3.7.1 → 3.9.0

package/lib/esm/Validator/Validator.js

@@ -37,7 +37,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     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';
@@ -55,64 +55,85 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   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] = /*#__PURE__*/React.createRef();
       valueCodes[prefix + i] = '';
       valueCodes[prefix + i + sufixValidation] = '';
-    }
+      return null;
+    });
     return [codes, valueCodes];
-  }, []);
-  const handleSingleCodes = (codeId, val, validation) => {
+  }, [validatorsLength, prefix, sufixValidation]);
+  const handleSingleCodes = React.useCallback((codeId, val, validation) => {
     singleCodes[codeId] = val;
     singleCodes[codeId + sufixValidation] = validation;
-    /* eslint-disable no-unused-expressions */
-    setIndividualCodes({
-      ...individualCodes,
+    setIndividualCodes(prev => ({
+      ...prev,
       [codeId]: val
-    });
-  };
-  const changeDataMasking = boxElement => {
+    }));
+  }, [singleCodes, sufixValidation]);
+  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);
-    if (charMasking) element.value = charMasking;
-  };
-  const handleChangeCode = () => {
-    let code = '';
-    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
-    if (typeof onChange === 'function') onChange(code, singleCodes);
-  };
-  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    if (mask && mask.length === 1) {
+      charMasking = mask;
+    } else if (mask && mask.length > 1) {
+      charMasking = mask.substring(0, 1);
+    }
+    if (charMasking && element) {
+      element.value = charMasking;
+    }
+  }, [mask]);
+  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]);
+  const handleChangeCodeValues = React.useCallback((event, codeId, nextIndex) => {
     const codeElement = codeReferences[codeId]?.current;
     const val = event.nativeEvent?.value || event.target?.value;
-    if (Number(val).toString() === 'NaN') {
-      codeElement.value = singleCodes[codeId] ?? '';
-      return;
+
+    // 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, codeElement?.value ?? singleCodes[codeId], 'success');
+    handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
-      codeElement.blur();
+      codeElement?.blur();
       changeDataMasking(codeElement);
       return;
     }
-    if (codeElement?.value?.length > 0) {
-      codeReferences[prefix + nextIndex].current.focus();
+    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,65 +141,115 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         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;
-      components.push(/*#__PURE__*/_jsx(View, {
+      if (!codeInputProps.validation) {
+        delete codeInputProps.validation;
+      }
+      return /*#__PURE__*/_jsx(View, {
         style: staticStyles.codeInputWidth,
         children: /*#__PURE__*/_jsx(TextInput, {
           ...codeInputProps
         })
-      }, codeId));
-    }
-    return components;
+      }, codeId);
+    });
   };
   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]);
-
-  /* eslint-disable react-hooks/exhaustive-deps */
+      return null;
+    });
+  }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes]);
   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));
-      }
+      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.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 => handleChangeCodeValues(event, prefix + i, i + 1));
-        }
+      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 /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     feedbackProps: {

package/lib/esm/utils/index.js

@@ -23,4 +23,5 @@ export { default as htmlAttrs } from './htmlAttrs';
 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 getSpacingScale } from './getSpacingScale';
+export { default as useVariants } from './useVariants';

package/lib/esm/utils/useDetectOutsideClick.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * 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) {
+  let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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/lib/esm/utils/useVariants.js

@@ -0,0 +1,41 @@
+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, _ref) => {
+    let [key, {
+      values,
+      type
+    } = {}] = _ref;
+    return type === 'variant' ? [...pairs, ...values.map(value => [key, value, getVariantLabel(key, value)])] : pairs;
+  }, [[undefined, undefined, 'default style']]);
+  return variants;
+};
+export default useVariants;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.5.0",
+    "@telus-uds/system-theme-tokens": "^4.7.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.7.1",
+  "version": "3.9.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.5.0",
+    "@telus-uds/system-theme-tokens": "^4.7.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.7.1",
+  "version": "3.9.0",
   "types": "types/index.d.ts"
 }

package/src/ActivityIndicator/FullScreenIndicator.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+
+const FullScreenIndicator = React.forwardRef(
+  ({ variantProps, label, labelPosition, labelMapping, backgroundColor, showLabel }, ref) => (
+    <View style={[staticStyles.fullScreenOverlay, { backgroundColor }]}>
+      <StackView
+        space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+        tokens={{ alignItems: 'center' }}
+        direction={labelMapping[labelPosition]}
+      >
+        <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+        {showLabel && <Typography>{label}</Typography>}
+      </StackView>
+    </View>
+  )
+)
+
+FullScreenIndicator.displayName = 'FullScreenIndicator'
+
+const staticStyles = StyleSheet.create({
+  fullScreenOverlay: {
+    ...Platform.select({
+      web: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: BACKDROP_Z_INDEX,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      default: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(Platform.OS === 'android' ? { elevation: 5 } : { zIndex: BACKDROP_Z_INDEX })
+      }
+    })
+  }
+})
+
+FullScreenIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  backgroundColor: PropTypes.string.isRequired
+}
+
+export default FullScreenIndicator

package/src/ActivityIndicator/InlineIndicator.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+
+const InlineIndicator = React.forwardRef(
+  ({ variantProps, label, labelPosition, labelMapping, showLabel }, ref) => (
+    <View style={staticStyles.container}>
+      <StackView
+        space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+        direction={labelMapping[labelPosition]}
+        tokens={{ alignItems: 'center' }}
+      >
+        <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+        {showLabel && <Typography>{label}</Typography>}
+      </StackView>
+    </View>
+  )
+)
+
+InlineIndicator.displayName = 'InlineIndicator'
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    display: Platform.OS === 'web' ? 'inline-flex' : 'flex',
+    alignSelf: 'flex-start'
+  }
+})
+
+InlineIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Whether the indicator sits inline with text/other elements
+   * */
+  inline: PropTypes.bool
+}
+
+export default InlineIndicator

package/src/ActivityIndicator/OverlayIndicator.jsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { BACKDROP_Z_INDEX, BACKDROP_OPACITY, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+
+const recursiveMap = (nodeChildren, fn) =>
+  React.Children.map(nodeChildren, (child) => {
+    if (!React.isValidElement(child)) return child
+    if (child.props?.children) {
+      return fn(
+        React.cloneElement(child, {
+          children: recursiveMap(child.props.children, fn)
+        })
+      )
+    }
+    return fn(child)
+  })
+
+const OverlayIndicator = React.forwardRef(
+  (
+    {
+      variantProps,
+      label,
+      labelPosition,
+      labelMapping,
+      children,
+      inline,
+      showLabel,
+      isActive = true
+    },
+    ref
+  ) => {
+    const safeChildren =
+      Platform.OS === 'web' && isActive
+        ? recursiveMap(children, (c) =>
+            React.isValidElement(c) ? React.cloneElement(c, { role: 'presentation' }) : c
+          )
+        : children
+
+    // inline + children
+    if (inline && children) {
+      return (
+        <View
+          style={[staticStyles.container, Platform.OS === 'web' && staticStyles.inlineContainer]}
+        >
+          <View style={staticStyles.backdropContainer}>{safeChildren}</View>
+          <View style={staticStyles.buttonOverlaySpinner}>
+            <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+          </View>
+        </View>
+      )
+    }
+
+    // overlay
+    return (
+      <View style={staticStyles.container}>
+        <View style={staticStyles.backdropContainer}>{safeChildren}</View>
+
+        <View
+          style={[
+            staticStyles.overlayContainer,
+            Platform.OS === 'web' && staticStyles.webOverlayContainer
+          ]}
+        >
+          <StackView
+            space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+            tokens={{ alignItems: 'center' }}
+            direction={labelMapping[labelPosition]}
+          >
+            <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+            {showLabel && <Typography>{label}</Typography>}
+          </StackView>
+        </View>
+      </View>
+    )
+  }
+)
+
+OverlayIndicator.displayName = 'OverlayIndicator'
+
+const staticStyles = StyleSheet.create({
+  container: { position: 'relative' },
+  inlineContainer: { display: 'inline-flex' },
+  backdropContainer: { opacity: BACKDROP_OPACITY },
+  overlayContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      ios: { zIndex: BACKDROP_Z_INDEX },
+      android: { elevation: 5 }
+    })
+  },
+
+  webOverlayContainer: {
+    transform: [{ translateX: '-50%' }, { translateY: '-50%' }],
+    zIndex: BACKDROP_Z_INDEX
+  },
+
+  buttonOverlaySpinner: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      web: {
+        transform: 'translate(-50%, -50%)',
+        zIndex: BACKDROP_Z_INDEX
+      },
+      default: {
+        transform: [{ translateX: -0.5 }, { translateY: -0.5 }],
+        zIndex: BACKDROP_Z_INDEX
+      }
+    })
+  }
+})
+
+OverlayIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  inline: PropTypes.bool,
+  /**
+   * Children on which the overlay is drawn
+   * */
+  children: PropTypes.node,
+  /**
+   * Controls whether the overlay is active and should apply the presentation role
+   * */
+  isActive: PropTypes.bool
+}
+
+export default OverlayIndicator