@ebay/ui-core-react 7.4.0-alpha.6 → 7.4.0-alpha.8

package/ebay-switch/index.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),b=require("classnames"),o=s=>typeof s<"u",w=({id:s,value:i,name:r,className:u,checked:e,defaultChecked:h=!1,onChange:d=()=>{},...m})=>{const[a,c]=t.useState(h);t.useEffect(()=>{c(!!e)},[e]);const p=n=>{const{value:f="",checked:l=!1}=n.target||{};d(n,{value:f,checked:l}),c(l)};return t.createElement("span",{className:"switch"},t.createElement("input",{...m,className:b("switch__control",u),id:s,role:"switch",type:"checkbox",value:i,"aria-checked":o(e)?e:a,checked:o(e)?e:a,name:r,onChange:p}),t.createElement("span",{className:"switch__button"}))};exports.EbaySwitch=w;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const isControlled = (checked) => typeof checked !== "undefined";
+const EbaySwitch = ({ id, value, name, className, checked, defaultChecked = false, onChange = () => {
+}, ...rest }) => {
+  const [isChecked, setChecked] = React.useState(defaultChecked);
+  React.useEffect(() => {
+    setChecked(!!checked);
+  }, [checked]);
+  const handleChange = (e) => {
+    const { value: inputValue = "", checked: inputChecked = false } = e.target || {};
+    onChange(e, {
+      value: inputValue,
+      checked: inputChecked
+    });
+    setChecked(inputChecked);
+  };
+  return React.createElement(
+    "span",
+    { className: "switch" },
+    React.createElement("input", { ...rest, className: classNames("switch__control", className), id, role: "switch", type: "checkbox", value, "aria-checked": isControlled(checked) ? checked : isChecked, checked: isControlled(checked) ? checked : isChecked, name, onChange: handleChange }),
+    React.createElement("span", { className: "switch__button" })
+  );
+};
+exports.EbaySwitch = EbaySwitch;

package/ebay-tabs/index.js

