@playkit-js/transcript 3.0.1-canary.44-4c445bb → 3.0.1

package/src/components/search/search.tsx

@@ -1,27 +1,8 @@
 import {h, Component} from 'preact';
-import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import * as styles from './search.scss';
 import {debounce} from '../../utils';
 const DEBOUNCE_TIMEOUT = 300;
 
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
-const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
-  searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
-  clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
-  nextMatchLabel: <Text id="transcript.next_search_match">Next</Text>,
-  prevMatchLabel: <Text id="transcript.prev_search_match">Previous</Text>,
-  searchResultsLabel: (
-    <Text
-      id="transcript.prev_search_match"
-      fields={{
-        current: totalSearchResults > 0 ? activeSearchIndex : 0,
-        total: totalSearchResults
-      }}>
-      {`Result ${totalSearchResults > 0 ? activeSearchIndex : 0} of ${totalSearchResults}`}
-    </Text>
-  )
-});
-
 export interface SearchProps {
   onChange(value: string): void;
   searchQuery: string;
@@ -32,12 +13,6 @@ export interface SearchProps {
   value: string;
   activeSearchIndex: number;
   totalSearchResults: number;
-
-  searchLabel?: string;
-  clearSearchLabel?: string;
-  nextMatchLabel?: string;
-  prevMatchLabel?: string;
-  searchResultsLabel?: string;
 }
 
 interface SearchState {
@@ -45,7 +20,7 @@ interface SearchState {
   focused: boolean;
 }
 
-class SearchComponent extends Component<SearchProps, SearchState> {
+export class Search extends Component<SearchProps, SearchState> {
   state: SearchState = {
     active: false,
     focused: false
@@ -86,8 +61,8 @@ class SearchComponent extends Component<SearchProps, SearchState> {
     this.props.onChange(e.target.value);
   };
 
-  private _onClear = (event: OnClickEvent, byKeyboard?: boolean) => {
-    if (!byKeyboard) {
+  private _onClear = (event: MouseEvent) => {
+    if (event.x !== 0 && event.y !== 0) {
       this._focusedByMouse = true;
     }
     this._inputRef?.focus();
@@ -160,8 +135,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
         </div>
         <input
           className={styles.searchInput}
-          aria-label={this.props.searchLabel}
-          placeholder={this.props.searchLabel}
+          placeholder={'Search in Transcript'}
           value={searchQuery}
           onInput={this._handleOnChange}
           onFocus={this._onFocus}
@@ -173,82 +147,72 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           }}
         />
         {searchQuery && (
-          <A11yWrapper onClick={this._onClear}>
-            <button className={styles.clearIcon} tabIndex={1} aria-label={this.props.clearSearchLabel}>
+          <button className={styles.clearIcon} onClick={this._onClear} tabIndex={1}>
+            <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/Clere" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <path
+                  d="M16,8 C20.418278,8 24,11.581722 24,16 C24,20.418278 20.418278,24 16,24 C11.581722,24 8,20.418278 8,16 C8,11.581722 11.581722,8 16,8 Z M19.8665357,12.1334643 C19.6885833,11.9555119 19.4000655,11.9555119 19.2221131,12.1334643 L16,15.356 L12.7778869,12.1334643 L12.7064039,12.0750737 C12.5295326,11.9582924 12.2891726,11.977756 12.1334643,12.1334643 L12.0750737,12.2049473 C11.9582924,12.3818186 11.977756,12.6221786 12.1334643,12.7778869 L15.356,16 L12.1334643,19.2221131 C11.9555119,19.4000655 11.9555119,19.6885833 12.1334643,19.8665357 C12.3114167,20.0444881 12.5999345,20.0444881 12.7778869,19.8665357 L16,16.644 L19.2221131,19.8665357 L19.2935961,19.9249263 C19.4704674,20.0417076 19.7108274,20.022244 19.8665357,19.8665357 L19.9249263,19.7950527 C20.0417076,19.6181814 20.022244,19.3778214 19.8665357,19.2221131 L16.644,16 L19.8665357,12.7778869 C20.0444881,12.5999345 20.0444881,12.3114167 19.8665357,12.1334643 Z"
+                  id="Shape"
+                  fill="#cccccc"></path>
+              </g>
+            </svg>
+          </button>
+        )}
+        {searchQuery && (
+          <div className={styles.searchResults}>{`${totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'}`}</div>
+        )}
+        <div className={styles.prevNextWrapper}>
+          {searchQuery && (
+            <button
+              tabIndex={1}
+              className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+              onClick={this._goToPrevSearchResult}>
               <svg
-                width="32px"
-                height="32px"
-                viewBox="0 0 32 32"
+                width="14px"
+                height="12px"
+                viewBox="1 0 14 12"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink">
-                <g id="Icons/32/Clere" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Icons/16/Arrow/-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                   <path
-                    d="M16,8 C20.418278,8 24,11.581722 24,16 C24,20.418278 20.418278,24 16,24 C11.581722,24 8,20.418278 8,16 C8,11.581722 11.581722,8 16,8 Z M19.8665357,12.1334643 C19.6885833,11.9555119 19.4000655,11.9555119 19.2221131,12.1334643 L16,15.356 L12.7778869,12.1334643 L12.7064039,12.0750737 C12.5295326,11.9582924 12.2891726,11.977756 12.1334643,12.1334643 L12.0750737,12.2049473 C11.9582924,12.3818186 11.977756,12.6221786 12.1334643,12.7778869 L15.356,16 L12.1334643,19.2221131 C11.9555119,19.4000655 11.9555119,19.6885833 12.1334643,19.8665357 C12.3114167,20.0444881 12.5999345,20.0444881 12.7778869,19.8665357 L16,16.644 L19.2221131,19.8665357 L19.2935961,19.9249263 C19.4704674,20.0417076 19.7108274,20.022244 19.8665357,19.8665357 L19.9249263,19.7950527 C20.0417076,19.6181814 20.022244,19.3778214 19.8665357,19.2221131 L16.644,16 L19.8665357,12.7778869 C20.0444881,12.5999345 20.0444881,12.3114167 19.8665357,12.1334643 Z"
-                    id="Shape"
-                    fill="#cccccc"></path>
+                    d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
+                    id="Path-2"
+                    fill="#cccccc"
+                    transform="translate(8.000000, 8.519717) scale(1, -1) translate(-8.000000, -8.519717) "></path>
                 </g>
               </svg>
             </button>
-          </A11yWrapper>
-        )}
-        {searchQuery && (
-          <div className={styles.searchResults} aria-live="polite" aria-label={this.props.searchResultsLabel}>{`${
-            totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'
-          }`}</div>
-        )}
-        <div className={styles.prevNextWrapper}>
-          {searchQuery && (
-            <A11yWrapper onClick={this._goToPrevSearchResult}>
-              <button
-                tabIndex={1}
-                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-                aria-label={this.props.prevMatchLabel}>
-                <svg
-                  width="14px"
-                  height="12px"
-                  viewBox="1 0 14 12"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink">
-                  <g id="Icons/16/Arrow/-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <path
-                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                      id="Path-2"
-                      fill="#cccccc"
-                      transform="translate(8.000000, 8.519717) scale(1, -1) translate(-8.000000, -8.519717) "></path>
-                  </g>
-                </svg>
-              </button>
-            </A11yWrapper>
           )}
           {searchQuery && (
-            <A11yWrapper onClick={this._goToNextSearchResult}>
-              <button
-                tabIndex={1}
-                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-                aria-label={this.props.nextMatchLabel}>
-                <svg
-                  width="14px"
-                  height="12px"
-                  viewBox="1 2 14 12"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink">
-                  <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <path
-                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                      id="Path-2"
-                      fill="#cccccc"></path>
-                  </g>
-                </svg>
-              </button>
-            </A11yWrapper>
+            <button
+              tabIndex={1}
+              className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+              onClick={this._goToNextSearchResult}>
+              <svg
+                width="14px"
+                height="12px"
+                viewBox="1 2 14 12"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink">
+                <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <path
+                    d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
+                    id="Path-2"
+                    fill="#cccccc"></path>
+                </g>
+              </svg>
+            </button>
           )}
         </div>
       </div>
     );
   }
 }
-
-export const Search = withText(translates)(SearchComponent);

package/src/components/transcript/transcript.tsx

@@ -8,13 +8,7 @@ import {CaptionList} from '../caption-list';
 import {HighlightedMap, CuePointData, PluginPositions} from '../../types';
 import {CloseButton} from '../close-button';
 import {ErrorIcon} from './error-icon';
-
-const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap;
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
-
-const translates = {
-  autoScrollLabel: <Text id="transcript.auto_scroll">Enable auto scroll</Text>
-};
+const {ENTER, Space, Tab, Esc} = KalturaPlayer.ui.utils.KeyMap;
 
 export interface TranscriptProps {
   onSeek(time: number): void;
@@ -34,7 +28,6 @@ export interface TranscriptProps {
   highlightedMap: HighlightedMap;
   pluginMode: PluginPositions;
   onItemClicked: (n: number) => void;
-  autoScrollLabel?: string;
 }
 
 interface TranscriptState {
@@ -57,7 +50,7 @@ const initialSearch = {
 
 const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
 
-export class TranscriptComponent extends Component<TranscriptProps, TranscriptState> {
+export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _transcriptListRef: HTMLElement | null = null;
   private _captionListRef: any = null;
   private _skipTranscriptButtonRef: HTMLDivElement | null = null;
@@ -113,7 +106,6 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
           role="button"
           className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
           tabIndex={isAutoScrollEnabled ? -1 : 1}
-          aria-label={this.props.autoScrollLabel}
           ref={node => {
             this._autoscrollButtonRef = node;
           }}>
@@ -209,13 +201,8 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
     );
   };
 
-  private _handleClick = (event: MouseEvent | KeyboardEvent) => {
-    event.preventDefault();
-    this._autoscrollButtonRef?.focus();
-  };
-
   private _handleKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === TAB && !event.shiftKey) {
+    if (event.keyCode === Tab && !event.shiftKey) {
       this.setState({
         isAutoScrollEnabled: false
       });
@@ -224,8 +211,9 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         event.preventDefault();
         captionRef.focus();
       }
-    } else if (event.keyCode === ENTER || event.keyCode === SPACE) {
-      this._handleClick(event);
+    } else if (event.keyCode === ENTER || event.keyCode === Space) {
+      event.preventDefault();
+      this._autoscrollButtonRef?.focus();
     }
   };
 
@@ -238,7 +226,6 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         }}
         className={styles.skipTranscriptButton}
         onKeyDown={this._handleKeyDown}
-        onClick={this._handleClick}
         tabIndex={1}>
         Skip transcript
       </div>
@@ -364,7 +351,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
   };
 
   private _handleEsc = (event: KeyboardEvent) => {
-    if (event.keyCode === ESC) {
+    if (event.keyCode === Esc) {
       this.props.onClose();
     }
   };
@@ -399,5 +386,3 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
     );
   }
 }
