@via-profit/ui-kit 0.1.0-rc.24 → 0.1.0-rc.26

package/Modal/ConfirmBox/ConfirmBoxContainer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ConfirmBoxContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/ConfirmBox/ConfirmBoxContainer.js

@@ -0,0 +1,28 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const ConfirmBoxContainer = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (react_1.default.createElement(Container, Object.assign({ role: "modal-confirmbox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ConfirmBoxContainer);

package/Modal/ConfirmBox/ConfirmBoxContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ConfirmBoxContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -0,0 +1,27 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Content = styled_1.default.div `
+  flex: 1;
+  padding: 1em 1em;
+`;
+const ConfirmBoxContent = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (react_1.default.createElement(Content, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ConfirmBoxContent);

package/Modal/ConfirmBox/ConfirmBoxFooter.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type ConfirmBoxFooterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+    /**
+     * On confirmation event
+     */
+    readonly onRequestYes: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * On close request
+     */
+    readonly onRequestClose: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+    /**
+     * Label of Dissmiss button
+     * **Default**: `"Dismiss"`
+     */
+    readonly dismissButtonLabel?: React.ReactNode;
+    /**
+     * Label of Confirmation button
+     * **Default**: `"Confirm"`
+     */
+    readonly confirmButtonLabel?: React.ReactNode;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+    /**
+     * On confirmation event
+     */
+    readonly onRequestYes: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * On close request
+     */
+    readonly onRequestClose: (event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void;
+    /**
+     * Label of Dissmiss button
+     * **Default**: `"Dismiss"`
+     */
+    readonly dismissButtonLabel?: React.ReactNode;
+    /**
+     * Label of Confirmation button
+     * **Default**: `"Confirm"`
+     */
+    readonly confirmButtonLabel?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -0,0 +1,46 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Button_1 = __importDefault(require("../../Button"));
+const Footer = styled_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 1em 1em 1em 1em;
+
+  & > button {
+    border-radius: 0;
+  }
+
+  & > button:first-of-type {
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+  }
+
+  & > button:last-child {
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+  }
+`;
+const ConfirmBoxFooter = (props, ref) => {
+    const { onRequestClose, onRequestYes, dismissButtonLabel, confirmButtonLabel } = props, nativeProps = __rest(props, ["onRequestClose", "onRequestYes", "dismissButtonLabel", "confirmButtonLabel"]);
+    return (react_1.default.createElement(Footer, Object.assign({}, nativeProps, { ref: ref }),
+        react_1.default.createElement(Button_1.default, { onClick: onRequestClose }, typeof dismissButtonLabel === 'undefined' ? 'Dismiss' : dismissButtonLabel),
+        react_1.default.createElement(Button_1.default, { color: "primary", onClick: onRequestYes }, typeof confirmButtonLabel === 'undefined' ? 'Confirm' : confirmButtonLabel)));
+};
+exports.default = react_1.default.forwardRef(ConfirmBoxFooter);

package/Modal/ConfirmBox/ConfirmBoxHeader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ConfirmBoxHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Dialog unique ID
+     */
+    readonly dialogID: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -0,0 +1,31 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Header = styled_1.default.div `
+  padding: 1em 1em 0 1em;
+`;
+const HeaderTitle = styled_1.default.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const ConfirmBoxHeader = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (react_1.default.createElement(Header, null,
+        react_1.default.createElement(HeaderTitle, Object.assign({}, nativeProps, { id: `${dialogID}-title`, ref: ref }), children)));
+};
+exports.default = react_1.default.forwardRef(ConfirmBoxHeader);

package/Modal/ConfirmBox/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import { ConfirmBoxContainerProps } from './ConfirmBoxContainer';
+import { ConfirmBoxContentProps } from './ConfirmBoxContent';
+import { ConfirmBoxFooterProps } from './ConfirmBoxFooter';
+import { ConfirmBoxHeaderProps } from './ConfirmBoxHeader';
+export interface ConfirmBoxProps extends ReactModal.Props {
+    readonly variant: 'confirm-box';
+    /**
+     * Dialog title
+     */
+    readonly title: string;
+    /**
+     * On confirmation event
+     */
+    readonly onRequestYes: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * On close request
+     */
+    readonly onRequestClose: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+    /**
+     * Label of Dissmiss button
+     * **Default**: `"Dismiss"`
+     */
+    readonly dismissButtonLabel?: React.ReactNode;
+    /**
+     * Label of Confirmation button
+     * **Default**: `"Confirm"`
+     */
+    readonly confirmButtonLabel?: React.ReactNode;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: ConfirmBoxOverrides;
+}
+export interface ConfirmBoxOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<ConfirmBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Element ontent
+     */
+    readonly Content?: React.ForwardRefExoticComponent<ConfirmBoxContentProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Element footer
+     */
+    readonly Footer?: React.ForwardRefExoticComponent<ConfirmBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Element header
+     */
+    readonly Header?: React.ForwardRefExoticComponent<ConfirmBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<ConfirmBoxProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/Modal/ConfirmBox/index.js

@@ -0,0 +1,99 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const react_modal_1 = __importDefault(require("react-modal"));
+const ConfirmBoxContainer_1 = __importDefault(require("./ConfirmBoxContainer"));
+const ConfirmBoxContent_1 = __importDefault(require("./ConfirmBoxContent"));
+const ConfirmBoxFooter_1 = __importDefault(require("./ConfirmBoxFooter"));
+const ConfirmBoxHeader_1 = __importDefault(require("./ConfirmBoxHeader"));
+const ConfirmBox = (props, ref) => {
+    const { title, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = props, otherProps = __rest(props, ["title", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
+    const dialogID = react_1.default.useMemo(() => `dialog-confirm-${new Date().getTime()}`, []);
+    const buttonRef = react_1.default.useRef(null);
+    const theme = (0, react_2.useTheme)();
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ Container: ConfirmBoxContainer_1.default,
+        Content: ConfirmBoxContent_1.default,
+        Footer: ConfirmBoxFooter_1.default,
+        Header: ConfirmBoxHeader_1.default }, overrides)), [overrides]);
+    react_1.default.useEffect(() => {
+        setTimeout(() => {
+            if (isOpen && buttonRef.current) {
+                buttonRef.current.focus();
+            }
+        }, 15);
+    }, [isOpen]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_modal_1.default, Object.assign({ ref: ref, portalClassName: "modal-confirmbox", closeTimeoutMS: 200, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: false, onRequestClose: onRequestClose, isOpen: isOpen }, otherProps),
+            react_1.default.createElement(overridesMap.Container, { dialogID: dialogID },
+                react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Header, { dialogID: dialogID }, title)), [overridesMap, dialogID, title]),
+                react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Content, { dialogID: dialogID }, children)), [dialogID, children, overridesMap]),
+                react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Footer, { dialogID: dialogID, onRequestClose: onRequestClose, onRequestYes: onRequestYes, dismissButtonLabel: dismissButtonLabel, confirmButtonLabel: confirmButtonLabel })), [
+                    confirmButtonLabel,
+                    dialogID,
+                    dismissButtonLabel,
+                    onRequestClose,
+                    onRequestYes,
+                    overridesMap,
+                ]))),
+        react_1.default.createElement(react_2.Global, { styles: (0, react_2.css) `
+          .modal-confirmbox .ReactModal__Overlay {
+            position: fixed !important;
+            inset: 0 !important;
+            z-index: ${theme.zIndex.modal} !important;
+            transition: background-color 120ms ease-in-out !important;
+            background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
+          }
+
+          .modal-confirmbox .ReactModal__Overlay--after-open {
+            background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
+          }
+
+          .modal-confirmbox .ReactModal__Overlay--before-close {
+            background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
+          }
+
+          .modal-confirmbox .ReactModal__Content {
+            inset: initial !important;
+            border: none !important;
+            position: absolute !important;
+            top: 50% !important;
+            padding: 0 !important;
+            left: 50% !important;
+            opacity: 0 !important;
+            overflow: auto !important;
+            -webkit-overflow-scrolling: touch !important;
+            outline: none !important;
+            background: ${theme.color.surface.toString()} !important;
+            border-radius: 1em !important;
+            transform: translate(-50%, -40%) !important;
+            transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
+          }
+
+          .modal-confirmbox .ReactModal__Content--after-open {
+            opacity: 1 !important;
+            transform: translate(-50%, -50%) !important;
+            transition-duration: 160ms !important;
+          }
+
+          .modal-confirmbox .ReactModal__Content--before-close {
+            opacity: 0 !important;
+            transform: translate(-50%, 300px) !important;
+          }
+        ` })));
+};
+exports.default = react_1.default.forwardRef(ConfirmBox);

package/Modal/Dialog/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ReactModal from 'react-modal';
+export interface DialogProps extends ReactModal.Props {
+    readonly variant: 'dialog';
+    readonly children: React.ReactNode | React.ReactNode[];
+}
+declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<ReactModal>>;
+export default _default;

package/Modal/{ModalDialog.js → Dialog/index.js}

@@ -38,16 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Container = styled_1.default.div ``;
-const ModalDialog = (props, ref) => {
+const Dialog = (props, ref) => {
     const { children } = props, otherProps = __rest(props, ["children"]);
     const theme = (0, react_1.useTheme)();
     return (React.createElement(React.Fragment, null,
         React.createElement(react_modal_1.default, Object.assign({ ref: ref, closeTimeoutMS: 200, portalClassName: "modal-dialog" }, otherProps),
-            React.createElement(Container, null, children)),
+            React.createElement("div", null, children)),
         React.createElement(react_1.Global, { styles: (0, react_1.css) `
           .modal-dialog .ReactModal__Overlay {
             position: fixed !important;
@@ -80,7 +78,9 @@ const ModalDialog = (props, ref) => {
             background: ${theme.color.surface.toString()} !important;
             border-radius: 1em !important;
             transform: translate(-50%, -40%) !important;
-            transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
+            transition:
+              transform 100ms ease-in-out,
+              opacity 100ms ease-in-out !important;
           }
 
           .modal-dialog .ReactModal__Content--after-open {
@@ -95,4 +95,4 @@ const ModalDialog = (props, ref) => {
           }
         ` })));
 };
-exports.default = React.forwardRef(ModalDialog);
+exports.default = React.forwardRef(Dialog);

package/Modal/Drawer/DrawerContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type DrawerContainerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/Drawer/DrawerContainer.js

@@ -0,0 +1,29 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  min-height: 2rem;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+`;
+const DrawerContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Container, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(DrawerContainer);

package/Modal/Drawer/DrawerContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/Drawer/DrawerContent.js

@@ -0,0 +1,30 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Content = styled_1.default.div `
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5em 1em;
+`;
+const DrawerContent = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Content, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(DrawerContent);

package/Modal/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/Drawer/DrawerFooter.js

@@ -0,0 +1,26 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Footer = styled_1.default.div `
+  padding: 0.5em 1em;
+`;
+const DrawerFooter = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Footer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(DrawerFooter);

package/Modal/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /**
+     * Drawer title
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * Display close button in the header
+     */
+    readonly showCloseButton?: boolean;
+    /**
+     * On close request
+     */
+    readonly onRequestClose?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /**
+     * Drawer title
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * Display close button in the header
+     */
+    readonly showCloseButton?: boolean | undefined;
+    /**
+     * On close request
+     */
+    readonly onRequestClose?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/Drawer/DrawerHeader.js

@@ -0,0 +1,60 @@
+"use strict";
+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 });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CloseIcon_1 = __importDefault(require("../CloseIcon"));
+const Button_1 = __importDefault(require("../../Button"));
+const Header = styled_1.default.div `
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const Title = styled_1.default.div `
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-right: 1em;
+`;
+const Toolbar = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const CloseButton = (0, styled_1.default)(Button_1.default) `
+  margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
+  color: ${props => props.theme.color.textPrimary.toString()};
+  background: none;
+  width: auto;
+  height: auto;
+  padding: 0.6em;
+  font-size: 1em;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const DrawerHeader = (props, ref) => {
+    const { title, children, showCloseButton, onRequestClose } = props, nativeProps = __rest(props, ["title", "children", "showCloseButton", "onRequestClose"]);
+    return (react_1.default.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
+        typeof title === 'string' && react_1.default.createElement(Title, null, title),
+        react_1.default.createElement(Toolbar, null, children),
+        typeof onRequestClose === 'function' && showCloseButton && (react_1.default.createElement(CloseButton, { type: "button", "$withToolbar": Boolean(toolbar), onClick: onRequestClose },
+            react_1.default.createElement(CloseIcon_1.default, null)))));
+};
+exports.default = react_1.default.forwardRef(DrawerHeader);