@telus-uds/components-web 2.26.0 → 2.27.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 01 Dec 2023 20:57:37 GMT and should not be manually modified.
+This log was last generated on Wed, 13 Dec 2023 21:13:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.27.0
+
+Wed, 13 Dec 2023 21:13:56 GMT
+
+### Minor changes
+
+- fixed WebVideo youtube callback type by adding event params (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/components-base to v1.72.0
+- Bump @telus-uds/system-theme-tokens to v2.48.0
+
+### Patches
+
+- `DatePicker`: Fix stacking context and positioning issue (shahzaibkhalidmalik@outlook.com)
+- fixes the size-by-height property (guillermo.peitzner@telus.com)
+- adding colour toggle to imports (mauricio.batresmontejo@telus.com)
+
 ## 2.26.0
 
-Fri, 01 Dec 2023 20:57:37 GMT
+Fri, 01 Dec 2023 21:08:36 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -54,6 +54,24 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -76,7 +94,7 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -97,9 +115,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
   const [inputText, setInputText] = (0, _react.useState)(date instanceof _moment.default ? date.format(dateFormat) : '');
+  const textInputRef = (0, _react.useRef)();
+  const [datePickerPosition, setDatePickerPosition] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isClickedInside, setIsClickedInside] = (0, _react.useState)(false);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -116,10 +158,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -164,7 +206,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-2"
+    componentId: "components-web__sc-mz8fi3-3"
   })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
@@ -190,10 +232,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -205,10 +247,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -220,18 +262,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -243,68 +274,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
-          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
-          keepOpenOnDateSelect: true,
+          keepOpenOnDateSelect: false,
           daySize: daySize,
-          ref: ref,
           renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
-          id: id,
-          renderNavNextButton: renderNextButton,
-          renderMonthElement: _ref6 => {
+          renderMonthElement: _ref7 => {
             let {
               month
-            } = _ref6;
+            } = _ref7;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -315,6 +311,70 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+                date: inputDate,
+                disabled: disabled,
+                onDateChange: onChange,
+                focused: isFocused,
+                onFocusChange: onFocusChange,
+                numberOfMonths: 1,
+                hideKeyboardShortcutsPanel: true,
+                keepOpenOnDateSelect: true,
+                daySize: daySize,
+                ref: ref,
+                renderNavPrevButton: renderPrevButton,
+                isOutsideRange: isDayDisabled,
+                phrases: getCopy(),
+                id: id,
+                renderNavNextButton: renderNextButton,
+                renderMonthElement: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib/OptimizeImage/OptimizeImage.js

@@ -42,7 +42,7 @@ const OptimizeImage = _ref => {
         mdSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
         lgSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
         xlSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, xl, quality)
+        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, dimension, xl, quality)
       });
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);

