@telus-uds/components-base 1.61.0 → 1.62.1

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/Link/LinkBase.js

@@ -197,10 +197,11 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
         iconPosition: iconPosition,
         space: iconSpace,
         iconProps: { ...iconProps,
-          tokens: iconTokens
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
         children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
       });
@@ -258,6 +259,12 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 export default withLinkRouter(LinkBase);

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,9 +123,11 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -163,7 +165,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);
 
@@ -235,6 +240,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsxs(View, {
       ref: floating,

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

@@ -150,9 +150,11 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -180,7 +182,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);
 
@@ -284,6 +289,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
       onPress: close,

package/lib-module/Tooltip/shared.js

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

package/lib-module/TooltipButton/TooltipButton.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -53,7 +55,7 @@ const TooltipButton = _ref3 => {
   return /*#__PURE__*/_jsx(View, {
     style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
-    }],
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
@@ -65,6 +67,14 @@ const TooltipButton = _ref3 => {
   });
 };
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
 TooltipButton.propTypes = { ...selectedSystemPropTypes,
 
   /**

package/package.json

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

package/src/Icon/Icon.jsx

@@ -7,7 +7,15 @@ import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
 const Icon = forwardRef(
   (
-    { icon: IconComponent, accessibilityLabel, variant, tokens, scalesWithText = false, dataSet },
+    {
+      icon: IconComponent,
+      accessibilityLabel,
+      variant,
+      tokens,
+      scalesWithText = false,
+      style = {},
+      dataSet
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('Icon', tokens, variant)
@@ -32,7 +40,8 @@ const Icon = forwardRef(
             themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''
           ]
             .filter((exists) => exists)
-            .join(' ')
+            .join(' '),
+          ...style
         }}
         dataSet={dataSet}
       >
@@ -55,7 +64,17 @@ export const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: PropTypes.bool
+  scalesWithText: PropTypes.bool,
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
 }
 
 Icon.propTypes = {

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/Link/LinkBase.jsx

@@ -180,9 +180,20 @@ const LinkBase = forwardRef(
               icon={IconComponent}
               iconPosition={iconPosition}
               space={iconSpace}
-              iconProps={{ ...iconProps, tokens: iconTokens }}
+              iconProps={{
+                ...iconProps,
+                tokens: iconTokens,
+                style: staticStyles.bubblePointerEvents
+              }}
             >
-              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>
+              <Text
+                style={[
+                  textStyles,
+                  blockTextStyles,
+                  staticStyles.baseline,
+                  staticStyles.bubblePointerEvents
+                ]}
+              >
                 {typeof children === 'function' ? children(linkState) : children}
               </Text>
             </IconText>
@@ -239,6 +250,13 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

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,18 @@ 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,
+      nativeID,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -118,7 +129,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 }) => ({
@@ -180,6 +194,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/Tooltip.native.jsx

@@ -109,7 +109,18 @@ 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,
+      nativeID,
+      ...rest
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false)
@@ -133,7 +144,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 }) => ({
@@ -239,6 +253,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)