@plitzi/sdk-style 0.36.1 → 0.37.0

package/dist/components/StyleInspector/Inspector.mjs

@@ -23,144 +23,149 @@ import T from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
 import E from "@plitzi/plitzi-ui/hooks/useStorage";
 import D from "@plitzi/plitzi-ui/Switch";
 //#region src/components/StyleInspector/Inspector.tsx
-var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleSelector: P = "base", element: F, displayMode: I, mode: L = "element" }) => {
-	let { builderHandler: R } = _(T), [z, B] = E(`builder-state.styleInspector.${L}.collapsedCache`, {}), [V, H] = E(`builder-state.styleInspector.${L}.showAllOptions`, !1), [U, W] = E(`builder-state.styleInspector.${L}.replaceTokens`, !1), G = h({
-		element: F,
+var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleAncestor: P, styleSelector: F = "base", element: I, displayMode: L, mode: R = "element" }) => {
+	let { builderHandler: z } = _(T), [B, V] = E(`builder-state.styleInspector.${R}.collapsedCache`, {}), [H, U] = E(`builder-state.styleInspector.${R}.showAllOptions`, !1), [W, G] = E(`builder-state.styleInspector.${R}.replaceTokens`, !1), K = h({
+		element: I,
 		componentType: k,
 		componentSubType: A,
 		selector: j?.name,
-		styleSelector: P,
+		styleSelector: F,
 		styleState: M,
-		styleVariant: N
-	}), K = v((e, t) => B((n) => ({
+		styleVariant: N,
+		styleAncestor: P
+	}), q = v((e, t) => V((n) => ({
 		...n,
 		[e]: t
-	})), [B]), q = v((e) => H(e.target.checked), [H]), J = v((e) => W(e.target.checked), [W]), Y = v((t, n) => {
+	})), [V]), J = v((e) => U(e.target.checked), [U]), Y = v((e) => G(e.target.checked), [G]), X = v((t, n) => {
 		if (j) {
-			R("styleUpdateSelector", I, j.name, t, n, {
+			z("styleUpdateSelector", L, j.name, t, n, {
 				componentType: j.type === "element" ? k : void 0,
-				styleSelector: P,
+				styleSelector: F,
 				styleState: M,
-				styleVariant: N
+				styleVariant: N,
+				styleAncestor: P
 			});
 			return;
 		}
 		if (!k) return;
-		let r = e(k, P);
-		if (R("styleAddSelector", I, r, "class", t, n, {
-			styleSelector: P,
+		let r = e(k, F);
+		if (z("styleAddSelector", L, r, "class", t, n, {
+			styleSelector: F,
 			styleState: M,
-			styleVariant: N
-		}), !F) return;
-		let i = b(F, `definition.styleSelectors.${P}`);
-		R("schemaUpdateElement", S(F, (e) => {
-			i ? x(e, `definition.styleSelectors.${P}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${P}`, r);
+			styleVariant: N,
+			styleAncestor: P
+		}), !I) return;
+		let i = b(I, `definition.styleSelectors.${F}`);
+		z("schemaUpdateElement", S(I, (e) => {
+			i ? x(e, `definition.styleSelectors.${F}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${F}`, r);
 		}));
 	}, [
-		R,
+		z,
 		k,
+		L,
 		I,
-		F,
 		j,
-		P,
+		F,
 		M,
-		N
-	]), X = y(() => {
-		let e = F?.definition.type;
-		return V || L === "manager" || e === "list" || e === "listItem";
+		N,
+		P
+	]), Z = y(() => {
+		let e = I?.definition.type;
+		return H || R === "manager" || e === "list" || e === "listItem";
 	}, [
-		F?.definition.type,
-		L,
-		V
-	]), Z = y(() => V || L === "manager" || b(G, "parentStyle.display", "block") === "flex", [
-		G,
-		L,
-		V
-	]), Q = y(() => b(G, "parentStyle.flex-direction", "row") === "column", [G]);
+		I?.definition.type,
+		R,
+		H
+	]), Q = y(() => H || R === "manager" || b(K, "parentStyle.display", "block") === "flex", [
+		K,
+		R,
+		H
+	]), $ = y(() => b(K, "parentStyle.flex-direction", "row") === "column", [K]);
 	return /* @__PURE__ */ C(g, {
 		componentType: k,
-		displayMode: I,
-		styleSelector: P,
+		displayMode: L,
+		styleSelector: F,
 		styleState: M,
 		styleVariant: N,
+		styleAncestor: P,
 		selector: j,
-		element: F,
-		inheritData: G,
-		onChange: Y,
+		element: I,
+		inheritData: K,
+		onChange: X,
 		children: /* @__PURE__ */ w("div", {
 			className: "flex grow flex-col justify-between",
 			children: [/* @__PURE__ */ w("div", {
 				className: "flex grow flex-col",
 				children: [
-					X && /* @__PURE__ */ C(o, {
-						replaceTokens: U,
-						isCollapsed: z.list ?? !0,
-						onCollapse: K
+					Z && /* @__PURE__ */ C(o, {
+						replaceTokens: W,
+						isCollapsed: B.list ?? !0,
+						onCollapse: q
 					}),
-					X && /* @__PURE__ */ C(s, {
-						replaceTokens: U,
-						isCollapsed: z.listItem ?? !0,
-						onCollapse: K
+					Z && /* @__PURE__ */ C(s, {
+						replaceTokens: W,
+						isCollapsed: B.listItem ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(r, {
-						replaceTokens: U,
-						isCollapsed: z.display ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.display ?? !0,
+						onCollapse: q
 					}),
-					Z && /* @__PURE__ */ C(i, {
-						replaceTokens: U,
-						isCollapsed: z.displayFlexChild ?? !0,
-						isFlexVertical: Q,
-						onCollapse: K
+					Q && /* @__PURE__ */ C(i, {
+						replaceTokens: W,
+						isCollapsed: B.displayFlexChild ?? !0,
+						isFlexVertical: $,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(f, {
-						replaceTokens: U,
-						isCollapsed: z.spacing ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.spacing ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(d, {
-						replaceTokens: U,
-						isCollapsed: z.size ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.size ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(l, {
-						replaceTokens: U,
-						isCollapsed: z.position ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.position ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(p, {
-						replaceTokens: U,
-						isCollapsed: z.typography ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.typography ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(t, {
-						replaceTokens: U,
-						isCollapsed: z.background ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.background ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(n, {
-						replaceTokens: U,
-						isCollapsed: z.border ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.border ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(a, {
-						replaceTokens: U,
-						isCollapsed: z.effects ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.effects ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(c, {
-						replaceTokens: U,
-						isCollapsed: z.others ?? !0,
-						onCollapse: K
+						replaceTokens: W,
+						isCollapsed: B.others ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(m, {
-						isCollapsed: z.variables ?? !0,
-						onCollapse: K
+						isCollapsed: B.variables ?? !0,
+						onCollapse: q
 					}),
 					/* @__PURE__ */ C(u, {
-						isCollapsed: z.rawStyle ?? !0,
+						isCollapsed: B.rawStyle ?? !0,
 						selectors: O,
-						onCollapse: K
+						onCollapse: q
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
@@ -168,13 +173,13 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 				children: [/* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Replace Tokens",
-					checked: U,
-					onChange: J
-				}), L === "element" && /* @__PURE__ */ C(D, {
+					checked: W,
+					onChange: Y
+				}), R === "element" && /* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Show All Options",
-					checked: V,
-					onChange: q
+					checked: H,
+					onChange: J
 				})]
 			})]
 		})