@memobit/libs 3.8.1 → 3.8.3

package/dist/components/DatePicker/DatePicker2.js

@@ -1,22 +1,22 @@
 import './DatePicker.css';
 import { Icon as H } from "../Icon/Icon2.js";
-import { Tooltip as Y } from "../Tooltip/Tooltip2.js";
+import { Tooltip as E } from "../Tooltip/Tooltip2.js";
 import { APP_DATE_FORMAT as Z, formatDate as l } from "../../helpers/Datetime.js";
 import { Calendar as O } from "../Calendar/Calendar2.js";
 import { TimePicker as ee } from "../TimePicker/TimePicker2.js";
 /* empty css           */
-import { useCallback as te, useEffect as x, useRef as E, useState as D } from "react";
-import { Fragment as ne, jsx as i, jsxs as h } from "react/jsx-runtime";
+import { useCallback as te, useEffect as x, useRef as L, useState as D } from "react";
+import { Fragment as ne, jsx as r, jsxs as h } from "react/jsx-runtime";
 import { createPortal as re } from "react-dom";
-var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFormat: L = "24h", withSeconds: w = !1, withClock: M = !1, clockSize: P = 208, minuteStep: I = 1, dateFormat: _ = Z, placeholder: z = "Select date...", disabled: b = !1, clearable: F = !0, autoClose: N = !0, alwaysOpen: r = !1, ...C }) => {
-  const [j, u] = D(!1), [k, S] = D({
+var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFormat: M = "24h", withSeconds: w = !1, withClock: P = !1, clockSize: I = 208, minuteStep: z = 1, dateFormat: _ = Z, placeholder: F = "Select date...", disabled: b = !1, clearable: j = !0, autoClose: N = !0, alwaysOpen: i = !1, ...C }) => {
+  const [B, u] = D(!1), [k, S] = D({
     hours: 0,
     minutes: 0,
     seconds: 0
-  }), [B, p] = D(null), [q, $] = D({
+  }), [q, p] = D(null), [y, $] = D({
     position: "fixed",
     visibility: "hidden"
-  }), m = E(null), c = E(null);
+  }), m = L(null), c = L(null);
   x(() => {
     f && t instanceof Date && S({
       hours: t.getHours(),
@@ -24,26 +24,26 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       seconds: t.getSeconds()
     });
   }, [t, f]);
-  const o = r ? !b : j;
+  const o = i ? !b : B;
   x(() => {
-    if (r) return;
+    if (i) return;
     const e = (n) => {
       o && m.current && c.current && !m.current.contains(n.target) && !c.current.contains(n.target) && (p(null), u(!1));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r, o]);
+  }, [i, o]);
   const a = te(() => {
-    if (r || !o || !m.current || !c.current) return;
-    const e = m.current.getBoundingClientRect(), n = c.current.getBoundingClientRect(), d = 16, A = 8, Q = window.innerHeight - e.bottom - d, T = e.top - d, U = Q < n.height && T > n.height ? e.top - n.height - A : e.bottom + A, V = Math.max(d, Math.min(U, window.innerHeight - n.height - d)), X = Math.max(d, Math.min(e.left, window.innerWidth - n.width - d));
+    if (i || !o || !m.current || !c.current) return;
+    const e = m.current.getBoundingClientRect(), n = c.current.getBoundingClientRect(), d = 16, A = 8, T = window.innerHeight - e.bottom - d, U = e.top - d, V = T < n.height && U > n.height ? e.top - n.height - A : e.bottom + A, X = Math.max(d, Math.min(V, window.innerHeight - n.height - d)), Y = Math.max(d, Math.min(e.left, window.innerWidth - n.width - d));
     $({
       position: "fixed",
-      top: `${V}px`,
-      left: `${X}px`,
+      top: `${X}px`,
+      left: `${Y}px`,
       zIndex: 1100
     });
-  }, [r, o]);
+  }, [i, o]);
   x(() => {
-    if (r || !o) {
+    if (i || !o) {
       $({
         position: "fixed",
         visibility: "hidden"
@@ -57,48 +57,48 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       cancelAnimationFrame(e), n.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0);
     };
   }, [
-    r,
+    i,
     o,
     a
   ]);
-  const y = () => {
+  const W = () => {
     if (!t) return "";
     if (s === "single" && t instanceof Date) {
       const e = l(t, _);
       return f ? `${e} ${w ? l(t, "HH:mm:ss") : l(t, "HH:mm")}` : e;
     }
     return s === "range" && t && "start" in t ? `${l(t.start, _)} - ${l(t.end, _)}` : s === "multiple" && Array.isArray(t) ? t.map((e) => l(e, _)).join(", ") : "";
-  }, W = (e) => {
+  }, G = (e) => {
     if (!f || !(e instanceof Date)) {
-      g?.(e), N && s !== "multiple" && !r && u(!1);
+      g?.(e), N && s !== "multiple" && !i && u(!1);
       return;
     }
     const n = new Date(e);
-    n.setHours(k.hours, k.minutes, k.seconds), g?.(n), N && !r && u(!1);
-  }, G = (e) => {
+    n.setHours(k.hours, k.minutes, k.seconds), g?.(n), N && !i && u(!1);
+  }, J = (e) => {
     if (S(e), !(t instanceof Date)) return;
     const n = new Date(t);
     n.setHours(e.hours, e.minutes, e.seconds), g?.(n);
-  }, J = (e) => {
+  }, K = (e) => {
     e.stopPropagation(), p(null), g?.(void 0);
-  }, K = () => {
+  }, Q = () => {
     p(null), u(!1);
-  }, R = y(), v = () => /* @__PURE__ */ h(ne, { children: [/* @__PURE__ */ i(O, {
+  }, R = W(), v = () => /* @__PURE__ */ h(ne, { children: [/* @__PURE__ */ r(O, {
     ...C,
     mode: s,
     value: t,
-    onChange: W,
-    rangeStart: s === "range" ? B : C.rangeStart,
+    onChange: G,
+    rangeStart: s === "range" ? q : C.rangeStart,
     onRangeStartChange: s === "range" ? p : C.onRangeStartChange
-  }), f && s === "single" && t instanceof Date && /* @__PURE__ */ i("div", {
+  }), f && s === "single" && t instanceof Date && /* @__PURE__ */ r("div", {
     className: "datepicker__time",
-    children: /* @__PURE__ */ i(ee, {
-      clockSize: P,
-      format: L,
-      minuteStep: I,
-      onChange: G,
+    children: /* @__PURE__ */ r(ee, {
+      clockSize: I,
+      format: M,
+      minuteStep: z,
+      onChange: J,
       value: k,
-      withClock: M,
+      withClock: P,
       withSeconds: w
     })
   })] });
@@ -108,40 +108,42 @@ var me = ({ value: t, onChange: g, mode: s = "single", withTime: f = !1, timeFor
       ref: m,
       className: `datepicker__input ${b ? "datepicker__input--disabled" : ""} ${o ? "datepicker__input--open" : ""}`,
       onClick: () => {
-        b || r || (o && p(null), u(!o));
+        b || i || (o && p(null), u(!o));
       },
-      children: [/* @__PURE__ */ i("span", {
+      children: [/* @__PURE__ */ r("span", {
         className: `datepicker__value ${R ? "" : "datepicker__value--placeholder"}`,
-        children: R || z
+        children: R || F
       }), /* @__PURE__ */ h("div", {
         className: "datepicker__actions",
-        children: [F && R && /* @__PURE__ */ i(Y, {
+        children: [j && R && /* @__PURE__ */ r(E, {
           title: "Clear",
-          children: /* @__PURE__ */ i("button", {
+          children: /* @__PURE__ */ r("button", {
             type: "button",
             className: "datepicker__clear",
-            onClick: J,
+            onClick: K,
             children: "×"
           })
-        }), /* @__PURE__ */ i("span", {
+        }), /* @__PURE__ */ r("span", {
           className: "datepicker__icon",
-          children: /* @__PURE__ */ i(H, { name: "calendar" })
+          children: /* @__PURE__ */ r(H, { name: "calendar" })
         })]
       })]
-    }), o && (r ? /* @__PURE__ */ i("div", {
+    }), o && (i ? /* @__PURE__ */ r("div", {
       ref: c,
       className: "datepicker__dropdown datepicker__dropdown--inline",
       children: v()
     }) : re(/* @__PURE__ */ h("div", {
       ref: c,
       className: "datepicker__dropdown",
-      style: q,
-      children: [/* @__PURE__ */ i("button", {
-        type: "button",
-        className: "datepicker__dropdown-close",
-        onClick: K,
+      style: y,
+      children: [/* @__PURE__ */ r(E, {
         title: "Close",
-        children: /* @__PURE__ */ i(H, { name: "clear" })
+        children: /* @__PURE__ */ r("button", {
+          type: "button",
+          className: "datepicker__dropdown-close",
+          onClick: Q,
+          children: /* @__PURE__ */ r(H, { name: "clear" })
+        })
       }), v()]
     }), document.body))]
   });

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 491,
+    libBuildNumber: 3,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -1072,7 +1072,7 @@ export declare interface DataViewColumn<T> {
     minWidth?: number;
     hideInCard?: boolean;
     hideInTable?: boolean;
-    /** Hide this column only on mobile breakpoint (not when cards are used on desktop). */
+    /** Hide this column only on mobile breakpoint, in both table and card views (not when cards are used on desktop). */
     hideInMobile?: boolean;
 }
 

package/dist/styles/base.scss

@@ -1,36 +1,36 @@
-// Universal body painting + sizing. Consumed via themes.scss so every memobit
-// app picks it up automatically.
-//
-// Why this lives here:
-// Theme backgrounds are gradients (multi-stop linear/radial). If the body is
-// shorter than the viewport during initial render — empty content, loading
-// state — the gradient gets tiled vertically by default, producing visible
-// horizontal banding. `min-height: 100vh` ensures the body is at least as tall
-// as the viewport so the gradient renders at full size on first paint;
-// `background-repeat: no-repeat` is a defensive guard for edge cases (zoom,
-// tall viewport with short content after HMR).
-//
-// Do NOT use the `background` shorthand in consumer App.scss — it resets
-// `background-repeat` to its initial `repeat` value and re-introduces the
-// banding. Set `background-image` long-hand if a per-project override is
-// needed; otherwise omit and let this rule own it.
-
-html,
-body {
-    background: var(--body-background);
-    background-repeat: no-repeat;
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-}
-
-// Ambient glow overlay — themes opt in via `--body-background-glow`. Pinned to
-// the viewport so it stays put on scroll; z-index: -1 keeps it behind app content.
-body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background: var(--body-background-glow, none);
-    pointer-events: none;
-}
+// Universal body painting + sizing. Consumed via themes.scss so every memobit
+// app picks it up automatically.
+//
+// Why this lives here:
+// Theme backgrounds are gradients (multi-stop linear/radial). If the body is
+// shorter than the viewport during initial render — empty content, loading
+// state — the gradient gets tiled vertically by default, producing visible
+// horizontal banding. `min-height: 100vh` ensures the body is at least as tall
+// as the viewport so the gradient renders at full size on first paint;
+// `background-repeat: no-repeat` is a defensive guard for edge cases (zoom,
+// tall viewport with short content after HMR).
+//
+// Do NOT use the `background` shorthand in consumer App.scss — it resets
+// `background-repeat` to its initial `repeat` value and re-introduces the
+// banding. Set `background-image` long-hand if a per-project override is
+// needed; otherwise omit and let this rule own it.
+
+html,
+body {
+    background: var(--body-background);
+    background-repeat: no-repeat;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+// Ambient glow overlay — themes opt in via `--body-background-glow`. Pinned to
+// the viewport so it stays put on scroll; z-index: -1 keeps it behind app content.
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: var(--body-background-glow, none);
+    pointer-events: none;
+}

package/dist/styles/effects.scss

@@ -1,72 +1,72 @@
-.note-container-effect {
-    font-size: var(--font-size-md);
-    line-height: 1.6;
-    padding: var(--spacing-16);
-    border-radius: var(--spacing-12);
-    border-left: var(--spacing-2) solid var(--note-container-effect-border-left-color);
-    background-color: var(--note-container-effect-background-color);
-    color: var(--note-container-effect-color);
-}
-
-.infuse-effect {
-    border-width: var(--spacing-1);
-    border-style: solid;
-    transition: all 0.3s;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: var(--infuse-effect-before-background);
-        width: var(--spacing-4);
-        height: 100%;
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    &:hover {
-        transform: translateY(-5px);
-        border-color: var(--infuse-effect-hover-border-color);
-        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--infuse-effect-hover-box-shadow-color);
-
-        &::before {
-            opacity: 1;
-        }
-    }
-}
-
-.up-lift-effect {
-    border-width: var(--spacing-1);
-    border-style: solid;
-    box-shadow: 0 var(--spacing-4) var(--spacing-12) var(--up-lift-effect-box-shadow-color);
-    transition: all 0.3s ease;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 5px;
-        height: 100%;
-        background: var(--up-lift-effect-before-background);
-    }
-
-    &:hover {
-        transform: translateY(-5px);
-        border-color: var(--up-lift-effect-hover-border-color);
-        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--up-lift-effect-hover-box-shadow-color);
-    }
-}
-
-.glow-effect {
-    transition: 0.3s;
-
-    &:hover {
-        box-shadow: var(--glow-box-shadow-color);
-        transform: translateY(-2px);
-        border-color: var(--glow-hover-border-color);
-    }
-}
+.note-container-effect {
+    font-size: var(--font-size-md);
+    line-height: 1.6;
+    padding: var(--spacing-16);
+    border-radius: var(--spacing-12);
+    border-left: var(--spacing-2) solid var(--note-container-effect-border-left-color);
+    background-color: var(--note-container-effect-background-color);
+    color: var(--note-container-effect-color);
+}
+
+.infuse-effect {
+    border-width: var(--spacing-1);
+    border-style: solid;
+    transition: all 0.3s;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: var(--infuse-effect-before-background);
+        width: var(--spacing-4);
+        height: 100%;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    &:hover {
+        transform: translateY(-5px);
+        border-color: var(--infuse-effect-hover-border-color);
+        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--infuse-effect-hover-box-shadow-color);
+
+        &::before {
+            opacity: 1;
+        }
+    }
+}
+
+.up-lift-effect {
+    border-width: var(--spacing-1);
+    border-style: solid;
+    box-shadow: 0 var(--spacing-4) var(--spacing-12) var(--up-lift-effect-box-shadow-color);
+    transition: all 0.3s ease;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5px;
+        height: 100%;
+        background: var(--up-lift-effect-before-background);
+    }
+
+    &:hover {
+        transform: translateY(-5px);
+        border-color: var(--up-lift-effect-hover-border-color);
+        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--up-lift-effect-hover-box-shadow-color);
+    }
+}
+
+.glow-effect {
+    transition: 0.3s;
+
+    &:hover {
+        box-shadow: var(--glow-box-shadow-color);
+        transform: translateY(-2px);
+        border-color: var(--glow-hover-border-color);
+    }
+}

package/dist/styles/scrollbars.scss

@@ -1,30 +1,30 @@
-:root {
-    --scrollbar-size: 6px;
-    --scrollbar-track-color: transparent;
-    --scrollbar-thumb-color: var(--delimiter-color, rgba(128, 128, 128, 0.45));
-    --scrollbar-thumb-hover-color: var(--body-color-muted, rgba(128, 128, 128, 0.65));
-    --scrollbar-radius: var(--radius-full, 9999px);
-}
-
-* {
-    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-    scrollbar-width: thin;
-}
-
-*::-webkit-scrollbar {
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
-}
-
-*::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color);
-}
-
-*::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-radius);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover-color);
-}
+:root {
+    --scrollbar-size: 6px;
+    --scrollbar-track-color: transparent;
+    --scrollbar-thumb-color: var(--delimiter-color, rgba(128, 128, 128, 0.45));
+    --scrollbar-thumb-hover-color: var(--body-color-muted, rgba(128, 128, 128, 0.65));
+    --scrollbar-radius: var(--radius-full, 9999px);
+}
+
+* {
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+    scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+}
+
+*::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-radius);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-color);
+}