@playkit-js/transcript 3.5.18 → 3.5.19-canary.0-542d304

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-transcript.js +1 -1
  3. package/dist/playkit-transcript.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/popover-menu/popover-menu.tsx +18 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@playkit-js/transcript",
3
- "version": "3.5.18",
3
+ "version": "3.5.19-canary.0-542d304",
4
4
  "main": "dist/playkit-transcript.js",
5
5
  "license": "AGPL-3.0",
6
6
  "private": false,
package/src/components/popover-menu/popover-menu.tsx CHANGED
@@ -63,7 +63,8 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
63
63
  this.state.isOpen &&
64
64
  event.keyCode === TAB &&
65
65
  !this._controlElementRef?.contains(eventTarget) &&
66
- !this._popoverElementRef?.contains(eventTarget)
66
+ !this._popoverElementRef?.contains(eventTarget) &&
67
+ eventTarget !== this._controlElementRef
67
68
  ) {
68
69
  this.closePopover();
69
70
  }
@@ -81,17 +82,22 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
81
82
  this.setState({isOpen: false});
82
83
  }
83
84
 
84
- private togglePopover = (focusFirstItem: boolean) => {
85
+ private togglePopover = () => {
85
86
  const isOpen = !this.state.isOpen;
86
87
 
87
88
  this.setState({isOpen}, () => {
88
- if (isOpen && focusFirstItem) {
89
- const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
90
- if (firstNonDisabledItem !== -1) {
91
- this._getItemRef(firstNonDisabledItem)?.focus();
92
- }
89
+ if (isOpen){
90
+ this._controlElementRef?.focus();
91
+ this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
92
+ if (event.keyCode === TAB){
93
+ const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
94
+ if (firstNonDisabledItem !== -1) {
95
+ this._getItemRef(firstNonDisabledItem -1)?.focus();
96
+ }
97
+ }
98
+ })
93
99
  }
94
- });
100
+ })
95
101
  };
96
102
 
97
103
  private _getItemRef = (index: number) => {
@@ -109,7 +115,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
109
115
  <div className={styles.popoverContainer}>
110
116
  <A11yWrapper onClick={(e) => {
111
117
  e.stopPropagation();
112
- this.togglePopover(true);
118
+ this.togglePopover();
113
119
  }}>
114
120
  <div
115
121
  aria-label={this.props.moreOptionsLabel!}
@@ -119,7 +125,9 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
119
125
  aria-expanded={this.state.isOpen}
120
126
  aria-controls="popoverContent"
121
127
  ref={node => {
122
- this._controlElementRef = node;
128
+ if (node){
129
+ this._controlElementRef = node;
130
+ }
123
131
  }}>
124
132
  <div className={styles.popoverAnchor}>{children}</div>
125
133
  </div>