@ebay/ui-core-react 6.2.1 → 6.3.0

package/ebay-date-textbox/date-textbox.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,37 +37,33 @@ 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 makeup_expander_1 = __importDefault(require("makeup-expander"));
-var calendar_1 = __importDefault(require("../ebay-calendar/calendar"));
-var ebay_textbox_1 = require("../ebay-textbox");
-var date_utils_1 = require("../ebay-calendar/date-utils");
-var textbox_1 = require("../ebay-textbox/textbox");
-var classnames_1 = __importDefault(require("classnames"));
-var MIN_WIDTH_FOR_DOUBLE_PANE = 600;
-var EbayDateTextbox = function (_a) {
-    var className = _a.className, _b = _a.inputPlaceholderText, inputPlaceholderText = _b === void 0 ? 'YYYY-MM-DD' : _b, _c = _a.a11yOpenPopoverText, a11yOpenPopoverText = _c === void 0 ? 'open calendar' : _c, range = _a.range, controlledValue = _a.value, controlledRangeEnd = _a.rangeEnd, defaultValue = _a.defaultValue, defaultRangeEnd = _a.defaultRangeEnd, collapseOnSelect = _a.collapseOnSelect, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onInputChange, onInputChange = _e === void 0 ? function () { } : _e, _f = _a.onInputRangeEndChange, onInputRangeEndChange = _f === void 0 ? function () { } : _f, rest = __rest(_a, ["className", "inputPlaceholderText", "a11yOpenPopoverText", "range", "value", "rangeEnd", "defaultValue", "defaultRangeEnd", "collapseOnSelect", "onChange", "onInputChange", "onInputRangeEndChange"]);
-    var expander = (0, react_1.useRef)();
-    var containerRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)(defaultValue || ''), internalValue = _g[0], setInternalValue = _g[1];
-    var _h = (0, react_1.useState)(defaultRangeEnd || ''), internalRangeEnd = _h[0], setInternalRangeEnd = _h[1];
-    var valueToRender = (0, textbox_1.isControlled)(controlledValue) ? controlledValue : internalValue;
-    var rangeEndToRender = (0, textbox_1.isControlled)(controlledRangeEnd) ? controlledRangeEnd : internalRangeEnd;
-    var _j = (0, react_1.useState)(function () {
-        return (0, date_utils_1.dateArgToISO)(valueToRender);
-    }), firstSelected = _j[0], setFirstSelected = _j[1];
-    var _k = (0, react_1.useState)(function () {
-        return (0, date_utils_1.dateArgToISO)(rangeEndToRender);
-    }), secondSelected = _k[0], setSecondSelected = _k[1];
-    var _l = (0, react_1.useState)(false), isPopoverOpen = _l[0], setIsPopoverOpen = _l[1];
-    var _m = (0, react_1.useState)(1), numMonths = _m[0], setNumMonths = _m[1];
-    var openPopover = function () {
+const react_1 = __importStar(require("react"));
+const makeup_expander_1 = __importDefault(require("makeup-expander"));
+const calendar_1 = __importDefault(require("../ebay-calendar/calendar"));
+const ebay_textbox_1 = require("../ebay-textbox");
+const date_utils_1 = require("../ebay-calendar/date-utils");
+const textbox_1 = require("../ebay-textbox/textbox");
+const classnames_1 = __importDefault(require("classnames"));
+const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
+const EbayDateTextbox = (_a) => {
+    var { className, inputPlaceholderText = 'YYYY-MM-DD', a11yOpenPopoverText = 'open calendar', range, value: controlledValue, rangeEnd: controlledRangeEnd, defaultValue, defaultRangeEnd, collapseOnSelect, onChange = () => { }, onInputChange = () => { }, onInputRangeEndChange = () => { } } = _a, rest = __rest(_a, ["className", "inputPlaceholderText", "a11yOpenPopoverText", "range", "value", "rangeEnd", "defaultValue", "defaultRangeEnd", "collapseOnSelect", "onChange", "onInputChange", "onInputRangeEndChange"]);
+    const expander = (0, react_1.useRef)();
+    const containerRef = (0, react_1.useRef)(null);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || '');
+    const [internalRangeEnd, setInternalRangeEnd] = (0, react_1.useState)(defaultRangeEnd || '');
+    const valueToRender = (0, textbox_1.isControlled)(controlledValue) ? controlledValue : internalValue;
+    const rangeEndToRender = (0, textbox_1.isControlled)(controlledRangeEnd) ? controlledRangeEnd : internalRangeEnd;
+    const [firstSelected, setFirstSelected] = (0, react_1.useState)(() => (0, date_utils_1.dateArgToISO)(valueToRender));
+    const [secondSelected, setSecondSelected] = (0, react_1.useState)(() => (0, date_utils_1.dateArgToISO)(rangeEndToRender));
+    const [isPopoverOpen, setIsPopoverOpen] = (0, react_1.useState)(false);
+    const [numMonths, setNumMonths] = (0, react_1.useState)(1);
+    const openPopover = () => {
         setIsPopoverOpen(true);
     };
-    var closePopover = function () {
+    const closePopover = () => {
         setIsPopoverOpen(false);
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!containerRef.current) {
             return;
         }
@@ -90,20 +75,20 @@ var EbayDateTextbox = function (_a) {
         });
         containerRef.current.addEventListener('expander-expand', openPopover);
         containerRef.current.addEventListener('expander-collapse', closePopover);
-        var calculateNumMonths = function () {
+        const calculateNumMonths = () => {
             setNumMonths(document.documentElement.clientWidth < MIN_WIDTH_FOR_DOUBLE_PANE ? 1 : 2);
         };
         calculateNumMonths();
         window.addEventListener('resize', calculateNumMonths);
-        return function () {
+        return () => {
             var _a;
             (_a = expander.current) === null || _a === void 0 ? void 0 : _a.destroy();
             window.removeEventListener('resize', calculateNumMonths);
         };
     }, []);
-    var handleInputChange = function (event, index) {
-        var date = new Date(event.target.value);
-        var iso = isNaN(date.getTime()) ? null : (0, date_utils_1.toISO)(date);
+    const handleInputChange = (event, index) => {
+        const date = new Date(event.target.value);
+        const iso = isNaN(date.getTime()) ? null : (0, date_utils_1.toISO)(date);
         if (index === 0) {
             setFirstSelected(iso);
             setInternalValue(iso || '');
@@ -124,13 +109,12 @@ var EbayDateTextbox = function (_a) {
             });
         }
     };
-    var handlePopoverSelect = function (event, _a) {
-        var iso = _a.iso;
+    const handlePopoverSelect = (event, { iso }) => {
         setFirstSelected(iso);
         setInternalValue(iso);
         if (range) {
-            var selected = firstSelected || secondSelected;
-            var eventData = {
+            const selected = firstSelected || secondSelected;
+            const eventData = {
                 rangeStart: iso,
                 rangeEnd: selected
             };
@@ -170,7 +154,7 @@ var EbayDateTextbox = function (_a) {
             expander.current.expanded = false;
         }
     };
-    var handleInternalChange = function (event, index) {
+    const handleInternalChange = (event, index) => {
         if (index === 0) {
             setInternalValue(event.target.value);
             onInputChange(event);
@@ -180,15 +164,15 @@ var EbayDateTextbox = function (_a) {
             onInputRangeEndChange(event);
         }
     };
-    var _o = Array.isArray(inputPlaceholderText)
+    const [rangeStartPlaceholder, mainPlaceholder] = Array.isArray(inputPlaceholderText)
         ? inputPlaceholderText
-        : [inputPlaceholderText, inputPlaceholderText], rangeStartPlaceholder = _o[0], mainPlaceholder = _o[1];
+        : [inputPlaceholderText, inputPlaceholderText];
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('date-textbox', className), ref: containerRef },
-        range && (react_1.default.createElement(ebay_textbox_1.EbayTextbox, { value: valueToRender, placeholder: rangeStartPlaceholder, onInputChange: function (event) { return handleInternalChange(event, 0); }, onBlur: function (event) { return handleInputChange(event, 0); } })),
-        react_1.default.createElement(ebay_textbox_1.EbayTextbox, { className: "ebay-date-textbox--main", placeholder: mainPlaceholder, value: range ? rangeEndToRender : valueToRender, onInputChange: function (event) { return handleInternalChange(event, range ? 1 : 0); }, onBlur: function (event) { return handleInputChange(event, range ? 1 : 0); } },
+        range && (react_1.default.createElement(ebay_textbox_1.EbayTextbox, { value: valueToRender, placeholder: rangeStartPlaceholder, onInputChange: (event) => handleInternalChange(event, 0), onBlur: (event) => handleInputChange(event, 0) })),
+        react_1.default.createElement(ebay_textbox_1.EbayTextbox, { className: "ebay-date-textbox--main", placeholder: mainPlaceholder, value: range ? rangeEndToRender : valueToRender, onInputChange: (event) => handleInternalChange(event, range ? 1 : 0), onBlur: (event) => handleInputChange(event, range ? 1 : 0) },
             react_1.default.createElement(ebay_textbox_1.EbayTextboxPostfixIcon, { name: "calendar24", buttonAriaLabel: a11yOpenPopoverText })),
         react_1.default.createElement("div", { hidden: !isPopoverOpen, className: "date-textbox__popover" },
-            react_1.default.createElement(calendar_1.default, __assign({}, rest, { range: range, interactive: true, navigable: true, numMonths: numMonths, selected: firstSelected && secondSelected
+            react_1.default.createElement(calendar_1.default, Object.assign({}, rest, { range: range, interactive: true, navigable: true, numMonths: numMonths, selected: firstSelected && secondSelected
                     ? [firstSelected, secondSelected]
                     : firstSelected || secondSelected || undefined, onSelect: handlePopoverSelect })))));
 };

package/ebay-dialog-base/components/animation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DialogAnimationHookProps {
     open?: boolean;
     transitionElement?: TransitionElement;

package/ebay-dialog-base/components/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/animation.ts"],"names":[],"mappings":";AAWA,UAAU,wBAAwB;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,OAAO,EACP,eAAe,EAClB,EAAE,wBAAwB,GAAG,IAAI,CA0CjC"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/animation.ts"],"names":[],"mappings":"AAWA,UAAU,wBAAwB;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,OAAO,EACP,eAAe,EAClB,EAAE,wBAAwB,GAAG,IAAI,CA0CjC"}

package/ebay-dialog-base/components/animation.js

@@ -1,40 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogAnimation = void 0;
-var react_1 = require("react");
-function useDialogAnimation(_a) {
-    var open = _a.open, classPrefix = _a.classPrefix, transitionElement = _a.transitionElement, dialogRef = _a.dialogRef, dialogWindowRef = _a.dialogWindowRef, enabled = _a.enabled, onTransitionEnd = _a.onTransitionEnd;
-    var firstRender = (0, react_1.useRef)(true);
-    (0, react_1.useLayoutEffect)(function () {
+const react_1 = require("react");
+function useDialogAnimation({ open, classPrefix, transitionElement, dialogRef, dialogWindowRef, enabled, onTransitionEnd }) {
+    const firstRender = (0, react_1.useRef)(true);
+    (0, react_1.useLayoutEffect)(() => {
         if (!enabled) {
             return;
         }
-        var transitionElements = [dialogWindowRef, dialogRef];
+        let transitionElements = [dialogWindowRef, dialogRef];
         if (transitionElement === 'window') {
             transitionElements = [dialogWindowRef];
         }
         else if (transitionElement === 'root') {
             transitionElements = [dialogRef];
         }
-        var cancelCurrentAnimation;
+        let cancelCurrentAnimation;
         if (open) {
             cancelCurrentAnimation = showAnimation({
                 dialog: dialogRef,
                 waitFor: transitionElements,
-                classPrefix: classPrefix,
-                onTransitionEnd: onTransitionEnd
+                classPrefix,
+                onTransitionEnd
             });
         }
         else if (!firstRender.current) {
             cancelCurrentAnimation = hideAnimation({
                 dialog: dialogRef,
                 waitFor: transitionElements,
-                classPrefix: classPrefix,
-                onTransitionEnd: onTransitionEnd
+                classPrefix,
+                onTransitionEnd
             });
         }
         firstRender.current = false;
-        return function () {
+        return () => {
             if (cancelCurrentAnimation) {
                 cancelCurrentAnimation();
             }
@@ -42,30 +41,28 @@ function useDialogAnimation(_a) {
     }, [open, enabled]);
 }
 exports.useDialogAnimation = useDialogAnimation;
-function showAnimation(_a) {
-    var dialog = _a.dialog, waitFor = _a.waitFor, classPrefix = _a.classPrefix, onTransitionEnd = _a.onTransitionEnd;
-    return transition(dialog, waitFor, "".concat(classPrefix, "--show"), onTransitionEnd);
+function showAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }) {
+    return transition(dialog, waitFor, `${classPrefix}--show`, onTransitionEnd);
 }
-function hideAnimation(_a) {
-    var dialog = _a.dialog, waitFor = _a.waitFor, classPrefix = _a.classPrefix, onTransitionEnd = _a.onTransitionEnd;
-    return transition(dialog, waitFor, "".concat(classPrefix, "--hide"), onTransitionEnd);
+function hideAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }) {
+    return transition(dialog, waitFor, `${classPrefix}--hide`, onTransitionEnd);
 }
 function transition(element, waitFor, className, onTransitionEnd) {
     if (!element.current || !className) {
         return;
     }
-    var ran = 0;
-    var pending = waitFor ? waitFor.length : 0;
-    var initClass = "".concat(className, "-init");
+    let ran = 0;
+    const pending = waitFor ? waitFor.length : 0;
+    const initClass = `${className}-init`;
     element.current.classList.add(initClass);
-    return nextFrame(function () {
+    return nextFrame(() => {
         if (!element.current) {
             return;
         }
         element.current.classList.add(className);
         element.current.classList.remove(initClass);
-        waitFor.forEach(function (ref) {
-            var listener = function () {
+        waitFor.forEach((ref) => {
+            const listener = () => {
                 var _a, _b;
                 if (++ran === pending) {
                     (_a = element.current) === null || _a === void 0 ? void 0 : _a.classList.remove(className);
@@ -78,10 +75,10 @@ function transition(element, waitFor, className, onTransitionEnd) {
     });
 }
 function nextFrame(callback) {
-    var frame;
-    var cancelFrame;
+    let frame;
+    let cancelFrame;
     if (window.requestAnimationFrame) {
-        frame = window.requestAnimationFrame(function () {
+        frame = window.requestAnimationFrame(() => {
             frame = window.requestAnimationFrame(callback);
         });
         cancelFrame = window.cancelAnimationFrame;
@@ -90,7 +87,7 @@ function nextFrame(callback) {
         frame = window.setTimeout(callback, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.
         cancelFrame = window.clearTimeout;
     }
-    return function () {
+    return () => {
         if (frame) {
             cancelFrame(frame);
             frame = undefined;

package/ebay-dialog-base/components/dialog-actions.js

@@ -3,9 +3,6 @@ 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 EbayDialogActions = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
-};
+const react_1 = __importDefault(require("react"));
+const EbayDialogActions = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
 exports.default = EbayDialogActions;

package/ebay-dialog-base/components/dialog-close-button.d.ts

@@ -1,4 +1,7 @@
-import { FC } from 'react';
-declare const EbayDialogCloseButton: FC;
+import { FC, ReactNode } from 'react';
+type EbayDialogCloseButtonProps = {
+    children?: ReactNode;
+};
+declare const EbayDialogCloseButton: FC<EbayDialogCloseButtonProps>;
 export default EbayDialogCloseButton;
 //# sourceMappingURL=dialog-close-button.d.ts.map

package/ebay-dialog-base/components/dialog-close-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-close-button.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialog-close-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAa,MAAM,OAAO,CAAA;AAM5C,QAAA,MAAM,qBAAqB,EAAE,EAAkE,CAAA;AAE/F,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"dialog-close-button.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialog-close-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAAqC,CAAA;AAE/F,eAAe,qBAAqB,CAAA"}

package/ebay-dialog-base/components/dialog-close-button.js

@@ -3,9 +3,6 @@ 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 EbayDialogCloseButton = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
-};
+const react_1 = __importDefault(require("react"));
+const EbayDialogCloseButton = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
 exports.default = EbayDialogCloseButton;

package/ebay-dialog-base/components/dialog-footer.js

@@ -3,9 +3,6 @@ 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 EbayDialogFooter = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
-};
+const react_1 = __importDefault(require("react"));
+const EbayDialogFooter = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
 exports.default = EbayDialogFooter;

package/ebay-dialog-base/components/dialog-header.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,9 +14,9 @@ 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 EbayDialogHeader = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return react_1.default.createElement("h2", __assign({}, rest), children);
+const react_1 = __importDefault(require("react"));
+const EbayDialogHeader = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("h2", Object.assign({}, rest), children);
 };
 exports.default = EbayDialogHeader;

package/ebay-dialog-base/components/dialog-previous-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 __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,11 +14,11 @@ 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_button_1 = require("../../ebay-icon-button");
-var EbayDialogPreviousButton = function (_a) {
-    var className = _a.className, icon = _a.icon, rest = __rest(_a, ["className", "icon"]);
-    return (react_1.default.createElement(ebay_icon_button_1.EbayIconButton, __assign({}, rest, { icon: icon || 'chevronLeft16', className: (0, classnames_1.default)(className, 'lightbox-dialog__prev') })));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ebay_icon_button_1 = require("../../ebay-icon-button");
+const EbayDialogPreviousButton = (_a) => {
+    var { className, icon } = _a, rest = __rest(_a, ["className", "icon"]);
+    return (react_1.default.createElement(ebay_icon_button_1.EbayIconButton, Object.assign({}, rest, { icon: icon || 'chevronLeft16', className: (0, classnames_1.default)(className, 'lightbox-dialog__prev') })));
 };
 exports.default = EbayDialogPreviousButton;

package/ebay-dialog-base/components/dialogBase.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);
@@ -49,26 +38,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogBase = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var screenreaderTrap = __importStar(require("makeup-screenreader-trap"));
-var keyboardTrap = __importStar(require("makeup-keyboard-trap"));
-var ebay_icon_1 = require("../../ebay-icon");
-var random_id_1 = require("../../common/random-id");
-var animation_1 = require("./animation");
-var DialogBase = function (_a) {
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const screenreaderTrap = __importStar(require("makeup-screenreader-trap"));
+const keyboardTrap = __importStar(require("makeup-keyboard-trap"));
+const ebay_icon_1 = require("../../ebay-icon");
+const random_id_1 = require("../../common/random-id");
+const animation_1 = require("./animation");
+const DialogBase = (_a) => {
     var _b;
-    var _c = _a.baseEl, Container = _c === void 0 ? 'div' : _c, _d = _a.classPrefix, classPrefix = _d === void 0 ? 'drawer-dialog' : _d, windowClass = _a.windowClass, windowType = _a.windowType, mainId = _a.mainId, top = _a.top, header = _a.header, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? 'right' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, actions = _a.actions, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onOpen, onOpen = _h === void 0 ? function () { } : _h, _j = _a.onBackgroundClick, onBackgroundClick = _j === void 0 ? function () { } : _j, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, previousButton = _a.previousButton, isModal = _a.isModal, _k = _a.role, role = _k === void 0 ? 'dialog' : _k, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, closeButtonClass = _a.closeButtonClass, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onOpen", "onBackgroundClick", "ignoreEscape", "closeButton", "previousButton", "isModal", "role", "focus", "transitionElement", "animated", "closeButtonClass"]);
-    var dialogRef = (0, react_1.useRef)(null);
-    var drawerBaseEl = (0, react_1.useRef)(null);
-    var closeButtonRef = (0, react_1.useRef)(null);
-    var _l = (0, react_1.useState)(''), rId = _l[0], setRandomId = _l[1];
-    (0, react_1.useEffect)(function () {
+    var { baseEl: Container = 'div', classPrefix = 'drawer-dialog', windowClass, windowType, mainId, top, header, buttonPosition = 'right', children, ariaLabelledby, a11yCloseText, onCloseBtnClick = () => { }, footer, actions, onScroll, open = false, onOpen = () => { }, onBackgroundClick = () => { }, ignoreEscape, closeButton, previousButton, isModal, role = 'dialog', focus, transitionElement, animated, closeButtonClass } = _a, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onOpen", "onBackgroundClick", "ignoreEscape", "closeButton", "previousButton", "isModal", "role", "focus", "transitionElement", "animated", "closeButtonClass"]);
+    const dialogRef = (0, react_1.useRef)(null);
+    const drawerBaseEl = (0, react_1.useRef)(null);
+    const closeButtonRef = (0, react_1.useRef)(null);
+    const [rId, setRandomId] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
         setRandomId((0, random_id_1.randomId)());
     }, []);
-    (0, react_1.useEffect)(function () {
-        var timeout;
-        var handleBackgroundClick = function (e) {
+    (0, react_1.useEffect)(() => {
+        let timeout;
+        const handleBackgroundClick = (e) => {
             if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
                 onBackgroundClick(e);
             }
@@ -78,16 +67,16 @@ var DialogBase = function (_a) {
             // causing the event listener to be attached to the document at the same time that the dialog
             // opens. Adding a timeout so the event is attached after the click event that opened the modal
             // is finished.
-            timeout = window.setTimeout(function () {
+            timeout = window.setTimeout(() => {
                 document.addEventListener('click', handleBackgroundClick, false);
             });
         }
-        return function () {
+        return () => {
             clearTimeout(timeout);
             document.removeEventListener('click', handleBackgroundClick, false);
         };
     }, [onBackgroundClick, open]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (open && isModal) {
             screenreaderTrap.trap(drawerBaseEl.current);
             keyboardTrap.trap(drawerBaseEl.current);
@@ -96,27 +85,27 @@ var DialogBase = function (_a) {
             screenreaderTrap.untrap();
             keyboardTrap.untrap();
         }
-        return function () {
+        return () => {
             screenreaderTrap.untrap();
             keyboardTrap.untrap();
         };
     }, [open, isModal]);
     (0, animation_1.useDialogAnimation)({
-        open: open,
-        classPrefix: classPrefix,
-        transitionElement: transitionElement,
-        dialogRef: dialogRef,
+        open,
+        classPrefix,
+        transitionElement,
+        dialogRef,
         dialogWindowRef: drawerBaseEl,
         enabled: animated,
-        onTransitionEnd: function () { return handleFocus(open); }
+        onTransitionEnd: () => handleFocus(open)
     });
-    var onKeyDown = function (event) {
+    const onKeyDown = (event) => {
         if (!ignoreEscape && event.key === 'Escape') {
             event.stopPropagation();
             onCloseBtnClick(event);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         // For animated dialogs we handle the focus on transitionEnd event
         if (!animated) {
             handleFocus(open);
@@ -135,27 +124,27 @@ var DialogBase = function (_a) {
                 (_b = closeButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
             document.addEventListener('keydown', onKeyDown, false);
-            return function () { return document.removeEventListener('keydown', onKeyDown, false); };
+            return () => document.removeEventListener('keydown', onKeyDown, false);
         }
     }
-    var closeButtonContent = buttonPosition !== 'hidden' && (react_1.default.createElement("button", { ref: closeButtonRef, className: (0, classnames_1.default)("icon-btn", closeButtonClass, "".concat(classPrefix, "__close"), {
-            'icon-btn--transparent': classPrefix === "toast-dialog"
+    const closeButtonContent = buttonPosition !== 'hidden' && (react_1.default.createElement("button", { ref: closeButtonRef, className: (0, classnames_1.default)(`icon-btn`, closeButtonClass, `${classPrefix}__close`, {
+            'icon-btn--transparent': classPrefix === `toast-dialog`
         }), type: "button", "aria-label": a11yCloseText, onClick: onCloseBtnClick }, closeButton || react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "close16" })));
-    var windowClassName = windowType ? "".concat(classPrefix, "__").concat(windowType, "-window") : "".concat(classPrefix, "__window");
-    var dialogTitleId = ((_b = header === null || header === void 0 ? void 0 : header.props) === null || _b === void 0 ? void 0 : _b.id) || "dialog-title-".concat(rId);
-    var dialogLabelledBy = ariaLabelledby || dialogTitleId;
-    var dialogHeader = header ? (0, react_1.cloneElement)(header, __assign(__assign({}, header.props), { id: dialogTitleId })) : null;
-    return (react_1.default.createElement(Container, __assign({}, props, { "aria-labelledby": dialogLabelledBy, "arial-modal": "true", role: role, hidden: !open, className: (0, classnames_1.default)(classPrefix, props.className), "aria-live": !isModal ? 'polite' : undefined, ref: dialogRef, onKeyDown: onKeyDown }),
+    const windowClassName = windowType ? `${classPrefix}__${windowType}-window` : `${classPrefix}__window`;
+    const dialogTitleId = ((_b = header === null || header === void 0 ? void 0 : header.props) === null || _b === void 0 ? void 0 : _b.id) || `dialog-title-${rId}`;
+    const dialogLabelledBy = ariaLabelledby || dialogTitleId;
+    const dialogHeader = header ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { id: dialogTitleId })) : null;
+    return (react_1.default.createElement(Container, Object.assign({}, props, { "aria-labelledby": dialogLabelledBy, "aria-modal": "true", role: role, hidden: !open, className: (0, classnames_1.default)(classPrefix, props.className), "aria-live": !isModal ? 'polite' : undefined, ref: dialogRef, onKeyDown: onKeyDown }),
         react_1.default.createElement("div", { className: (0, classnames_1.default)(windowClassName, windowClass), ref: drawerBaseEl },
             top,
-            dialogHeader && (react_1.default.createElement("div", { className: "".concat(classPrefix, "__header") },
+            dialogHeader && (react_1.default.createElement("div", { className: `${classPrefix}__header` },
                 previousButton,
                 buttonPosition === 'right' && dialogHeader,
                 buttonPosition !== 'bottom' && closeButtonContent,
                 (buttonPosition === 'left' || buttonPosition === 'hidden') && dialogHeader)),
-            react_1.default.createElement("div", { id: mainId, className: "".concat(classPrefix, "__main"), onScroll: onScroll }, children),
-            actions ? (react_1.default.createElement("div", { className: "".concat(classPrefix, "__actions") }, actions)) : null,
-            footer || buttonPosition === 'bottom' ? (react_1.default.createElement("div", { className: "".concat(classPrefix, "__footer") },
+            react_1.default.createElement("div", { id: mainId, className: `${classPrefix}__main`, onScroll: onScroll }, children),
+            actions ? (react_1.default.createElement("div", { className: `${classPrefix}__actions` }, actions)) : null,
+            footer || buttonPosition === 'bottom' ? (react_1.default.createElement("div", { className: `${classPrefix}__footer` },
                 footer,
                 buttonPosition === 'bottom' && closeButtonContent)) : null)));
 };