@@ -1 +1,88 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),m=require("classnames"),h=require("../common/event-utils/index.js"),_=require("../common/component-utils/utils/index.js"),E=({children:l,index:c,parentId:n,selected:r,focused:o,className:d,refCallback:i,...b})=>a.createElement("div",{...b,ref:i,"aria-controls":`${n||"default"}-tabpanel-${c}`,"aria-selected":r,className:m(d,"tabs__item"),id:`${n||"default"}-tab-${c}`,role:"tab",tabIndex:o?0:-1},a.createElement("span",null,l)),x=({children:l,index:c,parentId:n,selected:r,className:o,...d})=>a.createElement("div",{...d,"aria-labelledby":`default-tab-${c}`,className:m(o,"tabs__panel"),id:`${n||"default"}-tabpanel-${c}`,role:"tabpanel",hidden:!r},a.createElement("div",{className:"tabs__cell"},l)),q=({id:l,className:c,index:n=0,size:r="medium",activation:o="auto",onSelect:d=()=>{},onTabSelect:i=()=>{},children:b})=>{const I=[],[f,N]=a.useState(n),[p,T]=a.useState(n),u=e=>{d({selectedIndex:e}),i(e),N(e)},$=(e,t)=>{h.handleActionKeydown(e,()=>{e.preventDefault(),o==="manual"&&u(t)}),h.handleLeftRightArrowsKeydown(e,()=>{var g;e.preventDefault();const s=_.filterByType(b,E).length,P=["Left","ArrowLeft"].includes(e.key)?-1:1,y=((p===void 0?f:p)+s+P)%s;T(y),(g=I[y])==null||g.focus(),o!=="manual"&&u(y)})};a.useEffect(()=>{u(n)},[n]);const v=r==="large",w=_.filterByType(b,E).map((e,t)=>a.cloneElement(e,{...e.props,refCallback:s=>{I[t]=s},index:t,parentId:l,selected:f===t,focused:p===t,onClick:()=>{u(t),T(t)},onKeyDown:s=>{$(s,t)}})),S=_.filterByType(b,x).map((e,t)=>{const s={index:t,parentId:l,selected:f===t,children:e.props.children};return a.cloneElement(e,s)});return a.createElement("div",{id:l,className:m(c,"tabs")},a.createElement("div",{className:m("tabs__items",{"tabs__items--large":v}),role:"tablist"},w),a.createElement("div",{className:"tabs__content"},S))};exports.EbayTab=E;exports.EbayTabPanel=x;exports.EbayTabs=q;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const common_eventUtils = require("../common/event-utils/index.js");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const Tab = ({ children, index, parentId, selected, focused, className, refCallback, ...rest }) => React.createElement(
+  "div",
+  { ...rest, ref: refCallback, "aria-controls": `${parentId || "default"}-tabpanel-${index}`, "aria-selected": selected, className: classNames(className, "tabs__item"), id: `${parentId || "default"}-tab-${index}`, role: "tab", tabIndex: focused ? 0 : -1 },
+  React.createElement("span", null, children)
+);
+const TabPanel = ({ children, index, parentId, selected, className, ...rest }) => React.createElement(
+  "div",
+  { ...rest, "aria-labelledby": `default-tab-${index}`, className: classNames(className, "tabs__panel"), id: `${parentId || "default"}-tabpanel-${index}`, role: "tabpanel", hidden: !selected },
+  React.createElement("div", { className: "tabs__cell" }, children)
+);
+const Tabs = ({ id, className, index = 0, size = "medium", activation = "auto", onSelect = () => {
+}, onTabSelect = () => {
+}, children }) => {
+  const headings = [];
+  const [selectedIndex, setSelectedIndex] = React.useState(index);
+  const [focusedIndex, setFocusedIndex] = React.useState(index);
+  const handleSelect = (i) => {
+    onSelect({ selectedIndex: i });
+    onTabSelect(i);
+    setSelectedIndex(i);
+  };
+  const onKeyDown = (ev, i) => {
+    common_eventUtils.handleActionKeydown(ev, () => {
+      ev.preventDefault();
+      if (activation === "manual") {
+        handleSelect(i);
+      }
+    });
+    common_eventUtils.handleLeftRightArrowsKeydown(ev, () => {
+      var _a;
+      ev.preventDefault();
+      const len = common_componentUtils_utils.filterByType(children, Tab).length;
+      const direction = ["Left", "ArrowLeft"].includes(ev.key) ? -1 : 1;
+      const currentIndex = focusedIndex === void 0 ? selectedIndex : focusedIndex;
+      const nextIndex = (currentIndex + len + direction) % len;
+      setFocusedIndex(nextIndex);
+      (_a = headings[nextIndex]) == null ? void 0 : _a.focus();
+      if (activation !== "manual") {
+        handleSelect(nextIndex);
+      }
+    });
+  };
+  React.useEffect(() => {
+    handleSelect(index);
+  }, [index]);
+  const isLarge = size === "large";
+  const tabHeadings = common_componentUtils_utils.filterByType(children, Tab).map((item, i) => React.cloneElement(item, {
+    ...item.props,
+    refCallback: (ref) => {
+      headings[i] = ref;
+    },
+    index: i,
+    parentId: id,
+    selected: selectedIndex === i,
+    focused: focusedIndex === i,
+    onClick: () => {
+      handleSelect(i);
+      setFocusedIndex(i);
+    },
+    onKeyDown: (e) => {
+      onKeyDown(e, i);
+    }
+  }));
+  const tabPanels = common_componentUtils_utils.filterByType(children, TabPanel).map((item, i) => {
+    const itemProps = {
+      index: i,
+      parentId: id,
+      selected: selectedIndex === i,
+      children: item.props.children
+    };
+    return React.cloneElement(item, itemProps);
+  });
+  return React.createElement(
+    "div",
+    { id, className: classNames(className, "tabs") },
+    React.createElement("div", { className: classNames("tabs__items", { "tabs__items--large": isLarge }), role: "tablist" }, tabHeadings),
+    React.createElement("div", { className: "tabs__content" }, tabPanels)
+  );
+};
+exports.EbayTab = Tab;
+exports.EbayTabPanel = TabPanel;
+exports.EbayTabs = Tabs;

package/ebay-textbox/index.js

@@ -1 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../textbox-dUhinDwj.js"),x=require("../common/floating-label-utils/hooks/index.js");exports.EbayTextbox=e.EbayTextbox;exports.EbayTextboxPostfixIcon=e.EbayTextboxPostfixIcon;exports.EbayTextboxPostfixText=e.EbayTextboxPostfixText;exports.EbayTextboxPrefixIcon=e.EbayTextboxPrefixIcon;exports.EbayTextboxPrefixText=e.EbayTextboxPrefixText;exports.useFloatingLabel=x.useFloatingLabel;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const textbox = require("../textbox-J291yCpJ.js");
+const common_floatingLabelUtils_hooks = require("../common/floating-label-utils/hooks/index.js");
+exports.EbayTextbox = textbox.EbayTextbox;
+exports.EbayTextboxPostfixIcon = textbox.EbayTextboxPostfixIcon;
+exports.EbayTextboxPostfixText = textbox.EbayTextboxPostfixText;
+exports.EbayTextboxPrefixIcon = textbox.EbayTextboxPrefixIcon;
+exports.EbayTextboxPrefixText = textbox.EbayTextboxPrefixText;
+exports.useFloatingLabel = common_floatingLabelUtils_hooks.useFloatingLabel;

