@telus-uds/components-base 3.28.0 → 3.28.2

package/lib/esm/Autocomplete/Autocomplete.js

@@ -14,7 +14,7 @@ import { TextInput } from '../TextInput';
 import InputSupports from '../InputSupports';
 import Loading from './Loading';
 import Suggestions from './Suggestions';
-import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
+import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, DEFAULT_MAX_DROPDOWN_HEIGHT, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
 import dictionary from './dictionary';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
@@ -44,22 +44,36 @@ const highlightAllMatches = function (str) {
       tokens: {
         color: resultsTextColor
       },
-      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc,
-      // Add a piece of the string up to the first occurrence of the substring
-      index === 0 && (str.slice(0, matchIndex) ?? ''),
-      /*#__PURE__*/
-      // Unbold the occurrence of the substring (while keeping the original casing)
-      _jsx(Typography, {
-        variant: {
-          bold: true
-        },
-        tokens: {
-          color: resultsTextColor
-        },
-        children: str.slice(matchIndex, matchIndex + substring.length)
-      }, matchIndex),
-      // Add the rest of the string until the next occurrence or the end of it
-      str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
+      children: matchIndexes.reduce((acc, matchIndex, index) => {
+        const prefix = index === 0 ? str.slice(0, matchIndex) : null;
+        const match = str.slice(matchIndex, matchIndex + substring.length);
+        const suffix = str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length);
+        return [...acc, prefix ? /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: prefix
+        }, `pre-${matchIndex}`) : null, /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: match
+        }, matchIndex), suffix ? /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: suffix
+        }, `post-${matchIndex}`) : null];
+      }, []).filter(Boolean)
     })
   );
 };
@@ -93,12 +107,14 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     isLoading = false,
     items,
     maxSuggestions = DEFAULT_MAX_SUGGESTIONS,
+    maxDropdownHeight = DEFAULT_MAX_DROPDOWN_HEIGHT,
     minToSuggestion = DEFAULT_MIN_TO_SUGGESTION,
     noResults,
     onChange,
     onClear,
     onSelect,
     readOnly,
+    showOptionsOnFocus = false,
     validation,
     value,
     helpText = '',
@@ -147,7 +163,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     hint,
     label: inputLabel
   } = supportsProps;
-  const hintExpansionEnabled = isFocused && helpText && !currentValue;
+  const hintExpansionEnabled = isFocused && !!helpText && !currentValue;
   const {
     overlaidPosition,
     sourceRef: inputRef,
@@ -201,9 +217,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   };
   const handleChange = newValue => {
-    onChange?.(newValue || '');
+    onChange?.(newValue);
     setCurrentValue(newValue);
-    setIsExpanded(newValue?.length >= minToSuggestion);
+    const shouldExpand = newValue?.length >= minToSuggestion || showOptionsOnFocus && isFocused && newValue?.length === 0;
+    setIsExpanded(shouldExpand);
     if (!isControlled && initialItems !== undefined) {
       setCurrentItems(initialItems.filter(_ref3 => {
         let {
@@ -215,25 +232,29 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   };
   const handleSelect = selectedId => {
     onSelect?.(selectedId);
-    const {
-      label: newValue,
-      nested,
-      title
-    } = (isControlled ? items : currentItems)?.find(_ref4 => {
+    const selectedItem = (isControlled ? items : currentItems)?.find(_ref4 => {
       let {
         id
       } = _ref4;
       return id === selectedId;
     });
+    const {
+      label,
+      nested,
+      title
+    } = selectedItem;
     if (title) return;
     if (!nested) {
       setNestedSelectedValue(null);
-      onChange?.(newValue);
+      onChange?.(label);
       setIsExpanded(false);
+      setCurrentValue(label);
+    }
+    if (!isControlled && inputRef?.current) inputRef.current.value = label;
+    if (nested) {
+      setNestedSelectedValue(label);
+      setCurrentValue(label);
     }
-    setCurrentValue(newValue);
-    if (!isControlled && inputRef?.current) inputRef.current.value = newValue;
-    if (nested) setNestedSelectedValue(newValue);
     inputRef.current.focus();
   };
 
@@ -281,15 +302,33 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     };
   }, [inputRef]);
   const handleClose = event => {
-    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !openOverlayRef?.current?.contains(event.target) || event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
+      return;
+    }
+    if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
       event.preventDefault();
       targetRef.current.focus();
+      return;
+    }
+    if (event.type === 'click' || event.type === 'touchstart') {
+      const clickTarget = event.type === 'click' ? event.target : event.touches[0]?.target;
+      const isOutsideOverlay = openOverlayRef?.current && !openOverlayRef.current.contains(clickTarget);
+      const isOutsideInput = inputRef?.current && !inputRef.current.contains(clickTarget);
+      if (isOutsideOverlay && isOutsideInput) {
+        setIsExpanded(false);
+        setNestedSelectedValue(null);
+      }
     }
   };
-  const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];
+  // Calculate items to show based on current state
+  let itemsToShow = [];
+  if (currentValue?.length > 0) {
+    itemsToShow = itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor));
+  } else if (showOptionsOnFocus && isFocused) {
+    itemsToShow = itemsToSuggest(isControlled ? items : currentItems || initialItems);
+  }
   const helpTextToShow = isFocused && !currentValue ? helpText : noResults ?? getCopy('noResults');
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
@@ -326,9 +365,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           onChange: handleChange,
           onFocus: () => {
             setisFocused(true);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(true);
+            }
           },
           onBlur: () => {
             setisFocused(false);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(false);
+            }
           },
           onClear: onClear,
           onKeyPress: handleClose,
