@zuzjs/ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -7,7 +7,6 @@ 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';
 
 const AppContext = createContext({});
@@ -50,7 +49,12 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var _AppTheme_mode, _AppTheme_listen, _AppTheme_lightTheme, _AppTheme_darkTheme;
 class AppTheme {
@@ -62,11 +66,11 @@ class AppTheme {
         this.get = () => {
             let self = this;
             if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                     __classPrivateFieldSet(self, _AppTheme_mode, event.matches ? "dark" : "light", "f");
                     __classPrivateFieldGet(self, _AppTheme_listen, "f").call(self, __classPrivateFieldGet(self, _AppTheme_mode, "f"));
                 });
-                return window.matchMedia &&
+                return typeof window !== 'undefined' && window.matchMedia &&
                     window.matchMedia('(prefers-color-scheme: dark)').matches ?
                     __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
             }
@@ -155,7 +159,7 @@ const AppProvider = ({ children, initialState = {}, theme = {}, lang = {} }) =>
     //     }
     // }, [_dispatch]);
     const providedValue = useMemo(() => (Object.assign(Object.assign({}, state), { dispatch })), [state]);
-    return jsx(AppContext.Provider, Object.assign({ value: providedValue }, { children: children }));
+    return jsx(AppContext.Provider, { value: providedValue, children: children });
 };
 AppProvider.defaultProps = {
     theme: {},
@@ -198,6 +202,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",
@@ -454,6 +462,7 @@ const cssProps = {
     "wordBreak": "word-break",
     "wordSpacing": "word-spacing",
     "wrap": "wrap",
+    "textWrap": "textWrap",
     "wordWrap": "word-wrap",
     "writingMode": "writing-mode",
     "zIndex": "z-index",
@@ -490,6 +499,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;',
@@ -502,13 +513,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`
@@ -581,27 +596,44 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
     return {};
 };
 
+typeof window !== "undefined" && !!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, autoComplete } = 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);`;
+    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) => {
@@ -614,12 +646,12 @@ const Select = forwardRef((props, ref) => {
         var _a;
         dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, defaultValue && defaultValue != null && defaultValue != "" && defaultValue != undefined ? defaultValue : ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.value) || '-1', forms)));
     }, []);
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", Object.assign({ onChange: e => {
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", { onChange: e => {
                 let val = e.currentTarget.value;
                 dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val, forms)));
                 onChange && onChange(val);
             }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)), onBlur: e => {
-            }, name: name || nanoid(), className: `${as ? as : ``} ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`, ref: _ref }, { children: options === null || options === void 0 ? void 0 : options.map(o => jsx("option", Object.assign({ value: o.value }, { children: o.label }), `select-${name}-option-${o.value}`)) })) }));
+            }, name: name || nanoid(), className: `${as ? as : ``} ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`, ref: _ref, children: options === null || options === void 0 ? void 0 : options.map(o => jsx("option", { value: o.value, children: o.label }, `select-${name}-option-${o.value}`)) }) }));
 });
 
 const useTheme = (mod = 'auto') => {
@@ -756,6 +788,7 @@ const EMPTY_BREAKPOINT = {
     minWidth: undefined,
     maxWidth: undefined,
 };
+const isBrowser = typeof window !== 'undefined';
 const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
     const buildQueries = (breakpoints) => {
         const sorted = Object.keys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
@@ -796,7 +829,7 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
              */
             if (typeof window !== 'undefined' &&
                 !(defaultBreakpoint && hydrateInitial)) {
-                const mediaQuery = window.matchMedia(query);
+                const mediaQuery = window === null || window === void 0 ? void 0 : window.matchMedia(query);
                 if (mediaQuery.matches) {
                     return breakpoint;
                 }
@@ -816,32 +849,34 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
     }, []);
     /** On changes to mediaQueries, subscribe to changes using window.matchMedia */
     useChooseEffect(() => {
-        const unsubscribers = mediaQueries.map((_a) => {
-            var { query } = _a, breakpoint = __rest(_a, ["query"]);
-            const list = window.matchMedia(query);
-            updateBreakpoint(list, breakpoint);
-            const handleChange = (event) => {
-                updateBreakpoint(event, breakpoint);
-            };
-            const supportsNewEventListeners = 'addEventListener' in list && 'removeEventListener' in list;
-            if (supportsNewEventListeners) {
-                list.addEventListener('change', handleChange);
-            }
-            else {
-                list.addListener(handleChange);
-            }
-            /** Map the unsubscribers array to a list of unsubscriber methods */
-            return () => {
+        if (isBrowser) {
+            const unsubscribers = mediaQueries.map((_a) => {
+                var { query } = _a, breakpoint = __rest(_a, ["query"]);
+                const list = window.matchMedia(query);
+                updateBreakpoint(list, breakpoint);
+                const handleChange = (event) => {
+                    updateBreakpoint(event, breakpoint);
+                };
+                const supportsNewEventListeners = 'addEventListener' in list && 'removeEventListener' in list;
                 if (supportsNewEventListeners) {
-                    list.removeEventListener('change', handleChange);
+                    list.addEventListener('change', handleChange);
                 }
                 else {
-                    list.removeListener(handleChange);
+                    list.addListener(handleChange);
                 }
-            };
-        });
-        /** Return a function that when called, will call all unsubscribers */
-        return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+                /** Map the unsubscribers array to a list of unsubscriber methods */
+                return () => {
+                    if (supportsNewEventListeners) {
+                        list.removeEventListener('change', handleChange);
+                    }
+                    else {
+                        list.removeListener(handleChange);
+                    }
+                };
+            });
+            /** Return a function that when called, will call all unsubscribers */
+            return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+        }
     }, [mediaQueries, updateBreakpoint]);
     /** Print a nice debug value for React Devtools */
     useDebugValue(currentBreakpoint, (c) => typeof c.breakpoint === 'string'
@@ -869,12 +904,15 @@ class Toaster {
         __classPrivateFieldSet(this, _Toaster_defaultTimeLeft, 4, "f");
         const rootID = (config === null || config === void 0 ? void 0 : config.root) || `toast-container`;
         __classPrivateFieldSet(this, _Toaster_root, rootID, "f");
-        if (window.document.querySelector(`#${rootID}`))
+        this.addRoot();
+    }
+    addRoot() {
+        if (window.document.querySelector(`#${__classPrivateFieldGet(this, _Toaster_root, "f")}`))
             return;
         var root = window.document.createElement('div');
-        root.id = rootID;
+        root.id = __classPrivateFieldGet(this, _Toaster_root, "f");
         window.document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${rootID}`), "f");
+        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${__classPrivateFieldGet(this, _Toaster_root, "f")}`), "f");
     }
     dismiss(ID) {
         let self = this;
@@ -894,6 +932,7 @@ class Toaster {
     }
     toast(config) {
         var self = this;
+        self.addRoot();
         var ID = 'toast-' + nanoid(), toast = window.document.createElement('div'); window.document.createElement('div');
         toast.id = ID;
         toast.style.backgroundColor = `#111`;
@@ -951,71 +990,115 @@ const useLang = (mod = 'en') => {
 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, 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 })) }));
