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