@telus-uds/components-web 2.42.0 → 2.44.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-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 Wed, 13 Nov 2024 17:18:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.44.0
+
+Wed, 13 Nov 2024 17:18:39 GMT
+
+### Minor changes
+
+- `DatePicker`: add initialVisibleMonth prop (guillermo.peitzner@telus.com)
+
+## 2.43.0
+
+Thu, 31 Oct 2024 05:09:12 GMT
+
+### Minor changes
+
+- `Breadcrumbs`: add expander item on xs viewport (guillermo.peitzner@telus.com)
+- `Modal`: Enable `footerTopWidth` token for `Modal` component (jaime.tuyuc@telus.com)
+- `Types`: Export BaseProviderProps and add FileUpload types (6854874+kyletsang@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.97.0
+- Bump @telus-uds/system-theme-tokens to v2.66.0
+
+### Patches
+
+- `DatePicker`: calendar misalignment and static overlay behavior fixed when the component is inside a modal (35577399+JoshHC@users.noreply.github.com)
+- `Table`: added null check for container during resizing (kristina.kirpichnikova@telus.com)
+
 ## 2.42.0
 
-Sat, 12 Oct 2024 00:31:05 GMT
+Sat, 12 Oct 2024 00:40:49 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactHelmetAsync = require("react-helmet-async");
+var _lodash = require("lodash");
 var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _Item = _interopRequireDefault(require("./Item/Item"));
@@ -79,10 +80,11 @@ const getItems = (items, params, concatenatePaths) => {
     } = item;
     return {
       breadcrumbName,
-      href,
+      href: item.isExpander ? '#' : href,
       current: isLast,
       LinkRouter,
       linkRouterProps,
+      onPress: item.onPress,
       ...omitProps(selectProps(item))
     };
   });
@@ -97,6 +99,7 @@ const getStructuredData = (items, baseUrl) => {
     }
   }));
 };
+const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 
 /**
  * Display a hierarchy of links, commonly used for navigation.
@@ -138,7 +141,33 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ...itemRest
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
-  const items = getItems(activeRoutes, params, !children);
+  const [optionsHidden, setOptionsHidden] = _react.default.useState(false);
+  const [itemsToBeRendered, setItemsToBeRendered] = _react.default.useState([]);
+  const viewport = (0, _componentsBase.useViewport)();
+  _react.default.useEffect(() => {
+    if (optionsHidden) {
+      if (viewport !== 'xs' && !(0, _lodash.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 (!(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+      setItemsToBeRendered(activeRoutes);
+    }
+  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
+  const items = getItems(itemsToBeRendered, params, !children);
   const themeTokens = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.HelmetProvider, {
     context: helmetContext,
@@ -168,6 +197,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           breadcrumbName,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          onPress,
           ...itemRest
         } = _ref4;
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
@@ -184,7 +214,8 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             ...variant,
             size: 'micro'
           },
-          LinkRouter: ItemLinkRouter
+          LinkRouter: ItemLinkRouter,
+          onPress: onPress
         }, breadcrumbName);
       })
     }), metadata]

package/lib/Breadcrumbs/Item/Item.js

@@ -86,6 +86,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     // `light` variant (shared with the `Link` component) is default by design
     LinkRouter,
     linkRouterProps,
+    onPress,
     ...rest
   } = _ref8;
   const {
@@ -132,6 +133,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
         variant: variant,
+        onPress: onPress,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
         iconPadding: iconPadding,
@@ -169,7 +171,11 @@ Item.propTypes = {
    */
   variant: _propTypes.default.shape({
     inverse: _propTypes.default.bool
-  })
+  }),
+  /**
+   * Function to be called when the Item is clicked.
+   */
+  onPress: _propTypes.default.func
 };
 var _default = Item;
 exports.default = _default;

package/lib/DatePicker/DatePicker.js

@@ -71,6 +71,12 @@ const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.wit
   }
 });
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof _moment.default) {
+    return null;
+  }
+  return () => (0, _moment.default)(initialVisibleMonth);
+};
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -114,6 +120,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     prevTestID = '',
     nextTestID = '',
     placeholder = 'DD / MM / YYYY',
