@telus-uds/components-base 1.61.0 → 1.62.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 12 Sep 2023 23:35:19 GMT and should not be manually modified.
+This log was last generated on Fri, 15 Sep 2023 20:56:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.62.0
+
+Fri, 15 Sep 2023 20:56:52 GMT
+
+### Minor changes
+
+- TextInputBase component changed to match with design intention for the IconButton (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: Add `onPress` callback function to be triggered when tooltip button is clicked (shahzaibkhalidmalik@outlook.com)
+
 ## 1.61.0
 
-Tue, 12 Sep 2023 23:35:19 GMT
+Tue, 12 Sep 2023 23:39:14 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -799,7 +799,9 @@
         "iconSize": "size",
         "iconScale": "iconScale",
         "iconTranslateX": "size",
-        "iconTranslateY": "size"
+        "iconTranslateY": "size",
+        "height": "size",
+        "width": "size"
       },
       "Link": {
         "color": "color",
@@ -6527,7 +6529,9 @@
                 "iconSize": "size",
                 "iconScale": "iconScale",
                 "iconTranslateX": "size",
-                "iconTranslateY": "size"
+                "iconTranslateY": "size",
+                "height": "size",
+                "width": "size"
               }
             },
             "required": false,
@@ -9718,28 +9722,6 @@
         "docs": {
           "description": "`SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.\n\n This component can only be accessed as a name-spaced component: `SideNav.Item`.",
           "props": {
-            "isActive": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function."
-            },
-            "isExpanded": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent."
-            },
             "accessibilityRole": {
               "defaultValue": {
                 "value": "'link'",
@@ -9749,7 +9731,7 @@
                 "name": "string"
               },
               "required": false,
-              "description": "Accesibility Role"
+              "description": ""
             },
             "children": {
               "type": {
@@ -9758,20 +9740,6 @@
               "required": true,
               "description": "Text content of the `Item`."
             },
-            "itemId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of active item."
-            },
-            "groupId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of expanded items groups."
-            },
             "onPress": {
               "type": {
                 "name": "func"
@@ -9825,6 +9793,13 @@
               "required": false,
               "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
             },
+            "testID": {
+              "type": {
+                "name": "number"
+              },
+              "required": false,
+              "description": ""
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -9872,13 +9847,6 @@
               },
               "required": false,
               "description": ""
-            },
-            "testID": {
-              "type": {
-                "name": "number"
-              },
-              "required": false,
-              "description": "test ID"
             }
           },
           "attributes": {
@@ -11291,6 +11259,17 @@
             "required": false,
             "description": "Select English or French copy for the accessible label."
           },
+          "onPress": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Callback function triggered when the tooltip is pressed."
+          },
           "inline": {
             "defaultValue": {
               "value": "false",

package/lib/IconButton/IconButton.js

@@ -31,9 +31,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? {
+    width,
+    height
+  } : {};
+};
+
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectOuterStyle = _ref => {
+const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
     outerBorderWidth,
@@ -44,7 +52,9 @@ const selectOuterStyle = _ref => {
     borderTopRightRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
-    shadow
+    shadow,
+    width,
+    height
   } = _ref;
   return [{
     backgroundColor,
@@ -59,10 +69,13 @@ const selectOuterStyle = _ref => {
       outerBorderColor,
       outerBorderGap
     }),
+    ...getPasswordDimensions(password, width, height),
     ..._Platform.default.select({
       web: {
         outline: 'none',
-        display: 'inline-flex'
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
     })
   }, staticStyles.outer];
@@ -71,7 +84,7 @@ const selectOuterStyle = _ref => {
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
 
 
-const selectInnerStyle = _ref2 => {
+const selectInnerStyle = (_ref2, password) => {
   let {
     borderColor,
     borderWidth,
@@ -88,7 +101,9 @@ const selectInnerStyle = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    width,
+    height
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
@@ -110,9 +125,13 @@ const selectInnerStyle = _ref2 => {
     paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
     ..._Platform.default.select({
       web: {
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
-    })
+    }),
+    ...getPasswordDimensions(password, width, height)
   };
 };
 /**
@@ -158,7 +177,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
 
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -171,7 +190,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectInnerStyle(themeTokens),
+        style: selectInnerStyle(themeTokens, variant.password),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,

package/lib/SideNav/Item.js

@@ -138,13 +138,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: _propTypes.default.string,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: _propTypes.default.string,
@@ -158,28 +158,20 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: _propTypes.default.bool,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType,
-
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: _propTypes.default.string,
-
-  /**
-   * test ID
-   */
-  testID: _propTypes.default.number
+  testID: _propTypes.default.number,
+  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  variant: _utils.variantProp.propType
 };
 var _default = Item;
 exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -295,7 +295,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       variant: {
         compact: true,
         password: true,
-        inactive: !!variant.inactive
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
       }
     }, !showPassword ? 'hide' : 'show'));
   }

