@epilot/base-elements 2.7.7 → 2.7.11

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.7.11](https://gitlab.com/e-pilot/frontend/base/elements/compare/v2.7.8-alpha.0...v2.7.11) (2022-05-19)
+
+### [2.7.11-alpha.0](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.10...v2.7.11-alpha.0) (2022-04-28)
+
+### [2.7.10](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.10-alpha.0...v2.7.10) (2022-04-28)
+
+### [2.7.10-alpha.0](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.9...v2.7.10-alpha.0) (2022-04-28)
+
+### [2.7.9](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.8...v2.7.9) (2022-04-28)
+
+### [2.7.8](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.8-alpha.0...v2.7.8) (2022-04-28)
+
+### [2.7.8-alpha.0](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.7...v2.7.8-alpha.0) (2022-04-27)
+
 ### [2.7.7](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.7-alpha.2...v2.7.7) (2022-04-19)
 
 ### [2.7.7-alpha.2](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.7-alpha.1...v2.7.7-alpha.2) (2022-04-18)

package/README.md

@@ -2,75 +2,67 @@
 
 General purpose React components for epilot UI elements.
 
-Based on [Material UI](https://material-ui.com/)
-
-## Usage
-
-See [Epilot Elements Library Storybook](https://base-elements.dev.epilot.io/?path=/story/welcome-getting-started-guide--page)
-
-## Contributing
-
-This package is shared across multiple epilot frontend projects. Please keep the components simple and general purpose.
-
-Discussion on changes happens on #ui-standards-team.
-
-PRs welcome! Please follow our [code review guideline](https://e-pilot.atlassian.net/wiki/spaces/EO/pages/2445541397/Code+Reviews).
+[base-elements.dev.epilot.io](https://base-elements.dev.epilot.io/)
 
-## Project base
-
-Project is Setup with: 
-
-- https://github.com/formium/tsdx
-- https://github.com/storybookjs/storybook
-
-## Developer instructions
-
-### Requirements
-
-- node.js (12/14 recommended)
-- yarn
+Based on [Material UI](https://material-ui.com/)
 
-### Development
+## Quick start
 
 ```bash
-git clone git@gitlab.com:e-pilot/frontend/base/elements.git
-cd elements
 yarn
-yarn test
+yarn start
 ```
 
-#### Storybook
+## Storybook
 
 ```bash
 yarn run storybook
 yarn run build-storybook
 ```
 
-#### Build / Watch
+## Contributing MDX (markdown documentation)
 
-```bash
-yarn run start # watch changes and rebuild
-yarn run build
-```
+Add a `.stories.mdx` file alongside the story (example: [stories/Progress.design.stories.mdx](stories/Progress.design.stories.mdx))
 
-#### Other Useful Scripts
+Add a `<Meta>` tag as follows:
 
-```bash
-yarn run
+```jsx
+import { Meta } from '@storybook/addon-docs';
+import { Progress } from '../src'
+
+<Meta
+  title="Elements/Feedback/Progress/Design"
+  component={Progress}
+/>
 ```
 
-### New Release
+Pass the `component` you're documenting, as well as a `title` according to where you want your story to show up in navigation:
 
-Create a Tag on master with
+![Example navigation](public/img/navi-example.png)
 
-```bash
-yarn release
-```
+You can then add your documentation with markdown, embedded stories and images, as shown in this [full example](stories/Progress.design.stories.mdx):
 
-### Branch URL Access
+```jsx
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Progress } from '../src'
 
-Every push to feature branches generate a endpoint to access the storybook in our development environment like this:
+<Meta
+  title="Elements/Feedback/Progress/Design"
+  component={Progress}
+/>
 
-- `https://base-elements--<branch_name>.dev.epilot.io`
-    - If your <branch_name> have `/`, just switch for `-`
-    - Example: `feat/somefeature` --> `https://base-elements--feat-somefeature.dev.epilot.io`
+# Progress Indicator
+
+Embedded story
+<Canvas>
+  <Story id="elements-feedback-progress--circular-progress-indeterminade-story" />
+</Canvas>
+
+Here is an image using Markdown:
+
+![My image](/img/progress-image-demo.png)
+
+Here is an image using MDX:
+
+<img src="/img/progress-image-demo.png" alt="My image" />
+```

package/dist/Drawer360/ActionFooter.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Drawer360Locales } from './types';
+declare type ActionFooterProps = {
+    locales: Drawer360Locales;
+    handleClose: (_: React.MouseEvent<HTMLButtonElement>, reason?: 'backdropClick' | 'escapeKeyDown') => void;
+    handleSave: (_: React.MouseEvent<HTMLButtonElement>) => void;
+    unsavedChanges?: boolean;
+    disableSaveButton?: boolean;
+};
+export declare const ActionFooter: React.MemoExoticComponent<({ disableSaveButton, locales, handleClose, handleSave, unsavedChanges }: ActionFooterProps) => JSX.Element>;
+export {};

package/dist/Drawer360/ActionFooter.js

@@ -0,0 +1,76 @@
+"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 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
+    },
+    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
+    }
+}); });
+exports.ActionFooter = react_1.memo(function (_a) {
+    var disableSaveButton = _a.disableSaveButton, locales = _a.locales, handleClose = _a.handleClose, handleSave = _a.handleSave, unsavedChanges = _a.unsavedChanges;
+    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 measureRef = react_1.useCallback(function (node) {
+        if (node !== null) {
+            setRef(node);
+        }
+    }, []);
+    return (react_1["default"].createElement("div", { className: classes.bottomBar },
+        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))))),
+        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: unsavedChanges ? '' : locales.noChangesMessage },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Button_1.Button, { className: classes.saveButton + " " + classes.noWrap, color: "primary", disabled: !unsavedChanges || disableSaveButton, onClick: handleSave, variant: "contained" }, 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/ActionFooter.js.map

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

package/dist/Drawer360/DiscardDialog.d.ts

@@ -0,0 +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 {};

package/dist/Drawer360/DiscardDialog.js

@@ -0,0 +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';
+//# sourceMappingURL=DiscardDialog.js.map

package/dist/Drawer360/DiscardDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscardDialog.js","sourceRoot":"","sources":["../../src/Drawer360/DiscardDialog.tsx"],"names":[],"mappings":";;;;AAAA,mDAAqD;AACrD,qDAAmC;AAEnC,oCAAkC;AAClC,oCAMkB;AAClB,gCAA+B;AAY/B,IAAM,SAAS,GAAG,mBAAU,CAAC,UAAC,KAAY,IAAK,OAAA,CAAC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;KACrB;IACD,KAAK,EAAE;QACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;QACzC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY;KACxC;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB;KACF;IACD,kBAAkB,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;IAC1C,oBAAoB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE;CACjD,CAAC,EAvB6C,CAuB7C,CAAC,CAAA;AAEU,QAAA,aAAa,GAAG,YAAI,CAC/B,UAAC,EAA6D;;QAA3D,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,aAAa,mBAAA,EAAE,OAAO,aAAA;IACtC,IAAM,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAE/D,OAAO,CACL,iCAAC,eAAM,wBACY,oBAAoB,qBACrB,cAAc,EAC9B,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI;QAEV,iCAAC,oBAAW,IAAC,SAAS,EAAE,OAAO,CAAC,mBAAmB;YACjD,iCAAC,YAAK,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG;YACrD,2CAAM,SAAS,EAAE,OAAO,CAAC,kBAAkB,UACxC,OAAO,CAAC,oBAAoB,0CAAE,KAAK,CAC/B,CACK;QACd,iCAAC,sBAAa;YACZ,iCAAC,0BAAiB,IAAC,SAAS,EAAE,OAAO,CAAC,oBAAoB,UACvD,OAAO,CAAC,oBAAoB,0CAAE,OAAO,CACpB,CACN;QAChB,iCAAC,sBAAa;YACZ,iCAAC,eAAM,IACL,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,UAAU,UAEjB,OAAO,CAAC,oBAAoB,0CAAE,iBAAiB,CACzC;YAET,iCAAC,eAAM,IACL,SAAS,EAAK,OAAO,CAAC,KAAK,SAAI,OAAO,CAAC,MAAQ,EAC/C,OAAO,EAAE,aAAa,EACtB,OAAO,EAAC,WAAW,UAElB,OAAO,CAAC,oBAAoB,0CAAE,kBAAkB,CAC1C,CACK,CACT,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}

package/dist/Drawer360/Drawer360.d.ts

@@ -0,0 +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, locales: localesProp, onBackdropClick, onEscapeKeyDown, onRendered, ...rest }: Drawer360Props): JSX.Element;

package/dist/Drawer360/Drawer360.js

@@ -0,0 +1,95 @@
+"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',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxShadow: 'inset 0px -1px 0px #c1c7d0;'
+    },
+    closeIcon: {
+        paddingRight: 0
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 600
+    },
+    dialogContent: {
+        position: 'relative'
+    },
+    body: {
+        padding: '1.5rem 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, 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", "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 (showActionButtons && unsavedChanges) {
+            setShowDiscardDialog(true);
+        }
+        else {
+            onClose && onClose(e, reason !== null && reason !== void 0 ? reason : 'backdropClick');
+        }
+    }, [showActionButtons, unsavedChanges, onClose]);
+    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),
+                react_1["default"].createElement(Tooltip_1.Tooltip, { title: locales.closeButtonLabel },
+                    react_1["default"].createElement("div", null,
+                        react_1["default"].createElement(Button_1.IconButton, { className: classes.closeIcon, 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, locales: locales, 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

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

package/dist/Drawer360/helpers.d.ts

@@ -0,0 +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;

package/dist/Drawer360/helpers.js

@@ -0,0 +1,60 @@
+"use strict";
+exports.__esModule = true;
+exports.useIsOverflow = exports.useLocales = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var DEFAULT_LOCALES = {
+    warningMessage: 'There are some unsaved changes',
+    closeButtonLabel: 'Close',
+    discardButtonLabel: 'Discard changes',
+    saveButtonLabel: 'Save changes',
+    noChangesMessage: "You're all good, no changes to be saved yet",
+    discardChangesDialog: {
+        title: 'Discard your changes',
+        message: "You have some unsaved changes. If you discard them now, you won't be able to recover them.",
+        cancelButtonLabel: 'Continue editing',
+        confirmButtonLabel: 'Discard now'
+    }
+};
+var useLocales = function (locales) {
+    return react_1.useMemo(function () {
+        if (!locales || !Object.keys(locales).length) {
+            return DEFAULT_LOCALES;
+        }
+        return tslib_1.__assign(tslib_1.__assign({}, DEFAULT_LOCALES), locales);
+    }, [locales]);
+};
+exports.useLocales = useLocales;
+var useIsOverflow = function (element, callback) {
+    var _a = react_1.useState(undefined), isOverflow = _a[0], setIsOverflow = _a[1];
+    react_1.useLayoutEffect(function () {
+        var _a, _b;
+        var trigger = function () {
+            var _a, _b;
+            var hasOverflow = Boolean(((element === null || element === void 0 ? void 0 : element.clientWidth) || 0) >
+                (((_a = element === null || element === void 0 ? void 0 : element.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth) || Number.MAX_VALUE) ||
+                ((element === null || element === void 0 ? void 0 : element.clientHeight) || 0) >
+                    (((_b = element === null || element === void 0 ? void 0 : element.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || Number.MAX_VALUE));
+            if (hasOverflow !== isOverflow) {
+                setIsOverflow(hasOverflow);
+                if (callback)
+                    callback(hasOverflow);
+            }
+        };
+        // Adding listener to the parent of parent as it changes with changing width
+        if (((_a = element === null || element === void 0 ? void 0 : element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) && 'ResizeObserver' in window) {
+            new ResizeObserver(trigger).observe((_b = element === null || element === void 0 ? void 0 : element.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement);
+        }
+        if (element === null || element === void 0 ? void 0 : element.parentElement)
+            trigger();
+        return function () {
+            var _a, _b;
+            if (((_a = element === null || element === void 0 ? void 0 : element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) && 'ResizeObserver' in window) {
+                new ResizeObserver(trigger).unobserve((_b = element === null || element === void 0 ? void 0 : element.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement);
+            }
+        };
+    }, [callback, element, setIsOverflow, isOverflow]);
+    return isOverflow;
+};
+exports.useIsOverflow = useIsOverflow;
+//# sourceMappingURL=helpers.js.map

package/dist/Drawer360/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/Drawer360/helpers.ts"],"names":[],"mappings":";;;;AAAA,+BAA0D;AAI1D,IAAM,eAAe,GAAqB;IACxC,cAAc,EAAE,gCAAgC;IAChD,gBAAgB,EAAE,OAAO;IACzB,kBAAkB,EAAE,iBAAiB;IACrC,eAAe,EAAE,cAAc;IAC/B,gBAAgB,EAAE,6CAA6C;IAC/D,oBAAoB,EAAE;QACpB,KAAK,EAAE,sBAAsB;QAC7B,OAAO,EACL,4FAA4F;QAC9F,iBAAiB,EAAE,kBAAkB;QACrC,kBAAkB,EAAE,aAAa;KAClC;CACF,CAAA;AAEM,IAAM,UAAU,GAAG,UAAC,OAAmC;IAC5D,OAAO,eAAO,CAAC;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;YAC5C,OAAO,eAAe,CAAA;SACvB;QAED,6CAAY,eAAe,GAAK,OAAO,EAAE;IAC3C,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA;AARY,QAAA,UAAU,cAQtB;AAEM,IAAM,aAAa,GAAG,UAC3B,OAAqB,EACrB,QAAgC;IAE1B,IAAA,KAA8B,gBAAQ,CAAsB,SAAS,CAAC,EAArE,UAAU,QAAA,EAAE,aAAa,QAA4C,CAAA;IAE5E,uBAAe,CAAC;;QACd,IAAM,OAAO,GAAG;;YACd,IAAM,WAAW,GAAG,OAAO,CACzB,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,CAAC,CAAC;gBACzB,CAAC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,WAAW,KAAI,MAAM,CAAC,SAAS,CAAC;gBACzD,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,KAAI,CAAC,CAAC;oBAC1B,CAAC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,YAAY,KAAI,MAAM,CAAC,SAAS,CAAC,CAC/D,CAAA;YAED,IAAI,WAAW,KAAK,UAAU,EAAE;gBAC9B,aAAa,CAAC,WAAW,CAAC,CAAA;gBAC1B,IAAI,QAAQ;oBAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;aACpC;QACH,CAAC,CAAA;QAED,4EAA4E;QAC5E,IAAI,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,aAAa,KAAI,gBAAgB,IAAI,MAAM,EAAE;YACvE,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,OAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,aAAa,CAAC,CAAA;SAC3E;QACD,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa;YAAE,OAAO,EAAE,CAAA;QAErC,OAAO;;YACL,IAAI,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,aAAa,KAAI,gBAAgB,IAAI,MAAM,EAAE;gBACvE,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC,SAAS,OACnC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,aAAa,CACtC,CAAA;aACF;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,CAAA;IAElD,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AArCY,QAAA,aAAa,iBAqCzB"}

package/dist/Drawer360/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer360';
+export * from './types';

package/dist/{EntityItem → Drawer360}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./EntityItem"), exports);
+tslib_1.__exportStar(require("./Drawer360"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/Drawer360/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer360/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B;AAC3B,kDAAuB"}

package/dist/Drawer360/types.d.ts

@@ -0,0 +1,27 @@
+import { DrawerProps as MuiDrawerProps } from '@material-ui/core';
+import React from 'react';
+export declare type Drawer360Props = Omit<MuiDrawerProps, 'anchor' | 'elevation' | 'variant' | 'transitionDuration' | 'title'> & {
+    responsive?: boolean;
+    size?: 'one-third' | 'two-thirds' | 'max-width';
+    title?: React.ReactNode;
+    unsavedChanges?: boolean;
+    onSave?: (_: React.MouseEvent) => void;
+    onDiscard?: (_: React.MouseEvent) => void;
+    showActionButtons?: boolean;
+    locales?: Partial<Drawer360Locales>;
+    disableSaveButton?: boolean;
+    anchor?: 'left' | 'right';
+};
+export interface Drawer360Locales {
+    saveButtonLabel: string;
+    discardButtonLabel: string;
+    warningMessage: string;
+    noChangesMessage: string;
+    closeButtonLabel: string;
+    discardChangesDialog: {
+        title: string;
+        message: string;
+        cancelButtonLabel: string;
+        confirmButtonLabel: string;
+    };
+}

package/dist/{EntityItem → Drawer360}/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/EntityItem/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Drawer360/types.ts"],"names":[],"mappings":""}