@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/basic/Dropdown/index.d.ts

@@ -2,145 +2,152 @@ declare const Dropdown: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Dropdown').DropdownProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            popupPlacement: string;
-            openPopup: boolean;
-            backgroundDisabled: boolean;
-            closeOnClickBackground: boolean;
-            closeOnClickPopup: boolean;
-            containerTopOffset: number;
-            containerLeftOffset: number;
-            disabled: boolean;
-        };
-        definition: {
-            label: string;
-            type: string;
-            items: never[];
-            bindings: {};
-            styleSelectors: {
-                base: string;
-                backgroundContainer: string;
-            };
-            initialState: {
-                visibility: boolean;
-            };
-        };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
-        };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
-        };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        'min-height': string;
-                        'min-width': string;
-                        cursor: string;
-                        'user-select': string;
-                    };
-                };
-                backgroundContainer: {
-                    default: {
-                        top: number;
-                        bottom: number;
-                        left: number;
-                        right: number;
-                        position: string;
-                        cursor: string;
-                        'z-index': number;
-                    };
-                };
-            };
-        };
-        settings: {};
-    };
-    initialItems: string[];
     plugins: {
         dropdownPopup: {
             (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup/DropdownPopup').DropdownPopupProps>): import("react").JSX.Element;
             displayName: string;
         } & {
-            type: string;
-            content: {
-                attributes: {};
-                definition: {
-                    label: string;
-                    type: string;
-                    description: string;
-                    items: never[];
-                    bindings: {};
-                    styleSelectors: {
-                        base: string;
+            readonly type: "dropdownPopup";
+            readonly content: {
+                readonly attributes: {};
+                readonly definition: {
+                    readonly label: "Dropdown Popup";
+                    readonly type: "dropdownPopup";
+                    readonly description: "The floating panel revealed by a dropdown.";
+                    readonly items: readonly [];
+                    readonly bindings: {};
+                    readonly styleSelectors: {
+                        readonly base: "";
                     };
-                    initialState: {};
+                    readonly initialState: {};
                 };
-                builder: {
-                    canDelete: boolean;
-                    canSelect: boolean;
-                    canDragDrop: boolean;
-                    canMove: boolean;
-                    canTemplate: boolean;
-                    itemsAllowed: never[];
-                    itemsNotAllowed: never[];
+                readonly builder: {
+                    readonly canDelete: false;
+                    readonly canSelect: true;
+                    readonly canDragDrop: false;
+                    readonly canMove: false;
+                    readonly canTemplate: false;
+                    readonly itemsAllowed: readonly [];
+                    readonly itemsNotAllowed: readonly [];
                 };
-                market: {
-                    category: string;
-                    owner: string;
-                    verified: boolean;
-                    license: string;
-                    website: string;
-                    backgroundColor: string;
-                    icon: string;
+                readonly market: {
+                    readonly category: "basic";
+                    readonly owner: "Plitzi";
+                    readonly verified: true;
+                    readonly license: "MIT";
+                    readonly website: "https://plitzi.com";
+                    readonly backgroundColor: "#4422ee";
+                    readonly icon: "";
                 };
-                defaultStyle: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'background-color': string;
-                                'min-height': string;
-                                'min-width': string;
-                                'padding-right': string;
-                                'padding-bottom': string;
-                                'padding-left': string;
-                                'padding-top': string;
-                                position: string;
-                                display: string;
-                                'flex-direction': string;
-                                'border-top-right-radius': string;
-                                'border-bottom-right-radius': string;
-                                'border-bottom-left-radius': string;
-                                'border-top-left-radius': string;
-                                'box-shadow': string;
-                                'z-index': number;
+                readonly defaultStyle: {
+                    readonly name: "Dropdown Popup";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'background-color': "white";
+                                readonly 'padding-right': "4px";
+                                readonly 'padding-bottom': "4px";
+                                readonly 'padding-left': "4px";
+                                readonly 'padding-top': "4px";
+                                readonly position: "fixed";
+                                readonly display: "flex";
+                                readonly 'flex-direction': "column";
+                                readonly 'border-top-right-radius': "4px";
+                                readonly 'border-bottom-right-radius': "4px";
+                                readonly 'border-bottom-left-radius': "4px";
+                                readonly 'border-top-left-radius': "4px";
+                                readonly 'box-shadow': "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px";
+                                readonly 'z-index': 100;
                             };
                         };
                     };
-                    subTypes: {};
+                    readonly subTypes: {};
+                };
+                readonly settings: {};
+            };
+            readonly initialItems: readonly [];
+        } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+    };
+    type: "dropdown";
+    content: {
+        readonly attributes: {
+            readonly popupPlacement: "bottom";
+            readonly openPopup: false;
+            readonly backgroundDisabled: false;
+            readonly closeOnClickBackground: true;
+            readonly closeOnClickPopup: true;
+            readonly containerTopOffset: 5;
+            readonly containerLeftOffset: 5;
+            readonly disabled: false;
+        };
+        readonly definition: {
+            readonly label: "Dropdown";
+            readonly type: "dropdown";
+            readonly description: "A trigger that toggles an attached popup panel (dropdownPopup) — menus, selects, flyouts.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly backgroundContainer: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-angle-down";
+        };
+        readonly defaultStyle: {
+            readonly name: "Dropdown";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly cursor: "pointer";
+                        readonly 'user-select': "none";
+                    };
+                };
+                readonly backgroundContainer: {
+                    readonly default: {
+                        readonly top: 0;
+                        readonly bottom: 0;
+                        readonly left: 0;
+                        readonly right: 0;
+                        readonly position: "fixed";
+                        readonly cursor: "default";
+                        readonly 'z-index': 50;
+                    };
                 };
-                settings: {};
             };
-            initialItems: never[];
         };
+        readonly settings: {};
     };
