@plitzi/sdk-style 0.36.1 → 0.37.0

package/dist/components/StyleInspector/StyleInspector.mjs

@@ -1,201 +1,272 @@
-import e from "../Selector/index.mjs";
-import t from "./Inspector.mjs";
-import { use as n, useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
-import { useBuilderStoreSync as s } from "@plitzi/sdk-shared/store";
-import { get as c, pick as l, set as u } from "@plitzi/plitzi-ui/helpers";
-import { produce as d } from "immer";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { clsx as m } from "clsx";
-import h from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-import g from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
-import _ from "@plitzi/plitzi-ui/Select";
-import v from "@plitzi/plitzi-ui/Select2";
+import { STYLE_STATE_OPTIONS as e, ancestorClasses as t, ancestorConditions as n, ancestorOptions as r, ancestorRemovals as i, unusedAncestors as a } from "./helpers.mjs";
+import o from "../Selector/index.mjs";
+import ee from "./components/AncestorRules/index.mjs";
+import te from "./Inspector.mjs";
+import { use as ne, useCallback as s, useEffect as re, useMemo as c, useState as l } from "react";
+import { useBuilderStore as ie, useBuilderStoreSync as u } from "@plitzi/sdk-shared/store";
+import { get as d, pick as f, set as p } from "@plitzi/plitzi-ui/helpers";
+import { produce as m } from "immer";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { clsx as ae } from "clsx";
+import oe from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import _ from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+import v from "@plitzi/plitzi-ui/Select";
+import y from "@plitzi/plitzi-ui/Select2";
 //#region src/components/StyleInspector/StyleInspector.tsx
-var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "element", componentType: w, styleSelectors: T, styleSelectorsAvailables: E, componentSubTypesAvailables: D, allowStyleSelector: O = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
-	let [N, P] = o(void 0), [F, I] = o("base"), [L, R] = o(void 0), [z, B] = o(void 0);
-	s("styleSelector", F, { enabled: C === "element" }), s("styleVariant", L, { enabled: C === "element" }), s("styleState", z, { enabled: C === "element" });
-	let { builderHandler: V } = n(h), H = a(() => c(T, F, ""), [T, F]), U = a(() => Object.values(l(b ?? {}, S ? [S.definition.type, ...H.split(" ")] : H.split(" "))), [
-		b,
-		S,
-		H
-	]), W = a(() => x ? c(b, x) : void 0, [b, x]), G = a(() => Object.keys(W?.attributes[F]?.variants ?? {}).map((e) => ({
-		label: e,
-		value: e
-	})), [W?.attributes, F]);
-	i(() => {
-		if (I("base"), C !== "element") return;
-		let e = c(T, "base", "").split(" "), t = e[e.length - 1];
-		j?.(t || ""), B(void 0), P(void 0);
-	}, [j, T]), g(() => {
-		if (C === "element") {
-			if (x !== S?.definition.type) {
-				let e = c(T, F, "").split(" ");
+var b = ({ displayMode: b, selectors: x, value: S, element: C, mode: w = "element", componentType: T, styleSelectors: E, styleSelectorsAvailables: D, componentSubTypesAvailables: O, allowStyleSelector: se = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
+	let [ce, N] = l(void 0), [P, F] = l("base"), [I, L] = l(void 0), [R, z] = l(void 0);
+	u("styleSelector", P, { enabled: w === "element" }), u("styleVariant", I, { enabled: w === "element" });
+	let [B, V] = l(void 0);
+	u("styleState", R, { enabled: w === "element" }), u("styleAncestor", B, { enabled: w === "element" });
+	let [[H, U]] = ie(["schema.flat", "style.platform"]), { builderHandler: W } = ne(oe), G = c(() => d(E, P, ""), [E, P]), le = c(() => Object.values(f(x ?? {}, C ? [C.definition.type, ...G.split(" ")] : G.split(" "))), [
+		x,
+		C,
+		G
+	]), K = c(() => S ? d(x, S) : void 0, [x, S]), q = K?.attributes[P]?.ancestors, J = c(() => w === "element" ? t(H, C) : Object.values(x ?? {}).filter((e) => e.type === "class" && e.name !== S).map((e) => e.name).sort((e, t) => e.localeCompare(t)), [
+		C,
+		H,
+		w,
+		x,
+		S
+	]), Y = c(() => r(J, q), [J, q]), X = c(() => n(q), [q]), Z = c(() => K ? a(H, K) : /* @__PURE__ */ new Set(), [H, K]), ue = c(() => {
+		let e = Object.keys(q ?? {}).length;
+		return e ? `When an ancestor is… (${e} set)` : "When an ancestor is…";
+	}, [q]), de = c(() => {
+		let e = K?.attributes[P], t = B ? [...Object.keys(x?.[B]?.attributes.base.variants ?? {}), ...Object.keys(e?.ancestors?.[B]?.variants ?? {})] : Object.keys(e?.variants ?? {});
+		return [...new Set(t)].map((e) => ({
+			label: e,
+			value: e
+		}));
+	}, [
+		K?.attributes,
+		x,
+		B,
+		P
+	]);
+	re(() => {
+		if (F("base"), w !== "element") return;
+		let e = d(E, "base", "").split(" "), t = e[e.length - 1];
+		j?.(t || ""), z(void 0), V(void 0), N(void 0);
+	}, [j, E]), _(() => {
+		if (w === "element") {
+			if (S !== C?.definition.type) {
+				let e = d(E, P, "").split(" ");
 				j?.(e[e.length - 1]);
 			}
-			B(void 0), R(void 0), P(void 0);
+			z(void 0), L(void 0), V(void 0), N(void 0);
 		}
-	}, [F]), g(() => {
-		B(void 0), R(void 0), P(void 0);
-	}, [x]);
-	let K = r((e, t, n) => {
+	}, [P]), _(() => {
+		z(void 0), L(void 0), V(void 0), N(void 0);
+	}, [S]);
+	let fe = s((e, t, n) => {
 		if (t && !n) return;
 		let { name: r, type: i } = e;
-		!t && r !== "" && !b?.[r] ? V("styleAddSelector", y, r, i, void 0, void 0, {
-			styleSelector: F,
-			componentType: i === "element" ? w : void 0
-		}) : t && n && n.name !== r && b?.[n.name] && !b[r] && V("styleAddSelector", y, r, i, void 0, c(b, `${n.name}.attributes.${F}.default`, {}), {
-			styleSelector: F,
-			componentType: i === "element" ? w : void 0
+		!t && r !== "" && !x?.[r] ? W("styleAddSelector", b, r, i, void 0, void 0, {
+			styleSelector: P,
+			componentType: i === "element" ? T : void 0
+		}) : t && n && n.name !== r && x?.[n.name] && !x[r] && W("styleAddSelector", b, r, i, void 0, d(x, `${n.name}.attributes.${P}.default`, {}), {
+			styleSelector: P,
+			componentType: i === "element" ? T : void 0
 		});
 	}, [
-		V,
-		w,
-		y,
+		W,
+		T,
 		b,
-		F
-	]), q = r((e) => {
-		if (!e || x && x === e.name) {
+		x,
+		P
+	]), pe = s((e) => {
+		if (!e || S && S === e.name) {
 			j?.(void 0);
 			return;
 		}
 		j?.(e.name);
-	}, [j, x]), J = r((e) => {
-		S && V("schemaUpdateElement", d(S, (t) => {
-			u(t, `definition.styleSelectors.${F}`, e);
+	}, [j, S]), me = s((e) => {
+		C && W("schemaUpdateElement", m(C, (t) => {
+			p(t, `definition.styleSelectors.${P}`, e);
 		}));
 	}, [
-		S,
-		V,
-		F
-	]), Y = r((e) => {
-		V("styleRemoveSelector", y, e.name);
-	}, [V, y]), X = r((e) => P(e), []), Z = r((e) => {
-		I(e);
-	}, []), Q = r((e) => B(e?.value), []), $ = r((e) => {
-		R(e?.value);
-	}, []), ee = r((e) => {
-		M?.(e.value), z && B(void 0), e.value === L && R(void 0), V("styleUpdateSelector", y, W?.name, void 0, void 0, {
-			styleSelector: F,
+		C,
+		W,
+		P
+	]), he = s((e) => {
+		W("styleRemoveSelector", b, e.name);
+	}, [W, b]), ge = s((e) => N(e), []), _e = s((e) => {
+		F(e);
+	}, []), ve = s((e) => z(e?.value), []), ye = s((e) => {
+		V(e?.value), z(void 0), L(void 0);
+	}, []), be = s((e) => {
+		e.value === B && (V(void 0), z(void 0), L(void 0)), K?.attributes[P]?.ancestors?.[e.value] && W("styleUpdateSelector", b, K.name, void 0, void 0, {
+			styleSelector: P,
+			styleAncestor: e.value,
+			componentType: K.componentType
+		});
+	}, [
+		W,
+		b,
+		K,
+		B,
+		P
+	]), xe = s((e) => {
+		V(e.ancestor), L(e.variant), z(e.state);
+	}, []), Q = s((e) => {
+		if (!K) return;
+		let { ancestor: t, state: n, variant: r } = e;
+		t === B && n === R && r === I && (z(void 0), L(void 0)), W("styleUpdateSelector", b, K.name, void 0, n || r ? void 0 : {}, {
+			styleSelector: P,
+			styleAncestor: t,
+			styleState: n,
+			styleVariant: r,
+			componentType: K.componentType
+		});
+	}, [
+		W,
+		b,
+		K,
+		B,
+		P,
+		R,
+		I
+	]), Se = s(() => {
+		if (K) {
+			B && Z.has(B) && (V(void 0), z(void 0), L(void 0));
+			for (let e of i(U, K.name, Z)) W("styleUpdateSelector", e.displayMode, K.name, void 0, void 0, {
+				styleSelector: e.styleSelector,
+				styleAncestor: e.styleAncestor,
+				componentType: K.componentType
+			});
+		}
+	}, [
+		W,
+		U,
+		K,
+		B,
+		Z
+	]), Ce = s((e) => {
+		L(e?.value);
+	}, []), we = s((e) => {
+		M?.(e.value), R && z(void 0), e.value === I && L(void 0), W("styleUpdateSelector", b, K?.name, void 0, void 0, {
+			styleSelector: P,
 			styleVariant: e.value,
-			styleState: z,
-			componentType: W?.componentType
+			styleAncestor: B,
+			componentType: K?.componentType
 		});
 	}, [
-		V,
-		y,
+		W,
+		b,
 		M,
-		W?.componentType,
-		W?.name,
-		F,
-		z,
-		L
-	]), te = O && (A || k || !!E?.length || !!D?.length);
-	return /* @__PURE__ */ p("div", {
+		K?.componentType,
+		K?.name,
+		P,
+		R,
+		I,
+		B
+	]), $ = A || k || !!D?.length || !!O?.length;
+	return /* @__PURE__ */ g("div", {
 		className: "flex w-full grow flex-col gap-2",
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ g("div", {
 			className: "flex w-full flex-col gap-2 px-1",
-			children: [C === "element" && /* @__PURE__ */ f(e, {
-				className: "min-h-0 w-full",
-				value: H,
-				selectors: b,
-				selector: W,
-				componentType: w,
-				onAdd: K,
-				onChange: J,
-				onRemove: Y,
-				onSelectorSelected: q
-			}), te && /* @__PURE__ */ p("div", {
-				className: m("flex w-full items-center gap-2", { "mt-2": C === "manager" }),
-				children: [
-					!!D?.length && /* @__PURE__ */ f(_, {
-						className: "grow basis-0",
-						size: "xs",
-						value: N,
-						onChange: X,
-						children: D.map((e) => /* @__PURE__ */ f("option", {
-							value: e,
-							children: e
-						}, e))
-					}),
-					E && E.length > 1 && /* @__PURE__ */ f(_, {
-						className: "grow basis-0",
-						size: "xs",
-						onChange: Z,
-						value: F,
-						children: E.map((e) => /* @__PURE__ */ f("option", {
-							value: e,
-							children: e
-						}, e))
-					}),
-					A && /* @__PURE__ */ f("div", {
-						className: "grow basis-0",
-						children: /* @__PURE__ */ f(v, {
+			children: [
+				w === "element" && /* @__PURE__ */ h(o, {
+					className: "min-h-0 w-full",
+					value: G,
+					selectors: x,
+					selector: K,
+					componentType: T,
+					onAdd: fe,
+					onChange: me,
+					onRemove: he,
+					onSelectorSelected: pe
+				}),
+				$ && /* @__PURE__ */ g("div", {
+					className: ae("flex w-full items-center gap-2", { "mt-2": w === "manager" }),
+					children: [
+						!!O?.length && /* @__PURE__ */ h(v, {
 							className: "grow basis-0",
-							value: L,
-							options: G,
-							placeholder: "Variant",
 							size: "xs",
-							allowCreateOptions: !0,
-							allowRemoveOptions: !0,
-							clearable: !0,
-							onChange: $,
-							onRemove: ee
-						})
-					}),
-					k && /* @__PURE__ */ f("div", {
-						className: "grow basis-0",
-						children: /* @__PURE__ */ f(v, {
+							value: ce,
+							onChange: ge,
+							children: O.map((e) => /* @__PURE__ */ h("option", {
+								value: e,
+								children: e
+							}, e))
+						}),
+						se && D && D.length > 1 && /* @__PURE__ */ h(v, {
 							className: "grow basis-0",
-							value: z,
-							options: [
-								{
-									label: "Hover",
-									value: "hover"
-								},
-								{
-									label: "Focus",
-									value: "focus"
-								},
-								{
-									label: "Active",
-									value: "active"
-								},
-								{
-									label: "Disabled",
-									value: "disabled"
-								},
-								{
-									label: "checked",
-									value: "Checked"
-								},
-								{
-									label: "visited",
-									value: "Visited"
-								}
-							],
-							placeholder: "State",
 							size: "xs",
-							clearable: !0,
-							onChange: Q
+							onChange: _e,
+							value: P,
+							children: D.map((e) => /* @__PURE__ */ h("option", {
+								value: e,
+								children: e
+							}, e))
+						}),
+						A && /* @__PURE__ */ h("div", {
+							className: "grow basis-0",
+							children: /* @__PURE__ */ h(y, {
+								className: "grow basis-0",
+								value: I,
+								options: de,
+								placeholder: "Variant",
+								size: "xs",
+								allowCreateOptions: !0,
+								allowRemoveOptions: !0,
+								clearable: !0,
+								onChange: Ce,
+								onRemove: we
+							})
+						}),
+						k && /* @__PURE__ */ h("div", {
+							className: "grow basis-0",
+							children: /* @__PURE__ */ h(y, {
+								className: "grow basis-0",
+								value: R,
+								options: e,
+								placeholder: "State",
+								size: "xs",
+								clearable: !0,
+								onChange: ve
+							})
 						})
-					})
-				]
-			})]
-		}), /* @__PURE__ */ f("div", {
+					]
+				}),
+				$ && k && !!Y.length && /* @__PURE__ */ h(y, {
+					className: "w-full",
+					value: B,
+					options: Y,
+					placeholder: ue,
+					size: "xs",
+					clearable: !0,
+					allowRemoveOptions: !0,
+					onChange: ye,
+					onRemove: be
+				}),
+				k && X.length > 0 && /* @__PURE__ */ h(ee, {
+					conditions: X,
+					unused: Z,
+					activeAncestor: B,
+					activeState: R,
+					activeVariant: I,
+					onSelect: xe,
+					onRemove: Q,
+					onRemoveUnused: Se
+				})
+			]
+		}), /* @__PURE__ */ h("div", {
 			className: "flex grow basis-0 flex-col overflow-auto border-t border-gray-300 dark:border-zinc-700",
-			children: /* @__PURE__ */ f(t, {
-				selectors: U,
-				componentType: w,
-				selector: W,
-				styleSelector: F,
-				styleState: z,
-				styleVariant: L,
-				element: S,
-				displayMode: y,
-				mode: C
+			children: /* @__PURE__ */ h(te, {
+				selectors: le,
+				componentType: T,
+				selector: K,
+				styleSelector: P,
+				styleState: R,
+				styleVariant: I,
+				styleAncestor: B,
+				element: C,
+				displayMode: b,
+				mode: w
 			})
 		})]
 	});
 };
 //#endregion
-export { y as default };
+export { b as default };

package/dist/components/StyleInspector/StyleInspectorContext.d.ts

@@ -9,6 +9,7 @@ export type StyleInspectorContextValue = {
     selector?: StyleItem;
     styleSelector: string;
     styleState?: StyleState;
+    styleAncestor?: string;
     styleVariant?: string;
     displayMode: DisplayMode;
     variables: Record<string, unknown>;

package/dist/components/StyleInspector/StyleInspectorProvider.d.ts

@@ -8,10 +8,11 @@ export type StyleInspectorProviderProps = {
     styleSelector?: string;
     styleState?: StyleState;
     styleVariant?: string;
+    styleAncestor?: string;
     element?: Element;
     inheritData: InheritData;
     displayMode: DisplayMode;
     onChange?: (path?: StyleCategory, values?: StyleObject | StyleValue) => void;
 };
-declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import("react").JSX.Element;
+declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, styleAncestor, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import("react").JSX.Element;
 export default StyleInspectorProvider;

package/dist/components/StyleInspector/StyleInspectorProvider.mjs

@@ -7,79 +7,85 @@ import { get as o, omit as s } from "@plitzi/plitzi-ui/helpers";
 import { jsx as c } from "react/jsx-runtime";
 import { baseDefaultValue as l } from "@plitzi/sdk-shared";
 //#region src/components/StyleInspector/StyleInspectorProvider.tsx
-var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base", styleState: m, styleVariant: h, element: g, inheritData: _, displayMode: v, onChange: y }) => {
-	let b = t({ element: g }), [x = a] = i("runtime.sources.variables"), S = n(() => {
+var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base", styleState: m, styleVariant: h, styleAncestor: g, element: _, inheritData: v, displayMode: y, onChange: b }) => {
+	let x = t({ element: _ }), [S = a] = i("runtime.sources.variables"), C = n(() => {
 		let e;
 		if (f && p && f.attributes[p]) {
 			let t = f.attributes[p];
-			e = m && h ? t.variants?.[h].states?.[m] ?? {} : h ? t.variants?.[h]?.default ?? {} : m ? t.states?.[m] ?? {} : t.default ?? {};
+			if (g) {
+				let n = t.ancestors?.[g], r = h ? n?.variants?.[h] : void 0, i = h ? r : n;
+				e = (m ? i?.states?.[m] : i?.default) ?? {};
+			} else e = m && h ? t.variants?.[h].states?.[m] ?? {} : h ? t.variants?.[h]?.default ?? {} : m ? t.states?.[m] ?? {} : t.default ?? {};
 		} else e = {};
 		return e;
 	}, [
 		f,
 		p,
 		m,
-		h
-	]), C = n((e, t) => {
-		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && o(b, e))) {
-			if (!e && t && typeof t == "object" && (t = s(t, Object.keys(b))), !e && f && typeof t == "object") {
+		h,
+		g
+	]), w = n((e, t) => {
+		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && o(x, e))) {
+			if (!e && t && typeof t == "object" && (t = s(t, Object.keys(x))), !e && f && typeof t == "object") {
 				let e = {
-					...S(),
+					...C(),
 					...t
 				};
 				Object.keys(e).forEach((t) => {
 					e[t] === void 0 && delete e[t];
 				}), t = e;
 			}
-			y?.(e, t);
+			b?.(e, t);
 		}
 	}, [
+		x,
+		C,
 		b,
-		S,
-		y,
 		f
-	]), w = n((e) => Array.isArray(e) ? e.reduce((e, t) => ({
+	]), T = n((e) => Array.isArray(e) ? e.reduce((e, t) => ({
 		...e,
 		[t]: o(l, t)
-	}), {}) : e ? o(l, e) : l, []), T = n((e) => {
+	}), {}) : e ? o(l, e) : l, []), E = n((e) => {
 		if (Array.isArray(e)) {
 			let t = e.reduce((e, t) => ({
 				...e,
 				[t]: void 0
 			}), {});
-			C(void 0, t);
-		} else C(e);
-	}, [C]), E = r(() => ({
+			w(void 0, t);
+		} else w(e);
+	}, [w]), D = r(() => ({
 		componentType: d,
 		selector: f,
 		styleSelector: p,
 		styleState: m,
 		styleVariant: h,
-		displayMode: v,
-		variables: x,
-		inheritData: _.style,
-		bindingData: b,
-		getValues: S,
-		setValue: C,
-		resetValue: T,
-		getDefaultValue: w
+		styleAncestor: g,
+		displayMode: y,
+		variables: S,
+		inheritData: v.style,
+		bindingData: x,
+		getValues: C,
+		setValue: w,
+		resetValue: E,
+		getDefaultValue: T
 	}), [
 		d,
 		f,
 		p,
 		m,
 		h,
-		v,
-		x,
-		_.style,
-		b,
+		g,
+		y,
 		S,
+		v.style,
+		x,
 		C,
-		T,
-		w
+		w,
+		E,
+		T
 	]);
 	return /* @__PURE__ */ c(e, {
-		value: E,
+		value: D,
 		children: u
 	});
 };