@koine/react 2.0.0-beta.2 → 2.0.0-beta.20

package/Details/Details.js

@@ -1,33 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useWindowSize_1 = require("../hooks/useWindowSize");
-var helpers_1 = require("../helpers");
-exports.Root = "details";
-exports.Summary = "summary";
-exports.Body = "div";
-exports.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 = (0, react_1.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 = tslib_1.__rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
+import { extendComponent, } from "../extendComponent.js";
+import { useWindowSize } from "../useWindowSize.js";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var Content = "div";
+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 = (0, react_1.useState)(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
+    var _b = __read(useState(propOpen), 2), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = __read(useState(0), 2), setHeight = _c[1];
     var hash = id ? "#".concat(id) : "";
-    var winSize = (0, useWindowSize_1.useWindowSize)();
+    var winSize = useWindowSize();
     var open = isControlled ? propOpen : stateOpen;
-    var _d = (0, react_1.useState)(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
-    var content = (0, react_1.useRef)(null);
-    var defaultId = (0, react_1.useId)();
+    var _d = __read(useState(open ? "unset" : "hidden"), 1), overflow = _d[0];
+    var content = useRef(null);
+    var defaultId = useId();
     id = id || defaultId;
-    var handleClick = (0, react_1.useCallback)(function () {
+    var handleClick = useCallback(function () {
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -38,29 +30,23 @@ var DetailsWithRef = (0, react_1.forwardRef)(function Details(_a, ref) {
             setStateOpen(function (prevOpen) { return !prevOpen; });
         }
     }, [open, hash, onChange, isControlled]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
     }, [winSize, recalc]);
-    // deeplink on mount
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
     }, [hash, isControlled]);
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({}, props, { open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow: overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
-                // ref={content}
-                , { "$open": open, 
-                    // aria-expanded={open}
-                    // aria-label={open ? ariaCollapse : ariaExpand}
-                    style: {
+    return (_jsxs(Root, __assign({}, props, { open: open || false, children: [_jsx(Summary, { "$open": open, onClick: handleClick, children: summary || " " }), _jsx(Body, { "$open": open, style: { overflow: overflow }, children: _jsx(Content, { "$open": open, style: {
                         pointerEvents: open ? "all" : "none",
                     }, children: children }) })] })));
 });
-exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
-    Root: exports.Root,
-    Summary: exports.Summary,
-    Body: exports.Body,
-    Content: exports.Content,
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
 });

package/Details/index.d.ts

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

package/Details/index.js

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

package/Dialog/DialogMui.d.ts

@@ -1,14 +1,12 @@
-import React from "react";
 import ModalUnstyled, { type ModalProps as ModalUnstyledProps } from "@mui/base/Modal";
 import type { MotionProps } from "framer-motion";
+import React from "react";
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../extendComponent.js";
 type ReducedModalUnstyledProps = Omit<ModalUnstyledProps, "onClose" | "BackdropComponent" | "classes" | "closeAfterTransition" | "component" | "components" | "componentsProps">;
 export type OwnProps = React.PropsWithChildren<ReducedModalUnstyledProps & {
     onClose: (event: object, reason?: string) => any;
     title?: string;
-    /** @default true */
-    /** @default false */
     $scrollPaper?: boolean;
     mBackdrop?: MotionProps;
     mPaper?: MotionProps;
@@ -58,13 +56,13 @@ export type Props = Simplify<WithComponents<OwnProps, Components>>;
 export type DialogProps = Props;
 export type KoineDialogProps = Props;
 export declare const Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-export declare const Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
-    open?: boolean | undefined;
+export declare const Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
+    open?: OwnProps["open"];
 }>>;
 export declare const Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
     children?: React.ReactNode;
 }>>;
-export declare const Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     "aria-label": string;
 } & Pick<OwnProps, "$scrollPaper"> & {
     children?: React.ReactNode;
@@ -81,340 +79,23 @@ export declare const Body: NonNullable<React.ElementType<Omit<React.DetailedHTML
     children?: React.ReactNode;
 }>>;
 export declare const KoineDialog: ((props: Omit<{
-    key?: React.Key | null | undefined;
-    id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: React.AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
-    'aria-braillelabel'?: string | undefined;
-    'aria-brailleroledescription'?: string | undefined;
-    'aria-busy'?: (boolean | "true" | "false") | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-colcount'?: number | undefined;
-    'aria-colindex'?: number | undefined;
-    'aria-colindextext'?: string | undefined;
-    'aria-colspan'?: number | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-description'?: string | undefined;
-    'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-    'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "true" | "false") | undefined;
-    'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    'aria-keyshortcuts'?: string | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-level'?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "true" | "false") | undefined;
-    'aria-multiline'?: (boolean | "true" | "false") | undefined;
-    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-    'aria-orientation'?: "horizontal" | "vertical" | undefined;
-    'aria-owns'?: string | undefined;
-    'aria-placeholder'?: string | undefined;
-    'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "true" | "false") | undefined;
-    'aria-roledescription'?: string | undefined;
-    'aria-rowcount'?: number | undefined;
-    'aria-rowindex'?: number | undefined;
-    'aria-rowindextext'?: string | undefined;
-    'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "true" | "false") | undefined;
-    'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
-    'aria-valuemax'?: number | undefined;
-    'aria-valuemin'?: number | undefined;
-    'aria-valuenow'?: number | undefined;
-    'aria-valuetext'?: string | undefined;
-    children: React.ReactElement<any, string | React.JSXElementConstructor<any>> & React.ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    container?: Element | (() => Element | null) | null | undefined;
-    disableAutoFocus?: boolean | undefined;
-    disableEnforceFocus?: boolean | undefined;
-    disableEscapeKeyDown?: boolean | undefined;
-    disablePortal?: boolean | undefined;
-    disableRestoreFocus?: boolean | undefined;
-    disableScrollLock?: boolean | undefined;
-    hideBackdrop?: boolean | undefined;
-    keepMounted?: boolean | undefined;
-    onBackdropClick?: React.ReactEventHandler<{}> | undefined;
-    open: boolean;
-    slotProps?: {
-        root?: import("@mui/base/utils").SlotComponentProps<"div", import("@mui/base/Modal").ModalRootSlotPropsOverrides, {
-            children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            closeAfterTransition: boolean;
-            container?: Element | (() => Element | null) | null | undefined;
-            disableAutoFocus: boolean;
-            disableEnforceFocus: boolean;
-            disableEscapeKeyDown: boolean;
-            disablePortal: boolean;
-            disableRestoreFocus: boolean;
-            disableScrollLock: boolean;
-            hideBackdrop: boolean;
-            keepMounted: boolean;
-            onBackdropClick?: React.ReactEventHandler<{}> | undefined;
-            onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
-            open: boolean;
-            slotProps?: any | undefined;
-            slots?: import("@mui/base/Modal").ModalSlots | undefined;
-            exited: boolean;
-        }> | undefined;
-        backdrop?: import("@mui/base/utils").SlotComponentProps<"div", import("@mui/base/Modal").ModalBackdropSlotPropsOverrides, {
-            children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            closeAfterTransition: boolean;
-            container?: Element | (() => Element | null) | null | undefined;
-            disableAutoFocus: boolean;
-            disableEnforceFocus: boolean;
-            disableEscapeKeyDown: boolean;
-            disablePortal: boolean;
-            disableRestoreFocus: boolean;
-            disableScrollLock: boolean;
-            hideBackdrop: boolean;
-            keepMounted: boolean;
-            onBackdropClick?: React.ReactEventHandler<{}> | undefined;
-            onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
-            open: boolean;
-            slotProps?: any | undefined;
-            slots?: import("@mui/base/Modal").ModalSlots | undefined;
-            exited: boolean;
-        }> | undefined;
-    } | undefined;
-    slots?: import("@mui/base/Modal").ModalSlots | undefined;
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
     onClose: (event: object, reason?: string) => any;
+    title?: string | undefined;
     $scrollPaper?: boolean | undefined;
     mBackdrop?: MotionProps | undefined;
     mPaper?: MotionProps | undefined;
+    children?: React.ReactNode;
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
-        open?: boolean | undefined;
+    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
+        open?: OwnProps["open"];
     }>>;
     Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
     }>>;
