@telus-uds/components-web 2.33.2 → 2.34.0

package/lib/Table/Body.js

@@ -8,14 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Body = _ref => {
+const Body = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    ref: ref,
     children: children
   });
-};
+});
+Body.displayName = 'Body';
 Body.propTypes = {
   children: _propTypes.default.node
 };

package/lib/Table/Cell.js

@@ -65,7 +65,7 @@ const createStyledCell = htmlElement => _styledComponents.default[htmlElement].w
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = _ref5 => {
+const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     isFirstInRow,
@@ -116,7 +116,8 @@ const Cell = _ref5 => {
     cellPaddingBottom,
     stickyBackgroundColor,
     cellBoxShadowColor,
-    display
+    display,
+    ref
   };
   const typographyTokens = {
     fontName,
@@ -165,7 +166,8 @@ const Cell = _ref5 => {
         })
       });
   }
-};
+});
+Cell.displayName = 'Cell';
 Cell.propTypes = {
   type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: _propTypes.default.object,

package/lib/Table/Header.js

@@ -4,28 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Row = _interopRequireDefault(require("./Row"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Header = _ref => {
+const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
       children: _react.default.Children.map(children, child =>
       /*#__PURE__*/
       // TO DO: pass type as a variant instead of prop
-      (0, _react.cloneElement)(child, {
+      _react.default.cloneElement(child, {
         type: 'heading'
       }))
     })
   });
-};
+});
+Header.displayName = 'Header';
 Header.propTypes = {
   children: _propTypes.default.node
 };

package/lib/Table/Row.js

@@ -4,22 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Row = _ref => {
+const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
-    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.cloneElement)(child, {
+    ref: ref,
+    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
       isFirstInRow: index === 0
     }))
   });
-};
+});
+Row.displayName = 'Row';
 Row.propTypes = {
   children: _propTypes.default.node
 };

package/lib/Table/SubHeading.js

@@ -4,26 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Row = _interopRequireDefault(require("./Row"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Header = _ref => {
+const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+    ref: ref,
     children: _react.default.Children.map(children, child =>
     /*#__PURE__*/
     // TO DO: pass type as a variant instead of prop
-    (0, _react.cloneElement)(child, {
+    _react.default.cloneElement(child, {
       type: 'subHeading'
     }))
   });
-};
+});
+Header.displayName = 'Header';
 Header.propTypes = {
   children: _propTypes.default.node
 };

package/lib/Table/Table.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableContext = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -12,8 +12,6 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Table__StyledContainer",
@@ -29,7 +27,7 @@ const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   return `${tableWidth}px`;
 }, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/_react.default.createContext({});
-const useTableContext = () => (0, _react.useContext)(TableContext);
+const useTableContext = () => _react.default.useContext(TableContext);
 
 /**
  * Use `Table` to display tabular data.
@@ -61,10 +59,10 @@ const Table = _ref2 => {
     borderColor,
     borderWidth
   } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
-  const containerRef = (0, _react.useRef)();
-  const tableRef = (0, _react.useRef)();
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
-  const [tableWidth, setTableWidth] = (0, _react.useState)(0);
+  const containerRef = _react.default.useRef();
+  const tableRef = _react.default.useRef();
+  const [containerWidth, setContainerWidth] = _react.default.useState(0);
+  const [tableWidth, setTableWidth] = _react.default.useState(0);
   (0, _componentsBase.useSafeLayoutEffect)(() => {
     const updateDimensions = () => {
       const containerClientWidth = containerRef.current.clientWidth;

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const ExpandCollapseControl = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "ExpandCollapse__ExpandCollapseControl",
   componentId: "components-web__sc-1l2mmq7-0"
@@ -72,7 +70,7 @@ const getIconButtonTokens = _ref3 => {
     outerBorderWidth: iconOuterBorderWidth
   };
 };
-const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
@@ -152,8 +150,5 @@ ExpandCollapse.propTypes = {
   collapseTitle: _propTypes.default.string.isRequired,
   expandTitle: _propTypes.default.string
 };
-ExpandCollapse.defaultProps = {
-  expandTitle: undefined
-};
 var _default = ExpandCollapse;
 exports.default = _default;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -14,8 +14,6 @@ var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "TermsAndConditions__ContentContainer",
@@ -111,12 +109,12 @@ const MainContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
-    indexedContent,
-    nonIndexedContent,
-    tokens,
+    indexedContent = [],
+    nonIndexedContent = [],
+    tokens = {},
     variant = {},
     dictionary = _dictionary.default,
     ...rest
@@ -230,12 +228,5 @@ TermsAndConditions.propTypes = {
     fr: dictionaryContentShape
   })
 };
-TermsAndConditions.defaultProps = {
-  copy: 'en',
-  indexedContent: [],
-  nonIndexedContent: [],
-  dictionary: _dictionary.default,
-  tokens: {}
-};
 var _default = TermsAndConditions;
 exports.default = _default;

package/lib/Testimonial/Testimonial.js

@@ -80,7 +80,7 @@ const Figcaption = /*#__PURE__*/_styledComponents.default.figcaption.withConfig(
     gap: figcaptionGap
   };
 });
