@telus-uds/components-base 1.58.0 → 1.59.1

package/CHANGELOG.md

@@ -1,16 +1,35 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 02 Aug 2023 18:10:10 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
+
+Wed, 09 Aug 2023 00:02:59 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: Add custom `dictionary` prop and custom callback for `onConfirm` and `onCancel` (shahzaibkhalidmalik@outlook.com)
+- Added a Inverse story to Tabs stories (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.41.0
+
 ## 1.58.0
 
-Wed, 02 Aug 2023 18:10:10 GMT
+Wed, 02 Aug 2023 18:13:48 GMT
 
 ### Minor changes
 
-- added condition on applying "raised" in Carousel for next/prev buttons  (kyle.king2@telus.com)
+- added condition on applying "raised" in Carousel for next/prev buttons (kyle.king2@telus.com)
 
 ## 1.57.0
 

package/component-docs.json

@@ -76,7 +76,10 @@
         "fontName": "fontName",
         "fontSize": "fontSize",
         "lineHeight": "lineHeight",
-        "stickyBackgroundColor": "color"
+        "stickyBackgroundColor": "color",
+        "fontColor": "color",
+        "borderColor": "color",
+        "borderWidth": "border"
       },
       "Image": {
         "borderRadius": "radius"
@@ -284,7 +287,8 @@
         "footnoteLinkColor": "color",
         "footnoteLinkFontName": "fontName",
         "footnoteLinkFontWeight": "fontWeight",
-        "footnoteLinkFontSize": "fontSize"
+        "footnoteLinkFontSize": "fontSize",
+        "footnoteLinkLineHeight": "lineHeight"
       },
       "ActivityIndicator": {
         "size": "size",
@@ -7312,6 +7316,28 @@
             "required": false,
             "description": "If provided sets maxHeight to be active"
           },
+          "onConfirm": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "If provided, this function is called when the selection is confirmed."
+          },
+          "onCancel": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "If provided, this function is called when `MultiSelectFilter` is closed."
+          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -7366,6 +7392,29 @@
             "required": false,
             "description": "Sets the maximum number of items in one column. If number of items are more\nthan the `rowLimit`, they will be rendered in 2 columns."
           },
