@revisium/schema-toolkit-ui 0.6.12 → 0.6.14

package/dist/index.mjs

@@ -2,7 +2,7 @@ import * as mobx from "mobx";
 import { comparer, computed, makeAutoObservable, observable, reaction, runInAction, untracked } from "mobx";
 import { FIELD_NAME_ERROR_MESSAGE, SchemaParser, SystemSchemaIds, arr, createRowModel, createSchemaTree, createTableModel, fileSchema, generateDefaultValue, isForeignKeyValueNode, isValidFieldName, jsonPointerToSimplePath, num, obj, rowCreatedAtSchema, rowCreatedIdSchema, rowHashSchema, rowIdSchema, rowPublishedAtSchema, rowSchemaHashSchema, rowUpdatedAtSchema, rowVersionIdSchema, str, validateFormulaAgainstSchema } from "@revisium/schema-toolkit";
 import { createMobxProvider, setReactivityProvider } from "@revisium/schema-toolkit/core";
-import { ActionBar, Badge, Box, Button, Checkbox, Flex, HStack, HoverCard, Icon, IconButton, Image, Input, Kbd, Menu, Popover, Portal, SegmentGroup, Spinner, Text, Textarea, Tooltip as Tooltip$1, VStack, chakra } from "@chakra-ui/react";
+import { ActionBar, Badge, Box, Button, Checkbox, Flex, HStack, HoverCard, Icon, IconButton, Image, Input, Kbd, Menu, Popover, Portal, SegmentGroup, Skeleton, Spinner, Text, Textarea, Tooltip as Tooltip$1, VStack, chakra } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import * as React$1 from "react";
 import React, { Fragment, createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -9509,6 +9509,14 @@ var SortModel = class {
 			direction: sort.direction
 		}));
 	}
