@telus-uds/components-base 1.96.0 → 1.97.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Sat, 12 Oct 2024 00:31:05 GMT and should not be manually modified.
+This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.97.0
+
+Thu, 31 Oct 2024 05:02:44 GMT
+
+### Minor changes
+
+- `Pagination`: Enable the option to set number of pages before ellipsis (jaime.tuyuc@telus.com)
+- `Types:` Export BaseProviderProps and add FileUpload types (6854874+kyletsang@users.noreply.github.com)
+- `Tooltip`: add tooltipButtonTokens prop (guillermo.peitzner@telus.com)
+- `Modal`: Enable `footerTopWidth` token for `Modal` component (jaime.tuyuc@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.66.0
+
+### Patches
+
+- `ListBox`: color property distributed throughout the component tree to fix design bugs in the selected state inside `NavigationBar` (35577399+JoshHC@users.noreply.github.com)
+- `Carousel`: fix item's width issues when peeking is enabled (guillermo.peitzner@telus.com)
+- `List`: fix list content drift to center of screen on bigger containers (kristina.kirpichnikova@telus.com)
+- `InputLabel`: fixed an issue when using tooltip. When the user taps the tooltip there was a weird artifact where the input moves down as if there was an extra space between the label and the input. (ashok@ashokamaran.com)
+
 ## 1.96.0
 
-Sat, 12 Oct 2024 00:31:05 GMT
+Sat, 12 Oct 2024 00:40:49 GMT
 
 ### Minor changes
 

package/lib/Carousel/Carousel.js

@@ -106,7 +106,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   };
 };
 const getPeekingProps = viewport => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -21,39 +21,35 @@ const selectContainerStyle = _ref => {
     totalItems,
     enablePeeking,
     peekingMarginLeft,
-    peekingMarginRight,
     peekingFirstSpace,
     peekingLastSpace,
     peekingMiddleSpace,
     peekingGap,
     hidden
   } = _ref;
-  const isFirst = elementIndex === 0;
-  const isLast = elementIndex === totalItems - 1;
-  const isMiddle = !isFirst && !isLast;
-  const isActive = activeIndex === elementIndex;
   let adjustedWidth = width;
   let marginLeft = 0;
-  let marginRight = 0;
+  const marginRight = 0;
   if (enablePeeking) {
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    const isFirst = elementIndex === 0;
+    const isActive = activeIndex === elementIndex;
     if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap;
-    }
-    if (isFirst) {
-      if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft;
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace;
       } else {
-        marginLeft = peekingMiddleSpace;
+        marginLeft = peekingGap;
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace;
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1);
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace;
       }
-    }
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight;
     } else {
-      marginRight = peekingGap;
+      marginLeft = peekingGap;
     }
   }
   const style = {

package/lib/InputLabel/InputLabel.js

@@ -135,8 +135,7 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -146,7 +145,7 @@ const staticStyles = _StyleSheet.default.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 });

package/lib/List/ListItemBase.js

@@ -136,7 +136,8 @@ const staticStyles = _StyleSheet.default.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1
+    flexGrow: 1,
+    textAlign: 'justify'
   }
 });
 ListItemBase.propTypes = {

package/lib/Listbox/GroupControl.js

@@ -62,6 +62,9 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemOutline,
     groupHeight
   } = tokens;
