@playkit-js/transcript 3.5.18 → 3.5.19-canary.0-8742c1f

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 (6) 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
  6. package/src/transcript-plugin.tsx +0 -1
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-8742c1f",
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>
package/src/transcript-plugin.tsx CHANGED
@@ -278,7 +278,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
278
278
  presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
279
279
  position: position,
280
280
  expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER,
281
- onDeactivate: this._deactivatePlugin
282
281
  }) as number;
283
282
  const translates = {
284
283
  showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,