react-miui 0.17.0 → 0.17.2

package/esm/components/ui/action/EqualActions.module.scss

@@ -4,3 +4,8 @@
     grid-template-columns: repeat(var(--actions-count), 1fr);
     gap: calc(56px / var(--ratio-dimensions));
 }
+
+.vertical {
+    grid-template-columns: auto;
+    grid-template-rows: repeat(var(--actions-count), 1fr);
+}

package/esm/components/ui/modal/Modal.d.ts

@@ -9,6 +9,7 @@ interface Props {
     title?: React.ReactNode;
     className?: string;
     variant?: Variant | Variant[];
+    portal?: boolean | HTMLElement;
 }
 interface SubComponents {
     NegateMargin: typeof ModalNegateMargin;

package/esm/components/ui/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,aAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjC,UAAU,KAAK;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,YAAY,EAAE,OAAO,iBAAiB,CAAC;CAC1C;AAGD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aA4G9B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,aAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjC,UAAU,KAAK;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CAClC;AAED,UAAU,aAAa;IACnB,YAAY,EAAE,OAAO,iBAAiB,CAAC;CAC1C;AAGD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAoH9B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/modal/Modal.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import classnames from "classnames";
+import { createPortal } from "react-dom";
 import { makeVariants } from "../../../utils/index.js";
 import { ModalNegateMargin } from "./ModalNoMargin.js";
 import styles from "./Modal.module.scss";
-const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, variant, }) => {
+const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, variant, }) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef(null);
@@ -73,10 +74,15 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
         [styles.isClosing]: isClosing,
         [styles.full]: v.includes("full"),
     });
-    return (React.createElement("div", { className: overlayCls, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
+    const tree = (React.createElement("div", { className: overlayCls, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
         React.createElement("div", { className: containerCls, ref: containerRef },
             titleElem,
             children)));
+    if (portal) {
+        const root = typeof portal === "boolean" ? document.body : portal;
+        return createPortal(tree, root);
+    }
+    return tree;
 };
 Modal.NegateMargin = ModalNegateMargin;
 export { Modal };

package/esm/components/ui/modal/Modal.js.map

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

package/esm/components/ui/toaster/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,UAAU,KAAK;IACX,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvC;AAGD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,UAAU,KAAK;IACX,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvC;AAGD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/ui/toaster/Notification.js

@@ -1,13 +1,17 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import classnames from "classnames";
 import styles from "./Toaster.module.scss";
 const Notification = (props) => {
+    const [forceHide, setForceHide] = useState(false);
     const handleRemove = useCallback(() => {
         props.onRemove(props.toast.id);
     }, [props.toast.id]);
+    const handleForceHide = useCallback(() => {
+        setForceHide(true);
+    }, []);
     return (React.createElement("div", { className: classnames(styles.toast, {
-            [styles.hide]: props.toast.hide,
-        }), key: props.toast.id, onTransitionEnd: handleRemove },
+            [styles.hide]: props.toast.hide || forceHide,
+        }), key: props.toast.id, onTransitionEnd: handleRemove, onClick: handleForceHide },
         React.createElement("span", null, props.toast.text)));
 };
 export { Notification };

package/esm/components/ui/toaster/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;YAChC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;SAClC,CAAC,EACF,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EACnB,eAAe,EAAE,YAAY;QAE7B,kCAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAQ,CAC7B,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAErB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;YAChC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS;SAC/C,CAAC,EACF,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EACnB,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,eAAe;QAExB,kCAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAQ,CAC7B,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/ui/toaster/Toaster.module.scss

