@ebay/ui-core-react 8.0.0 → 8.0.1

package/ebay-date-textbox/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),U=require("makeup-expander"),V=require("classnames"),x=require("../calendar-hBaLhOjI.js"),u=require("../textbox-DZRVQetR.js");require("../icon-D4RDqpD4.js");const G=require("../dropdown-pp-aluo7.js"),J=600,K=({className:T,inputPlaceholderText:i="YYYY-MM-DD",a11yOpenPopoverText:w="open calendar",range:o,value:g,rangeEnd:y,defaultValue:_,defaultRangeEnd:q,collapseOnSelect:M,onChange:p=()=>{},onInputChange:P=()=>{},onInputRangeEndChange:R=()=>{},...A})=>{const m=a.useRef(),[C,c]=a.useState(_||""),[L,d]=a.useState(q||""),f=u.isControlled(g)?g:C,I=u.isControlled(y)?y:L,[s,E]=a.useState(()=>x.dateArgToISO(f)),[l,S]=a.useState(()=>x.dateArgToISO(I)),[h,N]=a.useState(!1),[Y,B]=a.useState(1),{overlayStyles:F,refs:v}=G.useFloatingDropdown({open:h}),b=v.host,z=()=>{N(!0)},H=()=>{N(!1)};a.useEffect(()=>{if(!b.current)return;m.current=new U(b.current,{hostSelector:".ebay-date-textbox--main > .icon-btn",contentSelector:".date-textbox__popover",expandOnClick:!0,autoCollapse:!0}),b.current.addEventListener("expander-expand",z),b.current.addEventListener("expander-collapse",H);const e=()=>{B(document.documentElement.clientWidth<J?1:2)};return e(),window.addEventListener("resize",e),()=>{var t;(t=m.current)==null||t.destroy(),window.removeEventListener("resize",e)}},[]);const O=(e,t)=>{const r=new Date(e.target.value),n=isNaN(r.getTime())?null:x.toISO(r);t===0?(E(n),c(n||"")):(S(n),d(n||"")),o?p(e,{rangeStart:t===0?n:s,rangeEnd:t===1?n:l}):p(e,{selected:n})},W=(e,{iso:t})=>{if(E(t),c(t),o){const r=s||l,n={rangeStart:t,rangeEnd:r};s&&l?(d(""),S(null),n.rangeEnd=null):r&&(r<t?(E(r),c(r),d(t),S(t),n.rangeStart=r,n.rangeEnd=t):(E(t),c(t),d(r),S(r),n.rangeStart=t,n.rangeEnd=r)),p(e,n)}else p(e,{selected:t});M&&(m.current.expanded=!1)},D=(e,t)=>{t===0?(c(e.target.value),P(e)):(d(e.target.value),R(e))},[j,k]=Array.isArray(i)?i:[i,i];return a.createElement("span",{className:V("date-textbox",T),ref:v.setHost},o&&a.createElement(u.EbayTextbox,{value:f,placeholder:j,onInputChange:e=>D(e,0),onBlur:e=>O(e,0)}),a.createElement(u.EbayTextbox,{className:"ebay-date-textbox--main",placeholder:k,value:o?I:f,onInputChange:e=>D(e,o?1:0),onBlur:e=>O(e,o?1:0)},a.createElement(u.EbayTextboxPostfixIcon,{name:"calendar24",buttonAriaLabel:w})),a.createElement("div",{hidden:!h,ref:v.setOverlay,style:F,className:"date-textbox__popover"},a.createElement(x.EbayCalendar,{...A,range:o,interactive:!0,navigable:!0,numMonths:Y,selected:s&&l?[s,l]:s||l||void 0,onSelect:W})))};exports.EbayDateTextbox=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("makeup-expander"),G=require("classnames"),x=require("../calendar-hBaLhOjI.js"),i=require("../textbox-DZRVQetR.js");require("../icon-D4RDqpD4.js");const J=require("../dropdown-pp-aluo7.js");var w;const{default:K=c}=(w=c==null?void 0:c.default)!=null&&w.__esModule?c.default:c,Q=600,X=({className:M,inputPlaceholderText:E="YYYY-MM-DD",a11yOpenPopoverText:q="open calendar",range:o,value:y,rangeEnd:h,defaultValue:P,defaultRangeEnd:R,collapseOnSelect:A,onChange:p=()=>{},onInputChange:C=()=>{},onInputRangeEndChange:L=()=>{},..._})=>{const m=a.useRef(),[Y,d]=a.useState(P||""),[B,u]=a.useState(R||""),v=i.isControlled(y)?y:Y,I=i.isControlled(h)?h:B,[s,S]=a.useState(()=>x.dateArgToISO(v)),[l,b]=a.useState(()=>x.dateArgToISO(I)),[N,O]=a.useState(!1),[F,z]=a.useState(1),{overlayStyles:H,refs:g}=J.useFloatingDropdown({open:N}),f=g.host,W=()=>{O(!0)},k=()=>{O(!1)};a.useEffect(()=>{if(!f.current)return;m.current=new K(f.current,{hostSelector:".ebay-date-textbox--main > .icon-btn",contentSelector:".date-textbox__popover",expandOnClick:!0,autoCollapse:!0}),f.current.addEventListener("expander-expand",W),f.current.addEventListener("expander-collapse",k);const e=()=>{z(document.documentElement.clientWidth<Q?1:2)};return e(),window.addEventListener("resize",e),()=>{var t;(t=m.current)==null||t.destroy(),window.removeEventListener("resize",e)}},[]);const D=(e,t)=>{const r=new Date(e.target.value),n=isNaN(r.getTime())?null:x.toISO(r);t===0?(S(n),d(n||"")):(b(n),u(n||"")),o?p(e,{rangeStart:t===0?n:s,rangeEnd:t===1?n:l}):p(e,{selected:n})},U=(e,{iso:t})=>{if(S(t),d(t),o){const r=s||l,n={rangeStart:t,rangeEnd:r};s&&l?(u(""),b(null),n.rangeEnd=null):r&&(r<t?(S(r),d(r),u(t),b(t),n.rangeStart=r,n.rangeEnd=t):(S(t),d(t),u(r),b(r),n.rangeStart=t,n.rangeEnd=r)),p(e,n)}else p(e,{selected:t});A&&(m.current.expanded=!1)},T=(e,t)=>{t===0?(d(e.target.value),C(e)):(u(e.target.value),L(e))},[V,j]=Array.isArray(E)?E:[E,E];return a.createElement("span",{className:G("date-textbox",M),ref:g.setHost},o&&a.createElement(i.EbayTextbox,{value:v,placeholder:V,onInputChange:e=>T(e,0),onBlur:e=>D(e,0)}),a.createElement(i.EbayTextbox,{className:"ebay-date-textbox--main",placeholder:j,value:o?I:v,onInputChange:e=>T(e,o?1:0),onBlur:e=>D(e,o?1:0)},a.createElement(i.EbayTextboxPostfixIcon,{name:"calendar24",buttonAriaLabel:q})),a.createElement("div",{hidden:!N,ref:g.setOverlay,style:H,className:"date-textbox__popover"},a.createElement(x.EbayCalendar,{..._,range:o,interactive:!0,navigable:!0,numMonths:F,selected:s&&l?[s,l]:s||l||void 0,onSelect:U})))};exports.EbayDateTextbox=X;

