@telus-uds/components-web 2.41.0 → 2.43.0

package/lib-module/Breadcrumbs/Item/Item.js

@@ -81,6 +81,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     // `light` variant (shared with the `Link` component) is default by design
     LinkRouter,
     linkRouterProps,
+    onPress,
     ...rest
   } = _ref8;
   const {
@@ -127,6 +128,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
         variant: variant,
+        onPress: onPress,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, {
         iconPadding: iconPadding,
@@ -164,6 +166,10 @@ Item.propTypes = {
    */
   variant: PropTypes.shape({
     inverse: PropTypes.bool
-  })
+  }),
+  /**
+   * Function to be called when the Item is clicked.
+   */
+  onPress: PropTypes.func
 };
 export default Item;

package/lib-module/DatePicker/DatePicker.js

@@ -119,25 +119,39 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     left: 0,
     top: 0
   });
+  const datePickerRef = React.useRef(null);
   useSafeLayoutEffect(() => {
-    const updateDimensions = () => {
-      if (inline || !textInputRef.current) return;
+    const updateDatePickerPosition = () => {
+      if (inline || !(textInputRef !== null && textInputRef !== void 0 && textInputRef.current)) return;
       const {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
       const inputTop = top + window.scrollY;
+      const inputLeft = left + window.scrollX;
       setDatePickerPosition({
-        left,
-        top: inputTop + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight,
+        left: inputLeft
       });
     };
-    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+    const throttledUpdate = throttle(updateDatePickerPosition, 100, {
       leading: false
     });
-    throttledUpdateDimensions();
-    window.addEventListener('resize', throttledUpdateDimensions);
-    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+
+    // Initial call to set the position
+    updateDatePickerPosition();
+
+    // Register event listeners
+    window.addEventListener('resize', throttledUpdate);
+    window.addEventListener('scroll', updateDatePickerPosition, {
+      capture: true
+    });
+    return () => {
+      window.removeEventListener('resize', throttledUpdate);
+      window.removeEventListener('scroll', updateDatePickerPosition, {
+        capture: true
+      });
+    };
   }, []);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isClickedInside, setIsClickedInside] = React.useState(false);
@@ -364,6 +378,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,
+            ref: datePickerRef,
             children: /*#__PURE__*/_jsx(CalendarContainer, {
               ...selectProps(rest),
               daySize: daySize,

package/lib-module/OrderedList/Item.js

@@ -47,11 +47,14 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
-      display: 'inline-flex',
+      display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      justifyContent: itemBulletTextAlign,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
@@ -69,7 +72,9 @@ const ItemContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Item__ItemContent",
   componentId: "components-web__sc-7jzwcq-1"
 })({
-  flex: 1
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5
 });
 const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
@@ -116,7 +121,9 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         ...themeTokens,
         children: itemContent
       })]
-    }) : itemContent
+    }) : /*#__PURE__*/_jsx(ItemContent, {
+      children: itemContent
+    })
   });
 });
 Item.displayName = 'OrderedListItem';

package/lib-module/PriceLockup/PriceLockup.js

@@ -12,64 +12,69 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
-})(["display:flex;flex-direction:column;width:fit-content;"]);
+})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
+  let {
+    alignItemsText
+  } = _ref;
+  return alignItemsText;
+});
 const PriceContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
-})(["display:flex;margin-bottom:", ";"], _ref => {
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
     priceMarginBottom
-  } = _ref;
+  } = _ref2;
   return priceMarginBottom;
 });
 const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
-})(["display:flex;margin-top:", ";gap:", ";"], _ref2 => {
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
     footnoteMarginTop
-  } = _ref2;
+  } = _ref3;
   return footnoteMarginTop;
-}, _ref3 => {
+}, _ref4 => {
   let {
     footnoteGap
-  } = _ref3;
+  } = _ref4;
   return footnoteGap;
 });
 const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
-})(["margin-top:", ";"], _ref4 => {
+})(["margin-top:", ";"], _ref5 => {
   let {
     bottomTextMarginTop
-  } = _ref4;
+  } = _ref5;
   return bottomTextMarginTop;
 });
 const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