+  const getTextStyles = () => ({
+    color: groupColor
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     onPress: () => setSelectedId(id),
     style: [styles.controlWrapper, {
@@ -81,6 +84,7 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }],
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: getTextStyles(),
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 1,

package/lib/Modal/ModalContent.js

@@ -72,6 +72,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     } = _ref3;
     return {
@@ -83,8 +84,8 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : hasBorder && 1 || 0,
+      borderTopColor: borderColor
     };
   };
   const headingStyles = {

package/lib/Pagination/Pagination.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -47,6 +48,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     sideButtonTokens,
     LinkRouter,
     linkRouterProps,
+    numberOfPagesBeforeEllipsis = 4,
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -86,7 +88,8 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     shouldRenderEllipsis
   } = (0, _usePagination.default)({
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
   const ellipisContainerStyles = _StyleSheet.default.create({
@@ -207,7 +210,11 @@ Pagination.propTypes = {
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton')
+  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: _propTypes.default.number
 };
 const staticStyles = _StyleSheet.default.create({
   container: {

package/lib/Pagination/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRUNCATE_ABOVE_VALUE = exports.MIN_PAGES_TO_SHOW = exports.DEFAULT_PAGE_TO_SHOW_VALUE = void 0;
+const TRUNCATE_ABOVE_VALUE = 4;
+exports.TRUNCATE_ABOVE_VALUE = TRUNCATE_ABOVE_VALUE;
+const MIN_PAGES_TO_SHOW = 3;
+exports.MIN_PAGES_TO_SHOW = MIN_PAGES_TO_SHOW;
+const DEFAULT_PAGE_TO_SHOW_VALUE = 1;
+exports.DEFAULT_PAGE_TO_SHOW_VALUE = DEFAULT_PAGE_TO_SHOW_VALUE;

package/lib/Pagination/usePagination.js

@@ -4,17 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("./constants");
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
 function usePagination(_ref) {
   let {
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
@@ -36,8 +39,15 @@ function usePagination(_ref) {
       tokens
     };
   };
-  const windowSize = truncateAbove > 4 ? 3 : 1;
-  const truncateEnabled = items.length > truncateAbove;
+  let windowSize;
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis;
+  } else if (truncateAbove > _constants.TRUNCATE_ABOVE_VALUE) {
+    windowSize = _constants.MIN_PAGES_TO_SHOW;
+  } else {
+    windowSize = _constants.DEFAULT_PAGE_TO_SHOW_VALUE;
+  }
+  const truncateEnabled = items.length > windowSize;
   const truncateWindowStart = windowSize;
   const truncateWindowEnd = items.length - 1 - windowSize;
 

package/lib/Tooltip/Tooltip.native.js

@@ -125,9 +125,10 @@ const selectArrowStyles = (_ref4, _ref5) => {
   };
 };
 const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
   pressableState: pressableState,
-  variant: variant
+  variant: variant,
+  tokens: tokens
 });
 
 /**
@@ -156,6 +157,8 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     inline = false,
     nativeID,
+    activateOnHover = false,
+    tooltipButtonTokens,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = _react.default.useState(false);
@@ -256,6 +259,31 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     }
     setTooltipPosition(updatedPosition);
   }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web') {
+      return undefined;
+    }
+    const handleHover = event => {
+      if (activateOnHover) {
+        const isInsideControl = controlRef.current && controlRef.current.contains(event.target);
+        if (isInsideControl) {
+          if (!isOpen) {
+            setIsOpen(!isOpen);
+          }
+        } else {
+          close();
+        }
+      }
+    };
+    document.addEventListener('mouseover', handleHover, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('mouseover', handleHover, {
+        capture: true
+      });
+    };
+  }, [controlLayout, activateOnHover, isOpen, onPress]);
   const control = children !== undefined ? children : defaultControl;
   const pressableStyles = control === defaultControl ? _Platform.default.select({
     web: {
@@ -284,7 +312,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
       nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
       onPress: close,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {

package/lib/Tooltip/shared.js

@@ -37,6 +37,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: _propTypes.default.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: _propTypes.default.bool,
+  tooltipButtonTokens: (0, _utils.getTokensPropType)('TooltipButton'),
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib-module/Carousel/Carousel.js

@@ -100,7 +100,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   };
 };
 const getPeekingProps = viewport => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -14,39 +14,35 @@ const selectContainerStyle = _ref => {
     totalItems,
     enablePeeking,
     peekingMarginLeft,
-    peekingMarginRight,
     peekingFirstSpace,
     peekingLastSpace,
     peekingMiddleSpace,
     peekingGap,
     hidden
   } = _ref;
-  const isFirst = elementIndex === 0;
-  const isLast = elementIndex === totalItems - 1;
-  const isMiddle = !isFirst && !isLast;
-  const isActive = activeIndex === elementIndex;
   let adjustedWidth = width;
   let marginLeft = 0;
-  let marginRight = 0;
+  const marginRight = 0;
   if (enablePeeking) {
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    const isFirst = elementIndex === 0;
+    const isActive = activeIndex === elementIndex;
     if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap;
-    }
-    if (isFirst) {
-      if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft;
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace;
       } else {
-        marginLeft = peekingMiddleSpace;
+        marginLeft = peekingGap;
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace;
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1);
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace;
       }
-    }
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight;
     } else {
-      marginRight = peekingGap;
+      marginLeft = peekingGap;
     }
   }
   const style = {

package/lib-module/InputLabel/InputLabel.js

@@ -129,8 +129,7 @@ export default InputLabel;
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -140,7 +139,7 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 });

package/lib-module/List/ListItemBase.js

@@ -130,7 +130,8 @@ const staticStyles = StyleSheet.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1
+    flexGrow: 1,
+    textAlign: 'justify'
   }
 });
 ListItemBase.propTypes = {

package/lib-module/Listbox/GroupControl.js

@@ -56,6 +56,9 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemOutline,
     groupHeight
   } = tokens;
+  const getTextStyles = () => ({
+    color: groupColor
+  });
   return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
     style: [styles.controlWrapper, {
@@ -75,6 +78,7 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }],
     ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
+      style: getTextStyles(),
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
       space: 1,

package/lib-module/Modal/ModalContent.js

@@ -66,6 +66,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     } = _ref3;
     return {
@@ -77,8 +78,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : hasBorder && 1 || 0,
+      borderTopColor: borderColor
     };
   };
   const headingStyles = {

package/lib-module/Pagination/Pagination.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -39,6 +40,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     sideButtonTokens,
     LinkRouter,
     linkRouterProps,
+    numberOfPagesBeforeEllipsis = 4,
     ...rest
   } = _ref2;
   const viewport = useViewport();
@@ -78,7 +80,8 @@ const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     shouldRenderEllipsis
   } = usePagination({
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
   const ellipisContainerStyles = StyleSheet.create({
@@ -199,7 +202,11 @@ Pagination.propTypes = {
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 };
 const staticStyles = StyleSheet.create({
   container: {

package/lib-module/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4;
+export const MIN_PAGES_TO_SHOW = 3;
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1;

package/lib-module/Pagination/usePagination.js

@@ -1,14 +1,17 @@
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants';
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
 function usePagination(_ref) {
   let {
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
@@ -30,8 +33,15 @@ function usePagination(_ref) {
       tokens
     };
   };
-  const windowSize = truncateAbove > 4 ? 3 : 1;
-  const truncateEnabled = items.length > truncateAbove;
+  let windowSize;
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis;
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW;
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE;
+  }
+  const truncateEnabled = items.length > windowSize;
   const truncateWindowStart = windowSize;
   const truncateWindowEnd = items.length - 1 - windowSize;
 

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

@@ -119,9 +119,10 @@ const selectArrowStyles = (_ref4, _ref5) => {
   };
 };
 const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipButton, {
+const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(TooltipButton, {
   pressableState: pressableState,
-  variant: variant
+  variant: variant,
+  tokens: tokens
 });
 
 /**
@@ -150,6 +151,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     inline = false,
     nativeID,
+    activateOnHover = false,
+    tooltipButtonTokens,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -250,6 +253,31 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }
     setTooltipPosition(updatedPosition);
   }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  React.useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleHover = event => {
+      if (activateOnHover) {
+        const isInsideControl = controlRef.current && controlRef.current.contains(event.target);
+        if (isInsideControl) {
+          if (!isOpen) {
+            setIsOpen(!isOpen);
+          }
+        } else {
+          close();
+        }
+      }
+    };
+    document.addEventListener('mouseover', handleHover, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('mouseover', handleHover, {
+        capture: true
+      });
+    };
+  }, [controlLayout, activateOnHover, isOpen, onPress]);
   const control = children !== undefined ? children : defaultControl;
   const pressableStyles = control === defaultControl ? Platform.select({
     web: {
@@ -278,7 +306,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
       nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
     }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
       onPress: close,
       children: /*#__PURE__*/_jsxs(View, {

package/lib-module/Tooltip/shared.js

@@ -30,6 +30,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };

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.65.0",
+    "@telus-uds/system-theme-tokens": "^2.66.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -86,6 +86,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.96.0",
+  "version": "1.97.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -120,7 +120,7 @@ const selectPreviousNextNavigationButtonStyles = (
 }
 
 const getPeekingProps = (viewport) => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -20,43 +20,37 @@ const selectContainerStyle = ({
   totalItems,
   enablePeeking,
   peekingMarginLeft,
-  peekingMarginRight,
   peekingFirstSpace,
   peekingLastSpace,
   peekingMiddleSpace,
   peekingGap,
   hidden
 }) => {
-  const isFirst = elementIndex === 0
-  const isLast = elementIndex === totalItems - 1
-  const isMiddle = !isFirst && !isLast
-  const isActive = activeIndex === elementIndex
-
   let adjustedWidth = width
   let marginLeft = 0
-  let marginRight = 0
+  const marginRight = 0
 
   if (enablePeeking) {
-    if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap
-    }
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    const isFirst = elementIndex === 0
+    const isActive = activeIndex === elementIndex
 
-    if (isFirst) {
-      if (isActive) {
+    if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace
       } else {
-        marginLeft = peekingMiddleSpace
+        marginLeft = peekingGap
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1)
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace
       }
-    }
-
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight
     } else {
-      marginRight = peekingGap
+      marginLeft = peekingGap
     }
   }
 

package/src/InputLabel/InputLabel.jsx

@@ -146,8 +146,7 @@ export default InputLabel
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -157,7 +156,7 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 })

