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

package/package.json

@@ -1,20 +1,21 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "types": "types/index.d.ts",
+  "type": "module",
   "dependencies": {
     "@salt-ds/core": "1.54.1"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.18",
-    "@vuu-ui/vuu-table-types": "2.1.18",
-    "@vuu-ui/vuu-filter-types": "2.1.18",
-    "@vuu-ui/vuu-protocol-types": "2.1.18"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
-    "@vuu-ui/vuu-filter-parser": "2.1.18",
+    "@vuu-ui/vuu-filter-parser": "2.1.19-beta.2",
     "clsx": "^2.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
@@ -22,19 +23,15 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/packages/vuu-utils/src/index.js",
-      "import": "./esm/packages/vuu-utils/src/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "name": "@vuu-ui/vuu-utils",
-  "type": "module"
+  "module": "index.js",
+  "name": "@vuu-ui/vuu-utils"
 }

package/src/Clock.js

@@ -0,0 +1,43 @@
+class Clock {
+    #millisSinceEpoch = 0;
+    #showCurrentTime = false;
+    constructor(props){
+        const today = new Date();
+        const offset = today.getTimezoneOffset();
+        if (props) {
+            const dateProvided = "number" == typeof props.year && "number" == typeof props.month && "number" == typeof props.day;
+            const year = props.year ?? today.getFullYear();
+            const month = void 0 !== props.month ? props.month - 1 : today.getMonth();
+            const day = props.day ?? today.getDay();
+            const hours = void 0 !== props.hours ? 0 === offset ? props.hours : props.hours + 1 : dateProvided ? offset ? 1 : 0 : today.getUTCHours();
+            const minutes = props.minutes ?? (dateProvided ? 0 : today.getMinutes());
+            const seconds = props.seconds ?? (dateProvided ? 0 : today.getSeconds());
+            const ms = props.milliseconds ?? (dateProvided ? 0 : today.getMilliseconds());
+            const date = new Date(year, month, day, hours, minutes, seconds, ms);
+            this.#millisSinceEpoch = date.getTime();
+        } else this.#millisSinceEpoch = today.getTime();
+    }
+    goBack(value, units = "ms") {
+        const multiplier = "ms" === units ? 1 : "seconds" === units ? 1000 : 60000;
+        this.#millisSinceEpoch -= value * multiplier;
+        return this;
+    }
+    advance(value, units = "ms") {
+        const multiplier = "ms" === units ? 1 : "seconds" === units ? 1000 : 60000;
+        this.#millisSinceEpoch += value * multiplier;
+        return this;
+    }
+    set showCurrentTime(value) {
+        this.#showCurrentTime = value;
+    }
+    toString() {
+        return new Date(this.now).toISOString();
+    }
+    get now() {
+        return this.#showCurrentTime ? new Date().getTime() : this.#millisSinceEpoch;
+    }
+    get date() {
+        return this.#showCurrentTime ? new Date() : new Date(this.#millisSinceEpoch);
+    }
+}
+export { Clock };

package/src/PageVisibilityObserver.js

