@ebay/ui-core-react 7.3.5 → 7.3.6

package/ebay-listbox-button/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),w=require("classnames"),V=require("../icon-TuxfQndO.js"),be=require("../common/component-utils/utils/index.js"),F=({value:b,children:y,selected:i,onClick:v,index:m,innerRef:g,className:k,id:h,...f})=>{const x=w("listbox-button__option",k,{"listbox-button__option--active":i});return o.createElement("div",{...f,className:x,role:"option",id:h||`listbox_btn_${b}_${m}`,"aria-selected":i,ref:g,onClick:u=>{v(u,b,m)}},o.createElement("span",{className:"listbox-button__value"},y),o.createElement(V.EbayIcon,{name:"tick16"}))},me=({children:b,name:y,value:i,selected:v,borderless:m,fluid:g,className:k,maxHeight:h,prefixId:f,prefixLabel:x,floatingLabel:u,unselectedText:j="-",onChange:O=()=>{},onCollapse:W=()=>{},onExpand:z=()=>{},...G})=>{const a=o.useRef(null),S=o.useRef(),B=o.useRef(new Map),E=o.useRef(),l=be.filterByType(b,F);if(!l.length)throw new Error(`EbayListboxButton: Please use a
-        EbayListboxButtonOption that defines the options of the listbox`);const J=()=>{const e=v!==void 0?v:l.findIndex(({props:s})=>i!==void 0&&s.value===i),t=e>-1||u?e:void 0;return{option:l[t],index:t}},{option:N,index:T}=J(),[c,d]=o.useState(N),[n,C]=o.useState(T),[_,D]=o.useState(),[Q,X]=o.useState(!1),[A,L]=o.useState();o.useEffect(()=>{d(N)},[i]);const r=o.Children.toArray(b),I=e=>r[e].props.value,Y=o.useCallback(e=>r.findIndex(({props:t})=>t.value===e),[r]),R=e=>B.current.get(e),H=e=>{const t=a.current;t==null||t.setAttribute("aria-activedescendant",R(e).id)},p=()=>{D(!1),W()},Z=()=>{D(!0),z()},ee=()=>{_?p():Z()},P=(e,t)=>{d(r[t]),C(t),p(),H(t),E.current.focus(),O(e,{index:t,selected:[I(t)],wasClicked:A}),L(!1)},te=()=>{p(),d(r[T])},oe=e=>{const t=a.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},ne=e=>{const t=a.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},se=e=>{const t=S.current,s=R(e);if(t.scrollHeight>t.clientHeight){const pe=t.clientHeight+t.scrollTop,$=s.offsetTop+s.offsetHeight;$>pe?t.scrollTop=$-t.clientHeight:s.offsetTop<t.scrollTop&&(t.scrollTop=s.offsetTop)}},U=e=>{oe(n===void 0||e===-1?0:e),ne(n===void 0||n===-1?0:n),se(e),H(e),C(e),d(r[e])},q=e=>setTimeout(()=>{var t;return(t=a==null?void 0:a.current)==null?void 0:t.focus(e)},0),ce=()=>{ee(),X(!0),q({preventScroll:!0})},ae=e=>{switch(e.key){case"Escape":p();break;case"Enter":q();break}},le=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),n!==l.length-1&&U(n<l.length-1?n+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),n!==0&&U(n>0?n-1:l.length-1);break;case"Enter":p(),setTimeout(()=>d(r[n])),setTimeout(()=>E.current.focus(),0),O(e,{index:n,selected:[I(n)],wasClicked:A});break;case"Esc":case"Escape":te();break}},K=l.map((e,t)=>o.cloneElement(e,{index:t,key:t,selected:c&&e.props.value===c.props.value,onClick:s=>P(s,t),innerRef:s=>s?B.current.set(t,s):B.current.delete(t)})),re=w("listbox-button",k,{"listbox-button--fluid":g}),ie=w("btn",{"btn--form":!m,"btn--borderless":m,"btn--floating-label":u&&c}),M=f&&"expand-btn-text",ue=o.createElement(o.Fragment,null,u&&o.createElement("span",{className:"btn__floating-label"},u),x&&o.createElement("span",{className:"btn__label"},x),o.createElement("span",{className:"btn__text",id:M},(c==null?void 0:c.props.children)||j));return o.createElement("span",{className:re},o.createElement("button",{...G,type:"button",className:ie,"aria-expanded":!!_,"aria-haspopup":"listbox","aria-labelledby":f&&`${f} ${M}`,onClick:ce,onMouseDown:e=>e.preventDefault(),onKeyUp:ae,ref:E},o.createElement("span",{className:"btn__cell"},ue,o.createElement(V.EbayIcon,{name:"chevronDown12"}))),(_||Q)&&o.createElement("div",{className:"listbox-button__listbox",ref:S,style:{maxHeight:h}},o.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:_?0:-1,ref:a,onKeyDown:e=>le(e),onMouseDown:e=>{e.preventDefault(),L(!0)},onBlur:()=>{p(),setTimeout(()=>E.current.focus(),0)}},K)),o.createElement("select",{hidden:!0,className:"listbox-button__native",name:y,onChange:e=>P(e,Y(e.target.value)),value:c?c==null?void 0:c.props.value:""},K.map((e,t)=>o.createElement("option",{value:e.props.value,key:t}))))};exports.EbayListboxButton=me;exports.EbayListboxButtonOption=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),O=require("classnames"),$=require("../icon-TuxfQndO.js"),be=require("../common/component-utils/utils/index.js"),F=({value:m,children:y,selected:r,onClick:f,index:d,innerRef:g,className:k,...h})=>{const p=O("listbox-button__option",k,{"listbox-button__option--active":r});return o.createElement("div",{...h,className:p,role:"option","aria-selected":r,ref:g,onClick:v=>{f(v,m,d)}},o.createElement("span",{className:"listbox-button__value"},y),o.createElement($.EbayIcon,{name:"tick16"}))},me=({children:m,name:y,value:r,selected:f,borderless:d,fluid:g,className:k,maxHeight:h,prefixId:p,prefixLabel:v,floatingLabel:x,unselectedText:V="-",onChange:S=()=>{},onCollapse:j=()=>{},onExpand:W=()=>{},...z})=>{var K;const i=o.useRef(null),N=o.useRef(),B=o.useRef(new Map),E=o.useRef(),c=be.filterByType(m,F);if(!c.length)throw new Error(`EbayListboxButton: Please use a
+        EbayListboxButtonOption that defines the options of the listbox`);const G=()=>{const e=f!==void 0?f:c.findIndex(({props:s})=>r!==void 0&&s.value===r),t=e>-1||x?e:void 0;return{option:c[t],index:t}},{option:T,index:C}=G(),[a,b]=o.useState(T),[n,D]=o.useState(C),[_,I]=o.useState(),[J,Q]=o.useState(!1),[L,A]=o.useState();o.useEffect(()=>{b(T)},[r]);const l=o.Children.toArray(m),R=e=>l[e].props.value,X=o.useCallback(e=>l.findIndex(({props:t})=>t.value===e),[l]),Y=e=>B.current.get(e),u=()=>{I(!1),j()},Z=()=>{I(!0),W()},ee=()=>{_?u():Z()},H=(e,t)=>{b(l[t]),D(t),u(),E.current.focus(),S(e,{index:t,selected:[R(t)],wasClicked:L}),A(!1)},te=()=>{u(),b(l[C])},oe=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},ne=e=>{const t=i.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},se=e=>{const t=N.current,s=Y(e);if(t.scrollHeight>t.clientHeight){const pe=t.clientHeight+t.scrollTop,M=s.offsetTop+s.offsetHeight;M>pe?t.scrollTop=M-t.clientHeight:s.offsetTop<t.scrollTop&&(t.scrollTop=s.offsetTop)}},P=e=>{oe(n===void 0||e===-1?0:e),ne(n===void 0||n===-1?0:n),se(e),D(e),b(l[e])},U=e=>setTimeout(()=>{var t;return(t=i==null?void 0:i.current)==null?void 0:t.focus(e)},0),ae=()=>{ee(),U({preventScroll:!0})},ce=e=>{switch(e.key){case"Escape":u();break;case"Enter":U();break}},le=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),n!==c.length-1&&P(n<c.length-1?n+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),n!==0&&P(n>0?n-1:c.length-1);break;case"Enter":u(),setTimeout(()=>b(l[n])),setTimeout(()=>E.current.focus(),0),S(e,{index:n,selected:[R(n)],wasClicked:L});break;case"Esc":case"Escape":te();break}},w=c.map((e,t)=>o.cloneElement(e,{index:t,key:t,selected:a&&e.props.value===a.props.value,id:e.props.id||`listbox_btn_${e.props.value}_${t}`,onClick:s=>H(s,t),innerRef:s=>s?B.current.set(t,s):B.current.delete(t)})),re=O("listbox-button",k,{"listbox-button--fluid":g}),ie=O("btn",{"btn--form":!d,"btn--borderless":d,"btn--floating-label":x&&a}),q=p&&"expand-btn-text",ue=o.createElement(o.Fragment,null,x&&o.createElement("span",{className:"btn__floating-label"},x),v&&o.createElement("span",{className:"btn__label"},v),o.createElement("span",{className:"btn__text",id:q},(a==null?void 0:a.props.children)||V));return o.createElement("span",{className:re},o.createElement("button",{...z,onFocus:()=>Q(!0),type:"button",className:ie,"aria-expanded":!!_,"aria-haspopup":"listbox","aria-labelledby":p&&`${p} ${q}`,onClick:ae,onMouseDown:e=>e.preventDefault(),onKeyUp:ce,ref:E},o.createElement("span",{className:"btn__cell"},ue,o.createElement($.EbayIcon,{name:"chevronDown12"}))),(_||J)&&o.createElement("div",{className:"listbox-button__listbox",ref:N,style:{maxHeight:h}},o.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:_?0:-1,ref:i,"aria-activedescendant":(K=w[n])==null?void 0:K.props.id,onKeyDown:e=>le(e),onMouseDown:e=>{e.preventDefault(),A(!0)},onBlur:()=>{u(),setTimeout(()=>E.current.focus(),0)}},w)),o.createElement("select",{hidden:!0,className:"listbox-button__native",name:y,onChange:e=>H(e,X(e.target.value)),value:a?a==null?void 0:a.props.value:""},w.map((e,t)=>o.createElement("option",{value:e.props.value,key:t}))))};exports.EbayListboxButton=me;exports.EbayListboxButtonOption=F;

package/ebay-listbox-button/listbox-button-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox-button-option.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxE,KAAK,4BAA4B,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,4BAA4B,CA0BnD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"listbox-button-option.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxE,KAAK,4BAA4B,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,4BAA4B,CAwBnD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/ebay-listbox-button/listbox-button.d.ts

@@ -5,7 +5,7 @@ export type ChangeEventProps = {
     selected: string[];
     wasClicked: boolean;
 };
-export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> & {
+export type EbayListboxButtonProps = Omit<ComponentProps<'button'>, 'onChange'> & {
     selected?: number;
     borderless?: boolean;
     fluid?: boolean;

package/ebay-listbox-button/listbox-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA+R7C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA2R7C,CAAA;AAED,eAAe,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.3.5",
+  "version": "7.3.6",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"