-
-export const Transcript = withText(translates)(TranscriptComponent);

package/src/transcript-plugin.tsx

@@ -10,6 +10,14 @@ import {DownloadPrintMenu, downloadContent, printContent} from './components/dow
 
 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>
+});
 
 interface TimedMetadataEvent {
   payload: {
@@ -112,15 +120,14 @@ 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;
@@ -159,14 +166,17 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       label: 'Download or print transcript',
       area: ReservedPresetAreas.TopBarRightControls,
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
-      get: () => (
+      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}
         />
-      )
+      ))
     });
   }
 
@@ -204,18 +214,21 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       },
       iconComponent: ({isActive}: {isActive: boolean}) => {
         return (
-          <PluginButton
-            isActive={isActive}
-            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 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],

package/src/utils/index.ts

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

package/src/utils/popover/popover.scss

@@ -0,0 +1,30 @@
+.popover-container {
+  position: relative;
+  .popover-component {
+    background-color: #222222;
+    border-radius: 4px;
+    position: absolute;
+    right: 0px;
+    font-size: 15px;
+    display: block;
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      z-index: 10;
+    }
+    &.top {
+      bottom: 100%;
+      margin-bottom: 6px;
+    }
+    &.bottom {
+      top: 100%;
+      margin-top: 6px;
+    }
+    &.right {
+      left: 0px;
+    }
+    &.left {
+      right: 0px;
+    }
+  }
+}

package/src/utils/popover/popover.tsx

@@ -0,0 +1,178 @@
+import {h, Component, ComponentChild} from 'preact';
+import * as styles from './popover.scss';
+
+const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
+
+export enum PopoverVerticalPositions {
+  Top = 'top',
+  Bottom = 'bottom'
+}
+export enum PopoverHorizontalPositions {
+  Left = 'left',
+  Right = 'right'
+}
+export enum PopoverTriggerMode {
+  Click = 'click',
+  Hover = 'hover'
+}
+
+const CLOSE_ON_HOVER_DELAY = 500;
+
+const defaultProps = {
+  verticalPosition: PopoverVerticalPositions.Top,
+  horizontalPosition: PopoverHorizontalPositions.Left,
+  triggerMode: PopoverTriggerMode.Click,
+  className: 'popover',
+  closeOnEsc: true,
+  closeOnClick: true
+};
+
+interface PopoverProps {
+  onClose?: () => void;
+  onOpen?: () => void;
+  closeOnClick: boolean;
+  closeOnEsc: boolean;
+  verticalPosition: PopoverVerticalPositions;
+  horizontalPosition: PopoverHorizontalPositions;
+  className: string;
+  triggerMode: PopoverTriggerMode;
+  content: ComponentChild;
+  children: ComponentChild;
+}
+
+interface PopoverState {
+  open: boolean;
+}
+
+export class Popover extends Component<PopoverProps, PopoverState> {
+  private _closeTimeout: any = null;
+  private _controlElement: HTMLDivElement | null = null;
+  static defaultProps = {
+    ...defaultProps
+  };
+  state = {
+    open: false
+  };
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  private _clearTimeout = () => {
+    clearTimeout(this._closeTimeout);
+    this._closeTimeout = null;
+  };
+
+  private _handleMouseEvent = (event: MouseEvent) => {
+    if (!this._controlElement?.contains(event.target as Node | null) && this.props.closeOnClick) {
+      this._closePopover();
+    }
+  };
+
+  private _handleKeyboardEvent = (event: KeyboardEvent) => {
+    if (this._controlElement?.contains(event.target as Node | null) && event.keyCode === ENTER) {
+      // handle Enter key pressed on Target icon to prevent triggering of _closePopover twice
+      return;
+    }
+    if ((this.props.closeOnEsc && event.keyCode === Esc) || event.keyCode === ENTER) {
+      // handle if ESC or Enter button presesd
+      this._closePopover();
+    }
+  };
+
+  private _openPopover = () => {
+    const {onOpen} = this.props;
+    this._clearTimeout();
+    this.setState({open: true}, () => {
+      this._addListeners();
+      if (onOpen) {
+        onOpen();
+      }
+    });
+  };
+
+  private _closePopover = () => {
+    const {onClose} = this.props;
+    this._clearTimeout();
+    this.setState({open: false}, () => {
+      this._removeListeners();
+      if (onClose) {
+        onClose();
+      }
+    });
+  };
+
+  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
+    if (this.state.open) {
+      this._closePopover();
+    } else {
+      this._openPopover();
+    }
+  };
+  private _handleMouseEnter = () => {
+    if (!this.state.open) {
+      this._openPopover();
+    }
+  };
+  private _handleMouseLeave = () => {
+    this._closeTimeout = setTimeout(this._closePopover, CLOSE_ON_HOVER_DELAY);
+  };
+  private _handleHoverOnPopover = () => {
+    if (this.state.open && this._closeTimeout) {
+      this._clearTimeout();
+    } else {
+      this._closePopover();
+    }
+  };
+  private _addListeners = () => {
+    document.addEventListener('click', this._handleMouseEvent);
+    document.addEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _removeListeners = () => {
+    document.removeEventListener('click', this._handleMouseEvent);
+    document.removeEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _getHoverEvents = () => {
+    if (this.props.triggerMode === PopoverTriggerMode.Hover) {
+      return {
+        targetEvents: {
+          onMouseEnter: this._handleMouseEnter,
+          onMouseLeave: this._handleMouseLeave
+        },
+        popoverEvents: {
+          onMouseEnter: this._handleHoverOnPopover,
+          onMouseLeave: this._handleHoverOnPopover
+        }
+      };
+    }
+    return {targetEvents: {onClick: this._togglePopover}, popoverEvents: {}};
+  };
+  render(props: PopoverProps) {
+    if (!props.content || !props.children) {
+      return null;
+    }
+    const {targetEvents, popoverEvents} = this._getHoverEvents();
+    return (
+      <div className={styles.popoverContainer}>
+        <div
+          className="popover-anchor-container"
+          ref={node => {
+            this._controlElement = node;
+          }}
+          {...targetEvents}
+        >
+          {props.children}
+        </div>
+        {this.state.open && (
+          <div
+            aria-expanded="true"
+            className={[props.className, styles.popoverComponent, styles[props.verticalPosition], styles[props.horizontalPosition]].join(' ')}
+            {...popoverEvents}
+          >
+            {props.content}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/components/popover/index.ts

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

package/src/components/popover/popover.scss

@@ -1,43 +0,0 @@
-@import '../../variables.scss';
-
-.popover-container {
-  position: relative;
-  .popover-component {
-    background-color: #222222;
-    border-radius: 4px;
-    position: absolute;
-    right: 0px;
-    font-size: 15px;
-    display: block;
-    &.hidden {
-      display: none;
-    }
-    &.bottom {
-      top: 100%;
-      margin-top: 6px;
-    }
-    &.left {
-      right: 0px;
-    }
-  }
-}
-.popover-menu {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-.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;
-  }
-}