@morze/ui 0.2.0 → 0.2.2

package/README.md

@@ -200,10 +200,28 @@ sink them into the page.
 
 ## Customisation
 
+**One colour re-tints the whole kit.** The neutral surfaces — panels, inputs,
+table headers, the sunken wells — are not flat grey: each is a neutral mixed
+with a few percent of `--mz-tint`, which points at the brand colour. Change
+`--mz-primary-rgb` and the greys follow it, instead of keeping the violet cast
+they were born with:
+
+```css
+:root {
+  --mz-primary-rgb: 16, 175, 122;   /* the panels and wells go green with it */
+  --mz-tint: #8b8b96;               /* …or point the tint at a grey for none */
+}
+```
+
+Text is deliberately left out of this: its contrast is calibrated against the
+background, and dragging a saturated brand through it costs more than it buys.
+The tinted surfaces need `color-mix()` — Chrome 111+, Firefox 113+, Safari 16.2+,
+the same baseline as the rest of the kit.
+
 Everything is driven by custom properties; override them after importing the
 styles. The main groups: surfaces (`--mz-bg`, `--mz-surface`, `--mz-elevated`),
-borders, text, tones, the convex recipe (`--mz-convex-*`, `--mz-face*`,
-`--mz-well*`), geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
+borders, text, tones, the tint (`--mz-tint`, `--mz-shade`), the convex recipe
+(`--mz-convex-*`, `--mz-face*`, `--mz-well*`), geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
 motion and states (`--mz-ease`, `--mz-duration`, `--mz-hover-scale`,
 `--mz-press-scale`, `--mz-hover-mix`, `--mz-press-mix`), focus (`--mz-ring-*`).
 

package/dist/index.cjs

@@ -2420,20 +2420,27 @@ function useColumnLayout({
     () => controlled ? merge(baseline, controlled, baseline) : internal,
     [controlled, internal, baseline]
   );
+  const onLayoutChangeRef = React39__namespace.useRef(onLayoutChange);
+  React39__namespace.useEffect(() => {
+    onLayoutChangeRef.current = onLayoutChange;
+  });
+  const internalRef = React39__namespace.useRef(internal);
+  React39__namespace.useEffect(() => {
+    internalRef.current = internal;
+  }, [internal]);
   const update = React39__namespace.useCallback(
     (patch, options) => {
-      setInternal((current) => {
-        const base = controlled ? merge(baseline, controlled, baseline) : current;
-        const next = patch(base);
-        if (next === base) return current;
-        if (options?.persist !== false) {
-          writeStored2(persistKey, next);
-          onLayoutChange?.(next);
-        }
-        return next;
-      });
+      const base = controlled ? merge(baseline, controlled, baseline) : internalRef.current;
+      const next = patch(base);
+      if (next === base) return;
+      internalRef.current = next;
+      setInternal(next);
+      if (options?.persist !== false) {
+        writeStored2(persistKey, next);
+        onLayoutChangeRef.current?.(next);
+      }
     },
-    [controlled, baseline, persistKey, onLayoutChange]
+    [controlled, baseline, persistKey]
   );
   const byId = React39__namespace.useMemo(
     () => new Map(columns.map((c) => [c.id, c])),
@@ -2617,6 +2624,7 @@ function useRowSelection(options) {
 }
 var SELECT_WIDTH = 44;
 var EXPAND_WIDTH = 40;
+var FIT_CYCLE_MS = 250;
 function DataTable({
   columns,
   data,
@@ -2680,22 +2688,28 @@ function DataTable({
     }),
     pageKeys
   });
-  const lastFitWidth = React39__namespace.useRef(0);
+  const recentFits = React39__namespace.useRef([]);
+  const hiddenKey = layout.hidden.join("\0");
+  const orderKey = layout.order.join("\0");
   React39__namespace.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller || !autoFit) return;
     const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
+    recentFits.current = [];
     const run = () => {
       const available = scroller.clientWidth - controls - 2;
-      if (Math.abs(available - lastFitWidth.current) < 1) return;
-      lastFitWidth.current = available;
+      const now = Date.now();
+      const recent = recentFits.current.filter((entry) => now - entry.at < FIT_CYCLE_MS);
+      recentFits.current = recent;
+      if (recent.some((entry) => Math.abs(available - entry.width) < 1)) return;
+      recent.push({ width: available, at: now });
       fitTo(available);
     };
     run();
     const observer = new ResizeObserver(run);
     observer.observe(scroller);
     return () => observer.disconnect();
-  }, [autoFit, fitTo, selectable, renderExpanded, layout.hidden, layout.order]);
+  }, [autoFit, fitTo, selectable, renderExpanded, hiddenKey, orderKey]);
   React39__namespace.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
@@ -2827,6 +2841,7 @@ function DataTable({
                 columnLabel: label,
                 def: column.filter,
                 value: query.filters[column.id],
+                labels: labelsProp,
                 onApply: (value) => onQueryChange(setFilter(query, column.id, value))
               }
             ) : null