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

package/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -25,7 +25,7 @@ const HeaderTitle = styled_1.default.div `
 `;
 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)));
+    return (react_1.default.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
+        react_1.default.createElement(HeaderTitle, { id: `${dialogID}-title` }, children)));
 };
 exports.default = react_1.default.forwardRef(ConfirmBoxHeader);

package/Modal/ConfirmBox/index.d.ts

@@ -7,9 +7,9 @@ import { ConfirmBoxHeaderProps } from './ConfirmBoxHeader';
 export interface ConfirmBoxProps extends ReactModal.Props {
     readonly variant: 'confirm-box';
     /**
-     * Dialog title
+     * Dialog header
      */
-    readonly title: string;
+    readonly header: string;
     /**
      * On confirmation event
      */

package/Modal/ConfirmBox/index.js

@@ -22,7 +22,7 @@ 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 { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = props, otherProps = __rest(props, ["header", "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)();
@@ -40,7 +40,7 @@ const ConfirmBox = (props, ref) => {
     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.Header, { dialogID: dialogID }, header)), [overridesMap, dialogID, header]),
                 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,
@@ -81,7 +81,9 @@ const ConfirmBox = (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-confirmbox .ReactModal__Content--after-open {

package/Modal/Drawer/DrawerHeader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
     /**
-     * Drawer title
+     * Drawer header
      */
-    readonly title?: React.ReactNode;
+    readonly header?: React.ReactNode;
     /**
      * Display close button in the header
      */
@@ -15,9 +15,9 @@ export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'titl
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
     /**
-     * Drawer title
+     * Drawer header
      */
-    readonly title?: React.ReactNode;
+    readonly header?: React.ReactNode;
     /**
      * Display close button in the header
      */

package/Modal/Drawer/DrawerHeader.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const Base_1 = __importDefault(require("../../Typography/Base"));
 const CloseIcon_1 = __importDefault(require("../CloseIcon"));
 const Button_1 = __importDefault(require("../../Button"));
 const Header = styled_1.default.div `
@@ -24,7 +25,7 @@ const Header = styled_1.default.div `
   align-items: center;
   justify-content: space-between;
 `;
-const Title = styled_1.default.div `
+const Title = (0, styled_1.default)(Base_1.default) `
   font-size: 1.3em;
   font-weight: 600;
   margin-right: 1em;
@@ -50,9 +51,9 @@ const CloseButton = (0, styled_1.default)(Button_1.default) `
   cursor: pointer;
 `;
 const DrawerHeader = (props, ref) => {
-    const { title, children, showCloseButton, onRequestClose } = props, nativeProps = __rest(props, ["title", "children", "showCloseButton", "onRequestClose"]);
+    const { header, children, showCloseButton, onRequestClose } = props, nativeProps = __rest(props, ["header", "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(Title, null, header),
         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)))));

package/Modal/Drawer/index.d.ts

@@ -11,9 +11,9 @@ export interface DrawerProps extends ReactModal.Props {
      */
     readonly children: React.ReactNode | React.ReactNode[];
     /**
-     * Drawer title
+     * Drawer header
      */
-    readonly title?: React.ReactNode;
+    readonly header?: React.ReactNode;
     /**
      * Drawer toolbar
      */

package/Modal/Drawer/index.js

@@ -45,12 +45,12 @@ const DrawerHeader_1 = __importDefault(require("./DrawerHeader"));
 const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const Drawer = (props, ref) => {
-    const { children, onRequestClose, showCloseButton, title, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "title", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "toolbar", "footer", "overrides"]);
     const theme = (0, react_1.useTheme)();
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
-    const hasHeader = React.useMemo(() => typeof title === 'string' ||
+    const hasHeader = React.useMemo(() => typeof header === 'string' ||
         typeof toolbar !== 'undefined' ||
-        typeof onRequestClose === 'function', [onRequestClose, title, toolbar]);
+        typeof onRequestClose === 'function', [onRequestClose, header, toolbar]);
     const overridesMap = React.useMemo(() => (Object.assign({ Container: DrawerContainer_1.default,
         Header: DrawerHeader_1.default,
         Content: DrawerContent_1.default,
@@ -58,7 +58,7 @@ const Drawer = (props, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(react_modal_1.default, Object.assign({ ref: ref, closeTimeoutMS: 300, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true, portalClassName: "modal-drawer", onRequestClose: onRequestClose }, otherProps),
             React.createElement(overridesMap.Container, null,
-                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, title: title, onRequestClose: onRequestClose }, toolbar)),
+                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, header: header, onRequestClose: onRequestClose }, toolbar)),
                 React.createElement(overridesMap.Content, null, children),
                 hasFooter && React.createElement(overridesMap.Footer, null, footer))),
         React.createElement(react_1.Global, { styles: (0, react_1.css) `

package/Modal/MessageBox/MessageBoxHeader.js

@@ -25,7 +25,7 @@ const HeaderTitle = styled_1.default.div `
 `;
 const MessageBoxHeader = (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)));
+    return (react_1.default.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
+        react_1.default.createElement(HeaderTitle, { id: `${dialogID}-title` }, children)));
 };
 exports.default = react_1.default.forwardRef(MessageBoxHeader);

package/Modal/MessageBox/index.d.ts

@@ -7,9 +7,9 @@ import { MessageBoxHeaderProps } from './MessageBoxHeader';
 export interface MessageBoxProps extends ReactModal.Props {
     readonly variant: 'message-box';
     /**
-     * Dialog title
+     * Dialog header
      */
-    readonly title: string;
+    readonly header: React.ReactNode;
     /**
      * On close request
      */

package/Modal/MessageBox/index.js

@@ -45,7 +45,7 @@ const MessageBoxContent_1 = __importDefault(require("./MessageBoxContent"));
 const MessageBoxFooter_1 = __importDefault(require("./MessageBoxFooter"));
 const MessageBoxHeader_1 = __importDefault(require("./MessageBoxHeader"));
 const MessageBox = (props, ref) => {
-    const { title, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["title", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
     const dialogID = React.useMemo(() => `dialog-Message-${new Date().getTime()}`, []);
     const buttonRef = React.useRef(null);
     const theme = (0, react_1.useTheme)();
@@ -63,7 +63,7 @@ const MessageBox = (props, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(react_modal_1.default, Object.assign({ ref: ref, portalClassName: "modal-messagebox", closeTimeoutMS: 200, shouldCloseOnEsc: true, shouldCloseOnOverlayClick: false, onRequestClose: onRequestClose, isOpen: isOpen }, otherProps),
             React.createElement(overridesMap.Container, { dialogID: dialogID },
-                React.createElement(overridesMap.Header, { dialogID: dialogID }, title),
+                React.createElement(overridesMap.Header, { dialogID: dialogID }, header),
                 React.createElement(overridesMap.Content, { dialogID: dialogID }, children),
                 React.createElement(overridesMap.Footer, { dialogID: dialogID, onRequestClose: onRequestClose, okButtonLabel: okButtonLabel }))),
         React.createElement(react_1.Global, { styles: (0, react_1.css) `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.26",
+  "version": "0.1.0-rc.28",
   "description": "UI Kit",
   "repository": {
     "type": "git",