@telus-uds/components-base 1.59.0 → 1.59.1

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 08 Aug 2023 23:51:39 GMT and should not be manually modified.
+This log was last generated on Mon, 21 Aug 2023 19:02:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.59.1
+
+Mon, 21 Aug 2023 19:02:53 GMT
+
+### Patches
+
+- Synced up event propagation to the relevant element taking `id` (shahzaibkhalidmalik@outlook.com)
+- fixes on tooltip component (mauricio.batresmontejo@telus.com)
+
 ## 1.59.0
 
-Tue, 08 Aug 2023 23:51:39 GMT
+Wed, 09 Aug 2023 00:02:59 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -9128,6 +9128,13 @@
             },
             "required": false,
             "description": ""
+          },
+          "nativeSubmitBtnID": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "ID for Submit button element on web"
           }
         },
         "attributes": {

package/lib/ExpandCollapse/Control.js

@@ -13,6 +13,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -150,11 +152,11 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =
       } = getControlTokens(pressableState);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectIconContainerStyles(themeTokens),
+          style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectTextContainerStyles(themeTokens),
+          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -162,6 +164,13 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =
   });
 });
 ExpandCollapseControl.displayName = 'ExpandCollapseControl';
+
+const staticStyles = _StyleSheet.default.create({
+  bubblePointerEvents: {
+    pointerEvents: 'none'
+  }
+});
+
 ExpandCollapseControl.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
   variant: _utils.variantProp.propType,

package/lib/IconButton/IconButton.js

@@ -107,7 +107,12 @@ const selectInnerStyle = _ref2 => {
     paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
     paddingRight: calculatePadding(paddingRight, borderRightWidth),
     paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   };
 };
 /**

package/lib/Search/Search.js

@@ -98,6 +98,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy = 'en',
     tokens,
     variant,
+    nativeSubmitBtnID,
     ...rest
   } = _ref3;
   const {
@@ -195,6 +196,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
           priority: 'high'
         })),
+        nativeID: nativeSubmitBtnID,
         children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
           }))
@@ -262,7 +264,12 @@ Search.propTypes = { ...selectedContainerPropTypes,
     submitButtonAccessibilityLabel: _propTypes.default.string
   })]),
   tokens: (0, _utils.getTokensPropType)('Search'),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+
+  /**
+   * ID for Submit button element on web
+   */
+  nativeSubmitBtnID: _propTypes.default.string
 };
 var _default = Search;
 exports.default = _default;

package/lib/Tabs/Tabs.js

@@ -132,6 +132,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
           ref: itemRef,
+          id: itemId,
           href: href,
           variant: variant,
           tokens: itemTokens,

package/lib/Tabs/TabsItem.js

@@ -122,6 +122,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     accessibilityState = accessibilityRole === 'tab' ? {
       selected
     } : undefined,
+    id,
     ...rawRest
   } = _ref4;
 
@@ -187,6 +188,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     href: href,
     style: getPressableStyle,
     onLayout: handleLayout,
