@use-kona/editor 0.1.3 → 0.1.4

package/dist/examples/ui/Button/ButtonWrapper.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styles_module from "./styles.module.js";
-const ButtonWrapper = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { size, variant = 'secondary', className, ...rest } = props;
-    const sizeClass = styles_module[`size${size.charAt(0).toUpperCase()}${size.slice(1)}`];
-    const variantClass = styles_module[variant];
-    return /*#__PURE__*/ jsx("button", {
-        ref: ref,
-        className: `${styles_module.button} ${sizeClass} ${variantClass} ${className || ''}`,
-        ...rest
-    });
-});
-export { ButtonWrapper };

package/dist/examples/ui/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export { ButtonWrapper } from './ButtonWrapper';

package/dist/examples/ui/Button/index.js

@@ -1,3 +0,0 @@
-import { Button } from "./Button.js";
-import { ButtonWrapper } from "./ButtonWrapper.js";
-export { Button, ButtonWrapper };

package/dist/examples/ui/Button/styles.module.js

@@ -1,10 +0,0 @@
-import "./styles_module.css";
-const styles_module = {
-    button: "button-sJxDuy",
-    sizeSm: "sizeSm-iMrC7k",
-    sizeMd: "sizeMd-O5aM4H",
-    sizeLg: "sizeLg-qDIX7h",
-    secondary: "secondary-pZ6jNc",
-    transparent: "transparent-HNysWI"
-};
-export { styles_module as default };

package/dist/examples/ui/Button/styles_module.css

