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

package/ebay-lightbox-dialog/index.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),a=require("classnames"),c=require("../dialog-previous-button-5cTKpmJ-.js");require("../icon-button-Cwaj-eT9.js");const i="lightbox-dialog",r=({open:s,mode:l,size:o,onClose:e=()=>{},...t})=>n.createElement(c.DialogBaseWithState,{buttonPosition:"right",...t,classPrefix:i,onCloseBtnClick:e,onBackgroundClick:e,className:a(t.className,`${i}--mask-fade`,o&&`${i}--${o}`),windowClass:a("lightbox-dialog__window--fade",{[`${i}__window--mini`]:l==="mini"}),open:s});exports.EbayLightboxDialog=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 classPrefix = "lightbox-dialog";
+const EbayLightboxDialog = ({ open, mode, size, onClose = () => {
+}, ...rest }) => React.createElement(dialogPreviousButton.DialogBaseWithState, { buttonPosition: "right", ...rest, classPrefix, onCloseBtnClick: onClose, onBackgroundClick: onClose, className: classNames(rest.className, `${classPrefix}--mask-fade`, size && `${classPrefix}--${size}`), windowClass: classNames("lightbox-dialog__window--fade", {
+  [`${classPrefix}__window--mini`]: mode === "mini"
+}), open });
+exports.EbayLightboxDialog = EbayLightboxDialog;

package/ebay-listbox/index.js

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-Ck3BxDm4.js");exports.EbayListbox=t.EbayListbox;exports.EbayListboxOption=t.EbayListboxOption;exports.EbayListboxOptionDescription=t.EbayListboxOptionDescription;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const listbox = require("../listbox-DGbY99kq.js");
+exports.EbayListbox = listbox.EbayListbox;
+exports.EbayListboxOption = listbox.EbayListboxOption;
+exports.EbayListboxOptionDescription = listbox.EbayListboxOptionDescription;

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,EAAE,EAA4B,MAAM,OAAO,CAAA;AAItF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAIlD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0L5C,CAAA"}
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,EAAE,EAA4B,MAAM,OAAO,CAAA;AAItF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAIlD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuM5C,CAAA"}

package/ebay-listbox-button/index.js

@@ -1 +1,151 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),W=require("../index-Dkz0UnlJ.js"),E=require("classnames"),_=require("../listbox-Ck3BxDm4.js"),X=require("../common/component-utils/utils/index.js"),Y=require("../icon-TuxfQndO.js");function M(t){t.keyCode>=32&&t.keyCode<=40&&t.preventDefault()}function Z(t){t.addEventListener("keydown",M)}function ee(t){t.removeEventListener("keydown",M)}const $=({alwaysDisplay:t,icon:c,labelId:n,text:o,unselectedText:y,postfixLabel:m})=>{if(c)return e.createElement("span",{id:n,className:"btn__text"},c);if(o||t){const i=o||y;return e.createElement("span",{id:n,className:"btn__text"},i,m&&e.createElement("span",{className:"btn__postfix-label"},m))}};function F({selected:t,value:c,options:n}){return t!==void 0?t:c!==void 0?n.findIndex(o=>o.props.value===c):n.findIndex(o=>o.props.selected)}const te=_.EbayListboxOption,ne=({"aria-invalid":t,a11yIconPrefixText:c,borderless:n,children:o,className:y,collapseOnSelect:m,disabled:i,floatingLabel:v,fluid:L,hasError:h,listSelection:j,maxHeight:A,name:K,postfixLabel:S,prefixId:q,prefixLabel:I,selected:N,split:O,truncate:R,unselectedText:k="-",value:g,variant:P,onChange:U=()=>{},onExpand:V=()=>{},onCollapse:z=()=>{},...G})=>{const a=e.useRef(),u=e.useRef(),l=e.useRef(),b=X.filterByType(o,_.EbayListboxOption),[w,B]=e.useState(F({selected:N,value:g,options:b})),d=b[w],p=d&&(d.props.text||d.props.children),C=d&&d.props.icon,D=C&&p,f=q&&"expand-btn-text";e.useEffect(()=>{B(F({selected:N,value:g,options:b}))},[g,N]),e.useEffect(()=>{function r(){var x,T;(T=(x=a.current)==null?void 0:x.querySelector(".listbox-button__listbox"))==null||T.scroll(),V()}function s(){requestAnimationFrame(()=>{var x;(x=u.current)==null||x.focus()}),z()}return b.length&&!i&&(l.current=new W.src_default(a.current,{alwaysDoFocusManagement:!0,autoCollapse:!0,expandOnClick:!0,simulateSpacebarClick:!0,contentSelector:".listbox-button__listbox",hostSelector:".listbox-button__control",expandedClass:"listbox-button--expanded",focusManagement:"content"}),a.current.addEventListener("expander-expand",r),a.current.addEventListener("expander-collapse",s)),Z(u.current),()=>{l.current&&(l.current.destroy(),l.current=void 0),a.current&&(a.current.removeEventListener("expander-expand",r),a.current.removeEventListener("expander-collapse",s)),u.current&&ee(u.current)}},[i]);function H(r,s){m!==!1&&(l.current.expanded=!1),B(s.index),U(r,s)}function J(){l.current.expanded=!1}const Q=R&&!L?"div":"span";return e.createElement(Q,{ref:a,className:E("listbox-button",y,{"listbox-button--fluid":L,"listbox-button--form":P==="form","listbox-button--error":t||h})},e.createElement("button",{...G,disabled:i,ref:u,className:E("listbox-button__control","btn",{[`btn--split-${O}`]:O,"btn--borderless":n,"btn--form":!n,"btn--truncated":R,"btn--floating-label":v}),"aria-label":D&&`${c}: ${D}`,value:p,type:"button","aria-haspopup":"listbox","aria-labelledby":f&&`${q} ${f}`,"aria-invalid":t||h},e.createElement("span",{className:"btn__cell"},v?e.createElement(e.Fragment,null,e.createElement("span",{className:E("btn__floating-label","btn__floating-label--animate",!p&&"btn__floating-label--inline")},v),e.createElement($,{icon:C,labelId:f,text:p,unselectedText:k,postfixLabel:S})):e.createElement(e.Fragment,null,I?e.createElement("span",{className:"btn__label"},I):null,e.createElement($,{alwaysDisplay:!0,icon:C,labelId:f,text:p,unselectedText:k,postfixLabel:S})),e.createElement(Y.EbayIcon,{name:"chevronDown12"}))),e.createElement(_.EbayListbox,{className:"listbox-button__listbox",selectClassName:"listbox-button__native",tabIndex:-1,listSelection:j,name:K,maxHeight:A,onChange:H,onEscape:J},b.map((r,s)=>e.createElement(_.EbayListboxOption,{key:r.props.value||s,selected:s===w,className:E("listbox-button__option",r.props.className),...r.props}))))};exports.EbayListboxButton=ne;exports.EbayListboxButtonOption=te;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const index = require("../index-DcH7Tjjd.js");
+const classNames = require("classnames");
+const listbox = require("../listbox-DGbY99kq.js");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const icon = require("../icon-B17Di3YL.js");
+function onKeyDown(e) {
+  if (e.keyCode >= 32 && e.keyCode <= 40) {
+    e.preventDefault();
+  }
+}
+function add(el) {
+  el.addEventListener("keydown", onKeyDown);
+}
+function remove(el) {
+  el.removeEventListener("keydown", onKeyDown);
+}
+const RenderText = ({ alwaysDisplay, icon: icon2, labelId, text, unselectedText, postfixLabel }) => {
+  if (icon2) {
+    return React.createElement("span", { id: labelId, className: "btn__text" }, icon2);
+  }
+  if (text || alwaysDisplay) {
+    const displayText = text || unselectedText;
+    return React.createElement(
+      "span",
+      { id: labelId, className: "btn__text" },
+      displayText,
+      postfixLabel && React.createElement("span", { className: "btn__postfix-label" }, postfixLabel)
+    );
+  }
+};
+function getSelectedValueIndex({ selected, value, options }) {
+  if (selected !== void 0) {
+    return selected;
+  }
+  if (value !== void 0) {
+    return options.findIndex((option) => option.props.value === value);
+  }
+  return options.findIndex((option) => option.props.selected);
+}
+const EbayListboxButtonOption = listbox.EbayListboxOption;
+const EbayListboxButton = ({ "aria-invalid": invalid, a11yIconPrefixText, borderless, children, className, collapseOnSelect, disabled, floatingLabel, fluid, hasError, listSelection, maxHeight, name, postfixLabel, prefixId, prefixLabel, selected, split, truncate, unselectedText = "-", value, variant, onChange = () => {
+}, onExpand = () => {
+}, onCollapse = () => {
+}, ...rest }) => {
+  const containerRef = React.useRef();
+  const buttonRef = React.useRef();
+  const expanderRef = React.useRef();
+  const options = common_componentUtils_utils.filterByType(children, listbox.EbayListboxOption);
+  const [selectedIndex, setSelectedIndex] = React.useState(getSelectedValueIndex({ selected, value, options }));
+  const selectedOption = options[selectedIndex];
+  const selectedText = selectedOption && (selectedOption.props.text || selectedOption.props.children);
+  const selectedIcon = selectedOption && selectedOption.props.icon;
+  const a11ySelectedIconText = selectedIcon && selectedText;
+  const labelId = prefixId && "expand-btn-text";
+  React.useEffect(() => {
+    setSelectedIndex(getSelectedValueIndex({ selected, value, options }));
+  }, [value, selected]);
+  React.useEffect(() => {
+    function handleExpand() {
+      var _a, _b;
+      (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".listbox-button__listbox")) == null ? void 0 : _b.scroll();
+      onExpand();
+    }
+    function handleCollapse() {
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = buttonRef.current) == null ? void 0 : _a.focus();
+      });
+      onCollapse();
+    }
+    if (options.length && !disabled) {
+      expanderRef.current = new index.src_default(containerRef.current, {
+        alwaysDoFocusManagement: true,
+        autoCollapse: true,
+        expandOnClick: true,
+        simulateSpacebarClick: true,
+        contentSelector: ".listbox-button__listbox",
+        hostSelector: ".listbox-button__control",
+        expandedClass: "listbox-button--expanded",
+        focusManagement: "content"
+      });
+      containerRef.current.addEventListener("expander-expand", handleExpand);
+      containerRef.current.addEventListener("expander-collapse", handleCollapse);
+    }
+    add(buttonRef.current);
+    return () => {
+      if (expanderRef.current) {
+        expanderRef.current.destroy();
+        expanderRef.current = void 0;
+      }
+      if (containerRef.current) {
+        containerRef.current.removeEventListener("expander-expand", handleExpand);
+        containerRef.current.removeEventListener("expander-collapse", handleCollapse);
+      }
+      if (buttonRef.current) {
+        remove(buttonRef.current);
+      }
+    };
+  }, [disabled]);
+  function handleListboxChange(event, data) {
+    if (collapseOnSelect !== false) {
+      expanderRef.current.expanded = false;
+    }
+    setSelectedIndex(data.index);
+    onChange(event, data);
+  }
+  function handleListboxEscape() {
+    expanderRef.current.expanded = false;
+  }
+  const Container = truncate && !fluid ? "div" : "span";
+  return React.createElement(
+    Container,
+    { ref: containerRef, className: classNames("listbox-button", className, {
+      "listbox-button--fluid": fluid,
+      "listbox-button--form": variant === "form",
+      "listbox-button--error": invalid || hasError
+    }) },
+    React.createElement(
+      "button",
+      { ...rest, disabled, ref: buttonRef, className: classNames("listbox-button__control", "btn", {
+        [`btn--split-${split}`]: split,
+        "btn--borderless": borderless,
+        "btn--form": !borderless,
+        "btn--truncated": truncate,
+        "btn--floating-label": floatingLabel
+      }), "aria-label": a11ySelectedIconText && `${a11yIconPrefixText}: ${a11ySelectedIconText}`, value: selectedText, type: "button", "aria-haspopup": "listbox", "aria-labelledby": labelId && `${prefixId} ${labelId}`, "aria-invalid": invalid || hasError },
+      React.createElement(
+        "span",
+        { className: "btn__cell" },
+        floatingLabel ? React.createElement(
+          React.Fragment,
+          null,
+          React.createElement("span", { className: classNames("btn__floating-label", "btn__floating-label--animate", !selectedText && "btn__floating-label--inline") }, floatingLabel),
+          React.createElement(RenderText, { icon: selectedIcon, labelId, text: selectedText, unselectedText, postfixLabel })
+        ) : React.createElement(
+          React.Fragment,
+          null,
+          prefixLabel ? React.createElement("span", { className: "btn__label" }, prefixLabel) : null,
+          React.createElement(RenderText, { alwaysDisplay: true, icon: selectedIcon, labelId, text: selectedText, unselectedText, postfixLabel })
+        ),
+        React.createElement(icon.EbayIcon, { name: "chevronDown12" })
+      )
+    ),
+    React.createElement(listbox.EbayListbox, { className: "listbox-button__listbox", selectClassName: "listbox-button__native", tabIndex: -1, listSelection, name, maxHeight, onChange: handleListboxChange, onEscape: handleListboxEscape }, options.map((option, index2) => React.createElement(listbox.EbayListboxOption, { key: option.props.value || index2, selected: index2 === selectedIndex, className: classNames("listbox-button__option", option.props.className), ...option.props })))
+  );
+};
+exports.EbayListboxButton = EbayListboxButton;
+exports.EbayListboxButtonOption = EbayListboxButtonOption;

package/ebay-menu/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-CV-INYLM.js"),t=require("react"),n=require("classnames"),u=({className:a,...r})=>t.createElement("hr",{...r,className:n(a,"menu__separator"),role:"separator"});exports.EbayMenu=e.EbayMenu;exports.EbayMenuItem=e.EbayMenuItem;exports.EbayMenuSeparator=u;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const menu = require("../menu-Bsy48CE1.js");
+const React = require("react");
+const classNames = require("classnames");
+const EbayMenuItemSeparator = ({ className, ...rest }) => React.createElement("hr", { ...rest, className: classNames(className, "menu__separator"), role: "separator" });
+exports.EbayMenu = menu.EbayMenu;
+exports.EbayMenuItem = menu.EbayMenuItem;
+exports.EbayMenuSeparator = EbayMenuItemSeparator;

package/ebay-menu-button/index.js

@@ -1 +1,113 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("classnames"),y=require("../common/component-utils/utils/index.js"),h=require("../menu-CV-INYLM.js"),Q=require("../button-DGuEBUDJ.js"),X=require("../icon-button-Cwaj-eT9.js"),Y=require("../icon-TuxfQndO.js"),Z=require("../common/random-id/index.js"),ee=require("../common/event-utils/index.js"),ne=({type:t,variant:a="button",className:c,text:m="",fixWidth:d,reverse:i,expanded:x,noToggleIcon:b,checked:u,collapseOnSelect:w,a11yText:N,prefixId:I,prefixLabel:S,onClick:L=()=>{},onExpand:R=()=>{},onCollapse:K=()=>{},onChange:P=()=>{},onSelect:T=()=>{},children:f,...A})=>{const[s,E]=e.useState(x),[_,F]=e.useState(),B=e.useRef(null),k=e.useRef(),M=y.filterByType(f,[h.EbayMenuItem,v]),O=M.map(n=>!!n.props.checked),[p,U]=e.useState(O),W=y.findComponent(f,q),j=y.findComponent(f,Y.EbayIcon),D=te({text:m,prefixId:I,prefixLabel:S,menuButtonLabel:W,icon:j}),V=r("menu-button",c),$=r("menu-button__menu",{"menu-button__menu--fix-width":d,"menu-button__menu--reverse":i});e.useEffect(()=>{const n=o=>{const l=k.current,g=l&&l.contains(o.target);(w||!g)&&E(!1)};return s?(R(),setTimeout(()=>{document.addEventListener("click",n,!1)})):s===!1&&K(),()=>document.removeEventListener("click",n,!1)},[s]),e.useEffect(()=>{F(Z.randomId())},[]);const z=n=>{ee.handleEscapeKeydown(n,()=>{var o;E(!1),(o=B.current)==null||o.focus()})},C={ref:B,className:"menu-button__button","aria-expanded":!!s,"aria-haspopup":!0,"aria-label":N,"aria-controls":_,"aria-labelledby":I,onClick:n=>{E(!s),L(n)},...A},G=(n,o)=>{if(t==="radio"||t==="checkbox"){const l=p.map((g,J)=>o.indexes.includes(J));U(l)}P(n,o)},H=()=>{const n=p.findIndex(Boolean);return n>-1?n:u};return e.createElement("span",{className:V},a==="overflow"?e.createElement(X.EbayIconButton,{icon:"overflowVertical16",...C}):e.createElement(Q.EbayButton,{variant:a==="form"?"form":void 0,bodyState:b?void 0:"expand",...C},D),s&&e.createElement(h.EbayMenu,{baseEl:"div",ref:k,type:t,className:$,tabIndex:-1,id:_,autofocus:!0,checked:H(),onKeyDown:z,onChange:G,onSelect:T},M.map((n,o)=>e.cloneElement(n,{...n.props,className:r(n.props.className,"menu-button__item"),key:o,checked:p[o]}))))};function te({text:t,prefixId:a,prefixLabel:c,menuButtonLabel:m,icon:d}){const i=t.length?e.createElement("span",null,t):null,b=[!a&&c&&[e.createElement("span",{className:"menu-button-prefix-label"},c),e.createElement(e.Fragment,null," ")],m||i],u=[d,b].flat().filter(Boolean);return u.length?u:null}const v=({className:t,...a})=>e.createElement("hr",{...a,className:r(t,"menu-button__separator"),role:"separator"}),q=({children:t})=>e.createElement(e.Fragment,null,t);exports.EbayMenuButtonItem=h.EbayMenuItem;exports.EbayMenuButton=ne;exports.EbayMenuButtonLabel=q;exports.EbayMenuButtonSeparator=v;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const menu = require("../menu-Bsy48CE1.js");
+const button = require("../button-B4bZIgwB.js");
+const iconButton = require("../icon-button-BQWoMgX1.js");
+const icon = require("../icon-B17Di3YL.js");
+const common_randomId = require("../common/random-id/index.js");
+const common_eventUtils = require("../common/event-utils/index.js");
+const EbayMenuButton = ({ type, variant = "button", className, text = "", fixWidth, reverse, expanded: defaultExpanded, noToggleIcon, checked, collapseOnSelect, a11yText, prefixId, prefixLabel, onClick = () => {
+}, onExpand = () => {
+}, onCollapse = () => {
+}, onChange = () => {
+}, onSelect = () => {
+}, children, ...rest }) => {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const [menuId, setMenuId] = React.useState();
+  const buttonRef = React.useRef(null);
+  const menuRef = React.useRef();
+  const menuItems = common_componentUtils_utils.filterByType(children, [menu.EbayMenuItem, EbayMenuButtonSeparator]);
+  const defaultIndexes = menuItems.map((item) => Boolean(item.props.checked));
+  const [checkedIndexes, setCheckedIndexes] = React.useState(defaultIndexes);
+  const menuButtonLabel = common_componentUtils_utils.findComponent(children, EbayMenuButtonLabel);
+  const icon$1 = common_componentUtils_utils.findComponent(children, icon.EbayIcon);
+  const label = labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon: icon$1 });
+  const wrapperClasses = classNames("menu-button", className);
+  const menuClasses = classNames("menu-button__menu", {
+    "menu-button__menu--fix-width": fixWidth,
+    "menu-button__menu--reverse": reverse
+  });
+  React.useEffect(() => {
+    const handleBackgroundClick = (e) => {
+      const menuEl = menuRef.current;
+      const menuClicked = menuEl && menuEl.contains(e.target);
+      if (collapseOnSelect || !menuClicked) {
+        setExpanded(false);
+      }
+    };
+    if (expanded) {
+      onExpand();
+      setTimeout(() => {
+        document.addEventListener("click", handleBackgroundClick, false);
+      });
+    } else if (expanded === false) {
+      onCollapse();
+    }
+    return () => document.removeEventListener("click", handleBackgroundClick, false);
+  }, [expanded]);
+  React.useEffect(() => {
+    setMenuId(common_randomId.randomId());
+  }, []);
+  const handleMenuKeydown = (e) => {
+    common_eventUtils.handleEscapeKeydown(e, () => {
+      var _a;
+      setExpanded(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    });
+  };
+  const buttonProps = {
+    ref: buttonRef,
+    className: "menu-button__button",
+    "aria-expanded": !!expanded,
+    "aria-haspopup": true,
+    "aria-label": a11yText,
+    "aria-controls": menuId,
+    "aria-labelledby": prefixId,
+    onClick: (e) => {
+      setExpanded(!expanded);
+      onClick(e);
+    },
+    ...rest
+  };
+  const handleOnChange = (e, eventProps) => {
+    if (type === "radio" || type === "checkbox") {
+      const newCheckedIndexes = checkedIndexes.map((_, i) => eventProps.indexes.includes(i));
+      setCheckedIndexes(newCheckedIndexes);
+    }
+    onChange(e, eventProps);
+  };
+  const checkedIndex = () => {
+    const index = checkedIndexes.findIndex(Boolean);
+    return index > -1 ? index : checked;
+  };
+  return React.createElement(
+    "span",
+    { className: wrapperClasses },
+    variant === "overflow" ? React.createElement(iconButton.EbayIconButton, { icon: "overflowVertical16", ...buttonProps }) : React.createElement(button.EbayButton, { variant: variant === "form" ? "form" : void 0, bodyState: noToggleIcon ? void 0 : "expand", ...buttonProps }, label),
+    expanded && React.createElement(menu.EbayMenu, { baseEl: "div", ref: menuRef, type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checkedIndex(), onKeyDown: handleMenuKeydown, onChange: handleOnChange, onSelect }, menuItems.map((item, i) => React.cloneElement(item, {
+      ...item.props,
+      className: classNames(item.props.className, "menu-button__item"),
+      key: i,
+      checked: checkedIndexes[i]
+    })))
+  );
+};
+function labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon: icon2 }) {
+  const textLabelElement = text.length ? React.createElement("span", null, text) : null;
+  const prefixLabelElement = !prefixId && prefixLabel && [
+    React.createElement("span", { className: "menu-button-prefix-label" }, prefixLabel),
+    React.createElement(React.Fragment, null, " ")
+  ];
+  const labelWithPrefix = [prefixLabelElement, menuButtonLabel || textLabelElement];
+  const labelArray = [icon2, labelWithPrefix].flat().filter(Boolean);
+  return labelArray.length ? labelArray : null;
+}
+const EbayMenuButtonSeparator = ({ className, ...rest }) => React.createElement("hr", { ...rest, className: classNames(className, "menu-button__separator"), role: "separator" });
+const EbayMenuButtonLabel = ({ children }) => React.createElement(React.Fragment, null, children);
+exports.EbayMenuButtonItem = menu.EbayMenuItem;
+exports.EbayMenuButton = EbayMenuButton;
+exports.EbayMenuButtonLabel = EbayMenuButtonLabel;
+exports.EbayMenuButtonSeparator = EbayMenuButtonSeparator;