-    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
@@ -432,13 +113,13 @@ export declare const KoineDialog: ((props: Omit<{
     }>>;
 }, "ref"> & React.RefAttributes<HTMLDivElement>) => React.FunctionComponentElement<any>) & {
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
-        open?: boolean | undefined;
+    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
+        open?: OwnProps["open"];
     }>>;
     Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
     }>>;
-    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
@@ -457,13 +138,13 @@ export declare const KoineDialog: ((props: Omit<{
 } & {
     defaultProps: {
         Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-        Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
-            open?: boolean | undefined;
+        Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
+            open?: OwnProps["open"];
         }>>;
         Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
             children?: React.ReactNode;
         }>>;
-        Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             "aria-label": string;
         } & Pick<OwnProps, "$scrollPaper"> & {
             children?: React.ReactNode;

package/Dialog/DialogMui.js

@@ -1,83 +1,39 @@
-"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 Modal_1 = tslib_1.__importDefault(require("@mui/base/Modal"));
-var md_1 = require("react-icons/md");
-var helpers_1 = require("../helpers");
-exports.Root = Modal_1.default;
-exports.Backdrop = "div";
-exports.Container = "div";
-exports.Paper = "div";
-exports.Close = "button";
-exports.Header = "div";
-exports.Body = "div";
-// const Dialog = ({
-//   children,
-//   title,
-//   $scrollPaper,
-//   Root: _Root,
-//   Backdrop: _Backdrop,
-//   Container: _Container,
-//   Paper: _Paper,
-//   Close: _Close,
-//   Header: _Header,
-//   Body: _Body,
-//   ...props
-// }: KoineDialogProps) => (
-//   <Root components={{ Backdrop }} onBackdropClick={props.onClose} {...props}>
-//     <Container $scrollPaper={$scrollPaper}>
-//       <Paper aria-label={title || ""} $scrollPaper={$scrollPaper}>
-//         {title && <Header>{title}</Header>}
-//         <Close onClick={props.onClose}>
-//           <IconClose />
-//         </Close>
-//         <Body>{children}</Body>
-//       </Paper>
-//     </Container>
-//   </Root>
-// );
-/**
- *
- * Main differences from [Mui Dialog](https://mui.com/material-ui/react-dialog):
- *
- * - By default uses `scroll="body"` instead of paper.
- * - Optionally uses `framer-motion` for animations
- * - Uses backdrop blur by default
- *
- * 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"]);
-    // 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)();
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ModalUnstyled from "@mui/base/Modal";
+import { forwardRef, useRef } from "react";
+import { MdClear as IconClose } from "react-icons/md";
+import { extendComponent } from "../extendComponent.js";
+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";
+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 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 ((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, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { 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, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { 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,
 });