@@ -1,72 +0,0 @@
-.button-sJxDuy {
-  user-select: none;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 4px;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  column-gap: 4px;
-  font-size: 12px;
-  transition: background-color, border .1s ease-in-out;
-  display: flex;
-}
-
-.sizeSm-iMrC7k {
-  height: 28px;
-  padding: 4px;
-}
-
-.sizeMd-O5aM4H {
-  height: 32px;
-  padding: 4px 8px;
-}
-
-.sizeLg-qDIX7h {
-  height: 36px;
-  padding: 4px 12px;
-}
-
-.secondary-pZ6jNc {
-  color: var(--kona-editor-text-color, #444);
-  background-color: var(--kona-editor-background-color, #fff);
-  border-color: var(--kona-editor-border-color, #ddd);
-}
-
-.secondary-pZ6jNc:disabled {
-  color: #999;
-  background-color: #f0f0f0;
-}
-
-.secondary-pZ6jNc:focus {
-  border-color: #0000;
-  outline: 1px solid #06c;
-}
-
-.secondary-pZ6jNc:hover:not(:disabled) {
-  background-color: var(--kona-editor-background-color, #f0f0f0);
-}
-
-.transparent-HNysWI {
-  color: #333;
-  background-color: #0000;
-  border-color: #0000;
-}
-
-.transparent-HNysWI:disabled {
-  color: #999;
-}
-
-.transparent-HNysWI:focus {
-  border-color: #0000;
-  outline: 1px solid #06c;
-}
-
-.transparent-HNysWI:hover:not(:disabled) {
-  background-color: #0000000d;
-}
-
-.button-sJxDuy:active:not(:disabled) {
-  transform: scale(.95);
-}
-

package/dist/examples/ui/Button/types.d.ts

@@ -1 +0,0 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'transparent';

package/dist/examples/ui/Dropdown/Dropdown.d.ts

@@ -1,16 +0,0 @@
-import { type JSX, type RefObject } from 'react';
-import { type MenuConfig } from '../Menu';
-type ChildrenProps = {
-    ref: RefObject<any>;
-    onClick: () => void;
-};
-type DropdownProps = {
-    config: MenuConfig;
-    children: (props: ChildrenProps) => React.ReactNode;
-    target?: HTMLElement;
-    Menu?: JSX.ElementType;
-    MenuBody?: JSX.ElementType;
-    onClose?: () => void;
-};
-export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/ui/Dropdown/Dropdown.js

@@ -1,75 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-import { Menu } from "../Menu/index.js";
-import { useMenuPosition } from "../useMenuPosition.js";
-const Dropdown = (props)=>{
-    const { config, target, children, onClose = ()=>{}, Menu: MenuComponent, MenuBody } = props;
-    const [rect, setRect] = useState();
-    const [isOpen, setOpen] = useState(false);
-    const ref = useRef(null);
-    const menuRef = useRef(null);
-    useLayoutEffect(()=>{
-        if (ref.current) {
-            const rect = ref.current.getBoundingClientRect();
-            setRect(rect);
-        }
-    }, [
-        isOpen
-    ]);
-    const coords = {
-        x: rect?.left ?? 0,
-        y: (rect?.top ?? 0) + (rect?.height ?? 0)
-    };
-    const [transform, newCoords] = useMenuPosition(coords, (context)=>{
-        const [horizontal, vertical] = context.helpers.isWithinWindow();
-        if (!vertical) context.flip([
-            false,
-            true
-        ]).move(0, -(rect?.height ?? 0));
-        if (!horizontal) context.flip([
-            true,
-            false
-        ]).move(rect?.width ?? 0, 0);
-        return context.point;
-    });
-    const changeOpen = (value)=>{
-        setOpen(value);
-        if (!value) onClose();
-    };
-    useLayoutEffect(()=>{
-        if (menuRef.current) transform(menuRef.current);
-    }, [
-        isOpen,
-        rect?.left,
-        rect?.top,
-        config
-    ]);
-    const handleClick = ()=>{
-        changeOpen(!isOpen);
-    };
-    const handleToggle = (value)=>{
-        changeOpen(void 0 === value ? !isOpen : value);
-    };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children({
-                ref,
-                onClick: handleClick
-            }),
-            /*#__PURE__*/ jsx(Menu, {
-                target: target,
-                ref: menuRef,
-                Menu: MenuComponent,
-                MenuBody: MenuBody,
-                coords: [
-                    newCoords.x,
-                    newCoords.y
-                ],
-                isOpen: isOpen,
-                config: config,
-                onToggle: handleToggle
-            })
-        ]
-    });
-};
-export { Dropdown };

package/dist/examples/ui/Dropdown/index.d.ts

@@ -1 +0,0 @@
-export { Dropdown } from './Dropdown';

package/dist/examples/ui/Dropdown/index.js

@@ -1,2 +0,0 @@
-import { Dropdown } from "./Dropdown.js";
-export { Dropdown };

package/dist/examples/ui/Menu/Menu.d.ts

@@ -1,41 +0,0 @@
-import { type JSX } from 'react';
-import { MenuDelimiter } from './MenuDelimiter';
-import { MenuHotkey } from './MenuHotkey';
-import { MenuIcon } from './MenuIcon';
-import { MenuItem } from './MenuItem';
-import { MenuTitle } from './MenuTitle';
-import type { MenuConfig } from './types';
-type Coords = [number, number];
-type MenuProps = {
-    config: MenuConfig;
-    className?: string;
-    isOpen?: boolean;
-    coords: Coords;
-    target?: HTMLElement;
-    onToggle?: (isOpen?: boolean) => void;
-    Menu?: JSX.ElementType;
-    MenuBody?: JSX.ElementType;
-};
-/**
- * Component for rendering various types of menus.
- */
-export declare const MenuComponent: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLMenuElement>>;
-export declare const Menu: typeof MenuComponent & {
-    Root: typeof Root;
-    Body: typeof MenuBody;
-    Item: typeof MenuItem;
-    Icon: typeof MenuIcon;
-    Title: typeof MenuTitle;
-    Hotkey: typeof MenuHotkey;
-    Delimiter: typeof MenuDelimiter;
-};
-interface RootProps extends React.MenuHTMLAttributes<HTMLMenuElement> {
-    coords: Coords;
-    className?: string;
-}
-declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLMenuElement>>;
-interface MenuBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
-declare const MenuBody: import("react").ForwardRefExoticComponent<MenuBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/examples/ui/Menu/Menu.js

@@ -1,404 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { ChevronRightIcon } from "../../icons/chevronRight.js";
-import { useMenuPosition } from "../useMenuPosition.js";
-import { useMergeRefs } from "../useMergeRefs.js";
-import { MenuDelimiter } from "./MenuDelimiter.js";
-import { MenuHotkey } from "./MenuHotkey.js";
-import { MenuIcon } from "./MenuIcon.js";
-import { MenuItem } from "./MenuItem.js";
-import { MenuTitle } from "./MenuTitle.js";
-import { SafeSpace } from "./SafeSpace.js";
-import styles_module from "./styles.module.js";
-const MenuComponent = /*#__PURE__*/ forwardRef((props, menuRef)=>{
-    const { isOpen, className, coords, config, Menu: MenuRootComponent, MenuBody, onToggle, target = document.body } = props;
-    const ref = useRef(null);
-    const mergedRef = useMergeRefs([
-        menuRef,
-        ref
-    ]);
-    const refs = useRef({});
-    const [rects, setRects] = useState({});
-    const [prevSelected, setPrevSelected] = useState([]);
-    const [selected, setSelected] = useState([]);
-    const isSelected = (index, level)=>selected[level] === index;
-    const getConfig = (path, level)=>path.slice(0, level + 1).reduce((prev, current)=>(prev || config).items?.[current]?.config || null, null);
-    const getCurrentConfig = (path)=>{
-        if (1 === path.length) return config;
-        return path.reduce((prev = config, current)=>{
-            const currentConfig = prev || config;
-            return currentConfig.items?.[current]?.config || prev;
-        }, null);
-    };
-    const updateRect = (path)=>{
-        const rect = refs.current[path.join(',')]?.getBoundingClientRect();
-        setRects({
-            ...rects,
-            [path.join(',')]: rect
-        });
-    };
-    useLayoutEffect(()=>{
-        if (ref.current) {
-            const rect = ref.current.getBoundingClientRect();
-            setRects({
-                '@': rect
-            });
-        }
-    }, [
-        isOpen
-    ]);
-    useEffect(()=>{
-        if (isOpen) {
-            const firstSelectable = config.items?.findIndex((item)=>item.selectable ?? true);
-            if (void 0 !== firstSelectable) setSelected([
-                firstSelectable
-            ]);
-        }
-    }, [
-        isOpen
-    ]);
-    useEffect(()=>{
-        if (!isOpen) return;
-        let timeout;
-        selected.forEach((_, level)=>{
-            const config = 0 === level ? props.config : getConfig(selected, level);
-            if (config?.onOpen && prevSelected[level] !== selected[level]) timeout = setTimeout(()=>{
-                config.onOpen?.();
-            });
-        });
-        setPrevSelected(selected);
-        return ()=>{
-            clearTimeout(timeout);
-        };
-    }, [
-        selected,
-        isOpen
-    ]);
-    const currentConfig = getCurrentConfig(selected);
-    useEffect(()=>{
-        if (isOpen) {
-            const handleKeyDown = (event)=>{
-                switch(event.key){
-                    case 'ArrowDown':
-                        {
-                            const firstSelectableIndex = currentConfig?.items?.findIndex((item)=>item.selectable ?? true) ?? -1;
-                            const nextSelectableIndex = currentConfig?.items?.findIndex((item, index)=>(item.selectable ?? true) && index > selected[selected.length - 1]);
-                            if (nextSelectableIndex) setSelected((selected)=>{
-                                const newSelected = [
-                                    ...selected.slice(0, selected.length - 1),
-                                    -1 === nextSelectableIndex ? firstSelectableIndex : nextSelectableIndex
-                                ];
-                                updateRect(newSelected);
-                                refs.current[newSelected.join(',')]?.scrollIntoView({
-                                    block: 'nearest'
-                                });
-                                return newSelected;
-                            });
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        }
-                    case 'ArrowUp':
-                        {
-                            if (!currentConfig?.items?.length) return;
-                            const lastSelectableIndex = currentConfig?.items?.reduce((acc, item, index)=>item.selectable ?? true ? index : acc, -1);
-                            const prevSelectableIndex = currentConfig?.items?.slice(0, selected[selected.length - 1]).reverse().findIndex((item)=>item.selectable ?? true);
-                            const newSelected = [
-                                ...selected.slice(0, selected.length - 1),
-                                -1 === prevSelectableIndex ? lastSelectableIndex : selected[selected.length - 1] - prevSelectableIndex - 1
-                            ];
-                            setSelected(()=>{
-                                updateRect(newSelected);
-                                refs.current[newSelected.join(',')].scrollIntoView({
-                                    block: 'nearest'
-                                });
-                                return newSelected;
-                            });
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        }
-                    case 'ArrowRight':
-                        {
-                            const currentItem = currentConfig?.items?.[selected[selected.length - 1]];
-                            if (currentItem?.config?.items) {
-                                const firstSelectableIndex = currentConfig?.items?.findIndex((item)=>item.selectable ?? true);
-                                if (void 0 !== firstSelectableIndex) setSelected((selected)=>{
-                                    const newSelected = [
-                                        ...selected,
-                                        firstSelectableIndex
-                                    ];
-                                    updateRect(newSelected);
-                                    return newSelected;
-                                });
-                                currentItem.config?.onFocus?.();
-                            }
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        }
-                    case 'ArrowLeft':
-                        setSelected((selected)=>selected.slice(0, selected.length - 1));
-                        event.preventDefault();
-                        event.stopPropagation();
-                        break;
-                    case 'Escape':
-                        onToggle?.(false);
-                        event.preventDefault();
-                        event.stopPropagation();
-                        break;
-                    case 'Enter':
-                        {
-                            const currentItem = currentConfig?.items?.[selected[selected.length - 1]];
-                            if (currentItem?.onSelect) currentItem.onSelect();
-                            onToggle?.(false);
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        }
-                    case ' ':
-                        {
-                            const currentItem = currentConfig?.items?.[selected[selected.length - 1]];
-                            if (currentItem?.onSelect) currentItem.onSelect();
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        }
-                }
-            };
-            document.addEventListener('keydown', handleKeyDown);
-            return ()=>{
-                document.removeEventListener('keydown', handleKeyDown);
-            };
-        }
-    }, [
-        isOpen,
-        currentConfig,
-        selected
-    ]);
-    const renderSubMenu = ()=>selected.map((_, selectedIndex)=>{
-            const config = getConfig(selected, selectedIndex);
-            const items = config?.items;
-            const path = selected.slice(0, selectedIndex + 1).join(',');
-            const rect = rects[path];
-            if (!rect || !items) return null;
-            const coords = [
-                rect.left + rect.width,
-                rect.top
-            ];
-            return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(InnerMenu, {
-                rect: rect,
-                coords: coords,
-                Menu: MenuRootComponent,
-                MenuBody: MenuBody,
-                children: [
-                    config?.header?.(),
-                    /*#__PURE__*/ jsx(Scrollable, {
-                        children: items.map((item, index)=>/*#__PURE__*/ jsxs(MenuItem, {
-                                ref: (element)=>{
-                                    if (element && (item.selectable ?? true)) {
-                                        const selectedPath = [
-                                            ...selected.slice(0, selectedIndex + 1),
-                                            index
-                                        ];
-                                        refs.current[selectedPath.join(',')] = element;
-                                    }
-                                },
-                                selectable: item.selectable,
-                                isSelected: isSelected(index, selectedIndex + 1),
-                                onMouseEnter: (event)=>{
-                                    if (item.selectable ?? true) {
-                                        const selectedPath = [
-                                            ...selected.slice(0, selectedIndex + 1),
-                                            index
-                                        ];
-                                        const rect = event.currentTarget.getBoundingClientRect();
-                                        setSelected(selectedPath);
-                                        setRects((rects)=>({
-                                                ...rects,
-                                                [selectedPath.join(',')]: rect
-                                            }));
-                                    }
-                                },
-                                onClick: ()=>{
-                                    const autoClose = item.autoClose ?? true;
-                                    autoClose && onToggle?.(false);
-                                    item.onSelect?.();
-                                },
-                                children: [
-                                    item.render(),
-                                    item.config?.items && /*#__PURE__*/ jsx(ChevronRightIcon, {
-                                        size: 16
-                                    })
-                                ]
-                            }, index))
-                    }),
-                    config?.footer?.()
-                ]
-            }, path), target);
-        });
-    if (!isOpen) return null;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxs(InnerMenu, {
-                        className: className,
-                        ref: mergedRef,
-                        coords: coords,
-                        rect: rects['@'],
-                        Menu: MenuRootComponent,
-                        MenuBody: MenuBody,
-                        root: true,
-                        children: [
-                            config?.header?.(),
-                            /*#__PURE__*/ jsx(Scrollable, {
-                                children: config.items?.map((item, index)=>/*#__PURE__*/ jsxs(MenuItem, {
-                                        ref: (element)=>{
-                                            if (element && (item.selectable ?? true)) refs.current[index] = element;
-                                        },
-                                        selectable: item.selectable,
-                                        isSelected: isSelected(index, 0),
-                                        onMouseEnter: (event)=>{
-                                            if (item.selectable ?? true) {
-                                                const rect = event.currentTarget.getBoundingClientRect();
-                                                setSelected([
-                                                    index
-                                                ]);
-                                                setRects((rects)=>({
-                                                        ...rects,
-                                                        [index]: rect
-                                                    }));
-                                            }
-                                        },
-                                        onClick: ()=>{
-                                            const autoClose = item.autoClose ?? true;
-                                            autoClose && onToggle?.(false);
-                                            item.onSelect?.();
-                                        },
-                                        children: [
-                                            item.render(),
-                                            item.config?.items && /*#__PURE__*/ jsx(ChevronRightIcon, {
-                                                size: 16
-                                            })
-                                        ]
-                                    }, index))
-                            }),
-                            config?.footer?.()
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Backdrop, {
-                        onClick: ()=>onToggle?.(false)
-                    })
-                ]
-            }), target),
-            renderSubMenu()
-        ]
-    });
-});
-const InnerMenu = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { root, className, coords, rect, children, Menu: MenuRootComponent = Root, MenuBody: MenuBodyComponent = Menu_MenuBody } = props;
-    const [itemRect, setItemRect] = useState();
-    const itemRef = useRef(null);
-    const [transform, newCoords] = useMenuPosition({
-        x: coords[0],
-        y: coords[1]
-    }, (context)=>{
-        const [horizontal, vertical] = context.helpers.isWithinWindow();
-        if (root) return context.point;
-        if (!rect) return context.point;
-        if (!horizontal) context.flip([
-            true,
-            false
-        ]).move(-rect?.width, 0).move(-4, 0);
-        if (!vertical) context.flip([
-            false,
-            true
-        ]).move(0, rect?.height).move(0, -4);
-        return context.point;
-    });
-    useLayoutEffect(()=>{
-        if (itemRef.current && !root) transform(itemRef.current);
-    }, [
-        coords[0],
-        coords[1],
-        root
-    ]);
-    useEffect(()=>{
-        if (itemRef.current) setItemRect(itemRef.current.getBoundingClientRect());
-    }, [
-        newCoords
-    ]);
-    const menuCoords = root ? coords : [
-        newCoords.x,
-        newCoords.y
-    ];
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            !root && /*#__PURE__*/ jsx(SafeSpace, {
-                rect: itemRect
-            }),
-            /*#__PURE__*/ jsx(MenuRootComponent, {
-                className: className,
-                ref: ref,
-                coords: menuCoords,
-                style: {
-                    left: menuCoords[0],
-                    top: menuCoords[1]
-                },
-                children: /*#__PURE__*/ jsx(MenuBodyComponent, {
-                    ref: itemRef,
-                    children: children
-                })
-            })
-        ]
-    });
-});
-const Menu = MenuComponent;
-const Root = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { coords, className, children, ...rest } = props;
-    return /*#__PURE__*/ jsx("menu", {
-        ref: ref,
-        className: clsx(styles_module.menu, styles_module.menuEnterAnimation, className),
-        style: {
-            left: coords[0],
-            top: coords[1]
-        },
-        ...rest,
-        children: children
-    });
-});
-const Menu_MenuBody = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { className, children, ...rest } = props;
-    return /*#__PURE__*/ jsx("div", {
-        ref: ref,
-        className: clsx(styles_module.menuBody, className),
-        ...rest,
-        children: children
-    });
-});
-const Scrollable = (props)=>{
-    const { className, children, ...rest } = props;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(styles_module.menuScrollable, className),
-        ...rest,
-        children: children
-    });
-};
-const Backdrop = (props)=>{
-    const { className, ...rest } = props;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(styles_module.menuBackdrop, className),
-        ...rest
-    });
-};
-Menu.Root = Root;
-Menu.Body = Menu_MenuBody;
-Menu.Item = MenuItem;
-Menu.Icon = MenuIcon;
-Menu.Title = MenuTitle;
-Menu.Hotkey = MenuHotkey;
-Menu.Delimiter = MenuDelimiter;
-export { Menu, MenuComponent };

package/dist/examples/ui/Menu/MenuDelimiter.d.ts

@@ -1 +0,0 @@
-export declare const MenuDelimiter: () => import("react/jsx-runtime").JSX.Element;

package/dist/examples/ui/Menu/MenuDelimiter.js

@@ -1,6 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import styles_module from "./styles.module.js";
-const MenuDelimiter = ()=>/*#__PURE__*/ jsx("hr", {
-        className: styles_module.delimiter
-    });
-export { MenuDelimiter };

package/dist/examples/ui/Menu/MenuHotkey.d.ts

@@ -1,6 +0,0 @@
-type MenuHotkeyProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-export declare const MenuHotkey: (props: MenuHotkeyProps) => import("react/jsx-runtime").JSX.Element;
-export {};