@parallelworks/ui 0.18.0 → 0.19.1

package/dist/list/listView.js

@@ -0,0 +1,210 @@
+import { usePersistedState, useStrings } from "../components/Provider.js";
+import { actionsColumnWidth } from "./ListTable.js";
+import { useCallback, useMemo } from "react";
+//#region src/list/listView.tsx
+var PRIORITY_SHOW_CLASS = {
+	low: "hidden @[52rem]:table-cell",
+	medium: "hidden @[36rem]:table-cell"
+};
+function columnResponsiveClass(col) {
+	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
+}
+var DEFAULT_ORDER = "__default";
+var FAVORITE_ORDER = "__favorite";
+/** Persisted grouping + column-visibility + field-filter state for a list page,
+* driving the shared Display/Filter menus. */
+function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = false, defaultShowActions = true, isFavorite, isOn, createdAt }) {
+	const t = useStrings().list;
+	const tiebreak = orderBys[0]?.compare;
+	const effectiveOrderBys = useMemo(() => {
+		if (!isFavorite) return orderBys;
+		const favoriteRank = (row) => isFavorite(row) ? 0 : 1;
+		const onRank = (row) => isOn?.(row) ? 0 : 1;
+		const createdMs = (row) => {
+			const v = createdAt?.(row);
+			return v === null || v === void 0 || Number.isNaN(v) ? 0 : v;
+		};
+		const newestFirst = (a, b) => createdMs(b) - createdMs(a);
+		return [...[{
+			value: DEFAULT_ORDER,
+			label: t.orderDefault,
+			compare: (a, b) => onRank(a) - onRank(b) || favoriteRank(a) - favoriteRank(b) || newestFirst(a, b) || (tiebreak?.(a, b) ?? 0)
+		}, {
+			value: FAVORITE_ORDER,
+			label: t.orderFavorites,
+			compare: (a, b) => favoriteRank(a) - favoriteRank(b) || (tiebreak?.(a, b) ?? 0)
+		}], ...orderBys];
+	}, [
+		orderBys,
+		isFavorite,
+		isOn,
+		createdAt,
+		tiebreak,
+		t
+	]);
+	const defaultGroupByValue = defaultGroupBy ?? groupBys[0]?.value ?? "";
+	const defaultOrderByValue = isFavorite ? DEFAULT_ORDER : defaultOrderBy ?? orderBys[0]?.value ?? "";
+	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !c.alwaysVisible).map((c) => c.key), [columns]);
+	const defaultPinnedKeys = useMemo(() => actions.filter((a) => a.defaultPinned).map((a) => a.key), [actions]);
+	const [hiddenKeys, setHiddenKeys] = usePersistedState(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
+	const [pinnedKeys, setPinnedKeys] = usePersistedState(`${storageKey}:pinnedActions`, defaultPinnedKeys);
+	const [groupBy, setGroupBy] = usePersistedState(`${storageKey}:groupBy`, defaultGroupByValue);
+	const [showColumnHeaders, setShowColumnHeaders] = usePersistedState(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
+	const [showActions, setShowActions] = usePersistedState(`${storageKey}:showActions`, defaultShowActions);
+	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
+	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
+	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
+	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
+	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
+	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
+	const filters = useMemo(() => {
+		if (sharedKeys.size === 0) return localFilters;
+		const merged = {};
+		for (const [key, values] of Object.entries(localFilters)) if (!sharedKeys.has(key)) merged[key] = values;
+		for (const key of sharedKeys) {
+			const values = sharedFilters[key];
+			if (values?.length) merged[key] = values;
+		}
+		return merged;
+	}, [
+		localFilters,
+		sharedFilters,
+		sharedKeys
+	]);
+	const pinnedCount = actionCount ?? pinnedKeys.filter((key) => actions.some((action) => action.key === key)).length;
+	const effectiveShowActions = showActions || alwaysShowActions;
+	const actionsWidth = effectiveShowActions ? actionsColumnWidth(pinnedCount) : 0;
+	const isVisible = useCallback((key) => {
+		const col = columns.find((c) => c.key === key);
+		return Boolean(col?.alwaysVisible) || !hiddenKeys.includes(key);
+	}, [columns, hiddenKeys]);
+	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
+	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
+	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
+	const setFacetValues = useCallback((key, values) => {
+		const update = (prev) => {
+			const next = { ...prev };
+			if (values.length) next[key] = values;
+			else delete next[key];
+			return next;
+		};
+		if (sharedKeys.has(key)) setSharedFilters(update);
+		else setLocalFilters(update);
+	}, [
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
+	]);
+	const clearFilters = useCallback(() => {
+		setLocalFilters({});
+		if (sharedKeys.size > 0) setSharedFilters((prev) => {
+			const next = { ...prev };
+			for (const key of sharedKeys) delete next[key];
+			return next;
+		});
+	}, [
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
+	]);
+	const isPinned = useCallback((key) => pinnedKeys.includes(key), [pinnedKeys]);
+	const togglePinned = useCallback((key) => setPinnedKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setPinnedKeys]);
+	const toggleColumnHeaders = useCallback(() => setShowColumnHeaders((prev) => !prev), [setShowColumnHeaders]);
+	const toggleShowActions = useCallback(() => {
+		if (effectiveShowActions) {
+			setShowActions(false);
+			setAlwaysShowActions(false);
+		} else setShowActions(true);
+	}, [
+		effectiveShowActions,
+		setShowActions,
+		setAlwaysShowActions
+	]);
+	const toggleAlwaysShowActions = useCallback(() => {
+		const next = !alwaysShowActions;
+		setAlwaysShowActions(next);
+		if (next) setShowActions(true);
+	}, [
+		alwaysShowActions,
+		setAlwaysShowActions,
+		setShowActions
+	]);
+	const toggleOrderDir = useCallback(() => setOrderDir((d) => d === "asc" ? "desc" : "asc"), [setOrderDir]);
+	const applyOrder = useCallback((rows) => {
+		const opt = effectiveOrderBys.find((o) => o.value === orderBy);
+		if (!opt) return rows;
+		const sign = orderDir === "asc" ? 1 : -1;
+		return [...rows].sort((a, b) => opt.compare(a, b) * sign);
+	}, [
+		effectiveOrderBys,
+		orderBy,
+		orderDir
+	]);
+	const sameKeys = (a, b) => a.length === b.length && a.every((k) => b.includes(k));
+	const isDisplayDefault = groupBy === defaultGroupByValue && orderBy === defaultOrderByValue && orderDir === "asc" && showColumnHeaders === defaultShowColumnHeaders && showActions === defaultShowActions && alwaysShowActions === false && sameKeys(hiddenKeys, defaultHiddenKeys) && sameKeys(pinnedKeys, defaultPinnedKeys);
+	const resetDisplay = useCallback(() => {
+		setGroupBy(defaultGroupByValue);
+		setOrderBy(defaultOrderByValue);
+		setOrderDir("asc");
+		setShowColumnHeaders(defaultShowColumnHeaders);
+		setShowActions(defaultShowActions);
+		setAlwaysShowActions(false);
+		setHiddenKeys(defaultHiddenKeys);
+		setPinnedKeys(defaultPinnedKeys);
+	}, [
+		setGroupBy,
+		setOrderBy,
+		setOrderDir,
+		defaultOrderByValue,
+		setShowColumnHeaders,
+		setShowActions,
+		setAlwaysShowActions,
+		setHiddenKeys,
+		setPinnedKeys,
+		defaultGroupByValue,
+		defaultHiddenKeys,
+		defaultPinnedKeys,
+		defaultShowColumnHeaders,
+		defaultShowActions
+	]);
+	return {
+		columns,
+		visibleColumns,
+		columnClasses,
+		isVisible,
+		pinnedCount,
+		actionsWidth,
+		toggleColumn,
+		groupBys,
+		groupBy,
+		setGroupBy,
+		orderBys: effectiveOrderBys,
+		orderBy,
+		setOrderBy,
+		orderDir,
+		toggleOrderDir,
+		applyOrder,
+		facets,
+		filters,
+		setFacetValues,
+		clearFilters,
+		activeFilterCount: useMemo(() => Object.values(filters).filter((v) => v && v.length > 0).length, [filters]),
+		applyFilters: useCallback((rows) => rows.filter((row) => facets.every((f) => {
+			const selected = filters[f.key];
+			return !selected || selected.length === 0 ? true : f.matches(row, selected);
+		})), [facets, filters]),
+		actions,
+		isPinned,
+		togglePinned,
+		showColumnHeaders,
+		toggleColumnHeaders,
+		showActions: effectiveShowActions,
+		toggleShowActions,
+		alwaysShowActions,
+		toggleAlwaysShowActions,
+		isDisplayDefault,
+		resetDisplay
+	};
+}
+//#endregion
+export { DEFAULT_ORDER, FAVORITE_ORDER, useListView };

package/dist/list/textEntry.js

@@ -0,0 +1,10 @@
+//#region src/list/textEntry.ts
+/** Guards list-page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+function isTextEntryContext(target) {
+	const el = target;
+	if (!el) return false;
+	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
+	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
+}
+//#endregion
+export { isTextEntryContext };

package/dist/logviewer/LogViewer.d.ts

@@ -1,4 +1,4 @@
-export declare function LogViewer({ log, height, width, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands, onReachTop, loadingTop, endOfLog, prependedSignal, enableTimeRangeFilter, onTimeRangeChange, initialTimeRangeFrom, initialTimeRangeTo, }: {
+export declare function LogViewer({ log, height, width, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands: workflowCommandsRequested, onReachTop, loadingTop, endOfLog, prependedSignal, enableTimeRangeFilter, onTimeRangeChange, initialTimeRangeFrom, initialTimeRangeTo, }: {
     log: string;
     height?: string | number;
     width: string | number;