@@ -4,14 +4,22 @@ import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
44import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg' ;
55
66window . customElements . define ( 'overflow-menu' , class extends HTMLElement {
7+ tippyContent : HTMLDivElement ;
8+ tippyItems : Array < HTMLElement > ;
9+ button : HTMLButtonElement ;
10+ menuItemsEl : HTMLElement ;
11+ resizeObserver : ResizeObserver ;
12+ mutationObserver : MutationObserver ;
13+ lastWidth : number ;
14+
715 updateItems = throttle ( 100 , ( ) => { // eslint-disable-line unicorn/consistent-function-scoping -- https://github.com/sindresorhus/eslint-plugin-unicorn/issues/2088
816 if ( ! this . tippyContent ) {
917 const div = document . createElement ( 'div' ) ;
1018 div . classList . add ( 'tippy-target' ) ;
1119 div . tabIndex = - 1 ; // for initial focus, programmatic focus only
1220 div . addEventListener ( 'keydown' , ( e ) => {
1321 if ( e . key === 'Tab' ) {
14- const items = this . tippyContent . querySelectorAll ( '[role="menuitem"]' ) ;
22+ const items = this . tippyContent . querySelectorAll < HTMLElement > ( '[role="menuitem"]' ) ;
1523 if ( e . shiftKey ) {
1624 if ( document . activeElement === items [ 0 ] ) {
1725 e . preventDefault ( ) ;
@@ -32,36 +40,36 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
3240 if ( document . activeElement ?. matches ( '[role="menuitem"]' ) ) {
3341 e . preventDefault ( ) ;
3442 e . stopPropagation ( ) ;
35- document . activeElement . click ( ) ;
43+ ( document . activeElement as HTMLElement ) . click ( ) ;
3644 }
3745 } else if ( e . key === 'ArrowDown' ) {
3846 if ( document . activeElement ?. matches ( '.tippy-target' ) ) {
3947 e . preventDefault ( ) ;
4048 e . stopPropagation ( ) ;
41- document . activeElement . querySelector ( '[role="menuitem"]:first-of-type' ) . focus ( ) ;
49+ document . activeElement . querySelector < HTMLElement > ( '[role="menuitem"]:first-of-type' ) . focus ( ) ;
4250 } else if ( document . activeElement ?. matches ( '[role="menuitem"]' ) ) {
4351 e . preventDefault ( ) ;
4452 e . stopPropagation ( ) ;
45- document . activeElement . nextElementSibling ?. focus ( ) ;
53+ ( document . activeElement . nextElementSibling as HTMLElement ) ?. focus ( ) ;
4654 }
4755 } else if ( e . key === 'ArrowUp' ) {
4856 if ( document . activeElement ?. matches ( '.tippy-target' ) ) {
4957 e . preventDefault ( ) ;
5058 e . stopPropagation ( ) ;
51- document . activeElement . querySelector ( '[role="menuitem"]:last-of-type' ) . focus ( ) ;
59+ document . activeElement . querySelector < HTMLElement > ( '[role="menuitem"]:last-of-type' ) . focus ( ) ;
5260 } else if ( document . activeElement ?. matches ( '[role="menuitem"]' ) ) {
5361 e . preventDefault ( ) ;
5462 e . stopPropagation ( ) ;
55- document . activeElement . previousElementSibling ?. focus ( ) ;
63+ ( document . activeElement . previousElementSibling as HTMLElement ) ?. focus ( ) ;
5664 }
5765 }
5866 } ) ;
5967 this . append ( div ) ;
6068 this . tippyContent = div ;
6169 }
6270
63- const itemFlexSpace = this . menuItemsEl . querySelector ( '.item-flex-space' ) ;
64- const itemOverFlowMenuButton = this . querySelector ( '.overflow-menu-button' ) ;
71+ const itemFlexSpace = this . menuItemsEl . querySelector < HTMLSpanElement > ( '.item-flex-space' ) ;
72+ const itemOverFlowMenuButton = this . querySelector < HTMLButtonElement > ( '.overflow-menu-button' ) ;
6573
6674 // move items in tippy back into the menu items for subsequent measurement
6775 for ( const item of this . tippyItems || [ ] ) {
@@ -78,7 +86,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
7886 itemOverFlowMenuButton ?. style . setProperty ( 'display' , 'none' , 'important' ) ;
7987 this . tippyItems = [ ] ;
8088 const menuRight = this . offsetLeft + this . offsetWidth ;
81- const menuItems = this . menuItemsEl . querySelectorAll ( '.item, .item-flex-space' ) ;
89+ const menuItems = this . menuItemsEl . querySelectorAll < HTMLElement > ( '.item, .item-flex-space' ) ;
8290 let afterFlexSpace = false ;
8391 for ( const item of menuItems ) {
8492 if ( item . classList . contains ( 'item-flex-space' ) ) {
@@ -189,14 +197,14 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
189197 // template rendering, wait for its addition.
190198 // The eslint rule is not sophisticated enough or aware of this problem, see
191199 // https://github.com/43081j/eslint-plugin-wc/pull/130
192- const menuItemsEl = this . querySelector ( '.overflow-menu-items' ) ; // eslint-disable-line wc/no-child-traversal-in-connectedcallback
200+ const menuItemsEl = this . querySelector < HTMLElement > ( '.overflow-menu-items' ) ; // eslint-disable-line wc/no-child-traversal-in-connectedcallback
193201 if ( menuItemsEl ) {
194202 this . menuItemsEl = menuItemsEl ;
195203 this . init ( ) ;
196204 } else {
197205 this . mutationObserver = new MutationObserver ( ( mutations ) => {
198206 for ( const mutation of mutations ) {
199- for ( const node of mutation . addedNodes ) {
207+ for ( const node of mutation . addedNodes as NodeListOf < HTMLElement > ) {
200208 if ( ! isDocumentFragmentOrElementNode ( node ) ) continue ;
201209 if ( node . classList . contains ( 'overflow-menu-items' ) ) {
202210 this . menuItemsEl = node ;
0 commit comments