@protobase/ui 0.24.0 → 0.24.1

package/dist/app/hand-order/drop-rule.d.ts

@@ -0,0 +1,13 @@
+//#region src/app/hand-order/drop-rule.d.ts
+/** A record dropped while re-ranking: the records as the API gives them, in the order the drop leaves them, and its place among them, 0 the first. */
+export type Drop = {
+  record: Record<string, unknown>;
+  order: Record<string, unknown>[];
+  index: number;
+};
+/**
+ * Where a re-ranked record may land, a view's `drag.rule`: why `drop.record` may not be at `drop.index`, in the app's own
+ * words, or nothing when it may.
+ */
+export type DropRule = (drop: Drop) => string | undefined;
+//#endregion

package/dist/app/hand-order/drop-rule.js

@@ -0,0 +1,28 @@
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/app/hand-order/drop-rule.ts
+/**
+* Where the record at `from` of `records` lands when dropped at `to`: there when `rule` allows it, else at the first
+* place below that it allows, with the reason it refused `to`. With none below, it stays at `from`, with that reason.
+*/
+const allowedDrop = (records, from, to, rule) => {
+	const record = records[from];
+	let reason;
+	for (let index = to; index < records.length; index++) {
+		const refused = rule({
+			record,
+			order: arrayMove(records, from, index),
+			index
+		});
+		if (refused === void 0) return {
+			to: index,
+			...reason !== void 0 && { reason }
+		};
+		reason ??= refused;
+	}
+	return {
+		to: from,
+		reason
+	};
+};
+//#endregion
+export { allowedDrop };

package/dist/app/hand-order/hand-sorted-list.js

@@ -1,4 +1,5 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { Problem } from "../pages/problem.js";
 import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { loadedFields } from "../displays/list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
@@ -10,16 +11,16 @@ import { embeddedColumns } from "../embedded-list/embedded-columns.js";
 import { text } from "./messages.js";
 import { useHandOrder } from "./use-hand-order.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/hand-order/hand-sorted-list.tsx
 /**
 * The records in their order by hand, in the list's table with a drag handle in each row's checkbox place: dragging a
-* row, or moving it with the keyboard from its handle, renumbers them all. The page scrolls them, and a row still opens
-* its record.
+* row, or moving it with the keyboard from its handle, renumbers them all, landing where the list's `drag.rule` allows.
+* The page scrolls them, and a row still opens its record.
 */
 const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 	const { resources, views } = useAdminMeta();
-	const { fields: fieldTypes } = useProjectUi();
+	const { fields: fieldTypes, dropRules } = useProjectUi();
 	const { go, href } = useAppAddress();
 	const sorts = sort !== void 0;
 	const specs = useMemo(() => embeddedColumns(model, view, columns, {
@@ -43,17 +44,25 @@ const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 		view,
 		specs
 	]);
+	const ruleName = view?.list?.drag?.rule;
+	const rule = ruleName === void 0 ? void 0 : dropRules?.[ruleName];
 	const order = useHandOrder({
 		model,
 		field,
 		filter,
-		fields
+		fields,
+		...rule && { rule }
 	});
 	const rows = order.rows;
 	const source = useMemo(() => rows && {
 		total: rows.length,
 		rowAt: (index) => rows[index]
 	}, [rows]);
+	if (ruleName !== void 0 && !rule) return /* @__PURE__ */ jsxs(Problem, { children: [
+		"No drop rule is registered as ",
+		ruleName,
+		". Give it in dropRules in protobase.ui.tsx, or load the plugin that provides it."
+	] });
 	if (order.loading) return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2",
 		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))

package/dist/app/hand-order/messages.js