+    initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
@@ -124,25 +131,39 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     left: 0,
     top: 0
   });
+  const datePickerRef = _react.default.useRef(null);
   (0, _componentsBase.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 = (0, _lodash.throttle)(updateDimensions, 100, {
+    const throttledUpdate = (0, _lodash.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.default.useState(false);
   const [isClickedInside, setIsClickedInside] = _react.default.useState(false);
@@ -323,7 +344,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
           onDateChange: onChange,
-          focused: inputDate ?? isFocused,
+          focused: (inputDate ?? isFocused) || initialVisibleMonth !== '',
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
@@ -333,6 +354,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
+          initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
           renderMonthElement: _ref7 => {
             let {
               month
@@ -369,6 +391,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,
+            ref: datePickerRef,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
               ...selectProps(rest),
               daySize: daySize,
@@ -395,6 +418,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
                 phrases: getCopy(),
                 id: id,
                 renderNavNextButton: renderNextButton,
+                initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
                 renderMonthElement: _ref8 => {
                   let {
                     month
@@ -491,7 +515,11 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: _propTypes.default.string
+  placeholder: _propTypes.default.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: _propTypes.default.string
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/Table/Table.js

@@ -66,8 +66,9 @@ const Table = _ref2 => {
   const [tableWidth, setTableWidth] = _react.default.useState(0);
   (0, _componentsBase.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/Breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
+import { isEqual } from 'lodash';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import Item from './Item/Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -72,10 +73,11 @@ const getItems = (items, params, concatenatePaths) => {
     } = item;
     return {
       breadcrumbName,
-      href,
+      href: item.isExpander ? '#' : href,
       current: isLast,
       LinkRouter,
       linkRouterProps,
+      onPress: item.onPress,
       ...omitProps(selectProps(item))
     };
   });
@@ -90,6 +92,7 @@ const getStructuredData = (items, baseUrl) => {
     }
   }));
 };
+const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 
 /**
  * Display a hierarchy of links, commonly used for navigation.
@@ -131,7 +134,33 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ...itemRest
     };
   }) : 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 = /*#__PURE__*/_jsx(HelmetProvider, {
     context: helmetContext,
@@ -161,6 +190,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           breadcrumbName,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          onPress,
           ...itemRest
         } = _ref4;
         return /*#__PURE__*/_createElement(Item, {
@@ -177,7 +207,8 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             ...variant,
             size: 'micro'
           },
-          LinkRouter: ItemLinkRouter
+          LinkRouter: ItemLinkRouter,
+          onPress: onPress
         }, breadcrumbName);
       })
     }), metadata]

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

@@ -66,6 +66,12 @@ const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
   }
 });
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof moment) {
+    return null;
+  }
+  return () => moment(initialVisibleMonth);
+};
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -109,6 +115,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     prevTestID = '',
     nextTestID = '',
     placeholder = 'DD / MM / YYYY',