@@ -0,0 +1,42 @@
+import { EventEmitter } from "./event-emitter.js";
+const defaultProps = {};
+class PageVisibilityObserver extends EventEmitter {
+    #inactiveTimeoutMs;
+    #inactivityTimer;
+    #hidden;
+    visibilityChangeHandler = ()=>{
+        this.hidden = document.hidden;
+    };
+    constructor({ inactiveTimeout = 0, onHidden, onInactiveTimeout, onVisibilityChange, onVisible } = defaultProps){
+        super();
+        this.#hidden = document.hidden;
+        this.#inactiveTimeoutMs = 1000 * inactiveTimeout;
+        if (onInactiveTimeout) this.on("inactive-timeout", onInactiveTimeout);
+        if (onHidden) this.on("hidden", onHidden);
+        if (onVisible) this.on("visible", onVisible);
+        if (onVisibilityChange) this.on("visibilityChange", onVisibilityChange);
+        document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    }
+    clear() {
+        document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+    }
+    set hidden(hidden) {
+        if (hidden !== this.#hidden) {
+            this.#hidden = hidden;
+            if (document.hidden) {
+                this.emit("hidden");
+                if (this.#inactiveTimeoutMs) this.#inactivityTimer = setTimeout(()=>{
+                    this.emit("inactive-timeout");
+                }, this.#inactiveTimeoutMs);
+            } else {
+                this.emit("visible");
+                if (this.#inactivityTimer) {
+                    clearTimeout(this.#inactivityTimer);
+                    this.#inactivityTimer = void 0;
+                }
+            }
+            this.emit("visibilityChange", hidden);
+        }
+    }
+}
+export { PageVisibilityObserver };

package/src/ScaledDecimal.js

@@ -0,0 +1,32 @@
+const scaledDecimals = (fraction, decimals)=>{
+    if (fraction.length > decimals) return fraction.slice(0, decimals);
+    if (fraction.length === decimals) return fraction;
+    return fraction.padEnd(decimals, "0");
+};
+class ScaledDecimal {
+    value;
+    decimals;
+    constructor(value, decimals = 6){
+        this.value = value;
+        this.decimals = decimals;
+        console.log(`create a scaled decimal ${value} (${decimals} decimals)`);
+    }
+    get asLong() {
+        if ("" === this.value) return "";
+        {
+            const [integral, fraction = "0"] = this.value.split(".");
+            return `${integral}${scaledDecimals(fraction, this.decimals)}`;
+        }
+    }
+    toJSON() {
+        return this.value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+const ScaledDecimal2 = (value)=>new ScaledDecimal(value, 2);
+const ScaledDecimal4 = (value)=>new ScaledDecimal(value, 4);
+const ScaledDecimal6 = (value)=>new ScaledDecimal(value, 6);
+const ScaledDecimal8 = (value)=>new ScaledDecimal(value, 8);
+export { ScaledDecimal, ScaledDecimal2, ScaledDecimal4, ScaledDecimal6, ScaledDecimal8 };

package/src/ShellContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+const defaultConfig = {};
+const ShellContext = createContext(defaultConfig);
+const useShellContext = ()=>useContext(ShellContext);
+export { ShellContext, useShellContext };

package/src/ThemeProvider.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, createContext, isValidElement, useContext } from "react";
+import clsx from "clsx";
+const DEFAULT_DENSITY = "medium";
+const DEFAULT_THEME = "salt-theme";
+const DEFAULT_THEME_MODE = "light";
+const ThemeContext = /*#__PURE__*/ createContext({
+    density: "high",
+    theme: "vuu",
+    themeMode: "light"
+});
+const DEFAULT_THEME_ATTRIBUTES = [
+    "vuu",
+    "salt-density-high",
+    "light"
+];
+const useThemeAttributes = (themeAttributes)=>{
+    const context = useContext(ThemeContext);
+    if (themeAttributes) return [
+        themeAttributes.themeClass,
+        themeAttributes.densityClass,
+        themeAttributes.dataMode
+    ];
+    if (context) return [
+        `${context.theme}-theme`,
+        `salt-density-${context.density}`,
+        context.themeMode
+    ];
+    return DEFAULT_THEME_ATTRIBUTES;
+};
+const createThemedChildren = (children, theme, themeMode, density)=>{
+    if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
+        className: clsx(children.props?.className, `${theme}-theme`, `salt-density-${density}`),
+        "data-mode": themeMode
+    });
+    console.warn(`\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
+            Wrap elements with a single container`);
+    return children;
+};
+const ThemeProvider = ({ applyThemeClasses = false, children, theme: themeProp, themeMode: themeModeProp, density: densityProp })=>{
+    const { density: inheritedDensity, themeMode: inheritedThemeMode, theme: inheritedTheme } = useContext(ThemeContext);
+    const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
+    const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;
+    const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;
+    const themedChildren = applyThemeClasses ? createThemedChildren(children, theme, themeMode, density) : children;
+    return /*#__PURE__*/ jsx(ThemeContext.Provider, {
+        value: {
+            themeMode,
+            density,
+            theme
+        },
+        children: themedChildren
+    });
+};
+ThemeProvider.displayName = "ThemeProvider";
+export { DEFAULT_DENSITY, DEFAULT_THEME, DEFAULT_THEME_MODE, ThemeContext, ThemeProvider, useThemeAttributes };

package/src/array-utils.js

