@telus-uds/components-base 2.3.0 → 2.5.0

package/lib/utils/useOverlaidPosition.js

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
+import debounce from 'lodash.debounce';
+const DEBOUNCE_DELAY = 100;
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -157,12 +159,11 @@ const useOverlaidPosition = _ref3 => {
   const readyToShow = Boolean(isShown && sourceRef.current);
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
-      var _sourceRef$current;
       let {
         window
       } = _ref5;
       const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure';
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current[measurementFunction]((x, y, width, height) => {
+      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window);
         setSourceLayout({
           x,
@@ -174,8 +175,7 @@ const useOverlaidPosition = _ref3 => {
     };
     let subscription;
     const unsubscribe = () => {
-      var _subscription;
-      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+      if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove();
       } else if (typeof Dimensions.remove === 'function') {
@@ -195,6 +195,27 @@ const useOverlaidPosition = _ref3 => {
     }
     return unsubscribe;
   }, [readyToShow]);
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleScroll = debounce(() => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    }, DEBOUNCE_DELAY);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [sourceRef]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
   const overlaidPosition = isReady ? getOverlaidPosition({
     sourceLayout,

package/lib/utils/useScrollBlocking.js

@@ -1,16 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
-  var _ref$current;
   document.body.addEventListener('touchmove', preventScrolling, {
     passive: false
   });
-  (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.addEventListener('touchmove', stopPropagation);
+  ref.current?.addEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'hidden';
 };
 const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
-  var _ref$current2;
   document.body.removeEventListener('touchmove', preventScrolling);
-  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('touchmove', stopPropagation);
+  ref.current?.removeEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'inherit';
 };
 

package/lib/utils/useSpacingScale.js

@@ -10,7 +10,7 @@ import { resolveResponsiveProp } from './useResponsiveProp';
  */
 
 const resolveSpacingOptions = space => {
-  if (!(space !== null && space !== void 0 && space.options)) return {};
+  if (!space?.options) return {};
   const {
     size,
     variant,
@@ -111,7 +111,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {

package/package.json

@@ -13,7 +13,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.2.0",
+    "@telus-uds/system-theme-tokens": "^3.3.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.3.0",
+  "version": "2.5.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -33,6 +33,9 @@ const CarouselStepTracker = React.forwardRef(
     const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
 
     if (enableDisplayMultipleItemsPerSlide) {
+      if (totalItems === 1) {
+        return null
+      }
       return (
         <>
           <Spacer space={4} />

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ExpandCollapse from '../ExpandCollapse'
+import { getTokensPropType } from '../utils'
+import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
+
+const ExpandCollapseMini = React.forwardRef(
+  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
+    const handleChange = (openPanels, event) => {
+      if (typeof onToggle === 'function') {
+        const isOpen = openPanels.length > 0
+        onToggle(event, isOpen)
+      }
+    }
+
+    return (
+      <ExpandCollapse
+        onChange={handleChange}
+        tokens={tokens}
+        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+      >
+        {(expandProps) => (
+          <ExpandCollapse.Panel
+            {...expandProps}
+            panelId={expandCollapeMiniPanelId}
+            variant={{ mini: true }}
+            controlTokens={{
+              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+              icon: null,
+              borderColor: 'transparent',
+              textLine: 'none',
+              backgroundColor: 'transparent'
+            }}
+            // TODO refactor
+            // eslint-disable-next-line react/no-unstable-nested-components
+            control={(pressableState) => (
+              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+            )}
+            controlRef={ref}
+            nativeID={nativeID}
+          >
+            {children}
+          </ExpandCollapse.Panel>
+        )}
+      </ExpandCollapse>
+    )
+  }
+)
+ExpandCollapseMini.displayName = 'ExpandCollapseMini'
+
+ExpandCollapseMini.propTypes = {
+  ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  tokens: getTokensPropType('ExpandCollapseMini')
+}
+
+export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import { Link } from '../Link'
+import { useThemeTokens } from '../ThemeProvider'
+import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
+// and a more appropriate press area, defer interaction handling to it.
+const presentationOnly = {
+  accessibilityRole: null, // Treat as regular flow content with the Control
+  pointerEvents: 'none', // Stop RNW from stopping clicks from bubbling to Control
+  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
+}
+
+const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
+  color,
+  textLine,
+  blockLineHeight: lineHeight,
+  blockFontSize: fontSize
+})
+
+const ExpandCollapseMiniControl = React.forwardRef(
+  (
+    {
+      pressableState,
+      collapseTitle,
+      expandTitle = collapseTitle,
+      iconPosition = 'right',
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { expanded, hover, focus } = pressableState || {}
+    // we only want focus outline when focusing, if user is pressing we don't want the border.
+    const { outerBorderColor } = useThemeTokens(
+      'Link',
+      {},
+      {},
+      { focus: Platform.OS !== 'web' ? expanded : focus }
+    )
+    const { size, icon, ...themeTokens } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      { expanded, focus }
+    )
+
+    // Choose hover styles when any part of Control is hoverred
+    const appearance = { ...variant, hover }
+
+    const getTokens = (linkState) => {
+      const { hover: linkHover } = linkState || {}
+      const isHovered = hover || linkHover
+
+      if (Platform.OS !== 'web') {
+        return { iconTranslateY: -1 }
+      }
+
+      if (isHovered) {
+        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+        return { iconTranslateY: (expanded ? -1 : 1) * size }
+      }
+
+      return {}
+    }
+
+    return (
+      <Link
+        variant={appearance}
+        icon={icon}
+        iconPosition={iconPosition}
+        tokens={(linkState) => ({
+          ...getTokens(linkState),
+          ...selectLinkTokens(themeTokens),
+          outerBorderColor
+        })}
+        ref={ref}
+        {...presentationOnly}
+        {...selectProps(rest)}
+      >
+        {expanded ? expandTitle : collapseTitle}
+      </Link>
+    )
+  }
+)
+
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
+
+ExpandCollapseMiniControl.propTypes = {
+  ...selectedSystemPropTypes,
+  ...Link.propTypes,
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
+  onPress: PropTypes.func,
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
+  expandTitle: PropTypes.string.isRequired,
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
+  collapseTitle: PropTypes.string.isRequired,
+  /**
+   * React Native's `Pressable`'s state object
+   */
+  pressableState: PropTypes.object,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  variant: PropTypes.object
+}
+
+export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

@@ -0,0 +1,3 @@
+import ExpandCollapseMini from './ExpandCollapseMini'
+
+export default ExpandCollapseMini

package/src/InputLabel/InputLabel.jsx

@@ -47,6 +47,8 @@ const InputLabel = React.forwardRef(
       tooltip,
       tokens,
       variant,
+      characterCount,
+      maxCharacterAllowed,
       ...rest
     },
     ref
@@ -95,12 +97,30 @@ const InputLabel = React.forwardRef(
               <Tooltip content={tooltip} copy={copy} />
             </View>
           )}
+          {maxCharacterAllowed && isHintInline && (
+            <Text style={[selectHintStyles({ ...themeTokens }), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          )}
         </View>
-        {hint && !isHintInline && (
+        {hint && !maxCharacterAllowed && !isHintInline && (
           <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
             {hint}
           </Text>
         )}
+        {hint && maxCharacterAllowed && !isHintInline && (
+          <View style={staticStyles.container}>
+            <Text
+              style={[selectHintStyles(themeTokens), staticStyles.flexHintBelow]}
+              nativeID={hintId}
+            >
+              {hint}
+            </Text>
+            <Text style={[selectHintStyles(themeTokens), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          </View>
+        )}
       </>
     )
   }
@@ -137,6 +157,14 @@ InputLabel.propTypes = {
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
+  /**
+   * Current number of characterts of an input text.
+   */
+  characterCount: PropTypes.number,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number,
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 }
@@ -148,13 +176,22 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexDirection: 'row'
   },
+  characterCountlabel: {
+    marginLeft: 'auto',
+    marginTop: 'auto'
+  },
   label: {
-    flexShrink: 1
+    flexShrink: 1,
+    alignSelf: 'center'
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
+  flexHintBelow: {
+    flexBasis: '100%',
+    flexShrink: 1
+  },
   tooltipAlign: {
     alignSelf: 'center',
     justifyContent: 'center'

package/src/InputSupports/InputSupports.jsx

@@ -6,7 +6,8 @@ import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, useCopy } from '../utils'
+import dictionary from './dictionary'
 
 const InputSupports = React.forwardRef(
   (
@@ -21,18 +22,31 @@ const InputSupports = React.forwardRef(
       feedbackProps = {},
       tooltip,
       validation,
+      maxCharacterAllowed,
+      inputValue,
       nativeID
     },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
+    const getCopy = useCopy({ dictionary, copy })
+
+    const maxCharsReachedErrorMessage =
+      inputValue?.length > maxCharacterAllowed
+        ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed)
+        : ''
+
+    const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation
 
     const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
       feedback,
       hint,
       label,
       validation,
-      nativeID
+      nativeID,
+      copy,
+      maxCharacterAllowed,
+      charactersCount: maxCharacterAllowed - inputValue?.length
     })
 
     return (
@@ -46,14 +60,18 @@ const InputSupports = React.forwardRef(
             hintId={hintId}
             tooltip={tooltip}
             forId={inputId}
+            characterCount={inputValue?.length}
+            maxCharacterAllowed={maxCharacterAllowed}
           />
         )}
-        {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
-        {feedback ? (
+        {typeof children === 'function'
+          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
+          : children}
+        {feedback || maxCharsReachedErrorMessage ? (
           <Feedback
             id={feedbackId}
-            title={feedback}
-            validation={validation}
+            title={feedback || maxCharsReachedErrorMessage}
+            validation={feedbackValidation}
             tokens={feedbackTokens}
             variant={{ icon: feedbackProps.showFeedbackIcon }}
             {...feedbackProps}
@@ -107,7 +125,15 @@ InputSupports.propTypes = {
   /**
    * ID for DOM element on web
    */
-  nativeID: PropTypes.string
+  nativeID: PropTypes.string,
+  /**
+   * The text value of a TextArea or TextInput
+   */
+  inputValue: PropTypes.string,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number
 }
 
 export default InputSupports

package/src/InputSupports/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    maxCharacters: 'Maximum %{charCount} characters',
+    charactersRemaining: '%{charCount} characters remaining',
+    maxCharsMessage: 'Must not exceed %{charCount} characters'
+  },
+  fr: {
+    maxCharacters: '%{charCount} caractères maximum',
+    charactersRemaining: '%{charCount} caractères restants',
+    maxCharsMessage: 'Ne doit pas dépasser %{charCount} caractères'
+  }
+}

package/src/InputSupports/useInputSupports.js

@@ -1,8 +1,20 @@
 import useUniqueId from '../utils/useUniqueId'
+import { useCopy } from '../utils'
+import dictionary from './dictionary'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint,
+  nativeID,
+  copy,
+  maxCharacterAllowed,
+  charactersCount
+}) => {
+  const getCopy = useCopy({ dictionary, copy })
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -11,10 +23,19 @@ const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
 
   const a11yProps = {
     accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
+    accessibilityHint: joinDefined([
+      !hasValidationError && feedback,
+      hint,
+      maxCharacterAllowed
+        ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed)
+        : undefined
+    ]), // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([
       !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
-      hint && hintId
+      hint && hintId,
+      charactersCount
+        ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount)
+        : undefined
     ]),
     accessibilityInvalid: hasValidationError
   }

package/src/Link/LinkBase.jsx

@@ -32,21 +32,15 @@ const selectOuterBorderStyles = ({
   outerBorderGap,
   borderRadius,
   outerBorderOutline
-}) =>
-  // A view wrapper with a border on native messes up inline text alignment
-  // so for now make focus styles strictly web-only
-  Platform.OS === 'web'
-    ? {
-        // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-        outline: outerBorderOutline,
-        ...applyOuterBorder({
-          outerBorderColor,
-          outerBorderWidth,
-          outerBorderGap
-        }),
-        borderRadius
-      }
-    : {}
+}) => ({
+  outline: outerBorderOutline,
+  ...applyOuterBorder({
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap
+  }),
+  borderRadius
+})
 
 const selectTextStyles = ({ color, blockFontSize }) => {
   return {
@@ -87,18 +81,19 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) =
   })
 })
 
-const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) => {
+const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX, iconTranslateY }) => {
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
    * position of the icon "->"" is aligned to the first line of the tooltip text.
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+  const translateY =
+    iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
   return {
     color,
     translateX: iconTranslateX,
-    translateY: translateY < 0 ? 0 : translateY,
+    translateY,
     size: iconSize
   }
 }
@@ -174,6 +169,7 @@ const LinkBase = React.forwardRef(
           const decorationStyles = selectDecorationStyles(themeTokens)
           return [
             outerBorderStyles,
+            staticStyles.outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -273,6 +269,17 @@ const staticStyles = StyleSheet.create({
         pointerEvents: 'none'
       }
     })
+  },
+  outerBorderStyles: {
+    ...(Platform.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    }),
+    ...(Platform.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
+    })
   }
 })
 

package/src/Modal/Modal.jsx

@@ -149,7 +149,7 @@ const Modal = React.forwardRef(
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
-    `)
+    `) || []
           )
 
           const firstElement = focusableElements[0]