package/lib/Tooltip/Tooltip.js

@@ -149,6 +149,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -189,7 +190,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib/Tooltip/Tooltip.native.js

@@ -178,6 +178,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -209,7 +210,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib/Tooltip/shared.js

@@ -37,6 +37,11 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: _propTypes.default.bool,
+
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib-module/IconButton/IconButton.js

@@ -6,11 +6,20 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
 import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon';
+import Icon from '../Icon'; // function to get the dimentionals of the conditionals
+
 import { jsx as _jsx } from "react/jsx-runtime";
+
+const getPasswordDimensions = (password, width, height) => {
+  return password ? {
+    width,
+    height
+  } : {};
+};
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectOuterStyle = _ref => {
+const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
     outerBorderWidth,
@@ -21,7 +30,9 @@ const selectOuterStyle = _ref => {
     borderTopRightRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
-    shadow
+    shadow,
+    width,
+    height
   } = _ref;
   return [{
     backgroundColor,
@@ -36,10 +47,13 @@ const selectOuterStyle = _ref => {
       outerBorderColor,
       outerBorderGap
     }),
+    ...getPasswordDimensions(password, width, height),
     ...Platform.select({
       web: {
         outline: 'none',
-        display: 'inline-flex'
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
     })
   }, staticStyles.outer];
@@ -48,7 +62,7 @@ const selectOuterStyle = _ref => {
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
 
 
-const selectInnerStyle = _ref2 => {
+const selectInnerStyle = (_ref2, password) => {
   let {
     borderColor,
     borderWidth,
@@ -65,7 +79,9 @@ const selectInnerStyle = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    width,
+    height
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
@@ -87,9 +103,13 @@ const selectInnerStyle = _ref2 => {
     paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
     ...Platform.select({
       web: {
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
-    })
+    }),
+    ...getPasswordDimensions(password, width, height)
   };
 };
 /**
@@ -133,7 +153,7 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
 
   const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
 
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState)));
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
 
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
@@ -146,7 +166,7 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     children: pressableState => {
       const themeTokens = getTokens(resolvePressableState(pressableState));
       return /*#__PURE__*/_jsx(View, {
-        style: selectInnerStyle(themeTokens),
+        style: selectInnerStyle(themeTokens, variant.password),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,

package/lib-module/SideNav/Item.js

@@ -116,13 +116,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -136,27 +136,19 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType,
-
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: PropTypes.string,
-
-  /**
-   * test ID
-   */
-  testID: PropTypes.number
+  testID: PropTypes.number,
+  tokens: getTokensPropType('SideNavItem'),
+  variant: variantProp.propType
 };
 export default Item;

package/lib-module/TextInput/TextInputBase.js

@@ -269,7 +269,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
       variant: {
         compact: true,
         password: true,
-        inactive: !!variant.inactive
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
       }
     }, !showPassword ? 'hide' : 'show'));
   }

package/lib-module/Tooltip/Tooltip.js

@@ -123,6 +123,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -163,7 +164,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
   });
   const themeTokens = useThemeTokens('Tooltip', tokens, variant);
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib-module/Tooltip/Tooltip.native.js