-})(["align-self:center;margin-left:", ";"], _ref5 => {
+})(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
     bottomLinksMarginLeft
-  } = _ref5;
+  } = _ref6;
   return bottomLinksMarginLeft;
 });
 const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
-})(["margin-bottom:", ";"], _ref6 => {
+})(["margin-bottom:", ";"], _ref7 => {
   let {
     topTextMarginBottom
-  } = _ref6;
+  } = _ref7;
   return topTextMarginBottom;
 });
 const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
-})(["display:flex;flex-direction:", ";"], _ref7 => {
+})(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
     ratePosition
-  } = _ref7;
+  } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
 });
 const RateContainer = /*#__PURE__*/styled.div.withConfig({
@@ -79,38 +84,38 @@ const RateContainer = /*#__PURE__*/styled.div.withConfig({
 const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
   componentId: "components-web__sc-1x6duay-8"
-})(["align-self:", ";"], _ref8 => {
+})(["align-self:", ";"], _ref9 => {
   let {
     ratePosition
-  } = _ref8;
+  } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
 const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref9 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
   let {
     strikeThroughPosition
-  } = _ref9;
+  } = _ref10;
   return `${strikeThroughPosition}px`;
-}, _ref10 => {
+}, _ref11 => {
   let {
     strikeThroughHeight
-  } = _ref10;
+  } = _ref11;
   return `${strikeThroughHeight}px`;
-}, _ref11 => {
+}, _ref12 => {
   let {
     strikeThroughColor
-  } = _ref11;
+  } = _ref12;
   return strikeThroughColor;
 });
-const selectFootnoteLinkStyles = _ref12 => {
+const selectFootnoteLinkStyles = _ref13 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref12;
+  } = _ref13;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -118,19 +123,19 @@ const selectFootnoteLinkStyles = _ref12 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref13 => {
+const selectStrikeThroughTokens = _ref14 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref13;
+  } = _ref14;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -147,7 +152,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref14;
+  } = _ref15;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -159,6 +164,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     fontColor,
     dividerColor,
     footnoteLinkFontSize,
+    alignItemsText,
     ...themeTokens
   } = useThemeTokens('PriceLockup', priceLockupTokens, {
     ...variant,
@@ -252,6 +258,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   }
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
+    alignItemsText: alignItemsText,
     ref: ref,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,

package/lib-module/Progress/ProgressBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp } from '@telus-uds/components-base';
+import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
 import styled from 'styled-components';
 
 // Passes React Native-oriented system props through UDS Progress
@@ -16,20 +16,20 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
   componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
-    percentage,
     gradient: {
       angle,
       stops,
       type
-    }
+    },
+    borderRadius,
+    shadow
   } = _ref;
   return {
     height: '100%',
-    // As per the design specs, we need to have the gradient expanding to 100% and being
-    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
-    // to the full length of the progress bar
-    width: `${100 * 100 / percentage}%`,
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...applyShadowToken(shadow)
   };
 });
 
@@ -60,8 +60,7 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
-      ...themeTokens,
-      percentage: percentage
+      ...themeTokens
     })
   });
 });

package/lib-module/Table/Table.js

