@ebay/ui-core-react 8.6.0 → 8.7.0

package/README.md

@@ -56,6 +56,7 @@ eBayUI React components
 - [x] [ebay-inline-notice](src/ebay-inline-notice)
 - [x] [ebay-lightbox-dialog](src/ebay-lightbox-dialog)
 - [ ] `ebay-line-chart`
+- [x] [ebay-list](src/ebay-list)
 - [x] [ebay-listbox-button](src/ebay-listbox-button)
 - [x] [ebay-listbox](src/ebay-listbox)
 - [x] [ebay-menu](src/ebay-menu)

package/ebay-carousel/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),q=require("classnames"),ee=require("../icon-C-bWGO-9.js"),W=require("../debounce-BQsYxxOL.js"),le=require("react-dom");require("../array.polyfill.flat-5BAolFdk.js");const ae=require("../reduced-motion-CMIhlQVx.js"),ce=require("../forwardRef-DBQKIlPy.js"),ie={prev:"chevronLeft16",next:"chevronRight16"},ue={prev:"LEFT",next:"RIGHT"},Y=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=l=>{a(l,{direction:ue[e]})};return s.createElement("button",{className:q("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(ee.EbayIcon,{className:q("icon",`icon--carousel-${e}`),focusable:!1,name:ie[e],"aria-hidden":t}))};function fe(e){const n=e.parentElement,t=n?n.firstElementChild.getBoundingClientRect().left:0,{left:r,right:a}=e.getBoundingClientRect();return{left:r-t,right:a-t}}const de=e=>getComputedStyle(e).overflowX!=="visible",I=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},he=(e,n,t)=>e.length&&Math.min(e[n].left,I(e,t))||0,me=(e,n,t,r,a,c)=>s.Children.map(e,(l,u)=>{const{style:f={}}=l.props;let i;if(t){const o=t+t%1;i=`calc(${100/o}% - ${(o-1)*c/o}px)`}const d=t?u%t===0:!0;return s.cloneElement(l,{slideWidth:r,offset:a,ref:o=>{n.current[u]=o},className:d?"carousel__snap-point":l.props.className,style:Object.assign(Object.assign({},f),{width:i||f.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:f.marginRight})})}),te=(e,n,t)=>{if(e>0){let r=e;return r%=n.length||1,r-=r%(t||1),r=Math.abs(r),r}return 0},ye=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},Ee=e=>e==="LEFT"?-1:1,ge=(e,n,t,r,a)=>{let c=n,l;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=Ee(e);l=t[c+=u]}while(l&&l.fullyVisible);if(e==="LEFT"&&!a){const u=l.right-r;do l=t[--c];while(l&&l.left>=u);c+=1}}return te(c,t,a)},pe=(e,n,t,r=1,a)=>{let c;if(e>=I(n,t)-a)c=n.length-1;else{const l=n.length;let u=0,f=Math.ceil(l/r)-1;for(;f-u>1;){const o=Math.floor((u+f)/2);e>n[o*r].left?u=o:f=o}const i=Math.abs(e-n[u*r].left),d=Math.abs(e-n[f*r].left);c=te((i>d?f:u)*r,n,r)}return c};function be({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:l,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o>n;o--)r.current[o].element.style.transform=`translateX(${-d}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o>n;o--)r.current[o].element.style.transform="";u()})},{once:!0})}else if(e==="LEFT"&&n>t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o<n;o++)r.current[o].element.style.transform=`translateX(${d}px)`;i.style.transform=`translate3d(${-d}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-d+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o<n;o++)r.current[o].element.style.transform="";u()})},{once:!0})}}const ve=(e,n)=>{let t,r,a;return function c(){const{scrollLeft:l}=e;if(a!==l){a=l,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},Se=typeof window<"u"&&"scrollBehavior"in document.body.style;function ne(e,n,t){if(Se)return e.scrollTo({left:n}),ve(e,t);let r,a,c=requestAnimationFrame(o=>{const{scrollLeft:L}=e,x=n-L,R=450;(function w(p){const b=p-o;if(b>R)return e.scrollLeft=n,l(),t();e.scrollLeft=Te(b/R)*x+L,c=requestAnimationFrame(w)})(o)});return e.addEventListener("touchstart",u),l;function l(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),d())}function u(){l(),r=e.scrollLeft,e.addEventListener("touchend",f)}function f(){d(),r===e.scrollLeft&&(a=ne(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function d(){e.removeEventListener("touchend",f)}}function Te(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Ce=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:l,className:u,itemsRef:f,children:i,onSetActiveIndex:d,onScroll:o})=>{const[L,x]=s.useState(0),[R,w]=s.useState(!1),[p,b]=s.useState(!1),m=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(R){w(!1);return}const E=m.current;de(E)?(b(!0),ne(E,r,()=>b(!1))):x(r)},[r]);const y=s.useCallback(()=>{const _=m.current.scrollLeft,E=pe(_,f.current,t,n,e);E!==a&&(w(!0),d(E),o({index:E}))},[m.current,t,a,d]),M=()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{p||y()},640)};return s.createElement("div",{className:q("carousel__viewport",{"carousel__viewport--mask":!c&&!l},u)},s.createElement("ul",{className:"carousel__list",ref:m,onScroll:M,style:{transform:`translate3d(${-L}px, 0, 0)`}},me(i,f,n,t,r,e)))},Le=le.flushSync||(e=>e()),Re=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:a,a11yNextText:c,a11yPauseText:l,a11yPlayText:u,autoplay:f,onScroll:i=()=>{},onNext:d=()=>{},onPrevious:o=()=>{},onSlide:L=()=>{},onPlay:x=()=>{},onPause:R=()=>{},className:w,children:p}=e,b=Z.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","a11yPauseText","a11yPlayText","autoplay","onScroll","onNext","onPrevious","onSlide","onPlay","onPause","className","children"]);const[m,v]=s.useState(t),[y,M]=s.useState(0),[_,E]=s.useState(0),[k,D]=s.useState(!1),F=s.useRef(null),S=s.useRef([]),O=s.Children.count(p),T=Math.floor(r)||void 0,j=O<=T,g=!!f,re=j||_===0&&!g,H=j||_===I(S.current,y)&&!g,V=()=>{if(!F.current)return;const{width:h}=F.current.getBoundingClientRect();M(h)};s.useEffect(()=>(window.addEventListener("resize",W.debounce(V,16)),()=>{window.removeEventListener("resize",W.debounce(V,16))}),[]);const[G,X]=s.useState(!1);s.useEffect(()=>{G||E(he(S.current,m,y))},[m,y,G]),s.useEffect(()=>{t>=0&&t<=O-1&&v(t)},[t]),s.useEffect(()=>{S.current=S.current.splice(0,O)},[p]),s.useEffect(()=>{const{width:h}=F.current.getBoundingClientRect();M(h)},[F.current]);const A=ae.useReducedMotion(),[N,U]=s.useState(A);s.useEffect(()=>{U(A)},[A]);const se=h=>{U(!N),N?x(h):R(h)},J=s.useRef(m);J.current=m;const K=(h,C)=>{const P=J.current,z=ge(h,P,S.current,y,C),oe=ye(P,C,z);L({slide:oe}),g&&be({direction:h,nextIndex:z,currentIndex:P,itemsRef:S,slideWidth:y,gap:n,onAnimationStart:()=>X(!0),onAnimationEnd:()=>X(!1)}),Le(()=>v(z))};s.useEffect(()=>{if(!g||N||k)return;const C=setInterval(()=>{K("RIGHT",T)},typeof f=="number"?f:4e3);return()=>clearInterval(C)},[g,N,T,k]);const Q=(h,{direction:C})=>{K(C,T),C==="LEFT"?o(h):d(h)},$=()=>D(!0),B=()=>D(!1);return s.createElement("div",Object.assign({className:q("carousel",w,{"carousel--slides":T,"carousel--peek":T%1===0,carousel__autoplay:g})},b),s.createElement("div",{ref:F,className:"carousel__container",onFocusCapture:$,onMouseEnter:$,onTouchStartCapture:$,onBlurCapture:B,onMouseLeave:B,onTouchEndCapture:B},s.createElement(Y,{label:a,type:"prev",disabled:re,onClick:Q}),s.createElement(Ce,{itemsRef:S,offset:_,gap:n,itemsPerSlide:T,nextControlDisabled:H,isAutoplayEnabled:g,activeIndex:m,onScroll:i,onSetActiveIndex:v,slideWidth:y},p),s.createElement(Y,{type:"next",label:c,disabled:H,onClick:Q}),g?s.createElement("button",{className:"carousel__playback",type:"button",onClick:se,"aria-label":N?u:l},s.createElement(ee.EbayIcon,{name:N?"play24":"pause24"})):null))},we=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:a}=e,c=Z.__rest(e,["slideWidth","offset","forwardedRef","children"]);const l=s.useRef(null),[u,f]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!l.current)return;const{left:i,right:d}=fe(l.current),o=i===void 0||i-t>=-.01&&d-t<=n+.01;return f(o),{element:l.current,left:i,right:d,fullyVisible:o}},[n,t]),s.createElement("li",Object.assign({},c,{ref:l,"aria-hidden":!u}),a)},_e=ce.withForwardRef(we);exports.EbayCarousel=Re;exports.EbayCarouselItem=_e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),q=require("classnames"),ee=require("../icon-C-bWGO-9.js"),W=require("../debounce-BQsYxxOL.js"),le=require("react-dom");require("../array.polyfill.flat-5BAolFdk.js");const ae=require("../reduced-motion-CMIhlQVx.js"),ce=require("../forwardRef-DBQKIlPy.js"),ie={prev:"chevronLeft16",next:"chevronRight16"},ue={prev:"LEFT",next:"RIGHT"},Y=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=l=>{a(l,{direction:ue[e]})};return s.createElement("button",{className:q("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(ee.EbayIcon,{className:q("icon",`icon--carousel-${e}`),focusable:!1,name:ie[e],"aria-hidden":t}))};function fe(e){const n=e.parentElement,t=n?n.firstElementChild.getBoundingClientRect().left:0,{left:r,right:a}=e.getBoundingClientRect();return{left:r-t,right:a-t}}const de=e=>getComputedStyle(e).overflowX!=="visible",I=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},he=(e,n,t)=>e.length&&Math.min(e[n].left,I(e,t))||0,me=(e,n,t,r,a,c)=>s.Children.map(e,(l,u)=>{const{style:f={}}=l.props;let i;if(t){const o=t+t%1;i=`calc(${100/o}% - ${(o-1)*c/o}px)`}const d=t?u%t===0:!0;return s.cloneElement(l,{slideWidth:r,offset:a,ref:o=>{n.current[u]=o},className:d?"carousel__snap-point":l.props.className,style:Object.assign(Object.assign({},f),{width:i||f.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:f.marginRight})})}),te=(e,n,t)=>{if(e>0){let r=e;return r%=n.length||1,r-=r%(t||1),r=Math.abs(r),r}return 0},ye=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},Ee=e=>e==="LEFT"?-1:1,ge=(e,n,t,r,a)=>{let c=n,l;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=Ee(e);l=t[c+=u]}while(l&&l.fullyVisible);if(e==="LEFT"&&!a){const u=l.right-r;do l=t[--c];while(l&&l.left>=u);c+=1}}return te(c,t,a)},pe=(e,n,t,r=1,a)=>{let c;if(e>=I(n,t)-a)c=n.length-1;else{const l=n.length;let u=0,f=Math.ceil(l/r)-1;for(;f-u>1;){const o=Math.floor((u+f)/2);e>n[o*r].left?u=o:f=o}const i=Math.abs(e-n[u*r].left),d=Math.abs(e-n[f*r].left);c=te((i>d?f:u)*r,n,r)}return c};function be({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:l,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o>n;o--)r.current[o].element.style.transform=`translateX(${-d}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o>n;o--)r.current[o].element.style.transform="";u()})},{once:!0})}else if(e==="LEFT"&&n>t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o<n;o++)r.current[o].element.style.transform=`translateX(${d}px)`;i.style.transform=`translate3d(${-d}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-d+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o<n;o++)r.current[o].element.style.transform="";u()})},{once:!0})}}const ve=(e,n)=>{let t,r,a;return function c(){const{scrollLeft:l}=e;if(a!==l){a=l,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},Se=typeof window<"u"&&"scrollBehavior"in document.body.style;function ne(e,n,t){if(Se)return e.scrollTo({left:n}),ve(e,t);let r,a,c=requestAnimationFrame(o=>{const{scrollLeft:L}=e,x=n-L,R=450;(function w(p){const b=p-o;if(b>R)return e.scrollLeft=n,l(),t();e.scrollLeft=Te(b/R)*x+L,c=requestAnimationFrame(w)})(o)});return e.addEventListener("touchstart",u),l;function l(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),d())}function u(){l(),r=e.scrollLeft,e.addEventListener("touchend",f)}function f(){d(),r===e.scrollLeft&&(a=ne(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function d(){e.removeEventListener("touchend",f)}}function Te(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Ce=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:l,className:u,itemsRef:f,children:i,onSetActiveIndex:d,onScroll:o})=>{const[L,x]=s.useState(0),[R,w]=s.useState(!1),[p,b]=s.useState(!1),m=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(R){w(!1);return}const E=m.current;if(de(E))return b(!0),ne(E,r,()=>b(!1));x(r)},[r]);const y=s.useCallback(()=>{const _=m.current.scrollLeft,E=pe(_,f.current,t,n,e);E!==a&&(w(!0),d(E),o({index:E}))},[m.current,t,a,d]),M=()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{p||y()},640)};return s.createElement("div",{className:q("carousel__viewport",{"carousel__viewport--mask":!c&&!l},u)},s.createElement("ul",{className:"carousel__list",ref:m,onScroll:M,style:{transform:`translate3d(${-L}px, 0, 0)`}},me(i,f,n,t,r,e)))},Le=le.flushSync||(e=>e()),Re=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:a,a11yNextText:c,a11yPauseText:l,a11yPlayText:u,autoplay:f,onScroll:i=()=>{},onNext:d=()=>{},onPrevious:o=()=>{},onSlide:L=()=>{},onPlay:x=()=>{},onPause:R=()=>{},className:w,children:p}=e,b=Z.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","a11yPauseText","a11yPlayText","autoplay","onScroll","onNext","onPrevious","onSlide","onPlay","onPause","className","children"]);const[m,v]=s.useState(t),[y,M]=s.useState(0),[_,E]=s.useState(0),[k,D]=s.useState(!1),F=s.useRef(null),S=s.useRef([]),O=s.Children.count(p),T=Math.floor(r)||void 0,j=O<=T,g=!!f,re=j||_===0&&!g,H=j||_===I(S.current,y)&&!g,V=()=>{if(!F.current)return;const{width:h}=F.current.getBoundingClientRect();M(h)};s.useEffect(()=>(window.addEventListener("resize",W.debounce(V,16)),()=>{window.removeEventListener("resize",W.debounce(V,16))}),[]);const[G,X]=s.useState(!1);s.useEffect(()=>{G||E(he(S.current,m,y))},[m,y,G]),s.useEffect(()=>{t>=0&&t<=O-1&&v(t)},[t]),s.useEffect(()=>{S.current=S.current.splice(0,O)},[p]),s.useEffect(()=>{const{width:h}=F.current.getBoundingClientRect();M(h)},[F.current]);const A=ae.useReducedMotion(),[N,U]=s.useState(A);s.useEffect(()=>{U(A)},[A]);const se=h=>{U(!N),N?x(h):R(h)},J=s.useRef(m);J.current=m;const K=(h,C)=>{const P=J.current,z=ge(h,P,S.current,y,C),oe=ye(P,C,z);L({slide:oe}),g&&be({direction:h,nextIndex:z,currentIndex:P,itemsRef:S,slideWidth:y,gap:n,onAnimationStart:()=>X(!0),onAnimationEnd:()=>X(!1)}),Le(()=>v(z))};s.useEffect(()=>{if(!g||N||k)return;const C=setInterval(()=>{K("RIGHT",T)},typeof f=="number"?f:4e3);return()=>clearInterval(C)},[g,N,T,k]);const Q=(h,{direction:C})=>{K(C,T),C==="LEFT"?o(h):d(h)},$=()=>D(!0),B=()=>D(!1);return s.createElement("div",Object.assign({className:q("carousel",w,{"carousel--slides":T,"carousel--peek":T%1===0,carousel__autoplay:g})},b),s.createElement("div",{ref:F,className:"carousel__container",onFocusCapture:$,onMouseEnter:$,onTouchStartCapture:$,onBlurCapture:B,onMouseLeave:B,onTouchEndCapture:B},s.createElement(Y,{label:a,type:"prev",disabled:re,onClick:Q}),s.createElement(Ce,{itemsRef:S,offset:_,gap:n,itemsPerSlide:T,nextControlDisabled:H,isAutoplayEnabled:g,activeIndex:m,onScroll:i,onSetActiveIndex:v,slideWidth:y},p),s.createElement(Y,{type:"next",label:c,disabled:H,onClick:Q}),g?s.createElement("button",{className:"carousel__playback",type:"button",onClick:se,"aria-label":N?u:l},s.createElement(ee.EbayIcon,{name:N?"play24":"pause24"})):null))},we=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:a}=e,c=Z.__rest(e,["slideWidth","offset","forwardedRef","children"]);const l=s.useRef(null),[u,f]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!l.current)return;const{left:i,right:d}=fe(l.current),o=i===void 0||i-t>=-.01&&d-t<=n+.01;return f(o),{element:l.current,left:i,right:d,fullyVisible:o}},[n,t]),s.createElement("li",Object.assign({},c,{ref:l,"aria-hidden":!u}),a)},_e=ce.withForwardRef(we);exports.EbayCarousel=Re;exports.EbayCarouselItem=_e;

