@telus-uds/components-base 1.95.0 → 1.97.0

package/CHANGELOG.md

@@ -1,12 +1,52 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 25 Sep 2024 16:57:49 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:40:49 GMT
+
+### Minor changes
+
+- `TermsAndConditions`: export use-responsive-theme-tokens hook (guillermo.peitzner@telus.com)
+- `Progress`: add shadow tokens to Progress and ProgressBar (jacqui.koroll@telus.com)
+- `PriceLockup`: alignItemsText token added to the component to align right (flex-end), left (flex-start) or center the content (35577399+JoshHC@users.noreply.github.com)
+- `Modal`: updated the alignment of the cancel/secondary buttons (sam.obisesan@telus.com)
+- `Card`: new token backgroundGradient added to be able to use the gradient as background (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.65.0
+
+### Patches
+
+- `Modal`: Fix focus trap to ensure focus is contained within the modal and initial focus is set on modal upon open (Mauricio.BatresMontejo@telus.com)
+- `Typography`: fix sub and sup render on mobile devices (guillermo.peitzner@telus.com)
+- `Autocomplete`: fix suggestion list displacement (guillermo.peitzner@telus.com)
+- `List`: Enable `CircleBullet` icon to visualize order of nested lists. (jaime.tuyuc@telus.com)
+- `Notification`: use maxWidth to avoid overflow in media queries (kristina.kirpichnikova@telus.com)
+
 ## 1.95.0
 
-Wed, 25 Sep 2024 16:57:49 GMT
+Wed, 25 Sep 2024 17:07:47 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -144,6 +144,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = _react.default.useState(null);
+  const [isInputVisible, setIsInputVisible] = _react.default.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -269,6 +270,27 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS === 'ios' || _Platform.default.OS === 'android') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      setIsInputVisible(entry.isIntersecting);
+      if (!entry.isIntersecting) {
+        setIsExpanded(false);
+      }
+    });
+    const currentInputRef = inputRef.current;
+    if (currentInputRef) {
+      observer.observe(currentInputRef);
+    }
+    return () => {
+      if (currentInputRef) {
+        observer.unobserve(currentInputRef);
+      }
+    };
+  }, [inputRef]);
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
@@ -325,7 +347,19 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(_Platform.default.OS !== 'web' ? {
-            onLayout: event => setSourceLayout(event.nativeEvent.layout)
+            onLayout: event => {
+              setSourceLayout(event.nativeEvent.layout);
+              const {
+                y,
+                height
+              } = event.nativeEvent.layout;
+              if (y >= 0 && height > 0) {
+                setIsInputVisible(true);
+              } else {
+                setIsInputVisible(false);
+                setIsExpanded(false);
+              }
+            }
           } : {}),
           tokens: inputTokens,
           validation: validation,
@@ -338,7 +372,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,

package/lib/Card/CardBase.js

@@ -31,6 +31,7 @@ const selectStyles = _ref => {
     paddingTop,
     minWidth,
     shadow,
+    backgroundGradient,
     gradient
   } = _ref;
   return {
@@ -50,6 +51,9 @@ const selectStyles = _ref => {
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
 };

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

@@ -135,7 +135,9 @@ const staticStyles = _StyleSheet.default.create({
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1
+    flexShrink: 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/Modal.js

@@ -104,6 +104,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -132,6 +133,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     maxWidth
   });
   const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalBodyRef = _react.default.useRef(ref);
+  const modalContentRef = _react.default.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -146,6 +149,25 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
+  const manageFocus = _react.default.useCallback(event => {
+    if (event.key === 'Tab') {
+      var _modalBodyRef$current;
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `));
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
 
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
@@ -156,22 +178,20 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const closeButtonRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
-      const handleFocus = () => {
-        // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
-          closeButtonRef.current.focus();
-        }
-        return undefined;
-      };
-
-      // Add an event listener to manage focus in the web modal container
-      document.addEventListener('focusin', handleFocus);
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
 
       // Clean up the event listener
-      return () => document.removeEventListener('focusin', handleFocus);
+      return () => document.removeEventListener('keydown', manageFocus);
     }
     return undefined;
-  }, []);
+  }, [manageFocus]);
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      var _modalContentRef$curr;
+      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
+    }
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
@@ -184,7 +204,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          ref: ref,
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -229,6 +249,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   if (_Platform.default.OS === 'web') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
       ...selectProps(rest),
+      ref: modalContentRef,
       children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         accessibilityRole: "button",
         ref: focusTrapRef

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 = {
@@ -162,7 +163,7 @@ const styles = _StyleSheet.default.create({
     minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 });
 ModalContent.propTypes = {

package/lib/Modal/WebModal.js

@@ -31,6 +31,7 @@ const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.container,
       ...selectProps(rest),
+      focusable: true,
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: staticStyles.content,

package/lib/Notification/Notification.js

@@ -105,19 +105,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...(0, _utils.createMediaQueryStyles)({
         xs: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
         },
         md: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
         },
         lg: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
         },
         sm: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
         },
         xl: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
         }
       })
     }

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

@@ -92,7 +92,15 @@ const selectBottomTextTypographyTokens = _ref6 => {
     lineHeight: bottomTextLineHeight
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const selectContainertokens = _ref7 => {
+  let {
+    alignItemsText
+  } = _ref7;
+  return {
+    alignItems: alignItemsText
+  };
+};
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -109,7 +117,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref7;
+  } = _ref8;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     footnoteMarginTop,
@@ -134,7 +142,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: [staticStyles.priceLockupContainer],
+    style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Progress/Progress.js

@@ -18,14 +18,16 @@ const selectProgressStyles = _ref => {
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
@@ -45,6 +47,7 @@ const selectProgressStyles = _ref => {
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *

package/lib/Progress/ProgressBar.js

@@ -20,13 +20,15 @@ const selectBarStyles = (_ref, percentage) => {
     backgroundColor,
     borderRadius,
     outlineWidth,
-    outlineColor
+    outlineColor,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
     width: `${percentage}%`
   };
 };
@@ -46,6 +48,7 @@ const selectBarStyles = (_ref, percentage) => {
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *

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