@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
2 lines • 2.88 kB
JavaScript
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./dom.cjs`),t=require(`../utils/index.cjs`);var n=`listElementKey is required or the referenced element doesn't exist. Received listElement: `,r=({listItemRole:r=`option`,indexKey:i=`highlightIndex`,idKey:a=`highlightId`,listElementKey:o=`listRef`,activeItemKey:s=``,openMethod:c=null,afterHighlightMethod:l=null,beginningOfListMethod:u=null,endOfListMethod:d=null,scrollToOnHighlight:f=!0,focusOnKeyboardNavigation:p=!1}={})=>({mixins:[e.default],data(){return{[i]:-1,[a]:``,scrollToOnHighlight:f,focusOnKeyboardNavigation:p}},provide(){return{highlightId:()=>this[a]}},methods:{_getListElement(){return t.returnFirstEl(this[o]()?.$el)||this[o]()},_itemsLength(){let e=this._getListItemNodes();return e===null?0:e.length},_getListItemNodes(){let e=this._getListElement();return e?Array.from(e.querySelectorAll(`[role="${r}"], #sr-only-close-button`)):(console.error(n,e),null)},onUpKey(){c&&this[c](!0),this[i]>0?this.setHighlightIndex(this[i]-1):u&&this[u](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onDownKey(){c&&this[c](!0),this[i]<this._itemsLength()-1?this.setHighlightIndex(this[i]+1):d&&this[d](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onHomeKey(){this.jumpToBeginning(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onEndKey(){this.jumpToEnd(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onNavigationKey(e){let t=this._getListItemNodes(),n=t.filter(t=>t.textContent.trim().toLowerCase().startsWith(e.toLowerCase()));if(n.length<=0)return;let r=n.findIndex(e=>this[i]===t.indexOf(e)),a=t.indexOf(r<n.length-1?n[r+1]:n[0]);this.setHighlightIndex(a),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},isValidLetter(e){return e.length>1?!1:e>=`a`&&e<=`z`||e>=`A`&&e<=`Z`},jumpToBeginning(){this.setHighlightIndex(0)},jumpToEnd(){this.setHighlightIndex(this._itemsLength()-1)},setHighlightIndex(e){this[i]=e,this[a]=this._getItemId(e),this._itemsLength()&&l&&this[l](e)},setHighlightId(e){e&&(this[a]=e,this[i]=this._getItemIndex(e),this._itemsLength()&&l&&this[l](this._getItemIndex(e)))},_getItemIndex(e){let t=this._getListElement();if(t)return Array.from(t.querySelectorAll(`[role="${r}"], #sr-only-close-button`)).indexOf(t.querySelector(`#${e}`))},_getItemId(e){let t=this._getListElement();if(t)return t.querySelectorAll(`[role="${r}"], #sr-only-close-button`)[e]?.id},scrollActiveItemIntoViewIfNeeded(){if(!this.scrollToOnHighlight)return;let e=this[s];if(e){let t=this._getListElement();this.scrollElementIntoViewIfNeeded(e,null,null,t)}},focusActiveItemIfNeeded(){if(!this.focusOnKeyboardNavigation)return;let e=this[s];e&&e.focus()}}});exports.default=r;
//# sourceMappingURL=keyboard-list-navigation.cjs.map