@vuu-ui/vuu-utils 2.1.19-beta.1 → 2.1.19-beta.2

package/src/react-utils.js

@@ -0,0 +1,64 @@
+import { Children, isValidElement, useEffect, useMemo, useRef } from "react";
+const EMPTY_ARRAY = [];
+const asReactElements = (children)=>{
+    const isArray = Array.isArray(children);
+    const count = isArray ? children.length : Children.count(children);
+    if (isArray && children.every(isValidElement)) return children;
+    if (1 === count && !isArray && isValidElement(children)) return [
+        children
+    ];
+    if (count > 1) return children;
+    return EMPTY_ARRAY;
+};
+const useIsMounted = (id = "")=>{
+    const isMountedRef = useRef(false);
+    useEffect(()=>{
+        console.log(`is MOUNTED ${id}`);
+        isMountedRef.current = true;
+        return ()=>{
+            console.log(`is UNMOUNTED ${id}`);
+            isMountedRef.current = false;
+        };
+    }, [
+        id
+    ]);
+    return isMountedRef;
+};
+const isSimpleStateValue = (arg)=>"function" != typeof arg;
+const createSyntheticEvent = (event)=>{
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = ()=>{
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    const stopPropagation = ()=>{
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget,
+        target: event.target,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault,
+        isDefaultPrevented: ()=>isDefaultPrevented,
+        stopPropagation,
+        isPropagationStopped: ()=>isPropagationStopped,
+        persist: ()=>void 0,
+        timeStamp: event.timeStamp,
+        type: event.type
+    };
+};
+const useStableReference = (value)=>{
+    const referenceToProp = useRef(value);
+    useMemo(()=>referenceToProp.current = value, [
+        value
+    ]);
+    return referenceToProp;
+};
+export { asReactElements, createSyntheticEvent, isSimpleStateValue, useIsMounted, useStableReference };

package/src/round-decimal.js

@@ -0,0 +1,83 @@
+const PUNCTUATION_STR = String.fromCharCode(8200);
+const DIGIT_STR = String.fromCharCode(8199);
+const DECIMALS_AUTO = -1;
+const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER.toString();
+const MAX_INTEGER_DIGITS = MAX_SAFE_INTEGER.length;
+const exceedsMaxSafeInteger = (value)=>value.length > MAX_INTEGER_DIGITS || value.length === MAX_INTEGER_DIGITS && value > MAX_SAFE_INTEGER;
+const Space = {
+    DIGIT: DIGIT_STR,
+    TWO_DIGITS: DIGIT_STR + DIGIT_STR,
+    THREE_DIGITS: DIGIT_STR + DIGIT_STR + DIGIT_STR,
+    FULL_PADDING: [
+        null,
+        PUNCTUATION_STR + DIGIT_STR,
+        PUNCTUATION_STR + DIGIT_STR + DIGIT_STR,
+        PUNCTUATION_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR,
+        PUNCTUATION_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR
+    ]
+};
+const Zero = {
+    DIGIT: "0",
+    TWO_DIGITS: "00",
+    THREE_DIGITS: "000",
+    FULL_PADDING: [
+        null,
+        "0",
+        "00",
+        "000",
+        "0000"
+    ]
+};
+function padLeft(value, maxLength = 6) {
+    return (LEADING_FILL + value).slice(-maxLength);
+}
+const LEADING_FILL = DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR + DIGIT_STR;
+const Align = {
+    Right: "right",
+    Center: "center",
+    Left: "left"
+};
+function pad(n, dp, Pad) {
+    let len = n.length;
+    const diff = dp - len;
+    if (diff > 0) {
+        if (1 === diff) n += Pad.DIGIT;
+        else if (2 === diff) n += Pad.TWO_DIGITS;
+        else if (3 === diff) n += Pad.THREE_DIGITS;
+    } else {
+        if (diff < 0) {
+            n = n.slice(0, dp);
+            len = dp;
+        }
+        if (Pad === Space && "0" === n.charAt(len - 1)) {
+            n = n.replace(/0+$/, "");
+            return pad(n, dp, Pad);
+        }
+    }
+    return n;
+}
+function roundDecimal(value, align = Align.Right, decimals = 4, zeroPad, alignOnDecimals, useLocaleString = true, roundingRule = "round") {
+    if (void 0 === value || "number" != typeof value || isNaN(value)) return "";
+    let integral;
+    let fraction;
+    let Pad;
+    const [part1, part2 = ""] = value.toString().split(".");
+    const actualDecimals = part2.length;
+    integral = "-0" === part1 ? "-0" : useLocaleString ? parseFloat(part1).toLocaleString() : parseFloat(part1).toString();
+    if (align === Align.Left && alignOnDecimals) integral = padLeft(integral);
+    fraction = decimals === DECIMALS_AUTO || actualDecimals === decimals ? part2 : actualDecimals > decimals ? "round" === roundingRule ? parseFloat("0." + part2).toFixed(decimals).slice(2) : part2.slice(0, decimals) : (Pad = zeroPad ? Zero : alignOnDecimals && align !== Align.Left ? Space : null) ? 0 === actualDecimals ? Pad.FULL_PADDING[decimals] ?? "" : pad(part2, decimals, Pad) : part2;
+    return integral + (fraction ? "." + fraction : "");
+}
+function roundScaledDecimal(value, align = Align.Right, decimals = 4, zeroPad, alignOnDecimals, useLocaleString = true, roundingRule = "round") {
+    let integral;
+    let fraction;
+    let Pad;
+    if ("" === value) return "";
+    const [part1, part2 = ""] = value.split(".");
+    const actualDecimals = part2.length;
+    integral = "" === part1 ? "0" : "-0" === part1 ? "-0" : useLocaleString ? exceedsMaxSafeInteger(value) ? BigInt(part1).toLocaleString() : parseFloat(part1).toLocaleString() : part1;
+    if (align === Align.Left && alignOnDecimals) integral = padLeft(integral);
+    fraction = decimals === DECIMALS_AUTO || actualDecimals === decimals ? part2 : actualDecimals > decimals ? "round" === roundingRule ? parseFloat("0." + part2).toFixed(decimals).slice(2) : part2.slice(0, decimals) : (Pad = zeroPad ? Zero : alignOnDecimals && align !== Align.Left ? Space : null) ? 0 === actualDecimals ? Pad.FULL_PADDING[decimals] ?? "" : pad(part2, decimals, Pad) : part2;
+    return integral + (fraction ? "." + fraction : "");
+}
+export { exceedsMaxSafeInteger, roundDecimal, roundScaledDecimal };

package/src/row-utils.js

@@ -0,0 +1,43 @@
+import { metadataKeys } from "./column-utils.js";
+const { IS_LEAF: IS_LEAF, KEY: KEY, IDX: IDX, SELECTED: SELECTED } = metadataKeys;
+const actualRowPositioning = (rowHeight)=>[
+        (dataRow)=>dataRow.index * rowHeight,
+        (position)=>Math.floor(position / rowHeight),
+        false
+    ];
+const virtualRowPositioning = (rowHeight, virtualisedExtent, pctScrollTop)=>[
+        (dataRow, offset = 0)=>{
+            const rowOffset = pctScrollTop.current * virtualisedExtent;
+            return (dataRow.index - offset) * rowHeight - rowOffset;
+        },
+        (position)=>{
+            const rowOffset = pctScrollTop.current * virtualisedExtent;
+            return Math.round((position + rowOffset) / rowHeight);
+        },
+        true
+    ];
+const asDataSourceRowObject = (row, columnMap)=>{
+    const { [IS_LEAF]: isLeaf, [KEY]: key, [IDX]: index } = row;
+    const rowObject = {
+        key,
+        index,
+        isGroupRow: !isLeaf,
+        isSelected: 0 !== row[SELECTED],
+        data: {}
+    };
+    for (const [colName, colIdx] of Object.entries(columnMap))rowObject.data[colName] = row[colIdx];
+    return rowObject;
+};
+const vuuRowToDataSourceRow = ({ rowIndex, rowKey, sel: isSelected = 0, ts, data }, keys)=>[
+        rowIndex,
+        keys.keyFor(rowIndex),
+        true,
+        false,
+        0,
+        0,
+        rowKey,
+        isSelected,
+        ts,
+        false
+    ].concat(data);
+export { actualRowPositioning, asDataSourceRowObject, virtualRowPositioning, vuuRowToDataSourceRow };

package/src/selection-utils.js

@@ -0,0 +1,25 @@
+const deselectItem = (selectionModel, rowKey, rangeSelect, preserveExistingSelection = false)=>({
+        preserveExistingSelection,
+        rowKey,
+        type: "DESELECT_ROW"
+    });
+const selectItem = (selectionModel, rowKey, rangeSelect, preserveExistingSelection = false, activeRowKey)=>{
+    const singleSelect = "single" === selectionModel || "single-no-deselect" === selectionModel;
+    const actsLikeSingleSelect = singleSelect || void 0 === activeRowKey;
+    if ("none" === selectionModel) return;
+    if (actsLikeSingleSelect) {
+        const preserveSelection = singleSelect ? false : preserveExistingSelection;
+        return {
+            preserveExistingSelection: preserveSelection,
+            rowKey,
+            type: "SELECT_ROW"
+        };
+    }
+    if (rangeSelect) return {
+        preserveExistingSelection,
+        fromRowKey: rowKey,
+        toRowKey: activeRowKey,
+        type: "SELECT_ROW_RANGE"
+    };
+};
+export { deselectItem, selectItem };

package/src/shell-layout-types.js

@@ -0,0 +1,9 @@
+const VuuShellLocation = {
+    ContextPanel: "context-panel",
+    MultiWorkspaceContainer: "vuu-multi-workspace-container",
+    SidePanel: "vuu-side-panel",
+    SideToolbar: "vuu-side-toolbar",
+    Workspace: "vuu-workspace",
+    WorkspaceContainer: "vuu-workspace-container"
+};
+export { VuuShellLocation };

package/src/sort-utils.js

@@ -0,0 +1,75 @@
+const cycleSortType = (sortType)=>"A" === sortType ? "D" : "D" === sortType ? void 0 : "A";
+const NO_SORT = {
+    sortDefs: []
+};
+const toggleOrApplySort = ({ sortDefs }, { name: column }, extendSort = false, sortType)=>{
+    if (extendSort) {
+        const existingDef = sortDefs.find((sortDef)=>sortDef.column === column);
+        if (existingDef) return {
+            sortDefs: sortDefs.map((sortDef)=>sortDef.column === column ? {
+                    column,
+                    sortType: "A" === sortDef.sortType ? "D" : "A"
+                } : sortDef)
+        };
+        return {
+            sortDefs: sortDefs.concat({
+                column,
+                sortType: sortType ?? "A"
+            })
+        };
+    }
+    const newSortType = "string" == typeof sortType ? sortType : 1 === sortDefs.length && sortDefs[0].column === column ? cycleSortType(sortDefs[0].sortType) : "A";
+    return newSortType ? {
+        sortDefs: [
+            {
+                column,
+                sortType: newSortType
+            }
+        ]
+    } : NO_SORT;
+};
+const setSortColumn = ({ sortDefs }, column, sortType)=>{
+    if (void 0 === sortType) {
+        const columnSort = sortDefs.find((item)=>item.column === column.name);
+        if (columnSort) return {
+            sortDefs: [
+                {
+                    column: column.name,
+                    sortType: "A" === columnSort.sortType ? "D" : "A"
+                }
+            ]
+        };
+    }
+    return {
+        sortDefs: [
+            {
+                column: column.name,
+                sortType: sortType ?? "A"
+            }
+        ]
+    };
+};
+const addSortColumn = ({ sortDefs }, column, sortType = "A")=>{
+    const sortEntry = {
+        column: column.name,
+        sortType
+    };
+    if (sortDefs.length > 0) return {
+        sortDefs: sortDefs.concat(sortEntry)
+    };
+    return {
+        sortDefs: [
+            sortEntry
+        ]
+    };
+};
+const getSortStatus = (columnName, vuuSort)=>{
+    if (void 0 === vuuSort || 0 === vuuSort.sortDefs.length) return "no-sort";
+    {
+        const sortDef = vuuSort.sortDefs.find((sd)=>sd.column === columnName);
+        if (!sortDef) return "sort-other-column";
+        if (1 === vuuSort.sortDefs.length) return "A" === sortDef.sortType ? "single-sort-asc" : "single-sort-desc";
+        return "A" === sortDef.sortType ? "multi-sort-includes-column-asc" : "multi-sort-includes-column-desc";
+    }
+};
+export { addSortColumn, getSortStatus, setSortColumn, toggleOrApplySort };

package/src/table-schema-utils.js

@@ -0,0 +1,11 @@
+const getVuuTable = (schemaTable)=>{
+    if (!schemaTable.session) return schemaTable;
+    {
+        const { module, session } = schemaTable;
+        return {
+            module,
+            table: session
+        };
+    }
+};
+export { getVuuTable };

package/src/text-utils.js

@@ -0,0 +1,13 @@
+const lastWord = (text)=>{
+    const trimmedText = text.trim();
+    const pos = trimmedText.lastIndexOf(" ");
+    if (-1 === pos) return trimmedText;
+    return trimmedText.slice(pos + 1);
+};
+const capitalize = (text)=>0 === text.length ? "" : text[0].toUpperCase() + text.slice(1);
+const regexp_worfify = /(?<!(^|[A-Z]))(?=[A-Z])|(?<!^)(?=[A-Z][a-z])/;
+const wordify = (text)=>{
+    const [firstWord, ...rest] = text.split(regexp_worfify);
+    return `${capitalize(firstWord)} ${rest.join(" ")}`;
+};
+export { lastWord, wordify };

package/src/theme-utils.js

@@ -0,0 +1,21 @@
+import { useMemo, useState } from "react";
+const checkCssToken = (tokenName)=>new Promise((resolve)=>{
+        requestAnimationFrame(()=>{
+            const saltSpacing100 = getComputedStyle(document.documentElement).getPropertyValue(tokenName);
+            resolve("" !== saltSpacing100);
+        });
+    });
+const ThemeLoadChecker = ({ children, cssToken = "--salt-spacing-100", theme })=>{
+    const [ready, setReady] = useState(false);
+    useMemo(async ()=>{
+        let ready = await checkCssToken(cssToken);
+        while(!ready)ready = await checkCssToken(cssToken);
+        setReady(true);
+    }, [
+        cssToken
+    ]);
+    if ("no-theme" === theme) return children;
+    if (false === ready) return null;
+    return children;
+};
+export { ThemeLoadChecker };

package/src/tree-utils.js

@@ -0,0 +1,96 @@
+import { metadataKeys } from "./column-utils.js";
+const { COUNT: COUNT, DEPTH: DEPTH, IDX: IDX, KEY: KEY } = metadataKeys;
+const timestamp = 0;
+const isNew = false;
+const treeToDataSourceRows = (treeSourceNodes, iconProvider)=>{
+    const columns = [];
+    columns.push({
+        hidden: true,
+        name: "nodeData",
+        type: "json"
+    }, {
+        getIcon: iconProvider?.getIcon,
+        name: "Level 1",
+        type: "string"
+    }, {
+        getIcon: iconProvider?.getIcon,
+        name: "Level 2",
+        type: "string"
+    });
+    const rows = [];
+    addChildValues(rows, treeSourceNodes, columns, iconProvider);
+    return [
+        columns,
+        rows
+    ];
+};
+const addChildValues = (rows, treeSourceNodes, cols, iconProvider, index = {
+    value: 0
+}, keyBase = "$root", depth = 1)=>{
+    let leafCount = 0;
+    let rowCount = 0;
+    if (depth === cols.length - 1) cols.push({
+        getIcon: iconProvider?.getIcon,
+        name: `Level ${cols.length}`,
+        type: "string"
+    });
+    for(let i = 0; i < treeSourceNodes.length; i++, index.value += 1){
+        const { childNodes, icon, label, nodeData } = treeSourceNodes[i];
+        const blanks = Array(depth - 1).fill("");
+        const fullKey = `${keyBase}|${label}`;
+        const row = [
+            index.value,
+            index.value,
+            false,
+            false,
+            depth,
+            0,
+            fullKey,
+            0,
+            timestamp,
+            isNew,
+            nodeData,
+            ...blanks,
+            label
+        ];
+        if (icon) iconProvider?.setIcon(fullKey, icon);
+        rows.push(row);
+        rowCount += 1;
+        if (childNodes && childNodes.length > 0) {
+            const [nestedLeafCount, nestedRowCount] = addChildValues(rows, childNodes, cols, iconProvider, {
+                value: index.value + 1
+            }, fullKey, depth + 1);
+            row[COUNT] = nestedLeafCount;
+            leafCount += nestedLeafCount;
+            rowCount += nestedRowCount;
+            index.value += nestedRowCount;
+        } else leafCount += 1;
+    }
+    return [
+        leafCount,
+        rowCount
+    ];
+};
+const lastPathSegment = (path, separator = "/")=>{
+    const root = path.endsWith(separator) ? path.slice(0, -1) : path;
+    return root.slice(root.lastIndexOf(separator) + 1);
+};
+const dropLastPathSegment = (path, separator = "/")=>path.slice(0, path.lastIndexOf(separator));
+const getParentRow = (rows, row)=>{
+    const { [IDX]: idx, [DEPTH]: depth } = row;
+    for(let i = idx - 1; i >= 0; i--){
+        const nextRow = rows[i];
+        if (nextRow[DEPTH] === depth - 1) return nextRow;
+    }
+};
+const rowsAreSiblings = (key1, key2)=>dropLastPathSegment(key1, "|") === dropLastPathSegment(key2, "|");
+const missingAncestor = (row, previousRow)=>{
+    if (previousRow) {
+        const prevKey = previousRow[KEY];
+        const key = row[KEY];
+        if (key.startsWith(prevKey)) ;
+        else if (!rowsAreSiblings(prevKey, key)) return true;
+    } else if (row[DEPTH] > 1) return true;
+    return false;
+};
+export { dropLastPathSegment, getParentRow, lastPathSegment, missingAncestor, treeToDataSourceRows };

package/src/ts-utils.js

@@ -0,0 +1,6 @@
+function isNotNullOrUndefined(value) {
+    return null != value;
+}
+const isObject = (o)=>"object" == typeof o && null !== o;
+const elementImplementsJSONSerialization = (element)=>"function" == typeof element.type.toJSON;
+export { elementImplementsJSONSerialization, isNotNullOrUndefined, isObject };

package/src/typeahead-utils.js

@@ -0,0 +1,4 @@
+const NO_DATA_MATCH = [
+    "No matching data"
+];
+export { NO_DATA_MATCH };

package/src/url-utils.js

@@ -0,0 +1,12 @@
+function getUrlParameter(paramName, defaultValue) {
+    const url = new URL(document.location.href);
+    const parameter = url.searchParams.get(paramName);
+    if (parameter) return parameter;
+    const hashParams = url.hash;
+    const regex = new RegExp(`${paramName}=([a-zA-Z]*)`);
+    const result = regex.exec(hashParams);
+    if (result) return result[1];
+    return defaultValue;
+}
+const hasUrlParameter = (paramName)=>new URL(document.location.href).searchParams.has(paramName);
+export { getUrlParameter, hasUrlParameter };

package/src/useId.js

@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+let vuuComponentIdCount = 0;
+const useId = (id)=>useMemo(()=>id ?? `vuu-${++vuuComponentIdCount}`, [
+        id
+    ]);
+export { useId };

package/src/useLayoutEffectSkipFirst.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect, useRef } from "react";
+const useLayoutEffectSkipFirst = (func, deps)=>{
+    const goodToGo = useRef(false);
+    useLayoutEffect(()=>{
+        if (goodToGo.current) func();
+        else goodToGo.current = true;
+    }, deps);
+};
+export { useLayoutEffectSkipFirst };

