react-miui 0.11.0 → 0.12.0

package/esm/components/ui/pop/Pop.js

@@ -1,8 +1,8 @@
 import React, { Component, createRef } from "react";
-import { HandleEsc } from "./HandleEsc";
 import { OnButtonClick } from "./OnButtonClick";
 import { PopOption } from "./PopOption";
 import styles from "./Pop.module.scss";
+import { HandleEsc } from "../../utils/HandleEsc";
 const html = typeof document === "object" ? document.getElementsByTagName("html")[0] : null;
 const getElementDimensions = (elem) => {
     return {
@@ -78,6 +78,7 @@ class Pop extends Component {
         }
     }
     render() {
+        var _a;
         const style = {};
         if (this.state.vertical === "top") {
             style.top = this.state.y;
@@ -94,8 +95,10 @@ class Pop extends Component {
         if (!this.props.open) {
             return null;
         }
+        const closeOnEsc = (_a = this.props.closeOnEsc) !== null && _a !== void 0 ? _a : true;
+        const esc = closeOnEsc && React.createElement(HandleEsc, { onPress: this.handleEsc });
         return (React.createElement("div", { className: styles.overlay, ref: this.rootRef, onClick: this.handleOverlayClick },
-            React.createElement(HandleEsc, { onPress: this.handleEsc }),
+            esc,
             React.createElement(OnButtonClick, { onClick: this.handleEsc },
                 React.createElement("ul", { className: styles.pop, style: style }, this.props.children))));
     }

package/esm/components/ui/pop/Pop.js.map

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

package/esm/components/ui/stats/Stats.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface Stat {
+    label: string;
+    value: string;
+}
+interface Props {
+    stats: Stat[];
+    variant?: "dark";
+}
+declare const Stats: React.FC<Props>;
+export { Stats };
+//# sourceMappingURL=Stats.d.ts.map

package/esm/components/ui/stats/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,IAAI;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,KAAK;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/stats/Stats.js

@@ -0,0 +1,18 @@
+import React from "react";
+import classnames from "classnames";
+import styles from "./Stats.module.scss";
+const Stats = (props) => {
+    const list = props.stats.map((s, k) => (React.createElement("li", { key: String(k), className: styles.item },
+        React.createElement("span", { className: styles.value }, s.value),
+        React.createElement("span", { className: styles.label }, s.label))));
+    const len = list.length;
+    for (let i = 0; i < len - 1; i++) {
+        list.splice((i * 2) + 1, 0, React.createElement("li", { key: "separator" + String(i), className: styles.separator }));
+    }
+    const cls = classnames(styles.stats, {
+        [styles["stats-dark"]]: props.variant === "dark",
+    });
+    return (React.createElement("ul", { className: cls }, list));
+};
+export { Stats };
+//# sourceMappingURL=Stats.js.map

package/esm/components/ui/stats/Stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAYzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnC,4BAAI,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;QACtC,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ;QAC/C,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ,CAC9C,CACR,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAE9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,4BAAI,GAAG,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CAAC,CAAC;KAClG;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;QACjC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,MAAM;KACnD,CAAC,CAAC;IAEH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG,IACb,IAAI,CACJ,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/stats/Stats.module.scss

@@ -0,0 +1,48 @@
+.stats {
+    --stats-border: 1px solid rgba(255, 255, 255, .15);
+    --stats-bg: rgba(255, 255, 255, .05);
+    --stats-value-color: rgba(255, 255, 255, .9);
+    --stats-label-color: rgba(255, 255, 255, .61);
+
+    display: flex;
+    width: 100%;
+    padding: calc(60px / var(--ratio-dimensions)) 0;
+    margin: 0;
+    border-top: var(--stats-border);
+    background: var(--stats-bg);
+    background-clip: padding-box;
+    list-style-type: none;
+}
+
+.stats-dark {
+    --stats-border: 1px solid rgba(0, 0, 0, .15);
+    --stats-bg: rgba(0, 0, 0, .05);
+    --stats-value-color: rgba(0, 0, 0, .9);
+    --stats-label-color: rgba(0, 0, 0, .61);
+}
+
+.item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: calc(20px / var(--ratio-dimensions));
+}
+
+.separator {
+    border-left: var(--stats-border);
+}
+
+.label {
+    display: block;
+    color: var(--stats-label-color);
+    font-size: calc(22px / var(--ratio-font));
+}
+
+.value {
+    display: block;
+    color: var(--stats-value-color);
+    font-size: calc(30px / var(--ratio-font));
+}

package/esm/components/utils/HandleEsc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/utils/HandleEsc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/global.scss

@@ -68,6 +68,9 @@
     --grey1: #737373;
 
     --focus-color: #dcaf00;
+
+    --scrollbars-thumb: var(--grey1);
+    --scrollbars-bg: transparent;
 }
 
 *:focus {

package/esm/index.d.ts

@@ -17,6 +17,7 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/drawer/Drawer.js";
 export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/esm/index.js

@@ -17,6 +17,7 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/drawer/Drawer.js";
 export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/esm/scrollbars.scss

@@ -0,0 +1,22 @@
+.miui-scrollbars {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
+    scrollbar-width: thin !important;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        background: var(--scrollbars-thumb);
+        background-clip: padding-box;
+        border: 2px solid var(--scrollbars-bg);
+        min-height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical:active {
+        background: var(--scrollbars-thumb);
+        border: 2px solid var(--scrollbars-bg);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -28,7 +28,8 @@
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",
   "dependencies": {
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.1",
+    "oop-timers": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

package/src/components/icons/Dots.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Dots: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 16 72"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M13.65 13.65Q16 11.3 16 8q0-3.3-2.35-5.65Q11.3 0 8 0 4.7 0 2.35 2.35 0 4.7 0 8q0 3.3 2.35 5.65Q4.7 16 8 16q3.3 0 5.65-2.35M8 44q3.3 0 5.65-2.35Q16 39.3 16 36q0-3.3-2.35-5.65Q11.3 28 8 28q-3.3 0-5.65 2.35Q0 32.7 0 36q0 3.3 2.35 5.65Q4.7 44 8 44M8 72q3.3 0 5.65-2.35Q16 67.3 16 64q0-3.3-2.35-5.65Q11.3 56 8 56q-3.3 0-5.65 2.35Q0 60.7 0 64q0 3.3 2.35 5.65Q4.7 72 8 72"} />
+        </svg>
+    );
+};
+
+export { Dots };

package/src/components/icons/Icon.tsx

@@ -9,6 +9,7 @@ import { Battery } from "./Battery.js";
 import { Heart } from "./Heart.js";
 import { Trash } from "./Trash.js";
 import { Config } from "./Config.js";
+import { Dots } from "./Dots.js";
 
 enum ICON {
     checkmark = "checkmark",
@@ -19,6 +20,7 @@ enum ICON {
     heart = "heart",
     trash = "trash",
     config = "config",
+    dots = "dots",
 }
 
 interface Props {
@@ -35,6 +37,7 @@ const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.heart, Heart],
     [ICON.trash, Trash],
     [ICON.config, Config],
+    [ICON.dots, Dots],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

package/src/components/layout/header/Header.module.scss

@@ -15,6 +15,12 @@
     --background-color: var(--toolbar-bg);
 }
 
+.header--colored {
+    --border-color: var(--custom-header-color);
+    --background-color: var(--custom-header-color);
+    color: var(--custom-text-color);
+}
+
 .header--top, .header--bottom {
     padding: 0 16.666px;
     min-height: 44px;

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

@@ -8,7 +8,7 @@ import { EqualActions } from "../../ui/action/EqualActions.js";
 
 interface Props {
     center?: boolean;
-    variant?: "toolbar";
+    variant?: "toolbar" | "colored";
     /**
      * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
      * To set up position on the screen you need to properly style parent element.
@@ -34,6 +34,7 @@ const Header: React.FC<Props> = (props) => {
     const cls = classnames(styles.header, {
         [styles["header--center"]]: center,
         [styles["header--toolbar"]]: variant === "toolbar",
+        [styles["header--colored"]]: variant === "colored",
     }, styles[`header--${position}`], props.className);
 
     let contents = children;

package/src/components/layout/header/HeaderIconAction.module.scss

@@ -4,7 +4,7 @@
     border-radius: 666px;
     display: inline-block;
     border: calc(2px / var(--ratio-border)) solid transparent;
-    color: var(--header-text);
+    color: currentColor;
 
     &:hover {
         background: #00000022;
@@ -19,4 +19,5 @@
     width: 16px;
     height: 16px;
     display: block;
+    fill: currentColor;
 }

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

@@ -7,7 +7,12 @@ import styles from "./StickyHeader.module.scss";
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 
 interface Content {
-    Content: React.FC;
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    Content: React.FC<ContentProps>;
+}
+
+interface ContentProps {
+    className?: string;
 }
 
 interface Props {
@@ -35,7 +40,12 @@ const StickyHeader: React.FC<Props> & Content = (props) => {
     content = content as never;
 
     const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
-    const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`]);
+
+    const contentCls = classnames(
+        styles.stickyHeader__content,
+        styles[`stickyHeader__content--${position}`],
+        (content as { props: ContentProps }).props.className,
+    );
 
     return (
         <div className={cls}>

package/src/components/ui/drawer/Drawer.module.scss

@@ -0,0 +1,15 @@
+.drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    z-index: 1;
+
+    transition: transform 300ms;
+}
+
+.content {
+    height: 100%;
+}

package/src/components/ui/drawer/Drawer.tsx

@@ -0,0 +1,88 @@
+import React, { Component } from "react";
+import { Timeout } from "oop-timers";
+
+import styles from "./Drawer.module.scss";
+import { HandleEsc } from "../../utils/HandleEsc";
+
+const RENDER_TIMEOUT = 500;
+
+interface Props {
+    isOpen: boolean;
+    closeOnEsc?: boolean;
+    onClose: () => void;
+}
+
+interface State {
+    shouldRenderWhenClosed: boolean;
+}
+
+class Drawer extends Component<Props, State> {
+    public constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            shouldRenderWhenClosed: false,
+        };
+    }
+
+    public componentDidMount() {
+        this.timeout = new Timeout(() => {
+            // eslint-disable-next-line react/no-did-mount-set-state
+            this.setState({ shouldRenderWhenClosed: false });
+        }, RENDER_TIMEOUT);
+    }
+
+    public componentDidUpdate(prevProps: Props) {
+        if (!prevProps.isOpen && this.props.isOpen) {
+            this.onOpen();
+        }
+
+        if (prevProps.isOpen && !this.props.isOpen) {
+            this.onClose();
+        }
+    }
+
+    public componentWillUnmount() {
+        this.timeout?.stop();
+        this.timeout = null;
+    }
+
+    private timeout: Timeout | null = null;
+
+    private onOpen() {
+        this.timeout?.stop();
+        this.setState({ shouldRenderWhenClosed: true });
+    }
+
+    private onClose() {
+        this.timeout?.start();
+    }
+
+    private readonly handleEsc = () => {
+        this.props.onClose();
+    };
+
+    public render() {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        const y = this.props.isOpen ? 0 : 100;
+        const style = {
+            transform: `translateY(${y}%)`,
+        };
+
+        const shouldRender = this.props.isOpen || this.state.shouldRenderWhenClosed;
+
+        const closeOnEsc = this.props.closeOnEsc ?? true;
+        const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
+
+        return (
+            <div className={styles.drawer} style={style}>
+                {esc}
+                <div className={styles.content}>
+                    {shouldRender && this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export { Drawer };

package/src/components/ui/pop/Pop.tsx

@@ -1,14 +1,15 @@
 import React, { Component, createRef } from "react";
 
-import { HandleEsc } from "./HandleEsc";
 import { OnButtonClick } from "./OnButtonClick";
 import { PopOption } from "./PopOption";
 import styles from "./Pop.module.scss";
+import { HandleEsc } from "../../utils/HandleEsc";
 
 interface Props {
     open: boolean;
     onClose: () => void;
     anchor?: HTMLElement | "prev" | "next";
+    closeOnEsc?: boolean;
 }
 
 interface State {
@@ -137,9 +138,12 @@ class Pop extends Component<Props, State> {
             return null;
         }
 
+        const closeOnEsc = this.props.closeOnEsc ?? true;
+        const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
+
         return (
             <div className={styles.overlay} ref={this.rootRef} onClick={this.handleOverlayClick}>
-                <HandleEsc onPress={this.handleEsc} />
+                {esc}
                 <OnButtonClick onClick={this.handleEsc}>
                     <ul className={styles.pop} style={style}>
                         {this.props.children}

package/src/components/ui/stats/Stats.module.scss

@@ -0,0 +1,48 @@
+.stats {
+    --stats-border: 1px solid rgba(255, 255, 255, .15);
+    --stats-bg: rgba(255, 255, 255, .05);
+    --stats-value-color: rgba(255, 255, 255, .9);
+    --stats-label-color: rgba(255, 255, 255, .61);
+
+    display: flex;
+    width: 100%;
+    padding: calc(60px / var(--ratio-dimensions)) 0;
+    margin: 0;
+    border-top: var(--stats-border);
+    background: var(--stats-bg);
+    background-clip: padding-box;
+    list-style-type: none;
+}
+
+.stats-dark {
+    --stats-border: 1px solid rgba(0, 0, 0, .15);
+    --stats-bg: rgba(0, 0, 0, .05);
+    --stats-value-color: rgba(0, 0, 0, .9);
+    --stats-label-color: rgba(0, 0, 0, .61);
+}
+
+.item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: calc(20px / var(--ratio-dimensions));
+}
+
+.separator {
+    border-left: var(--stats-border);
+}
+
+.label {
+    display: block;
+    color: var(--stats-label-color);
+    font-size: calc(22px / var(--ratio-font));
+}
+
+.value {
+    display: block;
+    color: var(--stats-value-color);
+    font-size: calc(30px / var(--ratio-font));
+}

package/src/components/ui/stats/Stats.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Stats.module.scss";
+
+interface Stat {
+    label: string;
+    value: string;
+}
+
+interface Props {
+    stats: Stat[];
+    variant?: "dark";
+}
+
+const Stats: React.FC<Props> = (props) => {
+    const list = props.stats.map((s, k) => (
+        <li key={String(k)} className={styles.item}>
+            <span className={styles.value}>{s.value}</span>
+            <span className={styles.label}>{s.label}</span>
+        </li>
+    ));
+
+    const len = list.length;
+
+    for (let i = 0; i < len - 1; i++) {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        list.splice((i * 2) + 1, 0, <li key={"separator" + String(i)} className={styles.separator} />);
+    }
+
+    const cls = classnames(styles.stats, {
+        [styles["stats-dark"]]: props.variant === "dark",
+    });
+
+    return (
+        <ul className={cls}>
+            {list}
+        </ul>
+    );
+};
+
+export { Stats };

package/src/demo/Menu.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import styles from "./Menu.module.scss";
 import type { componentsMap } from "./componentsMap";
+import classnames from "classnames";
 
 interface Props {
     ancestors?: string[];
@@ -27,7 +28,7 @@ const Menu: React.FC<Props> = (props) => {
 
     if (!props.ancestors!.length) {
         cmp.unshift(<li key={"--main"}><a href={"#"}>Main</a></li>);
-        return <menu className={styles.menu}>{contents}</menu>;
+        return <menu className={classnames(styles.menu, "miui-scrollbars")}>{contents}</menu>;
     }
 
     return contents;

package/src/demo/components/layout/header/StickyHeader.module.scss

@@ -0,0 +1,14 @@
+.coloredBox {
+    height: 300px;
+    background: var(--green1-darker);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    flex-direction: column;
+}
+
+.header {
+    --custom-header-color: var(--green1-darker);
+    --custom-text-color: white;
+}