@@ -360,12 +405,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
         minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
+        maxHeight: maxDropdownHeight,
         onLayout: handleMeasure,
         tokens: restOfTokens,
         ref: openOverlayRef,
@@ -449,6 +495,10 @@ Autocomplete.propTypes = {
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: PropTypes.number,
+  /**
+   * Maximum height (in pixels) of the dropdown before scrolling is enabled
+   */
+  maxDropdownHeight: PropTypes.number,
   /**
    * Text or JSX to render when no results are available
    */
@@ -469,6 +519,10 @@ Autocomplete.propTypes = {
    * Callback function to be called when an item is selected from the list
    */
   onSelect: PropTypes.func,
+  /**
+   * When true, displays all available options when the input receives focus (even without typing)
+   */
+  showOptionsOnFocus: PropTypes.bool,
   /**
    * Input value for controlled usage
    */

package/lib/esm/Autocomplete/constants.js

@@ -1,4 +1,5 @@
 export const DEFAULT_MIN_TO_SUGGESTION = 1;
 export const DEFAULT_MAX_SUGGESTIONS = 5;
+export const DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
 export const INPUT_LEFT_PADDING = 16;
 export const MIN_LISTBOX_WIDTH = 288;

package/lib/esm/Carousel/Carousel.js

@@ -84,7 +84,7 @@ const selectControlButtonPositionStyles = _ref => {
     isAutoPlayEnabled,
     viewport,
     maxWidth,
-    viewportWidth
+    containerWidth
   } = _ref;
   const styles = {};
   let positionOffset = 0;
@@ -100,18 +100,19 @@ const selectControlButtonPositionStyles = _ref => {
     }
   }
   if (enablePeeking) {
-    if (positionProperty === POSITION_PROPERTIES.RIGHT) {
-      const rightMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += rightMargin;
-    } else if (positionProperty === POSITION_PROPERTIES.LEFT) {
-      const leftMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += leftMargin;
-    }
+    const {
+      peekingMiddleSpace,
+      peekingGap
+    } = getPeekingProps(viewport);
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth);
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace;
+    const buttonCenter = slideRightEdge + peekingGap / 2;
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2;
   }
   styles[positionProperty] = positionOffset;
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, viewportWidth) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerWidth) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -135,7 +136,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   };
 };
@@ -272,7 +273,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
       peekingGap,
       peekingMiddleSpace
     } = getPeekingProps(viewport);
-    const baseWidth = maxWidth || containerWidth;
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth);
     finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap;
   }
   return finalWidth;
@@ -492,7 +493,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         peekingMiddleSpace
       } = getPeekingProps(viewport);
       let finalWidth;
-      const baseWidth = maxWidth || containerLayoutRef.current.width;
+      const baseWidth = Math.min(maxWidth || containerLayoutRef.current.width, containerLayoutRef.current.width);
       const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER;
       if (activeIndexRef.current === 0) {
         finalWidth = 0;
@@ -916,8 +917,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   // Related discussion - https://github.com/telus/universal-design-system/issues/1549
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: !variant?.inverse && true,
-    inverse: variant?.inverse
+    raised: true
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, totalItems);
@@ -1014,7 +1014,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               isAutoPlayEnabled,
               viewport,
               maxWidth,
-              viewportWidth: currentViewportWidth
+              containerWidth: containerLayout.width
             })],
             children: /*#__PURE__*/_jsx(IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -1023,7 +1023,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -1083,7 +1083,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -24,10 +24,10 @@ const selectContainerStyle = _ref => {
   let marginLeft = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    const baseWidth = maxWidth || width;
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2;
+    const clampedMaxWidth = Math.min(maxWidth || width, width);
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2;
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2;
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2;
     } else {
       marginLeft = peekingGap;
     }

package/lib/esm/Listbox/ListboxOverlay.js

@@ -28,6 +28,7 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isReady = false,
     overlaidPosition,
     maxWidth,
+    maxHeight,
     minWidth,
     onLayout,
     tokens,
@@ -43,12 +44,16 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    onMouseDown: e => {
+      e.preventDefault();
+    },
     children: /*#__PURE__*/_jsx(Card, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
         ...(Platform.OS === 'web' && {
-          overflowY: 'hidden'
+          maxHeight,
+          overflowY: 'auto'
         }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
@@ -78,6 +83,7 @@ DropdownOverlay.propTypes = {
     width: PropTypes.number
   }),
   maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
   tokens: PropTypes.object,

package/lib/esm/Listbox/PressableItem.js

@@ -4,7 +4,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
 import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
 import { useListboxContext } from './ListboxContext';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getItemStyles = _ref => {
   let {
@@ -122,9 +122,9 @@ const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onPress(event);
     },
     children: pressableState => {
-      return /*#__PURE__*/_jsxs(Text, {
+      return /*#__PURE__*/_jsx(Text, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
+        children: children
       });
     }
   });

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -178,6 +178,11 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setMaxWidth(items.length >= rowLimit);
   }, [items.length, rowLimit]);
   React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  React.useEffect(() => {
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -190,7 +195,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers?.onPress(event);
-    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {

package/lib/esm/TextInput/TextInputBase.js

@@ -271,8 +271,8 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     }
   }, [element, pattern]);
   const handleChangeText = event => {
-    const text = event.nativeEvent?.text || event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text;
+    const text = event.nativeEvent?.text ?? event.target?.value;
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.0",
+  "version": "3.28.2",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.0",
+  "version": "3.28.2",
   "types": "types/index.d.ts"
 }