@ebay/ui-core-react 7.4.0-alpha.3 → 7.4.0-alpha.5
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.
package/ebay-listbox/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-Ck3BxDm4.js");exports.EbayListbox=t.EbayListbox;exports.EbayListboxOption=t.EbayListboxOption;exports.EbayListboxOptionDescription=t.EbayListboxOptionDescription;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),W=require("../index-Dkz0UnlJ.js"),E=require("classnames"),_=require("../listbox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),W=require("../index-Dkz0UnlJ.js"),E=require("classnames"),_=require("../listbox-Ck3BxDm4.js"),X=require("../common/component-utils/utils/index.js"),Y=require("../icon-TuxfQndO.js");function M(t){t.keyCode>=32&&t.keyCode<=40&&t.preventDefault()}function Z(t){t.addEventListener("keydown",M)}function ee(t){t.removeEventListener("keydown",M)}const $=({alwaysDisplay:t,icon:c,labelId:n,text:o,unselectedText:y,postfixLabel:m})=>{if(c)return e.createElement("span",{id:n,className:"btn__text"},c);if(o||t){const i=o||y;return e.createElement("span",{id:n,className:"btn__text"},i,m&&e.createElement("span",{className:"btn__postfix-label"},m))}};function F({selected:t,value:c,options:n}){return t!==void 0?t:c!==void 0?n.findIndex(o=>o.props.value===c):n.findIndex(o=>o.props.selected)}const te=_.EbayListboxOption,ne=({"aria-invalid":t,a11yIconPrefixText:c,borderless:n,children:o,className:y,collapseOnSelect:m,disabled:i,floatingLabel:v,fluid:L,hasError:h,listSelection:j,maxHeight:A,name:K,postfixLabel:S,prefixId:q,prefixLabel:I,selected:N,split:O,truncate:R,unselectedText:k="-",value:g,variant:P,onChange:U=()=>{},onExpand:V=()=>{},onCollapse:z=()=>{},...G})=>{const a=e.useRef(),u=e.useRef(),l=e.useRef(),b=X.filterByType(o,_.EbayListboxOption),[w,B]=e.useState(F({selected:N,value:g,options:b})),p=b[w],d=p&&(p.props.text||p.props.children),C=p&&p.props.icon,D=C&&d,f=q&&"expand-btn-text";e.useEffect(()=>{B(F({selected:N,value:g,options:b}))},[g,N]),e.useEffect(()=>{function r(){var x,T;(T=(x=a.current)==null?void 0:x.querySelector(".listbox-button__options"))==null||T.scroll(),V()}function s(){requestAnimationFrame(()=>{var x;(x=u.current)==null||x.focus()}),z()}return b.length&&!i&&(l.current=new W.src_default(a.current,{alwaysDoFocusManagement:!0,autoCollapse:!0,expandOnClick:!0,simulateSpacebarClick:!0,contentSelector:".listbox-button__options",hostSelector:".listbox-button__control",expandedClass:"listbox-button--expanded",focusManagement:"content"}),a.current.addEventListener("expander-expand",r),a.current.addEventListener("expander-collapse",s)),Z(u.current),()=>{l.current&&(l.current.destroy(),l.current=void 0),a.current&&(a.current.removeEventListener("expander-expand",r),a.current.removeEventListener("expander-collapse",s)),u.current&&ee(u.current)}},[i]);function H(r,s){m!==!1&&(l.current.expanded=!1),B(s.index),U(r,s)}function J(){l.current.expanded=!1}const Q=R&&!L?"div":"span";return e.createElement(Q,{ref:a,className:E("listbox-button",y,{"listbox-button--fluid":L,"listbox-button--form":P==="form","listbox-button--error":t||h})},e.createElement("button",{...G,disabled:i,ref:u,className:E("listbox-button__control","btn",{[`btn--split-${O}`]:O,"btn--borderless":n,"btn--form":!n,"btn--truncated":R,"btn--floating-label":v}),"aria-label":D&&`${c}: ${D}`,value:d,type:"button","aria-haspopup":"listbox","aria-labelledby":f&&`${q} ${f}`,"aria-invalid":t||h},e.createElement("span",{className:"btn__cell"},v?e.createElement(e.Fragment,null,e.createElement("span",{className:E("btn__floating-label","btn__floating-label--animate",!d&&"btn__floating-label--inline")},v),e.createElement($,{icon:C,labelId:f,text:d,unselectedText:k,postfixLabel:S})):e.createElement(e.Fragment,null,I?e.createElement("span",{className:"btn__label"},I):null,e.createElement($,{alwaysDisplay:!0,icon:C,labelId:f,text:d,unselectedText:k,postfixLabel:S})),e.createElement(Y.EbayIcon,{name:"chevronDown12"}))),e.createElement("div",{className:"listbox-button__listbox"},e.createElement(_.EbayListbox,{className:"listbox-button__options",selectClassName:"listbox-button__native",tabIndex:-1,listSelection:j,name:K,maxHeight:A,onChange:H,onEscape:J},b.map((r,s)=>e.createElement(_.EbayListboxOption,{...r.props,key:r.props.value||s,selected:s===w,className:E("listbox-button__option",r.props.className)})))))};exports.EbayListboxButton=ne;exports.EbayListboxButtonOption=te;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const r=require("react"),x=require("./index-D3xZmuzJ.js"),y=require("classnames"),A=require("./common/component-utils/utils/index.js"),j=require("./icon-TuxfQndO.js");function V(t){return t.charAt(0).toLowerCase()+t.slice(1)}function z(t,e,n){if(!t.shiftKey){const i=t.key;switch(i){case"Enter":case"Escape":case"PageUp":case"PageDown":case"End":case"Home":case"ArrowLeft":case"ArrowUp":case"ArrowRight":case"ArrowDown":e.dispatchEvent(new CustomEvent(V(`${i}Key${n}`),{detail:t,bubbles:!0}));break;case" ":e.dispatchEvent(new CustomEvent(`spacebarKey${n}`,{detail:t,bubbles:!0}));break;default:return}}}function T(t){z(t,this,"Down")}function G(t){t.addEventListener("keydown",T)}function W(t){t.removeEventListener("keydown",T)}const Y={axis:"both",autoInit:"interactive",autoReset:"current",ignoreByDelegateSelector:null,wrap:!1};function p(t){return!t.hidden&&t.getAttribute("aria-disabled")!=="true"}function O(t,e){return e>=0&&e<t.length?p(t[e]):!1}function J(t){return t.filter(p)}function m(t){return t.findIndex(e=>p(e))}function C(t){return t.indexOf(J(t).reverse()[0])}function B(t,e,n){return t.findIndex(i=>p(i)&&i.getAttribute(e)===n)}function Q(t){return B(t,"aria-checked","true")}function R(t){return B(t,"aria-selected","true")}function w(t,e){return e.ignoreByDelegateSelector!==null?[...t.querySelectorAll(e.ignoreByDelegateSelector)]:[]}function X(t,e,n){let i=-1;if(e===null||ee(t,e))n===!0&&(i=C(t));else{let s=e;for(;--s>=0;)if(p(t[s])){i=s;break}}return i}function Z(t,e,n){let i=-1;if(e===null)i=m(t);else if(te(t,e))n===!0&&(i=m(t));else{let s=e;for(;++s<t.length;)if(p(t[s])){i=s;break}}return i}function K(t,e,n){let i=-1;switch(t){case"none":i=null;break;case"current":i=n;break;case"interactive":i=m(e);break;case"ariaChecked":i=Q(e);break;case"ariaSelected":i=R(e);break;case"ariaSelectedOrInteractive":i=R(e),i=i===-1?m(e):i;break;default:i=typeof t=="number"||t===null?t:-1}return i}function ee(t,e){return e===m(t)}function te(t,e){return e===C(t)}function ne(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=X(this.items,this.index,this.options.wrap))}function ie(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=Z(this.items,this.index,this.options.wrap))}function se(t){const e=this.indexOf(t.target.closest(this._itemSelector));O(this.items,e)&&(this.index=e)}function oe(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=m(this.items))}function re(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=C(this.items))}function ae(){this.options.autoReset!==null&&this.reset()}function ce(t){const e=this.index;let n=this.index;const{addedNodes:i,attributeName:s,removedNodes:o,target:u,type:h}=t[0];h==="attributes"?u===this.currentItem?s==="aria-disabled"?n=this.index:s==="hidden"&&(n=m(this.items)):n=this.index:h==="childList"&&(o.length>0&&[...o].includes(this._cachedElement)?n=m(this.items):(o.length>0||i.length>0)&&(n=this.indexOf(this._cachedElement))),this._index=n,this._el.dispatchEvent(new CustomEvent("navigationModelMutation",{bubbles:!1,detail:{fromIndex:e,toIndex:n}}))}class le{constructor(e,n,i){this.options=Object.assign({},Y,i),this._el=e,this._itemSelector=n}}class de extends le{constructor(e,n,i){super(e,n,i);const s=this._index,o=K(this.options.autoInit,this.items,this.index);this._index=o,this._cachedElement=this.items[o],this._el.dispatchEvent(new CustomEvent("navigationModelInit",{bubbles:!1,detail:{firstInteractiveIndex:this.firstNavigableIndex,fromIndex:s,items:this.items,toIndex:o}}))}get currentItem(){return this.items[this.index]}get items(){return[...this._el.querySelectorAll(`${this._itemSelector}`)]}get index(){return this._index}set index(e){if(e!==this.index&&O(this.items,e)){const n=this.index;this._cachedElement=this.items[e],this._index=e,this._el.dispatchEvent(new CustomEvent("navigationModelChange",{bubbles:!1,detail:{fromIndex:n,toIndex:e}}))}}indexOf(e){return this.items.indexOf(e)}reset(){const e=this.index,n=K(this.options.autoReset,this.items,this.index);n!==e&&(this._index=n,this._el.dispatchEvent(new CustomEvent("navigationModelReset",{bubbles:!1,detail:{fromIndex:e,toIndex:n}})))}}class ue{constructor(e,n){this.model=n,this.el=e,this._keyPrevListener=ne.bind(n),this._keyNextListener=ie.bind(n),this._keyHomeListener=oe.bind(n),this._keyEndListener=re.bind(n),this._clickListener=se.bind(n),this._focusExitListener=ae.bind(n),this._observer=new MutationObserver(ce.bind(n)),G(this.el),x.addFocusExit(this.el);const i=n.options.axis;(i==="both"||i==="x")&&(this.el.addEventListener("arrowLeftKeyDown",this._keyPrevListener),this.el.addEventListener("arrowRightKeyDown",this._keyNextListener)),(i==="both"||i==="y")&&(this.el.addEventListener("arrowUpKeyDown",this._keyPrevListener),this.el.addEventListener("arrowDownKeyDown",this._keyNextListener)),this.el.addEventListener("homeKeyDown",this._keyHomeListener),this.el.addEventListener("endKeyDown",this._keyEndListener),this.el.addEventListener("click",this._clickListener),this.el.addEventListener("focusExit",this._focusExitListener),this._observer.observe(this.el,{childList:!0,subtree:!0,attributeFilter:["aria-disabled","hidden"],attributes:!0,attributeOldValue:!0})}destroy(){W(this.el),x.removeFocusExit(this.el),this.el.removeEventListener("arrowLeftKeyDown",this._keyPrevListener),this.el.removeEventListener("arrowRightKeyDown",this._keyNextListener),this.el.removeEventListener("arrowUpKeyDown",this._keyPrevListener),this.el.removeEventListener("arrowDownKeyDown",this._keyNextListener),this.el.removeEventListener("homeKeyDown",this._keyHomeListener),this.el.removeEventListener("endKeyDown",this._keyEndListener),this.el.removeEventListener("click",this._clickListener),this.el.removeEventListener("focusExit",this._focusExitListener),this._observer.disconnect()}}function he(t,e,n){const i=new de(t,e,n);return new ue(t,i)}const fe={activeDescendantClassName:"active-descendant",autoInit:"none",autoReset:"none",autoScroll:!1,axis:"both",wrap:!1};function ve(t){const{items:e,toIndex:n}=t.detail,i=e[n];i&&(i.classList.add(this._options.activeDescendantClassName),this._focusEl.setAttribute("aria-activedescendant",i.id)),this._el.dispatchEvent(new CustomEvent("activeDescendantInit",{detail:t.detail}))}function me(t){const{fromIndex:e,toIndex:n}=t.detail,i=this.items[e],s=this.items[n];i&&i.classList.remove(this._options.activeDescendantClassName),s&&(s.classList.add(this._options.activeDescendantClassName),this._focusEl.setAttribute("aria-activedescendant",s.id),this._options.autoScroll&&this._itemContainerEl&&s.scrollIntoView({block:"center"})),this._el.dispatchEvent(new CustomEvent("activeDescendantChange",{detail:t.detail}))}function _e(t){const e=t.detail.toIndex,n=this._options.activeDescendantClassName;if(this.items.forEach(function(i){i.classList.remove(n)}),e!==null&&e!==-1){const i=this.items[e];i.classList.add(n),this._focusEl.setAttribute("aria-activedescendant",i.id)}else this._focusEl.removeAttribute("aria-activedescendant");this._el.dispatchEvent(new CustomEvent("activeDescendantReset",{detail:t.detail}))}function Ee(t){const{toIndex:e}=t.detail,n=this._options.activeDescendantClassName;this.items.forEach(function(i,s){x.src_default(i),s!==e?i.classList.remove(n):i.classList.add(n)}),this._el.dispatchEvent(new CustomEvent("activeDescendantMutation",{detail:t.detail}))}class pe{constructor(e){this._el=e,this._onMutationListener=Ee.bind(this),this._onChangeListener=me.bind(this),this._onResetListener=_e.bind(this),this._onInitListener=ve.bind(this),this._el.addEventListener("navigationModelMutation",this._onMutationListener),this._el.addEventListener("navigationModelChange",this._onChangeListener),this._el.addEventListener("navigationModelReset",this._onResetListener),this._el.addEventListener("navigationModelInit",this._onInitListener)}destroy(){this._el.removeEventListener("navigationModelMutation",this._onMutationListener),this._el.removeEventListener("navigationModelChange",this._onChangeListener),this._el.removeEventListener("navigationModelReset",this._onResetListener),this._el.removeEventListener("navigationModelInit",this._onInitListener)}}class be extends pe{constructor(e,n,i,s,o){super(e),this._options=Object.assign({},fe,o),this._focusEl=n,this._itemContainerEl=i,this._itemSelector=s,x.src_default(this._itemContainerEl),this._itemContainerEl!==this._focusEl&&n.setAttribute("aria-owns",this._itemContainerEl.id),this._navigationEmitter=he(e,s,{autoInit:this._options.autoInit,autoReset:this._options.autoReset,axis:this._options.axis,ignoreByDelegateSelector:this._options.ignoreByDelegateSelector,wrap:this._options.wrap}),this.items.forEach(function(u){x.src_default(u)})}get index(){return this._navigationEmitter.model.index}set index(e){this._navigationEmitter.model.index=e}reset(){this._navigationEmitter.model.reset()}get currentItem(){return this._navigationEmitter.model.currentItem}get items(){return this._navigationEmitter.model.items}set wrap(e){this._navigationEmitter.model.options.wrap=e}destroy(){super.destroy(),this._navigationEmitter.destroy()}}function ge(t,e,n,i,s){return new be(t,e,n,i,s)}function xe(){let t,e="";return{getIndex:function(n,i,s){e=e.concat(i);let o;if(n==null)return-1;const u=e.toLocaleLowerCase();return o=[...n].findIndex(h=>h.textContent.toLocaleLowerCase().startsWith(u)),o===-1&&(o=[...n].findIndex(h=>h.textContent.toLocaleLowerCase().includes(u))),setTimeout(()=>{clearTimeout(t),e=""},s),o},destroy:function(){}}}function Le(t){if(!t)return;const e=t.parentElement,n=t.offsetTop+t.offsetHeight,i=e.scrollTop+e.offsetHeight;t.offsetTop<e.scrollTop?e.scrollTop=t.offsetTop:n>i&&(e.scrollTop=n-e.offsetHeight)}const S=({children:t,className:e,...n})=>r.createElement("div",{className:y("listbox__description",e),...n},t),H=({className:t,icon:e,text:n,children:i,disabled:s,tabIndex:o,selected:u,...h})=>{const l=A.filterByType(i,S),b=n||(l!=null&&l.length?"":i);return r.createElement("div",{...h,tabIndex:s?-1:o,className:y("listbox__option",t),"aria-disabled":s,"aria-selected":u,role:"option"},e?r.createElement("span",{className:"listbox__value"},e,b?r.createElement("span",null,b):null,l!=null&&l.length?l:null):r.createElement(r.Fragment,null,r.createElement("span",{className:"listbox__value"},b),l!=null&&l.length?l:null),r.createElement(j.EbayIcon,{name:"tick16"}))},ye=1300,we=({name:t,className:e,disabled:n,children:i,tabIndex:s=0,listSelection:o,maxHeight:u,typeaheadTimeoutLength:h,selectClassName:l,onChange:b=()=>{},onEscape:P=()=>{},...F})=>{var N;const v=A.filterByType(i,H),I=v.findIndex(a=>a.props.selected),[_,k]=r.useState(v.findIndex(a=>a.props.selected));r.useEffect(()=>{I!==_&&k(I)},[I]);const d=r.useRef(),E=r.useRef(),g=r.useRef(),L=r.useRef(!1);function D(a,c,f){c===_||v[c].props.disabled||(k(c),b(a,{index:c,selected:[v[c].props.value],wasClicked:f}))}function q(a){switch(a.code){case"Esc":case"Escape":P();break;case"Space":case"Enter":D(a,E.current.index,!1);break;default:return}const c=g.current.getIndex(d.current.children,a.key,h||ye);if(c!==-1){E.current.index=c;const f=d.current.querySelectorAll("[role=option]")[c];d.current.scrollTop=f.offsetTop-d.current.offsetHeight/2}}function U(){L.current=!0}return r.useEffect(()=>{const a=c=>{const f=parseInt(c.detail.toIndex,10),M=d.current?d.current.querySelectorAll("[role=option]")[_]:null,$=L.current;Le(M),L.current&&(L.current=!1),D(c,f,$)};if(v.length&&!n){const c=d.current,f=d.current;E.current=ge(c,f,f,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:_,autoReset:null,autoScroll:o!=="auto"}),g.current=xe()}return o==="auto"&&d.current.addEventListener("activeDescendantChange",a),()=>{E.current&&(E.current.reset(),E.current.destroy(),E.current=void 0),g.current&&(g.current.destroy(),g.current=void 0),d.current&&d.current.removeEventListener("activeDescendantChange",a)}},[_,n,o]),r.createElement(r.Fragment,null,r.createElement("div",{...F,tabIndex:s,ref:d,role:"listbox",onKeyDown:o!=="auto"?q:void 0,className:y("listbox__options",e),style:{maxHeight:u}},v.map((a,c)=>r.cloneElement(a,{key:a.props.value||c,...a.props,onMouseDown:o==="auto"?U:void 0,onClick:f=>{o!=="auto"&&D(f,c,!0)},selected:c===_}))),r.createElement("select",{hidden:!0,className:y("listbox__native",l),name:t,value:(N=v[_])==null?void 0:N.props.value,onChange:()=>{}},v.map((a,c)=>r.createElement("option",{key:a.props.value||c,value:a.props.value,disabled:a.props.disabled}))))};exports.EbayListbox=we;exports.EbayListboxOption=H;exports.EbayListboxOptionDescription=S;
|
|
1
|
+
"use strict";const r=require("react"),x=require("./index-D3xZmuzJ.js"),y=require("classnames"),A=require("./common/component-utils/utils/index.js"),j=require("./icon-TuxfQndO.js");function V(t){return t.charAt(0).toLowerCase()+t.slice(1)}function z(t,e,n){if(!t.shiftKey){const i=t.key;switch(i){case"Enter":case"Escape":case"PageUp":case"PageDown":case"End":case"Home":case"ArrowLeft":case"ArrowUp":case"ArrowRight":case"ArrowDown":e.dispatchEvent(new CustomEvent(V(`${i}Key${n}`),{detail:t,bubbles:!0}));break;case" ":e.dispatchEvent(new CustomEvent(`spacebarKey${n}`,{detail:t,bubbles:!0}));break;default:return}}}function T(t){z(t,this,"Down")}function G(t){t.addEventListener("keydown",T)}function W(t){t.removeEventListener("keydown",T)}const Y={axis:"both",autoInit:"interactive",autoReset:"current",ignoreByDelegateSelector:null,wrap:!1};function p(t){return!t.hidden&&t.getAttribute("aria-disabled")!=="true"}function O(t,e){return e>=0&&e<t.length?p(t[e]):!1}function J(t){return t.filter(p)}function m(t){return t.findIndex(e=>p(e))}function C(t){return t.indexOf(J(t).reverse()[0])}function B(t,e,n){return t.findIndex(i=>p(i)&&i.getAttribute(e)===n)}function Q(t){return B(t,"aria-checked","true")}function R(t){return B(t,"aria-selected","true")}function w(t,e){return e.ignoreByDelegateSelector!==null?[...t.querySelectorAll(e.ignoreByDelegateSelector)]:[]}function X(t,e,n){let i=-1;if(e===null||ee(t,e))n===!0&&(i=C(t));else{let s=e;for(;--s>=0;)if(p(t[s])){i=s;break}}return i}function Z(t,e,n){let i=-1;if(e===null)i=m(t);else if(te(t,e))n===!0&&(i=m(t));else{let s=e;for(;++s<t.length;)if(p(t[s])){i=s;break}}return i}function K(t,e,n){let i=-1;switch(t){case"none":i=null;break;case"current":i=n;break;case"interactive":i=m(e);break;case"ariaChecked":i=Q(e);break;case"ariaSelected":i=R(e);break;case"ariaSelectedOrInteractive":i=R(e),i=i===-1?m(e):i;break;default:i=typeof t=="number"||t===null?t:-1}return i}function ee(t,e){return e===m(t)}function te(t,e){return e===C(t)}function ne(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=X(this.items,this.index,this.options.wrap))}function ie(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=Z(this.items,this.index,this.options.wrap))}function se(t){const e=this.indexOf(t.target.closest(this._itemSelector));O(this.items,e)&&(this.index=e)}function oe(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=m(this.items))}function re(t){const e=w(this._el,this.options);(e.length===0||!e.includes(t.detail.target))&&(this.index=C(this.items))}function ae(){this.options.autoReset!==null&&this.reset()}function ce(t){const e=this.index;let n=this.index;const{addedNodes:i,attributeName:s,removedNodes:o,target:u,type:h}=t[0];h==="attributes"?u===this.currentItem?s==="aria-disabled"?n=this.index:s==="hidden"&&(n=m(this.items)):n=this.index:h==="childList"&&(o.length>0&&[...o].includes(this._cachedElement)?n=m(this.items):(o.length>0||i.length>0)&&(n=this.indexOf(this._cachedElement))),this._index=n,this._el.dispatchEvent(new CustomEvent("navigationModelMutation",{bubbles:!1,detail:{fromIndex:e,toIndex:n}}))}class le{constructor(e,n,i){this.options=Object.assign({},Y,i),this._el=e,this._itemSelector=n}}class de extends le{constructor(e,n,i){super(e,n,i);const s=this._index,o=K(this.options.autoInit,this.items,this.index);this._index=o,this._cachedElement=this.items[o],this._el.dispatchEvent(new CustomEvent("navigationModelInit",{bubbles:!1,detail:{firstInteractiveIndex:this.firstNavigableIndex,fromIndex:s,items:this.items,toIndex:o}}))}get currentItem(){return this.items[this.index]}get items(){return[...this._el.querySelectorAll(`${this._itemSelector}`)]}get index(){return this._index}set index(e){if(e!==this.index&&O(this.items,e)){const n=this.index;this._cachedElement=this.items[e],this._index=e,this._el.dispatchEvent(new CustomEvent("navigationModelChange",{bubbles:!1,detail:{fromIndex:n,toIndex:e}}))}}indexOf(e){return this.items.indexOf(e)}reset(){const e=this.index,n=K(this.options.autoReset,this.items,this.index);n!==e&&(this._index=n,this._el.dispatchEvent(new CustomEvent("navigationModelReset",{bubbles:!1,detail:{fromIndex:e,toIndex:n}})))}}class ue{constructor(e,n){this.model=n,this.el=e,this._keyPrevListener=ne.bind(n),this._keyNextListener=ie.bind(n),this._keyHomeListener=oe.bind(n),this._keyEndListener=re.bind(n),this._clickListener=se.bind(n),this._focusExitListener=ae.bind(n),this._observer=new MutationObserver(ce.bind(n)),G(this.el),x.addFocusExit(this.el);const i=n.options.axis;(i==="both"||i==="x")&&(this.el.addEventListener("arrowLeftKeyDown",this._keyPrevListener),this.el.addEventListener("arrowRightKeyDown",this._keyNextListener)),(i==="both"||i==="y")&&(this.el.addEventListener("arrowUpKeyDown",this._keyPrevListener),this.el.addEventListener("arrowDownKeyDown",this._keyNextListener)),this.el.addEventListener("homeKeyDown",this._keyHomeListener),this.el.addEventListener("endKeyDown",this._keyEndListener),this.el.addEventListener("click",this._clickListener),this.el.addEventListener("focusExit",this._focusExitListener),this._observer.observe(this.el,{childList:!0,subtree:!0,attributeFilter:["aria-disabled","hidden"],attributes:!0,attributeOldValue:!0})}destroy(){W(this.el),x.removeFocusExit(this.el),this.el.removeEventListener("arrowLeftKeyDown",this._keyPrevListener),this.el.removeEventListener("arrowRightKeyDown",this._keyNextListener),this.el.removeEventListener("arrowUpKeyDown",this._keyPrevListener),this.el.removeEventListener("arrowDownKeyDown",this._keyNextListener),this.el.removeEventListener("homeKeyDown",this._keyHomeListener),this.el.removeEventListener("endKeyDown",this._keyEndListener),this.el.removeEventListener("click",this._clickListener),this.el.removeEventListener("focusExit",this._focusExitListener),this._observer.disconnect()}}function he(t,e,n){const i=new de(t,e,n);return new ue(t,i)}const fe={activeDescendantClassName:"active-descendant",autoInit:"none",autoReset:"none",autoScroll:!1,axis:"both",wrap:!1};function ve(t){const{items:e,toIndex:n}=t.detail,i=e[n];i&&(i.classList.add(this._options.activeDescendantClassName),this._focusEl.setAttribute("aria-activedescendant",i.id)),this._el.dispatchEvent(new CustomEvent("activeDescendantInit",{detail:t.detail}))}function me(t){const{fromIndex:e,toIndex:n}=t.detail,i=this.items[e],s=this.items[n];i&&i.classList.remove(this._options.activeDescendantClassName),s&&(s.classList.add(this._options.activeDescendantClassName),this._focusEl.setAttribute("aria-activedescendant",s.id),this._options.autoScroll&&this._itemContainerEl&&s.scrollIntoView({block:"center"})),this._el.dispatchEvent(new CustomEvent("activeDescendantChange",{detail:t.detail}))}function _e(t){const e=t.detail.toIndex,n=this._options.activeDescendantClassName;if(this.items.forEach(function(i){i.classList.remove(n)}),e!==null&&e!==-1){const i=this.items[e];i.classList.add(n),this._focusEl.setAttribute("aria-activedescendant",i.id)}else this._focusEl.removeAttribute("aria-activedescendant");this._el.dispatchEvent(new CustomEvent("activeDescendantReset",{detail:t.detail}))}function Ee(t){const{toIndex:e}=t.detail,n=this._options.activeDescendantClassName;this.items.forEach(function(i,s){x.src_default(i),s!==e?i.classList.remove(n):i.classList.add(n)}),this._el.dispatchEvent(new CustomEvent("activeDescendantMutation",{detail:t.detail}))}class pe{constructor(e){this._el=e,this._onMutationListener=Ee.bind(this),this._onChangeListener=me.bind(this),this._onResetListener=_e.bind(this),this._onInitListener=ve.bind(this),this._el.addEventListener("navigationModelMutation",this._onMutationListener),this._el.addEventListener("navigationModelChange",this._onChangeListener),this._el.addEventListener("navigationModelReset",this._onResetListener),this._el.addEventListener("navigationModelInit",this._onInitListener)}destroy(){this._el.removeEventListener("navigationModelMutation",this._onMutationListener),this._el.removeEventListener("navigationModelChange",this._onChangeListener),this._el.removeEventListener("navigationModelReset",this._onResetListener),this._el.removeEventListener("navigationModelInit",this._onInitListener)}}class be extends pe{constructor(e,n,i,s,o){super(e),this._options=Object.assign({},fe,o),this._focusEl=n,this._itemContainerEl=i,this._itemSelector=s,x.src_default(this._itemContainerEl),this._itemContainerEl!==this._focusEl&&n.setAttribute("aria-owns",this._itemContainerEl.id),this._navigationEmitter=he(e,s,{autoInit:this._options.autoInit,autoReset:this._options.autoReset,axis:this._options.axis,ignoreByDelegateSelector:this._options.ignoreByDelegateSelector,wrap:this._options.wrap}),this.items.forEach(function(u){x.src_default(u)})}get index(){return this._navigationEmitter.model.index}set index(e){this._navigationEmitter.model.index=e}reset(){this._navigationEmitter.model.reset()}get currentItem(){return this._navigationEmitter.model.currentItem}get items(){return this._navigationEmitter.model.items}set wrap(e){this._navigationEmitter.model.options.wrap=e}destroy(){super.destroy(),this._navigationEmitter.destroy()}}function ge(t,e,n,i,s){return new be(t,e,n,i,s)}function xe(){let t,e="";return{getIndex:function(n,i,s){e=e.concat(i);let o;if(n==null)return-1;const u=e.toLocaleLowerCase();return o=[...n].findIndex(h=>h.textContent.toLocaleLowerCase().startsWith(u)),o===-1&&(o=[...n].findIndex(h=>h.textContent.toLocaleLowerCase().includes(u))),setTimeout(()=>{clearTimeout(t),e=""},s),o},destroy:function(){}}}function Le(t){if(!t)return;const e=t.parentElement,n=t.offsetTop+t.offsetHeight,i=e.scrollTop+e.offsetHeight;t.offsetTop<e.scrollTop?e.scrollTop=t.offsetTop:n>i&&(e.scrollTop=n-e.offsetHeight)}const S=({children:t,className:e,...n})=>r.createElement("div",{className:y("listbox__description",e),...n},t),H=({className:t,icon:e,text:n,children:i,disabled:s,tabIndex:o,selected:u,...h})=>{const l=A.filterByType(i,S),b=n||(l!=null&&l.length?"":i);return r.createElement("div",{...h,tabIndex:s?-1:o,className:y("listbox__option",t),"aria-disabled":s,"aria-selected":u,role:"option"},e?r.createElement("span",{className:"listbox__value"},e,b?r.createElement("span",null,b):null,l!=null&&l.length?l:null):r.createElement(r.Fragment,null,r.createElement("span",{className:"listbox__value"},b),l!=null&&l.length?l:null),r.createElement(j.EbayIcon,{name:"tick16"}))},ye=1300,we=({name:t,className:e,disabled:n,children:i,tabIndex:s=0,listSelection:o,maxHeight:u,typeaheadTimeoutLength:h,selectClassName:l,onChange:b=()=>{},onEscape:P=()=>{},...F})=>{var N;const v=A.filterByType(i,H),I=v.findIndex(c=>c.props.selected),[_,k]=r.useState(v.findIndex(c=>c.props.selected));r.useEffect(()=>{I!==_&&k(I)},[I]);const d=r.useRef(),E=r.useRef(),g=r.useRef(),L=r.useRef(!1);function D(c,a,f){a===_||v[a].props.disabled||(k(a),b(c,{index:a,selected:[v[a].props.value],wasClicked:f}))}function q(c){switch(c.code){case"Esc":case"Escape":P();break;case"Space":case"Enter":D(c,E.current.index,!1);break;default:return}const a=g.current.getIndex(d.current.children,c.key,h||ye);if(a!==-1){E.current.index=a;const f=d.current.querySelectorAll("[role=option]")[a];d.current.scrollTop=f.offsetTop-d.current.offsetHeight/2}}function U(){L.current=!0}return r.useEffect(()=>{const c=a=>{const f=parseInt(a.detail.toIndex,10),M=d.current?d.current.querySelectorAll("[role=option]")[_]:null,$=L.current;Le(M),L.current&&(L.current=!1),D(a,f,$)};if(v.length&&!n){const a=d.current,f=d.current;E.current=ge(a,f,f,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:_,autoReset:null,autoScroll:o!=="auto"}),g.current=xe()}return o==="auto"&&d.current.addEventListener("activeDescendantChange",c),()=>{E.current&&(E.current.reset(),E.current.destroy(),E.current=void 0),g.current&&(g.current.destroy(),g.current=void 0),d.current&&d.current.removeEventListener("activeDescendantChange",c)}},[_,n,o]),r.createElement(r.Fragment,null,r.createElement("div",{...F,tabIndex:s,ref:d,role:"listbox",onKeyDown:o!=="auto"?q:void 0,className:y("listbox__options",e),style:{maxHeight:u}},v.map((c,a)=>r.cloneElement(c,{key:c.props.value||a,...c.props,onMouseDown:o==="auto"?U:void 0,onClick:f=>{o!=="auto"&&D(f,a,!0)},selected:a===_}))),r.createElement("select",{hidden:!0,className:y("listbox__native",l),name:t,value:(N=v[_])==null?void 0:N.props.value,onChange:()=>{}},v.map((c,a)=>r.createElement("option",{key:a,value:c.props.value,disabled:c.props.disabled}))))};exports.EbayListbox=we;exports.EbayListboxOption=H;exports.EbayListboxOptionDescription=S;
|