@@ -9,7 +9,9 @@ const text = defineMessages({
 		couldNotChange: "Could not change the order",
 		orderChanged: "Order changed",
 		undo: "Undo",
-		couldNotUndo: "Could not undo"
+		couldNotUndo: "Could not undo",
+		movedToPlace: (place) => `Moved to place ${place}`,
+		notMoved: "Left in its place"
 	},
 	nl: {
 		done: "Klaar",
@@ -19,7 +21,9 @@ const text = defineMessages({
 		couldNotChange: "Kon de volgorde niet wijzigen",
 		orderChanged: "Volgorde gewijzigd",
 		undo: "Ongedaan maken",
-		couldNotUndo: "Kon niet ongedaan maken"
+		couldNotUndo: "Kon niet ongedaan maken",
+		movedToPlace: (place) => `Verplaatst naar plaats ${place}`,
+		notMoved: "Op zijn plaats gelaten"
 	}
 });
 //#endregion

package/dist/app/hand-order/use-hand-order.js

@@ -3,11 +3,13 @@ import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordId, recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "../displays/board-columns.js";
+import { displayRow } from "../displays/list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { reorderSpan } from "./reorder-span.js";
 import { undoOps } from "./undo-ops.js";
+import { allowedDrop } from "./drop-rule.js";
 import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
@@ -19,9 +21,10 @@ import { arrayMove } from "@dnd-kit/sortable";
 * one elsewhere. A move shows at once and saves only the records whose place changed (see `reorderSpan`) in one batch
 * `reorder` with their ETags; moves made while one saves are saved after it, with the values and ETags it gave back.
 * Each save says so with **Undo**, which puts back the values it changed. A refusal puts them back as the server has
-* them and says why; either way every list of the resource reloads.
+* them and says why; either way every list of the resource reloads. A drop `rule` refuses moves to the first place below
+* that it allows, with a warning giving its reason.
 */
-const useHandOrder = ({ model, field, filter, fields }) => {
+const useHandOrder = ({ model, field, filter, fields, rule }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
@@ -116,9 +119,11 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		latest.current = void 0;
 		setMoved(void 0);
 	};
-	const move = (from, to) => {
+	const move = (from, dropped) => {
 		const rows = latest.current ?? loaded.data;
-		if (!rows || from === to) return;
+		if (!rows || from === dropped) return;
+		const to = rule ? placeAllowed(rows, from, dropped, rule) : dropped;
+		if (from === to) return;
 		latest.current = arrayMove(rows, from, to);
 		const first = Math.min(from, to);
 		const last = Math.max(from, to);
@@ -133,6 +138,15 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		waiting.current += 1;
 		saving.current = saving.current.then(save).catch(refused(text("couldNotChange"))).then(settle);
 	};
+	const placeAllowed = (rows, from, dropped, rule) => {
+		const allowed = allowedDrop(rows.map((row) => displayRow(model, row).record), from, dropped, rule);
+		if (allowed.reason !== void 0) toast.show({
+			state: "warning",
+			title: allowed.to === from ? text("notMoved") : text("movedToPlace", allowed.to + 1),
+			description: allowed.reason
+		});
+		return allowed.to;
+	};
 	const undoSave = (ops) => {
 		if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
 		undoToast.current = void 0;

package/dist/app/pages/merge-ui.d.ts

@@ -2,7 +2,7 @@ import { ProjectUi } from "./project-ui.js";
 //#region src/app/pages/merge-ui.d.ts
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
- * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+ * handlers, field types and drop rules are all kept, and one name defined by two configs is an error naming both; every shell slot
  * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;

package/dist/app/pages/merge-ui.js

@@ -35,7 +35,7 @@ const around = (wrappers) => {
 };
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
-* handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+* handlers, field types and drop rules are all kept, and one name defined by two configs is an error naming both; every shell slot
 * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
 */
 const mergeUi = (...uis) => {
@@ -43,6 +43,7 @@ const mergeUi = (...uis) => {
 	const components = union("The component", named, (ui) => ui.components);
 	const actions = union("The action handler", named, (ui) => ui.actions);
 	const fields = union("The field type", named, (ui) => ui.fields);
+	const dropRules = union("The drop rule", named, (ui) => ui.dropRules);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
@@ -53,6 +54,7 @@ const mergeUi = (...uis) => {
 		components,
 		actions,
 		...Object.keys(fields).length > 0 && { fields },
+		...Object.keys(dropRules).length > 0 && { dropRules },
 		...(actionSlot || rightPanel || logo) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },

package/dist/app/pages/project-ui.d.ts

@@ -1,5 +1,6 @@
 import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
+import { DropRule } from "../hand-order/drop-rule.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
@@ -43,9 +44,9 @@ export type BeforeSignInProps = {
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
- * field types by the name a view's `.widget(name)` chooses, and the shell's slots. `extends` lists UI configs merged in
- * before it (see `mergeUi`), or whole `protobase.ui.tsx` modules (`import * as tasksUi from '...'`), their exported
- * components included; `name` names it in their errors.
+ * field types by the name a view's `.widget(name)` chooses, drop rules by the name a list's `drag.rule` gives, and the
+ * shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
+ * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
  */
 export type ProjectUi = {
   name?: string;
@@ -54,6 +55,8 @@ export type ProjectUi = {
   actions?: Record<string, ActionHandler>;
   /** Field types by name, each with the storage types it shows and its components (see `FieldWidget`). */
   fields?: Record<string, FieldWidget>;
+  /** Where re-ranked records may land, by the name a view's `drag.rule` gives (see `DropRule`). */
+  dropRules?: Record<string, DropRule>;
   /**
    * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, and `logo`
    * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`).

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
+import { Drop, DropRule } from "./app/hand-order/drop-rule.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
@@ -61,4 +62,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

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