+	serializeToQuerySorts() {
+		const lookup = this._fieldLookup;
+		return this.sorts.map((sort) => ({
+			field: stripDataFieldPrefix(sort.field),
+			direction: sort.direction,
+			type: lookup.get(sort.field)?.fieldType ?? "String"
+		}));
+	}
 	applyViewSorts(viewSorts) {
 		const lookup = this._fieldLookup;
 		const sorts = [];
@@ -9838,7 +9846,7 @@ const SortingsWidget = observer(({ model, availableFields, onChange }) => {
 								children: "Clear all"
 							}),
 							model.hasSorts && /* @__PURE__ */ jsx(CopyJsonPopover, {
-								data: model.serializeToViewSorts(),
+								data: model.serializeToQuerySorts(),
 								tooltipContent: "Copy sort JSON",
 								testId: "sort-copy-json"
 							}),
@@ -13970,10 +13978,7 @@ var TableEditorCore = class {
 	_buildQuery(after = null) {
 		return {
 			where: this.filters.hasActiveFilters ? this.filters.buildCurrentWhereClause() : null,
-			orderBy: this.sorts.serializeToViewSorts().map((s) => ({
-				field: stripDataFieldPrefix(s.field),
-				direction: s.direction
-			})),
+			orderBy: this.sorts.serializeToQuerySorts(),
 			search: this.search.debouncedQuery,
 			first: this._pageSize,
 			after
@@ -13986,9 +13991,10 @@ var TableEditorCore = class {
 			this._replaceRowVMs(result.rows);
 			this._endCursor = result.endCursor;
 			this._hasNextPage = result.hasNextPage;
+			const isFiltering = this.filters.hasActiveFilters || this.search.hasActiveSearch;
 			this.rowCount.setTotalCount(result.totalCount);
-			this.rowCount.setBaseTotalCount(result.totalCount);
-			this.rowCount.setIsFiltering(this.filters.hasActiveFilters || this.search.hasActiveSearch);
+			if (!isFiltering) this.rowCount.setBaseTotalCount(result.totalCount);
+			this.rowCount.setIsFiltering(isFiltering);
 			this._updateNavigationContext();
 		});
 	}
@@ -14207,6 +14213,45 @@ var MockDataSource = class {
 	}
 };
 
+//#endregion
+//#region src/hooks/useDelayedVisibility.ts
+/**
+* Controls visibility with a show delay and minimum display time.
+*
+* - If `active` becomes false before `delayMs` elapses → never shown.
+* - If shown, stays visible for at least `minShowMs` after `active` becomes false.
+*/
+function useDelayedVisibility(active, { delayMs = 150, minShowMs = 300 } = {}) {
+	const [visible, setVisible] = useState(false);
+	const shownAt = useRef(null);
+	useEffect(() => {
+		if (active) {
+			const timer = setTimeout(() => {
+				shownAt.current = Date.now();
+				setVisible(true);
+			}, delayMs);
+			return () => clearTimeout(timer);
+		}
+		if (shownAt.current !== null) {
+			const remaining = minShowMs - (Date.now() - shownAt.current);
+			if (remaining > 0) {
+				const timer = setTimeout(() => {
+					shownAt.current = null;
+					setVisible(false);
+				}, remaining);
+				return () => clearTimeout(timer);
+			}
+			shownAt.current = null;
+		}
+		setVisible(false);
+	}, [
+		active,
+		delayMs,
+		minShowMs
+	]);
+	return visible;
+}
+
 //#endregion
 //#region src/table-editor/Status/ui/CellInfoWidget.tsx
 const CellInfoWidget = observer(({ model }) => {
@@ -14349,17 +14394,178 @@ const ViewSettingsBadge = observer(({ model }) => {
 	});
 });
 
+//#endregion
+//#region src/table-editor/TableEditor/ui/TableEditorSkeleton.tsx
+const HEADER_ROW_HEIGHT = 40;
+const DATA_ROW_HEIGHT = 40;
+const SKELETON_ROW_COUNT = 8;
+const COLUMN_WIDTHS = [
+	120,
+	150,
+	120,
+	100,
+	130
+];
+const CONTENT_WIDTHS = [
+	[
+		80,
+		110,
+		70,
+		60,
+		90
+	],
+	[
+		100,
+		90,
+		100,
+		80,
+		110
+	],
+	[
+		60,
+		130,
+		80,
+		70,
+		80
+	],
+	[
+		90,
+		100,
+		60,
+		90,
+		100
+	],
+	[
+		75,
+		120,
+		90,
+		55,
+		70
+	],
+	[
+		110,
+		80,
+		75,
+		80,
+		120
+	],
+	[
+		85,
+		140,
+		95,
+		65,
+		95
+	],
+	[
+		95,
+		70,
+		110,
+		85,
+		80
+	]
+];
+const TableEditorSkeleton = ({ breadcrumbs, onBreadcrumbClick, showCreateButton, useWindowScroll }) => /* @__PURE__ */ jsxs(Box, {
+	display: "flex",
+	flexDirection: "column",
+	height: useWindowScroll ? void 0 : "100%",
+	flex: useWindowScroll ? 1 : void 0,
+	children: [/* @__PURE__ */ jsxs(Flex, {
+		px: 3,
+		pt: "32px",
+		pb: "48px",
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		...useWindowScroll && {
+			position: "sticky",
+			top: 0,
+			zIndex: 3,
+			bg: "white"
+		},
+		children: [breadcrumbs.length > 0 ? /* @__PURE__ */ jsx(Breadcrumbs, {
+			segments: breadcrumbs,
+			highlightLast: false,
+			onSegmentClick: onBreadcrumbClick,
+			action: showCreateButton ? /* @__PURE__ */ jsx(Skeleton, {
+				height: "32px",
+				width: "32px",
+				borderRadius: "6px"
+			}) : void 0
+		}) : /* @__PURE__ */ jsx(Box, {}), /* @__PURE__ */ jsxs(Flex, {
+			alignItems: "center",
+			gap: "8px",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				}),
+				/* @__PURE__ */ jsx(Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				}),
+				/* @__PURE__ */ jsx(Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				})
+			]
+		})]
+	}), /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Flex, {
+		height: `${HEADER_ROW_HEIGHT}px`,
+		alignItems: "center",
+		px: 3,
+		borderBottom: "1px solid",
+		borderColor: "gray.100",
+		children: COLUMN_WIDTHS.map((colWidth, j) => /* @__PURE__ */ jsx(Box, {
+			width: `${colWidth}px`,
+			flexShrink: 0,
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				height: "12px",
+				width: "60px",
+				borderRadius: "4px"
+			})
+		}, `h-${j}`))
+	}), CONTENT_WIDTHS.slice(0, SKELETON_ROW_COUNT).map((contentWidths, i) => /* @__PURE__ */ jsx(Flex, {
+		height: `${DATA_ROW_HEIGHT}px`,
+		alignItems: "center",
+		px: 3,
+		borderBottom: "1px solid",
+		borderColor: "gray.100",
+		children: COLUMN_WIDTHS.map((colWidth, j) => /* @__PURE__ */ jsx(Box, {
+			width: `${colWidth}px`,
+			flexShrink: 0,
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				height: "14px",
+				width: `${contentWidths[j]}px`,
+				borderRadius: "4px"
+			})
+		}, `r-${i}-c-${j}`))
+	}, `r-${i}`))] })]
+});
+
 //#endregion
 //#region src/table-editor/TableEditor/ui/TableEditor.tsx
 const noop = () => {};
