@revisium/schema-toolkit-ui 0.6.11 → 0.6.13

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";
@@ -2767,7 +2767,7 @@ const SHARED_STYLES = {
 	fontSize: "inherit",
 	fontFamily: "inherit"
 };
-const SegmentContent = ({ segment, isHighlighted, onClick }) => {
+const SegmentContent = ({ segment, isHighlighted, isLast, onClick }) => {
 	if (onClick) return /* @__PURE__ */ jsx(StyledButton, {
 		type: "button",
 		...SHARED_STYLES,
@@ -2789,7 +2789,7 @@ const SegmentContent = ({ segment, isHighlighted, onClick }) => {
 		...SHARED_STYLES,
 		color: isHighlighted ? CURRENT_COLOR : SEGMENT_COLOR,
 		fontWeight: isHighlighted ? "600" : void 0,
-		cursor: isHighlighted ? "text" : "default",
+		cursor: isHighlighted || isLast ? "text" : "default",
 		"aria-current": isHighlighted ? "page" : void 0,
 		"data-testid": segment.dataTestId,
 		children: segment.label
@@ -2822,6 +2822,7 @@ const Breadcrumbs = ({ segments, separator = "/", dataTestId, highlightLast = tr
 					children: /* @__PURE__ */ jsx(SegmentContent, {
 						segment,
 						isHighlighted: isLast && highlightLast,
+						isLast,
 						onClick: isLast ? void 0 : onSegmentClick ? () => onSegmentClick(segment, index) : void 0
 					})
 				}), (!isLast || editable) && /* @__PURE__ */ jsx(Flex, {
@@ -14206,6 +14207,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 }) => {
@@ -14348,17 +14388,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, {
@@ -14419,11 +14620,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
@@ -14456,5 +14654,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