@telus-uds/components-base 3.8.0 → 3.10.0

package/CHANGELOG.md

@@ -1,17 +1,41 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 23 May 2025 15:12:18 GMT and should not be manually modified.
+This log was last generated on Tue, 24 Jun 2025 18:53:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.10.0
+
+Tue, 24 Jun 2025 18:53:53 GMT
+
+### Minor changes
+
+- `ButtonGroup`: equalWidth variant added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.8.0
+
+## 3.9.0
+
+Tue, 10 Jun 2025 20:25:05 GMT
+
+### Minor changes
+
+- `ToggleSwitch`: update UI for mobile devices (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: preservation of original case (uppercase/lowercase) for label when using custom dictionary prop enabled" (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.7.0
+
+### Patches
+
+- `MultiSelectFilter`: add containerBorderColor token (sergio.ramirez@telus.com)
+- `Validator`: concatenation and 6-digit limit bugs fixed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.8.0
 
-Fri, 23 May 2025 15:12:18 GMT
+Fri, 23 May 2025 15:15:58 GMT
 
 ### Minor changes
 
 - `ActivityIndicator`: new `Spinner` functionalities added because it will be deprecated soon (35577399+JoshHC@users.noreply.github.com)
-- `MultiSelectFilter`: close the overlay box when we click outside  (sergio.ramirez@telus.com)
+- `MultiSelectFilter`: close the overlay box when we click outside (sergio.ramirez@telus.com)
 - `Notification`: feature variant added for allium, koodo and pm (35577399+JoshHC@users.noreply.github.com)
 - Bump @telus-uds/system-theme-tokens to v4.6.0
 

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -408,7 +408,10 @@ const dictionaryContentShape = _propTypes.default.shape({
 Autocomplete.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Can be used to provide a function that renders a custom input:
+   * Can be used to provide a function that renders a custom input.
+   *
+   * @example
+   * ```jsx
    * <Autocomplete items={items} value={currentValue}>
    *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
    *     <Search
@@ -422,6 +425,7 @@ Autocomplete.propTypes = {
    *     />
    *   )}
    * </Autocomplete>
+   * ```
    */
   children: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Autocomplete'),

package/lib/cjs/Button/ButtonBase.js

@@ -24,7 +24,23 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-const selectOuterContainerStyles = _ref2 => {
+const selectFlexAndWidthStyles = _ref2 => {
+  let {
+    width,
+    flex
+  } = _ref2;
+  const styles = {};
+  if (width !== undefined && width !== null) {
+    styles.width = width;
+  }
+  if (width === '100%') {
+    styles.flex = 1;
+  } else if (flex !== undefined && flex !== null) {
+    styles.flex = flex;
+  }
+  return styles;
+};
+const selectOuterContainerStyles = _ref3 => {
   let {
     opacity,
     outerBorderColor,
@@ -32,7 +48,7 @@ const selectOuterContainerStyles = _ref2 => {
     outerBorderGap,
     borderRadius,
     outerBackgroundColor
-  } = _ref2;
+  } = _ref3;
   return {
     ..._Platform.default.select({
       native: {
@@ -49,13 +65,13 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-const selectOuterSizeStyles = _ref3 => {
+const selectOuterSizeStyles = _ref4 => {
   let {
     outerBorderGap,
     outerBorderWidth,
     width,
     height
-  } = _ref3;
+  } = _ref4;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({
@@ -100,7 +116,7 @@ const selectOuterSizeStyles = _ref3 => {
   sizeStyles.height = height;
   return sizeStyles;
 };
-const selectInnerContainerStyles = _ref4 => {
+const selectInnerContainerStyles = _ref5 => {
   let {
     backgroundColor,
     paddingLeft,
@@ -114,14 +130,14 @@ const selectInnerContainerStyles = _ref4 => {
     borderTopWidth,
     borderBottomWidth,
     minWidth
-  } = _ref4;
+  } = _ref5;
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = _ref5 => {
+  const offsetBorder = _ref6 => {
     let {
       value,
       borderSize = borderWidth
-    } = _ref5;
+    } = _ref6;
     return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
   };
   return {
@@ -146,7 +162,7 @@ const selectInnerContainerStyles = _ref4 => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
-const selectBorderStyles = _ref6 => {
+const selectBorderStyles = _ref7 => {
   let {
     borderColor,
     borderWidth,
@@ -155,7 +171,7 @@ const selectBorderStyles = _ref6 => {
     borderRightWidth,
     borderTopWidth,
     borderBottomWidth
-  } = _ref6;
+  } = _ref7;
   return {
     borderColor,
     borderWidth,
@@ -166,7 +182,7 @@ const selectBorderStyles = _ref6 => {
     borderBottomWidth
   };
 };
-const selectTextStyles = (_ref7, themeOptions) => {
+const selectTextStyles = (_ref8, themeOptions) => {
   let {
     fontSize,
     color,
@@ -176,7 +192,7 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref7;
+  } = _ref8;
   return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
     color,
@@ -189,10 +205,10 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
   let {
     accessibilityRole
-  } = _ref8;
+  } = _ref9;
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -205,27 +221,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref9 => {
+const selectButtonStyles = _ref10 => {
   let {
     textAlign
-  } = _ref9;
+  } = _ref10;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref10 => {
+const selectItemIconTokens = _ref11 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref10;
+  } = _ref11;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   let {
     id,
     href,
@@ -240,7 +256,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref11;
+  } = _ref12;
   const {
     onPress,
     ...rest
@@ -254,7 +270,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
   const systemProps = selectProps(rest);
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
+    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
+    const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const {
     themeOptions

package/lib/cjs/Button/ButtonGroup.js

@@ -19,6 +19,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const getStackWrapTokens = variant => {
+  return _Platform.default.select({
+    web: {
+      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
+      width: variant?.width === 'equal' ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -51,7 +60,12 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const themeStackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const variantStackTokens = getStackWrapTokens(variant);
+  const stackTokens = {
+    ...themeStackTokens,
+    ...variantStackTokens
+  };
   const {
     direction,
     space,
@@ -61,7 +75,15 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const getButtonTokens = state => {
+    const themeButtonTokens = themeButtonTokensCallback(state);
+    return {
+      ...themeButtonTokens,
+      width: variant?.width === 'equal' ? '100%' : 'auto',
+      flex: variant?.width === 'equal' ? 1 : undefined
+    };
+  };
   const {
     currentValues,
     toggleOneValue
@@ -104,7 +126,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       padding,
       ...(_Platform.default.OS === 'web' ? {
         gap,
-        width: 'fit-content'
+        width: variant?.width === 'equal' ? '100%' : 'fit-content'
       } : {
         alignSelf: 'flex-start'
       })

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -63,6 +63,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const selectContainerStyle = (enableFullscreen, themeTokens) => ({
   borderColor: themeTokens.borderColor,
+  backgroundColor: themeTokens.backgroundColor,
   ..._Platform.default.select({
     web: {
       position: enableFullscreen ? 'fixed' : 'absolute'
@@ -114,7 +115,8 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     maxHeight: maxHeightSize
   };
   const {
-    closeIcon: CloseIconComponent
+    closeIcon: CloseIconComponent,
+    backgroundColor
   } = themeTokens;
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
@@ -127,7 +129,10 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
-        tokens: staticStyles.card,
+        tokens: {
+          ...staticStyles.card,
+          backgroundColor
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -142,6 +142,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonBackgroundColor,
     iconColorSelected,
     buttonBackgroundColorSelected,
+    containerBorderColor,
     ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
@@ -287,7 +288,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             ...headerStyles,
             lineHeight: headerLineHeight
           },
-          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label)
         })
       })
     }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -308,6 +309,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       style: styles.options,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
         onLayout: handleScrollViewLayout,
+        style: styles.scrollContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
           distribute: "between",
           onLayout: handleRowLayout,
@@ -326,12 +328,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     })]
   });
   const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isScrolling ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    children: [isScrolling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       tokens: {
         color: dividerColor
-      },
-      space: 4
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 4
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlsTokens(restTokens),
@@ -388,7 +389,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       minWidth: windowWidth,
       tokens: {
         ...tokens,
-        maxWidth: true
+        maxWidth: true,
+        borderColor: containerBorderColor
       },
       copy: copy,
       isReady: isReady,
@@ -414,7 +416,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       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,
@@ -442,6 +445,9 @@ const styles = _StyleSheet.default.create({
   },
   options: {
     flex: 1
+  },
+  scrollContainer: {
+    padding: 1
   }
 });
 

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -101,6 +101,17 @@ const selectSwitchStyles = _ref6 => {
     })
   };
 };
+const selectMobileTokens = tokens => ({
+  ..._Platform.default.select({
+    web: {},
+    default: {
+      switchSize: tokens?.mobileSwitchSize,
+      trackHeight: tokens?.mobileTrackHeight,
+      width: tokens?.mobileWidth,
+      trackBorderWidth: tokens?.mobileTrackBorderWidth
+    }
+  })
+});
 const selectLabelStyles = _ref7 => {
   let {
     labelMarginLeft
@@ -153,7 +164,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     onChange
   });
   const handlePress = event => setValue(!currentValue, event);
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState), getTokens(themeTokens));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState, selectMobileTokens(themeTokens)), getTokens(themeTokens, selectMobileTokens(themeTokens)));
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -186,7 +197,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
       onPress: handlePress,
       ...selectProps(rest),
       children: buttonState => {
-        const stateTokens = getTokens(buttonState);
+        const stateTokens = getTokens(buttonState, selectMobileTokens(themeTokens));
         const IconComponent = stateTokens.icon;
         const switchStyles = selectSwitchStyles(stateTokens);
         const trackStyles = selectTrackStyles(stateTokens);