@zuzjs/ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -6,6 +6,7 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { nanoid } from 'nanoid';
 import { ClassNames } from '@emotion/react';
+import ReactDOM from 'react-dom/client';
 export { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
@@ -80,7 +81,7 @@ class AppTheme {
         };
         const conf = _conf || {};
         __classPrivateFieldSet(this, _AppTheme_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); }, "f");
-        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || "auto", "f");
+        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || conf.theme.mode || "auto", "f");
         __classPrivateFieldSet(this, _AppTheme_lightTheme, Object.assign({ 
             //CORE
             tag: "light", dark: false, primary: '#edeef5', secondary: '#f9f9f9', textColor: '#111111' }, ("theme" in conf && "light" in conf.theme ? Object.assign({}, conf.theme.light) : {})), "f");
@@ -197,6 +198,10 @@ const cssProps = {
     "ac": "align-content",
     "alignContent": "align-content",
     "aic": "aic",
+    "ais": "ais",
+    "aie": "aie",
+    "nous": "nous",
+    "nope": "nope",
     "ai": "align-items",
     "alignItems": "align-items",
     "ass": "ass",
@@ -453,6 +458,7 @@ const cssProps = {
     "wordBreak": "word-break",
     "wordSpacing": "word-spacing",
     "wrap": "wrap",
+    "textWrap": "textWrap",
     "wordWrap": "word-wrap",
     "writingMode": "writing-mode",
     "zIndex": "z-index",
@@ -489,6 +495,8 @@ const cssPropsDirect = {
     'flex': 'display: flex;',
     'fwrap': 'flex-wrap: wrap;',
     'aic': 'align-items: center;',
+    'ais': 'align-items: flex-start;',
+    'aie': 'align-items: flex-end;',
     'ass': 'align-self: flex-start;',
     'asc': 'align-self: center;',
     'ase': 'align-self: flex-end;',
@@ -501,13 +509,17 @@ const cssPropsDirect = {
     'block': 'display: block;',
     'bold': "font-weight: bold;",
     'wrap': "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
+    'textWrap': "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
     'pointer': "cursor: pointer;",
     'fb': 'font-family: var(--primary-font-bold);',
     'ph': 'padding-left: __VALUE__;padding-right: __VALUE__;',
     'pv': 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
     'mv': 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
     'mh': 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim': 'transition:all __VALUE__s linear 0s;'
+    'anim': 'transition:all __VALUE__s linear 0s;',
+    'nous': 'user-select: none;',
+    'nope': 'pointer-events: none;',
+    'tdn': 'text-decoration: none;',
 };
 const cssPropsIgnore = [
     'weight', `opacity`
@@ -580,27 +592,44 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
     return {};
 };
 
+!!document.documentElement.currentStyle;
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, onKeyUp, onClick, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref } = props;
+    const { as, accept, multiple, onChange, onKeyUp, onClick, onBlur, onFocus, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref, autoComplete, elastic, minRows, maxRows } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     let Tag = tag || 'input';
     const El = Tag;
     const _ref = fref || useRef();
     const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
+    props.value !== undefined;
+    useRef();
+    useEffect(() => { }, []);
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, Object.assign({}, cleanProps(props), { type: type || `text`, placeholder: placeholder || undefined, autoComplete: autoComplete || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
                 let k = e['keyCode'] || ['which'];
-                if (El != 'textarea' && k == 13 && form && onSubmit) {
+                if (form && onSubmit && El != 'textarea' && k == 13) {
                     onSubmit(forms[form]);
                 }
+                else {
+                    if (onKeyUp)
+                        onKeyUp(e);
+                }
             }, onChange: e => {
                 let val = type == 'file' ?
                     e.currentTarget.files
                     : e.currentTarget.value;
-                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
+                if (form)
+                    dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
+                // if(El == `textarea` && elastic) handleElastic()
                 onChange && onChange(val == "" ? null : val);
             }, onClick: onClick ? onClick : () => { }, readOnly: readOnly || false, onBlur: e => {
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
+                if (onBlur)
+                    onBlur(e);
+            }, onFocus: e => {
+                if (touched == false)
+                    dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms));
+                if (onFocus)
+                    onFocus(e);
+            } })) }));
 });
 
 const Select = forwardRef((props, ref) => {
@@ -947,16 +976,128 @@ const useLang = (mod = 'en') => {
     return state['lang'] || {};
 };
 
+const Box = forwardRef((props, ref) => {
+    const _noClick = () => { };
+    // console.log(props)
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onDoubleClick: props.onDoubleClick || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
+});
+
+const Menu = ({ ID, hide, e, items, width }) => {
+    const nodeRef = useRef(null);
+    const [p, setP] = useState(getMousePosition(e));
+    const [visible, setVisible] = useState(false);
+    const checkBoundaries = (x, y) => {
+        if (nodeRef.current) {
+            const { innerWidth, innerHeight } = window;
+            const { offsetWidth, offsetHeight } = nodeRef.current;
+            if (x + offsetWidth > innerWidth)
+                x -= offsetWidth; //x + offsetWidth - innerWidth;
+            if (y + offsetHeight > innerHeight)
+                y -= offsetHeight;
+        }
+        setP({ x, y });
+        setVisible(true);
+    };
+    useEffect(() => {
+        checkBoundaries(p.x, p.y);
+    }, [e]);
+    return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: p.y, left: p.x, w: width || 220, opacity: visible ? 1 : 0, as: `zuz-contextmenu ${ID}` }, { children: items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", Object.assign({ onClick: ev => {
+                if (m.onClick) {
+                    m.onClick(ev, m);
+                }
+                else {
+                    console.log(`No onClick eventFound`);
+                }
+                hide();
+            } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+};
+const useContextMenu = (contextID, contextWidth, contextToken = `____uchides`) => {
+    const ID = `contextmenu-${contextID}`;
+    useState(false);
+    const [root, setRoot] = useState(null);
+    const el = (e) => window.document.createElement(e);
+    const createRoot = () => {
+        if (!window.document.querySelector(`#${ID}`)) {
+            let div = el(`div`);
+            div.id = ID;
+            window.document.body.appendChild(div);
+        }
+    };
+    const hideAll = () => {
+        if (window[contextToken]) {
+            window[contextToken].map((h) => h['ID'] != ID && h['fnc']());
+        }
+    };
+    const _hide = () => {
+        try {
+            root === null || root === void 0 ? void 0 : root.unmount();
+            document.querySelector(`#${ID}`).parentNode.removeChild(document.querySelector(`#${ID}`));
+            setRoot(null);
+        }
+        catch (e) { }
+    };
+    const hide = () => {
+        _hide();
+        hideAll();
+    };
+    const show = (e, items) => {
+        e.preventDefault();
+        e.stopPropagation();
+        hideAll();
+        root.render(jsx(Menu, { e: e, width: contextWidth || 220, items: items, ID: ID, hide: hide }));
+    };
+    useEffect(() => {
+        createRoot();
+        if (!root)
+            setRoot(ReactDOM.createRoot(document.getElementById(ID)));
+    }, [root]);
+    useEffect(() => {
+        if (contextToken in window == false) {
+            window[contextToken] = [];
+        }
+        if (window[contextToken].findIndex(x => x.ID == ID) == -1) {
+            window[contextToken].push({ ID: ID, fnc: _hide });
+            if (window[contextToken].length > document.querySelectorAll('div[id^="contextmenu-"]').length) {
+                window[contextToken].shift();
+            }
+        }
+    }, []);
+    return {
+        show,
+        hide,
+        hideAll
+    };
+};
+
+const useRender = (isMounted, delay) => {
+    const [canRender, setCanRender] = useState(false);
+    // console.log(
+    //     `isMounted:`, isMounted,
+    //     `canRender:`, canRender,
+    // )
+    useEffect(() => {
+        let outID;
+        if (isMounted && !canRender) {
+            setCanRender(true);
+        }
+        else if (isMounted && canRender) {
+            outID = setTimeout(() => setCanRender(false), delay * 1000);
+        }
+        return () => clearTimeout(outID);
+    }, [isMounted, delay]);
+    return canRender;
+};
+
 const Button = forwardRef((props, ref) => {
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     if (props.html) {
         ({ __html: props.html });
     }
     return (jsx(ClassNames, { children: ({ css, cx }) => {
-            return (jsx("button", Object.assign({ title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
+            return (jsx("button", Object.assign({}, cleanProps(props), { title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
                 padding: 5px 10px;
                 border-radius: 2px;
-                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onClick: e => {
+                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onDoubleClick: props.onDoubleClick || undefined, onClick: e => {
                     if (props.form && props.type && props.type == 'submit') {
                         props.onSubmit(forms[props.form]);
                     }
@@ -1058,6 +1199,17 @@ const makeCSSValue = (k, v, o) => {
     }
     return `${k}:${v}${unit};`;
 };
+const cleanProps = (props) => {
+    let _props = Object.assign({}, props);
+    Object.keys(_props).map(k => {
+        if (k in cssProps) {
+            delete _props[k];
+        }
+    });
+    let _extras = [`as`, `hover`, `bref`, `tag`];
+    _extras.map(x => x in _props && delete _props[x]);
+    return _props;
+};
 const buildCSS = (props) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -1211,7 +1363,7 @@ const filterHTMLProps = (props) => {
     });
     return filter;
 };
-const uuid = () => nanoid();
+const uuid = (len = 21) => nanoid(len);
 const addScript = (src, callback) => {
     var s = document.createElement('script');
     s.setAttribute('src', src);
@@ -1270,6 +1422,92 @@ const imgPromiseFactory = ({ decode = true, crossOrigin = '' }) => (src) => {
         i.src = src;
     });
 };
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    };
+};
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+const getMousePosition = e => {
+    const pos = {
+        x: e.clientX,
+        y: e.clientY,
+    };
+    const touch = e.changedTouches;
+    if (touch) {
+        pos.x = touch[0].clientX;
+        pos.y = touch[0].clientY;
+    }
+    if (!pos.x || pos.x < 0)
+        pos.x = 0;
+    if (!pos.y || pos.y < 0)
+        pos.y = 0;
+    return pos;
+};
+const copyToClipboard = (str, callback) => {
+    const el = document.createElement('textarea');
+    let storeContentEditable = el.contentEditable;
+    let storeReadOnly = el.readOnly;
+    el.value = str;
+    el.contentEditable = `true`;
+    el.readOnly = false;
+    el.setAttribute('readonly', `false`);
+    el.setAttribute('contenteditable', `true`);
+    el.style.position = 'absolute';
+    el.style.left = '-999999999px';
+    document.body.appendChild(el);
+    const selected = document.getSelection().rangeCount > 0
+        ? document.getSelection().getRangeAt(0)
+        : false;
+    el.select();
+    el.setSelectionRange(0, 999999);
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected) {
+        document.getSelection().removeAllRanges();
+        document.getSelection().addRange(selected);
+    }
+    el.contentEditable = storeContentEditable;
+    el.readOnly = storeReadOnly;
+    if (callback)
+        callback();
+};
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+const formatSize = (bytes, si = false, dp = 1) => {
+    const thresh = si ? 1000 : 1024;
+    if (Math.abs(bytes) < thresh) {
+        return bytes + ' B';
+    }
+    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    let u = -1;
+    const r = 10 ** dp;
+    do {
+        bytes /= thresh;
+        ++u;
+    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+    return bytes.toFixed(dp) + ' ' + units[u];
+};
+const slugify = (...args) => {
+    const value = args.join(' ');
+    return value
+        .normalize('NFD') // split an accented letter in the base letter and the acent
+        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/\s+/g, '-'); // separator
+};
 
 const AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1282,11 +1520,6 @@ const App = forwardRef((props, ref) => {
     return (jsx(AppProvider, { children: jsx(AppMain, {}) }));
 });
 
-const Box = forwardRef((props, ref) => {
-    const _noClick = () => { };
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({ id: props.id || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
-});
-
 // const CoreBlock = styled.section`display: block;`
 // const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
 const Component = forwardRef((props, ref) => {
@@ -1615,11 +1848,6 @@ const Tweet = (props) => {
     return (jsx(Box, { as: `tweet`, weight: 1, bref: _tweet }));
 };
 
-const ContextMenu = forwardRef((props, ref) => {
-    const { as, size, color, hover, pos, items } = props;
-    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
-});
-
 const buildElement = (el) => {
     switch (el.is) {
         case "Box":
@@ -1637,4 +1865,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useLang, useResizeObserver, useStore, useTheme, useToast, uuid };
+export { App, Component as Block, Box, Button, Checkbox, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, copyToClipboard, createSlice, el, filterHTMLProps, filterStyleProps, formatSize, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, slugify, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useRender, useResizeObserver, useStore, useTheme, useToast, uuid };

package/dist/styles.css

@@ -455,4 +455,31 @@ button {
 }
 .zuz-checkbox:checked + label:after {
   left: 20px;
+}
+
+.zuz-contextmenu {
+  width: 220px;
+  border-radius: 5px;
+  padding: 4px;
+  background: rgba(34, 34, 34, 0.5);
+  border: 1px rgba(255, 255, 255, 0.25) solid;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(20px);
+}
+.zuz-contextmenu button {
+  border: 0px;
+  text-align: left;
+  padding: 4px 6px;
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  color: #fff;
+  border-radius: 4px;
+}
+.zuz-contextmenu button:hover {
+  background: #5183ff;
+}
+.zuz-contextmenu .line {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  margin: 4px 6px;
 }

package/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/rollup.config.js

@@ -0,0 +1,68 @@
+import typescript from 'rollup-plugin-typescript2';
+import commonjs from '@rollup/plugin-commonjs';
+import scss from "rollup-plugin-scss";
+import postcss from 'postcss'
+import livereload from 'rollup-plugin-livereload'
+import { uglify } from 'rollup-plugin-uglify';
+
+const isWatching = process && process.argv.includes('-w') || process.argv.includes('--watch')
+
+export default [
+    {
+        input: ["src/index.tsx"],
+        output: [
+            {
+                dir: "dist",
+                entryFileNames: "[name].js",
+                format: "es",
+                exports: "named",
+                // preserveModules: true,
+                // preserveModulesRoot: 'src',
+            }
+        ],
+        plugins: [
+            typescript(),
+            commonjs(),
+            scss({
+                processor: () => postcss(),
+                fileName: 'styles.css',
+                failOnError: true
+            }),
+            !isWatching && uglify()
+            // livereload()
+        ],
+        external: [
+            "react","react-children-utilities","js-cookie","axios","nanoid","@reduxjs/toolkit","react-redux","react/jsx-runtime",
+            "@emotion/react","@emotion/styled","prop-types","react-hot-toast"
+        ]
+    }
+    // ,
+    // {
+    //     input: ["src/kit/index.tsx"],
+    //     output: [
+    //         {
+    //             dir: "dist",
+    //             entryFileNames: "kit.js",
+    //             format: "es",
+    //             exports: "named",
+    //             // preserveModules: true,
+    //             // preserveModulesRoot: 'src',
+    //         }
+    //     ],
+    //     plugins: [
+    //         typescript(),
+    //         // commonjs(),
+    //         // scss({
+    //         //     processor: () => postcss(),
+    //         //     fileName: 'styles.css',
+    //         //     failOnError: true
+    //         // }),
+    //         // !isWatching && uglify()
+    //         // livereload()
+    //     ],
+    //     // external: [
+    //     //     "react","react-children-utilities","js-cookie","axios","nanoid","@reduxjs/toolkit","react-redux","react/jsx-runtime",
+    //     //     "@emotion/react","@emotion/styled","prop-types","react-hot-toast"
+    //     // ]
+    // }
+];

package/src/comps/box.tsx

@@ -3,16 +3,21 @@ import {
     useEffect
 } from 'react';
 import { ClassNames } from '@emotion/react'
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 
 const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
 
     const _noClick = () => {}
 
+    // console.log(props)
+
     return (
         <ClassNames>
             {({ css, cx }) => <div 
+                {...cleanProps(props)}
+                title={props.title || undefined}
                 id={props.id || undefined}
+                onDoubleClick={props.onDoubleClick || undefined}
                 onClick={props.onClick || _noClick}
                 className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 
                 ref={props.bref || ref}>{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}</div>}

package/src/comps/button.tsx

@@ -5,7 +5,7 @@ import React, {
 import { ClassNames } from '@emotion/react'
 import { 
   buildCSS,
-  filterStyleProps
+  cleanProps
 } from '../core'
 import { useStore } from '../hooks'
 import { STORE_FORM_KEY } from '../context/AppProvider'
@@ -22,6 +22,7 @@ const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTM
         {({ css, cx }) => {
           return (
             <button
+              {...cleanProps(props)}
               title={"title" in props ? props.title : undefined}
               type={props.type}
               className={`button${props.as ? ` ${props.as}` : ``} ${cx(css`
@@ -29,6 +30,7 @@ const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTM
                 border-radius: 2px;
                 ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 
               ref={ref} 
+              onDoubleClick={props.onDoubleClick || undefined}
               onClick={e => {
                   if(props.form && props.type && props.type == 'submit'){
                       props.onSubmit(forms[props.form]);

package/src/comps/contextmenu.tsx

@@ -3,39 +3,56 @@ import {
     LegacyRef,
     forwardRef,
     useRef,
-    SyntheticEvent,
+    useState,
+    useEffect,
 } from 'react';
 import Box from './box'
 import Button from './button'
 
 const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
 
-    const {
-        as,
-        size,
-        color,
-        hover,
-        pos,
-        items
-    } = props;
+    const { ID, p, items, hide } = props;
+    // const [p, setP] = useState(p)
+    const nodeRef = useRef(null);
+
+    const checkBoundaries = () => {
+
+        let x = p.x
+        let y = p.y
+
+        if (nodeRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const { offsetWidth, offsetHeight } = nodeRef.current;
+    
+          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
+    
+          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
+        }
+        // setP({x: x, y: y})    
+    }
+
+    useEffect(() => {
+        // checkBoundaries();        
+    }, [])
 
     return (
         <Box 
-            hover={hover || {}}
-            flex
+            bref={nodeRef}
+            flex dir={`cols`}
             fixed
-            top={pos?.y || 0}
-            left={pos?.x || 0}
-            bref={ref}
-            as={`contextmenu-${as}`}
-            ai={`c`}
-            jc={`c`}
-            size={size || 24}
-            color={color || `#111111`}
-        >
-            {items && items.map((m, i) => <Button 
+            top={p.x}
+            left={p.y}
+            as={`zuz-contextmenu ${ID}`}>
+            {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
                 key={`cm-${i}-${m.id}`} 
-                onClick={m.on ? m.on : () => {}}>{m.label}</Button>)}
+                onClick={ev => {
+                    if(m.onClick){
+                        m.onClick(ev, m)
+                    }else{
+                        console.log(`No onClick eventFound`)
+                    }
+                    hide()
+                }}>{m.label}</button>)}
         </Box>
     )
 })