+    initialItems: readonly ["dropdownPopup"];
+    __attributes: Partial<{
+        disabled?: boolean | undefined;
+        closeOnClickPopup?: boolean | undefined;
+        popupPlacement?: "left" | "right" | "top" | "bottom" | undefined;
+        openPopup?: boolean | undefined;
+        backgroundDisabled?: boolean | undefined;
+        closeOnClickBackground?: boolean | undefined;
+        containerTopOffset?: number | undefined;
+        containerLeftOffset?: number | undefined;
+    }>;
 };
 export default Dropdown;

package/dist/elements/basic/Dropdown/index.mjs

@@ -1,73 +1,10 @@
-import e from "./Dropdown.mjs";
-import t from "./DropdownPopup/index.mjs";
+import e from "./declaration.mjs";
+import t from "./Dropdown.mjs";
+import n from "./DropdownPopup/index.mjs";
 //#region src/elements/basic/Dropdown/index.ts
-var n = Object.assign(e, {
-	type: "dropdown",
-	content: {
-		attributes: {
-			popupPlacement: "bottom",
-			openPopup: !1,
-			backgroundDisabled: !1,
-			closeOnClickBackground: !0,
-			closeOnClickPopup: !0,
-			containerTopOffset: 5,
-			containerLeftOffset: 5,
-			disabled: !1
-		},
-		definition: {
-			label: "Dropdown",
-			type: "dropdown",
-			items: [],
-			bindings: {},
-			styleSelectors: {
-				base: "",
-				backgroundContainer: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "basic",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-angle-down"
-		},
-		defaultStyle: {
-			name: "Dropdown",
-			displayMode: "desktop",
-			style: {
-				base: { default: {
-					"min-height": "50px",
-					"min-width": "50px",
-					cursor: "pointer",
-					"user-select": "none"
-				} },
-				backgroundContainer: { default: {
-					top: 0,
-					bottom: 0,
-					left: 0,
-					right: 0,
-					position: "fixed",
-					cursor: "default",
-					"z-index": 50
-				} }
-			}
-		},
-		settings: {}
-	},
-	initialItems: ["dropdownPopup"],
-	plugins: { dropdownPopup: t }
+var r = Object.assign(t, {
+	...e,
+	plugins: { dropdownPopup: n }
 });
 //#endregion
-export { n as default };
+export { r as default };

package/dist/elements/basic/Dropdown/useDropdown.mjs

@@ -48,7 +48,7 @@ var a = ({ ref: a, popupRef: o, open: s, placement: c = "bottom", disabled: l =
 		s
 	]);
 	t(() => {
-		if (!(!g || l)) return window.addEventListener("keydown", C), () => {
+		if (g && !l) return window.addEventListener("keydown", C), () => {
 			window.removeEventListener("keydown", C);
 		};
 	}, [

package/dist/elements/basic/Heading/Heading.mjs

@@ -1,16 +1,16 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
 import { use as r, useCallback as i, useMemo as a } from "react";
 import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import l from "clsx";
 import u from "@plitzi/plitzi-ui/ContentEditable";
 //#region src/elements/basic/Heading/Heading.tsx
-var d = ({ ref: n, className: d = "", content: f = "Heading", subType: p = "h1" }) => {
-	let { id: m } = e(), { settings: { previewMode: h }, contexts: { BuilderContext: g } } = o(), _ = g ? r(g) : void 0, v = a(() => typeof f != "string" && typeof f != "number" ? JSON.stringify(f) : !f && f !== "" && !h ? "Heading" : f, [f, h]), y = i((e) => !h && _?.updateElement(m, "content", e), [_?.updateElement, m]);
-	return /* @__PURE__ */ c(t, {
-		ref: n,
+var d = ({ ref: e, className: d = "", content: f = "Heading", subType: p = "h1" }) => {
+	let { id: m } = t(), { settings: { previewMode: h }, contexts: { BuilderContext: g } } = o(), _ = g ? r(g) : void 0, v = a(() => typeof f != "string" && typeof f != "number" ? JSON.stringify(f) : !f && f !== "" && !h ? "Heading" : f, [f, h]), y = i((e) => !h && _?.updateElement(m, "content", e), [_?.updateElement, m]);
+	return /* @__PURE__ */ c(n, {
+		ref: e,
 		tag: h ? p : "div",
 		className: l("plitzi-component__heading", { [`plitzi-component__heading-${p}`]: p }, d),
 		children: [h && v, !h && /* @__PURE__ */ s(u, {
@@ -19,6 +19,6 @@ var d = ({ ref: n, className: d = "", content: f = "Heading", subType: p = "h1"
 			openMode: "doubleClick"
 		})]
 	});
-}, f = n(d);
+}, f = e(d);
 //#endregion
 export { d as Heading, f as default };

package/dist/elements/basic/Heading/declaration.d.ts

@@ -0,0 +1,149 @@
+import { HeadingProps } from './Heading';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type HeadingAttributes = AuthorableAttributes<HeadingProps>;
+declare const declaration: {
+    readonly type: "heading";
+    readonly content: {
+        readonly attributes: {
+            readonly content: "Heading";
+            readonly subType: "h1";
+        };
+        readonly definition: {
+            readonly label: "Heading";
+            readonly type: "heading";
+            readonly description: "A section heading (<h1>–<h6>) for titles and document hierarchy.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-heading";
+        };
+        readonly defaultStyle: {
+            readonly name: "Heading";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+            readonly subTypes: {
+                readonly h1: {
+                    readonly name: "H1 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "38px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "44px";
+                            };
+                        };
+                    };
+                };
+                readonly h2: {
+                    readonly name: "H2 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "32px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "36px";
+                            };
+                        };
+                    };
+                };
+                readonly h3: {
+                    readonly name: "H3 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "24px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "30px";
+                            };
+                        };
+                    };
+                };
+                readonly h4: {
+                    readonly name: "H4 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "18px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "24px";
+                            };
+                        };
+                    };
+                };
+                readonly h5: {
+                    readonly name: "H5 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "14px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "20px";
+                            };
+                        };
+                    };
+                };
+                readonly h6: {
+                    readonly name: "H6 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "12px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "18px";
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    content?: string | undefined;
+    subType?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+}>>;
+export default declaration;

