@plitzi/sdk-elements 0.37.9 → 0.38.1

package/dist/elements/structure/List/Settings.d.ts

@@ -1,7 +1,8 @@
 type SettingsProps = {
     subType?: 'ul' | 'ol';
     source?: 'none' | 'controlled';
+    itemKey?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, source, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ subType, source, itemKey, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/structure/List/Settings.mjs

@@ -1,37 +1,49 @@
 import { useCallback as e } from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Select";
+import r from "@plitzi/plitzi-ui/Input";
+import i from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/List/Settings.tsx
-var i = ({ subType: i = "ul", source: a = "none", onUpdate: o }) => {
-	let s = e((e) => (t) => o?.(e, t), [o]);
+var a = ({ subType: a = "ul", source: o = "none", itemKey: s = "", onUpdate: c }) => {
+	let l = e((e) => (t) => c?.(e, t), [c]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: [/* @__PURE__ */ n(r, {
-			label: "Source",
-			value: a,
-			onChange: s("source"),
-			size: "xs",
-			children: [/* @__PURE__ */ t("option", {
-				value: "none",
-				children: "None"
-			}), /* @__PURE__ */ t("option", {
-				value: "controlled",
-				children: "Controlled"
-			})]
-		}), a === "none" && /* @__PURE__ */ n(r, {
-			label: "List Type",
-			value: i,
-			onChange: s("subType"),
-			size: "xs",
-			children: [/* @__PURE__ */ t("option", {
-				value: "ul",
-				children: "Unordered"
-			}), /* @__PURE__ */ t("option", {
-				value: "ol",
-				children: "Ordered"
-			})]
-		})]
+		children: [
+			/* @__PURE__ */ n(i, {
+				label: "Source",
+				value: o,
+				onChange: l("source"),
+				size: "xs",
+				children: [/* @__PURE__ */ t("option", {
+					value: "none",
+					children: "None"
+				}), /* @__PURE__ */ t("option", {
+					value: "controlled",
+					children: "Controlled"
+				})]
+			}),
+			o === "controlled" && /* @__PURE__ */ t(r, {
+				label: "Row key",
+				size: "xs",
+				placeholder: "id",
+				value: s,
+				title: "The field of each item that names it, so a row stays with its item when the list is filtered.",
+				onChange: l("itemKey")
+			}),
+			o === "none" && /* @__PURE__ */ n(i, {
+				label: "List Type",
+				value: a,
+				onChange: l("subType"),
+				size: "xs",
+				children: [/* @__PURE__ */ t("option", {
+					value: "ul",
+					children: "Unordered"
+				}), /* @__PURE__ */ t("option", {
+					value: "ol",
+					children: "Ordered"
+				})]
+			})
+		]
 	});
 };
 //#endregion
-export { i as default };
+export { a as default };

package/dist/elements/structure/List/declaration.d.ts

@@ -33,7 +33,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -90,5 +90,6 @@ declare const declaration: {
     source?: "none" | "controlled" | undefined;
     items?: unknown[] | undefined;
     subType?: "ul" | "ol" | undefined;
+    itemKey?: string | undefined;
 }>>;
 export default declaration;

package/dist/elements/structure/List/declaration.mjs

@@ -27,7 +27,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/List/index.d.ts

@@ -28,7 +28,7 @@ declare const List: {
                     readonly canSelect: true;
                     readonly canDragDrop: true;
                     readonly canMove: true;
-                    readonly canTemplate: true;
+                    readonly canSnippet: true;
                     readonly itemsAllowed: readonly [];
                     readonly itemsNotAllowed: readonly ["listItem"];
                 };
@@ -84,7 +84,7 @@ declare const List: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -141,6 +141,7 @@ declare const List: {
         source?: "none" | "controlled" | undefined;
         items?: unknown[] | undefined;
         subType?: "ul" | "ol" | undefined;
+        itemKey?: string | undefined;
     }>;
 };
 export default List;

package/dist/elements/structure/List/modes/ListControlled/ListControlled.d.ts

@@ -4,6 +4,7 @@ export type ListControlledProps<T = unknown> = {
     className: string;
     children: ReactNode;
     items: T[];
+    itemKey?: string;
 };
-declare const ListControlled: ({ ref, className, children, items }: ListControlledProps) => import('react').JSX.Element;
+declare const ListControlled: ({ ref, className, children, items, itemKey }: ListControlledProps) => import('react').JSX.Element;
 export default ListControlled;

package/dist/elements/structure/List/modes/ListControlled/ListControlled.mjs

@@ -1,54 +1,52 @@
 import e from "../../../../../Element/hooks/useElement.mjs";
 import { RootElement as t } from "../../../../../Element/RootElement.mjs";
-import n from "../../declaration.mjs";
+import { rowKeys as n } from "./rowKeys.mjs";
 import r from "./ListControlledItem.mjs";
