@playkit-js/transcript 3.0.1 → 3.1.0-canary.2-d22690c

package/src/transcript-plugin.tsx

@@ -1,23 +1,17 @@
 import {h} from 'preact';
 import {OnClickEvent} from '@playkit-js/common';
 import {ui} from 'kaltura-player-js';
-import {ObjectUtils} from './utils';
+import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
+import {ObjectUtils, downloadContent, printContent} from './utils';
+import {icons} from './components/icons';
 import {PluginButton} from './components/plugin-button/plugin-button';
 import {Transcript} from './components/transcript';
 import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
-import {TranscriptConfig, PluginPositions, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
-import {DownloadPrintMenu, downloadContent, printContent} from './components/download-print-menu';
+import {TranscriptConfig, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
 
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
-const {get} = ObjectUtils;
-const {Tooltip} = KalturaPlayer.ui.components;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
-
-const translates = () => ({
-  printDownloadAreaLabel: <Text id="transcript.print_download_area_label">Download or print current transcript</Text>,
-  printTranscript: <Text id="transcript.print_transcript">Print current transcript</Text>,
-  downloadTranscript: <Text id="transcript.download_transcript">Download current transcript</Text>
-});
+const {get} = ObjectUtils;
 
 interface TimedMetadataEvent {
   payload: {
@@ -44,9 +38,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _hasError = false;
   private _triggeredByKeyboard = false;
 
-  private _removePopoverIcon: null | Function = null;
-
-  private _transcriptPanel = null;
+  private _transcriptPanel = -1;
+  private _transcriptIcon = -1;
+  private _printIcon = -1;
+  private _downloadIcon = -1;
   private _pluginState: PluginStates | null = null;
 
   constructor(name: string, player: KalturaPlayerTypes.Player, config: TranscriptConfig) {
@@ -54,7 +49,11 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   get sidePanelsManager() {
-    return this.player.getService('sidePanelsManager') as any;
+    return this.player.getService('sidePanelsManager') as SidePanelsManager | undefined;
+  }
+
+  get upperBarManager() {
+    return this.player.getService('upperBarManager') as UpperBarManager | undefined;
   }
 
   get cuePointManager() {
@@ -66,8 +65,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   loadMedia(): void {
-    if (!this.cuePointManager || !this.sidePanelsManager) {
-      this.logger.warn("kalturaCuepoints or sidePanelsManager haven't registered");
+    if (!this.cuePointManager || !this.sidePanelsManager || !this.upperBarManager) {
+      this.logger.warn("kalturaCuepoints, sidePanelsManager or upperBarManager haven't registered");
       return;
     }
     if (this.player.isLive()) {
@@ -86,7 +85,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
           // turn on loading animation till captions added to TextTrack
           this._isLoading = true;
         }
-        this._addPopoverIcon();
+        this._addDownloadIcon();
+        this._addPrintIcon();
         this._addTranscriptItem();
       }
     });
@@ -103,7 +103,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
 
   private _updateTranscriptPanel() {
     if (this._transcriptPanel) {
-      this.sidePanelsManager.update(this._transcriptPanel);
+      this.sidePanelsManager?.update(this._transcriptPanel);
     }
   }
 
@@ -120,14 +120,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _onTimedMetadataChange = ({payload}: TimedMetadataEvent) => {
-    const transcriptCuePoints: Array<CuePoint> = payload.cues.filter((cue: CuePoint) => {
-      return cue.metadata.cuePointType === ItemTypes.Caption;
+    const transcriptCuePoints: Array<CuePoint> = payload.cues
+      .filter((cue: CuePoint) => {
+        return cue.metadata.cuePointType === ItemTypes.Caption;
       })
       .filter((cue, index, array) => {
         // filter out captions that has endTime eq to next caption startTime
         const nextCue = array[index + 1];
         return !nextCue || cue.endTime !== nextCue.startTime;
-    });
+      });
     this._activeCuePointsMap = {};
     transcriptCuePoints.forEach(cue => {
       this._activeCuePointsMap[cue.id] = true;
@@ -152,42 +153,76 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     return `${activeTextTrack?.language}-${activeTextTrack?.label}`;
   };
 
-  private _handleCloseClick = () => {
-    this.sidePanelsManager.deactivateItem(this._transcriptPanel);
-    this._pluginState = PluginStates.CLOSED;
+  private _activatePlugin = () => {
+    this.ready.then(() => {
+      this.sidePanelsManager?.activateItem(this._transcriptPanel);
+      this._pluginState === PluginStates.OPENED;
+      this.upperBarManager?.update(this._transcriptIcon);
+    });
+  };
+
+  private _deactivatePlugin = () => {
+    this.ready.then(() => {
+      this.sidePanelsManager?.deactivateItem(this._transcriptPanel);
+      this._pluginState = PluginStates.CLOSED;
+      this.upperBarManager?.update(this._transcriptIcon);
+    });
+  };
+
+  private _isPluginActive = () => {
+    return this.sidePanelsManager!.isItemActive(this._transcriptPanel);
   };
 
-  private _addPopoverIcon(): void {
-    const {downloadDisabled, printDisabled} = this.config;
-    if (this._removePopoverIcon) {
+  private _handleClickOnPluginIcon = (e: OnClickEvent, byKeyboard?: boolean) => {
+    if (this._isPluginActive()) {
+      this._triggeredByKeyboard = false;
+      this._deactivatePlugin();
+    } else {
+      this._triggeredByKeyboard = Boolean(byKeyboard);
+      this._activatePlugin();
+    }
+  };
+
+  private _addDownloadIcon(): void {
+    const {downloadDisabled} = this.config;
+    if (this._downloadIcon > 0 || downloadDisabled) {
       return;
     }
-    this._removePopoverIcon = this.player.ui.addComponent({
-      label: 'Download or print transcript',
-      area: ReservedPresetAreas.TopBarRightControls,
-      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
-      get: withText(translates)(({printDownloadAreaLabel, printTranscript, downloadTranscript}: Record<string, string>) => (
-        <DownloadPrintMenu
-          onDownload={this._handleDownload}
-          onPrint={this._handlePrint}
-          downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)}
-          printDisabled={getConfigValue(printDisabled, isBoolean, false)}
-          dropdownAriaLabel={printDownloadAreaLabel}
-          printButtonAriaLabel={printTranscript}
-          downloadButtonAriaLabel={downloadTranscript}
-        />
+    const translate = {
+      label: <Text id="transcript.download_transcript">Download current transcript</Text>
+    };
+    this._downloadIcon = this.upperBarManager!.add({
+      label: translate.label as any,
+      svgIcon: {path: icons.DOWNLOAD_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handleDownload,
+      component: withText(translate)((props: {label: string}) => (
+        <PluginButton isActive={false} onClick={this._handleDownload} id={'download-transcript'} icon={icons.DOWNLOAD_ICON} label={props.label} />
       ))
-    });
+    }) as number;
+  }
+  private _addPrintIcon(): void {
+    const {printDisabled} = this.config;
+    if (this._printIcon > 0 || printDisabled) {
+      return;
+    }
+    const translate = {
+      label: <Text id="transcript.print_transcript">Print current transcript</Text>
+    };
+    this._printIcon = this.upperBarManager!.add({
+      label: translate.label as any,
+      svgIcon: {path: icons.PRINT_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handlePrint,
+      component: withText(translate)((props: {label: string}) => (
+        <PluginButton isActive={false} onClick={this._handlePrint} id={'print-transcript'} icon={icons.PRINT_ICON} label={props.label} />
+      ))
+    }) as number;
   }
 
   private _addTranscriptItem(): void {
-    const buttonLabel = 'Transcript';
     const {expandMode, position, expandOnFirstPlay} = this.config;
-    const pluginMode: PluginPositions = [SidePanelPositions.RIGHT, SidePanelPositions.LEFT].includes(position)
-      ? PluginPositions.VERTICAL
-      : PluginPositions.HORIZONTAL;
     const {showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
-    this._transcriptPanel = this.sidePanelsManager.addItem({
+
+    this._transcriptPanel = this.sidePanelsManager!.add({
       label: 'Transcript',
       panelComponent: () => {
         return (
@@ -198,7 +233,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             searchNextPrevDebounceTimeout={getConfigValue(searchNextPrevDebounceTimeout, Number.isInteger, 100)}
             highlightedMap={this._activeCuePointsMap}
             onSeek={this._seekTo}
-            pluginMode={pluginMode}
             onItemClicked={this._seekTo}
             captions={this._data}
             isLoading={this._isLoading}
@@ -206,43 +240,36 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             onRetryLoad={this._updateTranscriptPanel}
             currentTime={this.player.currentTime}
             videoDuration={this.player.duration}
-            kitchenSinkActive={!!this.sidePanelsManager.isItemActive(this._transcriptPanel)}
+            kitchenSinkActive={this._isPluginActive()}
             toggledWithEnter={this._triggeredByKeyboard}
-            onClose={this._handleCloseClick}
+            onClose={this._deactivatePlugin}
           />
         );
       },
-      iconComponent: ({isActive}: {isActive: boolean}) => {
-        return (
-          <Tooltip label={buttonLabel} type="bottom">
-            <PluginButton
-              isActive={isActive}
-              label={buttonLabel}
-              onClick={(e: OnClickEvent, byKeyboard?: boolean) => {
-                if (this.sidePanelsManager.isItemActive(this._transcriptPanel)) {
-                  this._triggeredByKeyboard = false;
-                  this._handleCloseClick();
-                } else {
-                  this._triggeredByKeyboard = Boolean(byKeyboard);
-                  this.sidePanelsManager.activateItem(this._transcriptPanel);
-                }
-              }}
-            />
-          </Tooltip>
-        );
-      },
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
       position: position,
       expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER,
-      onActivate: () => {
-        this._pluginState = PluginStates.OPENED;
-      }
-    });
+      onDeactivate: this._deactivatePlugin
+    }) as number;
+    const translates = {
+      showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,
+      hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+    };
+    this._transcriptIcon = this.upperBarManager!.add({
+      label: 'Transcript',
+      svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handleClickOnPluginIcon as () => void,
+      component: withText(translates)((props: {showTranscript: string; hideTranscript: string}) => {
+        const isActive = this._isPluginActive();
+        const label = isActive ? props.hideTranscript : props.showTranscript;
+        return (
+          <PluginButton isActive={isActive} onClick={this._handleClickOnPluginIcon} id="transcript-icon" label={label} icon={icons.PLUGIN_ICON} />
+        );
+      })
+    }) as number;
 
     if ((expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) {
-      this.player.ready().then(() => {
-        this.sidePanelsManager.activateItem(this._transcriptPanel);
-      });
+      this._activatePlugin();
     }
   }
 
@@ -276,13 +303,19 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
 
   reset(): void {
     this.eventManager.removeAll();
-    if (this._removePopoverIcon) {
-      this._removePopoverIcon();
-      this._removePopoverIcon = null;
+    if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
+      this.sidePanelsManager?.remove(this._transcriptPanel);
+      this.upperBarManager!.remove(this._transcriptIcon);
+      this._transcriptPanel = -1;
+      this._transcriptIcon = -1;
     }
-    if (this._transcriptPanel) {
-      this.sidePanelsManager.removeItem(this._transcriptPanel);
-      this._transcriptPanel = null;
+    if (this._printIcon > 0) {
+      this.upperBarManager!.remove(this._printIcon);
+      this._printIcon = -1;
+    }
+    if (this._downloadIcon > 0) {
+      this.upperBarManager!.remove(this._downloadIcon);
+      this._downloadIcon = -1;
     }
     this._captionMap = new Map();
     this._activeCaptionMapId = '';

package/src/types/types-ui.ts

@@ -1,10 +1,3 @@
-export type OnClick = (e: KeyboardEvent | MouseEvent, byKeyboard?: boolean) => void;
-
-export enum PluginPositions {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical'
-}
-
 export enum PluginStates {
   OPENED = 'opened',
   CLOSED = 'closed'

package/src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './utils';
 export * from './object-utils';
 export * from './debounce';
-export * from './popover/popover';

package/src/utils/utils.ts

@@ -84,3 +84,37 @@ export const prepareCuePoint = (cuePoint: CuePoint): CuePointData => {
 
   return itemData;
 };
+
+export function downloadContent(content: string, name: string): void {
+  const blob = new Blob([content], {type: 'text/plain;charset=utf-8;'});
+  const anchor = document.createElement('a');
+  const {navigator} = window as any;
+
+  if (navigator.msSaveBlob) {
+    // IE
+    navigator.msSaveOrOpenBlob(blob, name);
+    return;
+  }
+  if (navigator.userAgent.search('Firefox') !== -1) {
+    // Firefox
+    anchor.style.display = 'none';
+    anchor.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
+  } else {
+    // Chrome
+    anchor.setAttribute('href', URL.createObjectURL(blob));
+  }
+  anchor.setAttribute('target', '_blank');
+  anchor.setAttribute('download', name);
+  anchor.click();
+  anchor.remove();
+}
+export function printContent(content: string): void {
+  const printWindow = window.open('', '', 'width=400,height=600');
+  if (printWindow) {
+    printWindow.document.write(content);
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+    printWindow.close();
+  }
+}

package/src/components/download-print-menu/download-print-icons.tsx

@@ -1,23 +0,0 @@
-import {h} from 'preact';
-
-export const PrintIcon = () => (
-  <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-    <g id="Icons/32/print" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path
-        d="M21,3 C22.0543618,3 22.9181651,3.81587779 22.9945143,4.85073766 L23,5 L23,9 L26,9 C27.1045695,9 28,9.8954305 28,11 L28,21 C28,22.1045695 27.1045695,23 26,23 L23,23 L23,28 C23,29.1045695 22.1045695,30 21,30 L11,30 C9.8954305,30 9,29.1045695 9,28 L9,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,11 C4,9.8954305 4.8954305,9 6,9 L9,9 L9,5 C9,3.9456382 9.81587779,3.08183488 10.8507377,3.00548574 L11,3 L21,3 Z M21,19 L11,19 L11,28 L21,28 L21,19 Z M26,11 L6,11 L6,21 L9,21 L9,19 C8.44771525,19 8,18.5522847 8,18 C8,17.4477153 8.44771525,17 9,17 L23,17 C23.5522847,17 24,17.4477153 24,18 C24,18.5522847 23.5522847,19 23,19 L23,21 L26,21 L26,11 Z M21,5 L11,5 L11,9 L21,9 L21,5 Z"
-        id="Combined-Shape"
-        fill="#fff"></path>
-    </g>
-  </svg>
-);
-
-export const DownloadIcon = () => (
-  <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-    <g id="Icons/32/Download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path
-        d="M26,25 C26.5522847,25 27,25.4477153 27,26 C27,26.5522847 26.5522847,27 26,27 L26,27 L7,27 C6.44771525,27 6,26.5522847 6,26 C6,25.4477153 6.44771525,25 7,25 L7,25 Z M15.897,20.797 L15.817,20.73 L15.8163834,20.7298413 L8.34305882,13.7298413 C7.93997861,13.3522902 7.91928313,12.7194636 8.29683417,12.3163834 C8.67438521,11.9133032 9.30721188,11.8926077 9.71029209,12.2701587 L15.4996721,17.693 L15.5,6 C15.5,5.48716416 15.8860402,5.06449284 16.3833789,5.00672773 L16.5,5 C17.0522847,5 17.5,5.44771525 17.5,6 L17.4996721,17.694 L23.2951711,12.2699211 C23.6673663,11.9215418 24.2352038,11.9125649 24.6172049,12.230382 L24.7086128,12.3166371 C25.0860237,12.7198486 25.0651082,13.352668 24.6618968,13.7300789 L17.1833629,20.7300789 L17.1610165,20.7503813 L17.1610165,20.7503813 C17.1421868,20.7669999 17.1224361,20.7831339 17.102079,20.7985075 C17.0891381,20.8082894 17.0764369,20.8174134 17.0635772,20.826204 C17.0434306,20.8399634 17.0223437,20.8532674 17.0007451,20.8657864 C16.9872099,20.8736423 16.9734873,20.8811624 16.959633,20.8883367 L16.8877511,20.9220455 L16.8877511,20.9220455 C16.8756318,20.927087 16.8632234,20.9320132 16.8507409,20.9366814 C16.83028,20.9444208 16.8097352,20.9513578 16.7889039,20.9576336 C16.7705976,20.9630349 16.752126,20.968019 16.7335525,20.9724647 C16.6585039,20.9905214 16.5803589,21 16.5,21 C16.4170842,21 16.3365254,20.9899086 16.2594848,20.9708871 C16.2500284,20.9684434 16.2399293,20.9657886 16.2298654,20.9629733 C16.2028024,20.9554899 16.1769173,20.947049 16.1515197,20.9376057 C16.1370523,20.9321598 16.1223107,20.9262914 16.1076867,20.9200585 C16.0832011,20.9096448 16.0596143,20.8984375 16.036557,20.886357 C16.025923,20.8807972 16.0148138,20.8747205 16.0037984,20.8684173 C15.9792921,20.8543502 15.955966,20.8396537 15.9333153,20.8240474 L15.898,20.798 L15.897,20.797 Z M15.867,20.774 L15.888,20.79 L15.8735171,20.7794831 L15.8735171,20.7794831 L15.867,20.774 Z M15.817,20.73 L15.9035191,20.8027045 C15.8784859,20.7840722 15.8543541,20.7642966 15.831201,20.7434548 L15.817,20.73 Z"
-        id="Combined-Shape"
-        fill="#ffffff"></path>
-    </g>
-  </svg>
-);

package/src/components/download-print-menu/download-print-menu.scss

@@ -1,44 +0,0 @@
-@import '../../variables.scss';
-
-.download-print-button {
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  color: $white-color;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  background: none;
-  border-radius: 4px;
-  outline-offset: 0 -1px;
-  &:hover,
-  &:active {
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-  &:focus {
-    outline: 1px solid $focus-color;
-  }
-  .icon {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: cover;
-  }
-}
-.popover-menu-item {
-  display: flex;
-  align-items: center;
-  padding: 9px 24px 9px 16px;
-  white-space: nowrap;
-  min-height: 30px;
-  line-height: 18px;
-  font-size: 15px;
-  &:hover {
-    cursor: pointer;
-    background-color: $semigray-color;
-  }
-  &:focus {
-    outline: 1px solid $focus-color;
-  }
-}

package/src/components/download-print-menu/download-print-menu.tsx

@@ -1,164 +0,0 @@
-import {h, Component, ComponentChild, VNode} from 'preact';
-import {Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../../utils';
-import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
-import * as styles from './download-print-menu.scss';
-import {DownloadIcon, PrintIcon} from './download-print-icons';
-
-const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
-
-export function downloadContent(content: string, name: string): void {
-  const blob = new Blob([content], {type: 'text/plain;charset=utf-8;'});
-  const anchor = document.createElement('a');
-  const {navigator} = window as any;
-
-  if (navigator.msSaveBlob) {
-    // IE
-    navigator.msSaveOrOpenBlob(blob, name);
-    return;
-  }
-  if (navigator.userAgent.search('Firefox') !== -1) {
-    // Firefox
-    anchor.style.display = 'none';
-    anchor.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
-  } else {
-    // Chrome
-    anchor.setAttribute('href', URL.createObjectURL(blob));
-  }
-  anchor.setAttribute('target', '_blank');
-  anchor.setAttribute('download', name);
-  anchor.click();
-  anchor.remove();
-}
-
-export function printContent(content: string): void {
-  const printWindow = window.open('', '', 'width=400,height=600');
-  if (printWindow) {
-    printWindow.document.write(content);
-    printWindow.document.close();
-    printWindow.focus();
-    printWindow.print();
-    printWindow.close();
-  }
-}
-
-interface DownloadPrintMenuProps {
-  dropdownAriaLabel: string;
-  printButtonAriaLabel: string;
-  downloadButtonAriaLabel: string;
-  onDownload: () => void;
-  onPrint: () => void;
-  downloadDisabled: boolean;
-  printDisabled: boolean;
-}
-
-interface ButtonProperties {
-  ['aria-label']: string;
-  buttonStyles: string;
-  onClick?: () => void;
-  tabIndex?: number;
-  iconStyles: string;
-  icon: VNode;
-}
-
-interface DownloadPrintMenuState {
-  popoverOpen: boolean;
-}
-
-export class DownloadPrintMenu extends Component<DownloadPrintMenuProps, DownloadPrintMenuState> {
-  state: DownloadPrintMenuState = {
-    popoverOpen: false
-  };
-
-  private _onDownloadClicked = () => {
-    this.props.onDownload();
-  };
-
-  private _onPrintClicked = () => {
-    this.props.onPrint();
-  };
-  private _onKeyDown = (e: KeyboardEvent, callBack: Function) => {
-    if (e.keyCode !== ENTER && e.keyCode !== Esc) {
-      // don't stopPropagation on ESC and Enter pressed as it prevent the popup closing
-      e.stopPropagation();
-    }
-    switch (e.keyCode) {
-      case 13: // Enter pressed
-        callBack();
-        break;
-    }
-  };
-  private _popoverMenuItemRenderer = (el: PopoverMenuItem) => (
-    <div
-      tabIndex={1}
-      role="button"
-      onClick={() => el.onMenuChosen()}
-      onKeyDown={(e: KeyboardEvent) => this._onKeyDown(e, el.onMenuChosen)}
-      className={styles.popoverMenuItem}>
-      {el.label}
-    </div>
-  );
-
-  private _getPopoverMenuOptions = () => {
-    return [
-      {
-        label: this.props.downloadButtonAriaLabel,
-        onMenuChosen: this._onDownloadClicked
-      },
-      {
-        label: this.props.printButtonAriaLabel,
-        onMenuChosen: this._onPrintClicked
-      }
-    ];
-  };
-
-  private _renderIcon = ({buttonStyles, tabIndex = 0, iconStyles, icon, ...props}: ButtonProperties): ComponentChild => {
-    return (
-      <button className={buttonStyles} tabIndex={tabIndex} {...props}>
-        <div className={iconStyles}>{icon}</div>
-      </button>
-    );
-  };
-
-  private _popoverContent = () => {
-    return <PopoverMenu itemRenderer={this._popoverMenuItemRenderer} options={this._getPopoverMenuOptions()} />;
-  };
-
-  render(props: DownloadPrintMenuProps) {
-    const {downloadDisabled, printDisabled} = props;
-    if (!downloadDisabled && !printDisabled) {
-      return (
-        <Popover
-          className="download-print-popover"
-          verticalPosition={PopoverVerticalPositions.Bottom}
-          horizontalPosition={PopoverHorizontalPositions.Left}
-          content={this._popoverContent()}>
-          {this._renderIcon({
-            ['aria-label']: props.dropdownAriaLabel,
-            buttonStyles: styles.downloadPrintButton,
-            iconStyles: styles.icon,
-            icon: <DownloadIcon />
-          })}
-        </Popover>
-      );
-    }
-    if (!downloadDisabled && printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.downloadButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onDownloadClicked,
-        icon: <DownloadIcon />
-      });
-    }
-    if (downloadDisabled && !printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.printButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onPrintClicked,
-        icon: <PrintIcon />
-      });
-    }
-    return null;
-  }
-}

package/src/components/download-print-menu/index.ts

@@ -1 +0,0 @@
-export * from './download-print-menu';

package/src/components/popover-menu/index.ts

@@ -1 +0,0 @@
-export * from './popover-menu';

package/src/components/popover-menu/popover-menu.scss

@@ -1,6 +0,0 @@
-@import '../../variables.scss';
-
-.popover-menu {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}

package/src/components/popover-menu/popover-menu.tsx

@@ -1,52 +0,0 @@
-import {h, Component, ComponentChild} from 'preact';
-import * as styles from './popover-menu.scss';
-
-export interface PopoverMenuItem {
-  label: string;
-  onMenuChosen: Function;
-  customRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-interface PopoverMenuProps {
-  options: Array<PopoverMenuItem>;
-  itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-/**
- * Popover menu renders list of options.
- *  options example:
- *   [
- *    {label: 'option_1', onMenuChosen: () => console.log('selected first')},
- *    {label: 'option_2', onMenuChosen: () => console.log('selected second')}
- *   ]
- * In case when 'itemRenderer' properdy hasn't provided - PopoverMenu renders
- * div with class "popover-menu-item" that contain label for the current option.
- * Default render of options can be changed by providing 'itemRenderer' - it should be
- * function that takes current option and returns valid 'preact' node.
- * If some option need to be rendered with a different method - specific render
- * method can be provided with 'customRenderer' property for the current option.
- *  option example with specific render method:
- *   { label: 'specific render', onMenuChosen: () => {}, customRenderer: el => (<span>{el.label}</span>)}
- */
-
-export class PopoverMenu extends Component<PopoverMenuProps> {
-  render(props: any) {
-    return (
-      <div className={styles.popoverMenu}>
-        {props.options.map((el: PopoverMenuItem) => {
-          if (el.customRenderer) {
-            return el.customRenderer(el);
-          }
-          if (props.itemRenderer) {
-            return props.itemRenderer(el);
-          }
-          return (
-            <div className="popover-menu-item" onClick={() => el.onMenuChosen(el)}>
-              {el.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}