@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/Toast/Toast.js

@@ -1,158 +0,0 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import styled, { keyframes, css } from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
-const slideDown = property => function (from, to) {
-  let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
-  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
-};
-const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
-const ToastContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Toast__ToastContainer",
-  componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
-  let {
-    padding
-  } = _ref;
-  return padding;
-}, _ref2 => {
-  let {
-    padding
-  } = _ref2;
-  return padding;
-}, _ref3 => {
-  let {
-    containerBackgroundColor
-  } = _ref3;
-  return containerBackgroundColor;
-}, _ref4 => {
-  let {
-    containerGap
-  } = _ref4;
-  return containerGap;
-}, animation);
-const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    toast,
-    copy,
-    headline,
-    link,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref5;
-  // viewport hook added to work adjust the padding to different sizes
-  const viewport = useViewport();
-  const {
-    containerBackgroundColor,
-    containerGap,
-    animationHeightBefore,
-    animationHeightAfter,
-    animationPaddingBottomBefore,
-    animationPaddingBottomAfter,
-    animationPaddingTopBefore,
-    animationPaddingTopAfter,
-    animationBackgroundColorBefore,
-    animationBackgroundColorAfter,
-    animationColorBefore,
-    animationColorAfter,
-    chevronlinkFontWeight,
-    ...extraTokens
-  } = useThemeTokens('Toast', tokens, variant, {
-    viewport
-  });
-
-  // inherit ChevronLink tokens for animation colors
-  const {
-    color: chevronDefaultColor
-  } = useThemeTokens('ChevronLink', {}, {});
-  const {
-    color: chevronInverseColor
-  } = useThemeTokens('ChevronLink', {}, {
-    inverse: true
-  });
-  if (!toast) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(ToastContainer, {
-    containerBackgroundColor: containerBackgroundColor,
-    containerGap: containerGap,
-    animationHeightBefore: animationHeightBefore,
-    animationHeightAfter: animationHeightAfter,
-    animationPaddingBottomBefore: animationPaddingBottomBefore,
-    animationPaddingBottomAfter: animationPaddingBottomAfter,
-    animationPaddingTopBefore: animationPaddingTopBefore,
-    animationPaddingTopAfter: animationPaddingTopAfter,
-    animationBackgroundColorBefore: animationBackgroundColorBefore,
-    animationBackgroundColorAfter: animationBackgroundColorAfter,
-    animationColorBefore: animationColorBefore,
-    animationColorAfter: animationColorAfter,
-    animationFillColorBefore: chevronInverseColor,
-    animationFillColorAfter: chevronDefaultColor,
-    ref: ref,
-    ...extraTokens,
-    ...selectProps(rest),
-    children: [headline && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        bold: true,
-        inverse: true
-      },
-      children: headline
-    }), /*#__PURE__*/_jsx(Spacer, {
-      space: 2,
-      direction: "row"
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        inverse: true
-      },
-      children: copy
-    }), /*#__PURE__*/_jsx(Spacer, {
-      space: 2,
-      direction: "row"
-    }), link && /*#__PURE__*/_jsx(ChevronLink, {
-      variant: {
-        inverse: true
-      },
-      tokens: {
-        blockFontWeight: chevronlinkFontWeight
-      },
-      href: link.href,
-      LinkRouter: link.LinkRouter,
-      linkRouterProps: link.linkRouterProps,
-      children: link.text
-    })]
-  });
-});
-Toast.displayName = 'Toast';
-Toast.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Toast'),
-  /**
-   * If true, the toast will be displayed
-   */
-  toast: PropTypes.bool,
-  /**
-   * The copy to display in the toast
-   */
-  copy: PropTypes.string.isRequired,
-  /**
-   * The headline to display in the toast (before copy)
-   */
-  headline: PropTypes.string,
-  /**
-   * The link to display in the toast (after copy)
-   */
-  link: PropTypes.shape({
-    href: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
-  })
-};
-export default Toast;