-import { useCallback as i, useMemo as a } from "react";
-import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as s } from "@plitzi/plitzi-ui/helpers";
-import { StoreProvider as c } from "@plitzi/nexus/react";
-import { emptyObject as l, getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "clsx";
-import m from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import h from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import i from "../../declaration.mjs";
+import { useCallback as a, useMemo as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as c } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as l } from "@plitzi/nexus/react";
+import { emptyObject as u, getPathsFromObeject as d } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/List/modes/ListControlled/ListControlled.tsx
-var g = (e) => {
-	let t = e.map((e) => typeof e == "object" && e && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : void 0);
-	return t.every((e) => e !== void 0) && new Set(t).size === t.length ? t.map((e) => `id:${String(e)}`) : e.map((e, t) => t);
-}, _ = ({ ref: _, className: v = "", children: y, items: b = [] }) => {
-	let { id: x, definition: { label: S } } = e(), C = m(n.sourceType, x), { settings: { previewMode: w } } = o(), T = a(() => Array.isArray(b) ? b : [], [b]), E = a(() => g(T), [T]), D = i(() => u({
-		item: s(T, "0", {}),
-		index: "0"
+var _ = ({ ref: _, className: v = "", children: y, items: b = [], itemKey: x }) => {
+	let { id: S, definition: { label: C } } = e(), w = h(i.sourceType, S), { settings: { previewMode: T } } = s(), E = o(() => Array.isArray(b) ? b : [], [b]), D = o(() => n(E, x), [E, x]), O = a(() => d({
+		item: c(E, "0", {}),
+		index: 0
 	}).reduce((e, t) => [...e, {
 		path: t,
 		name: t
-	}], []), [T]), O = a(() => C ? { runtime: { sources: { [C]: { items: T } } } } : l, [C, T]);
-	return h({
-		id: x,
-		source: C,
-		name: S || `List - ${x}`,
-		fields: D
-	}), /* @__PURE__ */ f(t, {
+	}], []), [E]), k = o(() => w ? { runtime: { sources: { [w]: { items: E } } } } : u, [w, E]);
+	return g({
+		id: S,
+		source: w,
+		name: C || `List - ${S}`,
+		fields: O
+	}), /* @__PURE__ */ p(t, {
 		ref: _,
-		className: p("plitzi-component__controlled-list", v, { "controlled-list--build-mode": !w }),
-		children: [/* @__PURE__ */ d(c, {
+		className: m("plitzi-component__controlled-list", v, { "controlled-list--build-mode": !T }),
+		children: [/* @__PURE__ */ f(l, {
 			inherit: "live",
-			name: `List:${x}`,
-			value: O,
-			children: T.map((e, t) => !y || Array.isArray(y) && y.length === 0 ? /* @__PURE__ */ d("div", {
+			name: `List:${S}`,
+			value: k,
+			children: E.map((e, t) => !y || Array.isArray(y) && y.length === 0 ? /* @__PURE__ */ f("div", {
 				className: "plitzi-component__controlled-list-item controlled-list--empty",
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "controlled-list-item__counter",
 					children: `List Item - ${t + 1}`
 				})
-			}, t) : /* @__PURE__ */ d(r, {
+			}, t) : /* @__PURE__ */ f(r, {
 				index: t,
-				isTemplate: t !== 0 && !w,
+				isTemplate: t !== 0 && !T,
 				record: e,
-				source: C,
+				source: w,
 				children: y
-			}, E[t]))
-		}), !w && T.length === 0 && /* @__PURE__ */ d("div", {
+			}, D[t]))
+		}), !T && E.length === 0 && /* @__PURE__ */ f("div", {
 			className: "controlled-list controlled-list--empty",
 			children: "This list does not contain any items"
 		})]

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.mjs

@@ -8,7 +8,7 @@ import s from "clsx";
 var c = ({ children: c, className: l = "", isTemplate: u = !1, index: d = 0, record: f, source: p = "" }) => {
 	let m = t(), h = n(() => p ? { runtime: { sources: { [p]: {
 		item: f,
-		index: `${d}`
+		index: d
 	} } } } : i, [
 		p,
 		f,

package/dist/elements/structure/List/modes/ListControlled/rowKeys.d.ts

@@ -0,0 +1,10 @@
+/**
+ * What tells one row from another across renders: the record's `itemKey` field when the list names one, else its
+ * `id` — when every record has one and no two share it — else its position.
+ *
+ * A row holds state of its own — a panel it opened, a field it filled, an animation it played on arrival — and React
+ * gives that state to whichever row comes back under the same key. Keyed by position, filtering a list handed a row's
+ * state to the record that moved into its place, and a one-row list showing "the current slide" never mounted again,
+ * so its entrance never replayed.
+ */
+export declare const rowKeys: (items: unknown[], itemKey?: string) => (string | number)[];

package/dist/elements/structure/List/modes/ListControlled/rowKeys.mjs

@@ -0,0 +1,11 @@
+import { get as e } from "@plitzi/plitzi-ui/helpers";
+//#region src/elements/structure/List/modes/ListControlled/rowKeys.ts
+var t = (t, n) => {
+	let r = t.map((t) => {
+		let r = e(t, n);
+		return typeof r == "string" || typeof r == "number" ? `${n}:${String(r)}` : void 0;
+	});
+	if (r.every((e) => e !== void 0) && new Set(r).size === r.length) return r;
+}, n = (e, n) => (n ? t(e, n) : void 0) ?? t(e, "id") ?? e.map((e, t) => t);
+//#endregion
+export { n as rowKeys };

package/dist/elements/structure/ModalContainer/declaration.d.ts

@@ -86,7 +86,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/ModalContainer/declaration.mjs

@@ -69,7 +69,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/ModalContainer/index.d.ts

@@ -80,7 +80,7 @@ declare const ModalContainer: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/ModalContainer/metadataFromText.d.ts

@@ -1 +1,7 @@
+/**
+ * What `openModal('modal', '{{ row.id }}')` hands the modal: a JSON object is its fields, anything else is `content`.
+ *
+ * Numeric ids are the common case, and `'42'` parses as JSON too — as the number. Set as the modal's data whole, it
+ * had no `content` and every binding inside read nothing.
+ */
 export declare const metadataFromText: (metadata: string) => Record<string, unknown>;

package/dist/elements/structure/ModalContainer/metadataFromText.mjs

@@ -1,5 +1,6 @@
+import { isRecord as e } from "@plitzi/sdk-shared/helpers/isRecord";
 //#region src/elements/structure/ModalContainer/metadataFromText.ts
-var e = (e) => typeof e == "object" && !!e && !Array.isArray(e), t = (t) => {
+var t = (t) => {
 	try {
 		let n = JSON.parse(t);
 		if (e(n)) return n;

package/dist/elements/structure/Pagination/declaration.d.ts

@@ -48,7 +48,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/Pagination/declaration.mjs

@@ -38,7 +38,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/Pagination/index.d.ts

@@ -47,7 +47,7 @@ declare const Pagination: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.d.ts

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly ["tabContainerItem"];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.mjs

@@ -19,7 +19,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !1,
 			canMove: !1,
-			canTemplate: !1,
+			canSnippet: !1,
 			itemsAllowed: ["tabContainerItem"],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/TabContainer/TabContainerBody/index.d.ts

@@ -24,7 +24,7 @@ declare const TabContainerBody: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly ["tabContainerItem"];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/TabContainerHeader/declaration.d.ts

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly ["tabContainerItem"];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/TabContainerHeader/declaration.mjs

@@ -19,7 +19,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !1,
 			canMove: !1,
-			canTemplate: !1,
+			canSnippet: !1,
 			itemsAllowed: ["tabContainerItem"],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/TabContainer/TabContainerHeader/index.d.ts

@@ -24,7 +24,7 @@ declare const TabContainerHeader: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly ["tabContainerItem"];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/TabContainerItem/declaration.d.ts

@@ -24,7 +24,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["tabContainerItem", "tabContainerHeader", "tabContainerBody"];
         };

package/dist/elements/structure/TabContainer/TabContainerItem/declaration.mjs

@@ -18,7 +18,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: [
 				"tabContainerItem",

package/dist/elements/structure/TabContainer/TabContainerItem/index.d.ts

@@ -23,7 +23,7 @@ declare const TabContainerItem: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["tabContainerItem", "tabContainerHeader", "tabContainerBody"];
         };

package/dist/elements/structure/TabContainer/declaration.d.ts

@@ -24,7 +24,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly ["tabContainerHeader", "tabContainerBody"];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/TabContainer/declaration.mjs

@@ -18,7 +18,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: ["tabContainerHeader", "tabContainerBody"],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/TabContainer/index.d.ts

@@ -29,7 +29,7 @@ declare const TabContainer: {
                     readonly canSelect: true;
                     readonly canDragDrop: false;
                     readonly canMove: false;
-                    readonly canTemplate: false;
+                    readonly canSnippet: false;
                     readonly itemsAllowed: readonly ["tabContainerItem"];
                     readonly itemsNotAllowed: readonly [];
                 };
@@ -82,7 +82,7 @@ declare const TabContainer: {
                     readonly canSelect: true;
                     readonly canDragDrop: false;
                     readonly canMove: false;
-                    readonly canTemplate: false;
+                    readonly canSnippet: false;
                     readonly itemsAllowed: readonly ["tabContainerItem"];
                     readonly itemsNotAllowed: readonly [];
                 };
@@ -134,7 +134,7 @@ declare const TabContainer: {
                     readonly canSelect: true;
                     readonly canDragDrop: true;
                     readonly canMove: true;
-                    readonly canTemplate: true;
+                    readonly canSnippet: true;
                     readonly itemsAllowed: readonly [];
                     readonly itemsNotAllowed: readonly ["tabContainerItem", "tabContainerHeader", "tabContainerBody"];
                 };
@@ -182,7 +182,7 @@ declare const TabContainer: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly ["tabContainerHeader", "tabContainerBody"];
             readonly itemsNotAllowed: readonly [];
         };