-const Testimonial = _ref5 => {
+const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     showDivider,
     testimonial,
@@ -131,6 +131,7 @@ const Testimonial = _ref5 => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(QuoteContainer, {
       quoteContainerGap: quoteContainerGap,
@@ -202,7 +203,8 @@ const Testimonial = _ref5 => {
       role: "separator"
     })]
   });
-};
+});
+Testimonial.displayName = 'Testimonial';
 Testimonial.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Testimonial'),

package/lib/Toast/Toast.js

@@ -45,7 +45,7 @@ const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref4;
   return containerGap;
 }, animation);
-const Toast = _ref5 => {
+const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     toast,
     copy,
@@ -103,6 +103,7 @@ const Toast = _ref5 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ref: ref,
     ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
@@ -135,7 +136,8 @@ const Toast = _ref5 => {
       children: link.text
     })]
   });
-};
+});
+Toast.displayName = 'Toast';
 Toast.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Toast'),

package/lib/Video/Video.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _fscreen = _interopRequireDefault(require("fscreen"));
@@ -17,8 +17,6 @@ var _ControlBar = _interopRequireDefault(require("./ControlBar/ControlBar"));
 var _videoText = _interopRequireDefault(require("./videoText"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 
 // TODO: replace with the actual spinner component from UDS
@@ -88,25 +86,29 @@ const VideoOverlayElementContainer = /*#__PURE__*/_styledComponents.default.div.
   width: '100%',
   height: '100%'
 });