package/lib-module/Toast/index.js

@@ -1,2 +0,0 @@
-import Toast from './Toast';
-export default Toast;

package/lib-module/Video/ControlBar/ControlBar.js

@@ -1,288 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { StackView, useThemeTokens, selectSystemProps, Icon, useViewport } from '@telus-uds/components-base';
-import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar';
-import VolumeSlider from './Controls/VolumeSlider/VolumeSlider';
-import VideoButton from './Controls/VideoButton/VideoButton';
-import VideoMenu from './Controls/VideoMenu/VideoMenu';
-import videoText from '../videoText';
-import { htmlAttrs } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
-  icon: icon
-});
-const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__ControlBarContainer",
-  componentId: "components-web__sc-13y61ky-0"
-})(_ref => {
-  let {
-    isHidden,
-    isMobile
-  } = _ref;
-  return {
-    width: '100%',
-    position: 'relative',
-    transition: 'opacity 0.4s',
-    opacity: isHidden ? 0 : 1,
-    display: isMobile ? 'none' : undefined
-  };
-});
-const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__StyledControlBar",
-  componentId: "components-web__sc-13y61ky-1"
-})(_ref2 => {
-  let {
-    padding,
-    height
-  } = _ref2;
-  return {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    width: '100%',
-    height,
-    padding,
-    bottom: 0,
-    backgroundColor: 'rgba(42, 44, 46, 0.85)',
-    // TODO: replace with opaque greyThunder
-    margin: 'auto',
-    display: 'flex',
-    justifyContent: 'space-between',
-    zIndex: 9
-  };
-});
-const VideoProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__VideoProgressBarContainer",
-  componentId: "components-web__sc-13y61ky-2"
-})({
-  display: 'flex',
-  flexGrow: 1
-});
-const MenuContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__MenuContainer",
-  componentId: "components-web__sc-13y61ky-3"
-})(_ref3 => {
-  let {
-    isOpen,
-    menuBottom,
-    menuRight,
-    menuMarginLeft
-  } = _ref3;
-  return {
-    position: 'absolute',
-    bottom: menuBottom,
-    right: menuRight,
-    display: isOpen ? 'block' : 'none',
-    marginLeft: menuMarginLeft
-  };
-});
-const ControlBar = _ref4 => {
-  let {
-    videoPlayer,
-    videoPlayerContainer,
-    sources,
-    tracks,
-    videoPlaying,
-    videoUnplayed,
-    videoBufferEnd,
-    isHidden = false,
-    videoLength,
-    videoCurrentTime,
-    videoCurrentVolume,
-    videoIsMuted,
-    setVolume,
-    isMobile,
-    tracksAvailable,
-    togglePlayPause,
-    setSeek,
-    toggleMute,
-    toggleFullscreen,
-    videoIsFullscreen,
-    setTextTracks,
-    selectedTextTrack,
-    resetInactivityTimer,
-    videoQuality,
-    setVideoQuality,
-    captionsMenuOpen,
-    setCaptionsMenuOpen,
-    qualityMenuOpen,
-    setQualityMenuOpen,
-    clearInactivityTimer,
-    copy,
-    compactModeThreshold,
-    videoPlayerWidth,
-    tokens,
-    variant,
-    ...rest
-  } = _ref4;
-  const viewport = useViewport();
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    menuBottom,
-    menuRight,
-    menuMarginLeft,
-    captionsIcon,
-    settingsIcon,
-    minimizeIcon,
-    maximizeIcon,
-    height
-  } = useThemeTokens('VideoControlBar', tokens, variant, {
-    viewport
-  });
-  const parseVideoQuality = () => {
-    return sources.map(source => {
-      if (!source.isFallback) {
-        return {
-          name: source.qualityName,
-          value: source.qualityRank
-        };
-      }
-      return {};
-    });
-  };
-  const parseTracks = () => {
-    const parsed = tracks.map((track, trackNumber) => {
-      return {
-        name: videoText[copy][track.language],
-        value: trackNumber
-      };
-    });
-    parsed.unshift({
-      name: videoText[copy].captionsNone,
-      value: -1
-    });
-    return parsed;
-  };
-  const menuContainerStyleProps = {
-    menuBottom,
-    menuRight,
-    menuMarginLeft
-  };
-  return /*#__PURE__*/_jsx(ControlBarContainer, {
-    isHidden: isHidden,
-    isMobile: isMobile,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(StyledControlBar, {
-      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-      height: `${height}px`,
-      children: [/*#__PURE__*/_jsx(VideoProgressBarContainer, {
-        children: /*#__PURE__*/_jsx(VideoProgressBar, {
-          copy: copy,
-          videoPlayer: videoPlayer,
-          playing: videoPlaying,
-          videoLength: videoLength,
-          videoCurrentTime: videoCurrentTime,
-          videoBufferEnd: videoBufferEnd,
-          setSeek: setSeek,
-          resetInactivityTimer: resetInactivityTimer
-        })
-      }), /*#__PURE__*/_jsx(VolumeSlider, {
-        videoPlayer: videoPlayer,
-        videoCurrentVolume: videoCurrentVolume,
-        setVolume: setVolume,
-        videoIsMuted: videoIsMuted,
-        toggleMute: toggleMute,
-        resetInactivityTimer: resetInactivityTimer,
-        copy: copy,
-        compactModeThreshold: compactModeThreshold,
-        videoPlayerWidth: videoPlayerWidth,
-        disableFocus: videoUnplayed
-      }), /*#__PURE__*/_jsxs(StackView, {
-        space: 3,
-        direction: "row",
-        children: [tracksAvailable && /*#__PURE__*/_jsx(VideoButton, {
-          disableFocus: videoUnplayed,
-          label: videoText[copy].captionsToggle,
-          icon: getIcon(captionsIcon),
-          onClick: () => {
-            setCaptionsMenuOpen(!captionsMenuOpen);
-            setQualityMenuOpen(false);
-            clearInactivityTimer();
-          },
-          onFocus: resetInactivityTimer,
-          onBlur: resetInactivityTimer
-        }), /*#__PURE__*/_jsx(VideoButton, {
-          disableFocus: videoUnplayed,
-          label: videoText[copy].qualityToggle,
-          icon: getIcon(settingsIcon),
-          onClick: () => {
-            setQualityMenuOpen(!qualityMenuOpen);
-            setCaptionsMenuOpen(false);
-            clearInactivityTimer();
-          },
-          onFocus: resetInactivityTimer,
-          onBlur: resetInactivityTimer
-        }), /*#__PURE__*/_jsx(VideoButton, {
-          disableFocus: videoUnplayed,
-          label: videoText[copy].fullScreenToggle,
-          icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
-          onClick: toggleFullscreen,
-          onFocus: resetInactivityTimer,
-          onBlur: resetInactivityTimer
-        })]
-      }), captionsMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
-        isOpen: captionsMenuOpen,
-        ...menuContainerStyleProps,
-        children: /*#__PURE__*/_jsx(VideoMenu, {
-          menuLabel: videoText[copy].captionsDialogue,
-          menuOptions: parseTracks(),
-          setSelection: setTextTracks,
-          selectedItem: selectedTextTrack,
-          copy: copy
-        })
-      }), qualityMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
-        isOpen: qualityMenuOpen,
-        ...menuContainerStyleProps,
-        children: /*#__PURE__*/_jsx(VideoMenu, {
-          menuLabel: videoText[copy].qualityDialogue,
-          menuOptions: parseVideoQuality(),
-          setSelection: setVideoQuality,
-          selectedItem: videoQuality,
-          copy: copy
-        })
-      })]
-    })
-  });
-};
-ControlBar.propTypes = {
-  ...selectedSystemPropTypes,
-  videoPlayer: PropTypes.object.isRequired,
-  videoPlayerContainer: PropTypes.object.isRequired,
-  sources: PropTypes.array.isRequired,
-  tracks: PropTypes.array,
-  videoPlaying: PropTypes.bool.isRequired,
-  videoUnplayed: PropTypes.bool.isRequired,
-  videoBufferEnd: PropTypes.number.isRequired,
-  isHidden: PropTypes.bool,
-  videoLength: PropTypes.number.isRequired,
-  videoCurrentTime: PropTypes.number.isRequired,
-  videoCurrentVolume: PropTypes.number.isRequired,
-  videoIsMuted: PropTypes.bool.isRequired,
-  setVolume: PropTypes.func.isRequired,
-  isMobile: PropTypes.bool.isRequired,
-  tracksAvailable: PropTypes.bool.isRequired,
-  togglePlayPause: PropTypes.func.isRequired,
-  setSeek: PropTypes.func.isRequired,
-  toggleMute: PropTypes.func.isRequired,
-  toggleFullscreen: PropTypes.func.isRequired,
-  videoIsFullscreen: PropTypes.bool.isRequired,
-  setTextTracks: PropTypes.func.isRequired,
-  selectedTextTrack: PropTypes.number.isRequired,
-  resetInactivityTimer: PropTypes.func.isRequired,
-  videoQuality: PropTypes.number.isRequired,
-  setVideoQuality: PropTypes.func.isRequired,
-  captionsMenuOpen: PropTypes.bool.isRequired,
-  setCaptionsMenuOpen: PropTypes.func.isRequired,
-  qualityMenuOpen: PropTypes.bool.isRequired,
-  setQualityMenuOpen: PropTypes.func.isRequired,
-  clearInactivityTimer: PropTypes.func.isRequired,
-  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
-  compactModeThreshold: PropTypes.number.isRequired,
-  videoPlayerWidth: PropTypes.number.isRequired
-};
-export default ControlBar;