+function getWriteCallbacks(isReadonly, viewModel, callbacks) {
+	return {
+		onDeleteRow: isReadonly ? void 0 : (id) => viewModel.deleteRows([id]),
+		onDuplicateRow: isReadonly ? void 0 : callbacks.onDuplicateRow,
+		onDeleteSelected: isReadonly ? void 0 : (ids) => viewModel.deleteRows(ids),
+		onUploadFile: isReadonly ? void 0 : callbacks.onUploadFile
+	};
+}
 const TableEditor = observer(({ viewModel, useWindowScroll }) => {
-	if (viewModel.isBootstrapping) return /* @__PURE__ */ jsx(Box, {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		height: "100%",
-		children: /* @__PURE__ */ jsx(Spinner, {})
-	});
+	const showSkeleton = useDelayedVisibility(viewModel.isBootstrapping);
+	if (viewModel.isBootstrapping) {
+		if (!showSkeleton) return null;
+		return /* @__PURE__ */ jsx(TableEditorSkeleton, {
+			breadcrumbs: viewModel.breadcrumbs,
+			onBreadcrumbClick: viewModel.callbacks.onBreadcrumbClick,
+			showCreateButton: !viewModel.readonly && !!viewModel.callbacks.onCreateRow,
+			useWindowScroll
+		});
+	}
 	const isReadonly = viewModel.readonly;
 	const { breadcrumbs, callbacks } = viewModel;
 	return /* @__PURE__ */ jsxs(Box, {
@@ -14420,11 +14626,8 @@ const TableEditor = observer(({ viewModel, useWindowScroll }) => {
 					onEndReached: viewModel.loadMore,
 					onOpenRow: callbacks.onOpenRow,
 					onPickRow: callbacks.onPickRow,
-					onDeleteRow: isReadonly ? void 0 : (id) => viewModel.deleteRows([id]),
-					onDuplicateRow: isReadonly ? void 0 : callbacks.onDuplicateRow,
-					onDeleteSelected: isReadonly ? void 0 : (ids) => viewModel.deleteRows(ids),
+					...getWriteCallbacks(isReadonly, viewModel, callbacks),
 					onSearchForeignKey: callbacks.onSearchForeignKey,
-					onUploadFile: isReadonly ? void 0 : callbacks.onUploadFile,
 					onOpenFile: callbacks.onOpenFile,
 					onCopyPath: callbacks.onCopyPath,
 					useWindowScroll
@@ -14457,5 +14660,5 @@ const TableEditor = observer(({ viewModel, useWindowScroll }) => {
 });
 
 //#endregion
-export { BackButton, BooleanCell, Breadcrumbs, CellFSM, CellRenderer, CellVM, CellWrapper, CloseButton, ColumnsModel, ContentEditable, CopyButton, CreateButton, CreatingEditorVM, CreatingSchemaEditor, DataRow, DateTimeCell, DeleteConfirmDialog, FieldSelect, FileCell, FilterConditionVM, FilterConditionView, FilterCore, FilterCore as FilterModel, FilterFieldType, FilterGroupVM, FilterGroupView, FilterOperator, FilterValueInput, FilterWidget, ForeignKeyCell, GrayButton, HeaderRow, JsonCard, MockDataSource, NumberCell, OPERATORS_BY_TYPE, OperatorSelect, PlusButton, ReadonlyCell, ResizeHandle, RowActionsMenu, RowCountModel, RowCountWidget, RowEditor, RowEditorVM, RowVM, SEARCH_LANGUAGES, SEARCH_TYPES, SORT_SCHEMA, SYSTEM_FIELDS, SYSTEM_FIELD_BY_REF, SYSTEM_FIELD_IDS, SchemaContext, SchemaEditorCore, SchemaTypeIds, SearchForeignKey, SearchForeignKeyVM, SearchLanguage, SearchModel, SearchType, SearchWidget, SelectionModel, SelectionToolbar, SettingsButton, SortDirectionSelect, SortFieldSelect, SortModel, SortRow, SortingsWidget, StringCell, SystemFieldId, TableEditor, TableEditorCore, TableWidget, Tooltip, UpdatingEditorVM, UpdatingSchemaEditor, ViewSettingsBadge, ViewSettingsBadgeModel, ViewerSwitcher, ViewerSwitcherMode, buildWhereClause, ensureReactivityProvider, extractColumns, getDefaultOperator, getLabelByRef, getOperatorLabel, getOperatorsForType, groupFileFields, isFileFieldGroup, operatorRequiresValue, selectDefaultColumns, typeMenuGroups, useContentEditable };
+export { BackButton, BooleanCell, Breadcrumbs, CellFSM, CellRenderer, CellVM, CellWrapper, CloseButton, ColumnsModel, ContentEditable, CopyButton, CreateButton, CreatingEditorVM, CreatingSchemaEditor, DataRow, DateTimeCell, DeleteConfirmDialog, FieldSelect, FileCell, FilterConditionVM, FilterConditionView, FilterCore, FilterCore as FilterModel, FilterFieldType, FilterGroupVM, FilterGroupView, FilterOperator, FilterValueInput, FilterWidget, ForeignKeyCell, GrayButton, HeaderRow, JsonCard, MockDataSource, NumberCell, OPERATORS_BY_TYPE, OperatorSelect, PlusButton, ReadonlyCell, ResizeHandle, RowActionsMenu, RowCountModel, RowCountWidget, RowEditor, RowEditorVM, RowVM, SEARCH_LANGUAGES, SEARCH_TYPES, SORT_SCHEMA, SYSTEM_FIELDS, SYSTEM_FIELD_BY_REF, SYSTEM_FIELD_IDS, SchemaContext, SchemaEditorCore, SchemaTypeIds, SearchForeignKey, SearchForeignKeyVM, SearchLanguage, SearchModel, SearchType, SearchWidget, SelectionModel, SelectionToolbar, SettingsButton, SortDirectionSelect, SortFieldSelect, SortModel, SortRow, SortingsWidget, StringCell, SystemFieldId, TableEditor, TableEditorCore, TableWidget, Tooltip, UpdatingEditorVM, UpdatingSchemaEditor, ViewSettingsBadge, ViewSettingsBadgeModel, ViewerSwitcher, ViewerSwitcherMode, buildWhereClause, ensureReactivityProvider, extractColumns, getDefaultOperator, getLabelByRef, getOperatorLabel, getOperatorsForType, groupFileFields, isFileFieldGroup, operatorRequiresValue, selectDefaultColumns, typeMenuGroups, useContentEditable, useDelayedVisibility };
 //# sourceMappingURL=index.mjs.map