-const Video = props => {
-  const refVideoPlayer = (0, _react.useRef)({});
-  const refVideoPlayerContainer = (0, _react.useRef)({});
-  const refKeyboardInstructions = (0, _react.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.default.useRef({});
+  const refVideoPlayerContainer = _react.default.useRef({});
+  const refKeyboardInstructions = _react.default.useRef({});
+  let inactivityTimer = null;
   const {
     borderColor,
     pauseIcon,
@@ -123,7 +125,7 @@ const Video = props => {
     compactModeThreshold: 700 // in px
   };
 
-  const [videoPlayerState, setVideoPlayerState] = (0, _react.useState)({
+  const [videoPlayerState, setVideoPlayerState] = _react.default.useState({
     loadedSources: null,
     loadedTracks: null,
     videoLength: 0,
@@ -172,9 +174,6 @@ const Video = props => {
     });
   };
   const refreshMedia = () => {
-    const {
-      defaultMobileQuality
-    } = props;
     const {
       videoUnplayed
     } = videoPlayerState;
@@ -262,10 +261,6 @@ const Video = props => {
       videoLength,
       percentageWatched
     } = videoPlayerState;
-    const {
-      videoTitle,
-      analyticsTracking
-    } = props;
     let percentValue = videoCurrentTime / videoLength * 100;
     percentValue = Math.round(percentValue);
     const previousValue = percentageWatched;
@@ -281,10 +276,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) {
@@ -303,10 +294,6 @@ const Video = props => {
     }
   };
   const updateAnalyticsData = () => {
-    const {
-      videoTitle,
-      analyticsTracking
-    } = props;
     const {
       videoIsPlaying,
       percentageWatched
@@ -424,9 +411,6 @@ const Video = props => {
       videoUnplayed: false,
       videoQualityChanged: false
     }));
-    const {
-      analyticsTracking
-    } = props;
     if (analyticsTracking) {
       updateAnalyticsData();
     }
@@ -438,9 +422,6 @@ const Video = props => {
       ...prevState,
       videoIsPlaying: false
     }));
-    const {
-      analyticsTracking
-    } = props;
     if (analyticsTracking) {
       updateAnalyticsData();
     }
@@ -697,23 +678,18 @@ const Video = props => {
   };
 
   // Prepares video and caption files
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     refreshMedia();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Initial Setup after loading sources
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     const {
       loadedSources,
       loadedTracks
     } = videoPlayerState;
     if (loadedSources && loadedTracks) {
-      const {
-        beginMuted,
-        analyticsTracking,
-        videoTitle
-      } = props;
       const videoPlayer = refVideoPlayer.current;
 
       // Initializes Settings
@@ -986,17 +962,5 @@ Video.propTypes = {
   tokens: (0, _componentsBase.getTokensPropType)('Video'),
   variant: _componentsBase.variantProp.propType
 };
-Video.defaultProps = {
-  tracks: undefined,
-  defaultVolume: 100,
-  beginMuted: false,
-  defaultMobileQuality: 1,
-  defaultDesktopQuality: 1,
-  crossOrigin: undefined,
-  simpleMode: false,
-  videoBorder: false,
-  analyticsTracking: undefined,
-  videoTitle: undefined
-};
 var _default = Video;
 exports.default = _default;

package/lib/VideoPicker/VideoPicker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
 var _componentsBase = require("@telus-uds/components-base");
@@ -15,9 +15,9 @@ var _VideoPickerPlayer = _interopRequireDefault(require("./VideoPickerPlayer"));
 var _VideoSlider = _interopRequireDefault(require("./VideoSlider"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
@@ -66,7 +66,7 @@ const VideoListContainer = /*#__PURE__*/_styledComponents.default.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.default.forwardRef((_ref6, ref) => {
   var _videoList$;
   let {
     videoList = [],
@@ -74,6 +74,9 @@ const VideoPicker = _ref6 => {
     frame,
     onStartVideo = () => {},
     onSelectVideo = () => {},
+    onPlay = () => {},
+    onPause = () => {},
+    onProgress = () => {},
     ...rest
   } = _ref6;
   const viewport = (0, _componentsBase.useViewport)();
@@ -81,13 +84,22 @@ const VideoPicker = _ref6 => {
     stackViewDividerColor,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('VideoPicker');
-  const [currentVideoId, setCurrentVideoId] = (0, _react.useState)(selectedVideo);
-  const videoPlayerRef = (0, _react.useRef)(null);
+  const [currentVideoId, setCurrentVideoId] = _react.default.useState(selectedVideo);
+  const videoPlayerRef = _react.default.useRef(null);
   const currentVideo = videoList.find(video => video.videoId === currentVideoId);
-  (0, _react.useEffect)(() => {
+  _react.default.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 && [_systemConstants.viewports.lg, _systemConstants.viewports.xl].includes(viewport);
@@ -105,6 +117,7 @@ const VideoPicker = _ref6 => {
     isFramed: isFramed
   }, video.videoId));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPickerContainer, {
+    ref: ref,
     isFramed: isFramed,
     ...selectProps(rest),
     ...themeTokens,
@@ -125,7 +138,7 @@ const VideoPicker = _ref6 => {
         ...themeTokens,
         isFramed: isFramed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
-          video: currentVideo,
+          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })
@@ -139,7 +152,8 @@ const VideoPicker = _ref6 => {
       })]
     })
   });
-};
+});
+VideoPicker.displayName = 'VideoPicker';
 VideoPicker.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('VideoPicker'),
@@ -164,7 +178,22 @@ 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.default.func
+  onSelectVideo: _propTypes.default.func,
+  /**
+   * Callback function trigerred during progress milestones 10% 25% 50% 75% 100%.
+   * @param {object} event - The event object.
+   */
+  onProgress: _propTypes.default.func,
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} event - The event object.
+   */
+  onPlay: _propTypes.default.func,
+  /**
+   * Callback function trigerred when the video gets paused.
+   * @param {object} event - The event object.
+   */
+  onPause: _propTypes.default.func
 };
 var _default = VideoPicker;
 exports.default = _default;

package/lib/VideoPicker/VideoPickerPlayer.js

@@ -11,7 +11,7 @@ var _WebVideo = _interopRequireDefault(require("../WebVideo/WebVideo"));
 var _videoPropType = require("./videoPropType");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const VideoPickerPlayer = _ref => {
+const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     video = {},
     videoPlayerRef,
@@ -22,6 +22,7 @@ const VideoPickerPlayer = _ref => {
     tokens: {
       flexShrink: 1
     },
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: videoPlayerRef,
       children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, {
@@ -43,7 +44,8 @@ const VideoPickerPlayer = _ref => {
       })]
     })]
   });
-};
+});
+VideoPickerPlayer.displayName = 'VideoPickerPlayer';
 VideoPickerPlayer.propTypes = {
   video: _videoPropType.VideoPropType,
   videoPlayerRef: _videoPropType.RefPropType,