+    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 useContextMenu = (contextID) => {
-    const ID = `context-${contextID}`;
-    useState(false);
-    const [root, setRoot] = useState(null);
+const Menu = ({ ID, hide, e, items, width }) => {
     const nodeRef = useRef(null);
-    const el = (e) => window.document.createElement(e);
-    function checkBoundaries(x, y) {
+    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 -= x + offsetWidth - innerWidth;
+                x -= offsetWidth; //x + offsetWidth - innerWidth;
             if (y + offsetHeight > innerHeight)
-                y -= y + offsetHeight - innerHeight;
+                y -= offsetHeight;
         }
-        return { x, y };
-    }
-    const hide = () => {
+        setP({ x, y });
+        setVisible(true);
+    };
+    useEffect(() => {
+        checkBoundaries(p.x, p.y);
+    }, [e]);
+    return (jsx(Box, { 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", { 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 Menu = (e, items) => {
-        const p = getMousePosition(e);
-        const { x, y } = checkBoundaries(p.x, p.y);
-        return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: y, left: x, as: `zuz-contextmenu ${ID}` }, { children: items && 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 hide = () => {
+        _hide();
+        hideAll();
     };
     const show = (e, items) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!window.document.querySelector(`#context-${contextID}`)) {
-            let div = el(`div`);
-            div.id = ID;
-            window.document.body.appendChild(div);
-        }
-        root.render(Menu(e, items));
+        hideAll();
+        root.render(jsx(Menu, { e: e, width: contextWidth || 220, items: items, ID: ID, hide: hide }));
     };
     useEffect(() => {
-        if (!window.document.querySelector(`#context-${contextID}`)) {
-            let div = el(`div`);
-            div.id = ID;
-            window.document.body.appendChild(div);
-        }
+        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
+        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) {
@@ -1025,14 +1108,14 @@ const Button = forwardRef((props, ref) => {
             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]);
                     }
                     else {
                         props.onClick ? props.onClick(e) : () => console.warn('onClick Missing');
                     }
-                }, disabled: props.disabled || false }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })));
+                }, disabled: props.disabled || false, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })));
         } }));
 });
 
@@ -1134,7 +1217,7 @@ const cleanProps = (props) => {
             delete _props[k];
         }
     });
-    let _extras = [`as`, `hover`, `bref`];
+    let _extras = [`as`, `hover`, `bref`, `tag`];
     _extras.map(x => x in _props && delete _props[x]);
     return _props;
 };
@@ -1186,7 +1269,7 @@ const buildFormData = (data) => {
         [data['files']].map((f) => formData.append('files[]', f));
     return formData;
 };