@@ -0,0 +1,51 @@
+function partition(array, test, pass = [], fail = []) {
+    for(let i = 0, len = array.length; i < len; i++)(test(array[i], i) ? pass : fail).push(array[i]);
+    return [
+        pass,
+        fail
+    ];
+}
+function itemsChanged(currentItems, newItems, identityProperty) {
+    if (currentItems.length !== newItems.length) return true;
+    if (void 0 === identityProperty) return !currentItems.every((item)=>newItems.includes(item));
+    return currentItems.some((currentItem)=>-1 === newItems.findIndex((newItem)=>newItem[identityProperty] === currentItem[identityProperty]));
+}
+function itemsOrOrderChanged(currentItems, newItems, identityProperty) {
+    if (currentItems.length !== newItems.length) return true;
+    if (void 0 === identityProperty) return currentItems.some((item, index)=>newItems[index] !== item);
+    return currentItems.some((currentItem, index)=>newItems[index][identityProperty] !== currentItem[identityProperty]);
+}
+const moveItemDeprecated = (items, item, moveTo)=>{
+    const fromIndex = items.indexOf(item);
+    if (fromIndex === moveTo) return items;
+    const newItems = items.slice();
+    if (-1 === fromIndex) throw Error("moveItem, item to be moved not found");
+    newItems.splice(fromIndex, 1);
+    if (-1 === moveTo) newItems.push(item);
+    else {
+        const offset = moveTo > fromIndex ? 0 : 0;
+        newItems.splice(moveTo + offset, 0, item);
+    }
+    return newItems;
+};
+const moveItem = (items, fromIndex, toIndex)=>{
+    if (fromIndex === toIndex) return items;
+    {
+        const newItems = items.slice();
+        const [item] = newItems.splice(fromIndex, 1);
+        if (-1 === toIndex) return newItems.concat(item);
+        {
+            const offset = toIndex > fromIndex ? 0 : 0;
+            newItems.splice(toIndex + offset, 0, item);
+            return newItems;
+        }
+    }
+};
+const getAddedItems = (values, newValues)=>{
+    const isNew = (v)=>!values?.includes(v);
+    if (void 0 === values) return newValues;
+    if (newValues.some(isNew)) return newValues.filter(isNew);
+    return [];
+};
+const getMissingItems = (sourceItems, items, identity)=>items.filter((i)=>-1 === sourceItems.findIndex((s)=>identity(s) === i));
+export { getAddedItems, getMissingItems, itemsChanged, itemsOrOrderChanged, moveItem, moveItemDeprecated, partition };

package/src/box-utils.js

@@ -0,0 +1,51 @@
+function boxContainsPoint(rect, x, y) {
+    if (rect) return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+}
+function getCenteredBox({ right, left, top, bottom }, pctSize) {
+    const pctOffset = (1 - pctSize) / 2;
+    const w = (right - left) * pctOffset;
+    const h = (bottom - top) * pctOffset;
+    return {
+        left: left + w,
+        top: top + h,
+        right: right - w,
+        bottom: bottom - h
+    };
+}
+function pointPositionWithinRect(x, y, rect, borderZone = 30) {
+    const width = rect.right - rect.left;
+    const height = rect.bottom - rect.top;
+    const posX = x - rect.left;
+    const posY = y - rect.top;
+    let closeToTheEdge = 0;
+    if (posX < borderZone) closeToTheEdge += 8;
+    if (posX > width - borderZone) closeToTheEdge += 2;
+    if (posY < borderZone) closeToTheEdge += 1;
+    if (posY > height - borderZone) closeToTheEdge += 4;
+    return {
+        pctX: posX / width,
+        pctY: posY / height,
+        closeToTheEdge
+    };
+}
+const isGridLayoutSplitDirection = (position)=>"centre" !== position && "header" !== position;
+function getPositionWithinBox(x, y, rect, pctX, pctY) {
+    const centerBox = getCenteredBox(rect, 0.2);
+    if (boxContainsPoint(centerBox, x, y)) return "centre";
+    {
+        const quadrant = `${pctY < 0.5 ? "north" : "south"}${pctX < 0.5 ? "west" : "east"}`;
+        switch(quadrant){
+            case "northwest":
+                return pctX > pctY ? "north" : "west";
+            case "northeast":
+                return 1 - pctX > pctY ? "north" : "east";
+            case "southeast":
+                return pctX > pctY ? "east" : "south";
+            case "southwest":
+                return 1 - pctX > pctY ? "west" : "south";
+            default:
+                throw Error("getPositionWithinBox failed top compute position");
+        }
+    }
+}
+export { boxContainsPoint, getCenteredBox, getPositionWithinBox, isGridLayoutSplitDirection, pointPositionWithinRect };