@ebay/ui-core-react 7.4.0-alpha.7 → 7.4.0-alpha.9

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-Br0AMj3v.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-DfOw_fJc.js");
+exports.EbayListbox = listbox.EbayListbox;
+exports.EbayListboxOption = listbox.EbayListboxOption;
+exports.EbayListboxOptionDescription = listbox.EbayListboxOptionDescription;

package/ebay-listbox/listbox.d.ts

@@ -14,6 +14,7 @@ export type EbayListboxProps = Omit<ComponentProps<'div'>, 'onChange'> & {
     typeaheadTimeoutLength?: number;
     maxHeight?: string | number;
     selectClassName?: string;
+    activeClassName?: string;
     onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
     onEscape?: () => void;
 };

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,CAuM5C,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,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,CA2L5C,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-Br0AMj3v.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-DfOw_fJc.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 listbox-button__options", selectClassName: "listbox-button__native", activeClassName: "listbox-button__option--active", tabIndex: -1, listSelection, name, maxHeight, onChange: handleListboxChange, onEscape: handleListboxEscape }, options.map((option, index2) => React.createElement(listbox.EbayListboxOption, { ...option.props, key: option.props.value || index2, selected: index2 === selectedIndex, className: classNames("listbox-button__option", option.props.className) })))
+  );
+};
+exports.EbayListboxButton = EbayListboxButton;
+exports.EbayListboxButtonOption = EbayListboxButtonOption;

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

@@ -1 +1 @@
-{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EACd,EAAE,EAKL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAiDhD,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,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,2EAAoB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA8LxD,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EACd,EAAE,EAKL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAiDhD,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,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,2EAAoB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA+LxD,CAAA"}

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;