@@ -58,8 +58,9 @@ const Table = _ref2 => {
   const [tableWidth, setTableWidth] = React.useState(0);
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      const containerClientWidth = containerRef.current.clientWidth;
-      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth;
+      var _containerRef$current, _tableRef$current;
+      const containerClientWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth;
       setContainerWidth(containerClientWidth);
       setTableWidth(responsiveTableWidth);
     };

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType, useTheme, useResponsiveThemeTokens, createMediaQueryStyles, StyleSheet } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
@@ -116,9 +116,60 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('TermsAndConditions', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  let listItemStyles;
+  let listItemMediaIds;
+  let nonIndexedContentStyles;
+  let nonIndexedContentMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedListItemThemeTokens,
+      transformedNonIndexedContentThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref7) => {
+      let [vp, viewportTokens] = _ref7;
+      acc.transformedListItemThemeTokens[vp] = {
+        marginLeft: viewportTokens.listMarginLeft
+      };
+      acc.transformedNonIndexedContentThemeTokens[vp] = {
+        paddingLeft: viewportTokens.titlePaddingLeft
+      };
+      return acc;
+    }, {
+      transformedListItemThemeTokens: {},
+      transformedNonIndexedContentThemeTokens: {}
+    });
+    const listItemMediaQueryStyles = createMediaQueryStyles(transformedListItemThemeTokens);
+    const nonIndexedContentMediaQueryStyles = createMediaQueryStyles(transformedNonIndexedContentThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      listItem: {
+        ...themeTokens[viewport],
+        ...listItemMediaQueryStyles
+      },
+      nonIndexedContent: {
+        ...themeTokens[viewport],
+        ...nonIndexedContentMediaQueryStyles
+      }
+    });
+    listItemStyles = styles.listItem;
+    listItemMediaIds = ids.listItem;
+    nonIndexedContentStyles = styles.nonIndexedContent;
+    nonIndexedContentMediaIds = ids.nonIndexedContent;
+  } else {
+    listItemStyles = themeTokens;
+    nonIndexedContentStyles = themeTokens;
+  }
   return /*#__PURE__*/_jsxs("div", {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Divider, {
@@ -139,13 +190,15 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
           _jsx(ListItem, {
-            tokens: themeTokens,
+            tokens: listItemStyles,
+            media: listItemMediaIds,
             children: renderStructuredContent(contentItem)
           }, idx))
         }), hasNonIndexedContent && /*#__PURE__*/_jsxs(Box, {
           between: 3,
           children: [/*#__PURE__*/_jsx(NonIndexedContentTitle, {
-            tokens: themeTokens,
+            tokens: nonIndexedContentStyles,
+            media: nonIndexedContentMediaIds,
             children: /*#__PURE__*/_jsx(Typography, {
               block: true,
               heading: true,
@@ -163,7 +216,8 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             _jsx(ListItem, {
-              tokens: themeTokens,
+              tokens: listItemStyles,
+              media: listItemMediaIds,
               children: renderStructuredContent(contentItem)
             }, idx))
           })]

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.95.0",
+    "@telus-uds/components-base": "1.97.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.64.0",
+    "@telus-uds/system-theme-tokens": "^2.66.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.41.0"
+  "version": "2.43.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { Helmet, HelmetProvider } from 'react-helmet-async'
+import { isEqual } from 'lodash'
 
 import {
   componentPropType,
@@ -10,7 +11,8 @@ import {
   unpackFragment,
   withLinkRouter,
   getTokensPropType,
-  useThemeTokens
+  useThemeTokens,
+  useViewport
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import Item from './Item/Item'
@@ -79,10 +81,11 @@ const getItems = (items, params, concatenatePaths) => {
       const { LinkRouter, linkRouterProps } = item
       return {
         breadcrumbName,
-        href,
+        href: item.isExpander ? '#' : href,
         current: isLast,
         LinkRouter,
         linkRouterProps,
+        onPress: item.onPress,
         ...omitProps(selectProps(item))
       }
     })
@@ -99,6 +102,8 @@ const getStructuredData = (items, baseUrl) => {
   }))
 }
 
+const MAX_ITEMS_ON_XS_VIEWPORT = 4
+
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
@@ -139,7 +144,40 @@ const Breadcrumbs = React.forwardRef(
         )
       : routes.filter((route) => route.path && route.breadcrumbName)
 
-    const items = getItems(activeRoutes, params, !children)
+    const [optionsHidden, setOptionsHidden] = React.useState(false)
+    const [itemsToBeRendered, setItemsToBeRendered] = React.useState([])
+
+    const viewport = useViewport()
+
+    React.useEffect(() => {
+      if (optionsHidden) {
+        if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
+          setItemsToBeRendered(activeRoutes)
+        }
+        return
+      }
+      if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+        const newItems = [
+          ...activeRoutes.slice(0, 2),
+          {
+            path: '#',
+            breadcrumbName: '...',
+            onPress: (event) => {
+              event.preventDefault()
+              setItemsToBeRendered(activeRoutes)
+            },
+            isExpander: true
+          },
+          activeRoutes[activeRoutes.length - 1]
+        ]
+        setItemsToBeRendered(newItems)
+        setOptionsHidden(true)
+      } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
+        setItemsToBeRendered(activeRoutes)
+      }
+    }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered])
+
+    const items = getItems(itemsToBeRendered, params, !children)
     const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant)
 
     const metadata = (
@@ -168,6 +206,7 @@ const Breadcrumbs = React.forwardRef(
               breadcrumbName,
               LinkRouter: ItemLinkRouter = LinkRouter,
               linkRouterProps: itemLinkRouterProps,
+              onPress,
               ...itemRest
             }) => {
               return (
@@ -180,6 +219,7 @@ const Breadcrumbs = React.forwardRef(
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                   variant={{ ...variant, size: 'micro' }}
                   LinkRouter={ItemLinkRouter}
+                  onPress={onPress}
                 >
                   {breadcrumbName}
                 </Item>

package/src/Breadcrumbs/Item/Item.jsx

@@ -40,6 +40,7 @@ const Item = React.forwardRef(
       variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
       LinkRouter,
       linkRouterProps,
+      onPress,
       ...rest
     },
     ref
@@ -89,6 +90,7 @@ const Item = React.forwardRef(
               LinkRouter={LinkRouter}
               linkRouterProps={linkRouterProps}
               variant={variant}
+              onPress={onPress}
             >
               {children}
             </Link>
@@ -129,7 +131,11 @@ Item.propTypes = {
   /**
    * Variant to render.
    */
-  variant: PropTypes.shape({ inverse: PropTypes.bool })
+  variant: PropTypes.shape({ inverse: PropTypes.bool }),
+  /**
+   * Function to be called when the Item is clicked.
+   */
+  onPress: PropTypes.func
 }
 
 export default Item

package/src/DatePicker/DatePicker.jsx

@@ -111,21 +111,33 @@ const DatePicker = React.forwardRef(
     const textInputRef = React.useRef()
     const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
+    const datePickerRef = React.useRef(null)
 
     useSafeLayoutEffect(() => {
-      const updateDimensions = () => {
-        if (inline || !textInputRef.current) return
+      const updateDatePickerPosition = () => {
+        if (inline || !textInputRef?.current) return
         const { left, top } = textInputRef.current.getBoundingClientRect()
         const inputTop = top + window.scrollY
+        const inputLeft = left + window.scrollX
         setDatePickerPosition({
-          left,
-          top: inputTop + textInputRef.current.offsetHeight
+          top: inputTop + textInputRef.current.offsetHeight,
+          left: inputLeft
         })
       }
-      const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
-      throttledUpdateDimensions()
-      window.addEventListener('resize', throttledUpdateDimensions)
-      return () => window.removeEventListener('resize', throttledUpdateDimensions)
+
+      const throttledUpdate = throttle(updateDatePickerPosition, 100, { leading: false })
+
+      // Initial call to set the position
+      updateDatePickerPosition()
+
+      // Register event listeners
+      window.addEventListener('resize', throttledUpdate)
+      window.addEventListener('scroll', updateDatePickerPosition, { capture: true })
+
+      return () => {
+        window.removeEventListener('resize', throttledUpdate)
+        window.removeEventListener('scroll', updateDatePickerPosition, { capture: true })
+      }
     }, [])
 
     const [isFocused, setIsFocused] = React.useState(false)
@@ -373,6 +385,7 @@ const DatePicker = React.forwardRef(
                 <PortalPositionedContainer
                   top={datePickerPosition.top}
                   left={datePickerPosition.left}
+                  ref={datePickerRef}
                 >
                   <CalendarContainer
                     {...selectProps(rest)}