@epilot/base-elements 2.7.20 → 2.7.24

package/dist/Drawer360/ActionFooter.js

@@ -1,109 +1,109 @@
-"use strict";
-exports.__esModule = true;
-exports.ActionFooter = void 0;
-var tslib_1 = require("tslib");
-var styles_1 = require("@material-ui/core/styles");
-var react_1 = tslib_1.__importStar(require("react"));
-var __1 = require("..");
-var Button_1 = require("../Button");
-var Icon_1 = require("../Icon");
-var Tooltip_1 = require("../Tooltip");
-var helpers_1 = require("./helpers");
-var useStyles = styles_1.makeStyles(function (theme) { return ({
-    bottomBar: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        padding: '1rem 1.5rem',
-        boxShadow: "0px 0px 24px rgba(21, 43, 66, 0.12)",
-        zIndex: 1,
-        marginTop: 'auto'
-    },
-    noWrap: {
-        whiteSpace: 'nowrap'
-    },
-    warningContent: {
-        padding: function (_a) {
-            var showFullWarning = _a.showFullWarning;
-            return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
-        },
-        borderRadius: theme.shape.borderRadius,
-        marginRight: '1rem',
-        backgroundColor: '#FFF4DF',
-        color: theme.palette.warning.contrastText,
-        fontWeight: 600,
-        display: 'flex',
-        alignItems: 'center',
-        height: 32
-    },
-    loadingMessageContent: {
-        padding: function (_a) {
-            var showFullWarning = _a.showFullWarning;
-            return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
-        },
-        borderRadius: theme.shape.borderRadius,
-        marginRight: '1rem',
-        backgroundColor: '#D9F1FC',
-        color: theme.palette.warning.contrastText,
-        fontWeight: 600,
-        display: 'flex',
-        alignItems: 'center',
-        height: 32
-    },
-    warningContentText: {
-        marginLeft: '0.3rem'
-    },
-    saveButton: { marginLeft: '0.5rem' },
-    tooltip: {
-        backgroundColor: theme.palette.warning.main,
-        color: theme.palette.warning.contrastText
-    },
-    arrow: {
-        color: theme.palette.warning.main
-    },
-    loader: {
-        marginRight: 10
-    }
-}); });
-exports.ActionFooter = react_1.memo(function (_a) {
-    var disableSaveButton = _a.disableSaveButton, locales = _a.locales, handleClose = _a.handleClose, handleSave = _a.handleSave, unsavedChanges = _a.unsavedChanges, isLoading = _a.isLoading, showDiscard = _a.showDiscard;
-    var _b = react_1.useState(undefined), ref = _b[0], setRef = _b[1];
-    var isOverflow = helpers_1.useIsOverflow(ref);
-    var showFullWarning = !isOverflow;
-    var classes = useStyles({ showFullWarning: showFullWarning });
-    var disabledSaveButton = react_1.useMemo(function () {
-        if (disableSaveButton) {
-            return true;
-        }
-        return !unsavedChanges || isLoading;
-    }, [disableSaveButton, unsavedChanges, isLoading]);
-    var measureRef = react_1.useCallback(function (node) {
-        if (node !== null) {
-            setRef(node);
-        }
-    }, []);
-    return (react_1["default"].createElement("div", { className: classes.bottomBar },
-        !isLoading && unsavedChanges && locales.warningMessage && (react_1["default"].createElement(WarningTooltip, { title: showFullWarning ? '' : locales.warningMessage },
-            react_1["default"].createElement("div", { className: classes.warningContent },
-                react_1["default"].createElement(Icon_1.Icon, { color: "secondary", name: "warning" }),
-                showFullWarning && (react_1["default"].createElement("span", { className: classes.warningContentText, ref: measureRef }, locales.warningMessage))))),
-        showDiscard && isLoading && locales.loadingMessage && (react_1["default"].createElement("div", { className: classes.loadingMessageContent },
-            react_1["default"].createElement(Icon_1.Icon, { color: "primary", name: "info" }),
-            react_1["default"].createElement("span", { className: classes.warningContentText }, locales.loadingMessage))),
-        showDiscard && !isLoading && (react_1["default"].createElement("div", null,
-            react_1["default"].createElement(Button_1.Button, { className: classes.noWrap, onClick: handleClose, variant: "outlined" }, locales.discardButtonLabel))),
-        react_1["default"].createElement(Tooltip_1.Tooltip, { title: disableSaveButton
-                ? locales.disabledSaveButtonMessage
-                : unsavedChanges
-                    ? ''
-                    : locales.noChangesMessage },
-            react_1["default"].createElement("div", null,
-                react_1["default"].createElement(Button_1.Button, { className: classes.saveButton + " " + classes.noWrap, color: "primary", disabled: disabledSaveButton, onClick: handleSave, variant: "contained" },
-                    isLoading && (react_1["default"].createElement(__1.CircularProgress, { classes: { root: classes.loader }, size: 16 })),
-                    locales.saveButtonLabel)))));
-});
-var WarningTooltip = function (props) {
-    var classes = useStyles({});
-    return (react_1["default"].createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, props, { classes: { arrow: classes.arrow, tooltip: classes.tooltip } })));
-};
+"use strict";
+exports.__esModule = true;
+exports.ActionFooter = void 0;
+var tslib_1 = require("tslib");
+var styles_1 = require("@material-ui/core/styles");
+var react_1 = tslib_1.__importStar(require("react"));
+var __1 = require("..");
+var Button_1 = require("../Button");
+var Icon_1 = require("../Icon");
+var Tooltip_1 = require("../Tooltip");
+var helpers_1 = require("./helpers");
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    bottomBar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: '1rem 1.5rem',
+        boxShadow: "0px 0px 24px rgba(21, 43, 66, 0.12)",
+        zIndex: 1,
+        marginTop: 'auto'
+    },
+    noWrap: {
+        whiteSpace: 'nowrap'
+    },
+    warningContent: {
+        padding: function (_a) {
+            var showFullWarning = _a.showFullWarning;
+            return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
+        },
+        borderRadius: theme.shape.borderRadius,
+        marginRight: '1rem',
+        backgroundColor: '#FFF4DF',
+        color: theme.palette.warning.contrastText,
+        fontWeight: 600,
+        display: 'flex',
+        alignItems: 'center',
+        height: 32
+    },
+    loadingMessageContent: {
+        padding: function (_a) {
+            var showFullWarning = _a.showFullWarning;
+            return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
+        },
+        borderRadius: theme.shape.borderRadius,
+        marginRight: '1rem',
+        backgroundColor: '#D9F1FC',
+        color: theme.palette.warning.contrastText,
+        fontWeight: 600,
+        display: 'flex',
+        alignItems: 'center',
+        height: 32
+    },
+    warningContentText: {
+        marginLeft: '0.3rem'
+    },
+    saveButton: { marginLeft: '0.5rem' },
+    tooltip: {
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText
+    },
+    arrow: {
+        color: theme.palette.warning.main
+    },
+    loader: {
+        marginRight: 10
+    }
+}); });
+exports.ActionFooter = react_1.memo(function (_a) {
+    var disableSaveButton = _a.disableSaveButton, locales = _a.locales, handleClose = _a.handleClose, handleSave = _a.handleSave, unsavedChanges = _a.unsavedChanges, isLoading = _a.isLoading, showDiscard = _a.showDiscard;
+    var _b = react_1.useState(undefined), ref = _b[0], setRef = _b[1];
+    var isOverflow = helpers_1.useIsOverflow(ref);
+    var showFullWarning = !isOverflow;
+    var classes = useStyles({ showFullWarning: showFullWarning });
+    var disabledSaveButton = react_1.useMemo(function () {
+        if (disableSaveButton) {
+            return true;
+        }
+        return !unsavedChanges || isLoading;
+    }, [disableSaveButton, unsavedChanges, isLoading]);
+    var measureRef = react_1.useCallback(function (node) {
+        if (node !== null) {
+            setRef(node);
+        }
+    }, []);
+    return (react_1["default"].createElement("div", { className: classes.bottomBar },
+        !isLoading && unsavedChanges && locales.warningMessage && (react_1["default"].createElement(WarningTooltip, { title: showFullWarning ? '' : locales.warningMessage },
+            react_1["default"].createElement("div", { className: classes.warningContent },
+                react_1["default"].createElement(Icon_1.Icon, { color: "secondary", name: "warning" }),
+                showFullWarning && (react_1["default"].createElement("span", { className: classes.warningContentText, ref: measureRef }, locales.warningMessage))))),
+        showDiscard && isLoading && locales.loadingMessage && (react_1["default"].createElement("div", { className: classes.loadingMessageContent },
+            react_1["default"].createElement(Icon_1.Icon, { color: "primary", name: "info" }),
+            react_1["default"].createElement("span", { className: classes.warningContentText }, locales.loadingMessage))),
+        showDiscard && !isLoading && (react_1["default"].createElement("div", null,
+            react_1["default"].createElement(Button_1.Button, { className: classes.noWrap, onClick: handleClose, variant: "outlined" }, locales.discardButtonLabel))),
+        react_1["default"].createElement(Tooltip_1.Tooltip, { title: disableSaveButton
+                ? locales.disabledSaveButtonMessage
+                : unsavedChanges
+                    ? ''
+                    : locales.noChangesMessage },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Button_1.Button, { className: classes.saveButton + " " + classes.noWrap, color: "primary", disabled: disabledSaveButton, onClick: handleSave, variant: "contained" },
+                    isLoading && (react_1["default"].createElement(__1.CircularProgress, { classes: { root: classes.loader }, size: 16 })),
+                    locales.saveButtonLabel)))));
+});
+var WarningTooltip = function (props) {
+    var classes = useStyles({});
+    return (react_1["default"].createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, props, { classes: { arrow: classes.arrow, tooltip: classes.tooltip } })));
+};
 //# sourceMappingURL=ActionFooter.js.map

package/dist/Drawer360/DiscardDialog.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Drawer360Locales } from './types';
-declare type DiscardDialogProps = {
-    open: boolean;
-    onClose: () => void;
-    handleDiscard: (_: React.MouseEvent<HTMLButtonElement>) => void;
-    locales: Partial<Drawer360Locales>;
-};
-export declare const DiscardDialog: React.MemoExoticComponent<({ open, onClose, handleDiscard, locales }: DiscardDialogProps) => JSX.Element>;
-export {};
+import React from 'react';
+import { Drawer360Locales } from './types';
+declare type DiscardDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    handleDiscard: (_: React.MouseEvent<HTMLButtonElement>) => void;
+    locales: Partial<Drawer360Locales>;
+};
+export declare const DiscardDialog: React.MemoExoticComponent<({ open, onClose, handleDiscard, locales }: DiscardDialogProps) => JSX.Element>;
+export {};

package/dist/Drawer360/DiscardDialog.js

@@ -1,49 +1,49 @@
-"use strict";
-exports.__esModule = true;
-exports.DiscardDialog = void 0;
-var tslib_1 = require("tslib");
-var styles_1 = require("@material-ui/core/styles");
-var react_1 = tslib_1.__importStar(require("react"));
-var Button_1 = require("../Button");
-var Dialog_1 = require("../Dialog");
-var Icon_1 = require("../Icon");
-var useStyles = styles_1.makeStyles(function (theme) { return ({
-    body: {
-        padding: '1.5rem 1.5rem',
-        position: 'absolute',
-        inset: 0,
-        background: '#EDF2F7',
-        overflowY: 'scroll'
-    },
-    noWrap: {
-        whiteSpace: 'nowrap'
-    },
-    error: {
-        backgroundColor: theme.palette.error.main,
-        color: theme.palette.error.contrastText
-    },
-    discardDialogHeader: {
-        '& > h2': {
-            display: 'flex',
-            alignItems: 'center'
-        }
-    },
-    discardDialogTitle: { marginLeft: '1rem' },
-    discardDialogContent: { margin: '0 0 0 2.3rem' }
-}); });
-exports.DiscardDialog = react_1.memo(function (_a) {
-    var _b, _c, _d, _e;
-    var open = _a.open, onClose = _a.onClose, handleDiscard = _a.handleDiscard, locales = _a.locales;
-    var classes = useStyles({ responsive: false, size: 'small' });
-    return (react_1["default"].createElement(Dialog_1.Dialog, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", maxWidth: "sm", onClose: onClose, open: open },
-        react_1["default"].createElement(Dialog_1.DialogTitle, { className: classes.discardDialogHeader },
-            react_1["default"].createElement(Icon_1.EIcon, { color: "error", fontSize: "small", name: "trash" }),
-            react_1["default"].createElement("span", { className: classes.discardDialogTitle }, (_b = locales.discardChangesDialog) === null || _b === void 0 ? void 0 : _b.title)),
-        react_1["default"].createElement(Dialog_1.DialogContent, null,
-            react_1["default"].createElement(Dialog_1.DialogContentText, { className: classes.discardDialogContent }, (_c = locales.discardChangesDialog) === null || _c === void 0 ? void 0 : _c.message)),
-        react_1["default"].createElement(Dialog_1.DialogActions, null,
-            react_1["default"].createElement(Button_1.Button, { className: classes.noWrap, onClick: onClose, variant: "outlined" }, (_d = locales.discardChangesDialog) === null || _d === void 0 ? void 0 : _d.cancelButtonLabel),
-            react_1["default"].createElement(Button_1.Button, { className: classes.error + " " + classes.noWrap, onClick: handleDiscard, variant: "contained" }, (_e = locales.discardChangesDialog) === null || _e === void 0 ? void 0 : _e.confirmButtonLabel))));
-});
-exports.DiscardDialog.displayName = 'DiscardDialog';
+"use strict";
+exports.__esModule = true;
+exports.DiscardDialog = void 0;
+var tslib_1 = require("tslib");
+var styles_1 = require("@material-ui/core/styles");
+var react_1 = tslib_1.__importStar(require("react"));
+var Button_1 = require("../Button");
+var Dialog_1 = require("../Dialog");
+var Icon_1 = require("../Icon");
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    body: {
+        padding: '1.5rem 1.5rem',
+        position: 'absolute',
+        inset: 0,
+        background: '#EDF2F7',
+        overflowY: 'scroll'
+    },
+    noWrap: {
+        whiteSpace: 'nowrap'
+    },
+    error: {
+        backgroundColor: theme.palette.error.main,
+        color: theme.palette.error.contrastText
+    },
+    discardDialogHeader: {
+        '& > h2': {
+            display: 'flex',
+            alignItems: 'center'
+        }
+    },
+    discardDialogTitle: { marginLeft: '1rem' },
+    discardDialogContent: { margin: '0 0 0 2.3rem' }
+}); });
+exports.DiscardDialog = react_1.memo(function (_a) {
+    var _b, _c, _d, _e;
+    var open = _a.open, onClose = _a.onClose, handleDiscard = _a.handleDiscard, locales = _a.locales;
+    var classes = useStyles({ responsive: false, size: 'small' });
+    return (react_1["default"].createElement(Dialog_1.Dialog, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", maxWidth: "sm", onClose: onClose, open: open },
+        react_1["default"].createElement(Dialog_1.DialogTitle, { className: classes.discardDialogHeader },
+            react_1["default"].createElement(Icon_1.EIcon, { color: "error", fontSize: "small", name: "trash" }),
+            react_1["default"].createElement("span", { className: classes.discardDialogTitle }, (_b = locales.discardChangesDialog) === null || _b === void 0 ? void 0 : _b.title)),
+        react_1["default"].createElement(Dialog_1.DialogContent, null,
+            react_1["default"].createElement(Dialog_1.DialogContentText, { className: classes.discardDialogContent }, (_c = locales.discardChangesDialog) === null || _c === void 0 ? void 0 : _c.message)),
+        react_1["default"].createElement(Dialog_1.DialogActions, null,
+            react_1["default"].createElement(Button_1.Button, { className: classes.noWrap, onClick: onClose, variant: "outlined" }, (_d = locales.discardChangesDialog) === null || _d === void 0 ? void 0 : _d.cancelButtonLabel),
+            react_1["default"].createElement(Button_1.Button, { className: classes.error + " " + classes.noWrap, onClick: handleDiscard, variant: "contained" }, (_e = locales.discardChangesDialog) === null || _e === void 0 ? void 0 : _e.confirmButtonLabel))));
+});
+exports.DiscardDialog.displayName = 'DiscardDialog';
 //# sourceMappingURL=DiscardDialog.js.map

package/dist/Drawer360/Drawer360.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { Drawer360Props } from './types';
-export declare function Drawer360({ anchor, children, onClose, onSave, onDiscard, responsive, size, showActionButtons, title, unsavedChanges, open, disableSaveButton, isLoading, locales: localesProp, onBackdropClick, onEscapeKeyDown, onRendered, ...rest }: Drawer360Props): JSX.Element;
+/// <reference types="react" />
+import { Drawer360Props } from './types';
+export declare function Drawer360({ anchor, children, onClose, onSave, onDiscard, responsive, size, showActionButtons, title, unsavedChanges, open, disableSaveButton, isLoading, locales: localesProp, onBackdropClick, onEscapeKeyDown, onRendered, ...rest }: Drawer360Props): JSX.Element;

package/dist/Drawer360/Drawer360.js

@@ -1,96 +1,96 @@
-"use strict";
-exports.__esModule = true;
-exports.Drawer360 = void 0;
-var tslib_1 = require("tslib");
-var core_1 = require("@material-ui/core");
-var styles_1 = require("@material-ui/core/styles");
-var react_1 = tslib_1.__importStar(require("react"));
-var Button_1 = require("../Button");
-var Dialog_1 = require("../Dialog");
-var Icon_1 = require("../Icon");
-var Tooltip_1 = require("../Tooltip");
-var Typography_1 = require("../Typography");
-var ActionFooter_1 = require("./ActionFooter");
-var DiscardDialog_1 = require("./DiscardDialog");
-var helpers_1 = require("./helpers");
-var customSizes = [
-    { 'one-third': '560px', 'two-thirds': '720px', 'max-width': '850px' },
-    { 'one-third': '33vw', 'two-thirds': '66vw', 'max-width': '90vw' }
-];
-var useStyles = styles_1.makeStyles(function () { return ({
-    sideDrawerRoot: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        minWidth: '464px',
-        width: function (_a) {
-            var _b = _a.responsive, responsive = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'two-thirds' : _c;
-            return customSizes[Number(responsive)][size];
-        }
-    },
-    topBar: {
-        padding: '1rem 1.5rem',
-        paddingRight: '0.5rem',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        boxShadow: 'inset 0px -1px 0px #c1c7d0;'
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: 600
-    },
-    dialogContent: {
-        position: 'relative'
-    },
-    body: {
-        padding: '1.5rem',
-        position: 'absolute',
-        inset: 0,
-        background: '#EDF2F7',
-        overflowY: 'scroll'
-    }
-}); });
-function Drawer360(_a) {
-    var _b = _a.anchor, anchor = _b === void 0 ? 'right' : _b, children = _a.children, onClose = _a.onClose, onSave = _a.onSave, onDiscard = _a.onDiscard, _c = _a.responsive, responsive = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? 'two-thirds' : _d, _e = _a.showActionButtons, showActionButtons = _e === void 0 ? true : _e, title = _a.title, unsavedChanges = _a.unsavedChanges, open = _a.open, disableSaveButton = _a.disableSaveButton, isLoading = _a.isLoading, localesProp = _a.locales, 
-    // prop sanitisation for deprecated props
-    onBackdropClick = _a.onBackdropClick, onEscapeKeyDown = _a.onEscapeKeyDown, onRendered = _a.onRendered, rest = tslib_1.__rest(_a, ["anchor", "children", "onClose", "onSave", "onDiscard", "responsive", "size", "showActionButtons", "title", "unsavedChanges", "open", "disableSaveButton", "isLoading", "locales", "onBackdropClick", "onEscapeKeyDown", "onRendered"]);
-    var classes = useStyles({ responsive: responsive, size: size });
-    var _f = react_1["default"].useState(false), showDiscardDialog = _f[0], setShowDiscardDialog = _f[1];
-    var handleClose = react_1.useCallback(function (e, reason) {
-        if (isLoading) {
-            return;
-        }
-        if (showActionButtons && unsavedChanges) {
-            setShowDiscardDialog(true);
-        }
-        else {
-            onClose && onClose(e, reason !== null && reason !== void 0 ? reason : 'backdropClick');
-        }
-    }, [showActionButtons, unsavedChanges, onClose, isLoading]);
-    var handleSave = react_1.useCallback(function (e) {
-        onSave && onSave(e);
-    }, [onSave]);
-    var handleDiscard = react_1.useCallback(function (e) {
-        setShowDiscardDialog(false);
-        onDiscard && onDiscard(e);
-    }, [onDiscard]);
-    var closeDiscardDialog = react_1.useCallback(function () {
-        setShowDiscardDialog(false);
-    }, []);
-    var locales = helpers_1.useLocales(localesProp);
-    return (react_1["default"].createElement(core_1.Drawer, tslib_1.__assign({}, rest, { anchor: anchor, elevation: 2, onClose: handleClose, open: open }),
-        react_1["default"].createElement("div", { className: classes.sideDrawerRoot + " " + rest.className },
-            react_1["default"].createElement("div", { className: classes.topBar },
-                react_1["default"].createElement(Typography_1.H3, { className: classes.title }, title),
-                !isLoading && (react_1["default"].createElement(Tooltip_1.Tooltip, { title: locales.closeButtonLabel },
-                    react_1["default"].createElement("div", null,
-                        react_1["default"].createElement(Button_1.IconButton, { onClick: handleClose },
-                            react_1["default"].createElement(Icon_1.EIcon, { color: "secondary", name: "x" })))))),
-            react_1["default"].createElement(Dialog_1.DialogContent, { className: classes.dialogContent },
-                react_1["default"].createElement("div", { className: classes.body }, children)),
-            showActionButtons && (react_1["default"].createElement(ActionFooter_1.ActionFooter, { disableSaveButton: disableSaveButton, handleClose: handleClose, handleSave: handleSave, isLoading: isLoading, locales: locales, showDiscard: Boolean(onDiscard), unsavedChanges: unsavedChanges }))),
-        react_1["default"].createElement(DiscardDialog_1.DiscardDialog, { handleDiscard: handleDiscard, locales: locales, onClose: closeDiscardDialog, open: showDiscardDialog })));
-}
-exports.Drawer360 = Drawer360;
+"use strict";
+exports.__esModule = true;
+exports.Drawer360 = void 0;
+var tslib_1 = require("tslib");
+var core_1 = require("@material-ui/core");
+var styles_1 = require("@material-ui/core/styles");
+var react_1 = tslib_1.__importStar(require("react"));
+var Button_1 = require("../Button");
+var Dialog_1 = require("../Dialog");
+var Icon_1 = require("../Icon");
+var Tooltip_1 = require("../Tooltip");
+var Typography_1 = require("../Typography");
+var ActionFooter_1 = require("./ActionFooter");
+var DiscardDialog_1 = require("./DiscardDialog");
+var helpers_1 = require("./helpers");
+var customSizes = [
+    { 'one-third': '560px', 'two-thirds': '720px', 'max-width': '850px' },
+    { 'one-third': '33vw', 'two-thirds': '66vw', 'max-width': '90vw' }
+];
+var useStyles = styles_1.makeStyles(function () { return ({
+    sideDrawerRoot: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        minWidth: '464px',
+        width: function (_a) {
+            var _b = _a.responsive, responsive = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'two-thirds' : _c;
+            return customSizes[Number(responsive)][size];
+        }
+    },
+    topBar: {
+        padding: '1rem 1.5rem',
+        paddingRight: '0.5rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxShadow: 'inset 0px -1px 0px #c1c7d0;'
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 600
+    },
+    dialogContent: {
+        position: 'relative'
+    },
+    body: {
+        padding: '1.5rem',
+        position: 'absolute',
+        inset: 0,
+        background: '#EDF2F7',
+        overflowY: 'scroll'
+    }
+}); });
+function Drawer360(_a) {
+    var _b = _a.anchor, anchor = _b === void 0 ? 'right' : _b, children = _a.children, onClose = _a.onClose, onSave = _a.onSave, onDiscard = _a.onDiscard, _c = _a.responsive, responsive = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? 'two-thirds' : _d, _e = _a.showActionButtons, showActionButtons = _e === void 0 ? true : _e, title = _a.title, unsavedChanges = _a.unsavedChanges, open = _a.open, disableSaveButton = _a.disableSaveButton, isLoading = _a.isLoading, localesProp = _a.locales, 
+    // prop sanitisation for deprecated props
+    onBackdropClick = _a.onBackdropClick, onEscapeKeyDown = _a.onEscapeKeyDown, onRendered = _a.onRendered, rest = tslib_1.__rest(_a, ["anchor", "children", "onClose", "onSave", "onDiscard", "responsive", "size", "showActionButtons", "title", "unsavedChanges", "open", "disableSaveButton", "isLoading", "locales", "onBackdropClick", "onEscapeKeyDown", "onRendered"]);
+    var classes = useStyles({ responsive: responsive, size: size });
+    var _f = react_1["default"].useState(false), showDiscardDialog = _f[0], setShowDiscardDialog = _f[1];
+    var handleClose = react_1.useCallback(function (e, reason) {
+        if (isLoading) {
+            return;
+        }
+        if (showActionButtons && unsavedChanges) {
+            setShowDiscardDialog(true);
+        }
+        else {
+            onClose && onClose(e, reason !== null && reason !== void 0 ? reason : 'backdropClick');
+        }
+    }, [showActionButtons, unsavedChanges, onClose, isLoading]);
+    var handleSave = react_1.useCallback(function (e) {
+        onSave && onSave(e);
+    }, [onSave]);
+    var handleDiscard = react_1.useCallback(function (e) {
+        setShowDiscardDialog(false);
+        onDiscard && onDiscard(e);
+    }, [onDiscard]);
+    var closeDiscardDialog = react_1.useCallback(function () {
+        setShowDiscardDialog(false);
+    }, []);
+    var locales = helpers_1.useLocales(localesProp);
+    return (react_1["default"].createElement(core_1.Drawer, tslib_1.__assign({}, rest, { anchor: anchor, elevation: 2, onClose: handleClose, open: open }),
+        react_1["default"].createElement("div", { className: classes.sideDrawerRoot + " " + rest.className },
+            react_1["default"].createElement("div", { className: classes.topBar },
+                react_1["default"].createElement(Typography_1.H3, { className: classes.title }, title),
+                !isLoading && (react_1["default"].createElement(Tooltip_1.Tooltip, { title: locales.closeButtonLabel },
+                    react_1["default"].createElement("div", null,
+                        react_1["default"].createElement(Button_1.IconButton, { onClick: handleClose },
+                            react_1["default"].createElement(Icon_1.EIcon, { color: "secondary", name: "x" })))))),
+            react_1["default"].createElement(Dialog_1.DialogContent, { className: classes.dialogContent },
+                react_1["default"].createElement("div", { className: classes.body }, children)),
+            showActionButtons && (react_1["default"].createElement(ActionFooter_1.ActionFooter, { disableSaveButton: disableSaveButton, handleClose: handleClose, handleSave: handleSave, isLoading: isLoading, locales: locales, showDiscard: Boolean(onDiscard), unsavedChanges: unsavedChanges }))),
+        react_1["default"].createElement(DiscardDialog_1.DiscardDialog, { handleDiscard: handleDiscard, locales: locales, onClose: closeDiscardDialog, open: showDiscardDialog })));
+}
+exports.Drawer360 = Drawer360;
 //# sourceMappingURL=Drawer360.js.map

package/dist/Drawer360/helpers.d.ts

@@ -1,3 +1,3 @@
-import { Drawer360Locales } from './types';
-export declare const useLocales: (locales?: Partial<Drawer360Locales> | undefined) => Drawer360Locales;
-export declare const useIsOverflow: (element?: HTMLElement | undefined, callback?: ((_?: boolean | undefined) => void) | undefined) => boolean | undefined;
+import { Drawer360Locales } from './types';
+export declare const useLocales: (locales?: Partial<Drawer360Locales> | undefined) => Drawer360Locales;
+export declare const useIsOverflow: (element?: HTMLElement | undefined, callback?: ((_?: boolean | undefined) => void) | undefined) => boolean | undefined;