package/ebay-toast-dialog/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("classnames"),i=require("../dialog-previous-button-5cTKpmJ-.js");require("../icon-button-Cwaj-eT9.js");const r=({className:t,onClose:e=()=>{},...o})=>a.createElement(i.DialogBaseWithState,{...o,isModal:!1,baseEl:"aside",classPrefix:"toast-dialog",buttonPosition:"right",transitionElement:"root",className:s(t,"toast-dialog--transition"),onCloseBtnClick:e});exports.EbayToast=r;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
+require("../icon-button-BQWoMgX1.js");
+const EbayToast = ({ className, onClose = () => {
+}, ...rest }) => React.createElement(dialogPreviousButton.DialogBaseWithState, { ...rest, isModal: false, baseEl: "aside", classPrefix: "toast-dialog", buttonPosition: "right", transitionElement: "root", className: classNames(className, "toast-dialog--transition"), onCloseBtnClick: onClose });
+exports.EbayToast = EbayToast;

package/ebay-tooltip/index.js

@@ -1 +1,64 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../common/component-utils/utils/index.js"),t=require("../use-tooltip-CL3_zAeg.js");require("classnames");require("../icon-TuxfQndO.js");require("../array.polyfill.flat-5BAolFdk.js");const c=require("../common/tooltip-utils/constants/index.js"),u=()=>null,E=()=>null,N=({className:m,pointer:y,overlayStyle:f,noHover:i,onFocus:h=()=>{},onBlur:b=()=>{},onMouseEnter:d=()=>{},onMouseLeave:O=()=>{},onExpand:_,onCollapse:R,children:l,...C})=>{const{isExpanded:I,expandTooltip:s,collapseTooltip:r}=t.useTooltip({onCollapse:R,onExpand:_}),n=e.useRef(),q=o=>{d(o),i||(clearTimeout(n.current),s())},P=o=>{O(o),i||(clearTimeout(n.current),n.current=setTimeout(()=>{r()},300))},F=o=>{h(o),s()},L=o=>{b(o),r()},p=a.findComponent(l,u),T=a.findComponent(l,E);if(!T)throw new Error("EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip");if(!p)throw new Error("EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip");return e.createElement(t.Tooltip,{...C,className:m,type:"tooltip",isExpanded:I,onFocus:F,onBlur:L,onMouseEnter:q,onMouseLeave:P},e.createElement(t.TooltipHost,{...T.props}),e.createElement(t.TooltipContent,{...p.props,type:"tooltip",style:f,pointer:y}))};exports.Tooltip=t.Tooltip;exports.TooltipFooter=t.TooltipFooter;exports.DEFAULT_POINTER_DIRECTION=c.DEFAULT_POINTER_DIRECTION;exports.POINTER_STYLES=c.POINTER_STYLES;exports.EbayTooltip=N;exports.EbayTooltipContent=u;exports.EbayTooltipHost=E;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const useTooltip = require("../use-tooltip-7JxcZHJn.js");
+require("classnames");
+require("../icon-B17Di3YL.js");
+require("../array.polyfill.flat-DyxysTxZ.js");
+const common_tooltipUtils_constants = require("../common/tooltip-utils/constants/index.js");
+const EbayTooltipContent = () => null;
+const EbayTooltipHost = () => null;
+const EbayTooltip = ({ className, pointer, overlayStyle, noHover, onFocus = () => {
+}, onBlur = () => {
+}, onMouseEnter = () => {
+}, onMouseLeave = () => {
+}, onExpand, onCollapse, children, ...rest }) => {
+  const { isExpanded, expandTooltip, collapseTooltip } = useTooltip.useTooltip({ onCollapse, onExpand });
+  const timeoutRef = React.useRef();
+  const handleOnMouseEnter = (event) => {
+    onMouseEnter(event);
+    if (!noHover) {
+      clearTimeout(timeoutRef.current);
+      expandTooltip();
+    }
+  };
+  const handleOnMouseLeave = (event) => {
+    onMouseLeave(event);
+    if (!noHover) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        collapseTooltip();
+      }, 300);
+    }
+  };
+  const handleOnFocus = (event) => {
+    onFocus(event);
+    expandTooltip();
+  };
+  const handleOnBlur = (event) => {
+    onBlur(event);
+    collapseTooltip();
+  };
+  const content = common_componentUtils_utils.findComponent(children, EbayTooltipContent);
+  const host = common_componentUtils_utils.findComponent(children, EbayTooltipHost);
+  if (!host) {
+    throw new Error(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`);
+  }
+  if (!content) {
+    throw new Error(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`);
+  }
+  return React.createElement(
+    useTooltip.Tooltip,
+    { ...rest, className, type: "tooltip", isExpanded, onFocus: handleOnFocus, onBlur: handleOnBlur, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
+    React.createElement(useTooltip.TooltipHost, { ...host.props }),
+    React.createElement(useTooltip.TooltipContent, { ...content.props, type: "tooltip", style: overlayStyle, pointer })
+  );
+};
+exports.Tooltip = useTooltip.Tooltip;
+exports.TooltipFooter = useTooltip.TooltipFooter;
+exports.DEFAULT_POINTER_DIRECTION = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION;
+exports.POINTER_STYLES = common_tooltipUtils_constants.POINTER_STYLES;
+exports.EbayTooltip = EbayTooltip;
+exports.EbayTooltipContent = EbayTooltipContent;
+exports.EbayTooltipHost = EbayTooltipHost;