@@ -7,11 +7,11 @@
 .toast {
     position: fixed;
     bottom: 0;
-    left: 40px;
-    right: 40px;
     display: flex;
     justify-content: center;
     z-index: 6;
+    left: 50%;
+    transform: translateX(-50%);
 
     span {
         background: rgba(56, 50, 46, 0.85);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -15,7 +15,8 @@
     "prepack": "yarn compile",
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
-    "deploy:dev": "next build && next export && netlify deploy --dir out"
+    "deploy:dev": "next build && next export && netlify deploy --dir out",
+    "prepare": "husky install"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -29,17 +30,20 @@
   "module": "./esm/index.js",
   "dependencies": {
     "classnames": "^2.3.1",
-    "oop-timers": "^4.0.1",
-    "nodemon": "^2.0.19"
+    "nodemon": "^2.0.19",
+    "oop-timers": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@dzek69/eslint-config-base": "^2.2.0",
+    "@dzek69/eslint-config-import": "^1.0.0",
+    "@dzek69/eslint-config-import-typescript": "^1.0.0",
     "@dzek69/eslint-config-react": "^1.2.2",
     "@dzek69/eslint-config-typescript": "^1.0.1",
-    "@types/jest": "^26.0.23",
+    "@knodes/typedoc-plugin-pages": "^0.23.1",
+    "@types/jest": "^29.2.0",
     "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^5.30.3",
@@ -47,24 +51,21 @@
     "babel-plugin-module-extension": "^0.1.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.18.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.0.1",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
+    "husky": "^8.0.1",
+    "jest": "^29.2.2",
     "must": "^0.13.4",
     "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",
     "sass": "^1.35.2",
-    "ts-node": "^9.0.0",
+    "ts-node": "^10.9.1",
     "typedoc": "^0.23.8",
-    "typescript": "^4.7.4",
-    "eslint-plugin-import": "^2.26.0",
-    "@dzek69/eslint-config-import": "^1.0.0",
-    "@dzek69/eslint-config-import-typescript": "^1.0.0",
-    "@knodes/typedoc-plugin-pages": "^0.23.1"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^17.0.0",
@@ -76,7 +77,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.5.0",
+    "version": "3.5.3",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

package/src/components/layout/header/Header.tsx

@@ -21,17 +21,13 @@ interface Props {
     after?: ReactNode;
 }
 
-// eslint-disable-next-line max-statements
 const Header: React.FC<Props> = (props) => {
     const { center, children, variant, position = "top" } = props;
 
-    let justActions = false;
-    if (position === "top" || position === "bottom") {
-        const chld = React.Children.toArray(props.children);
-        justActions = chld.every(c => {
-            return c && typeof c === "object" && "type" in c && c.type === Action;
-        });
-    }
+    const chld = React.Children.toArray(props.children);
+    const justActions = chld.every(c => {
+        return c && typeof c === "object" && "type" in c && c.type === Action;
+    });
 
     const cls = classnames(styles.header, {
         [styles["header--center"]]: center,
@@ -41,7 +37,8 @@ const Header: React.FC<Props> = (props) => {
 
     let contents = children;
     if (justActions) {
-        contents = <EqualActions className={styles.actions}>{contents}</EqualActions>;
+        const mode = position === "top" || position === "bottom" ? "horizontal" : "vertical";
+        contents = <EqualActions className={styles.actions} mode={mode}>{contents}</EqualActions>;
     }
 
     let before: ReactNode;

package/src/components/ui/action/EqualActions.module.scss

@@ -4,3 +4,8 @@
     grid-template-columns: repeat(var(--actions-count), 1fr);
     gap: calc(56px / var(--ratio-dimensions));
 }
+
+.vertical {
+    grid-template-columns: auto;
+    grid-template-rows: repeat(var(--actions-count), 1fr);
+}

package/src/components/ui/action/EqualActions.tsx

@@ -7,6 +7,7 @@ import styles from "./EqualActions.module.scss";
 
 interface Props {
     className?: string;
+    mode?: "horizontal" | "vertical";
 }
 
 const EqualActions: React.FC<Props> = (props) => {
@@ -21,8 +22,10 @@ const EqualActions: React.FC<Props> = (props) => {
         "--actions-count": React.Children.count(props.children),
     } as React.CSSProperties;
 
+    const cls = classnames(styles.actions, props.className, { [styles.vertical]: props.mode === "vertical" });
+
     return (
-        <div className={classnames(styles.actions, props.className)} style={style}>
+        <div className={cls} style={style}>
             {props.children}
         </div>
     );

package/src/components/ui/modal/Modal.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import classnames from "classnames";
+import { createPortal } from "react-dom";
 
 import { makeVariants } from "../../../utils/index.js";
 
@@ -17,6 +18,7 @@ interface Props {
     title?: React.ReactNode;
     className?: string;
     variant?: Variant | Variant[];
+    portal?: boolean | HTMLElement;
 }
 
 interface SubComponents {
@@ -32,6 +34,7 @@ const Modal: React.FC<Props> & SubComponents = ({
     className,
     onOverlayClick = "close",
     closeOnEsc = true,
+    portal = true,
     variant,
 }) => {
     const [isClosing, setIsClosing] = useState(false);
@@ -119,7 +122,7 @@ const Modal: React.FC<Props> & SubComponents = ({
         [styles.full]: v.includes("full"),
     });
 
-    return (
+    const tree = (
         <div
             className={overlayCls}
             onClick={handleOverlayClick}
@@ -132,6 +135,13 @@ const Modal: React.FC<Props> & SubComponents = ({
             </div>
         </div>
     );
+
+    if (portal) {
+        const root = typeof portal === "boolean" ? document.body : portal;
+        return createPortal(tree, root);
+    }
+
+    return tree;
 };
 Modal.NegateMargin = ModalNegateMargin;
 

package/src/components/ui/toaster/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import classnames from "classnames";
 
@@ -13,17 +13,23 @@ interface Props {
 
 // eslint-disable-next-line @typescript-eslint/no-shadow
 const Notification: React.FC<Props> = (props) => {
+    const [forceHide, setForceHide] = useState(false);
     const handleRemove = useCallback(() => {
         props.onRemove(props.toast.id);
     }, [props.toast.id]);
 
+    const handleForceHide = useCallback(() => {
+        setForceHide(true);
+    }, []);
+
     return (
         <div
             className={classnames(styles.toast, {
-                [styles.hide]: props.toast.hide,
+                [styles.hide]: props.toast.hide || forceHide,
             })}
             key={props.toast.id}
             onTransitionEnd={handleRemove}
+            onClick={handleForceHide}
         >
             <span>{props.toast.text}</span>
         </div>

package/src/components/ui/toaster/Toaster.module.scss

@@ -7,11 +7,11 @@
 .toast {
     position: fixed;
     bottom: 0;
-    left: 40px;
-    right: 40px;
     display: flex;
     justify-content: center;
     z-index: 6;
+    left: 50%;
+    transform: translateX(-50%);
 
     span {
         background: rgba(56, 50, 46, 0.85);