package/ebay-list/README.md

@@ -0,0 +1,149 @@
+# EbayList
+
+A versatile list component for displaying items with optional leading and trailing content.
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-list--docs)
+
+## Usage
+
+### Import JS
+
+```jsx
+import { EbayList, EbayListItem, EbayListItemLeading, EbayListItemTrailing } from "@ebay/ui-core-react/ebay-list";
+```
+
+### Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/list";
+```
+
+### If tokens haven't been added to the project at a higher level, make sure to import
+
+```jsx harmony
+import "@ebay/skin/tokens";
+```
+
+### Or import styles using SCSS/CSS
+
+```jsx harmony
+import "@ebay/skin/list.css";
+```
+
+## Examples
+
+### Basic List
+
+```jsx
+<EbayList>
+    <EbayListItem>Item 1</EbayListItem>
+    <EbayListItem>Item 2</EbayListItem>
+    <EbayListItem>Item 3</EbayListItem>
+</EbayList>
+```
+
+### List with Leading and Trailing Content (Method 1 - Using Components)
+
+```jsx
+<EbayList>
+    <EbayListItem>
+        <EbayListItemLeading>
+            <EbayIcon name="folder16" />
+        </EbayListItemLeading>
+        Item 1
+    </EbayListItem>
+    <EbayListItem>
+        <EbayListItemLeading>
+            <EbayIcon name="lamp16" />
+        </EbayListItemLeading>
+        Item 2
+        <EbayListItemTrailing>
+            <EbayIcon name="chevronRight16" />
+        </EbayListItemTrailing>
+    </EbayListItem>
+</EbayList>
+```
+
+### Interactive List Items
+
+```jsx
+<EbayList onButtonClick={(event, { index }) => console.log(`Button ${index} clicked`)}>
+    <EbayListItem as="button">Clickable Button Item</EbayListItem>
+    <EbayListItem as="a" href="https://www.ebay.com">
+        Link Item
+        <EbayListItemTrailing>
+            <EbayIcon name="chevronRight16" />
+        </EbayListItemTrailing>
+    </EbayListItem>
+    <EbayListItem id="switch-item">
+        Item with Switch
+        <EbayListItemTrailing>
+            <EbaySwitch aria-labelledby="switch-item" />
+        </EbayListItemTrailing>
+    </EbayListItem>
+</EbayList>
+```
+
+### List with Separators
+
+```jsx
+<EbayList>
+    <EbayListItem>Item 1</EbayListItem>
+    <EbayListItem separator />
+    <EbayListItem>Item 2</EbayListItem>
+    <EbayListItem>Item 3</EbayListItem>
+    <EbayListItem separator />
+    <EbayListItem>Item 4</EbayListItem>
+</EbayList>
+```
+
+## Components
+
+### EbayList
+
+The main container component that wraps a list of EbayListItem components.
+
+### EbayListItem
+
+Individual list items that can be rendered as different elements (div, button, a) and can contain leading and trailing content.
+
+### EbayListItemLeading
+
+Component for adding leading content to a list item.
+
+### EbayListItemTrailing
+
+Component for adding trailing content to a list item.
+
+## Attributes
+
+### EbayList Attributes
+
+| Name            | Type     | Required | Description                                                                                   |
+| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------- |
+| `onButtonClick` | Function | No       | Called when a list item with `as="button"` is clicked. Callback receives `(event, { index })` |
+| `className`     | String   | No       | Custom class name                                                                             |
+| `style`         | Object   | No       | Custom styles                                                                                 |
+
+### EbayListItem Attributes
+
+| Name        | Type     | Required | Description                                                                          |
+| ----------- | -------- | -------- | ------------------------------------------------------------------------------------ |
+| `as`        | String   | No       | The element to render the item as. Can be 'div', 'button', or 'a'. Default is 'div'. |
+| `separator` | Boolean  | No       | If true, will render the current item as a separator                                 |
+| `onClick`   | Function | No       | Called when the list item is clicked                                                 |
+| `className` | String   | No       | Custom class name                                                                    |
+
+### EbayListItemLeading Attributes
+
+| Name       | Type      | Required | Description                               |
+| ---------- | --------- | -------- | ----------------------------------------- |
+| `children` | ReactNode | Yes      | Content to display in the leading section |
+
+### EbayListItemTrailing Attributes
+
+| Name       | Type      | Required | Description                                |
+| ---------- | --------- | -------- | ------------------------------------------ |
+| `children` | ReactNode | Yes      | Content to display in the trailing section |

package/ebay-list/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbayList, type EbayListProps } from "./list";
+export { default as EbayListItem, type EbayListItemProps } from "./list-item";
+export { default as EbayListItemLeading } from "./list-item-leading";
+export { default as EbayListItemTrailing } from "./list-item-trailing";
+//# sourceMappingURL=index.d.ts.map

package/ebay-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/ebay-list/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),p=require("classnames"),s=require("../utils-C9NL3q0j.js"),u=({children:t})=>e.createElement("div",{className:"list__leading"},t),E=({children:t})=>e.createElement("div",{className:"list__trailing"},t),g=t=>{var{className:i,as:a="div",separator:r,children:n,onClick:c}=t,o=C.__rest(t,["className","as","separator","children","onClick"]);if(r)return e.createElement("hr",null);const l=s.findComponent(n,u),m=s.findComponent(n,E),d=s.excludeComponent(s.excludeComponent(n,u),E);return e.createElement("li",null,e.createElement(a,Object.assign({className:p("list__body",i),onClick:c},o),l,e.createElement("div",{className:"list__body"},d),m))},L=t=>{var{className:i,style:a,children:r,onButtonClick:n=()=>{}}=t,c=C.__rest(t,["className","style","children","onButtonClick"]);const o=s.filterByType(r,g);return e.createElement("div",Object.assign({className:p("list",i),style:a},c),e.createElement("ul",null,e.Children.map(o,(l,m)=>{const{as:d,onClick:b}=l.props,_=d==="button"?{onClick:y=>{b&&b(y),n(y,{index:m})}}:{};return e.cloneElement(l,_)})))};exports.EbayList=L;exports.EbayListItem=g;exports.EbayListItemLeading=u;exports.EbayListItemTrailing=E;

package/ebay-list/list-item-leading.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+type EbayListItemLeadingProps = {
+    children: ReactNode;
+};
+export declare const EbayListItemLeading: React.FC<EbayListItemLeadingProps>;
+export default EbayListItemLeading;
+//# sourceMappingURL=list-item-leading.d.ts.map

package/ebay-list/list-item-leading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-leading.d.ts","sourceRoot":"","sources":["../../src/ebay-list/list-item-leading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,KAAK,wBAAwB,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAElE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/ebay-list/list-item-trailing.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+type EbayListItemTrailingProps = {
+    children: ReactNode;
+};
+declare const EbayListItemTrailing: React.FC<EbayListItemTrailingProps>;
+export default EbayListItemTrailing;
+//# sourceMappingURL=list-item-trailing.d.ts.map

package/ebay-list/list-item-trailing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-trailing.d.ts","sourceRoot":"","sources":["../../src/ebay-list/list-item-trailing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,KAAK,yBAAyB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAE7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/ebay-list/list-item.d.ts

@@ -0,0 +1,11 @@
+import React, { ElementType, FC, ReactNode } from "react";
+export type EbayListItemProps = {
+    as?: ElementType;
+    separator?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    children?: ReactNode;
+} & React.HTMLAttributes<HTMLElement>;
+declare const EbayListItem: FC<EbayListItemProps>;
+export default EbayListItem;
+//# sourceMappingURL=list-item.d.ts.map

package/ebay-list/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/ebay-list/list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1D,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAEtC,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA0BvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/ebay-list/list.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, FC } from "react";
+import { ListItemClickHandler } from "./types";
+export type EbayListProps = ComponentProps<"div"> & {
+    onButtonClick?: ListItemClickHandler;
+};
+declare const EbayList: FC<EbayListProps>;
+export default EbayList;
+//# sourceMappingURL=list.d.ts.map

package/ebay-list/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/ebay-list/list.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA4B/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/ebay-list/types.d.ts

@@ -0,0 +1,6 @@
+import { EbayMouseEventHandler } from "../events";
+export type ListItemClickEventData = {
+    index: number;
+};
+export type ListItemClickHandler = EbayMouseEventHandler<HTMLButtonElement, ListItemClickEventData>;
+//# sourceMappingURL=types.d.ts.map

package/ebay-list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,sBAAsB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/ui-core-react",
-    "version": "8.6.0",
+    "version": "8.7.0",
     "description": "Skin components build off React",
     "keywords": [
         "React",