package/dist/elements/basic/Heading/declaration.mjs

@@ -0,0 +1,113 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/basic/Heading/declaration.ts
+var t = e()({
+	type: "heading",
+	content: {
+		attributes: {
+			content: "Heading",
+			subType: "h1"
+		},
+		definition: {
+			label: "Heading",
+			type: "heading",
+			description: "A section heading (<h1>–<h6>) for titles and document hierarchy.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-heading"
+		},
+		defaultStyle: {
+			name: "Heading",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				h1: {
+					name: "H1 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "38px",
+						"font-weight": 700,
+						"line-height": "44px"
+					} } }
+				},
+				h2: {
+					name: "H2 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "32px",
+						"font-weight": 700,
+						"line-height": "36px"
+					} } }
+				},
+				h3: {
+					name: "H3 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "24px",
+						"font-weight": 700,
+						"line-height": "30px"
+					} } }
+				},
+				h4: {
+					name: "H4 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "18px",
+						"font-weight": 700,
+						"line-height": "24px"
+					} } }
+				},
+				h5: {
+					name: "H5 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "14px",
+						"font-weight": 700,
+						"line-height": "20px"
+					} } }
+				},
+				h6: {
+					name: "H6 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "12px",
+						"font-weight": 700,
+						"line-height": "18px"
+					} } }
+				}
+			}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };