@ebay/ui-core-react 1.0.0

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

@@ -0,0 +1,99 @@
+"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 = react_1.useRef(true);
+    react_1.useLayoutEffect(function () {
+        if (!enabled) {
+            return;
+        }
+        var transitionElements = [dialogWindowRef, dialogRef];
+        if (transitionElement === 'window') {
+            transitionElements = [dialogWindowRef];
+        }
+        else if (transitionElement === 'root') {
+            transitionElements = [dialogRef];
+        }
+        var cancelCurrentAnimation;
+        if (open) {
+            cancelCurrentAnimation = showAnimation({
+                dialog: dialogRef,
+                waitFor: transitionElements,
+                classPrefix: classPrefix,
+                onTransitionEnd: onTransitionEnd
+            });
+        }
+        else if (!firstRender.current) {
+            cancelCurrentAnimation = hideAnimation({
+                dialog: dialogRef,
+                waitFor: transitionElements,
+                classPrefix: classPrefix,
+                onTransitionEnd: onTransitionEnd
+            });
+        }
+        firstRender.current = false;
+        return function () {
+            if (cancelCurrentAnimation) {
+                cancelCurrentAnimation();
+            }
+        };
+    }, [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, classPrefix + "--show", onTransitionEnd);
+}
+function hideAnimation(_a) {
+    var dialog = _a.dialog, waitFor = _a.waitFor, classPrefix = _a.classPrefix, onTransitionEnd = _a.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 = className + "-init";
+    element.current.classList.add(initClass);
+    return nextFrame(function () {
+        if (!element.current) {
+            return;
+        }
+        element.current.classList.add(className);
+        element.current.classList.remove(initClass);
+        waitFor.forEach(function (ref) {
+            var listener = function () {
+                var _a, _b;
+                if (++ran === pending) {
+                    (_a = element.current) === null || _a === void 0 ? void 0 : _a.classList.remove(className);
+                    onTransitionEnd();
+                    (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', listener);
+                }
+            };
+            ref.current.addEventListener('transitionend', listener, { once: true });
+        });
+    });
+}
+function nextFrame(callback) {
+    var frame;
+    var cancelFrame;
+    if (window.requestAnimationFrame) {
+        frame = window.requestAnimationFrame(function () {
+            frame = window.requestAnimationFrame(callback);
+        });
+        cancelFrame = window.cancelAnimationFrame;
+    }
+    else {
+        frame = window.setTimeout(callback, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.
+        cancelFrame = window.clearTimeout;
+    }
+    return function () {
+        if (frame) {
+            cancelFrame(frame);
+            frame = undefined;
+        }
+    };
+}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const EbayDialogCloseButton: FC;
+export default EbayDialogCloseButton;
+//# sourceMappingURL=dialog-close-button.d.ts.map

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

@@ -0,0 +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,EAA6D,CAAA;AAE1F,eAAe,qBAAqB,CAAA"}

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

@@ -0,0 +1,11 @@
+"use strict";
+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);
+};
+exports.default = EbayDialogCloseButton;

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

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+declare type EbayDialogFooterProps = {
+    children?: ReactNode;
+};
+declare const EbayDialogFooter: FC<EbayDialogFooterProps>;
+export default EbayDialogFooter;
+//# sourceMappingURL=dialog-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-footer.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialog-footer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,aAAK,qBAAqB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,gBAAgB,EAAC,EAAE,CAAC,qBAAqB,CAAqC,CAAA;AAEpF,eAAe,gBAAgB,CAAA"}

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

@@ -0,0 +1,11 @@
+"use strict";
+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);
+};
+exports.default = EbayDialogFooter;

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

@@ -0,0 +1,5 @@
+import { FC, ComponentProps } from 'react';
+declare type Props = ComponentProps<'h2'>;
+declare const EbayDialogHeader: FC<Props>;
+export default EbayDialogHeader;
+//# sourceMappingURL=dialog-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-header.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialog-header.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEjD,aAAK,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjC,QAAA,MAAM,gBAAgB,EAAC,EAAE,CAAC,KAAK,CAGI,CAAA;AAEnC,eAAe,gBAAgB,CAAA"}

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

@@ -0,0 +1,33 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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);
+};
+exports.default = EbayDialogHeader;

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

@@ -0,0 +1,31 @@
+import { FC, HTMLProps, RefObject, ReactElement, MouseEventHandler, ReactNode } from 'react';
+import { TransitionElement } from './animation';
+export declare type WindowType = 'compact';
+declare type ClassPrefix = 'fullscreen-dialog' | 'lightbox-dialog' | 'panel-dialog' | 'drawer-dialog' | 'toast-dialog' | 'alert-dialog' | 'confirm-dialog';
+declare type ButtonPosition = 'top' | 'right' | 'bottom' | 'left' | 'hidden';
+export interface DialogBaseProps<T> extends HTMLProps<T> {
+    baseEl?: 'div' | 'span' | 'aside';
+    open?: boolean;
+    classPrefix?: ClassPrefix;
+    windowClass?: string;
+    windowType?: WindowType;
+    header?: ReactElement;
+    footer?: ReactElement;
+    isModal?: boolean;
+    top?: ReactElement;
+    buttonPosition?: ButtonPosition;
+    ariaLabelledby?: string;
+    a11yCloseText?: string;
+    onCloseBtnClick?: MouseEventHandler;
+    onBackgroundClick?: MouseEventHandler;
+    mainId?: string;
+    ignoreEscape?: boolean;
+    closeButton?: ReactElement;
+    focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    animated?: boolean;
+    transitionElement?: TransitionElement;
+    children?: ReactNode;
+}
+export declare const DialogBase: FC<DialogBaseProps<HTMLElement>>;
+export default DialogBase;
+//# sourceMappingURL=dialogBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialogBase.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialogBase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EACF,SAAS,EACT,SAAS,EAIT,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EACZ,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEnE,oBAAY,UAAU,GAAG,SAAS,CAAA;AAClC,aAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAAc,GACrE,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAA;AAC1E,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAGpE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CA6JvD,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,149 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+exports.DialogBase = function (_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 ? 'left' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onBackgroundClick, onBackgroundClick = _h === void 0 ? function () { } : _h, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, isModal = _a.isModal, _j = _a.role, role = _j === void 0 ? 'dialog' : _j, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "onScroll", "open", "onBackgroundClick", "ignoreEscape", "closeButton", "isModal", "role", "focus", "transitionElement", "animated"]);
+    var dialogRef = react_1.useRef(null);
+    var drawerBaseEl = react_1.useRef(null);
+    var closeButtonRef = react_1.useRef(null);
+    var _k = react_1.useState(''), rId = _k[0], setRandomId = _k[1];
+    react_1.useEffect(function () {
+        setRandomId(random_id_1.randomId());
+    }, []);
+    react_1.useEffect(function () {
+        var handleBackgroundClick = function (e) {
+            if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
+                onBackgroundClick(e);
+            }
+        };
+        if (open) {
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // 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.
+            setTimeout(function () {
+                document.addEventListener('click', handleBackgroundClick, false);
+            });
+        }
+        return function () { return document.removeEventListener('click', handleBackgroundClick, false); };
+    }, [onBackgroundClick, open]);
+    react_1.useEffect(function () {
+        if (open && isModal) {
+            screenreaderTrap.trap(drawerBaseEl.current);
+            keyboardTrap.trap(drawerBaseEl.current);
+        }
+        else {
+            screenreaderTrap.untrap();
+            keyboardTrap.untrap();
+        }
+        return function () {
+            screenreaderTrap.untrap();
+            keyboardTrap.untrap();
+        };
+    }, [open, isModal]);
+    animation_1.useDialogAnimation({
+        open: open,
+        classPrefix: classPrefix,
+        transitionElement: transitionElement,
+        dialogRef: dialogRef,
+        dialogWindowRef: drawerBaseEl,
+        enabled: animated,
+        onTransitionEnd: function () { return handleFocus(open); }
+    });
+    var onKeyDown = function (event) {
+        if (!ignoreEscape && event.key === 'Escape') {
+            event.stopPropagation();
+            onCloseBtnClick(undefined);
+        }
+    };
+    react_1.useEffect(function () {
+        // For animated dialogs we handle the focus on transitionEnd event
+        if (!animated) {
+            handleFocus(open);
+        }
+    }, [open]);
+    function handleFocus(isOpen) {
+        var _a, _b;
+        if (isOpen) {
+            if (focus) {
+                (_a = focus.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (isModal) {
+                (_b = closeButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            document.addEventListener('keydown', onKeyDown, false);
+            return function () { return document.removeEventListener('keydown', onKeyDown, false); };
+        }
+    }
+    var closeButtonContent = buttonPosition !== 'hidden' && (react_1.default.createElement("button", { ref: closeButtonRef, className: classnames_1.default("icon-btn", 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: "close" })));
+    var windowClassName = windowType ? classPrefix + "__" + windowType + "-window" : classPrefix + "__window";
+    var dialogTitleId = ((_b = header === null || header === void 0 ? void 0 : header.props) === null || _b === void 0 ? void 0 : _b.id) || "dialog-title-" + rId;
+    var dialogLabelledBy = ariaLabelledby || dialogTitleId;
+    var dialogHeader = header ? 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: classnames_1.default(classPrefix, props.className), "aria-live": !isModal ? 'polite' : undefined, ref: dialogRef, onKeyDown: onKeyDown }),
+        react_1.default.createElement("div", { className: classnames_1.default(windowClassName, windowClass), ref: drawerBaseEl },
+            top,
+            dialogHeader && (react_1.default.createElement("div", { className: classPrefix + "__header" },
+                buttonPosition === 'right' && dialogHeader,
+                buttonPosition !== 'bottom' && closeButtonContent,
+                (buttonPosition === 'left' || buttonPosition === 'hidden') && dialogHeader)),
+            react_1.default.createElement("div", { id: mainId, className: classPrefix + "__main", onScroll: onScroll }, children),
+            footer || buttonPosition === 'bottom' ? (react_1.default.createElement("div", { className: classPrefix + "__footer" },
+                footer,
+                buttonPosition === 'bottom' && closeButtonContent)) : null)));
+};
+exports.default = exports.DialogBase;

package/ebay-dialog-base/dialog-base-with-state.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { DialogBaseProps } from './components/dialogBase';
+export declare const DialogBaseWithState: ({ isModal, open, children, animated, ...rest }: DialogBaseProps<HTMLElement>) => ReactElement;
+export default DialogBaseWithState;
+//# sourceMappingURL=dialog-base-with-state.d.ts.map

package/ebay-dialog-base/dialog-base-with-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-base-with-state.d.ts","sourceRoot":"","sources":["../../src/ebay-dialog-base/dialog-base-with-state.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,YAAY,EAAE,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGrE,eAAO,MAAM,mBAAmB,mDAM7B,eAAe,CAAC,WAAW,CAAC,KAAG,YAiCjC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/ebay-dialog-base/dialog-base-with-state.js

@@ -0,0 +1,68 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogBaseWithState = void 0;
+var react_1 = __importStar(require("react"));
+var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
+var react_remove_scroll_1 = require("react-remove-scroll");
+var dialogBase_1 = require("./components/dialogBase");
+var index_1 = require("./index");
+exports.DialogBaseWithState = function (_a) {
+    var isModal = _a.isModal, open = _a.open, children = _a.children, animated = _a.animated, rest = __rest(_a, ["isModal", "open", "children", "animated"]);
+    var shouldRenderModal = isModal !== false;
+    var childrenArray = react_1.Children.toArray(children);
+    var header = childrenArray.find(function (child) { return child.type === index_1.EbayDialogHeader; });
+    var footer = childrenArray.find(function (child) { return child.type === index_1.EbayDialogFooter; });
+    var closeButton = childrenArray.find(function (child) { return child.type === index_1.EbayDialogCloseButton; });
+    var content = childrenArray.filter(function (child) {
+        return ![index_1.EbayDialogHeader, index_1.EbayDialogFooter, index_1.EbayDialogCloseButton].some(function (c) { return c === child.type; });
+    });
+    var dialogBase = (react_1.default.createElement(dialogBase_1.DialogBase, __assign({}, rest, { open: open, isModal: shouldRenderModal, header: header, footer: footer, closeButton: closeButton, animated: animated }), content));
+    var renderOverLay = function () { return shouldRenderModal ? (react_1.default.createElement(react_focus_lock_1.default, { returnFocus: { preventScroll: false } },
+        react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { enabled: open }, dialogBase))) : dialogBase; };
+    return animated || open ? renderOverLay() : null;
+};
+exports.default = exports.DialogBaseWithState;

package/ebay-dialog-base/index.d.ts

@@ -0,0 +1,6 @@
+export { default as EbayDialogHeader } from './components/dialog-header';
+export { default as EbayDialogFooter } from './components/dialog-footer';
+export { default as EbayDialogCloseButton } from './components/dialog-close-button';
+export { WindowType, DialogBaseProps } from './components/dialogBase';
+export { default as DialogBaseWithState } from './dialog-base-with-state';
+//# sourceMappingURL=index.d.ts.map

package/ebay-dialog-base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-dialog-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AACnF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA"}

package/ebay-dialog-base/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var dialog_header_1 = require("./components/dialog-header");
+Object.defineProperty(exports, "EbayDialogHeader", { enumerable: true, get: function () { return dialog_header_1.default; } });
+var dialog_footer_1 = require("./components/dialog-footer");
+Object.defineProperty(exports, "EbayDialogFooter", { enumerable: true, get: function () { return dialog_footer_1.default; } });
+var dialog_close_button_1 = require("./components/dialog-close-button");
+Object.defineProperty(exports, "EbayDialogCloseButton", { enumerable: true, get: function () { return dialog_close_button_1.default; } });
+var dialog_base_with_state_1 = require("./dialog-base-with-state");
+Object.defineProperty(exports, "DialogBaseWithState", { enumerable: true, get: function () { return dialog_base_with_state_1.default; } });

package/ebay-drawer-dialog/README.md

@@ -0,0 +1,60 @@
+# EbayDrawerDialog
+
+## Usage
+
+### Import JS
+```jsx harmony
+import { EbayDrawerDialog } from '@ebay/ui-core-react/ebay-drawer-dialog'
+```
+### Import following styles from SKIN
+```jsx harmony
+import "@ebay/skin/drawer-dialog"
+```
+### Or import styles using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/drawer-dialog.css'
+```
+### Simple opened dialog
+```jsx
+<EbayDrawerDialog open a11yClosetext="Close Drawer">
+    Hello World
+</EbayDrawerDialog>
+```
+
+## Props
+
+Name | Type | Stateful | Required | Description
+--- | --- | --- | --- | ---
+`expanded` | Boolean | No | No | Whether the drawer is expanded to full height or max 50%
+`open` | Boolean | Yes | No | Whether drawer is open.
+`noHandle` | Boolean | Yes | No | Whether handle will be shown or not.
+`focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button).
+`a11yCloseText` | String | No | Yes | A11y text for close button and mask.
+`a11yMinimizeText` | String | No | Yes | A11y text for draggable handle when drawer is maximized and clicking handle will minimize the drawer.
+`a11yMaximizeText` | String | No | Yes | A11y text for draggable handle when drawer is minimized and clicking handle will maximize the drawer.
+`animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM
+
+## Events
+
+Event | Data | Description
+--- | --- | ---
+`onShow` |  | drawer opened
+`onClose` |  | drawer closed. Triggered also when user drags down on handle (touch only) when dialog is not expanded
+`onExpanded` |  | drawer expanded to full page height. Event is triggered on drag up of handle (touch only), clicks, or when user scrolls in content when dialog is not expanded
+`onCollapsed` |  | drawer collapsed back to max 50%. Event is triggered on drags do
+
+## Child components
+
+### EbayDialogHeader
+Will render a header content for the dialog. Will always render the header element even if this is not present
+
+### EbayDialogFooter
+Will render the footer content for the dialog. If not present then will not have any footer.
+
+```jsx
+<EbayDrawerDialog>
+    <EbayDialogHeader>Title</EbayDialogHeader>
+    Some text
+    <EbayDialogFooter>(c)2021 eBay Inc.</EbayDialogFooter>
+</EbayDrawerDialog>
+```

package/ebay-drawer-dialog/components/drawer.d.ts

@@ -0,0 +1,18 @@
+import { FC, RefObject } from 'react';
+import { DialogBaseProps } from '../../ebay-dialog-base';
+export interface EbayDrawerProps<T> extends DialogBaseProps<T> {
+    expanded?: boolean;
+    open?: boolean;
+    noHandle?: boolean;
+    focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    a11yCloseText?: string;
+    a11yMinimizeText?: string;
+    a11yMaximizeText?: string;
+    onShow?: () => void;
+    onClose?: () => void;
+    onExpanded?: () => void;
+    onCollapsed?: () => void;
+}
+declare const EbayDrawerDialog: FC<EbayDrawerProps<any>>;
+export default EbayDrawerDialog;
+//# sourceMappingURL=drawer.d.ts.map

package/ebay-drawer-dialog/components/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA+B,MAAM,OAAO,CAAA;AAEjG,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA0F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}