@epilot/base-elements 2.7.24 → 2.7.25

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 Dialog_1 = require("../Dialog");
+var Icon_1 = require("../Icon");
+var IconButton_1 = require("../IconButton");
+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(IconButton_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/Drawer360.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer360.js","sourceRoot":"","sources":["../../src/Drawer360/Drawer360.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer360.js","sourceRoot":"","sources":["../../src/Drawer360/Drawer360.tsx"],"names":[],"mappings":"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"}

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;