@telus-uds/components-base 1.91.0 → 1.92.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 12 Aug 2024 06:26:58 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:26:58 GMT
+Mon, 12 Aug 2024 06:35: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/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-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/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/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.61.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.91.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/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}