-const grab = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
+const withRest = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
     var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
     window['__grabToken'] = axios.CancelToken.source();
     if (fd) {
@@ -1291,7 +1374,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);
@@ -1374,13 +1457,75 @@ const getMousePosition = e => {
         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()
     // if("theme" in props && !theme){
     //     dispatch(setTheme(props.theme));
     // }
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("main", Object.assign({ className: `${props.as ? props.as : `zuz-app`} ${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}` }, { children: props.children })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("main", { className: `${props.as ? props.as : `zuz-app`} ${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, children: props.children }) }));
 });
 const App = forwardRef((props, ref) => {
     return (jsx(AppProvider, { children: jsx(AppMain, {}) }));
@@ -1432,7 +1577,7 @@ function Checkbox(props) {
 }
 
 const Spinner = (props) => {
-    return (jsxs(Box, Object.assign({ rel: true, w: props.size, h: props.size, zIndex: `1`, useSelect: `none` }, { children: [jsx(Box, { abs: true, as: `spinner rotating`, animationDirection: `reverse`, animationDuration: typeof props.s1 == `string` ? props.s1 : `${props.s1}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.2 }), jsx(Box, { abs: true, as: `spinner rotating`, animationDuration: typeof props.s2 == `string` ? props.s2 : `${props.s2}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.5 })] })));
+    return (jsxs(Box, { rel: true, w: props.size, h: props.size, zIndex: `1`, useSelect: `none`, children: [jsx(Box, { abs: true, as: `spinner rotating`, animationDirection: `reverse`, animationDuration: typeof props.s1 == `string` ? props.s1 : `${props.s1}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.2 }), jsx(Box, { abs: true, as: `spinner rotating`, animationDuration: typeof props.s2 == `string` ? props.s2 : `${props.s2}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.5 })] }));
 };
 Spinner.defaultProps = {
     size: 30,
@@ -1453,11 +1598,11 @@ const Heading = forwardRef((props, ref) => {
     const { children, as, h } = props;
     let Tag = `h${h || 1}`;
     const HeadingTag = Tag;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(HeadingTag, Object.assign({ className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(HeadingTag, { className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children }) }));
 });
 
 const Cover = (props) => {
-    return (jsx(Box, Object.assign({ abs: true, fill: true, bgFilter: props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined, zIndex: `2`, bg: props.bg }, { children: jsxs(Box, Object.assign({ abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20 }, { children: [jsx(Spinner, {}, `cover-spinner`), props.label && jsx(Heading, Object.assign({ size: 16, as: `f`, opacity: 0.7 }, { children: props.label }), `cover-label`)] }), `cover-shadow`) }), `cover-cloud`));
+    return (jsx(Box, { abs: true, fill: true, bgFilter: props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined, zIndex: `2`, bg: props.bg, children: jsxs(Box, { abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20, children: [jsx(Spinner, {}, `cover-spinner`), props.label && jsx(Heading, { size: 16, as: `f`, opacity: 0.7, children: props.label }, `cover-label`)] }, `cover-shadow`) }, `cover-cloud`));
 };
 Cover.defaultProps = {
     bg: `rgba(0,0,0,0.5)`,
@@ -1514,7 +1659,7 @@ Form.propTypes = {
 
 const Icon = forwardRef((props, ref) => {
     const { as, path, size, color, hover } = props;
-    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, bref: ref, as: `icon-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: path && Array(path).fill(undefined).map((p, i) => jsx("span", { className: `path${i + 1}` }, `ico-${as}-${i}`)) })));
+    return (jsx(Box, { hover: hover || {}, flex: true, bref: ref, as: `icon-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111`, children: path && Array(path).fill(undefined).map((p, i) => jsx("span", { className: `path${i + 1}` }, `ico-${as}-${i}`)) }));
 });
 
 const Image$1 = forwardRef((props, ref) => {
@@ -1652,7 +1797,7 @@ class Masonry extends Component$1 {
                 classNameOutput = 'my-masonry-grid';
             }
         }
-        return (jsx("div", Object.assign({}, rest, { className: classNameOutput }, { children: this.renderColumns() })));
+        return (jsx("div", Object.assign({}, rest, { className: classNameOutput, children: this.renderColumns() })));
     }
 }
 
@@ -1679,7 +1824,7 @@ const Spacer = ({ w, h }) => {
 
 const Text = forwardRef((props, ref) => {
     const { children, as } = props;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("p", Object.assign({ className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("p", { className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children }) }));
 });
 
 const Tweet = (props) => {
@@ -1714,11 +1859,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, dir: `cols`, 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}`, 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":
@@ -1736,4 +1876,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, camelCase, cleanProps, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useContextMenu, 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, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, slugify, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useRender, useResizeObserver, useStore, useTheme, useToast, uuid, withRest };

package/dist/styles.css

@@ -458,7 +458,7 @@ button {
 }
 
 .zuz-contextmenu {
-  min-width: 220px;
+  width: 220px;
   border-radius: 5px;
   padding: 4px;
   background: rgba(34, 34, 34, 0.5);
@@ -476,7 +476,7 @@ button {
   border-radius: 4px;
 }
 .zuz-contextmenu button:hover {
-  background: #385fd2;
+  background: #5183ff;
 }
 .zuz-contextmenu .line {
   height: 1px;

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.1",
+  "version": "0.3.3",
   "type": "module",
   "main": "dist/index.js",
   "exports": {