@@ -150,6 +150,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -180,7 +181,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib-module/Tooltip/shared.js

@@ -26,6 +26,11 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: PropTypes.bool,
+
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: PropTypes.func,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };

package/package.json

@@ -74,5 +74,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.61.0"
+  "version": "1.62.0"
 }

package/src/IconButton/IconButton.jsx

@@ -18,20 +18,30 @@ import {
 } from '../utils'
 import Icon from '../Icon'
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? { width, height } : {}
+}
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectOuterStyle = ({
-  backgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  borderRadius,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  shadow
-}) => [
+const selectOuterStyle = (
+  {
+    backgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    shadow,
+    width,
+    height
+  },
+  password
+) => [
   {
     backgroundColor,
     ...applyShadowToken(shadow),
@@ -45,31 +55,44 @@ const selectOuterStyle = ({
       outerBorderColor,
       outerBorderGap
     }),
-    ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
+    ...getPasswordDimensions(password, width, height),
+    ...Platform.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    })
   },
   staticStyles.outer
 ]
 
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth) // Stable size as border changes
 
-const selectInnerStyle = ({
-  borderColor,
-  borderWidth,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  borderRadius,
-  padding = 0,
-  borderTopWidth,
-  borderRightWidth,
-  borderBottomWidth,
-  borderLeftWidth,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom
-}) => ({
+const selectInnerStyle = (
+  {
+    borderColor,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    width,
+    height
+  },
+  password
+) => ({
   // Inner borders animate with the icon and should be treated like a themable feature of the icon
   borderColor,
   borderRadius,
@@ -89,9 +112,13 @@ const selectInnerStyle = ({
   paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
   ...Platform.select({
     web: {
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
-  })
+  }),
+  ...getPasswordDimensions(password, width, height)
 })
 
 /**
@@ -124,7 +151,7 @@ const IconButton = forwardRef(
 
     const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
     const getOuterStyle = (pressableState) =>
-      selectOuterStyle(getTokens(resolvePressableState(pressableState)))
+      selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password))
 
     return (
       <Pressable
@@ -139,7 +166,7 @@ const IconButton = forwardRef(
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
           return (
-            <View style={selectInnerStyle(themeTokens)}>
+            <View style={selectInnerStyle(themeTokens, variant.password)}>
               <Icon
                 icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}

package/src/SideNav/Item.jsx

@@ -111,12 +111,12 @@ Item.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -128,25 +128,19 @@ Item.propTypes = {
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType,
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: PropTypes.string,
-  /**
-   * test ID
-   */
-  testID: PropTypes.number
+  testID: PropTypes.number,
+  tokens: getTokensPropType('SideNavItem'),
+  variant: variantProp.propType
 }
 
 export default Item

package/src/TextInput/TextInputBase.jsx

@@ -253,7 +253,8 @@ const TextInputBase = forwardRef(
           icon={!showPassword ? passwordShowButtonIcon : passwordHideButtonIcon}
           key={!showPassword ? 'hide' : 'show'}
           onPress={handleShowOrHide}
-          variant={{ compact: true, password: true, inactive: !!variant.inactive }}
+          variant={{ compact: true, password: true, inactive: variant.inactive, size: 'large' }}
+          tokens={{ width: 40, height: 40 }}
         />
       )
     }

package/src/Tooltip/Tooltip.jsx

@@ -83,7 +83,17 @@ const defaultControl = (pressableState, variant) => (
  */
 const Tooltip = forwardRef(
   (
-    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -118,7 +128,10 @@ const Tooltip = forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({

package/src/Tooltip/Tooltip.native.jsx

@@ -109,7 +109,17 @@ const defaultControl = (pressableState, variant) => (
  */
 const Tooltip = forwardRef(
   (
-    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -133,7 +143,10 @@ const Tooltip = forwardRef(
       return () => subscription?.remove()
     })
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({

package/src/Tooltip/shared.js

@@ -24,6 +24,10 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: PropTypes.bool,
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: PropTypes.func,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }