@koine/react 1.1.10 → 1.1.11

package/Details/Details.mjs

@@ -0,0 +1,63 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
+import { useWindowSize } from "../hooks/useWindowSize";
+import { extendComponent, } from "../helpers";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var Content = "div";
+/**
+ * FIXME: it actually works even without forwardRef, check if we do need it
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+ */
+var DetailsWithRef = forwardRef(function Details(_a, ref) {
+    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = useWindowSize();
+    var open = isControlled ? propOpen : stateOpen;
+    var _d = useState(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
+    var content = useRef(null);
+    var defaultId = useId();
+    id = id || defaultId;
+    var handleClick = useCallback(function () {
+        if (hash) {
+            window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
+        }
+        if (onChange) {
+            onChange();
+        }
+        if (!isControlled) {
+            setStateOpen(function (prevOpen) { return !prevOpen; });
+        }
+    }, [open, hash, onChange, isControlled]);
+    useEffect(function () {
+        if (content.current) {
+            setHeight(Math.ceil(content.current.offsetHeight));
+        }
+    }, [winSize, recalc]);
+    // deeplink on mount
+    useEffect(function () {
+        if (!isControlled && hash && window.location.hash === hash) {
+            setStateOpen(true);
+        }
+    }, [hash, isControlled]);
+    return (_jsxs(Root, __assign({}, props, { open: open || false }, { children: [_jsx(Summary, __assign({ "$open": open, onClick: handleClick }, { children: summary || " " })), _jsx(Body, __assign({ "$open": open, style: { overflow: overflow } }, { children: _jsx(Content
+                // ref={content}
+                , __assign({ "$open": open, 
+                    // aria-expanded={open}
+                    // aria-label={open ? ariaCollapse : ariaExpand}
+                    style: {
+                        pointerEvents: open ? "all" : "none",
+                    } }, { children: children })) }))] })));
+});
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
+});

package/Details/index.js

@@ -1 +1,4 @@
-export * from "./Details";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Details"), exports);

package/Details/index.mjs

@@ -0,0 +1 @@
+export * from "./Details";

package/Details/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Details/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Dialog/DialogMui.js

@@ -1,16 +1,19 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import ModalUnstyled from "@mui/base/ModalUnstyled";
-import { MdClear as IconClose } from "react-icons/md";
-import { extendComponent } from "../helpers";
-export var Root = ModalUnstyled;
-export var Backdrop = "div";
-export var Container = "div";
-export var Paper = "div";
-export var Close = "button";
-export var Header = "div";
-export var Body = "div";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
+var md_1 = require("react-icons/md");
+var helpers_1 = require("../helpers");
+exports.Root = ModalUnstyled_1.default;
+exports.Backdrop = "div";
+exports.Container = "div";
+exports.Paper = "div";
+exports.Close = "button";
+exports.Header = "div";
+exports.Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -46,11 +49,11 @@ export var Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-var DialogWithRef = forwardRef(function Dialog(_a, ref) {
-    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+var DialogWithRef = (0, react_1.forwardRef)(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = tslib_1.__rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    var backdropClick = useRef();
+    var backdropClick = (0, react_1.useRef)();
     var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
@@ -67,14 +70,14 @@ var DialogWithRef = forwardRef(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, __assign({ slots: { backdrop: Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsxs(Paper, __assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] })) })) })));
+    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ slots: { backdrop: exports.Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsxs)(exports.Paper, tslib_1.__assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, tslib_1.__assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) })), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] })) })) })));
 });
-export var KoineDialog = extendComponent(DialogWithRef, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
 });

package/{node/Dialog/DialogMui.js → Dialog/DialogMui.mjs}

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
-var md_1 = require("react-icons/md");
-var helpers_1 = require("../helpers");
-exports.Root = ModalUnstyled_1.default;
-exports.Backdrop = "div";
-exports.Container = "div";
-exports.Paper = "div";
-exports.Close = "button";
-exports.Header = "div";
-exports.Body = "div";
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import ModalUnstyled from "@mui/base/ModalUnstyled";
+import { MdClear as IconClose } from "react-icons/md";
+import { extendComponent } from "../helpers";
+export var Root = ModalUnstyled;
+export var Backdrop = "div";
+export var Container = "div";
+export var Paper = "div";
+export var Close = "button";
+export var Header = "div";
+export var Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -49,11 +46,11 @@ exports.Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-var DialogWithRef = (0, react_1.forwardRef)(function Dialog(_a, ref) {
-    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = tslib_1.__rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+var DialogWithRef = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    var backdropClick = (0, react_1.useRef)();
+    var backdropClick = useRef();
     var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
@@ -70,14 +67,14 @@ var DialogWithRef = (0, react_1.forwardRef)(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ slots: { backdrop: exports.Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsxs)(exports.Paper, tslib_1.__assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, tslib_1.__assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) })), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] })) })) })));
+    return (_jsx(Root, __assign({ slots: { backdrop: Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsxs(Paper, __assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] })) })) })));
 });
-exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    Container: exports.Container,
-    Paper: exports.Paper,
-    Close: exports.Close,
-    Header: exports.Header,
-    Body: exports.Body,
+export var KoineDialog = extendComponent(DialogWithRef, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });

package/Dialog/css/bare.js

@@ -1,21 +1,24 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
-import * as _ from "../DialogMui";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var _ = tslib_1.__importStar(require("../DialogMui"));
 // export type { KoineDialogProps } from "../DialogMui";
-export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
-export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
-export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
-export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
-export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
-export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
-export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
-export var KoineDialog = extendComponent(_.KoineDialog, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["dialog"], ["dialog"])));
+exports.Backdrop = (0, helpers_1.classed)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+exports.Container = (0, helpers_1.classed)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+exports.Paper = (0, helpers_1.classed)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+exports.Close = (0, helpers_1.classed)(_.Close)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+exports.Header = (0, helpers_1.classed)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+exports.Body = (0, helpers_1.classed)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["dialogBody"], ["dialogBody"])));
+exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/css/bare.mjs

@@ -0,0 +1,21 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+import * as _ from "../DialogMui";
+// export type { KoineDialogProps } from "../DialogMui";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/index.js

@@ -1 +1,5 @@
-export { KoineDialog } from "./DialogMui";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+var DialogMui_1 = require("./DialogMui");
+Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return DialogMui_1.KoineDialog; } });

package/Dialog/index.mjs

@@ -0,0 +1 @@
+export { KoineDialog } from "./DialogMui";

package/Dialog/m/bare.js

@@ -1,26 +1,29 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from "react";
-import { MdClear as IconClose } from "react-icons/md";
-import { AnimatePresence, m } from "framer-motion";
-import { extendComponent } from "../../helpers";
-import { mRootStyle } from "./index";
-import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "../DialogMui";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var md_1 = require("react-icons/md");
+var framer_motion_1 = require("framer-motion");
+var helpers_1 = require("../../helpers");
+var index_1 = require("./index");
+var DialogMui_1 = require("../DialogMui");
 /**
  * About nested `AnimatePresence` and animated dialogs with framer @see:
  *
  * - https://github.com/framer/motion/issues/478
  * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
  */
-var Dialog = forwardRef(function Dialog(_a, ref) {
-    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, Root = _a.Root, Backdrop = _a.Backdrop, Container = _a.Container, Paper = _a.Paper, Close = _a.Close, Header = _a.Header, Body = _a.Body, mBackdrop = _a.mBackdrop, mPaper = _a.mPaper, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
-    var BackdropMotion = useMemo(function () { return function (props) {
-        return (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, __assign({}, mBackdrop, props)) }));
+var Dialog = (0, react_1.forwardRef)(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, Root = _a.Root, Backdrop = _a.Backdrop, Container = _a.Container, Paper = _a.Paper, Close = _a.Close, Header = _a.Header, Body = _a.Body, mBackdrop = _a.mBackdrop, mPaper = _a.mPaper, onClose = _a.onClose, props = tslib_1.__rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
+    var BackdropMotion = (0, react_1.useMemo)(function () { return function (props) {
+        return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (0, jsx_runtime_1.jsx)(Backdrop, tslib_1.__assign({}, mBackdrop, props)) }));
     }; }, [Backdrop, mBackdrop]);
     // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    var backdropClick = useRef();
+    var backdropClick = (0, react_1.useRef)();
     var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
@@ -37,16 +40,16 @@ var Dialog = forwardRef(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, __assign({ keepMounted: true, slots: { backdrop: BackdropMotion }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: mRootStyle(props) }, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsx(AnimatePresence, { children: props.open && (
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ keepMounted: true, slots: { backdrop: BackdropMotion }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: (0, index_1.mRootStyle)(props) }, { children: (0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (
                 // @ts-expect-error framer props collision...
-                _jsxs(Paper, __assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] }))) }) })) })));
+                (0, jsx_runtime_1.jsxs)(Paper, tslib_1.__assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(Header, { children: title }), (0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) })), (0, jsx_runtime_1.jsx)(Body, { children: children })] }))) }) })) })));
 });
