@protobase/ui 0.15.3 → 0.15.4

package/dist/app/displays/map-display.js

@@ -5,8 +5,8 @@ import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { Problem } from "../pages/problem.js";
-import { RecordCard } from "./record-card.js";
 import { useDebounced } from "../../lib/use-debounced.js";
+import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
 import { useMapRecords } from "./use-map-records.js";

package/dist/filter-panel/range-filter.js

@@ -1,13 +1,26 @@
 import { cn } from "../lib/cn.js";
+import { useDebounced } from "../lib/use-debounced.js";
 import { barInRange, fraction, moveThumb } from "./range-math.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./range-slider.css";
 //#region src/filter-panel/range-filter.tsx
+/** How long a thumb rests, mid-drag or between arrow keys, before the list filters on it. */
+const rangeSettleMs = 1e3;
 const RangeFilter = ({ config, value, onChange }) => {
 	const { min, max, step, histogram, format } = config;
-	const selected = value ?? [min, max];
+	const [draft, setDraft] = useState();
+	const selected = draft ?? value ?? [min, max];
 	const peak = Math.max(...histogram);
-	const commit = (next) => onChange(next[0] === min && next[1] === max ? void 0 : next);
+	const commit = () => {
+		if (!draft) return;
+		setDraft(void 0);
+		onChange(draft[0] === min && draft[1] === max ? void 0 : draft);
+	};
+	const rested = useDebounced(draft, rangeSettleMs);
+	useEffect(() => {
+		if (rested) commit();
+	}, [rested]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		children: [
@@ -40,7 +53,10 @@ const RangeFilter = ({ config, value, onChange }) => {
 					max,
 					step,
 					value: selected[thumb],
-					onChange: (event) => commit(moveThumb(selected, thumb, Number(event.target.value)))
+					onChange: (event) => setDraft(moveThumb(selected, thumb, Number(event.target.value))),
+					onPointerUp: commit,
+					onTouchEnd: commit,
+					onBlur: commit
 				}, thumb))
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -51,4 +67,4 @@ const RangeFilter = ({ config, value, onChange }) => {
 	});
 };
 //#endregion
-export { RangeFilter };
+export { RangeFilter, rangeSettleMs };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.15.3";
+var version = "0.15.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };