@ebay/ui-core-react 9.4.0 → 9.6.0

package/ebay-item-tile-group/README.md

@@ -1,74 +1,5 @@
-# EbayItemTile
+# EbayItemTileGroup
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/layout-ebay-item-tile-group--docs)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayItemTileGroup } from "@ebay/ui-core-react/ebay-item-tile-group";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/item-tile-group";
-```
-
-### Or import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/item-tile-group.css";
-```
-
-```jsx harmony
-<EbayItemTileGroup onAction={handleAction} layout="list">
-    <EbayItemTile
-        file={{
-            name: 'file-name.jpg',
-            type: 'image',
-            src: 'https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg'
-        }}
-    >
-        <EbayItemTileAction aria-label="action label" icon={<EbayIconHeart16 />} />
-        <EbayItemTileSupertitle>
-            <EbaySignal status="time-sensitive">Time Sensitive</EbaySignal>
-        </EbayItemTileSupertitle>
-        <EbayItemTileTitle href="/collection">
-            Apple iPhone 11 Pro Max{' '}
-        </EbayItemTileTitle>
-        <EbayItemTileSubtitle>256GB Space Gray</EbayItemTileSubtitle>
-        <EbayItemTileDescription className="price">
-            $29.99
-        </EbayItemTileDescription>
-        <EbayItemTileDescription as="div">
-            <a href="https://ebay.com">Buy it now</a>
-        </EbayItemTileDescription>
-        <EbayItemTileDescription>
-            Free shipping
-        </EbayItemTileDescription>
-    </EbayItemTile>
-<EbayItemTileGroup {...args}>
-```
-
-## Attributes
-
-| Name | Type | Required | Description | Data |
-| ---- | ---- | -------- | ----------- | ---- |
-
-| `layout` | `String` | No | layout for item tile. Default: `gallery` | `gallery` `list` |
-
-## Events
-
-| Name       | Type               | Required | Description                                  | Data    |
-| ---------- | ------------------ | -------- | -------------------------------------------- | ------- |
-| `onAction` | `EbayEventHandler` | No       | Triggered when the action button is clicked. | `event` |
-
-## Component
-
-| Name           | Type           | Required | Description                                       | Data |
-| -------------- | -------------- | -------- | ------------------------------------------------- | ---- |
-| `EbayItemTile` | `EbayItemTile` | Yest     | Tile component that will be rendered in the group |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/layout-ebay-item-tile-group--docs)

package/ebay-item-tile-group/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),y=require("classnames"),p=require("../utils-C9NL3q0j.js"),b=require("../item-tile-BYQuvbj4.js"),d=t=>{var{layout:i,className:n,onAction:l,children:s}=t,o=m.__rest(t,["layout","className","onAction","children"]);const c=p.filterByType(s,b.EbayItemTile);return e.createElement("div",Object.assign({className:y("layout-grid item-tile-group",n,{"item-tile-group--list-view":i==="list"})},o),e.createElement("ul",null,c.map((a,r)=>e.createElement("li",{key:r},e.cloneElement(a,{layout:i,onAction:u=>l&&l(u,{index:r})})))))};exports.EbayItemTileGroup=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),y=require("classnames"),p=require("../utils-C9NL3q0j.js"),b=require("../item-tile-C8Y95yvJ.js"),d=t=>{var{layout:i,className:n,onAction:l,children:s}=t,o=m.__rest(t,["layout","className","onAction","children"]);const c=p.filterByType(s,b.EbayItemTile);return e.createElement("div",Object.assign({className:y("layout-grid item-tile-group",n,{"item-tile-group--list-view":i==="list"})},o),e.createElement("ul",null,c.map((a,r)=>e.createElement("li",{key:r},e.cloneElement(a,{layout:i,onAction:u=>l&&l(u,{index:r})})))))};exports.EbayItemTileGroup=d;

package/ebay-lightbox-dialog/README.md

@@ -1,46 +1,5 @@
 # EbayLightboxDialog
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-lightbox-dialog--default)
-
-## Usage
-
-```jsx
-<EbayLightboxDialog open a11yClosetext="Close">
-    <EbayDialogHeader>Heading</EbayDialogHeader>
-    <p>Body content</p>
-    <EbayDialogFooter>Footer</EbayDialogFooter>
-</EbayLightboxDialog>
-```
-
-## Attributes
-
-| Name                | Type    | Stateful | Required | Description                                                                                                                                                                                                               |
-| ------------------- | ------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `open`              | Boolean | Yes      | No       | Whether dialog is open.                                                                                                                                                                                                   |
-| `mode`              | String  | No       | No       | Can be `default`, `mini`.                                                                                                                                                                                                 |
-| `focus`             | String  | No       | No       | An id for an element which will receive focus when the drawer opens (defaults to close button).                                                                                                                           |
-| `a11yCloseText`     | String  | No       | Yes      | A11y text for close button and mask.                                                                                                                                                                                      |
-| `animated`          | Boolean | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM                                                                                                                              |
-| `bannerImgSrc`      | String  | No       | No       | Image source for the expressive variant                                                                                                                                                                                   |
-| `bannerImgPosition` | String  | No       | No       | Position of the image within the given bounds using the CSS `background-position` property. Options include [keywords, lengths, and edge distances](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) |
-
-## Events
-
-| Event     | Data | Description                      |
-| --------- | ---- | -------------------------------- |
-| `onOpen`  |      | Trigggered when dialog is opened |
-| `onClose` |      | Triggered when dialog is closed  |
-
-## EbayDialogHeader
-
-Will render a header content for the dialog. Will always render the header element even if this is not present
-
-## EbayDialogFooter
-
-Will render the footer content for the dialog. If not present then will not have any footer.
-
-## EbayDialogPreviousButton
-
-Will render the previous icon button. The icon can be overwritten with the `icon` attribute
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/dialogs-ebay-lightbox-dialog--docs)

package/ebay-lightbox-dialog/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../lightbox-dialog-DA3hBPt_.js");exports.EbayLightboxDialog=o.EbayLightboxDialog;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../lightbox-dialog-BX8koyJg.js");exports.EbayLightboxDialog=o.EbayLightboxDialog;

package/ebay-line-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayLineChart } from "./line-chart";
+export type { EbayLineChartProps, LineChartSeriesItem } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/ebay-line-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-line-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,cAAc,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/ebay-line-chart/index.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("../tslib.es6-BW4cJBUu.js"),n=require("react"),X=require("classnames"),P=require("@highcharts/react"),S=require("highcharts");require("highcharts/modules/accessibility");require("highcharts/modules/pattern-fill");const z=require("../legend-CY_MXova.js"),r=require("../shared-DrsztGqS.js"),q=require("../debounce-BQsYxxOL.js");function K({date:s,points:l,seriesLength:o}){const e=l.map(i=>{var t,a;if(i.tooltip)return r.escapeHtml(i.tooltip);if(o){const u=r.escapeHtml(i.series.name),d=r.escapeHtml((t=i.label)!==null&&t!==void 0?t:"");return`<div style="display:flex"><span>${u}</span><span style="margin-left:16px">${d}</span></div>`}return r.escapeHtml((a=i.label)!==null&&a!==void 0?a:"")}).join("");return`<b>${r.escapeHtml(s)}</b><br>${e}`}z.ebayLegend(S);const Z=`
+    .ebay-line-chart .highcharts-point { opacity: 0; }
+    .ebay-line-chart .ebay-line-chart__marker--visible { opacity: 1; }
+    .ebay-line-chart .highcharts-legend-item .highcharts-point { opacity: 1; stroke-width: 0; }
+    .ebay-line-chart .highcharts-legend-item .highcharts-graph { display: none; }
+    .dark .ebay-line-chart .highcharts-halo { fill-opacity: 0.8; }
+`,T=6,w=["circle","square","triangle","triangle-down","diamond"];function G(s){return(Array.isArray(s)?s:[s]).map((o,e)=>Object.assign(Object.assign({},o),{marker:Object.assign(Object.assign({},o.marker),{symbol:w[e%w.length]})}))}function J(s,l){var o,e,i,t,a,u;const d=[r.lineChartPrimaryColor,r.lineChartSecondaryColor,r.lineChartTertiaryColor,r.lineChartQueternaryColor,r.lineChartQuinaryColor];if(l){const f=l.toLowerCase(),g=(i=(e=(o=s[0])===null||o===void 0?void 0:o.data[0])===null||e===void 0?void 0:e.y)!==null&&i!==void 0?i:0,v=(t=s[0])===null||t===void 0?void 0:t.data,_=(u=(a=v?.[v.length-1])===null||a===void 0?void 0:a.y)!==null&&u!==void 0?u:0,p=g<_;f==="positive"||f!=="negative"&&f!=="neutral"&&p?d[0]=r.trendPositiveColor:(f==="negative"||f!=="neutral"&&!p)&&(d[0]=r.trendNegativeColor)}return d}function U(s){const l=s();l&&(l.series.forEach(o=>{o.data.forEach(e=>{!e.onTick&&e.className!==null?e.update({className:void 0,marker:{enabled:!1}},!1,!1):e.onTick&&e.className===null&&e.update({className:"ebay-line-chart__marker--visible",onTick:e.onTick,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1)})}),l.redraw())}function V(s,l){const o=s();if(!o)return;const e=l.target.x;o.series.forEach(i=>{i.data.forEach(t=>{t.x===e?t.update({className:"ebay-line-chart__marker--visible",onTick:t.onTick,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1):!t.onTick&&t.className!==null&&t.update({className:void 0,onTick:t.onTick,marker:{enabled:!1}},!1,!1)})}),o.redraw()}function R(s,l,o,e){if(!s)return;const i=l();i&&(e.current=Object.keys(i.axes[0].ticks).map(t=>parseInt(t,10)),o.current!==e.current.length&&(o.current=e.current.length,i.series.forEach(t=>{t.data.forEach(a=>{a.className!==null&&a.update({className:void 0,onTick:!1,marker:{enabled:!1}},!1,!1)})}),i.series.forEach(t=>{t.data.forEach(a=>{e.current.forEach(u=>{u===a.x&&a.className===null&&a.update({className:"ebay-line-chart__marker--visible",onTick:!0,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1)})})}),i.redraw()))}const ee=s=>{var{title:l,description:o,series:e,xAxisLabelFormat:i,xAxisPositioner:t,yAxisLabels:a,yAxisPositioner:u,plotPoints:d,renderTooltipOutside:f=!0,trend:g,className:v}=s,_=Q.__rest(s,["title","description","series","xAxisLabelFormat","xAxisPositioner","yAxisLabels","yAxisPositioner","plotPoints","renderTooltipOutside","trend","className"]);const p=n.useRef(null),k=()=>{var c,h;return(h=(c=p.current)===null||c===void 0?void 0:c.chart)!==null&&h!==void 0?h:null},N=n.useRef(-1),L=n.useRef([]),b=n.useMemo(()=>G(e),[e]),H=n.useMemo(()=>J(b,g),[b,g]),A=n.useRef(q.debounce(()=>U(k),80)),j=n.useRef(q.debounce(c=>V(k,c),85));n.useEffect(()=>{R(d,k,N,L)},[]);const F=n.useMemo(()=>{var c,h,x;const M=b.length>1;let C=0,E=0;for(const m of b)for(const y of m.data)E=Math.max((c=y.y)!==null&&c!==void 0?c:0,E);const W={type:"datetime",labels:{format:i||"{value:%b %e}",align:"center",style:{color:r.labelsColor}},tickWidth:0,tickPositioner:t,crosshair:{dashStyle:"Solid"}},I={gridLineColor:r.gridColor,opposite:!0,labels:{format:a?void 0:"${text}",formatter:a?function(){var m;return this.isFirst&&(C=-1),C=C+1,(m=a[C])!==null&&m!==void 0?m:""}:void 0,style:{color:r.labelsColor}},max:E,title:{enabled:!1},offset:0,tickPositioner:u},Y={enabled:M,symbolRadius:6,symbolWidth:12,symbolHeight:12,itemStyle:{color:r.legendColor},itemHiddenStyle:{color:r.legendInactiveColor},itemHoverStyle:{color:r.legendHoverColor}},$={formatter:function(){var m,y,O;return K({date:S.dateFormat("%b %e, %Y",(O=(y=(m=this.points)===null||m===void 0?void 0:m[0])===null||y===void 0?void 0:y.x)!==null&&O!==void 0?O:0,!1),points:this.points,seriesLength:M})},useHTML:!0,backgroundColor:r.tooltipBackgroundColor,borderWidth:0,borderRadius:10,outside:f,shadow:!1,shared:!0,style:{filter:r.tooltipShadows,fontSize:"12px"}},B=(x=(h=b[0])===null||h===void 0?void 0:h.data[0])===null||x===void 0?void 0:x.x,D={line:{events:{mouseOut:A.current}},series:{description:o,lineWidth:3,pointStart:B,point:{events:{mouseOver:j.current,mouseOut:A.current}}}};return{chart:{type:"line",backgroundColor:r.backgroundColor,style:{fontFamily:r.chartFontFamily},events:{redraw:()=>R(d,k,N,L)}},colors:H,xAxis:W,yAxis:I,legend:Y,tooltip:$,plotOptions:D,credits:{enabled:!1}}},[b,H,i,t,a,u,o,f,d]);return n.createElement(n.Fragment,null,n.createElement("style",null,Z),n.createElement("div",Object.assign({},_,{className:X("ebay-line-chart",v)}),n.createElement(P.Chart,{ref:p,highcharts:S,title:l,options:F},b.map((c,h)=>n.createElement(P.Series,{key:c.name||h,type:"line",data:c.data,options:{type:"line",name:c.name}})))))};exports.EbayLineChart=ee;

package/ebay-line-chart/line-chart-tooltip.d.ts

@@ -0,0 +1,13 @@
+import type Highcharts from "highcharts";
+export type LineChartPoint = Highcharts.Point & {
+    tooltip?: string;
+    label?: string;
+};
+interface LineChartTooltipOptions {
+    date: string;
+    points: LineChartPoint[];
+    seriesLength: boolean;
+}
+export declare function lineChartTooltipHtml({ date, points, seriesLength }: LineChartTooltipOptions): string;
+export {};
+//# sourceMappingURL=line-chart-tooltip.d.ts.map

package/ebay-line-chart/line-chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart-tooltip.d.ts","sourceRoot":"","sources":["../../src/ebay-line-chart/line-chart-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;AAGzC,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErF,UAAU,uBAAuB;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,uBAAuB,GAAG,MAAM,CAgBpG"}

package/ebay-line-chart/line-chart.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import type { EbayLineChartProps } from "./types";
+declare const EbayLineChart: FC<EbayLineChartProps>;
+export default EbayLineChart;
+//# sourceMappingURL=line-chart.d.ts.map

package/ebay-line-chart/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../src/ebay-line-chart/line-chart.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAgD,MAAM,OAAO,CAAC;AA0BhF,OAAO,KAAK,EAAE,kBAAkB,EAAuB,MAAM,SAAS,CAAC;AAkKvE,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4KzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/ebay-line-chart/types.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+import type Highcharts from "highcharts";
+export interface LineChartSeriesItem {
+    data: Highcharts.PointOptionsObject[];
+    type?: "line";
+    marker?: Highcharts.PointMarkerOptionsObject;
+    name?: string;
+}
+export type EbayLineChartProps = Omit<ComponentProps<"div">, "title"> & {
+    title?: string;
+    description?: string;
+    series: LineChartSeriesItem | LineChartSeriesItem[];
+    xAxisLabelFormat?: string;
+    xAxisPositioner?: Highcharts.XAxisOptions["tickPositioner"];
+    yAxisLabels?: string[];
+    yAxisPositioner?: Highcharts.YAxisOptions["tickPositioner"];
+    plotPoints?: boolean;
+    renderTooltipOutside?: boolean;
+    trend?: "positive" | "negative" | "neutral";
+};
+//# sourceMappingURL=types.d.ts.map

package/ebay-line-chart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-line-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,UAAU,CAAC,kBAAkB,EAAE,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,UAAU,CAAC,wBAAwB,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;CAC/C,CAAC"}

package/ebay-list/README.md

@@ -1,149 +1,5 @@
 # EbayList
 
-A versatile list component for displaying items with optional leading and trailing content.
+## Documentation
 
-## 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>
-            <EbayIconFolder16 />
-        </EbayListItemLeading>
-        Item 1
-    </EbayListItem>
-    <EbayListItem>
-        <EbayListItemLeading>
-            <EbayIconLamp16 />
-        </EbayListItemLeading>
-        Item 2
-        <EbayListItemTrailing>
-            <EbayIconChevronRight16 />
-        </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>
-            <EbayIconChevronRight16 />
-        </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 |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-list--docs)

package/ebay-list/index.js

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-BW4cJBUu.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-listbox/README.md

@@ -1,91 +1,5 @@
 # EbayListbox
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-listbox--docs)
-
-## Import JS
-
-```jsx harmony
-import { EbayListbox, EbayListboxOption, EbayListboxOptionDescription } from "@ebay/ui-core-react/ebay-listbox";
-```
-
-## Import following styles from SKIN
-
-```js
-import "@ebay/skin/listbox";
-```
-
-## Import styles using SCSS/CSS
-
-```js
-import "@ebay/skin/listbox.css";
-```
-
-## Usage
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1" />
-    <EbayListboxOption value="BB" text="Option 2" />
-    <EbayListboxOption value="CC" text="Option 3" />
-</EbayListbox>
-```
-
-## Attributes
-
-### EbayListbox
-
-| Name                     | Type    | Required | Description                                                                                                                                                   |
-| ------------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`                   | string  | No       | Used for the name attribute of the native `<select>`.                                                                                                         |
-| `disabled`               | boolean | No       | Set to true if the field is disabled.                                                                                                                         |
-| `listSelection`          | string  | No       | If `manual`, the user will need to press enter to select an item using the keyboard. Otherwise, `auto` will automatically select as the user presses up/down. |
-| `typeaheadTimeoutLength` | number  | No       | Timeout length to pass to typeahead.                                                                                                                          |
-| `maxHeight`              | string  | No       | Example: 100px, 200px, 10rem.                                                                                                                                 |
-| `a11ySelectedText`       | string  | No       | Accessible text for selected option. Default is "selected".                                                                                                   |
-
-### EbayListboxOption
-
-| Name       | Type         | Required | Description                                            |
-| ---------- | ------------ | -------- | ------------------------------------------------------ |
-| `icon`     | ReactElement | No       | An optional icon to display alongside the option text. |
-| `text`     | string       | No       | The text to display for the option.                    |
-| `value`    | string       | Yes      | The value of the option.                               |
-| `disabled` | boolean      | No       | Set to true if the option is disabled.                 |
-| `selected` | boolean      | No       | Set to true if the option is selected by default.      |
-
-## Callbacks
-
-| Name       | Type     | Required | Description                    | Data                                                                         |
-| ---------- | -------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- |
-| `onChange` | Function | No       | triggered on change            | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
-| `onEscape` | Function | No       | triggered on typing Escape key | `()`                                                                         |
-
-## Examples
-
-### Default
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1" />
-    <EbayListboxOption value="BB" text="Option 2" />
-    <EbayListboxOption value="CC" text="Option 3" />
-</EbayListbox>
-```
-
-### With Description
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1">
-        <EbayListboxOptionDescription>Option 1 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-    <EbayListboxOption value="BB" text="Option 2">
-        <EbayListboxOptionDescription>Option 2 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-    <EbayListboxOption value="CC" text="Option 3">
-        <EbayListboxOptionDescription>Option 3 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-</EbayListbox>
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-listbox--docs)

package/ebay-listbox/index.js

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

package/ebay-listbox-button/README.md

@@ -1,69 +1,5 @@
 # EbayListboxButton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-listbox-button--default)
-
-## Import JS
-
-```jsx harmony
-import { EbayListboxButton, EbayListboxButtonOption } from "@ebay/ui-core-react/ebay-listbox-button";
-```
-
-## Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/listbox-button";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label";
-```
-
-## Import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/listbox-button.css";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label.css";
-```
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-```jsx harmony
-<EbayListboxButton defaultValue="BB" onSelect={action(`onSelect triggered`)} fluid borderless>
-    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-</EbayListboxButton>
-```
-
-## Attributes
-
-| Name               | Type    | Required | Description                                                                                                                                                          |
-| ------------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`            | string  | No       | Allows you to set the selected option to the one with `value`                                                                                                        |
-| `selected`         | number  | No       | Allows you to set the selected index option to `selected`                                                                                                            |
-| `aria-disabled`    | boolean | No       | Set to true if the field is disabled                                                                                                                                 |
-| `aria-invalid`     | boolean | No       | Set to true if the field is invalid                                                                                                                                  |
-| `fluid`            | boolean | No       | To make the listbox fluid                                                                                                                                            |
-| `borderless`       | boolean | No       | To make the listbox borderless                                                                                                                                       |
-| `maxHeight`        | string  | No       | example: 100px, 200px, 10rem                                                                                                                                         |
-| `prefixId`         | string  | No       | The id of an external element to use as the a11y prefix label for the listbox button.                                                                                |
-| `prefixLabel`      | string  | No       | The label to add before selected option on the button. Cannot be used with `prefixId`                                                                                |
-| `floatingLabel`    | string  | No       | Indicates that the listbox is a floating label type and renders it with a label                                                                                      |
-| `unselectedText`   | string  | No       | The text to be shown when no options are selected. Default is '-'. Cannot be used with `floating-label`                                                              |
-| `strategy`         | string  | No       | Swap between `fixed` and `absolute` positioning strategy. Use `fixed` when dropdown is in contained in an overflow and needs to be visible as you scroll the screen. |
-| `a11ySelectedText` | string  | No       | Accessible text for selected option. Default is "selected".                                                                                                          |
-
-## Callbacks
-
-| Name         | Type     | Required | Description           | Data                                                                         |
-| ------------ | -------- | -------- | --------------------- | ---------------------------------------------------------------------------- |
-| `onChange`   | Function | No       | triggered on change   | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
-| `onCollapse` | Function | No       | triggered on collapse | `()`                                                                         |
-| `onExpand`   | Function | No       | triggered on expand   | `()`                                                                         |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-listbox-button--docs)

package/ebay-listbox-button/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-button-sULPe7qi.js");exports.EbayListboxButton=t.ListboxButton;exports.EbayListboxButtonOption=t.ListboxOption;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-button-CF98dSd8.js");exports.EbayListboxButton=t.ListboxButton;exports.EbayListboxButtonOption=t.ListboxOption;