-export var KoineDialog = extendComponent(Dialog, {
-    Root: Root,
-    Backdrop: m(Backdrop),
-    Container: Container,
-    Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
+exports.KoineDialog = (0, helpers_1.extendComponent)(Dialog, {
+    Root: DialogMui_1.Root,
+    Backdrop: (0, framer_motion_1.m)(DialogMui_1.Backdrop),
+    Container: DialogMui_1.Container,
+    Paper: (0, framer_motion_1.m)(DialogMui_1.Paper),
+    Close: DialogMui_1.Close,
+    Header: DialogMui_1.Header,
+    Body: DialogMui_1.Body,
 });

package/Dialog/m/bare.mjs

@@ -0,0 +1,52 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from "react";
+import { MdClear as IconClose } from "react-icons/md";
+import { AnimatePresence, m } from "framer-motion";
+import { extendComponent } from "../../helpers";
+import { mRootStyle } from "./index";
+import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "../DialogMui";
+/**
+ * About nested `AnimatePresence` and animated dialogs with framer @see:
+ *
+ * - https://github.com/framer/motion/issues/478
+ * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
+ */
+var Dialog = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, Root = _a.Root, Backdrop = _a.Backdrop, Container = _a.Container, Paper = _a.Paper, Close = _a.Close, Header = _a.Header, Body = _a.Body, mBackdrop = _a.mBackdrop, mPaper = _a.mPaper, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
+    var BackdropMotion = useMemo(function () { return function (props) {
+        return (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, __assign({}, mBackdrop, props)) }));
+    }; }, [Backdrop, mBackdrop]);
+    // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
+    // click handling is taken from
+    // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
+    var backdropClick = useRef();
+    var handleMouseDown = function (event) {
+        // We don't want to close the dialog when clicking the dialog content.
+        // Make sure the event starts and ends on the same DOM element.
+        backdropClick.current = event.target === event.currentTarget;
+    };
+    var handleBackdropClick = function (event) {
+        // Ignore the events not coming from the "backdrop".
+        if (!backdropClick.current) {
+            return;
+        }
+        backdropClick.current = null;
+        // if (onBackdropClick) onBackdropClick(event);
+        if (onClose) {
+            onClose(event, "backdropClick");
+        }
+    };
+    return (_jsx(Root, __assign({ keepMounted: true, slots: { backdrop: BackdropMotion }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: mRootStyle(props) }, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsx(AnimatePresence, { children: props.open && (
+                // @ts-expect-error framer props collision...
+                _jsxs(Paper, __assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] }))) }) })) })));
+});
+export var KoineDialog = extendComponent(Dialog, {
+    Root: Root,
+    Backdrop: m(Backdrop),
+    Container: Container,
+    Paper: m(Paper),
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});

package/Dialog/m/basic.js

@@ -1,5 +1,9 @@
-export * from "./index";
-export var dialogBackdropMotion = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./index"), exports);
+exports.dialogBackdropMotion = {
     initial: {
         opacity: 0,
     },
@@ -12,7 +16,7 @@ export var dialogBackdropMotion = {
         opacity: 0,
     },
 };
-export var dialogPaperMotion = {
+exports.dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,

package/{node/Dialog/m/basic.js → Dialog/m/basic.mjs}

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./index"), exports);
-exports.dialogBackdropMotion = {
+export * from "./index";
+export var dialogBackdropMotion = {
     initial: {
         opacity: 0,
     },
@@ -16,7 +12,7 @@ exports.dialogBackdropMotion = {
         opacity: 0,
     },
 };
-exports.dialogPaperMotion = {
+export var dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,

package/Dialog/m/index.js

@@ -1,4 +1,8 @@
-import { __assign } from "tslib";
-export var mRootStyle = function (props) {
-    return (__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mRootStyle = void 0;
+var tslib_1 = require("tslib");
+var mRootStyle = function (props) {
+    return (tslib_1.__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
 };
+exports.mRootStyle = mRootStyle;

package/Dialog/m/index.mjs

@@ -0,0 +1,4 @@
+import { __assign } from "tslib";
+export var mRootStyle = function (props) {
+    return (__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+};

package/Dialog/m/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Dialog/m/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Dialog/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Dialog/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Dialog/sc/bare.js

@@ -1,18 +1,21 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-import { extendComponent } from "../../helpers";
-import { inset0 } from "../../styles/styled";
-import { IconButton } from "../../Buttons";
-import * as _ from "../DialogMui";
-export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), inset0);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var helpers_1 = require("../../helpers");
+var styled_1 = require("../../styles/styled");
+var Buttons_1 = require("../../Buttons");
+var _ = tslib_1.__importStar(require("../DialogMui"));
+exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), styled_1.inset0);
 // export const Backdrop = (props) => {
 //   return <div {...props} />;
 // }
-export var Backdrop = styled(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), inset0);
+exports.Backdrop = (0, styled_components_1.default)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), styled_1.inset0);
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
  */
-export var Container = styled(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
+exports.Container = (0, styled_components_1.default)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
     return p.$scrollPaper
         ? "display: flex; justify-content: center; align-items: center;"
         : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }";
@@ -20,24 +23,24 @@ export var Container = styled(_.Container)(templateObject_3 || (templateObject_3
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
  */
-export var Paper = styled(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
+exports.Paper = (0, styled_components_1.default)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
     return p.$scrollPaper
         ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
         : "display: inline-block; vertical-align: middle; text-align: initial;";
 });
-export var Close = styled(IconButton)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
-export var Header = styled(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+exports.Header = (0, styled_components_1.default)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
  */
-export var Body = styled(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
-export var KoineDialog = extendComponent(_.KoineDialog, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+exports.Body = (0, styled_components_1.default)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
+exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;