package/lib-module/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs } from '../../../../utils';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "VideoButton__StyledButton",
-  componentId: "components-web__sc-kfw0tr-0"
-})(_ref => {
-  let {
-    color
-  } = _ref;
-  return {
-    background: 'none',
-    border: 'none',
-    padding: 0,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    alignItems: 'stretch',
-    'svg path': {
-      fill: color
-    }
-  };
-});
-const VideoButton = _ref2 => {
-  let {
-    icon,
-    label,
-    disableFocus,
-    children,
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const {
-    color
-  } = useThemeTokens('VideoButton', tokens, variant);
-  const handleOnKeyDown = event => {
-    const key = event.key || event.keyCode;
-
-    // Disables playing by space bar, as that can be used to click a button
-    if (key === ' ' || key === 32) {
-      event.stopPropagation();
-    }
-  };
-  const handleClick = event => {
-    var _rest$onClick;
-    event.preventDefault();
-    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
-  };
-  return /*#__PURE__*/_jsxs(StyledButton, {
-    "aria-label": label,
-    onKeyDown: handleOnKeyDown,
-    tabIndex: disableFocus ? '-1' : undefined,
-    color: color,
-    ...selectProps(rest),
-    onClick: handleClick,
-    children: [icon, children]
-  });
-};
-VideoButton.propTypes = {
-  ...selectedSystemPropTypes,
-  icon: PropTypes.element.isRequired,
-  label: PropTypes.string.isRequired,
-  disableFocus: PropTypes.bool.isRequired,
-  children: PropTypes.node
-};
-export default VideoButton;

package/lib-module/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -1,163 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { StackView, Typography, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
-import videoText from '../../../videoText';
-import { htmlAttrs } from '../../../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const MenuContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoMenu__MenuContainer",
-  componentId: "components-web__sc-nllbhw-0"
-})(_ref => {
-  let {
-    padding,
-    background
-  } = _ref;
-  return {
-    width: 114,
-    padding,
-    backgroundColor: background,
-    borderRadius: 5
-  };
-});
-const MenuButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "VideoMenu__MenuButton",
-  componentId: "components-web__sc-nllbhw-1"
-})({
-  background: 'none',
-  border: 'none',
-  padding: 0,
-  width: '100%',
-  cursor: 'pointer',
-  display: 'flex',
-  justifyContent: 'space-between',
-  verticalAlign: 'middle'
-});
-const CheckmarkContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoMenu__CheckmarkContainer",
-  componentId: "components-web__sc-nllbhw-2"
-})(_ref2 => {
-  let {
-    isSelectedItem,
-    checkMarkWidth,
-    checkMarkHeight,
-    checkMarkSelectedColor,
-    checkMarkHoverColor,
-    checkMarkFocusColor,
-    checkMarkUnselectedColor
-  } = _ref2;
-  return {
-    width: checkMarkWidth,
-    height: checkMarkHeight,
-    marginTop: 2,
-    outline: 'none',
-    [`${MenuButton} && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
-    },
-    [`${MenuButton}:hover && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
-    },
-    [`${MenuButton}:focus && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
-    }
-  };
-});
-const VideoMenu = _ref3 => {
-  let {
-    menuLabel,
-    menuOptions,
-    setSelection,
-    selectedItem,
-    copy,
-    tokens,
-    variant,
-    ...rest
-  } = _ref3;
-  const {
-    padding,
-    background,
-    checkMarkWidth,
-    checkMarkHeight,
-    checkMarkSelectedColor,
-    checkMarkHoverColor,
-    checkMarkFocusColor,
-    checkMarkUnselectedColor,
-    checkMarkIcon
-  } = useThemeTokens('VideoMenu', tokens, variant);
-  const getMenuItems = () => {
-    return menuOptions.map(option => {
-      if (option.name) {
-        return /*#__PURE__*/_jsxs(MenuButton, {
-          "aria-haspopup": "true",
-          role: "menuitem",
-          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? videoText[copy].itemSelected : videoText[copy].itemUnselected}`,
-          selectedItem: selectedItem,
-          itemValue: option.value,
-          onClick: () => {
-            if (selectedItem !== option.value) {
-              setSelection(option.value);
-            }
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: {
-              bold: true,
-              inverse: true
-            },
-            children: option.name
-          }), /*#__PURE__*/_jsx(CheckmarkContainer, {
-            isSelectedItem: option.value === selectedItem,
-            checkMarkWidth: checkMarkWidth,
-            checkMarkHeight: checkMarkHeight,
-            checkMarkSelectedColor: checkMarkSelectedColor,
-            checkMarkHoverColor: checkMarkHoverColor,
-            checkMarkFocusColor: checkMarkFocusColor,
-            checkMarkUnselectedColor: checkMarkUnselectedColor,
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: checkMarkIcon
-            })
-          })]
-        }, option.value);
-      }
-      return null;
-    });
-  };
-  const handleOnKeyDown = event => {
-    const key = event.key || event.keyCode;
-
-    // Disables playing by space bar, as that can be used to click a button
-    if (key === ' ' || key === 32) {
-      event.stopPropagation();
-    }
-  };
-  return /*#__PURE__*/_jsx(MenuContainer, {
-    onKeyDown: handleOnKeyDown,
-    padding: padding,
-    background: background,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: 2,
-      divider: true,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: {
-          bold: true,
-          inverse: true
-        },
-        children: menuLabel
-      }), /*#__PURE__*/_jsx("div", {
-        role: "menu",
-        children: getMenuItems()
-      })]
-    })
-  });
-};
-VideoMenu.propTypes = {
-  ...selectedSystemPropTypes,
-  menuLabel: PropTypes.string.isRequired,
-  menuOptions: PropTypes.array.isRequired,
-  setSelection: PropTypes.func.isRequired,
-  selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  copy: PropTypes.oneOf(['en', 'fr']).isRequired
-};
-export default VideoMenu;