@telus-uds/components-web 2.33.2 → 2.34.0

package/lib-module/Table/Body.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Body = _ref => {
+const Body = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_jsx("tbody", {
+    ref: ref,
     children: children
   });
-};
+});
+Body.displayName = 'Body';
 Body.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/Cell.js

@@ -56,7 +56,7 @@ const createStyledCell = htmlElement => styled[htmlElement].withConfig({
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = _ref5 => {
+const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     isFirstInRow,
@@ -107,7 +107,8 @@ const Cell = _ref5 => {
     cellPaddingBottom,
     stickyBackgroundColor,
     cellBoxShadowColor,
-    display
+    display,
+    ref
   };
   const typographyTokens = {
     fontName,
@@ -156,7 +157,8 @@ const Cell = _ref5 => {
         })
       });
   }
-};
+});
+Cell.displayName = 'Cell';
 Cell.propTypes = {
   type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,

package/lib-module/Table/Header.js

@@ -1,22 +1,24 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Header = _ref => {
+const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_jsx("thead", {
+    ref: ref,
     children: /*#__PURE__*/_jsx(Row, {
       children: React.Children.map(children, child =>
       /*#__PURE__*/
       // TO DO: pass type as a variant instead of prop
-      cloneElement(child, {
+      React.cloneElement(child, {
         type: 'heading'
       }))
     })
   });
-};
+});
+Header.displayName = 'Header';
 Header.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/Row.js

@@ -1,16 +1,18 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Row = _ref => {
+const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_jsx("tr", {
-    children: React.Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+    ref: ref,
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       isFirstInRow: index === 0
     }))
   });
-};
+});
+Row.displayName = 'Row';
 Row.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/SubHeading.js

@@ -1,20 +1,22 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Header = _ref => {
+const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_jsx(Row, {
+    ref: ref,
     children: React.Children.map(children, child =>
     /*#__PURE__*/
     // TO DO: pass type as a variant instead of prop
-    cloneElement(child, {
+    React.cloneElement(child, {
       type: 'subHeading'
     }))
   });
-};
+});
+Header.displayName = 'Header';
 Header.propTypes = {
   children: PropTypes.node
 };

package/lib-module/Table/Table.js

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
@@ -20,7 +20,7 @@ const StyledTable = /*#__PURE__*/styled.table.withConfig({
   return `${tableWidth}px`;
 }, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
-export const useTableContext = () => useContext(TableContext);
+export const useTableContext = () => React.useContext(TableContext);
 
 /**
  * Use `Table` to display tabular data.
@@ -51,10 +51,10 @@ const Table = _ref2 => {
     borderColor,
     borderWidth
   } = useThemeTokens('Table', tokens, variant);
-  const containerRef = useRef();
-  const tableRef = useRef();
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [tableWidth, setTableWidth] = useState(0);
+  const containerRef = React.useRef();
+  const tableRef = React.useRef();
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [tableWidth, setTableWidth] = React.useState(0);
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
       const containerClientWidth = containerRef.current.clientWidth;

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -64,7 +64,7 @@ const getIconButtonTokens = _ref3 => {
     outerBorderWidth: iconOuterBorderWidth
   };
 };
-const ExpandCollapse = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
@@ -144,7 +144,4 @@ ExpandCollapse.propTypes = {
   collapseTitle: PropTypes.string.isRequired,
   expandTitle: PropTypes.string
 };
-ExpandCollapse.defaultProps = {
-  expandTitle: undefined
-};
 export default ExpandCollapse;

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+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';
@@ -103,12 +103,12 @@ const MainContainer = /*#__PURE__*/styled.div.withConfig({
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
-    indexedContent,
-    nonIndexedContent,
-    tokens,
+    indexedContent = [],
+    nonIndexedContent = [],
+    tokens = {},
     variant = {},
     dictionary = defaultDictionary,
     ...rest
@@ -222,11 +222,4 @@ TermsAndConditions.propTypes = {
     fr: dictionaryContentShape
   })
 };
-TermsAndConditions.defaultProps = {
-  copy: 'en',
-  indexedContent: [],
-  nonIndexedContent: [],
-  dictionary: defaultDictionary,
-  tokens: {}
-};
 export default TermsAndConditions;

package/lib-module/Testimonial/Testimonial.js

@@ -74,7 +74,7 @@ const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
     gap: figcaptionGap
   };
 });