package/src/useResizeObserver.js

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useRef } from "react";
+const WidthHeight = [
+    "height",
+    "width"
+];
+const WidthOnly = [
+    "width"
+];
+const observedMap = new Map();
+const getTargetSize = (element, size, dimension)=>{
+    switch(dimension){
+        case "height":
+            return size.height;
+        case "clientHeight":
+            return Math.floor(element.clientHeight);
+        case "clientWidth":
+            return Math.floor(element.clientWidth);
+        case "contentHeight":
+            return size.contentHeight;
+        case "contentWidth":
+            return size.contentWidth;
+        case "scrollHeight":
+            return Math.ceil(Math.floor(element.scrollHeight));
+        case "scrollWidth":
+            return Math.ceil(Math.floor(element.scrollWidth));
+        case "width":
+            return size.width;
+        default:
+            return 0;
+    }
+};
+const resizeObserver = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const { target, borderBoxSize, contentBoxSize } = entry;
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+            const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+            const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+            const { onResize, measurements } = observedTarget;
+            let sizeChanged = false;
+            for (const [dimension, size] of Object.entries(measurements)){
+                const newSize = getTargetSize(target, {
+                    height,
+                    width,
+                    contentHeight,
+                    contentWidth
+                }, dimension);
+                if (newSize !== size) {
+                    sizeChanged = true;
+                    measurements[dimension] = newSize;
+                }
+            }
+            if (sizeChanged) onResize && onResize(measurements);
+        }
+    }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+    const dimensionsRef = useRef(dimensions);
+    const measure = useCallback((target)=>{
+        const { width, height } = target.getBoundingClientRect();
+        const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+        const flooredHeight = Math.floor(height);
+        const flooredWidth = Math.floor(width);
+        return dimensionsRef.current.reduce((map, dim)=>{
+            map[dim] = getTargetSize(target, {
+                width: flooredWidth,
+                height: flooredHeight,
+                contentHeight,
+                contentWidth
+            }, dim);
+            return map;
+        }, {});
+    }, []);
+    useEffect(()=>{
+        const target = ref.current;
+        async function registerObserver() {
+            observedMap.set(target, {
+                measurements: {}
+            });
+            const observedTarget = observedMap.get(target);
+            if (observedTarget) {
+                const measurements = measure(target);
+                observedTarget.measurements = measurements;
+                resizeObserver.observe(target);
+                if (reportInitialSize) onResize(measurements);
+            } else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation", "font-weight:bold; color:red;");
+        }
+        if (target) {
+            if (observedMap.has(target)) console.log("useResizeObserver attemping to observe same element twice", {
+                target
+            });
+            registerObserver();
+        }
+        return ()=>{
+            if (target && observedMap.has(target)) {
+                resizeObserver.unobserve(target);
+                observedMap.delete(target);
+            }
+        };
+    }, [
+        measure,
+        ref
+    ]);
+    useEffect(()=>{
+        const target = ref.current;
+        const record = observedMap.get(target);
+        if (record) {
+            if (dimensionsRef.current !== dimensions) {
+                dimensionsRef.current = dimensions;
+                const measurements = measure(target);
+                record.measurements = measurements;
+            }
+            record.onResize = onResize;
+        }
+    }, [
+        dimensions,
+        measure,
+        ref,
+        onResize
+    ]);
+}
+export { WidthHeight, WidthOnly, useResizeObserver };

package/src/useStateRef.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef, useState } from "react";
+const isSimpleStateValue = (arg)=>"function" != typeof arg;
+const useStateRef = (initialValue)=>{
+    const [value, _setValue] = useState(initialValue);
+    const ref = useRef(value);
+    const setValue = useCallback((arg)=>{
+        if (isSimpleStateValue(arg)) {
+            ref.current = arg;
+            _setValue(arg);
+        } else {
+            const { current: prev } = ref;
+            ref.current = arg(prev);
+            _setValue(ref.current);
+        }
+    }, []);
+    return [
+        ref,
+        setValue
+    ];
+};
+export { useStateRef };