@telus-uds/components-web 2.0.0 → 2.2.0

package/lib/Card/Card.js

@@ -97,7 +97,6 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     variant: { ...variant,
       padding: 'custom'
     },
-    tokens: tokens,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,

package/lib/Table/Cell.js

@@ -37,9 +37,10 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
-    cellPaddingLeft
+    cellPaddingLeft,
+    cellMinWidth
   } = _ref2;
-  return (0, _styledComponents.css)(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return (0, _styledComponents.css)(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
 });
 
 const StyledHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
@@ -90,15 +91,20 @@ const Cell = _ref7 => {
     children,
     type = 'default',
     isFirstInRow,
-    align = 'left'
+    align = 'left',
+    tokens: cellTokens
   } = _ref7;
   const {
     text,
     isScrollable: isTableScrollable,
     variant,
-    tokens
+    tokens: tableTokens
   } = (0, _Table.useTableContext)();
+  const themeTokens = { ...tableTokens,
+    ...cellTokens
+  };
   const {
+    cellMinWidth,
     cellHeadingBackground,
     cellHeadingBoxShadowColor,
     cellBoxShadowColor,
@@ -113,10 +119,11 @@ const Cell = _ref7 => {
     fontName,
     fontWeight,
     fontSize
-  } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
+  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, variant);
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellMinWidth,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -192,6 +199,7 @@ const Cell = _ref7 => {
 };
 
 Cell.propTypes = {
+  tokens: _propTypes.default.object,
   children: _propTypes.default.node,
 
   /**

package/lib/VideoPicker/VideoPicker.js

@@ -95,6 +95,8 @@ const VideoPicker = _ref6 => {
     videoList = [],
     selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
     frame,
+    onStartVideo = () => {},
+    onSelectVideo = () => {},
     ...rest
   } = _ref6;
   const viewport = (0, _componentsBase.useViewport)();
@@ -116,7 +118,10 @@ const VideoPicker = _ref6 => {
     video: video,
     videoPlayerRef: videoPlayerRef,
     selectedVideoId: currentVideoId,
-    onSelectVideo: current => setCurrentVideoId(current.videoId),
+    onSelectVideo: current => {
+      setCurrentVideoId(current.videoId);
+      onSelectVideo(current);
+    },
     layout: !hasSlider ? 'horizontal' : 'vertical',
     index: index,
     isFramed: isFramed
@@ -142,7 +147,8 @@ const VideoPicker = _ref6 => {
         isFramed: isFramed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
           video: currentVideo,
-          videoPlayerRef: videoPlayerRef
+          videoPlayerRef: videoPlayerRef,
+          onStartVideo: onStartVideo
         })
       }), hasSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSlider.default, {
         children: listElements
@@ -171,7 +177,19 @@ VideoPicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
    */
-  frame: _propTypes.default.bool
+  frame: _propTypes.default.bool,
+
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} video - The video object that is playing.
+   */
+  onStartVideo: _propTypes.default.func,
+
+  /**
+   * 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
 };
 var _default = VideoPicker;
 exports.default = _default;

package/lib/VideoPicker/VideoPickerPlayer.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _WebVideo = _interopRequireDefault(require("../WebVideo/WebVideo"));
 
 var _videoPropType = require("./videoPropType");
@@ -20,7 +22,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const VideoPickerPlayer = _ref => {
   let {
     video = {},
-    videoPlayerRef
+    videoPlayerRef,
+    onStartVideo = () => {}
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
     space: 3,
@@ -29,7 +32,8 @@ const VideoPickerPlayer = _ref => {
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, { ...video
+      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, { ...video,
+        onStart: () => onStartVideo(video)
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 2,
@@ -48,7 +52,8 @@ const VideoPickerPlayer = _ref => {
 
 VideoPickerPlayer.propTypes = {
   video: _videoPropType.VideoPropType,
-  videoPlayerRef: _videoPropType.RefPropType
+  videoPlayerRef: _videoPropType.RefPropType,
+  onStartVideo: _propTypes.default.func
 };
 var _default = VideoPickerPlayer;
 exports.default = _default;

package/lib/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   QuantitySelector: true,
   IconButton: true,
   transformGradient: true,
+  ssrStyles: true,
   Breadcrumbs: true,
   BlockQuote: true,
   OptimizeImage: true,
@@ -272,6 +273,12 @@ Object.defineProperty(exports, "WebVideo", {
     return _WebVideo.default;
   }
 });
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _utils.ssrStyles;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {

package/lib/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "deprecate", {
+  enumerable: true,
+  get: function () {
+    return _logger.deprecate;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "renderStructuredContent", {
     return _renderStructuredContent.default;
   }
 });
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _ssr.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -46,16 +58,18 @@ Object.defineProperty(exports, "warn", {
   }
 });
 
+var _logger = require("./logger");
+
 var _transforms = require("./transforms");
 
 var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
 
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 
-var _logger = require("./logger");
-
 var _media = _interopRequireDefault(require("./media"));
 
+var _ssr = _interopRequireDefault(require("./ssr"));
+
 var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
 
 var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));

package/lib/utils/ssr.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _componentsBase = require("@telus-uds/components-base");
+
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
+  let {
+    styleGetters = [],
+    collectStyles = renderedApp => renderedApp
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const sheet = new _styledComponents.ServerStyleSheet();
+
+  const getStyledComponentsStyles = () => {
+    const styles = sheet.getStyleElement();
+    sheet.seal();
+    return styles;
+  };
+
+  return (0, _componentsBase.ssrStyles)(appName, {
+    styleGetters: [getStyledComponentsStyles, ...styleGetters],
+    collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
+  });
+};
+
+var _default = ssrStyles;
+exports.default = _default;

package/lib-module/Card/Card.js

@@ -78,7 +78,6 @@ const Card = /*#__PURE__*/forwardRef(function () {
     variant: { ...variant,
       padding: 'custom'
     },
-    tokens: tokens,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,

package/lib-module/Table/Cell.js

@@ -18,9 +18,10 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
-    cellPaddingLeft
+    cellPaddingLeft,
+    cellMinWidth
   } = _ref2;
-  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
 });
 const StyledHeading = /*#__PURE__*/styled.th.withConfig({
   displayName: "Cell__StyledHeading",
@@ -67,15 +68,20 @@ const Cell = _ref7 => {
     children,
     type = 'default',
     isFirstInRow,
-    align = 'left'
+    align = 'left',
+    tokens: cellTokens
   } = _ref7;
   const {
     text,
     isScrollable: isTableScrollable,
     variant,
-    tokens
+    tokens: tableTokens
   } = useTableContext();
+  const themeTokens = { ...tableTokens,
+    ...cellTokens
+  };
   const {
+    cellMinWidth,
     cellHeadingBackground,
     cellHeadingBoxShadowColor,
     cellBoxShadowColor,
@@ -90,10 +96,11 @@ const Cell = _ref7 => {
     fontName,
     fontWeight,
     fontSize
-  } = useThemeTokens('Table', tokens, variant);
+  } = useThemeTokens('Table', themeTokens, variant);
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellMinWidth,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -169,6 +176,7 @@ const Cell = _ref7 => {
 };
 
 Cell.propTypes = {
+  tokens: PropTypes.object,
   children: PropTypes.node,
 
   /**

package/lib-module/VideoPicker/VideoPicker.js

@@ -70,6 +70,8 @@ const VideoPicker = _ref6 => {
     videoList = [],
     selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
     frame,
+    onStartVideo = () => {},
+    onSelectVideo = () => {},
     ...rest
   } = _ref6;
   const viewport = useViewport();
@@ -91,7 +93,10 @@ const VideoPicker = _ref6 => {
     video: video,
     videoPlayerRef: videoPlayerRef,
     selectedVideoId: currentVideoId,
-    onSelectVideo: current => setCurrentVideoId(current.videoId),
+    onSelectVideo: current => {
+      setCurrentVideoId(current.videoId);
+      onSelectVideo(current);
+    },
     layout: !hasSlider ? 'horizontal' : 'vertical',
     index: index,
     isFramed: isFramed
@@ -117,7 +122,8 @@ const VideoPicker = _ref6 => {
         isFramed: isFramed,
         children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
           video: currentVideo,
-          videoPlayerRef: videoPlayerRef
+          videoPlayerRef: videoPlayerRef,
+          onStartVideo: onStartVideo
         })
       }), hasSlider ? /*#__PURE__*/_jsx(VideoSlider, {
         children: listElements
@@ -146,6 +152,18 @@ VideoPicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
    */
-  frame: PropTypes.bool
+  frame: PropTypes.bool,
+
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} video - The video object that is playing.
+   */
+  onStartVideo: PropTypes.func,
+
+  /**
+   * Callback function trigerred when a video is selected from the thumbnail list.
+   * @param {object} video - The video object that is selected.
+   */
+  onSelectVideo: PropTypes.func
 };
 export default VideoPicker;

package/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StackView, Typography } from '@telus-uds/components-base';
+import PropTypes from 'prop-types';
 import WebVideo from '../WebVideo/WebVideo';
 import { VideoPropType, RefPropType } from './videoPropType';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -8,7 +9,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const VideoPickerPlayer = _ref => {
   let {
     video = {},
-    videoPlayerRef
+    videoPlayerRef,
+    onStartVideo = () => {}
   } = _ref;
   return /*#__PURE__*/_jsxs(StackView, {
     space: 3,
@@ -17,7 +19,8 @@ const VideoPickerPlayer = _ref => {
     },
     children: [/*#__PURE__*/_jsx("div", {
       ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/_jsx(WebVideo, { ...video
+      children: video.videoId && /*#__PURE__*/_jsx(WebVideo, { ...video,
+        onStart: () => onStartVideo(video)
       })
     }), /*#__PURE__*/_jsxs(StackView, {
       space: 2,
@@ -36,6 +39,7 @@ const VideoPickerPlayer = _ref => {
 
 VideoPickerPlayer.propTypes = {
   video: VideoPropType,
-  videoPlayerRef: RefPropType
+  videoPlayerRef: RefPropType,
+  onStartVideo: PropTypes.func
 };
 export default VideoPickerPlayer;

package/lib-module/index.js

@@ -37,4 +37,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
+export { ssrStyles } from './utils';
 export * from './baseExports';

package/lib-module/utils/index.js

@@ -1,8 +1,9 @@
+import { warn, deprecate } from './logger';
 import { transformGradient } from './transforms';
 import useTypographyTheme from './useTypographyTheme';
 import htmlAttrs from './htmlAttrs';
-import { warn } from './logger';
 import media from './media';
+import ssrStyles from './ssr';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
-export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, useOverlaidPosition };
+export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, useOverlaidPosition };

package/lib-module/utils/ssr.js

@@ -0,0 +1,41 @@
+import { ServerStyleSheet } from 'styled-components';
+import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
+  let {
+    styleGetters = [],
+    collectStyles = renderedApp => renderedApp
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const sheet = new ServerStyleSheet();
+
+  const getStyledComponentsStyles = () => {
+    const styles = sheet.getStyleElement();
+    sheet.seal();
+    return styles;
+  };
+
+  return baseSsrStyles(appName, {
+    styleGetters: [getStyledComponentsStyles, ...styleGetters],
+    collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
+  });
+};
+
+export default ssrStyles;

package/package.json

@@ -5,21 +5,21 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.42.0",
-    "@telus-uds/system-constants": "^1.2.0",
+    "@telus-uds/components-base": "1.44.0",
+    "@telus-uds/system-constants": "^1.2.1",
     "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.26.0",
+    "@telus-uds/system-theme-tokens": "^2.27.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.4",
+    "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
     "@types/react": "^18.0.0",
@@ -32,7 +32,7 @@
     "webpack": "5.x"
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "main": "lib/index.js",
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-web",
@@ -47,10 +47,11 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "npm run build:code",
+    "build": "npm run build:code && npm run build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
+    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -61,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.0.0"
+  "version": "2.2.0"
 }

package/src/Card/Card.jsx

@@ -92,12 +92,7 @@ const Card = forwardRef(
     }
 
     return (
-      <CardBase
-        ref={ref}
-        variant={{ ...variant, padding: 'custom' }}
-        tokens={tokens}
-        {...selectProps(rest)}
-      >
+      <CardBase ref={ref} variant={{ ...variant, padding: 'custom' }} {...selectProps(rest)}>
         <StackView space={0} tokens={columnFlex}>
           <StackView
             direction={contentStackDirection}

package/src/Table/Cell.jsx

@@ -30,11 +30,13 @@ const sharedStyles = css`
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
-    cellPaddingLeft
+    cellPaddingLeft,
+    cellMinWidth
   }) => css`
     ${isSticky ? stickyStyles : undefined};
     box-shadow: inset 0 -1px 0 ${cellBoxShadowColor};
     text-align: ${align};
+    min-width: ${cellMinWidth}px;
     padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
   `}
 `
@@ -60,9 +62,12 @@ const StyledRowHeading = styled.th`
   background-color: ${({ cellRowHeadingBackground }) => cellRowHeadingBackground};
 `
 
-const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
-  const { text, isScrollable: isTableScrollable, variant, tokens } = useTableContext()
+const Cell = ({ children, type = 'default', isFirstInRow, align = 'left', tokens: cellTokens }) => {
+  const { text, isScrollable: isTableScrollable, variant, tokens: tableTokens } = useTableContext()
+  const themeTokens = { ...tableTokens, ...cellTokens }
+
   const {
+    cellMinWidth,
     cellHeadingBackground,
     cellHeadingBoxShadowColor,
     cellBoxShadowColor,
@@ -77,10 +82,12 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
     fontName,
     fontWeight,
     fontSize
-  } = useThemeTokens('Table', tokens, variant)
+  } = useThemeTokens('Table', themeTokens, variant)
+
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellMinWidth,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -146,6 +153,7 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
 }
 
 Cell.propTypes = {
+  tokens: PropTypes.object,
   children: PropTypes.node,
   /**
    * Defines the visual styles of a cell, and whether it should be a `td` or `th` element

package/src/VideoPicker/VideoPicker.jsx

@@ -65,7 +65,14 @@ const VideoListContainer = styled.div`
   ${(props) => props.isFramed && framedVideoListContainerStyle}
 `
 
-const VideoPicker = ({ videoList = [], selectedVideo = videoList[0]?.videoId, frame, ...rest }) => {
+const VideoPicker = ({
+  videoList = [],
+  selectedVideo = videoList[0]?.videoId,
+  frame,
+  onStartVideo = () => {},
+  onSelectVideo = () => {},
+  ...rest
+}) => {
   const viewport = useViewport()
   const { stackViewDividerColor, ...themeTokens } = useThemeTokens('VideoPicker')
   const [currentVideoId, setCurrentVideoId] = useState(selectedVideo)
@@ -88,7 +95,10 @@ const VideoPicker = ({ videoList = [], selectedVideo = videoList[0]?.videoId, fr
       video={video}
       videoPlayerRef={videoPlayerRef}
       selectedVideoId={currentVideoId}
-      onSelectVideo={(current) => setCurrentVideoId(current.videoId)}
+      onSelectVideo={(current) => {
+        setCurrentVideoId(current.videoId)
+        onSelectVideo(current)
+      }}
       layout={!hasSlider ? 'horizontal' : 'vertical'}
       index={index}
       isFramed={isFramed}
@@ -107,7 +117,11 @@ const VideoPicker = ({ videoList = [], selectedVideo = videoList[0]?.videoId, fr
         direction={isFramed ? 'row' : 'column'}
       >
         <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
-          <VideoPickerPlayer video={currentVideo} videoPlayerRef={videoPlayerRef} />
+          <VideoPickerPlayer
+            video={currentVideo}
+            videoPlayerRef={videoPlayerRef}
+            onStartVideo={onStartVideo}
+          />
         </VideoPlayerContainer>
         {hasSlider ? (
           <VideoSlider>{listElements}</VideoSlider>
@@ -138,7 +152,17 @@ VideoPicker.propTypes = {
   /**
    * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
    */
-  frame: PropTypes.bool
+  frame: PropTypes.bool,
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} video - The video object that is playing.
+   */
+  onStartVideo: PropTypes.func,
+  /**
+   * Callback function trigerred when a video is selected from the thumbnail list.
+   * @param {object} video - The video object that is selected.
+   */
+  onSelectVideo: PropTypes.func
 }
 
 export default VideoPicker