@playkit-js/moderation 3.2.16 → 3.2.17-canary.0-69bf180

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/playkit-moderation.js +1 -1
  3. package/dist/playkit-moderation.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/popover/popover.tsx +14 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@playkit-js/moderation",
3
- "version": "3.2.16",
3
+ "version": "3.2.17-canary.0-69bf180",
4
4
  "main": "dist/playkit-moderation.js",
5
5
  "private": false,
6
6
  "bugs": {
package/src/components/popover/popover.tsx CHANGED
@@ -3,6 +3,7 @@ import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrappe
3
3
  import * as styles from './popover.scss';
4
4
 
5
5
  const {ESC, TAB} = KalturaPlayer.ui.utils.KeyMap;
6
+ const {withEventManager} = KalturaPlayer.ui.Event;
6
7
 
7
8
  export interface PopoverMenuItem {
8
9
  label?: string;
@@ -14,9 +15,10 @@ interface PopoverProps {
14
15
  children: VNode;
15
16
  setExpandedState: (open: boolean, callback?: () => void) => void;
16
17
  open: boolean;
18
+ eventManager?: any;
17
19
  }
18
20
 
19
-
21
+ @withEventManager
20
22
  export class Popover extends Component<PopoverProps> {
21
23
  private _controlElementRef: HTMLDivElement | null = null;
22
24
  private _popoverElementRef: HTMLDivElement | null = null;
@@ -35,7 +37,9 @@ export class Popover extends Component<PopoverProps> {
35
37
  };
36
38
 
37
39
  private _handleKeyboardEvent = (event: KeyboardEvent) => {
38
- if (event.keyCode === ESC || !this._popoverElementRef?.contains(event.target as Node | null)) {
40
+ if (event.keyCode === ESC || (!this._popoverElementRef?.contains(event.target as Node | null)
41
+ && !this._controlElementRef?.contains(event.target as Node | null))) {
42
+
39
43
  this._closePopover();
40
44
  }
41
45
  };
@@ -60,7 +64,11 @@ export class Popover extends Component<PopoverProps> {
60
64
  this.props.setExpandedState(true, () => {
61
65
  this._addListeners();
62
66
  if (byKeyboard) {
63
- this._getOptionRef(0)?.focus();
67
+ this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
68
+ if (event.keyCode === TAB){
69
+ this._getOptionRef(-1)?.focus();
70
+ }
71
+ })
64
72
  }
65
73
  });
66
74
  };
@@ -98,7 +106,9 @@ export class Popover extends Component<PopoverProps> {
98
106
  <div
99
107
  className="popover-anchor-container"
100
108
  ref={node => {
101
- this._controlElementRef = node;
109
+ if (node){
110
+ this._controlElementRef = node;
111
+ }
102
112
  }}>
103
113
  <A11yWrapper onClick={this._togglePopover}>{props.children}</A11yWrapper>;
104
114
  </div>