package/ebay-tourtip/index.js

@@ -1 +1,54 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=require("../common/component-utils/utils/index.js"),n=require("../use-tooltip-CL3_zAeg.js"),_=require("classnames");require("../icon-TuxfQndO.js");require("../array.polyfill.flat-5BAolFdk.js");const T=()=>null,d=()=>null,y=({index:e,children:r})=>t.createElement(t.Fragment,null,e!==void 0&&t.createElement("span",{className:"tourtip__index"},e),r),f=({as:e,children:r,className:a,...o})=>{const s=e||"h2";return t.createElement(s,{...o,className:_("tourtip__heading",a)},r)},F=({a11yCloseText:e,"aria-label":r,className:a,children:o,onCollapse:s,onExpand:m,overlayStyle:b,pointer:h,...C})=>{const p=t.useRef(),{isExpanded:u,collapseTooltip:g}=n.useTooltip({onExpand:m,onCollapse:s,initialExpanded:!0,hostRef:p}),H=t.useRef(),l=i.findComponent(o,T);if(!l)throw new Error("EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip");const{children:q,contentProps:w}=l.props,c=i.findComponent(o,d);if(!c)throw new Error("EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip");const R=i.findComponent(o,f),E=i.findComponent(o,y);return t.createElement(n.Tooltip,{...C,className:a,type:"tourtip",isExpanded:u,ref:H},t.createElement(n.TooltipHost,{...c.props,forwardedRef:p,"aria-label":r,"aria-expanded":u}),t.createElement(n.TooltipContent,{...w,a11yCloseText:e,onClose:g,pointer:h,showCloseButton:!0,style:b,type:"tourtip"},R,q,E&&t.createElement(n.TooltipFooter,{type:"tourtip"},E)))};exports.Tooltip=n.Tooltip;exports.EbayTourtip=F;exports.EbayTourtipContent=T;exports.EbayTourtipFooter=y;exports.EbayTourtipHeading=f;exports.EbayTourtipHost=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const useTooltip = require("../use-tooltip-7JxcZHJn.js");
+const classNames = require("classnames");
+require("../icon-B17Di3YL.js");
+require("../array.polyfill.flat-DyxysTxZ.js");
+const EbayTourtipContent = () => null;
+const EbayTourtipHost = () => null;
+const EbayTourtipFooter = ({ index, children }) => React.createElement(
+  React.Fragment,
+  null,
+  index !== void 0 && React.createElement("span", { className: "tourtip__index" }, index),
+  children
+);
+const EbayTourtipHeading = ({ as, children, className, ...props }) => {
+  const HeadingTag = as || "h2";
+  return React.createElement(HeadingTag, { ...props, className: classNames(`tourtip__heading`, className) }, children);
+};
+const EbayTourtip = ({ a11yCloseText, "aria-label": ariaLabel, className, children, onCollapse, onExpand, overlayStyle, pointer, ...rest }) => {
+  const hostRef = React.useRef();
+  const { isExpanded, collapseTooltip } = useTooltip.useTooltip({ onExpand, onCollapse, initialExpanded: true, hostRef });
+  const containerRef = React.useRef();
+  const content = common_componentUtils_utils.findComponent(children, EbayTourtipContent);
+  if (!content) {
+    throw new Error(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`);
+  }
+  const { children: contentChildren, contentProps } = content.props;
+  const host = common_componentUtils_utils.findComponent(children, EbayTourtipHost);
+  if (!host) {
+    throw new Error(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`);
+  }
+  const heading = common_componentUtils_utils.findComponent(children, EbayTourtipHeading);
+  const footer = common_componentUtils_utils.findComponent(children, EbayTourtipFooter);
+  return React.createElement(
+    useTooltip.Tooltip,
+    { ...rest, className, type: "tourtip", isExpanded, ref: containerRef },
+    React.createElement(useTooltip.TooltipHost, { ...host.props, forwardedRef: hostRef, "aria-label": ariaLabel, "aria-expanded": isExpanded }),
+    React.createElement(
+      useTooltip.TooltipContent,
+      { ...contentProps, a11yCloseText, onClose: collapseTooltip, pointer, showCloseButton: true, style: overlayStyle, type: "tourtip" },
+      heading,
+      contentChildren,
+      footer && React.createElement(useTooltip.TooltipFooter, { type: "tourtip" }, footer)
+    )
+  );
+};
+exports.Tooltip = useTooltip.Tooltip;
+exports.EbayTourtip = EbayTourtip;
+exports.EbayTourtipContent = EbayTourtipContent;
+exports.EbayTourtipFooter = EbayTourtipFooter;
+exports.EbayTourtipHeading = EbayTourtipHeading;
+exports.EbayTourtipHost = EbayTourtipHost;

package/ebay-video/index.js