package/lib/OptimizeImage/utils/getFallbackUrl.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getFallbackUrl;
 var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getFallbackUrl(url, width, quality) {
+function getFallbackUrl(url, dimension, size, quality) {
   if (!(0, _isSvgUrl.default)(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib/baseExports.js

@@ -93,6 +93,12 @@ Object.defineProperty(exports, "ChevronLink", {
     return _componentsBase.ChevronLink;
   }
 });
+Object.defineProperty(exports, "ColourToggle", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ColourToggle;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {

package/lib-module/DatePicker/DatePicker.js

@@ -1,13 +1,13 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
+import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, Portal, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
-import { isUndefined } from 'lodash';
+import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -47,6 +47,24 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -69,7 +87,7 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -90,9 +108,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = useState(date instanceof moment ? date.format(dateFormat) : '');
+  const textInputRef = useRef();
+  const [datePickerPosition, setDatePickerPosition] = useState({
+    left: 0,
+    top: 0
+  });
+  useSafeLayoutEffect(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = useState(false);
   const [isClickedInside, setIsClickedInside] = useState(false);
   const getCopy = useCopy({
@@ -109,10 +151,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -157,7 +199,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-2"
+    componentId: "components-web__sc-mz8fi3-3"
   })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
@@ -183,10 +225,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -198,10 +240,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -213,18 +255,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/_jsx(CalendarContainer, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/_jsx(_Fragment, {
     children: inline ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -236,68 +267,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/_jsx(DayPickerSingleDateController, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/_jsx(CalendarContainer, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/_jsx(MonthCenterContainer, {
-            children: /*#__PURE__*/_jsxs("div", {
-              children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
-          children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/_jsx(TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/_jsx(SingleDatePicker, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
-          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
-          keepOpenOnDateSelect: true,
+          keepOpenOnDateSelect: false,
           daySize: daySize,
-          ref: ref,
           renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
-          id: id,
-          renderNavNextButton: renderNextButton,
-          renderMonthElement: _ref6 => {
+          renderMonthElement: _ref7 => {
             let {
               month
-            } = _ref6;
+            } = _ref7;
             return /*#__PURE__*/_jsx(MonthCenterContainer, {
               children: /*#__PURE__*/_jsxs("div", {
                 children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -308,6 +304,70 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
             children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/_jsx(Portal, {
+          children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/_jsx(CalendarContainer, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/_jsx(SingleDatePicker, {
+                date: inputDate,
+                disabled: disabled,
+                onDateChange: onChange,
+                focused: isFocused,
+                onFocusChange: onFocusChange,
+                numberOfMonths: 1,
+                hideKeyboardShortcutsPanel: true,
+                keepOpenOnDateSelect: true,
+                daySize: daySize,
+                ref: ref,
+                renderNavPrevButton: renderPrevButton,
+                isOutsideRange: isDayDisabled,
+                phrases: getCopy(),
+                id: id,
+                renderNavNextButton: renderNextButton,
+                renderMonthElement: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/_jsx(MonthCenterContainer, {
+                    children: /*#__PURE__*/_jsxs("div", {
+                      children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
+                  children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -33,7 +33,7 @@ const OptimizeImage = _ref => {
         mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
         lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
         xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, xl, quality)
+        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
       });
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -1,7 +1,7 @@
 import isSvgUrl from './isSvgUrl';
-export default function getFallbackUrl(url, width, quality) {
+export default function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.71.0",
+    "@telus-uds/components-base": "1.72.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.47.0",
+    "@telus-uds/system-theme-tokens": "^2.48.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.26.0"
+  "version": "2.27.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React, { forwardRef, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
@@ -13,10 +13,12 @@ import {
   useViewport,
   useThemeTokens,
   applyTextStyles,
-  getTokensPropType
+  getTokensPropType,
+  Portal,
+  useSafeLayoutEffect
 } from '@telus-uds/components-base'
 import moment from 'moment'
-import { isUndefined } from 'lodash'
+import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
@@ -48,6 +50,12 @@ const DateInputWrapper = styled.div({
   flexDirection: 'column'
 })
 
+const PortalPositionedContainer = styled.div({
+  position: 'absolute',
+  left: ({ left }) => `${left}px`,
+  top: ({ top }) => `${top}px`
+})
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -97,6 +105,23 @@ const DatePicker = forwardRef(
     const [inputText, setInputText] = useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
+    const textInputRef = useRef()
+    const [datePickerPosition, setDatePickerPosition] = useState({ left: 0, top: 0 })
+
+    useSafeLayoutEffect(() => {
+      const updateDimensions = () => {
+        if (inline) return
+        const { left, top } = textInputRef.current.getBoundingClientRect()
+        setDatePickerPosition({
+          left,
+          top: top + textInputRef.current.offsetHeight
+        })
+      }
+      const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
+      updateDimensions()
+      window.addEventListener('resize', throttledUpdateDimensions)
+      return () => window.removeEventListener('resize', throttledUpdateDimensions)
+    }, [])
 
     const [isFocused, setIsFocused] = useState(false)
     const [isClickedInside, setIsClickedInside] = useState(false)
@@ -204,19 +229,7 @@ const DatePicker = forwardRef(
       />
     )
     return (
-      <CalendarContainer
-        {...selectProps(rest)}
-        daySize={daySize}
-        validation={validation}
-        remainingTokens={{
-          ...remainingTokens
-        }}
-        calendarDayDefaultHeight={circleSize}
-        calendarDayDefaultWidth={circleSize}
-        calendarMonthFontTokens={calendarMonthFontTokens}
-        calendarWeekFontTokens={calendarWeekFontTokens}
-        defaultFontTokens={defaultFontTokens}
-      >
+      <>
         {inline ? (
           <>
             <HiddenInputFieldContainer
@@ -225,65 +238,30 @@ const DatePicker = forwardRef(
             >
               <input ref={ref} id={id} type="text" value={inputText} readOnly />
             </HiddenInputFieldContainer>
-            <DayPickerSingleDateController
-              date={inputDate}
-              onDateChange={onChange}
-              focused={isFocused}
-              onFocusChange={onFocusChange}
-              numberOfMonths={1}
-              hideKeyboardShortcutsPanel={true}
-              keepOpenOnDateSelect={false}
+            <CalendarContainer
+              {...selectProps(rest)}
               daySize={daySize}
-              renderNavPrevButton={renderPrevButton}
-              renderNavNextButton={renderNextButton}
-              isOutsideRange={isDayDisabled}
-              phrases={getCopy()}
-              renderMonthElement={({ month }) => (
-                <MonthCenterContainer>
-                  <div>
-                    {dictionary[copy]
-                      ? dictionary[copy].months[month.month()]
-                      : month.format('MMMM')}{' '}
-                    {month.year()}
-                  </div>
-                </MonthCenterContainer>
-              )}
-              renderWeekHeaderElement={(day) => (
-                <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
-              )}
-            />
-          </>
-        ) : (
-          <DateInputWrapper onMouseDown={handleMouseDown} onFocus={handleFocus}>
-            <TextInput
-              copy={copy}
-              feedback={feedback}
-              hint={hint}
-              placeholder="DD / MM / YYYY"
-              onChange={onChangeInput}
-              tooltip={tooltip}
-              hintPosition={hintPosition}
-              label={dictionary[copy]?.roleDescription ?? label}
-              value={inputText}
               validation={validation}
-              inactive={disabled}
+              remainingTokens={remainingTokens}
+              calendarDayDefaultHeight={circleSize}
+              calendarDayDefaultWidth={circleSize}
+              calendarMonthFontTokens={calendarMonthFontTokens}
+              calendarWeekFontTokens={calendarWeekFontTokens}
+              defaultFontTokens={defaultFontTokens}
             >
-              <SingleDatePicker
+              <DayPickerSingleDateController
                 date={inputDate}
-                disabled={disabled}
                 onDateChange={onChange}
                 focused={isFocused}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}
-                keepOpenOnDateSelect={true}
+                keepOpenOnDateSelect={false}
                 daySize={daySize}
-                ref={ref}
                 renderNavPrevButton={renderPrevButton}
+                renderNavNextButton={renderNextButton}
                 isOutsideRange={isDayDisabled}
                 phrases={getCopy()}
-                id={id}
-                renderNavNextButton={renderNextButton}
                 renderMonthElement={({ month }) => (
                   <MonthCenterContainer>
                     <div>
@@ -298,10 +276,94 @@ const DatePicker = forwardRef(
                   <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
                 )}
               />
+            </CalendarContainer>
+          </>
+        ) : (
+          <DateInputWrapper onMouseDown={handleMouseDown} onFocus={handleFocus}>
+            <TextInput
+              copy={copy}
+              feedback={feedback}
+              hint={hint}
+              placeholder="DD / MM / YYYY"
+              onChange={onChangeInput}
+              tooltip={tooltip}
+              hintPosition={hintPosition}
+              label={dictionary[copy]?.roleDescription ?? label}
+              value={inputText}
+              validation={validation}
+              inactive={disabled}
+              ref={textInputRef}
+            >
+              <Portal>
+                {/* Because `SingleDatePicker` is an absolutely positioned element,
+                 * putting it in a `Portal` breaks view heirarchy because it doesn't
+                 * align with `TextInput`, but rather position itself with the nearest
+                 * positioned ancestor.
+                 *
+                 * This means that the `Portal` needs to be positioned absolutely,
+                 * but the `SingleDatePicker` needs to be positioned relative to the
+                 * `Portal`.
+                 *
+                 * This is accomplished by wrapping the `SingleDatePicker` in a
+                 * `PortalPositionedContainer` which positions the `SingleDatePicker`
+                 * relative to the `Portal`. This container is then positioned absolutely
+                 * relative to the `TextInput`.
+                 *
+                 * TODO: Using `floating-ui` or something like that is a more preferred and streamlined way
+                 * to position popovers and overlays.
+                 */}
+                <PortalPositionedContainer
+                  top={datePickerPosition.top}
+                  left={datePickerPosition.left}
+                >
+                  <CalendarContainer
+                    {...selectProps(rest)}
+                    daySize={daySize}
+                    validation={validation}
+                    remainingTokens={remainingTokens}
+                    calendarDayDefaultHeight={circleSize}
+                    calendarDayDefaultWidth={circleSize}
+                    calendarMonthFontTokens={calendarMonthFontTokens}
+                    calendarWeekFontTokens={calendarWeekFontTokens}
+                    defaultFontTokens={defaultFontTokens}
+                  >
+                    <SingleDatePicker
+                      date={inputDate}
+                      disabled={disabled}
+                      onDateChange={onChange}
+                      focused={isFocused}
+                      onFocusChange={onFocusChange}
+                      numberOfMonths={1}
+                      hideKeyboardShortcutsPanel={true}
+                      keepOpenOnDateSelect={true}
+                      daySize={daySize}
+                      ref={ref}
+                      renderNavPrevButton={renderPrevButton}
+                      isOutsideRange={isDayDisabled}
+                      phrases={getCopy()}
+                      id={id}
+                      renderNavNextButton={renderNextButton}
+                      renderMonthElement={({ month }) => (
+                        <MonthCenterContainer>
+                          <div>
+                            {dictionary[copy]
+                              ? dictionary[copy].months[month.month()]
+                              : month.format('MMMM')}{' '}
+                            {month.year()}
+                          </div>
+                        </MonthCenterContainer>
+                      )}
+                      renderWeekHeaderElement={(day) => (
+                        <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
+                      )}
+                    />
+                  </CalendarContainer>
+                </PortalPositionedContainer>
+              </Portal>
             </TextInput>
           </DateInputWrapper>
         )}
-      </CalendarContainer>
+      </>
     )
   }
 )

package/src/OptimizeImage/OptimizeImage.jsx

@@ -69,7 +69,7 @@ const OptimizeImage = ({
           disableRetina,
           supportsWebp
         ),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, xl, quality)
+        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
       })
     })
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])

package/src/OptimizeImage/utils/getFallbackUrl.js

@@ -1,8 +1,8 @@
 import isSvgUrl from './isSvgUrl'
 
-export default function getFallbackUrl(url, width, quality) {
+export default function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
-    return `${url}?w=${width}&q=${quality}`
+    return `${url}?${dimension}=${size}&q=${quality}`
   }
 
   return url

package/src/baseExports.js

@@ -22,6 +22,7 @@ export {
   Checkbox,
   CheckboxGroup,
   ChevronLink,
+  ColourToggle,
   Divider,
   ExpandCollapse,
   Feedback,

package/types/WebVideo.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react'
+import { YouTubeEvent } from 'react-youtube'
 import type { HTMLAttrs } from './common'
 
 export interface WebVideoProps extends HTMLAttrs {
@@ -10,9 +11,9 @@ export interface WebVideoProps extends HTMLAttrs {
   videoLength: number
   copy?: 'en' | 'fr'
   onStart?: () => void
-  onPlay?: () => void
-  onEnd?: () => void
-  onPause?: () => void
+  onPlay?: (event: YouTubeEvent<number>) => void
+  onEnd?: (event: YouTubeEvent<number>) => void
+  onPause?: (event: YouTubeEvent<number>) => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>