@playkit-js/moderation 3.2.19 → 3.2.20-canary.0-a00b3eb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.2.19",
+  "version": "3.2.20-canary.0-a00b3eb",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {

package/src/components/moderation/moderation.scss

@@ -38,6 +38,7 @@
       font-weight: 700;
       text-align: left;
       line-height: 32px;
+      padding-right: 44px;
     }
     .selectTitle {
       font-size: 14px;
@@ -45,6 +46,7 @@
       font-weight: 700;
       text-align: left;
       margin-top: 24px;
+      padding-right: 44px;
     }
     .subtitle {
       margin-top: 16px;

package/src/components/popover/popover.scss

@@ -3,6 +3,9 @@
 .popover-container {
     position: relative;
     .popover-component {
+        width: fit-content;
+        min-width: 280px;
+        max-width: 500px;
         z-index: 1;
         background-color: $tone-7-color;
         border-radius: $roundness-1;
@@ -33,10 +36,14 @@
 .popover-menu {
     padding-top: 6px;
     padding-bottom: 6px;
+    display: inline-block;
 }
 .popover-menu-item {
-    display: flex;
-    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 280px;
+    max-width: 461px;
+    text-align: left;
     padding: 9px 24px 9px 16px;
     white-space: nowrap;
     min-height: 30px;

package/src/components/popover/popover.tsx

@@ -4,6 +4,8 @@ import * as styles from './popover.scss';
 
 const {ESC, TAB} = KalturaPlayer.ui.utils.KeyMap;
 const {withEventManager} = KalturaPlayer.ui.Event;
+const {Tooltip} = KalturaPlayer.ui.components;
+
 
 export interface PopoverMenuItem {
   label?: string;
@@ -99,8 +101,23 @@ export class Popover extends Component<PopoverProps> {
     cb(byKeyboard);
   };
 
+  private _createOptionDiv = (el:PopoverMenuItem, index: number) =>{
+    return (
+        <div
+            tabIndex={0}
+            aria-label={el.label}
+            className={styles.popoverMenuItem}
+            ref={node => {
+              this._setOptionRef(index, node);
+            }}>
+          {el.label}
+        </div>
+    )
+  }
+
   render(props: PopoverProps) {
     const {open} = this.props;
+
     return (
       <div className={styles.popoverContainer}>
         <div
@@ -122,21 +139,18 @@ export class Popover extends Component<PopoverProps> {
             className={[styles.reportPopover, styles.popoverComponent, styles.bottom, styles.right].join(' ')}>
             <div role="menu" className={styles.popoverMenu} data-testid="popoverMenu">
               {props.options.map((el, index) => {
+                const isTitle = el.label?.length ? el.label?.length > 58 : ''
                 return (
                   <A11yWrapper
                     role="menuitem"
                     onClick={this._handleClickOnOption(el.onMenuChosen)}
                     onDownKeyPressed={this._handleDownKeyPressed(index)}
                     onUpKeyPressed={this._handleUpKeyPressed(index)}>
-                    <div
-                      tabIndex={0}
-                      aria-label={el.label}
-                      className={styles.popoverMenuItem}
-                      ref={node => {
-                        this._setOptionRef(index, node);
-                      }}>
-                      {el.label}
-                    </div>
+                    {isTitle?
+                        (<Tooltip label={el.label}>
+                          {this._createOptionDiv(el, index)}
+                        </Tooltip>)
+                    :(this._createOptionDiv(el, index))}
                   </A11yWrapper>
                 );
               })}