@ebay/ui-core-react 6.2.1 → 6.3.0

package/ebay-infotip/ebay-infotip.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,24 +37,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var component_utils_1 = require("../common/component-utils");
-var tooltip_utils_1 = require("../common/tooltip-utils");
-var ebay_drawer_dialog_1 = require("../ebay-drawer-dialog");
-var ebay_dialog_base_1 = require("../ebay-dialog-base");
-var ebay_infotip_host_1 = __importDefault(require("./ebay-infotip-host"));
-var index_1 = require("./index");
-var EbayInfotip = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, pointer = _a.pointer, overlayStyle = _a.overlayStyle, disabled = _a.disabled, onExpand = _a.onExpand, onCollapse = _a.onCollapse, children = _a.children, initialExpanded = _a.initialExpanded, _c = _a.icon, icon = _c === void 0 ? 'information16' : _c, a11yCloseText = _a.a11yCloseText, ariaLabel = _a["aria-label"], className = _a.className, a11yMaximizeText = _a.a11yMaximizeText, a11yMinimizeText = _a.a11yMinimizeText;
-    var buttonRef = (0, react_1.useRef)();
-    var _d = (0, tooltip_utils_1.useTooltip)({ onCollapse: onCollapse, onExpand: onExpand, initialExpanded: initialExpanded, hostRef: buttonRef }), isExpanded = _d.isExpanded, expandTooltip = _d.expandTooltip, collapseTooltip = _d.collapseTooltip;
-    var isModal = variant === 'modal';
-    var containerRef = (0, react_1.useRef)();
-    var heading = (0, component_utils_1.findComponent)(children, index_1.EbayInfotipHeading);
-    var content = (0, component_utils_1.findComponent)(children, index_1.EbayInfotipContent);
-    var button = (0, component_utils_1.findComponent)(children, ebay_infotip_host_1.default) || (0, react_1.createElement)(ebay_infotip_host_1.default);
-    var toggleTooltip = function () {
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const component_utils_1 = require("../common/component-utils");
+const tooltip_utils_1 = require("../common/tooltip-utils");
+const ebay_drawer_dialog_1 = require("../ebay-drawer-dialog");
+const ebay_dialog_base_1 = require("../ebay-dialog-base");
+const ebay_infotip_host_1 = __importDefault(require("./ebay-infotip-host"));
+const index_1 = require("./index");
+const EbayInfotip = ({ variant = 'default', pointer, overlayStyle, disabled, onExpand, onCollapse, children, initialExpanded, icon = 'information16', a11yCloseText, 'aria-label': ariaLabel, className, a11yMaximizeText, a11yMinimizeText }) => {
+    const buttonRef = (0, react_1.useRef)();
+    const { isExpanded, expandTooltip, collapseTooltip } = (0, tooltip_utils_1.useTooltip)({ onCollapse, onExpand, initialExpanded, hostRef: buttonRef });
+    const isModal = variant === 'modal';
+    const containerRef = (0, react_1.useRef)();
+    const heading = (0, component_utils_1.findComponent)(children, index_1.EbayInfotipHeading);
+    const content = (0, component_utils_1.findComponent)(children, index_1.EbayInfotipContent);
+    const button = (0, component_utils_1.findComponent)(children, ebay_infotip_host_1.default) || (0, react_1.createElement)(ebay_infotip_host_1.default);
+    const toggleTooltip = () => {
         if (isExpanded) {
             collapseTooltip();
         }
@@ -74,16 +62,17 @@ var EbayInfotip = function (_a) {
         }
     };
     if (!content) {
-        throw new Error("EbayInfotip: Please use a EbayInfotipContent that defines the content of the infotip");
+        throw new Error(`EbayInfotip: Please use a EbayInfotipContent that defines the content of the infotip`);
     }
-    var _e = content.props, contentChildren = _e.children, contentProps = __rest(_e, ["children"]);
+    const _a = content.props, { children: contentChildren } = _a, contentProps = __rest(_a, ["children"]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(tooltip_utils_1.Tooltip, { type: "infotip", isExpanded: isExpanded, className: (0, classnames_1.default)(className, { 'dialog--mini': isModal }), ref: containerRef },
-            react_1.default.createElement(tooltip_utils_1.TooltipHost, null, (0, react_1.cloneElement)(button, __assign({ ref: buttonRef, onClick: toggleTooltip, disabled: disabled, variant: variant, 'aria-label': ariaLabel, 'aria-expanded': isExpanded, icon: icon }, button.props))),
-            !isModal && (react_1.default.createElement(tooltip_utils_1.TooltipContent, __assign({}, contentProps, { type: "infotip", style: overlayStyle, pointer: pointer, showCloseButton: true, a11yCloseText: a11yCloseText, onClose: collapseTooltip }),
+            react_1.default.createElement(tooltip_utils_1.TooltipHost, null, (0, react_1.cloneElement)(button, Object.assign({ ref: buttonRef, onClick: toggleTooltip, disabled,
+                variant, 'aria-label': ariaLabel, 'aria-expanded': isExpanded, icon }, button.props))),
+            !isModal && (react_1.default.createElement(tooltip_utils_1.TooltipContent, Object.assign({}, contentProps, { type: "infotip", style: overlayStyle, pointer: pointer, showCloseButton: true, a11yCloseText: a11yCloseText, onClose: collapseTooltip }),
                 heading,
                 contentChildren))),
-        isModal && (react_1.default.createElement(ebay_drawer_dialog_1.EbayDrawerDialog, __assign({}, contentProps, { open: isExpanded, onClose: collapseTooltip, mode: "mini", a11yCloseText: a11yCloseText, className: "dialog--mini__overlay", a11yMaximizeText: a11yMaximizeText, a11yMinimizeText: a11yMinimizeText }),
+        isModal && (react_1.default.createElement(ebay_drawer_dialog_1.EbayDrawerDialog, Object.assign({}, contentProps, { open: isExpanded, onClose: collapseTooltip, a11yCloseText: a11yCloseText, className: "dialog--mini__overlay", a11yMaximizeText: a11yMaximizeText, a11yMinimizeText: a11yMinimizeText }),
             react_1.default.createElement(ebay_dialog_base_1.EbayDialogHeader, null, heading),
             contentChildren))));
 };

package/ebay-inline-notice/inline-notice.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,16 +37,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
-var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
-var component_utils_1 = require("../common/component-utils");
-var ebay_icon_1 = require("../ebay-icon");
-var EbayInlineNotice = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.status, status = _c === void 0 ? 'general' : _c, children = _a.children, _d = _a.hidden, hidden = _d === void 0 ? false : _d, ariaLabel = _a["aria-label"], _e = _a.onNoticeShow, onNoticeShow = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["className", "status", "children", "hidden", 'aria-label', "onNoticeShow"]);
-    (0, react_1.useEffect)(function () {
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
+const notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
+const component_utils_1 = require("../common/component-utils");
+const ebay_icon_1 = require("../ebay-icon");
+const EbayInlineNotice = (_a) => {
+    var { className, status = 'general', children, hidden = false, 'aria-label': ariaLabel, onNoticeShow = () => { } } = _a, rest = __rest(_a, ["className", "status", "children", "hidden", 'aria-label', "onNoticeShow"]);
+    (0, react_1.useEffect)(() => {
         if (!hidden) {
             onNoticeShow();
         }
@@ -65,14 +53,14 @@ var EbayInlineNotice = function (_a) {
     if (hidden) {
         return null;
     }
-    var content = (0, component_utils_1.findComponent)(children, ebay_notice_content_1.EbayNoticeContent);
+    const content = (0, component_utils_1.findComponent)(children, ebay_notice_content_1.EbayNoticeContent);
     if (!content) {
-        throw new Error("EbayInlineNotice: Please use a EbayNoticeContent that defines the content of the notice");
+        throw new Error(`EbayInlineNotice: Please use a EbayNoticeContent that defines the content of the notice`);
     }
-    var isGeneral = status === "general";
-    return (react_1.default.createElement("div", __assign({}, rest, { className: (0, classnames_1.default)(className, 'inline-notice', (_b = {}, _b["inline-notice--".concat(status)] = !isGeneral, _b)) }),
+    const isGeneral = status === `general`;
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, 'inline-notice', { [`inline-notice--${status}`]: !isGeneral }) }),
         !isGeneral ? (react_1.default.createElement("span", { className: "inline-notice__header" },
-            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "".concat(status, "Filled16"), a11yText: ariaLabel, a11yVariant: "label" }))) : null,
-        react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "inline" }))));
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: `${status}Filled16`, a11yText: ariaLabel, a11yVariant: "label" }))) : null,
+        react_1.default.createElement(notice_content_1.default, Object.assign({}, content.props, { type: "inline" }))));
 };
 exports.default = EbayInlineNotice;

package/ebay-lightbox-dialog/lightbox-dialog.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,15 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ebay_dialog_base_1 = require("../ebay-dialog-base");
-var classPrefix = 'lightbox-dialog';
-var EbayLightboxDialog = function (_a) {
-    var _b;
-    var open = _a.open, mode = _a.mode, size = _a.size, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["open", "mode", "size", "onClose"]);
-    return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({ buttonPosition: "right" }, rest, { classPrefix: classPrefix, onCloseBtnClick: onClose, onBackgroundClick: onClose, className: (0, classnames_1.default)(rest.className, "".concat(classPrefix, "--mask-fade"), size && "".concat(classPrefix, "--").concat(size)), windowClass: (0, classnames_1.default)('lightbox-dialog__window--fade', (_b = {},
-            _b["".concat(classPrefix, "__window--mini")] = mode === 'mini',
-            _b)), open: open })));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ebay_dialog_base_1 = require("../ebay-dialog-base");
+const classPrefix = 'lightbox-dialog';
+const EbayLightboxDialog = (_a) => {
+    var { open, mode, size, onClose = () => { } } = _a, rest = __rest(_a, ["open", "mode", "size", "onClose"]);
+    return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, Object.assign({ buttonPosition: "right" }, rest, { classPrefix: classPrefix, onCloseBtnClick: onClose, onBackgroundClick: onClose, className: (0, classnames_1.default)(rest.className, `${classPrefix}--mask-fade`, size && `${classPrefix}--${size}`), windowClass: (0, classnames_1.default)('lightbox-dialog__window--fade', {
+            [`${classPrefix}__window--mini`]: mode === 'mini'
+        }), open: open })));
 };
 exports.default = EbayLightboxDialog;

package/ebay-listbox-button/listbox-button-option.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ebay_icon_1 = require("../ebay-icon");
-var ListboxOption = function (_a) {
-    var value = _a.value, children = _a.children, selected = _a.selected, onClick = _a.onClick, index = _a.index, innerRef = _a.innerRef, className = _a.className, id = _a.id, rest = __rest(_a, ["value", "children", "selected", "onClick", "index", "innerRef", "className", "id"]);
-    var wrapperClassName = (0, classnames_1.default)("listbox-button__option", className, { 'listbox-button__option--active': selected });
-    return (react_1.default.createElement("div", __assign({}, rest, { className: wrapperClassName, role: "option", id: id || "listbox_btn_".concat(value, "_").concat(index), "aria-selected": selected, ref: innerRef, onClick: function (e) { onClick(e, value, index); } }),
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ebay_icon_1 = require("../ebay-icon");
+const ListboxOption = (_a) => {
+    var { value, children, selected, onClick, index, innerRef, className, id } = _a, rest = __rest(_a, ["value", "children", "selected", "onClick", "index", "innerRef", "className", "id"]);
+    const wrapperClassName = (0, classnames_1.default)(`listbox-button__option`, className, { 'listbox-button__option--active': selected });
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: wrapperClassName, role: "option", id: id || `listbox_btn_${value}_${index}`, "aria-selected": selected, ref: innerRef, onClick: (e) => { onClick(e, value, index); } }),
         react_1.default.createElement("span", { className: "listbox-button__value" }, children),
         react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tick16" })));
 };

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,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,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,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,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,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA8R7C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,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,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,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,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA+R7C,CAAA;AAED,eAAe,aAAa,CAAA"}

package/ebay-listbox-button/listbox-button.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,67 +37,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ebay_icon_1 = require("../ebay-icon");
-var component_utils_1 = require("../common/component-utils");
-var listbox_button_option_1 = __importDefault(require("./listbox-button-option"));
-var ListboxButton = function (_a) {
-    var children = _a.children, name = _a.name, value = _a.value, selected = _a.selected, borderless = _a.borderless, fluid = _a.fluid, className = _a.className, maxHeight = _a.maxHeight, prefixId = _a.prefixId, prefixLabel = _a.prefixLabel, floatingLabel = _a.floatingLabel, _b = _a.unselectedText, unselectedText = _b === void 0 ? '-' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onCollapse, onCollapse = _d === void 0 ? function () { } : _d, _e = _a.onExpand, onExpand = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["children", "name", "value", "selected", "borderless", "fluid", "className", "maxHeight", "prefixId", "prefixLabel", "floatingLabel", "unselectedText", "onChange", "onCollapse", "onExpand"]);
-    var optionsContainerRef = (0, react_1.useRef)(null);
-    var optionsParentContainerRef = (0, react_1.useRef)();
-    var optionsByIndexRef = (0, react_1.useRef)(new Map());
-    var buttonRef = (0, react_1.useRef)();
-    var listBoxButtonOptions = (0, component_utils_1.filterByType)(children, listbox_button_option_1.default);
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ebay_icon_1 = require("../ebay-icon");
+const component_utils_1 = require("../common/component-utils");
+const listbox_button_option_1 = __importDefault(require("./listbox-button-option"));
+const ListboxButton = (_a) => {
+    var { children, name, value, selected, borderless, fluid, className, maxHeight, prefixId, prefixLabel, floatingLabel, unselectedText = '-', onChange = () => { }, onCollapse = () => { }, onExpand = () => { } } = _a, rest = __rest(_a, ["children", "name", "value", "selected", "borderless", "fluid", "className", "maxHeight", "prefixId", "prefixLabel", "floatingLabel", "unselectedText", "onChange", "onCollapse", "onExpand"]);
+    const optionsContainerRef = (0, react_1.useRef)(null);
+    const optionsParentContainerRef = (0, react_1.useRef)();
+    const optionsByIndexRef = (0, react_1.useRef)(new Map());
+    const buttonRef = (0, react_1.useRef)();
+    const listBoxButtonOptions = (0, component_utils_1.filterByType)(children, listbox_button_option_1.default);
     if (!listBoxButtonOptions.length) {
-        throw new Error("EbayListboxButton: Please use a\n        EbayListboxButtonOption that defines the options of the listbox");
+        throw new Error(`EbayListboxButton: Please use a
+        EbayListboxButtonOption that defines the options of the listbox`);
     }
-    var getInitialSelectedOption = function () {
-        var selectedIndex = selected !== undefined ? selected : listBoxButtonOptions.findIndex(function (_a) {
-            var props = _a.props;
-            return value !== undefined && props.value === value;
-        });
-        var index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined;
+    const getInitialSelectedOption = () => {
+        const selectedIndex = selected !== undefined ? selected : listBoxButtonOptions.findIndex(({ props }) => value !== undefined && props.value === value);
+        const index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined;
         return {
             option: listBoxButtonOptions[index],
-            index: index
+            index
         };
     };
     // Get the default Selected value and set it in the state
-    var _f = getInitialSelectedOption(), selectedOptionFromValue = _f.option, initialSelectedOptionIndex = _f.index;
+    const { option: selectedOptionFromValue, index: initialSelectedOptionIndex } = getInitialSelectedOption();
     // Update the selected option to the state
-    var _g = (0, react_1.useState)(selectedOptionFromValue), selectedOption = _g[0], setSelectedOption = _g[1];
-    var _h = (0, react_1.useState)(initialSelectedOptionIndex), selectedIndex = _h[0], setSelectedIndex = _h[1];
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(selectedOptionFromValue);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(initialSelectedOptionIndex);
     // Update the expanded status to the state
-    var _j = (0, react_1.useState)(), expanded = _j[0], setExpanded = _j[1];
+    const [expanded, setExpanded] = (0, react_1.useState)();
     // Additional flag to avoid multiple re-render when users tries to open and close
-    var _k = (0, react_1.useState)(false), optionsOpened = _k[0], setOptionsOpened = _k[1];
-    var _l = (0, react_1.useState)(), wasClicked = _l[0], setWasClicked = _l[1];
-    (0, react_1.useEffect)(function () {
+    const [optionsOpened, setOptionsOpened] = (0, react_1.useState)(false);
+    const [wasClicked, setWasClicked] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
         setSelectedOption(selectedOptionFromValue);
     }, [value]);
-    var childrenArray = react_1.Children.toArray(children);
-    var getSelectedValueByIndex = function (index) { return childrenArray[index].props.value; };
-    var getIndexByValue = (0, react_1.useCallback)(function (selectedValue) {
-        return childrenArray.findIndex(function (_a) {
-            var props = _a.props;
-            return props.value === selectedValue;
-        });
-    }, [childrenArray]);
-    var getSelectedOption = function (currentIndex) { return optionsByIndexRef.current.get(currentIndex); };
-    var setActiveDescendant = function (index) {
-        var optionsContainerEle = optionsContainerRef.current;
-        optionsContainerEle === null || optionsContainerEle === void 0 ? void 0 : optionsContainerEle.setAttribute("aria-activedescendant", getSelectedOption(index).id);
-    };
-    var collapseListbox = function () {
+    const childrenArray = react_1.Children.toArray(children);
+    const getSelectedValueByIndex = (index) => childrenArray[index].props.value;
+    const getIndexByValue = (0, react_1.useCallback)((selectedValue) => childrenArray.findIndex(({ props }) => props.value === selectedValue), [childrenArray]);
+    const getSelectedOption = (currentIndex) => optionsByIndexRef.current.get(currentIndex);
+    const setActiveDescendant = (index) => {
+        const optionsContainerEle = optionsContainerRef.current;
+        optionsContainerEle === null || optionsContainerEle === void 0 ? void 0 : optionsContainerEle.setAttribute(`aria-activedescendant`, getSelectedOption(index).id);
+    };
+    const collapseListbox = () => {
         setExpanded(false);
         onCollapse();
     };
-    var expandListbox = function () {
+    const expandListbox = () => {
         setExpanded(true);
         onExpand();
     };
-    var toggleListbox = function () {
+    const toggleListbox = () => {
         if (expanded) {
             collapseListbox();
         }
@@ -116,38 +98,38 @@ var ListboxButton = function (_a) {
             expandListbox();
         }
     };
-    var onOptionsSelect = function (e, index) {
+    const onOptionsSelect = (e, index) => {
         // OnSelect set the selectedValue to the state and expanded to false to close the list box
         setSelectedOption(childrenArray[index]);
         setSelectedIndex(index);
         collapseListbox();
         setActiveDescendant(index);
         buttonRef.current.focus();
-        onChange(e, { index: index, selected: [getSelectedValueByIndex(index)], wasClicked: wasClicked });
+        onChange(e, { index, selected: [getSelectedValueByIndex(index)], wasClicked });
         setWasClicked(false);
     };
-    var reset = function () {
+    const reset = () => {
         collapseListbox();
         setSelectedOption(childrenArray[initialSelectedOptionIndex]);
     };
-    var makeOptionActive = function (index) {
-        var optionEle = optionsContainerRef.current.children[index];
-        optionEle.setAttribute("aria-selected", 'true');
-        optionEle.classList.add("listbox-button__option--active");
+    const makeOptionActive = (index) => {
+        const optionEle = optionsContainerRef.current.children[index];
+        optionEle.setAttribute(`aria-selected`, 'true');
+        optionEle.classList.add(`listbox-button__option--active`);
     };
-    var makeOptionInActive = function (index) {
-        var optionEle = optionsContainerRef.current.children[index];
-        optionEle.setAttribute("aria-selected", 'false');
-        optionEle.classList.remove("listbox-button__option--active");
+    const makeOptionInActive = (index) => {
+        const optionEle = optionsContainerRef.current.children[index];
+        optionEle.setAttribute(`aria-selected`, 'false');
+        optionEle.classList.remove(`listbox-button__option--active`);
     };
     // Followed the implementation from W3
     // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-    var scrollOptions = function (index) {
-        var listboxOptionsContainerNode = optionsParentContainerRef.current;
-        var currentTarget = getSelectedOption(index);
+    const scrollOptions = (index) => {
+        const listboxOptionsContainerNode = optionsParentContainerRef.current;
+        const currentTarget = getSelectedOption(index);
         if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
-            var scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
-            var elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
+            const scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
+            const elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
             if (elementBottom > scrollBottom) {
                 listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight;
             }
@@ -156,7 +138,7 @@ var ListboxButton = function (_a) {
             }
         }
     };
-    var makeSelections = function (updatedIndex) {
+    const makeSelections = (updatedIndex) => {
         makeOptionActive(selectedIndex === undefined || updatedIndex === -1 ? 0 : updatedIndex);
         makeOptionInActive(selectedIndex === undefined || selectedIndex === -1 ? 0 : selectedIndex);
         scrollOptions(updatedIndex);
@@ -164,15 +146,13 @@ var ListboxButton = function (_a) {
         setSelectedIndex(updatedIndex);
         setSelectedOption(childrenArray[updatedIndex]);
     };
-    var focusOptionsContainer = function (focusOptions) {
-        return setTimeout(function () { var _a; return (_a = optionsContainerRef === null || optionsContainerRef === void 0 ? void 0 : optionsContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(focusOptions); }, 0);
-    };
-    var onButtonClick = function () {
+    const focusOptionsContainer = (focusOptions) => setTimeout(() => { var _a; return (_a = optionsContainerRef === null || optionsContainerRef === void 0 ? void 0 : optionsContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(focusOptions); }, 0);
+    const onButtonClick = () => {
         toggleListbox();
         setOptionsOpened(true);
         focusOptionsContainer({ preventScroll: true });
     };
-    var onButtonKeyup = function (e) {
+    const onButtonKeyup = (e) => {
         switch (e.key) {
             case 'Escape':
                 collapseListbox();
@@ -184,7 +164,7 @@ var ListboxButton = function (_a) {
                 break;
         }
     };
-    var onOptionContainerKeydown = function (e) {
+    const onOptionContainerKeydown = (e) => {
         switch (e.key) {
             case ' ':
             case 'PageUp':
@@ -209,12 +189,12 @@ var ListboxButton = function (_a) {
                 break;
             case 'Enter':
                 collapseListbox();
-                setTimeout(function () { return setSelectedOption(childrenArray[selectedIndex]); });
-                setTimeout(function () { return buttonRef.current.focus(); }, 0);
+                setTimeout(() => setSelectedOption(childrenArray[selectedIndex]));
+                setTimeout(() => buttonRef.current.focus(), 0);
                 onChange(e, {
                     index: selectedIndex,
                     selected: [getSelectedValueByIndex(selectedIndex)],
-                    wasClicked: wasClicked
+                    wasClicked
                 });
                 break;
             case 'Esc':
@@ -227,47 +207,46 @@ var ListboxButton = function (_a) {
     };
     // We want to mimic the select box behavior, so we take the onSelect that passed
     // at the parent level and use it for the OnClick on the list box since it is a fake dropdown
-    var updateListBoxButtonOptions = listBoxButtonOptions
-        .map(function (child, index) { return (0, react_1.cloneElement)(child, {
-        index: index,
+    const updateListBoxButtonOptions = listBoxButtonOptions
+        .map((child, index) => (0, react_1.cloneElement)(child, {
+        index,
         key: index,
         selected: selectedOption && child.props.value === selectedOption.props.value,
-        onClick: function (e) { return onOptionsSelect(e, index); },
-        innerRef: function (optionNode) { return !optionNode
+        onClick: (e) => onOptionsSelect(e, index),
+        innerRef: optionNode => !optionNode
             ? optionsByIndexRef.current.delete(index)
-            : optionsByIndexRef.current.set(index, optionNode); }
-    }); });
-    var wrapperClassName = (0, classnames_1.default)('listbox-button', className, { 'listbox-button--fluid': fluid });
-    var buttonClassName = (0, classnames_1.default)('btn btn--form', {
+            : optionsByIndexRef.current.set(index, optionNode)
+    }));
+    const wrapperClassName = (0, classnames_1.default)('listbox-button', className, { 'listbox-button--fluid': fluid });
+    const buttonClassName = (0, classnames_1.default)('btn', {
+        'btn--form': !borderless,
         'btn--borderless': borderless,
         'btn--floating-label': floatingLabel && selectedOption
     });
-    var expandBtnTextId = prefixId && 'expand-btn-text';
-    var buttonLabel = (react_1.default.createElement(react_1.default.Fragment, null,
+    const expandBtnTextId = prefixId && 'expand-btn-text';
+    const buttonLabel = (react_1.default.createElement(react_1.default.Fragment, null,
         floatingLabel && react_1.default.createElement("span", { className: "btn__floating-label" }, floatingLabel),
         prefixLabel && react_1.default.createElement("span", { className: "btn__label" }, prefixLabel),
         react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.children) || unselectedText)));
     return (react_1.default.createElement("span", { className: wrapperClassName },
-        react_1.default.createElement("button", __assign({}, rest, { type: "button", className: buttonClassName, "aria-expanded": !!expanded, "aria-haspopup": "listbox", "aria-labelledby": prefixId && "".concat(prefixId, " ").concat(expandBtnTextId), onClick: onButtonClick, 
+        react_1.default.createElement("button", Object.assign({}, rest, { type: "button", className: buttonClassName, "aria-expanded": !!expanded, "aria-haspopup": "listbox", "aria-labelledby": prefixId && `${prefixId} ${expandBtnTextId}`, onClick: onButtonClick, 
             // https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
-            onMouseDown: function (e) { return e.preventDefault(); }, onKeyUp: onButtonKeyup, ref: buttonRef }),
+            onMouseDown: (e) => e.preventDefault(), onKeyUp: onButtonKeyup, ref: buttonRef }),
             react_1.default.createElement("span", { className: "btn__cell" },
                 buttonLabel,
                 react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "chevronDown12" }))),
         (expanded || optionsOpened) &&
             react_1.default.createElement("div", { className: "listbox-button__listbox", ref: optionsParentContainerRef, style: { maxHeight: maxHeight } },
-                react_1.default.createElement("div", { className: "listbox-button__options", role: "listbox", tabIndex: expanded ? 0 : -1, ref: optionsContainerRef, onKeyDown: function (e) { return onOptionContainerKeydown(e); }, 
+                react_1.default.createElement("div", { className: "listbox-button__options", role: "listbox", tabIndex: expanded ? 0 : -1, ref: optionsContainerRef, onKeyDown: (e) => onOptionContainerKeydown(e), 
                     // adding onMouseDown preventDefault b/c on IE the onClick event is not being fired on each
                     // option https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
-                    onMouseDown: function (e) {
+                    onMouseDown: (e) => {
                         e.preventDefault();
                         setWasClicked(true);
-                    }, onBlur: function () {
+                    }, onBlur: () => {
                         collapseListbox();
-                        setTimeout(function () { return buttonRef.current.focus(); }, 0);
+                        setTimeout(() => buttonRef.current.focus(), 0);
                     } }, updateListBoxButtonOptions)),
-        react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, onChange: function (e) { return onOptionsSelect(e, getIndexByValue(e.target.value)); }, value: selectedOption ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.value : '' }, updateListBoxButtonOptions.map(function (option, i) {
-            return react_1.default.createElement("option", { value: option.props.value, key: i });
-        }))));
+        react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, onChange: (e) => onOptionsSelect(e, getIndexByValue(e.target.value)), value: selectedOption ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.value : '' }, updateListBoxButtonOptions.map((option, i) => react_1.default.createElement("option", { value: option.props.value, key: i })))));
 };
 exports.default = ListboxButton;

package/ebay-menu/menu-item-separator.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,10 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var EbayMenuItemSeparator = function (_a) {
-    var className = _a.className, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("hr", __assign({}, rest, { className: (0, classnames_1.default)(className, 'menu__separator'), role: "separator" })));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const EbayMenuItemSeparator = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("hr", Object.assign({}, rest, { className: (0, classnames_1.default)(className, 'menu__separator'), role: "separator" })));
 };
 exports.default = EbayMenuItemSeparator;