@telus-uds/components-base 1.90.0 → 1.92.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 26 Jul 2024 21:17:56 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Aug 2024 18:17:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.92.0
+
+Thu, 22 Aug 2024 18:17:39 GMT
+
+### Minor changes
+
+- `Select`: Add `active` variant (Mauricio.BatresMontejo@telus.com)
+- MultiSelectFilter: onOpen function added to component, the function is called when the modal is opened (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.62.0
+
+### Patches
+
+- `carouseltabspanel`: pass accessibilityRole of presentation to divider so align with accessibility tests (<tony.eng@telus.com>)
+
+## 1.91.0
+
+Mon, 12 Aug 2024 06:35:32 GMT
+
+### Minor changes
+
+- OrderedList: add itemTextColor token and pass tokens down to children (jacqui.koroll@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.61.0
+
+### Patches
+
+- `TextInputBase`: Update padding logic for TextInput component based on icon and buttons presence (jaime.tuyuc@telus.com)
+
 ## 1.90.0
 
-Fri, 26 Jul 2024 21:17:56 GMT
+Fri, 26 Jul 2024 21:24:32 GMT
 
 ### Minor changes
 

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -47,7 +47,9 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       direction: "row",
       space: 3,
       divider: {
-        variant: dividerVariant
+        variant: dividerVariant,
+        accessibilityRole: 'presentation',
+        accessibilityOrientation: null
       },
       ref: ref,
       accessibilityRole: "tablist",

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -66,6 +66,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     onChange,
     onConfirm = () => {},
     onCancel = () => {},
+    onOpen = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
@@ -136,6 +137,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {
@@ -452,6 +454,10 @@ MultiSelectFilter.propTypes = {
    * If provided, this function is called when the selection is confirmed.
    */
   onConfirm: _propTypes.default.func,
+  /**
+   * If provided, this function is called when the modal with options is opened.
+   * */
+  onOpen: _propTypes.default.func,
   /**
    * If provided, this function is called when `MultiSelectFilter` is closed.
    * */

package/lib/OrderedList/Item.js

@@ -21,13 +21,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return (0, _ThemeProvider.applyTextStyles)({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -41,10 +42,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...(0, _ThemeProvider.applyTextStyles)({
@@ -82,7 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib/OrderedList/OrderedList.js

@@ -17,29 +17,36 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = _react.default.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/_react.default.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
     ref: ref,
     ...selectProps(rest),
@@ -56,7 +63,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = _Item.default;

package/lib/Select/Picker.js

@@ -18,6 +18,8 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    onOpen = () => {},
+    onClose = () => {},
     style,
     inactive,
     children,
@@ -32,29 +34,44 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityDescribedBy,
     accessibilityInvalid
   } = rest;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-    ref: ref,
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value, event),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID,
-    ...selectedProps,
-    children: [placeholder !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-      value: placeholder.value,
-      disabled: true,
-      hidden: true,
-      children: placeholder.label
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    /**
+     * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
+     * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
+     * when is selected and oClose is in onMouseOut and onChange when the select is closed.
+     */
+    (0, _jsxRuntime.jsxs)("select", {
+      ref: ref,
+      style: style,
+      onMouseOver: onMouseOver,
+      onMouseOut: () => {
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      },
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseDown: onOpen,
+      disabled: inactive,
+      value: value || (placeholder !== undefined ? placeholder.value : undefined),
+      onChange: event => {
+        onClose();
+        onChange(event.target.value, event);
+      },
+      id: nativeID,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": accessibilityDescribedBy,
+      "aria-invalid": accessibilityInvalid,
+      "data-testid": testID,
+      ...selectedProps,
+      children: [placeholder !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: placeholder.value,
+        disabled: true,
+        hidden: true,
+        children: placeholder.label
+      }), children]
+    })
+  );
 });
 Picker.displayName = 'Picker';
 var _default = Picker;
@@ -67,6 +84,14 @@ Picker.propTypes = {
   onBlur: _propTypes.default.func,
   onMouseOver: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
+  /**
+   * It executes when the select choices are open
+   */
+  onOpen: _propTypes.default.func,
+  /**
+   * It executes when the select choices are closed
+   */
+  onClose: _propTypes.default.func,
   style: _propTypes.default.object,
   inactive: _propTypes.default.bool,
   children: (0, _utils.componentPropType)(['Item', 'Group']),

package/lib/Select/Select.js

@@ -217,6 +217,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   const [isHovered, setIsHovered] = _react.default.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
   const {
     supportsProps,
     ...selectedProps
@@ -225,6 +226,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     focus: isFocused,
     hover: isHovered,
     inactive,
+    active: isOpen,
     validation
   });
   const {
@@ -253,6 +255,8 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
+          onOpen: () => setIsOpen(true),
+          onClose: () => setIsOpen(false),
           onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,

package/lib/TextInput/TextInputBase.js

@@ -19,7 +19,7 @@ var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -35,12 +35,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -67,7 +70,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -75,7 +81,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -343,7 +349,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -41,7 +41,9 @@ const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       direction: "row",
       space: 3,
       divider: {
-        variant: dividerVariant
+        variant: dividerVariant,
+        accessibilityRole: 'presentation',
+        accessibilityOrientation: null
       },
       ref: ref,
       accessibilityRole: "tablist",

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -61,6 +61,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onChange,
     onConfirm = () => {},
     onCancel = () => {},
+    onOpen = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
@@ -131,6 +132,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {
@@ -447,6 +449,10 @@ MultiSelectFilter.propTypes = {
    * If provided, this function is called when the selection is confirmed.
    */
   onConfirm: PropTypes.func,
+  /**
+   * If provided, this function is called when the modal with options is opened.
+   * */
+  onOpen: PropTypes.func,
   /**
    * If provided, this function is called when `MultiSelectFilter` is closed.
    * */

package/lib-module/OrderedList/Item.js

@@ -15,13 +15,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -35,10 +36,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...applyTextStyles({
@@ -76,7 +78,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib-module/OrderedList/OrderedList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,29 +10,36 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/_jsx(OrderedListBase, {
     ref: ref,
     ...selectProps(rest),
@@ -49,7 +56,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = Item;

package/lib-module/Select/Picker.js

@@ -12,6 +12,8 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    onOpen = () => {},
+    onClose = () => {},
     style,
     inactive,
     children,
@@ -26,29 +28,44 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityDescribedBy,
     accessibilityInvalid
   } = rest;
-  return /*#__PURE__*/_jsxs("select", {
-    ref: ref,
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value, event),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID,
-    ...selectedProps,
-    children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
-      value: placeholder.value,
-      disabled: true,
-      hidden: true,
-      children: placeholder.label
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    /**
+     * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
+     * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
+     * when is selected and oClose is in onMouseOut and onChange when the select is closed.
+     */
+    _jsxs("select", {
+      ref: ref,
+      style: style,
+      onMouseOver: onMouseOver,
+      onMouseOut: () => {
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      },
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseDown: onOpen,
+      disabled: inactive,
+      value: value || (placeholder !== undefined ? placeholder.value : undefined),
+      onChange: event => {
+        onClose();
+        onChange(event.target.value, event);
+      },
+      id: nativeID,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": accessibilityDescribedBy,
+      "aria-invalid": accessibilityInvalid,
+      "data-testid": testID,
+      ...selectedProps,
+      children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
+        value: placeholder.value,
+        disabled: true,
+        hidden: true,
+        children: placeholder.label
+      }), children]
+    })
+  );
 });
 Picker.displayName = 'Picker';
 export default Picker;
@@ -60,6 +77,14 @@ Picker.propTypes = {
   onBlur: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  /**
+   * It executes when the select choices are open
+   */
+  onOpen: PropTypes.func,
+  /**
+   * It executes when the select choices are closed
+   */
+  onClose: PropTypes.func,
   style: PropTypes.object,
   inactive: PropTypes.bool,
   children: componentPropType(['Item', 'Group']),

package/lib-module/Select/Select.js

@@ -211,6 +211,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     supportsProps,
     ...selectedProps
@@ -219,6 +220,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     focus: isFocused,
     hover: isHovered,
     inactive,
+    active: isOpen,
     validation
   });
   const {
@@ -247,6 +249,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
+          onOpen: () => setIsOpen(true),
+          onClose: () => setIsOpen(false),
           onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,

package/lib-module/TextInput/TextInputBase.js

@@ -13,7 +13,7 @@ import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -29,12 +29,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -61,7 +64,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -69,7 +75,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -337,7 +343,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/_jsx(View, {

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.60.0",
+    "@telus-uds/system-theme-tokens": "^2.62.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.90.0",
+  "version": "1.92.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -35,7 +35,11 @@ const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
       <StackView
         direction="row"
         space={3}
-        divider={{ variant: dividerVariant }}
+        divider={{
+          variant: dividerVariant,
+          accessibilityRole: 'presentation',
+          accessibilityOrientation: null
+        }}
         ref={ref}
         accessibilityRole="tablist"
       >

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -57,6 +57,7 @@ const MultiSelectFilter = React.forwardRef(
       onChange,
       onConfirm = () => {},
       onCancel = () => {},
+      onOpen = () => {},
       copy = 'en',
       readOnly = false,
       inactive = false,
@@ -124,6 +125,7 @@ const MultiSelectFilter = React.forwardRef(
 
     const handleChange = (event) => {
       if (pressHandlers.onPress) pressHandlers?.onPress(event)
+      if (isOpen) onOpen()
       setIsOpen(!isOpen)
     }
 
@@ -406,6 +408,10 @@ MultiSelectFilter.propTypes = {
    * If provided, this function is called when the selection is confirmed.
    */
   onConfirm: PropTypes.func,
+  /**
+   * If provided, this function is called when the modal with options is opened.
+   * */
+  onOpen: PropTypes.func,
   /**
    * If provided, this function is called when `MultiSelectFilter` is closed.
    * */

package/src/OrderedList/Item.jsx

@@ -17,14 +17,14 @@ import ItemBase from './ItemBase'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
 const selectItemTextStyles = (
-  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   })
@@ -37,9 +37,10 @@ const selectItemCounterStyles = ({
   itemFontName,
   itemLineHeight,
   themeOptions,
-  itemColor
+  itemColor,
+  itemTextColor
 }) => ({
-  color: itemColor,
+  color: itemColor || itemTextColor,
   width: itemBulletContainerWidth,
   textAlign: itemBulletTextAlign,
   ...applyTextStyles({
@@ -63,7 +64,7 @@ const Item = React.forwardRef(
     const headingTokens = title && {
       lineHeight: themeTokens.itemLineHeight,
       fontSize: themeTokens.itemFontSize,
-      color: themeTokens.itemColor,
+      color: themeTokens.itemColor || themeTokens.itemTextColor,
       fontName: themeTokens.headerFontName,
       fontWeight: themeTokens.headerFontWeight
     }

package/src/OrderedList/OrderedList.jsx

@@ -1,39 +1,47 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      const existingChildVariants = child.props?.variant ?? {}
-      return React.cloneElement(child, {
-        index: start + i,
-        isLastChild,
-        variant: { ...existingChildVariants, ...variant }
-      })
-    }
-
-    if (variant) {
-      if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1))
+const OrderedList = React.forwardRef(
+  ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
+    // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+    const childrenWithParentVariants = React.useMemo(() => {
+      const addVariantAndTokensToProps = (child, i, isLastChild) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        const existingChildTokens = child.props?.tokens ?? {}
+
+        return React.cloneElement(child, {
+          index: start + i,
+          isLastChild,
+          variant: { ...existingChildVariants, ...variant },
+          tokens: { ...existingChildTokens, ...tokens }
+        })
+      }
+
+      if (variant || tokens) {
+        if (Array.isArray(children)) {
+          return children.map((child, i) =>
+            addVariantAndTokensToProps(child, i, i === children.length - 1)
+          )
+        }
+        return [addVariantAndTokensToProps(children, 0, true)]
       }
-      return [addVariantToProps(children, 0, true)]
-    }
 
-    return children
-  }, [children, variant, start])
+      return children
+    }, [children, variant, start, tokens])
 
-  return (
-    <OrderedListBase ref={ref} {...selectProps(rest)}>
-      {childrenWithParentVariants}
-    </OrderedListBase>
-  )
-})
+    return (
+      <OrderedListBase ref={ref} {...selectProps(rest)}>
+        {childrenWithParentVariants}
+      </OrderedListBase>
+    )
+  }
+)
 
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
@@ -45,7 +53,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 }
 
 OrderedList.displayName = 'OrderedList'