package/ebay-listbox/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),A=require("makeup-active-descendant"),M=require("makeup-typeahead"),v=require("classnames"),k=require("../utils-C9NL3q0j.js"),H=require("../scroll-OgAngNzq.js"),B=require("../icon-D4RDqpD4.js"),I=({children:d,className:p,...l})=>e.createElement("div",{className:v("listbox__description",p),...l},d),R=({className:d,icon:p,text:l,children:E,disabled:b,tabIndex:c,selected:x,...h})=>{const r=k.filterByType(E,I),f=l||(r!=null&&r.length?"":E);return e.createElement("div",{...h,tabIndex:b?-1:c,className:v("listbox__option",d),"aria-disabled":b,"aria-selected":x,role:"option"},p?e.createElement("span",{className:"listbox__value"},p,f?e.createElement("span",null,f):null,r!=null&&r.length?r:null):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},f),r!=null&&r.length?r:null),e.createElement(B.EbayIcon,{name:"tick16"}))},F=1300,K=({name:d,className:p,disabled:l,children:E,tabIndex:b=0,listSelection:c,maxHeight:x,typeaheadTimeoutLength:h,selectClassName:r,onChange:f=()=>{},onEscape:T=()=>{},...q})=>{var C;const a=k.filterByType(E,R),_=a.findIndex(t=>t.props.selected),[u,D]=e.useState(a.findIndex(t=>t.props.selected));e.useEffect(()=>{_!==u&&D(_)},[_]);const o=e.useRef(),i=e.useRef(),m=e.useRef(),y=e.useRef(!1);function g(t,n,s){n===u||a[n].props.disabled||(D(n),f(t,{index:n,selected:[a[n].props.value],wasClicked:s}))}function N(t){switch(t.code){case"Esc":case"Escape":T();break;case"Space":case"Enter":g(t,i.current.index,!1);break}const n=m.current.getIndex(o.current.children,t.key,h||F);if(n!==-1){i.current.index=n;const s=o.current.querySelectorAll("[role=option]")[n];o.current.scrollTop=s.offsetTop-o.current.offsetHeight/2}}function O(){y.current=!0}return e.useEffect(()=>{const t=n=>{const s=parseInt(n.detail.toIndex,10),L=o.current?o.current.querySelectorAll("[role=option]")[u]:null,w=y.current;H.scroll(L),y.current&&(y.current=!1),g(n,s,w)};if(a.length&&!l){const n=o.current,s=o.current;i.current=A.createLinear(n,s,s,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:u,autoReset:null,autoScroll:c!=="auto"}),m.current=M()}return c==="auto"&&o.current.addEventListener("activeDescendantChange",t),()=>{i.current&&(i.current.reset(),i.current.destroy(),i.current=void 0),m.current&&(m.current.destroy(),m.current=void 0),o.current&&o.current.removeEventListener("activeDescendantChange",t)}},[u,l,c]),e.createElement(e.Fragment,null,e.createElement("div",{...q,tabIndex:b,ref:o,role:"listbox",onKeyDown:c!=="auto"?N:void 0,className:v("listbox__options",p),style:{maxHeight:x}},a.map((t,n)=>e.cloneElement(t,{key:t.props.value||n,...t.props,onMouseDown:c==="auto"?O:void 0,onClick:s=>{c!=="auto"&&g(s,n,!0)},selected:n===u}))),e.createElement("select",{hidden:!0,className:v("listbox__native",r),name:d,disabled:l,value:(C=a[u])==null?void 0:C.props.value,onChange:()=>{}},a.map((t,n)=>e.createElement("option",{key:t.props.value||n,value:t.props.value,disabled:t.props.disabled}))))};exports.EbayListbox=K;exports.EbayListboxOption=R;exports.EbayListboxOptionDescription=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),H=require("makeup-active-descendant"),d=require("makeup-typeahead"),x=require("classnames"),T=require("../utils-C9NL3q0j.js"),B=require("../scroll-OgAngNzq.js"),F=require("../icon-D4RDqpD4.js"),q=({children:f,className:p,...l})=>e.createElement("div",{className:x("listbox__description",p),...l},f),I=({className:f,icon:p,text:l,children:b,disabled:y,tabIndex:a,selected:h,..._})=>{const r=T.filterByType(b,q),m=l||(r!=null&&r.length?"":b);return e.createElement("div",{..._,tabIndex:y?-1:a,className:x("listbox__option",f),"aria-disabled":y,"aria-selected":h,role:"option"},p?e.createElement("span",{className:"listbox__value"},p,m?e.createElement("span",null,m):null,r!=null&&r.length?r:null):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},m),r!=null&&r.length?r:null),e.createElement(F.EbayIcon,{name:"tick16"}))};var R;const{default:K=d}=(R=d==null?void 0:d.default)!=null&&R.__esModule?d.default:d,P=1300,G=({name:f,className:p,disabled:l,children:b,tabIndex:y=0,listSelection:a,maxHeight:h,typeaheadTimeoutLength:_,selectClassName:r,onChange:m=()=>{},onEscape:N=()=>{},...O})=>{var L;const c=T.filterByType(b,I),g=c.findIndex(t=>t.props.selected),[u,C]=e.useState(c.findIndex(t=>t.props.selected));e.useEffect(()=>{g!==u&&C(g)},[g]);const o=e.useRef(),i=e.useRef(),E=e.useRef(),v=e.useRef(!1);function D(t,n,s){n===u||c[n].props.disabled||(C(n),m(t,{index:n,selected:[c[n].props.value],wasClicked:s}))}function w(t){switch(t.code){case"Esc":case"Escape":N();break;case"Space":case"Enter":D(t,i.current.index,!1);break}const n=E.current.getIndex(o.current.children,t.key,_||P);if(n!==-1){i.current.index=n;const s=o.current.querySelectorAll("[role=option]")[n];o.current.scrollTop=s.offsetTop-o.current.offsetHeight/2}}function A(){v.current=!0}return e.useEffect(()=>{const t=n=>{const s=parseInt(n.detail.toIndex,10),k=o.current?o.current.querySelectorAll("[role=option]")[u]:null,M=v.current;B.scroll(k),v.current&&(v.current=!1),D(n,s,M)};if(c.length&&!l){const n=o.current,s=o.current;i.current=H.createLinear(n,s,s,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:u,autoReset:null,autoScroll:a!=="auto"}),E.current=K()}return a==="auto"&&o.current.addEventListener("activeDescendantChange",t),()=>{i.current&&(i.current.reset(),i.current.destroy(),i.current=void 0),E.current&&(E.current.destroy(),E.current=void 0),o.current&&o.current.removeEventListener("activeDescendantChange",t)}},[u,l,a]),e.createElement(e.Fragment,null,e.createElement("div",{...O,tabIndex:y,ref:o,role:"listbox",onKeyDown:a!=="auto"?w:void 0,className:x("listbox__options",p),style:{maxHeight:h}},c.map((t,n)=>e.cloneElement(t,{key:t.props.value||n,...t.props,onMouseDown:a==="auto"?A:void 0,onClick:s=>{a!=="auto"&&D(s,n,!0)},selected:n===u}))),e.createElement("select",{hidden:!0,className:x("listbox__native",r),name:f,disabled:l,value:(L=c[u])==null?void 0:L.props.value,onChange:()=>{}},c.map((t,n)=>e.createElement("option",{key:t.props.value||n,value:t.props.value,disabled:t.props.disabled}))))};exports.EbayListbox=G;exports.EbayListboxOption=I;exports.EbayListboxOptionDescription=q;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -125,7 +125,8 @@
     "ts-jest": "^29.1.1",
     "ts-loader": "^8.0.7",
     "typescript": "4",
-    "vite": "^5.4.7"
+    "vite": "^5.4.7",
+    "vite-plugin-cjs-interop": "^2.1.6"
   },
   "resolutions": {
     "@storybook/addon-actions": "~7.5.3",