package/ebay-notice-base/index.js

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=require("../notice-content-C0ZStfuX.js"),n=({children:e})=>t.createElement("span",{className:"page-notice__title"},e);exports.EbayNoticeContent=o.EbayNoticeContent;exports.EbayNoticeTitle=n;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const noticeContent = require("../notice-content-BhUeK1pd.js");
+const EbayNoticeTitle = ({ children }) => React.createElement("span", { className: "page-notice__title" }, children);
+exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
+exports.EbayNoticeTitle = EbayNoticeTitle;

package/ebay-page-notice/index.js

@@ -1 +1,50 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),p=require("../notice-content-9iF4T8uB.js"),l=require("../notice-content-C0ZStfuX.js"),r=require("../icon-TuxfQndO.js");require("classnames");const s=require("../notice-footer-Cw1DMzoB.js"),u=require("../common/notice-utils/notice-cta/index.js"),C=({id:n,status:e="general",children:a,a11yDismissText:o,"aria-label":E,onDismiss:b=()=>{},...g})=>{const[m,N]=t.useState(!1),i=t.Children.toArray(a).find(c=>c.type===l.EbayNoticeContent);if(!i)throw new Error("EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice");const d=c=>{N(!0),b(c)};return m?null:t.createElement("section",{...g,"aria-labelledby":n||`${e}-status`,className:`page-notice ${e!=="general"?`page-notice--${e}`:""}`,role:"region"},e!=="general"?t.createElement("div",{className:"page-notice__header",id:n||`${e}-status`},t.createElement(r.EbayIcon,{name:`${e}Filled16`,a11yText:E,a11yVariant:"label"})):null,t.createElement(p.NoticeContent,{...i.props,type:"page"}),a,o&&t.createElement(y,null,t.createElement("button",{"aria-label":o,className:"fake-link page-notice__dismiss",onClick:d},t.createElement(r.EbayIcon,{name:"close16"}))))},P=({className:n,as:e,children:a,...o})=>t.createElement(s.NoticeTitle,{...o,className:n,as:e,type:"page"},a),y=({className:n,children:e})=>t.createElement(s.NoticeFooter,{className:n,type:"page"},e),h=({className:n,children:e})=>t.createElement(u,{className:n,type:"page"},e);exports.EbayNoticeContent=l.EbayNoticeContent;exports.EbayPageNotice=C;exports.EbayPageNoticeCTA=h;exports.EbayPageNoticeFooter=y;exports.EbayPageNoticeTitle=P;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const noticeContent$1 = require("../notice-content-BTXVxttv.js");
+const noticeContent = require("../notice-content-BhUeK1pd.js");
+const icon = require("../icon-B17Di3YL.js");
+require("classnames");
+const noticeFooter = require("../notice-footer-CIQ8SM6N.js");
+const common_noticeUtils_noticeCta = require("../common/notice-utils/notice-cta/index.js");
+const EbayPageNotice = ({ id, status = "general", children, a11yDismissText, "aria-label": ariaLabel, onDismiss = () => {
+}, ...rest }) => {
+  const [dismissed, setDismissed] = React.useState(false);
+  const childrenArray = React.Children.toArray(children);
+  const content = childrenArray.find((child) => child.type === noticeContent.EbayNoticeContent);
+  if (!content) {
+    throw new Error(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`);
+  }
+  const handleDismissed = (event) => {
+    setDismissed(true);
+    onDismiss(event);
+  };
+  return dismissed ? null : React.createElement(
+    "section",
+    { ...rest, "aria-labelledby": id || `${status}-status`, className: `page-notice ${status !== `general` ? `page-notice--${status}` : ``}`, role: "region" },
+    status !== `general` ? React.createElement(
+      "div",
+      { className: "page-notice__header", id: id || `${status}-status` },
+      React.createElement(icon.EbayIcon, { name: `${status}Filled16`, a11yText: ariaLabel, a11yVariant: "label" })
+    ) : null,
+    React.createElement(noticeContent$1.NoticeContent, { ...content.props, type: "page" }),
+    children,
+    a11yDismissText && React.createElement(
+      EbayPageNoticeFooter,
+      null,
+      React.createElement(
+        "button",
+        { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
+        React.createElement(icon.EbayIcon, { name: "close16" })
+      )
+    )
+  );
+};
+const EbayPageNoticeTitle = ({ className, as, children, ...rest }) => React.createElement(noticeFooter.NoticeTitle, { ...rest, className, as, type: "page" }, children);
+const EbayPageNoticeFooter = ({ className, children }) => React.createElement(noticeFooter.NoticeFooter, { className, type: "page" }, children);
+const EbayPageNoticeCTA = ({ className, children }) => React.createElement(common_noticeUtils_noticeCta, { className, type: "page" }, children);
+exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
+exports.EbayPageNotice = EbayPageNotice;
+exports.EbayPageNoticeCTA = EbayPageNoticeCTA;
+exports.EbayPageNoticeFooter = EbayPageNoticeFooter;
+exports.EbayPageNoticeTitle = EbayPageNoticeTitle;

package/ebay-pagination/index.js

@@ -1 +1,244 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),J=require("../menu-button-BZ66jxvI.js"),H=require("classnames"),ee=require("../debounce-BQsYxxOL.js"),te=require("../common/component-utils/utils/index.js"),U=require("../icon-TuxfQndO.js"),ne=require("../common/component-utils/forwardRef/index.js");require("../array.polyfill.flat-5BAolFdk.js");const re=1,T=9,K=4,$=2,oe=T-$;function ie(e,n,a=e,s=null){const h=s==="show-last"||s==="overflow"&&e>T,l=s==="overflow"&&e>T,c=Math.min(a,e),v=Math.max(0,n-Math.ceil((c-1)/2)),E=c<K?n:Math.max(0,n-Math.floor((c-1)/2)),m=(h?E:v)+c,d=m>=e,D=n<=K,I=(b,i)=>{const r=k(e,b,i);return c>2?(r[i-2]="dots",r[i-1]="hidden",r[e-1]="visible"):c>1&&(r[i-1]="dots"),r},g=(b,i)=>{if(D)return I(0,i);if(d){const _=k(e,e-oe,e);return _[0]="visible",_[1]="dots",_}const r=k(e,n-$,n+$+1);return r[0]="visible",r[1]=D?"visible":"dots",r[e-2]="dots",r[e-1]="visible",r};return d&&e<=T?k(e,e-c):h?l?g(E,m):I(E,m):k(e,v,m)}function ae(e,n,a,s="show-range"){if(e===-1)return[];const h=s==="overflow"?T:se(Math.min(a,n),re,T);return ie(a,e-1,h,s)}function se(e,n,a){return e<=n?n:e>=a?a:e}function k(e,n,a){return Array(e).fill("hidden").fill("visible",n,a)}function ce(e){if(!e)return 0;e.style.width="100vw";const n=e.offsetWidth;return e.style.width=null,n}const ue=({id:e="ebay-pagination",className:n,a11yCurrentText:a="Pagination - Current Page",a11yPreviousText:s="Previous page",a11yNextText:h="Next page",variant:l="show-range",fluid:c=!1,onPrevious:v=()=>{},onNext:E=()=>{},onSelect:m=()=>{},children:d,...D})=>{const I=t.useRef(null),g=t.useRef([]);g.current=t.Children.map(d,t.createRef);const b=te.filterBy(d,({props:o})=>o.type===void 0||o.type==="page").length,i=t.useRef(0),r=t.useRef(0),_=()=>{var y,N,x,p;const o=r.current||((N=(y=g.current[0])==null?void 0:y.current)==null?void 0:N.offsetWidth);r.current=o;const f=i.current||((p=(x=g.current[1])==null?void 0:x.current)==null?void 0:p.offsetWidth);return i.current=f,f?Math.floor((ce(I.current)-o*2)/f):0},[A,L]=t.useState([]),[w,q]=t.useState(0),S=o=>{const f=o||g.current.findIndex(x=>{var p;return((p=x.current)==null?void 0:p.getAttribute("aria-current"))==="page"}),y=_(),N=ae(f,y,b,l);q(f),L(["hidden",...N])};t.useEffect(()=>{const o=ee.debounce(S,16);return S(),window.addEventListener("resize",()=>o()),()=>{window.removeEventListener("resize",()=>o())}},[d]);const W=o=>{let f=0;const y=[],N=[],x=[],p=A.indexOf("dots"),F=A.lastIndexOf("dots");return t.Children.map(d,(j,M)=>{const{type:O="page",current:Q,disabled:Y,href:G,children:V}=j.props,B=A[M]==="dots",P=`${e}-item-${M}`,X=A[M]==="hidden",Z={current:Q,disabled:Y,href:G,type:B&&O==="page"?"separator":O,children:B?t.createElement(U.EbayIcon,{name:"overflowHorizontal24",focusable:!1}):V,pageIndex:O==="page"?f++:void 0,key:P,hide:X,onPrevious:v,onNext:E,onSelect:m,a11yPreviousText:s,a11yNextText:h,ref:g.current[M]};if((X||B)&&O==="page"){const C=t.createElement(J.EbayFakeMenuButtonItem,{key:P,href:G,onClick:z=>{G||z.preventDefault();const R=z.currentTarget;m(z,{value:(R==null?void 0:R.innerText)||"",index:f}),S(Number(R==null?void 0:R.innerText))}},V);p===F&&x.push(C),w-2>p&&M<w&&y.push(C),w+2<F&&M>w&&N.push(C)}if(o==="page"&&B&&l==="overflow"){let C=x;return p!==F&&(C=M===2?y:N),t.createElement("li",{key:P},t.createElement("span",{className:"pagination__item",role:"separator"},t.createElement(J.EbayMenuButton,{a11yText:"Menu",borderless:!0,variant:"overflow",noToggleIcon:!0},C)))}return o===O?t.cloneElement(j,Z):null})},u=`${e}-pagination-heading`;return t.createElement("nav",{...D,role:"navigation",className:H(n,"pagination",{"pagination--fluid":c}),"aria-labelledby":u,ref:I},t.createElement("span",{"aria-live":"polite",role:"status"},t.createElement("h2",{className:"clipped",id:u},a)),W("previous"),t.createElement("ol",{className:"pagination__items"},W("page")),W("next"))},le=({pageIndex:e=0,key:n,current:a,disabled:s,type:h="page",href:l,hide:c,children:v,a11yPreviousText:E="Previous page",a11yNextText:m="Next page",onSelect:d,onNext:D,onPrevious:I,className:g,style:b,forwardedRef:i,...r})=>{const _=u=>{var o;d(u,{value:((o=u.currentTarget)==null?void 0:o.innerText)||"",index:e})},A=u=>{u.currentTarget.getAttribute("aria-disabled")||D(u)},L=u=>{u.currentTarget.getAttribute("aria-disabled")||I(u)},w=!!l,q=w?"a":"button",S=w?"icon-link":"icon-btn",W={...b,minWidth:"40px"};switch(h){case"previous":return t.createElement(q,{...r,ref:i,"aria-disabled":s?"true":void 0,"aria-label":E,href:s?void 0:l,className:H(S,"pagination__previous"),style:W,onClick:L},t.createElement(U.EbayIcon,{name:"arrowLeft16"}));case"next":return t.createElement(q,{...r,ref:i,"aria-disabled":s?"true":void 0,"aria-label":m,href:s?void 0:l,className:H(S,"pagination__next"),style:W,onClick:A},t.createElement(U.EbayIcon,{name:"arrowRight16"}));case"separator":return t.createElement("span",{key:n,style:b,className:"pagination__item",ref:i,role:"separator"},v);default:return t.createElement("li",{...r,hidden:c},t.createElement(q,{ref:i,"aria-current":a?"page":void 0,href:l,className:"pagination__item",style:b,key:n,onClick:_},v))}},me=ne.withForwardRef(le);exports.EbayPagination=ue;exports.EbayPaginationItem=me;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ebayFakeMenuButton_menuButton = require("../menu-button-CKGsgg6G.js");
+const classNames = require("classnames");
+const debounce = require("../debounce-v8bWAUnY.js");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const icon = require("../icon-B17Di3YL.js");
+const common_componentUtils_forwardRef = require("../common/component-utils/forwardRef/index.js");
+require("../array.polyfill.flat-DyxysTxZ.js");
+const MIN_PAGES = 1;
+const MAX_PAGES = 9;
+const MIN_VISIBLE_ITEMS = 4;
+const LEADING_SPACE_WITH_DOT = 2;
+const TRAILING_SPACE_WITH_DOT = MAX_PAGES - LEADING_SPACE_WITH_DOT;
+function pageNumbersAround(totalPages, selectedPage, maxVisiblePages = totalPages, variant = null) {
+  const withDots = variant === "show-last" || variant === "overflow" && totalPages > MAX_PAGES;
+  const hasLeadingDots = variant === "overflow" && totalPages > MAX_PAGES;
+  const visibleItems = Math.min(maxVisiblePages, totalPages);
+  const startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
+  const startIndexWithDots = visibleItems < MIN_VISIBLE_ITEMS ? selectedPage : Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
+  const endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
+  const closeToEnd = endIndex >= totalPages;
+  const closeToFront = selectedPage <= MIN_VISIBLE_ITEMS;
+  const visibleRangeWithDots = (start, end) => {
+    const items = visibleRange(totalPages, start, end);
+    if (visibleItems > 2) {
+      items[end - 2] = "dots";
+      items[end - 1] = "hidden";
+      items[totalPages - 1] = "visible";
+    } else if (visibleItems > 1) {
+      items[end - 1] = "dots";
+    }
+    return items;
+  };
+  const visibleRangeWithOverflowDots = (start, end) => {
+    if (closeToFront) {
+      return visibleRangeWithDots(0, end);
+    } else if (closeToEnd) {
+      const items2 = visibleRange(totalPages, totalPages - TRAILING_SPACE_WITH_DOT, totalPages);
+      items2[0] = "visible";
+      items2[1] = "dots";
+      return items2;
+    }
+    const items = visibleRange(totalPages, selectedPage - LEADING_SPACE_WITH_DOT, selectedPage + LEADING_SPACE_WITH_DOT + 1);
+    items[0] = "visible";
+    items[1] = closeToFront ? "visible" : "dots";
+    items[totalPages - 2] = "dots";
+    items[totalPages - 1] = "visible";
+    return items;
+  };
+  if (closeToEnd && totalPages <= MAX_PAGES) {
+    return visibleRange(totalPages, totalPages - visibleItems);
+  }
+  if (withDots) {
+    return hasLeadingDots ? visibleRangeWithOverflowDots(startIndexWithDots, endIndex) : visibleRangeWithDots(startIndexWithDots, endIndex);
+  }
+  return visibleRange(totalPages, startIndexWithoutDots, endIndex);
+}
+function calcPageState(selectedPage, visiblePages, totalPages, variant = "show-range") {
+  if (selectedPage === -1) {
+    return [];
+  }
+  const adjustedNumPages = variant === "overflow" ? MAX_PAGES : clamp(Math.min(totalPages, visiblePages), MIN_PAGES, MAX_PAGES);
+  return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant);
+}
+function clamp(n, min, max) {
+  return n <= min ? min : n >= max ? max : n;
+}
+function visibleRange(totalItems, start, end) {
+  return Array(totalItems).fill("hidden").fill("visible", start, end);
+}
+function getMaxWidth(el) {
+  if (!el) {
+    return 0;
+  }
+  el.style.width = "100vw";
+  const result = el.offsetWidth;
+  el.style.width = null;
+  return result;
+}
+const EbayPagination = ({ id = "ebay-pagination", className, a11yCurrentText = "Pagination - Current Page", a11yPreviousText = "Previous page", a11yNextText = "Next page", variant = "show-range", fluid = false, onPrevious = () => {
+}, onNext = () => {
+}, onSelect = () => {
+}, children, ...rest }) => {
+  const paginationContainerRef = React.useRef(null);
+  const childPageRefs = React.useRef([]);
+  childPageRefs.current = React.Children.map(children, React.createRef);
+  const totalPages = common_componentUtils_utils.filterBy(children, ({ props }) => props.type === void 0 || props.type === "page").length;
+  const itemWidthRef = React.useRef(0);
+  const arrowWidthRef = React.useRef(0);
+  const getNumOfVisiblePageItems = () => {
+    var _a, _b, _c, _d;
+    const pageArrowWidth = arrowWidthRef.current || ((_b = (_a = childPageRefs.current[0]) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth);
+    arrowWidthRef.current = pageArrowWidth;
+    const pageItemWidth = itemWidthRef.current || ((_d = (_c = childPageRefs.current[1]) == null ? void 0 : _c.current) == null ? void 0 : _d.offsetWidth);
+    itemWidthRef.current = pageItemWidth;
+    return pageItemWidth ? Math.floor((getMaxWidth(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) : 0;
+  };
+  const [page, setPage] = React.useState([]);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const updatePages = (selectedPageIndexFromDotMenu) => {
+    const selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex((pageRef) => {
+      var _a;
+      return ((_a = pageRef.current) == null ? void 0 : _a.getAttribute("aria-current")) === "page";
+    });
+    const visiblePageItems = getNumOfVisiblePageItems();
+    const pageState = calcPageState(selectedPageIndex, visiblePageItems, totalPages, variant);
+    setSelectedIndex(selectedPageIndex);
+    setPage(["hidden", ...pageState]);
+  };
+  React.useEffect(() => {
+    const debouncedUpdate = debounce.debounce(updatePages, 16);
+    updatePages();
+    window.addEventListener("resize", () => debouncedUpdate());
+    return () => {
+      window.removeEventListener("resize", () => debouncedUpdate());
+    };
+  }, [children]);
+  const createChildItems = (itemType) => {
+    let pageIndex = 0;
+    const firstDotItems = [];
+    const secondDotItems = [];
+    const allDotItems = [];
+    const firstDot = page.indexOf("dots");
+    const lastDot = page.lastIndexOf("dots");
+    return React.Children.map(children, (item, index) => {
+      const { type = "page", current, disabled, href, children: text } = item.props;
+      const isDot = page[index] === "dots";
+      const key = `${id}-item-${index}`;
+      const hide = page[index] === "hidden";
+      const isSeparator = isDot && type === "page";
+      const newProps = {
+        current,
+        disabled,
+        href,
+        type: isSeparator ? "separator" : type,
+        children: isDot ? React.createElement(icon.EbayIcon, { name: "overflowHorizontal24", focusable: false }) : text,
+        pageIndex: type === "page" ? pageIndex++ : void 0,
+        key,
+        hide,
+        onPrevious,
+        onNext,
+        onSelect,
+        a11yPreviousText,
+        a11yNextText,
+        ref: childPageRefs.current[index]
+      };
+      if ((hide || isDot) && type === "page") {
+        const itemComponent = React.createElement(ebayFakeMenuButton_menuButton.EbayFakeMenuButtonItem, { key, href, onClick: (event) => {
+          if (!href) {
+            event.preventDefault();
+          }
+          const currentTarget = event.currentTarget;
+          onSelect(event, { value: (currentTarget == null ? void 0 : currentTarget.innerText) || "", index: pageIndex });
+          updatePages(Number(currentTarget == null ? void 0 : currentTarget.innerText));
+        } }, text);
+        if (firstDot === lastDot) {
+          allDotItems.push(itemComponent);
+        }
+        if (selectedIndex - 2 > firstDot && index < selectedIndex) {
+          firstDotItems.push(itemComponent);
+        }
+        if (selectedIndex + 2 < lastDot && index > selectedIndex) {
+          secondDotItems.push(itemComponent);
+        }
+      }
+      if (itemType === "page" && isDot && variant === "overflow") {
+        let childComponent = allDotItems;
+        if (firstDot !== lastDot) {
+          childComponent = index === 2 ? firstDotItems : secondDotItems;
+        }
+        return React.createElement(
+          "li",
+          { key },
+          React.createElement(
+            "span",
+            { className: "pagination__item", role: "separator" },
+            React.createElement(ebayFakeMenuButton_menuButton.EbayMenuButton, { a11yText: "Menu", borderless: true, variant: "overflow", noToggleIcon: true }, childComponent)
+          )
+        );
+      }
+      return itemType === type ? React.cloneElement(item, newProps) : null;
+    });
+  };
+  const headingId = `${id}-pagination-heading`;
+  return React.createElement(
+    "nav",
+    { ...rest, role: "navigation", className: classNames(className, "pagination", { "pagination--fluid": fluid }), "aria-labelledby": headingId, ref: paginationContainerRef },
+    React.createElement(
+      "span",
+      { "aria-live": "polite", role: "status" },
+      React.createElement("h2", { className: "clipped", id: headingId }, a11yCurrentText)
+    ),
+    createChildItems("previous"),
+    React.createElement("ol", { className: "pagination__items" }, createChildItems("page")),
+    createChildItems("next")
+  );
+};
+const EbayPaginationItem = ({ pageIndex = 0, key, current, disabled, type = "page", href, hide, children, a11yPreviousText = "Previous page", a11yNextText = "Next page", onSelect, onNext, onPrevious, className, style, forwardedRef, ...rest }) => {
+  const handlePageNumber = (e) => {
+    var _a;
+    onSelect(e, { value: ((_a = e.currentTarget) == null ? void 0 : _a.innerText) || "", index: pageIndex });
+  };
+  const handleNextPage = (e) => {
+    if (!e.currentTarget.getAttribute("aria-disabled")) {
+      onNext(e);
+    }
+  };
+  const handlePreviousPage = (e) => {
+    if (!e.currentTarget.getAttribute("aria-disabled")) {
+      onPrevious(e);
+    }
+  };
+  const isAnchor = !!href;
+  const ButtonOrAnchor = isAnchor ? "a" : "button";
+  const iconClassName = isAnchor ? "icon-link" : "icon-btn";
+  const arrowStyle = { ...style, minWidth: "40px" };
+  switch (type) {
+    case "previous":
+      return React.createElement(
+        ButtonOrAnchor,
+        { ...rest, ref: forwardedRef, "aria-disabled": disabled ? "true" : void 0, "aria-label": a11yPreviousText, href: disabled ? void 0 : href, className: classNames(iconClassName, "pagination__previous"), style: arrowStyle, onClick: handlePreviousPage },
+        React.createElement(icon.EbayIcon, { name: "arrowLeft16" })
+      );
+    case "next":
+      return React.createElement(
+        ButtonOrAnchor,
+        { ...rest, ref: forwardedRef, "aria-disabled": disabled ? "true" : void 0, "aria-label": a11yNextText, href: disabled ? void 0 : href, className: classNames(iconClassName, "pagination__next"), style: arrowStyle, onClick: handleNextPage },
+        React.createElement(icon.EbayIcon, { name: "arrowRight16" })
+      );
+    case "separator":
+      return React.createElement("span", { key, style, className: "pagination__item", ref: forwardedRef, role: "separator" }, children);
+    default:
+      return React.createElement(
+        "li",
+        { ...rest, hidden: hide },
+        React.createElement(ButtonOrAnchor, { ref: forwardedRef, "aria-current": current ? "page" : void 0, href, className: "pagination__item", style, key, onClick: handlePageNumber }, children)
+      );
+  }
+};
+const paginationItem = common_componentUtils_forwardRef.withForwardRef(EbayPaginationItem);
+exports.EbayPagination = EbayPagination;
+exports.EbayPaginationItem = paginationItem;