-const Testimonial = _ref5 => {
+const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     showDivider,
     testimonial,
@@ -125,6 +125,7 @@ const Testimonial = _ref5 => {
   };
   return /*#__PURE__*/_jsxs(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsxs(QuoteContainer, {
       quoteContainerGap: quoteContainerGap,
@@ -196,7 +197,8 @@ const Testimonial = _ref5 => {
       role: "separator"
     })]
   });
-};
+});
+Testimonial.displayName = 'Testimonial';
 Testimonial.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Testimonial'),

package/lib-module/Toast/Toast.js

@@ -37,7 +37,7 @@ const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref4;
   return containerGap;
 }, animation);
-const Toast = _ref5 => {
+const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     toast,
     copy,
@@ -95,6 +95,7 @@ const Toast = _ref5 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ref: ref,
     ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
@@ -127,7 +128,8 @@ const Toast = _ref5 => {
       children: link.text
     })]
   });
-};
+});
+Toast.displayName = 'Toast';
 Toast.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Toast'),

package/lib-module/Video/Video.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import fscreen from 'fscreen';
@@ -80,25 +80,29 @@ const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
   width: '100%',
   height: '100%'
 });
-const Video = props => {
-  const refVideoPlayer = useRef({});
-  const refVideoPlayerContainer = useRef({});
-  const refKeyboardInstructions = useRef({});
-  let inactivityTimer = null;
-  const {
-    videoBorder,
-    simpleMode,
+const Video = _ref3 => {
+  let {
+    analyticsTracking,
+    videoTitle,
+    videoBorder = false,
+    simpleMode = false,
     copy,
     posterSrc,
     crossOrigin,
-    defaultVolume,
+    defaultVolume = 100,
+    beginMuted = false,
     sources,
     tracks,
-    defaultDesktopQuality,
+    defaultDesktopQuality = 1,
+    defaultMobileQuality = 1,
     tokens,
     variant = {},
     ...rest
-  } = props;
+  } = _ref3;
+  const refVideoPlayer = React.useRef({});
+  const refVideoPlayerContainer = React.useRef({});
+  const refKeyboardInstructions = React.useRef({});
+  let inactivityTimer = null;
   const {
     borderColor,
     pauseIcon,
@@ -115,7 +119,7 @@ const Video = props => {
     compactModeThreshold: 700 // in px
   };
 
-  const [videoPlayerState, setVideoPlayerState] = useState({
+  const [videoPlayerState, setVideoPlayerState] = React.useState({
     loadedSources: null,
     loadedTracks: null,
     videoLength: 0,
@@ -164,9 +168,6 @@ const Video = props => {
     });
   };
   const refreshMedia = () => {
-    const {
-      defaultMobileQuality
-    } = props;
     const {
       videoUnplayed
     } = videoPlayerState;
@@ -254,10 +255,6 @@ const Video = props => {
       videoLength,
       percentageWatched
     } = videoPlayerState;
-    const {
-      videoTitle,
-      analyticsTracking
-    } = props;
     let percentValue = videoCurrentTime / videoLength * 100;
     percentValue = Math.round(percentValue);
     const previousValue = percentageWatched;
@@ -273,10 +270,6 @@ const Video = props => {
   };
   const setPlaying = async isPlaying => {
     const videoPlayer = refVideoPlayer.current;
-    const {
-      analyticsTracking,
-      videoTitle
-    } = props;
     if (isPlaying) {
       await videoPlayer.play();
       if (analyticsTracking !== undefined && videoTitle) {
@@ -295,10 +288,6 @@ const Video = props => {
     }
   };
   const updateAnalyticsData = () => {
-    const {
-      videoTitle,
-      analyticsTracking
-    } = props;
     const {
       videoIsPlaying,
       percentageWatched
@@ -416,9 +405,6 @@ const Video = props => {
       videoUnplayed: false,
       videoQualityChanged: false
     }));
-    const {
-      analyticsTracking
-    } = props;
     if (analyticsTracking) {
       updateAnalyticsData();
     }
@@ -430,9 +416,6 @@ const Video = props => {
       ...prevState,
       videoIsPlaying: false
     }));
-    const {
-      analyticsTracking
-    } = props;
     if (analyticsTracking) {
       updateAnalyticsData();
     }
@@ -689,23 +672,18 @@ const Video = props => {
   };
 
   // Prepares video and caption files
-  useEffect(() => {
+  React.useEffect(() => {
     refreshMedia();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Initial Setup after loading sources
-  useEffect(() => {
+  React.useEffect(() => {
     const {
       loadedSources,
       loadedTracks
     } = videoPlayerState;
     if (loadedSources && loadedTracks) {
-      const {
-        beginMuted,
-        analyticsTracking,
-        videoTitle
-      } = props;
       const videoPlayer = refVideoPlayer.current;
 
       // Initializes Settings
@@ -978,16 +956,4 @@ Video.propTypes = {
   tokens: getTokensPropType('Video'),
   variant: variantProp.propType
 };
-Video.defaultProps = {
-  tracks: undefined,
-  defaultVolume: 100,
-  beginMuted: false,
-  defaultMobileQuality: 1,
-  defaultDesktopQuality: 1,
-  crossOrigin: undefined,
-  simpleMode: false,
-  videoBorder: false,
-  analyticsTracking: undefined,
-  videoTitle: undefined
-};
 export default Video;

package/lib-module/VideoPicker/VideoPicker.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { selectSystemProps, StackView, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
@@ -58,7 +58,7 @@ const VideoListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPicker__VideoListContainer",
   componentId: "components-web__sc-x6lxp0-2"
 })(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
-const VideoPicker = _ref6 => {
+const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   var _videoList$;
   let {
     videoList = [],
@@ -66,6 +66,9 @@ const VideoPicker = _ref6 => {
     frame,
     onStartVideo = () => {},
     onSelectVideo = () => {},
+    onPlay = () => {},
+    onPause = () => {},
+    onProgress = () => {},
     ...rest
   } = _ref6;
   const viewport = useViewport();
@@ -73,13 +76,22 @@ const VideoPicker = _ref6 => {
     stackViewDividerColor,
     ...themeTokens
   } = useThemeTokens('VideoPicker');
-  const [currentVideoId, setCurrentVideoId] = useState(selectedVideo);
-  const videoPlayerRef = useRef(null);
+  const [currentVideoId, setCurrentVideoId] = React.useState(selectedVideo);
+  const videoPlayerRef = React.useRef(null);
   const currentVideo = videoList.find(video => video.videoId === currentVideoId);
-  useEffect(() => {
+  React.useEffect(() => {
     // Update current video if parent changes which video id it passes down
     setCurrentVideoId(selectedVideo);
   }, [selectedVideo]);
+  const addVideoEventHandlers = video => {
+    if (!video) return {};
+    return {
+      ...video,
+      onPlay: video.onPlay || onPlay,
+      onPause: video.onPause || onPause,
+      onProgress: video.onProgress || onProgress
+    };
+  };
 
   // `frame` variant should only work on larger screens
   const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport);
@@ -97,6 +109,7 @@ const VideoPicker = _ref6 => {
     isFramed: isFramed
   }, video.videoId));
   return /*#__PURE__*/_jsx(VideoPickerContainer, {
+    ref: ref,
     isFramed: isFramed,
     ...selectProps(rest),
     ...themeTokens,
@@ -117,7 +130,7 @@ const VideoPicker = _ref6 => {
         ...themeTokens,
         isFramed: isFramed,
         children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
-          video: currentVideo,
+          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })
@@ -131,7 +144,8 @@ const VideoPicker = _ref6 => {
       })]
     })
   });
-};
+});
+VideoPicker.displayName = 'VideoPicker';
 VideoPicker.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('VideoPicker'),
@@ -156,6 +170,21 @@ VideoPicker.propTypes = {
    * Callback function trigerred when a video is selected from the thumbnail list.
    * @param {object} video - The video object that is selected.
    */
-  onSelectVideo: PropTypes.func
+  onSelectVideo: PropTypes.func,
+  /**
+   * Callback function trigerred during progress milestones 10% 25% 50% 75% 100%.
+   * @param {object} event - The event object.
+   */
+  onProgress: PropTypes.func,
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} event - The event object.
+   */
+  onPlay: PropTypes.func,
+  /**
+   * Callback function trigerred when the video gets paused.
+   * @param {object} event - The event object.
+   */
+  onPause: PropTypes.func
 };
 export default VideoPicker;

package/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -5,7 +5,7 @@ import WebVideo from '../WebVideo/WebVideo';
 import { VideoPropType, RefPropType } from './videoPropType';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const VideoPickerPlayer = _ref => {
+const VideoPickerPlayer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     video = {},
     videoPlayerRef,
@@ -16,6 +16,7 @@ const VideoPickerPlayer = _ref => {
     tokens: {
       flexShrink: 1
     },
+    ref: ref,
     children: [/*#__PURE__*/_jsx("div", {
       ref: videoPlayerRef,
       children: video.videoId && /*#__PURE__*/_jsx(WebVideo, {
@@ -37,7 +38,8 @@ const VideoPickerPlayer = _ref => {
       })]
     })]
   });
-};
+});
+VideoPickerPlayer.displayName = 'VideoPickerPlayer';
 VideoPickerPlayer.propTypes = {
   video: VideoPropType,
   videoPlayerRef: RefPropType,

package/lib-module/VideoPicker/VideoPickerThumbnail.js

@@ -79,7 +79,7 @@ const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
   componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
-const VideoPickerThumbnail = _ref7 => {
+const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -179,6 +179,7 @@ const VideoPickerThumbnail = _ref7 => {
         outline: 'none'
       }];
     },
+    ref: ref,
     children: _ref10 => {
       let {
         hovered: hover,
@@ -201,7 +202,8 @@ const VideoPickerThumbnail = _ref7 => {
       });
     }
   }, video.videoId);
-};
+});
+VideoPickerThumbnail.displayName = 'VideoPickerThumbnail';
 VideoPickerThumbnail.propTypes = {
   selectedVideoId: PropTypes.string,
   onSelectVideo: PropTypes.func,

package/lib-module/VideoPicker/VideoSlider.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from 'react';
+import React from 'react';
 import { HorizontalScroll, HorizontalScrollButton, horizontalScrollUtils, StackView, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
@@ -6,13 +6,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const {
   useItemPositions
 } = horizontalScrollUtils;
-const VideoSlider = _ref => {
+const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   const viewport = useViewport();
   const [itemPositions] = useItemPositions();
-  const [containerWidth, setContainerWidth] = useState(null);
+  const [containerWidth, setContainerWidth] = React.useState(null);
   const {
     previousIcon: PreviousIcon,
     nextIcon: NextIcon
@@ -44,7 +44,7 @@ const VideoSlider = _ref => {
     tokens: {
       flexGrow: 1
     },
-    children: React.Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       index,
       itemPositions,
       width: itemWidth
@@ -64,6 +64,7 @@ const VideoSlider = _ref => {
   return /*#__PURE__*/_jsx(View, {
     onLayout: onLayout,
     style: overflow,
+    ref: ref,
     children: containerWidth === null ?
     // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
     content : /*#__PURE__*/_jsx(HorizontalScroll, {
@@ -73,7 +74,8 @@ const VideoSlider = _ref => {
       children: content
     })
   });
-};
+});
+VideoSlider.displayName = 'VideoSlider';
 VideoSlider.propTypes = {
   children: PropTypes.node
 };

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -69,7 +69,7 @@ const Center = /*#__PURE__*/styled('div').withConfig({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = _ref2 => {
+const WaffleGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     items,
     rowSize = null,
@@ -85,6 +85,7 @@ const WaffleGrid = _ref2 => {
   });
   const currentRowSize = useResponsiveProp(rowSize);
   return /*#__PURE__*/_jsx(Container, {
+    ref: ref,
     ...selectProps(rest),
     children: items.map(child => /*#__PURE__*/_createElement(Item, {
       ...themeTokens,
@@ -116,7 +117,8 @@ const WaffleGrid = _ref2 => {
       })
     })))
   });
-};
+});
+WaffleGrid.displayName = 'WaffleGrid';
 WaffleGrid.propTypes = {
   ...selectedSystemPropTypes,
   /**