package/src/List/ListItemBase.jsx

@@ -107,7 +107,12 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1, flexGrow: 1 }
+  titleAndContentContainer: {
+    flexDirection: 'column',
+    flexShrink: 1,
+    flexGrow: 1,
+    textAlign: 'justify'
+  }
 })
 
 ListItemBase.propTypes = {

package/src/Listbox/GroupControl.jsx

@@ -48,6 +48,11 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
     itemOutline,
     groupHeight
   } = tokens
+
+  const getTextStyles = () => ({
+    color: groupColor
+  })
+
   return (
     <View
       onPress={() => setSelectedId(id)}
@@ -71,7 +76,7 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
       ]}
       ref={ref}
     >
-      <Text>{label}</Text>
+      <Text style={getTextStyles()}>{label}</Text>
       <Spacer space={1} direction="row" />
       <Icon
         icon={tokens.groupIcon}

package/src/Modal/ModalContent.jsx

@@ -60,6 +60,7 @@ const ModalContent = React.forwardRef(
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     }) => ({
       flexDirection: direction,
@@ -70,8 +71,8 @@ const ModalContent = React.forwardRef(
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : (hasBorder && 1) || 0,
+      borderTopColor: borderColor
     })
 
     const headingStyles = {

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
@@ -42,6 +43,7 @@ const Pagination = React.forwardRef(
       sideButtonTokens,
       LinkRouter,
       linkRouterProps,
+      numberOfPagesBeforeEllipsis = 4,
       ...rest
     },
     ref
@@ -80,7 +82,8 @@ const Pagination = React.forwardRef(
       shouldRenderEllipsis
     } = usePagination({
       items,
-      truncateAbove
+      truncateAbove,
+      numberOfPagesBeforeEllipsis
     })
 
     const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
@@ -220,7 +223,11 @@ Pagination.propTypes = {
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 }
 
 const staticStyles = StyleSheet.create({

package/src/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4
+export const MIN_PAGES_TO_SHOW = 3
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1

package/src/Pagination/usePagination.js

@@ -1,11 +1,13 @@
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants'
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
-function usePagination({ items, truncateAbove }) {
+function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
   const activeItemIndex = Math.max(
     items.findIndex((item) => item.props.isActive),
     0 // default to the first item if none is marked as active
@@ -16,8 +18,17 @@ function usePagination({ items, truncateAbove }) {
     return { onPress, href, hrefAttrs, variant, tokens }
   }
 
-  const windowSize = truncateAbove > 4 ? 3 : 1
-  const truncateEnabled = items.length > truncateAbove
+  let windowSize
+
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE
+  }
+
+  const truncateEnabled = items.length > windowSize
 
   const truncateWindowStart = windowSize
   const truncateWindowEnd = items.length - 1 - windowSize

package/src/Tooltip/Tooltip.native.jsx

@@ -88,8 +88,8 @@ const selectArrowStyles = (
 }
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
-const defaultControl = (pressableState, variant) => (
-  <TooltipButton pressableState={pressableState} variant={variant} />
+const defaultControl = (pressableState, variant, tokens) => (
+  <TooltipButton pressableState={pressableState} variant={variant} tokens={tokens} />
 )
 
 /**
@@ -119,6 +119,8 @@ const Tooltip = React.forwardRef(
       variant,
       inline = false,
       nativeID,
+      activateOnHover = false,
+      tooltipButtonTokens,
       ...rest
     },
     ref
@@ -227,6 +229,31 @@ const Tooltip = React.forwardRef(
       tooltipPosition
     ])
 
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return undefined
+      }
+
+      const handleHover = (event) => {
+        if (activateOnHover) {
+          const isInsideControl = controlRef.current && controlRef.current.contains(event.target)
+          if (isInsideControl) {
+            if (!isOpen) {
+              setIsOpen(!isOpen)
+            }
+          } else {
+            close()
+          }
+        }
+      }
+
+      document.addEventListener('mouseover', handleHover, { capture: true })
+
+      return () => {
+        document.removeEventListener('mouseover', handleHover, { capture: true })
+      }
+    }, [controlLayout, activateOnHover, isOpen, onPress])
+
     const control = children !== undefined ? children : defaultControl
     const pressableStyles =
       control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
@@ -256,7 +283,8 @@ const Tooltip = React.forwardRef(
           nativeID={nativeID}
         >
           {typeof control === 'function'
-            ? (pressableState) => control(getPressableState(pressableState), variant)
+            ? (pressableState) =>
+                control(getPressableState(pressableState), variant, tooltipButtonTokens)
             : control}
         </Pressable>
         {isOpen && (

package/src/Tooltip/shared.js

@@ -32,6 +32,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/types/FileUpload.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react'
+
+export interface FileUploadTokens {
+  buttonBackgroundColor?: string
+  buttonBorderColor?: string
+  buttonBorderRadius?: number
+  buttonBorderWidth?: string
+  buttonTextColor?: string
+  buttonHeight?: string
+  buttonMinWidth?: string
+  buttonWidth?: string
+  notificationBackgroundColor?: string
+  notificationBorderColor?: string
+  notificationBorderRadius?: number
+  notificationTextColor?: string
+  notificationDismissButtonGap?: string
+  notificationDismissIcon?: string
+  notificationDismissIconColor?: string
+  notificationIcon?: string
+  notificationIconColor?: string
+  notificationIconGap?: string
+  notificationIconSize?: number
+}
+
+export interface FileUploadProps {
+  tokens?: FileUploadTokens
+  variant?: Record<string, any>
+  copy?: 'en' | 'fr'
+  fileTypes?: string[]
+  allowMultipleFiles?: boolean
+  maxFileSize?: number
+  maxFilesCount?: number
+  onUpload?: (files: any) => void
+  onDelete?: (file: any) => void
+  documentPicker?: Record<string, any>
+}
+
+declare const FileUpload: ComponentType<FileUploadProps>
+
+export default FileUpload

package/types/index.d.ts

@@ -30,6 +30,9 @@ export {
   ExpandCollapsePanelProps
 } from './ExpandCollapse'
 
+export { default as FileUpload } from './FileUpload'
+export { FileUploadTokens, FileUploadProps } from './FileUpload'
+
 export { default as HorizontalScrollButton } from './HorizontalScrollButton'
 export { HorizontalScrollButtonTokens } from './HorizontalScrollButton'