package/src/Select/Picker.jsx

@@ -14,6 +14,8 @@ const Picker = React.forwardRef(
       onBlur,
       onMouseOver,
       onMouseOut,
+      onOpen = () => {},
+      onClose = () => {},
       style,
       inactive,
       children,
@@ -28,16 +30,28 @@ const Picker = React.forwardRef(
     const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
 
     return (
+      /**
+       * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
+       * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
+       * when is selected and oClose is in onMouseOut and onChange when the select is closed.
+       */
       <select
         ref={ref}
         style={style}
         onMouseOver={onMouseOver}
-        onMouseOut={onMouseOut}
+        onMouseOut={() => {
+          onMouseOut?.()
+          onClose?.()
+        }}
         onFocus={onFocus}
         onBlur={onBlur}
+        onMouseDown={onOpen}
         disabled={inactive}
         value={value || (placeholder !== undefined ? placeholder.value : undefined)}
-        onChange={(event) => onChange(event.target.value, event)}
+        onChange={(event) => {
+          onClose()
+          onChange(event.target.value, event)
+        }}
         id={nativeID}
         aria-label={accessibilityLabel}
         aria-describedby={accessibilityDescribedBy}
@@ -67,6 +81,14 @@ Picker.propTypes = {
   onBlur: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  /**
+   * It executes when the select choices are open
+   */
+  onOpen: PropTypes.func,
+  /**
+   * It executes when the select choices are closed
+   */
+  onClose: PropTypes.func,
   style: PropTypes.object,
   inactive: PropTypes.bool,
   children: componentPropType(['Item', 'Group']),

package/src/Select/Select.jsx

@@ -214,12 +214,15 @@ const Select = React.forwardRef(
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 
+    const [isOpen, setIsOpen] = React.useState(false)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
 
     const themeTokens = useThemeTokens('Select', tokens, variant, {
       focus: isFocused,
       hover: isHovered,
       inactive,
+      active: isOpen,
       validation
     })
 
@@ -243,6 +246,8 @@ const Select = React.forwardRef(
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}
               onMouseOut={handleMouseOut}
+              onOpen={() => setIsOpen(true)}
+              onClose={() => setIsOpen(false)}
               onChange={(e) => setValue(e, null)}
               value={currentValue}
               inactive={inactive}

package/src/TextInput/TextInputBase.jsx

@@ -42,7 +42,6 @@ const selectInputStyles = (
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
@@ -50,7 +49,11 @@ const selectInputStyles = (
   },
   themeOptions,
   inactive,
-  type
+  type,
+  buttonCount = 0,
+  buttonSize = 0,
+  buttonsGapSize = 0,
+  isPassword
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -82,7 +85,10 @@ const selectInputStyles = (
     }
   })
 
-  const paddingWithIcon = iconSize + paddingRight
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
+  const paddingWithIcon = buttonSize + adjustedPaddingRight
 
   return {
     backgroundColor,
@@ -91,7 +97,7 @@ const selectInputStyles = (
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -321,7 +327,11 @@ const TextInputBase = React.forwardRef(
       { ...themeTokens, height },
       themeOptions,
       inactive,
-      type
+      type,
+      buttons?.length,
+      themeTokens.buttonSize,
+      buttonsGapSize,
+      isPassword
     )
 
     return (