+    nativeID: id,
     ...selectedProps,
     children: pressableState => {
       const {
@@ -234,7 +236,8 @@ TabsItem.propTypes = { ...selectedSystemPropTypes,
   index: _propTypes.default.number,
   selected: _propTypes.default.bool,
   itemPositions: itemPositionsPropType,
-  children: _propTypes.default.string
+  children: _propTypes.default.string,
+  id: _propTypes.default.string
 };
 
 const staticStyles = _StyleSheet.default.create({
@@ -250,7 +253,12 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flexGrow: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 

package/lib/Tooltip/Tooltip.native.js

@@ -125,14 +125,14 @@ const selectArrowStyles = (_ref4, _ref5) => {
     },
     left: {
       right: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
       transform: [{
         rotateZ: '-45deg'
       }]
     },
     right: {
       left: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
       transform: [{
         rotateZ: '135deg'
       }]

package/lib/Tooltip/getTooltipPosition.js

@@ -101,7 +101,7 @@ function getTooltipPosition(position, _ref2) {
     right: windowWidth - (controlX + controlWidth / 2 + tooltipWidth / 2)
   };
   const verticalBounds = {
-    top: controlY + controlHeight / 2 - tooltipHeight / 2,
+    top: controlY,
     bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
   }; // calculate absolute coordinates for each of the potential positions (relative to window)
 

package/lib-module/ExpandCollapse/Control.js

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -131,11 +132,11 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
       } = getControlTokens(pressableState);
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: selectIconContainerStyles(themeTokens),
+          style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
           children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/_jsx(View, {
-          style: selectTextContainerStyles(themeTokens),
+          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -143,6 +144,11 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 ExpandCollapseControl.displayName = 'ExpandCollapseControl';
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    pointerEvents: 'none'
+  }
+});
 ExpandCollapseControl.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('ExpandCollapseControl'),
   variant: variantProp.propType,

package/lib-module/IconButton/IconButton.js

@@ -84,7 +84,12 @@ const selectInnerStyle = _ref2 => {
     paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
     paddingRight: calculatePadding(paddingRight, borderRightWidth),
     paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   };
 };
 /**

package/lib-module/Search/Search.js

@@ -75,6 +75,7 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
     copy = 'en',
     tokens,
     variant,
+    nativeSubmitBtnID,
     ...rest
   } = _ref3;
   const {
@@ -172,6 +173,7 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
         tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
           priority: 'high'
         })),
+        nativeID: nativeSubmitBtnID,
         children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
           }))
@@ -239,6 +241,11 @@ Search.propTypes = { ...selectedContainerPropTypes,
     submitButtonAccessibilityLabel: PropTypes.string
   })]),
   tokens: getTokensPropType('Search'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+
+  /**
+   * ID for Submit button element on web
+   */
+  nativeSubmitBtnID: PropTypes.string
 };
 export default Search;

package/lib-module/Tabs/Tabs.js

@@ -110,6 +110,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
         const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
+          id: itemId,
           href: href,
           variant: variant,
           tokens: itemTokens,

package/lib-module/Tabs/TabsItem.js

@@ -98,6 +98,7 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     accessibilityState = accessibilityRole === 'tab' ? {
       selected
     } : undefined,
+    id,
     ...rawRest
   } = _ref4;
   // Convert onClick etc to onPress etc if used in an integration
@@ -160,6 +161,7 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     href: href,
     style: getPressableStyle,
     onLayout: handleLayout,
+    nativeID: id,
     ...selectedProps,
     children: pressableState => {
       const {
@@ -207,7 +209,8 @@ TabsItem.propTypes = { ...selectedSystemPropTypes,
   index: PropTypes.number,
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
-  children: PropTypes.string
+  children: PropTypes.string,
+  id: PropTypes.string
 };
 const staticStyles = StyleSheet.create({
   center: {
@@ -222,7 +225,12 @@ const staticStyles = StyleSheet.create({
   container: {
     flexGrow: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 export default withLinkRouter(TabsItem);

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

@@ -97,14 +97,14 @@ const selectArrowStyles = (_ref4, _ref5) => {
     },
     left: {
       right: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
       transform: [{
         rotateZ: '-45deg'
       }]
     },
     right: {
       left: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
       transform: [{
         rotateZ: '135deg'
       }]

package/lib-module/Tooltip/getTooltipPosition.js

@@ -94,7 +94,7 @@ function getTooltipPosition(position, _ref2) {
     right: windowWidth - (controlX + controlWidth / 2 + tooltipWidth / 2)
   };
   const verticalBounds = {
-    top: controlY + controlHeight / 2 - tooltipHeight / 2,
+    top: controlY,
     bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
   }; // calculate absolute coordinates for each of the potential positions (relative to window)
 

package/package.json

@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.59.0"
+  "version": "1.59.1"
 }

package/src/ExpandCollapse/Control.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Pressable, View, Platform } from 'react-native'
+import { Pressable, View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
@@ -101,11 +101,15 @@ const ExpandCollapseControl = forwardRef(
           return (
             <>
               {IconComponent && (
-                <View style={selectIconContainerStyles(themeTokens)}>
+                <View
+                  style={[selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                >
                   <IconComponent {...selectIconTokens(themeTokens)} />
                 </View>
               )}
-              <View style={selectTextContainerStyles(themeTokens)}>
+              <View
+                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+              >
                 {typeof children === 'function'
                   ? children(getControlState(pressableState))
                   : children}
@@ -119,6 +123,12 @@ const ExpandCollapseControl = forwardRef(
 )
 ExpandCollapseControl.displayName = 'ExpandCollapseControl'
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    pointerEvents: 'none'
+  }
+})
+
 ExpandCollapseControl.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ExpandCollapseControl'),

package/src/IconButton/IconButton.jsx

@@ -86,7 +86,12 @@ const selectInnerStyle = ({
   paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
   paddingRight: calculatePadding(paddingRight, borderRightWidth),
   paddingTop: calculatePadding(paddingTop, borderTopWidth),
-  paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
+  paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+  ...Platform.select({
+    web: {
+      pointerEvents: 'none'
+    }
+  })
 })
 
 /**

package/src/Search/Search.jsx

@@ -71,6 +71,7 @@ const Search = forwardRef(
       copy = 'en',
       tokens,
       variant,
+      nativeSubmitBtnID,
       ...rest
     },
     ref
@@ -173,6 +174,7 @@ const Search = forwardRef(
                 tokens={(buttonState) =>
                   selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
                 }
+                nativeID={nativeSubmitBtnID}
               >
                 {(buttonState) => (
                   <SubmitButtonIcon
@@ -242,7 +244,11 @@ Search.propTypes = {
     })
   ]),
   tokens: getTokensPropType('Search'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * ID for Submit button element on web
+   */
+  nativeSubmitBtnID: PropTypes.string
 }
 
 export default Search

package/src/Tabs/Tabs.jsx

@@ -127,6 +127,7 @@ const Tabs = forwardRef(
                 <TabsItem
                   ref={itemRef}
                   key={itemId}
+                  id={itemId}
                   href={href}
                   variant={variant}
                   tokens={itemTokens}

package/src/Tabs/TabsItem.jsx

@@ -91,6 +91,7 @@ const TabsItem = forwardRef(
         ? 'page'
         : undefined,
       accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
+      id,
       ...rawRest
     },
     ref
@@ -150,6 +151,7 @@ const TabsItem = forwardRef(
         href={href}
         style={getPressableStyle}
         onLayout={handleLayout}
+        nativeID={id}
         {...selectedProps}
       >
         {(pressableState) => {
@@ -199,7 +201,8 @@ TabsItem.propTypes = {
   index: PropTypes.number,
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
-  children: PropTypes.string
+  children: PropTypes.string,
+  id: PropTypes.string
 }
 
 const staticStyles = StyleSheet.create({
@@ -215,7 +218,12 @@ const staticStyles = StyleSheet.create({
   container: {
     flexGrow: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

package/src/Tooltip/Tooltip.native.jsx

@@ -61,12 +61,18 @@ const selectArrowStyles = (
     },
     left: {
       right: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top:
+        tooltipHeight <= 45
+          ? tooltipHeight / 2 - horizontalOffset
+          : tooltipHeight - (tooltipHeight - 10),
       transform: [{ rotateZ: '-45deg' }]
     },
     right: {
       left: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top:
+        tooltipHeight <= 45
+          ? tooltipHeight / 2 - horizontalOffset
+          : tooltipHeight - (tooltipHeight - 10),
       transform: [{ rotateZ: '135deg' }]
     }
   }

package/src/Tooltip/getTooltipPosition.js

@@ -71,7 +71,7 @@ function getTooltipPosition(
   }
 
   const verticalBounds = {
-    top: controlY + controlHeight / 2 - tooltipHeight / 2,
+    top: controlY,
     bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
   }