+    initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
@@ -119,25 +126,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);
@@ -318,7 +339,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,
-          focused: inputDate ?? isFocused,
+          focused: (inputDate ?? isFocused) || initialVisibleMonth !== '',
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
@@ -328,6 +349,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
+          initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
           renderMonthElement: _ref7 => {
             let {
               month
@@ -364,6 +386,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,
@@ -390,6 +413,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
                 phrases: getCopy(),
                 id: id,
                 renderNavNextButton: renderNextButton,
+                initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
                 renderMonthElement: _ref8 => {
                   let {
                     month
@@ -486,6 +510,10 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: PropTypes.string
 };
 export default DatePicker;

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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.96.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.65.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.42.0"
+  "version": "2.44.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

@@ -58,6 +58,13 @@ const PortalPositionedContainer = styled.div({
 
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
 
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof moment) {
+    return null
+  }
+  return () => moment(initialVisibleMonth)
+}
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -100,6 +107,7 @@ const DatePicker = React.forwardRef(
       prevTestID = '',
       nextTestID = '',
       placeholder = 'DD / MM / YYYY',
+      initialVisibleMonth = '',
       ...rest
     },
     ref
@@ -111,21 +119,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)
@@ -309,7 +329,7 @@ const DatePicker = React.forwardRef(
               <DayPickerSingleDateController
                 date={inputDate}
                 onDateChange={onChange}
-                focused={inputDate ?? isFocused}
+                focused={(inputDate ?? isFocused) || initialVisibleMonth !== ''}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}
@@ -319,6 +339,7 @@ const DatePicker = React.forwardRef(
                 renderNavNextButton={renderNextButton}
                 isOutsideRange={isDayDisabled}
                 phrases={getCopy()}
+                initialVisibleMonth={getInitialVisibleMonth(initialVisibleMonth, inputDate)}
                 renderMonthElement={({ month }) => (
                   <MonthCenterContainer>
                     <div>
@@ -373,6 +394,7 @@ const DatePicker = React.forwardRef(
                 <PortalPositionedContainer
                   top={datePickerPosition.top}
                   left={datePickerPosition.left}
+                  ref={datePickerRef}
                 >
                   <CalendarContainer
                     {...selectProps(rest)}
@@ -401,6 +423,7 @@ const DatePicker = React.forwardRef(
                       phrases={getCopy()}
                       id={id}
                       renderNavNextButton={renderNextButton}
+                      initialVisibleMonth={getInitialVisibleMonth(initialVisibleMonth, inputDate)}
                       renderMonthElement={({ month }) => (
                         <MonthCenterContainer>
                           <div>
@@ -503,7 +526,11 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: PropTypes.string
 }
 
 export default DatePicker

package/src/Table/Table.jsx

@@ -60,8 +60,8 @@ const Table = ({
 
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      const containerClientWidth = containerRef.current.clientWidth
-      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth
+      const containerClientWidth = containerRef.current?.clientWidth
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth
       setContainerWidth(containerClientWidth)
       setTableWidth(responsiveTableWidth)
     }

package/types/BaseProvider.d.ts

@@ -1,22 +1,22 @@
 import type { ComponentType } from 'react'
 
-declare interface ThemeMetadata {
+export interface ThemeMetadata {
   themeTokensVersion: string
   name: string
 }
 
-declare interface DefaultTheme {
+export interface Theme {
   metadata: ThemeMetadata
 }
 
-declare interface ThemeOptions {
+export interface ThemeOptions {
   forceAbsoluteFontSizing?: boolean
   forceZIndex?: boolean
 }
 
 export interface BaseProviderProps {
   themeOptions?: ThemeOptions
-  defaultTheme: DefaultTheme
+  defaultTheme: Theme
   children: React.ReactNode
 }
 

package/types/FileUpload.d.ts

@@ -0,0 +1,41 @@
+// TODO: Duplicate of the one in components-base. TS module resolution doesn't seem to be working from web -> base.
+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

@@ -8,6 +8,9 @@ export type { AutocompleteProps, AutocompleteItem } from './Autocomplete'
 export { default as Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
+export { default as BaseProvider } from './BaseProvider'
+export type { BaseProviderProps, ThemeOptions, Theme, ThemeMetadata } from './BaseProvider'
+
 export { default as BlockQuote } from './BlockQuote'
 export type { BlockQuoteProps } from './BlockQuote'
 
@@ -35,6 +38,10 @@ export type { DatePickerProps } from './DatePicker'
 
 declare const Disclaimer: ComponentType<Props>
 declare const ExpandCollapseMini: ComponentType<Props>
+
+export { default as FileUpload } from './FileUpload'
+export type { FileUploadProps, FileUploadTokens } from './FileUpload'
+
 declare const Footnote: ComponentType<Props> & {
   Link: ComponentType<Props>
 }
@@ -115,7 +122,7 @@ declare const Pagination: ComponentType<Props> & {
 
 export { default as QuantitySelector } from './QuantitySelector'
 export type { QuantitySelectorProps } from './QuantitySelector'
-export { default as BaseProvider } from './BaseProvider'
+
 declare const QuickLinks: ComponentType<Props> & {
   Item: ComponentType<Props>
 }