@@ -1 +1,229 @@
-"use strict";var Q=Object.defineProperty;var X=(n,r,o)=>r in n?Q(n,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[r]=o;var T=(n,r,o)=>X(n,typeof r!="symbol"?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),b=require("classnames"),d=require("shaka-player/dist/shaka-player.ui"),Z=require("../common/component-utils/utils/index.js"),_=require("../icon-TuxfQndO.js"),ee=require("../progress-spinner-U2qOANON.js"),te=require("react-dom/client"),w=({...n})=>e.createElement("source",{...n}),ne=7e3,re=11,V={addBigPlayButton:!1,addSeekBar:!0,controlPanelElements:["play_pause","time_and_duration","spacer","mute","report","captions","fullscreen"]},oe=({callback:n,children:r})=>e.createElement("button",{className:"video-player__report-button",ref:n},e.createElement(_.EbayIcon,{name:"flag24"}),r);function ae(n=()=>{}){const r=class extends d.ui.Element{constructor(o,u,y){super(o,u);const i=document.createElement("div"),E=()=>{const m=i.firstChild;o.appendChild(m),i.remove(),this.eventManager.listen(m,"click",n)};te.createRoot(i).render(e.createElement(oe,{callback:E},y))}};return r.Factory=class{constructor(o){T(this,"reportText");this.reportText=o}create(o,u){return new r(o,u,this.reportText)}},{Report:r}}const le=({width:n,height:r,thumbnail:o,action:u,muted:y,playView:i="inline",a11yLoadText:E,a11yPlayText:m,reportText:R,volumeSlider:A,volume:x=1,hideReportButton:I,errorText:L,onVolumeChange:F=()=>{},onLoadError:M=()=>{},onPlay:z=()=>{},onReport:$=()=>{},children:j,...D})=>{const[P,v]=e.useState(),[S,H]=e.useState(),[k,U]=e.useState(),[h,C]=e.useState(),N=e.useRef(null),l=e.useRef(null),s=e.useRef(null),p=e.useRef(null),f=Z.filterByType(j,w).map(({props:t})=>t),B=t=>{v(!0),C(!0),M(t)},g=(t=0)=>{var a;!f.length||!s.current||(v(!1),s.current.load((a=f[t])==null?void 0:a.src).then(()=>{C(!1)}).catch(c=>{switch(console.error(c),c.code){case ne:return;case re:setTimeout(()=>g(t),0);break;default:{const q=f.length>t+1&&t+1;q?setTimeout(()=>g(q),0):B(c)}}}).finally(()=>{v(!0)}))};e.useEffect(()=>{const t=l.current,a=N.current;if(!(!t||!a)&&(t.volume=x,d.polyfill.installAll(),s.current=new d.Player(t),!!s.current)){if(s.current.addEventListener("error",B),s.current.addEventListener("buffering",c=>{H(c.buffering)}),p.current=new d.ui.Overlay(s.current,a,t,R),p.current.configure({addBigPlayButton:!0,controlPanelElements:[],addSeekBar:!1}),!I){const{Report:c}=ae($);d.ui.Controls.registerElement("report",new c.Factory(R))}g(),ce(a)}},[]),e.useEffect(()=>{switch(u){case"play":l.current.play();break;case"pause":l.current.pause();break}},[u]);const W=()=>{if(!p.current)return;const t=A?{controlPanelElements:se(V.controlPanelElements)}:{};p.current.configure({...V,...t}),l.current.controls=!1},Y=t=>{t.stopPropagation(),W(),i==="fullscreen"&&l.current.requestFullscreen(),U(!0),z(t,{player:s.current})},G=()=>{l.current.play()},J=t=>{const a=t.currentTarget;F(t,{volume:Math.round((a.volume+Number.EPSILON)*100)/100,muted:a.muted})},K=()=>{l.current.controls=!1},O={width:n?`${n}px`:void 0,height:r?`${r}px`:void 0};return e.createElement("div",{style:O,className:b("video-player",{"video-player--poster":!k})},!k&&P&&!h&&!S&&e.createElement("div",{className:"shaka-play-button-container"},e.createElement("button",{onClick:G,className:"shaka-play-button",style:{opacity:1,zIndex:999},"aria-label":m},e.createElement(_.EbayIcon,{name:"playFilled64Colored"}))),e.createElement("div",{className:"video-player__container",ref:N},e.createElement("video",{ref:l,style:O,poster:o,muted:y||!1,onPlaying:Y,onPause:K,onVolumeChange:J,...D},f.map((t,a)=>e.createElement("source",{key:a,...t})))),e.createElement("div",{className:b("video-player__overlay",{"video-player__overlay--hidden":!h})},e.createElement(_.EbayIcon,{name:"attention64"}),e.createElement("div",{className:"video-player__overlay-text"},L)),e.createElement("div",{className:b("video-player__overlay",{"video-player__overlay--hidden":P&&(h||!S)})},e.createElement(ee.EbayProgressSpinner,{size:"large","aria-label":E})))};function se(n){const r=n.length-2>0?n.length-2:n.length,o=[...n];return o.splice(r,0,"volume"),o}function ce(n){const r=n.querySelectorAll(".shaka-spinner")[0];r&&r.setAttribute("hidden","")}exports.EbayVideo=le;exports.EbayVideoSource=w;
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const shaka = require("shaka-player/dist/shaka-player.ui");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const icon = require("../icon-B17Di3YL.js");
+const progressSpinner = require("../progress-spinner-DOFKRtuu.js");
+const client = require("react-dom/client");
+const EbayVideoSource = ({ ...rest }) => React.createElement("source", { ...rest });
+const ERROR_ANOTHER_LOAD = 7e3;
+const ERROR_NO_PLAYER = 11;
+const defaultVideoConfig = {
+  addBigPlayButton: false,
+  addSeekBar: true,
+  controlPanelElements: [
+    "play_pause",
+    "time_and_duration",
+    "spacer",
+    "mute",
+    "report",
+    "captions",
+    // 'quality', // uncomment this to show a gear icon for video quality control
+    "fullscreen"
+  ]
+};
+const ReportButton = ({ callback, children }) => React.createElement(
+  "button",
+  { className: "video-player__report-button", ref: callback },
+  React.createElement(icon.EbayIcon, { name: "flag24" }),
+  children
+);
+function customControls(onReport = () => {
+}) {
+  const Report = class extends shaka.ui.Element {
+    constructor(parent, controls, text) {
+      super(parent, controls);
+      const tempEl = document.createElement("div");
+      const buttonCallback = () => {
+        const reportButton = tempEl.firstChild;
+        parent.appendChild(reportButton);
+        tempEl.remove();
+        this.eventManager.listen(reportButton, "click", onReport);
+      };
+      client.createRoot(tempEl).render(React.createElement(ReportButton, { callback: buttonCallback }, text));
+    }
+  };
+  Report.Factory = class {
+    constructor(reportText) {
+      __publicField(this, "reportText");
+      this.reportText = reportText;
+    }
+    create(rootElement, controls) {
+      return new Report(rootElement, controls, this.reportText);
+    }
+  };
+  return { Report };
+}
+const EbayVideo = ({ width, height, thumbnail, action, muted, playView = "inline", a11yLoadText, a11yPlayText, reportText, volumeSlider, volume = 1, hideReportButton, errorText, onVolumeChange = () => {
+}, onLoadError = () => {
+}, onPlay = () => {
+}, onReport = () => {
+}, children, ...rest }) => {
+  const [loaded, setLoaded] = React.useState();
+  const [buffering, setBuffering] = React.useState();
+  const [playing, setPlaying] = React.useState();
+  const [failed, setFailed] = React.useState();
+  const containerRef = React.useRef(null);
+  const videoRef = React.useRef(null);
+  const playerRef = React.useRef(null);
+  const uiRef = React.useRef(null);
+  const sources = common_componentUtils_utils.filterByType(children, EbayVideoSource).map(({ props }) => props);
+  const handleError = (err) => {
+    setLoaded(true);
+    setFailed(true);
+    onLoadError(err);
+  };
+  const loadSource = (index = 0) => {
+    var _a;
+    if (!sources.length || !playerRef.current)
+      return;
+    setLoaded(false);
+    playerRef.current.load((_a = sources[index]) == null ? void 0 : _a.src).then(() => {
+      setFailed(false);
+    }).catch((err) => {
+      console.error(err);
+      switch (err.code) {
+        case ERROR_ANOTHER_LOAD:
+          return;
+        case ERROR_NO_PLAYER:
+          setTimeout(() => loadSource(index), 0);
+          break;
+        default: {
+          const nextIndex = sources.length > index + 1 && index + 1;
+          if (nextIndex) {
+            setTimeout(() => loadSource(nextIndex), 0);
+          } else {
+            handleError(err);
+          }
+        }
+      }
+    }).finally(() => {
+      setLoaded(true);
+    });
+  };
+  React.useEffect(() => {
+    const video = videoRef.current;
+    const container = containerRef.current;
+    if (!video || !container)
+      return;
+    video.volume = volume;
+    shaka.polyfill.installAll();
+    playerRef.current = new shaka.Player(video);
+    if (!playerRef.current)
+      return;
+    playerRef.current.addEventListener("error", handleError);
+    playerRef.current.addEventListener("buffering", (e) => {
+      setBuffering(e.buffering);
+    });
+    uiRef.current = new shaka.ui.Overlay(playerRef.current, container, video, reportText);
+    uiRef.current.configure({
+      addBigPlayButton: true,
+      controlPanelElements: [],
+      addSeekBar: false
+    });
+    if (!hideReportButton) {
+      const { Report } = customControls(onReport);
+      shaka.ui.Controls.registerElement("report", new Report.Factory(reportText));
+    }
+    loadSource();
+    hideSpinner(container);
+  }, []);
+  React.useEffect(() => {
+    switch (action) {
+      case "play":
+        videoRef.current.play();
+        break;
+      case "pause":
+        videoRef.current.pause();
+        break;
+    }
+  }, [action]);
+  const showControls = () => {
+    if (!uiRef.current)
+      return;
+    const updatedControls = volumeSlider ? {
+      controlPanelElements: withVolumeControl(defaultVideoConfig.controlPanelElements)
+    } : {};
+    uiRef.current.configure({
+      ...defaultVideoConfig,
+      ...updatedControls
+    });
+    videoRef.current.controls = false;
+  };
+  const handlePlaying = (e) => {
+    e.stopPropagation();
+    showControls();
+    if (playView === "fullscreen") {
+      videoRef.current.requestFullscreen();
+    }
+    setPlaying(true);
+    onPlay(e, { player: playerRef.current });
+  };
+  const handleOnPlayClick = () => {
+    videoRef.current.play();
+  };
+  const handleVolumeChange = (e) => {
+    const eventTarget = e.currentTarget;
+    onVolumeChange(e, {
+      volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
+      muted: eventTarget.muted
+    });
+  };
+  const handleOnPause = () => {
+    videoRef.current.controls = false;
+  };
+  const style = {
+    width: width ? `${width}px` : void 0,
+    height: height ? `${height}px` : void 0
+  };
+  return React.createElement(
+    "div",
+    { style, className: classNames("video-player", { "video-player--poster": !playing }) },
+    !playing && loaded && !failed && !buffering && React.createElement(
+      "div",
+      { className: "shaka-play-button-container" },
+      React.createElement(
+        "button",
+        { onClick: handleOnPlayClick, className: "shaka-play-button", style: { opacity: 1, zIndex: 999 }, "aria-label": a11yPlayText },
+        React.createElement(icon.EbayIcon, { name: "playFilled64Colored" })
+      )
+    ),
+    React.createElement(
+      "div",
+      { className: "video-player__container", ref: containerRef },
+      React.createElement("video", { ref: videoRef, style, poster: thumbnail, muted: muted || false, onPlaying: handlePlaying, onPause: handleOnPause, onVolumeChange: handleVolumeChange, ...rest }, sources.map((source, i) => React.createElement("source", { key: i, ...source })))
+    ),
+    React.createElement(
+      "div",
+      { className: classNames("video-player__overlay", { "video-player__overlay--hidden": !failed }) },
+      React.createElement(icon.EbayIcon, { name: "attention64" }),
+      React.createElement("div", { className: "video-player__overlay-text" }, errorText)
+    ),
+    React.createElement(
+      "div",
+      { className: classNames("video-player__overlay", {
+        "video-player__overlay--hidden": loaded && (failed || !buffering)
+      }) },
+      React.createElement(progressSpinner.EbayProgressSpinner, { size: "large", "aria-label": a11yLoadText })
+    )
+  );
+};
+function withVolumeControl(controls) {
+  const insertAt = controls.length - 2 > 0 ? controls.length - 2 : controls.length;
+  const controlsWithVolume = [...controls];
+  controlsWithVolume.splice(insertAt, 0, "volume");
+  return controlsWithVolume;
+}
+function hideSpinner(container) {
+  const shakaSpinner = container.querySelectorAll(".shaka-spinner")[0];
+  if (shakaSpinner) {
+    shakaSpinner.setAttribute("hidden", "");
+  }
+}
+exports.EbayVideo = EbayVideo;
+exports.EbayVideoSource = EbayVideoSource;

package/events/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../common/event-utils/index.js"),n=require("../use-roving-index-DoAVBgsp.js");exports.addEventListener=e.addEventListener;exports.handleActionKeydown=e.handleActionKeydown;exports.handleEnterKeydown=e.handleEnterKeydown;exports.handleEscapeKeydown=e.handleEscapeKeydown;exports.handleLeftRightArrowsKeydown=e.handleLeftRightArrowsKeydown;exports.handleResize=e.handleResize;exports.handleTextInput=e.handleTextInput;exports.handleUpDownArrowsKeydown=e.handleUpDownArrowsKeydown;exports.isActionKey=e.isActionKey;exports.preventDefaultIfHijax=e.preventDefaultIfHijax;exports.removeEventListener=e.removeEventListener;exports.wrapEvent=e.wrapEvent;exports.useKeyPress=n.useKeyPress;exports.useRovingIndex=n.useRovingIndex;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_eventUtils = require("../common/event-utils/index.js");
+const useRovingIndex = require("../use-roving-index-CEM_UsCH.js");
+exports.addEventListener = common_eventUtils.addEventListener;
+exports.handleActionKeydown = common_eventUtils.handleActionKeydown;
+exports.handleEnterKeydown = common_eventUtils.handleEnterKeydown;
+exports.handleEscapeKeydown = common_eventUtils.handleEscapeKeydown;
+exports.handleLeftRightArrowsKeydown = common_eventUtils.handleLeftRightArrowsKeydown;
+exports.handleResize = common_eventUtils.handleResize;
+exports.handleTextInput = common_eventUtils.handleTextInput;
+exports.handleUpDownArrowsKeydown = common_eventUtils.handleUpDownArrowsKeydown;
+exports.isActionKey = common_eventUtils.isActionKey;
+exports.preventDefaultIfHijax = common_eventUtils.preventDefaultIfHijax;
+exports.removeEventListener = common_eventUtils.removeEventListener;
+exports.wrapEvent = common_eventUtils.wrapEvent;
+exports.useKeyPress = useRovingIndex.useKeyPress;
+exports.useRovingIndex = useRovingIndex.useRovingIndex;

package/icon-B17Di3YL.js

@@ -0,0 +1,56 @@
+"use strict";
+const React = require("react");
+const classNames = require("classnames");
+const common_componentUtils_forwardRef = require("./common/component-utils/forwardRef/index.js");
+require("./array.polyfill.flat-DyxysTxZ.js");
+const common_randomId = require("./common/random-id/index.js");
+const EbayIcon = ({ name, className: extraClass, noSkinClasses = false, a11yText, a11yVariant, forwardedRef, ...rest }) => {
+  const [rId, setRandomId] = React.useState("");
+  React.useEffect(() => {
+    setRandomId(common_randomId.randomId());
+  }, []);
+  const withAriaLabel = a11yVariant === "label";
+  const a11yTextId = a11yText && `icon-title-${rId}`;
+  const a11yProps = a11yText ? {
+    "aria-labelledby": withAriaLabel ? void 0 : a11yTextId,
+    "aria-label": withAriaLabel ? a11yText : void 0,
+    role: "img"
+  } : {
+    "aria-hidden": true
+  };
+  const kebabName = kebabCased(name);
+  const size = getIconSize(kebabName) || kebabName;
+  const skinClassName = [`icon`, `icon--${size}`, getFilledIconName(kebabName)].filter(Boolean).join(" ");
+  const className = classNames(extraClass, { [skinClassName]: !noSkinClasses });
+  return React.createElement(
+    "svg",
+    { ...rest, className, xmlns: "http://www.w3.org/2000/svg", focusable: false, ref: forwardedRef, ...a11yProps },
+    a11yText && !withAriaLabel && React.createElement("title", { id: a11yTextId }, a11yText),
+    React.createElement("use", { xlinkHref: `#icon-${kebabName}` })
+  );
+};
+function getIconSize(iconName) {
+  const iconNameArray = iconName.split("-");
+  const size = iconNameArray[iconNameArray.length - 1];
+  if (size === "colored") {
+    return iconNameArray[iconNameArray.length - 2];
+  }
+  if (isNaN(Number(size))) {
+    return "";
+  }
+  return size;
+}
+function getFilledIconName(iconName) {
+  const iconNameArray = iconName.split("-");
+  const filledIndex = iconNameArray.indexOf("filled");
+  if (filledIndex === -1) {
+    return "";
+  }
+  return `icon--${iconNameArray.slice(0, filledIndex + 1).join("-")}`;
+}
+function kebabCased(str) {
+  return str.replace(/([0-9]+)/g, (s, n) => `-${n}`).replace(/([A-Z])/g, (s, c) => `-${c.toLowerCase()}`);
+}
+const EbayIcon$1 = common_componentUtils_forwardRef.withForwardRef(EbayIcon);
+exports.EbayIcon = EbayIcon$1;
+exports.kebabCased = kebabCased;

package/icon-button-BQWoMgX1.js

@@ -0,0 +1,31 @@
+"use strict";
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("./icon-B17Di3YL.js");
+const badge = require("./badge-CR5t7-2L.js");
+const common_componentUtils_forwardRef = require("./common/component-utils/forwardRef/index.js");
+require("./array.polyfill.flat-DyxysTxZ.js");
+const EbayIconButton = ({ href, icon: icon$1, badgeNumber, badgeAriaLabel, transparent, className: extraClasses, forwardedRef, size, onEscape = () => {
+}, onKeyDown = () => {
+}, ...rest }) => {
+  const classPrefix = href ? "icon-link" : "icon-btn";
+  const className = classNames(extraClasses, classPrefix, size && `${classPrefix}--${size}`, {
+    [`${classPrefix}--badged`]: badgeNumber,
+    [`${classPrefix}--transparent`]: transparent
+  });
+  const children = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(icon.EbayIcon, { name: icon$1 }),
+    badgeNumber && React.createElement(badge.EbayBadge, { type: "icon", number: badgeNumber, "aria-label": badgeAriaLabel })
+  );
+  const keyDownHandler = (e) => {
+    if (e.key === "Escape" || e.key === "Esc") {
+      onEscape(e);
+    }
+    onKeyDown(e);
+  };
+  return href ? React.createElement("a", { ref: forwardedRef, className, href, onKeyDown: keyDownHandler, ...rest }, children) : React.createElement("button", { ref: forwardedRef, type: "button", className, onKeyDown: keyDownHandler, ...rest }, children);
+};
+const EbayIconButton$1 = common_componentUtils_forwardRef.withForwardRef(EbayIconButton);
+exports.EbayIconButton = EbayIconButton$1;