@telus-uds/components-web 2.25.1 → 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/MultiSelectFilter.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react'
+import type { Tokens } from './common'
 
 interface MultiSelectFilterItem {
   label: string
@@ -10,7 +11,7 @@ export interface MultiSelectFilterProps {
   subtitle?: string
   id?: string
   variant?: string
-  tokens?: []
+  tokens?: Tokens
   items: MultiSelectFilterItem[]
   values?: string[]
   initialValues?: string[]

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>