+          "dictionary": {
+            "defaultValue": {
+              "value": "{\n  en: {\n    filterByLabel: 'Filter by %{filterCategory}:',\n    applyButtonLabel: 'Apply',\n    clearButtonLabel: 'Clear'\n  },\n  fr: {\n    filterByLabel: 'Filtrer par %{filterCategory}:',\n    applyButtonLabel: 'Appliquer',\n    clearButtonLabel: 'Effacer'\n  }\n}",
+              "computed": false
+            },
+            "type": {
+              "name": "shape",
+              "value": {
+                "en": {
+                  "name": "custom",
+                  "raw": "dictionaryContentShape",
+                  "required": false
+                },
+                "fr": {
+                  "name": "custom",
+                  "raw": "dictionaryContentShape",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Custom dictionary containing the labels"
+          },
           "label": {
             "type": {
               "name": "string"
@@ -9079,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/MultiSelectFilter/MultiSelectFilter.js

@@ -93,10 +93,13 @@ const MultiSelectFilter = _ref3 => {
     initialValues,
     maxValues,
     onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
     rowLimit = 12,
+    dictionary = _dictionary.default,
     ...rest
   } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -119,7 +122,7 @@ const MultiSelectFilter = _ref3 => {
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
 
   const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
@@ -171,11 +174,19 @@ const MultiSelectFilter = _ref3 => {
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
+    onConfirm(e);
   };
 
   const onClear = () => {
     setCheckedIds(() => []);
-    onApply([]);
+    setValues([]);
+    setIsOpen(false);
+    onCancel();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onCancel();
   };
 
   const {
@@ -230,7 +241,7 @@ const MultiSelectFilter = _ref3 => {
       inactive: inactive
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
       isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           tokens: { ...headerStyles,
@@ -294,7 +305,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -302,7 +313,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       overlaidPosition: overlaidPosition,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       maxHeight: maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -380,7 +391,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -396,6 +407,13 @@ const styles = _StyleSheet.default.create({
   textContainerStyle: {
     marginRight: 52
   }
+}); // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = _propTypes.default.shape({
+  filterByLabel: _propTypes.default.string.isRequired,
+  applyButtonLabel: _propTypes.default.string.isRequired,
+  clearButtonLabel: _propTypes.default.string.isRequired
 });
 
 MultiSelectFilter.propTypes = {
@@ -472,11 +490,29 @@ MultiSelectFilter.propTypes = {
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: _propTypes.default.func,
+
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: _propTypes.default.func,
+
   /**
    * Select English or French copy for the accessible label.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
 
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */

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/MultiSelectFilter/MultiSelectFilter.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
 import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
-import dictionary from './dictionary';
+import defaultDictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
 import { Button, ButtonDropdown } from '../Button';
@@ -62,10 +62,13 @@ const MultiSelectFilter = _ref3 => {
     initialValues,
     maxValues,
     onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
     rowLimit = 12,
+    dictionary = defaultDictionary,
     ...rest
   } = _ref3;
   const viewport = useViewport();
@@ -140,11 +143,19 @@ const MultiSelectFilter = _ref3 => {
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
+    onConfirm(e);
   };
 
   const onClear = () => {
     setCheckedIds(() => []);
-    onApply([]);
+    setValues([]);
+    setIsOpen(false);
+    onCancel();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onCancel();
   };
 
   const {
@@ -199,7 +210,7 @@ const MultiSelectFilter = _ref3 => {
       inactive: inactive
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
       isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: { ...headerStyles,
@@ -263,7 +274,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/_jsx(Box, {
             children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -271,7 +282,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
       overlaidPosition: overlaidPosition,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       maxHeight: maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -349,7 +360,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/_jsx(Box, {
             children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -364,6 +375,12 @@ const styles = StyleSheet.create({
   textContainerStyle: {
     marginRight: 52
   }
+}); // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
 });
 MultiSelectFilter.propTypes = {
   /**
@@ -439,11 +456,29 @@ MultiSelectFilter.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: PropTypes.func,
+
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: PropTypes.func,
+
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
 
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */

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

@@ -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.40.0",
+    "@telus-uds/system-theme-tokens": "^2.41.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.58.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/MultiSelectFilter/MultiSelectFilter.jsx

@@ -14,7 +14,7 @@ import {
   useResponsiveProp,
   variantProp
 } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 import { Button, ButtonDropdown } from '../Button'
@@ -53,10 +53,13 @@ const MultiSelectFilter = ({
   initialValues,
   maxValues,
   onChange,
+  onConfirm = () => {},
+  onCancel = () => {},
   copy = 'en',
   readOnly = false,
   inactive = false,
   rowLimit = 12,
+  dictionary = defaultDictionary,
   ...rest
 }) => {
   const viewport = useViewport()
@@ -116,11 +119,19 @@ const MultiSelectFilter = ({
   const onApply = (e) => {
     setValues(e)
     setIsOpen(false)
+    onConfirm(e)
   }
 
   const onClear = () => {
     setCheckedIds(() => [])
-    onApply([])
+    setValues([])
+    setIsOpen(false)
+    onCancel()
+  }
+
+  const onClose = () => {
+    setIsOpen(false)
+    onCancel()
   }
 
   const { align, offsets } = useResponsiveProp({
@@ -163,7 +174,7 @@ const MultiSelectFilter = ({
         inactive={inactive}
       />
       {isOpen && viewport === 'xs' && (
-        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal isOpen={isOpen} onClose={onClose}>
           <Row>
             <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
               {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
@@ -215,7 +226,7 @@ const MultiSelectFilter = ({
                 {getCopy('applyButtonLabel')}
               </Button>
               <Box>
-                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
           </Row>
@@ -224,7 +235,7 @@ const MultiSelectFilter = ({
       {isOpen && viewport !== 'xs' && (
         <ModalOverlay
           overlaidPosition={overlaidPosition}
-          onClose={() => setIsOpen(false)}
+          onClose={onClose}
           maxHeight={maxHeight}
           maxHeightSize={maxHeightSize}
           maxWidthSize={maxWidthSize}
@@ -291,7 +302,7 @@ const MultiSelectFilter = ({
                 {getCopy('applyButtonLabel')}
               </Button>
               <Box>
-                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
           </Row>
@@ -307,6 +318,13 @@ const styles = StyleSheet.create({
   textContainerStyle: { marginRight: 52 }
 })
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
+})
+
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.
@@ -370,12 +388,26 @@ MultiSelectFilter.propTypes = {
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
-
   onChange: PropTypes.func,
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: PropTypes.func,
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */

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)
   }