@webiny/react-properties 0.0.0-unstable.06b2ede40f → 0.0.0-unstable.0d717d18dd

package/AsyncProperties.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Property } from "./Properties.js";
+interface AsyncPropertiesContextValue {
+    incrementPending(): void;
+    decrementPending(): void;
+}
+export declare function useAsyncProperties(): AsyncPropertiesContextValue | undefined;
+interface AsyncPropertiesProps {
+    name?: string;
+    onChange?(properties: Property[]): void;
+    children: React.ReactNode;
+}
+export declare const AsyncProperties: ({ name, onChange, children }: AsyncPropertiesProps) => React.JSX.Element;
+export {};

package/AsyncProperties.js

@@ -0,0 +1,43 @@
+import react, { createContext, useCallback, useContext, useRef } from "react";
+import { Properties, useProperties } from "./Properties.js";
+const AsyncPropertiesContext = /*#__PURE__*/ createContext(void 0);
+function useAsyncProperties() {
+    return useContext(AsyncPropertiesContext);
+}
+const StoreCapture = ({ storeRef, children })=>{
+    const { store } = useProperties();
+    storeRef.current = store;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, children);
+};
+const AsyncProperties = ({ name, onChange, children })=>{
+    const pendingRef = useRef(0);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const storeRef = useRef(null);
+    const interceptedOnChange = useCallback((properties)=>{
+        if (pendingRef.current > 0) return;
+        onChangeRef.current?.(properties);
+    }, []);
+    const contextValue = useRef({
+        incrementPending () {
+            pendingRef.current++;
+        },
+        decrementPending () {
+            pendingRef.current = Math.max(0, pendingRef.current - 1);
+            if (0 === pendingRef.current) setTimeout(()=>{
+                if (0 === pendingRef.current && storeRef.current) storeRef.current.notify();
+            }, 0);
+        }
+    }).current;
+    return /*#__PURE__*/ react.createElement(AsyncPropertiesContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ react.createElement(Properties, {
+        name: name,
+        onChange: interceptedOnChange
+    }, /*#__PURE__*/ react.createElement(StoreCapture, {
+        storeRef: storeRef
+    }, children)));
+};
+export { AsyncProperties, useAsyncProperties };
+
+//# sourceMappingURL=AsyncProperties.js.map

package/AsyncProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncProperties.js","sources":["../src/AsyncProperties.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useRef } from \"react\";\nimport { Properties, useProperties } from \"./Properties.js\";\nimport type { Property } from \"./Properties.js\";\nimport type { PropertyStore } from \"./domain/index.js\";\n\ninterface AsyncPropertiesContextValue {\n    incrementPending(): void;\n    decrementPending(): void;\n}\n\nconst AsyncPropertiesContext = createContext<AsyncPropertiesContextValue | undefined>(undefined);\n\nexport function useAsyncProperties() {\n    return useContext(AsyncPropertiesContext);\n}\n\ninterface AsyncPropertiesProps {\n    name?: string;\n    onChange?(properties: Property[]): void;\n    children: React.ReactNode;\n}\n\nconst StoreCapture = ({\n    storeRef,\n    children\n}: {\n    storeRef: React.MutableRefObject<PropertyStore | null>;\n    children: React.ReactNode;\n}) => {\n    const { store } = useProperties();\n    storeRef.current = store;\n    return <>{children}</>;\n};\n\nexport const AsyncProperties = ({ name, onChange, children }: AsyncPropertiesProps) => {\n    const pendingRef = useRef(0);\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n    const storeRef = useRef<PropertyStore | null>(null);\n\n    const interceptedOnChange = useCallback((properties: Property[]) => {\n        if (pendingRef.current > 0) {\n            return;\n        }\n        onChangeRef.current?.(properties);\n    }, []);\n\n    const contextValue = useRef<AsyncPropertiesContextValue>({\n        incrementPending() {\n            pendingRef.current++;\n        },\n        decrementPending() {\n            pendingRef.current = Math.max(0, pendingRef.current - 1);\n            if (pendingRef.current === 0) {\n                setTimeout(() => {\n                    if (pendingRef.current === 0 && storeRef.current) {\n                        storeRef.current.notify();\n                    }\n                }, 0);\n            }\n        }\n    }).current;\n\n    return (\n        <AsyncPropertiesContext.Provider value={contextValue}>\n            <Properties name={name} onChange={interceptedOnChange}>\n                <StoreCapture storeRef={storeRef}>{children}</StoreCapture>\n            </Properties>\n        </AsyncPropertiesContext.Provider>\n    );\n};\n"],"names":["AsyncPropertiesContext","createContext","undefined","useAsyncProperties","useContext","StoreCapture","storeRef","children","store","useProperties","AsyncProperties","name","onChange","pendingRef","useRef","onChangeRef","interceptedOnChange","useCallback","properties","contextValue","Math","setTimeout","Properties"],"mappings":";;AAUA,MAAMA,yBAAyB,WAAHA,GAAGC,cAAuDC;AAE/E,SAASC;IACZ,OAAOC,WAAWJ;AACtB;AAQA,MAAMK,eAAe,CAAC,EAClBC,QAAQ,EACRC,QAAQ,EAIX;IACG,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClBH,SAAS,OAAO,GAAGE;IACnB,OAAO,WAAP,GAAO,0CAAGD;AACd;AAEO,MAAMG,kBAAkB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEL,QAAQ,EAAwB;IAC9E,MAAMM,aAAaC,OAAO;IAC1B,MAAMC,cAAcD,OAAOF;IAC3BG,YAAY,OAAO,GAAGH;IACtB,MAAMN,WAAWQ,OAA6B;IAE9C,MAAME,sBAAsBC,YAAY,CAACC;QACrC,IAAIL,WAAW,OAAO,GAAG,GACrB;QAEJE,YAAY,OAAO,GAAGG;IAC1B,GAAG,EAAE;IAEL,MAAMC,eAAeL,OAAoC;QACrD;YACID,WAAW,OAAO;QACtB;QACA;YACIA,WAAW,OAAO,GAAGO,KAAK,GAAG,CAAC,GAAGP,WAAW,OAAO,GAAG;YACtD,IAAIA,AAAuB,MAAvBA,WAAW,OAAO,EAClBQ,WAAW;gBACP,IAAIR,AAAuB,MAAvBA,WAAW,OAAO,IAAUP,SAAS,OAAO,EAC5CA,SAAS,OAAO,CAAC,MAAM;YAE/B,GAAG;QAEX;IACJ,GAAG,OAAO;IAEV,OAAO,WAAP,GACI,oBAACN,uBAAuB,QAAQ;QAAC,OAAOmB;qBACpC,oBAACG,YAAUA;QAAC,MAAMX;QAAM,UAAUK;qBAC9B,oBAACX,cAAYA;QAAC,UAAUC;OAAWC;AAInD"}

package/Await.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface AwaitProps<T> {
+    fn: () => Promise<T>;
+    children: (value: T) => React.ReactNode;
+}
+export declare function Await<T>({ fn, children }: AwaitProps<T>): React.JSX.Element | null;
+export {};

package/Await.js

@@ -0,0 +1,44 @@
+import react, { useEffect, useRef, useState } from "react";
+import { useAsyncProperties } from "./AsyncProperties.js";
+function Await({ fn, children }) {
+    const async = useAsyncProperties();
+    const [result, setResult] = useState(null);
+    const registeredRef = useRef(false);
+    const settledRef = useRef(false);
+    if (!registeredRef.current && async) {
+        registeredRef.current = true;
+        async.incrementPending();
+    }
+    useEffect(()=>{
+        let cancelled = false;
+        fn().then((data)=>{
+            if (!cancelled) {
+                settledRef.current = true;
+                setResult({
+                    data
+                });
+            }
+        }, (error)=>{
+            if (!cancelled) {
+                settledRef.current = true;
+                setResult({
+                    error
+                });
+            }
+        });
+        return ()=>{
+            cancelled = true;
+            if (!settledRef.current && async) async.decrementPending();
+        };
+    }, []);
+    useEffect(()=>{
+        if (null !== result && async) async.decrementPending();
+    }, [
+        result
+    ]);
+    if (result && "data" in result) return /*#__PURE__*/ react.createElement(react.Fragment, null, children(result.data));
+    return null;
+}
+export { Await };
+
+//# sourceMappingURL=Await.js.map

package/Await.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Await.js","sources":["../src/Await.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { useAsyncProperties } from \"./AsyncProperties.js\";\n\ninterface AwaitProps<T> {\n    fn: () => Promise<T>;\n    children: (value: T) => React.ReactNode;\n}\n\nexport function Await<T>({ fn, children }: AwaitProps<T>) {\n    const async = useAsyncProperties();\n    const [result, setResult] = useState<{ data: T } | { error: unknown } | null>(null);\n    const registeredRef = useRef(false);\n    const settledRef = useRef(false);\n\n    if (!registeredRef.current && async) {\n        registeredRef.current = true;\n        async.incrementPending();\n    }\n\n    useEffect(() => {\n        let cancelled = false;\n\n        fn().then(\n            data => {\n                if (!cancelled) {\n                    settledRef.current = true;\n                    setResult({ data });\n                }\n            },\n            error => {\n                if (!cancelled) {\n                    settledRef.current = true;\n                    setResult({ error });\n                }\n            }\n        );\n\n        return () => {\n            cancelled = true;\n            if (!settledRef.current && async) {\n                async.decrementPending();\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (result !== null && async) {\n            async.decrementPending();\n        }\n    }, [result]);\n\n    if (result && \"data\" in result) {\n        return <>{children(result.data)}</>;\n    }\n\n    return null;\n}\n"],"names":["Await","fn","children","async","useAsyncProperties","result","setResult","useState","registeredRef","useRef","settledRef","useEffect","cancelled","data","error"],"mappings":";;AAQO,SAASA,MAAS,EAAEC,EAAE,EAAEC,QAAQ,EAAiB;IACpD,MAAMC,QAAQC;IACd,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAkD;IAC9E,MAAMC,gBAAgBC,OAAO;IAC7B,MAAMC,aAAaD,OAAO;IAE1B,IAAI,CAACD,cAAc,OAAO,IAAIL,OAAO;QACjCK,cAAc,OAAO,GAAG;QACxBL,MAAM,gBAAgB;IAC1B;IAEAQ,UAAU;QACN,IAAIC,YAAY;QAEhBX,KAAK,IAAI,CACLY,CAAAA;YACI,IAAI,CAACD,WAAW;gBACZF,WAAW,OAAO,GAAG;gBACrBJ,UAAU;oBAAEO;gBAAK;YACrB;QACJ,GACAC,CAAAA;YACI,IAAI,CAACF,WAAW;gBACZF,WAAW,OAAO,GAAG;gBACrBJ,UAAU;oBAAEQ;gBAAM;YACtB;QACJ;QAGJ,OAAO;YACHF,YAAY;YACZ,IAAI,CAACF,WAAW,OAAO,IAAIP,OACvBA,MAAM,gBAAgB;QAE9B;IACJ,GAAG,EAAE;IAELQ,UAAU;QACN,IAAIN,AAAW,SAAXA,UAAmBF,OACnBA,MAAM,gBAAgB;IAE9B,GAAG;QAACE;KAAO;IAEX,IAAIA,UAAU,UAAUA,QACpB,OAAO,WAAP,GAAO,0CAAGH,SAASG,OAAO,IAAI;IAGlC,OAAO;AACX"}

package/DevToolsSection.d.ts

@@ -0,0 +1,40 @@
+type DevToolsView = "browse" | "raw";
+interface DevToolsSectionProps {
+    name: string;
+    data: unknown;
+    /**
+     * Group name for the sidebar. Items with the same group appear
+     * under the same header. Defaults to "Sections".
+     *
+     * @example
+     * ```tsx
+     * <DevToolsSection name="Article" group="CMS" data={model} />
+     * <DevToolsSection name="Author" group="CMS" data={author} />
+     * ```
+     */
+    group?: string;
+    /**
+     * Which views to show in the detail panel.
+     * - `"browse"` — split view with root keys on the left, value tree on the right
+     * - `"raw"` — full JSON tree view
+     *
+     * Accepts a single view or an array. First item is the default tab.
+     * @default ["browse", "raw"]
+     */
+    views?: DevToolsView | DevToolsView[];
+}
+/**
+ * Registers a named section in the Webiny DevTools extension.
+ * Renders nothing — purely a data registration side-effect.
+ *
+ * When the component unmounts (e.g., route change), the section
+ * is automatically removed from DevTools.
+ *
+ * @example
+ * ```tsx
+ * <DevToolsSection name="CMS Model" data={model} />
+ * <DevToolsSection name="Article" group="CMS" data={model} views="raw" />
+ * ```
+ */
+export declare function DevToolsSection({ name, data, group, views }: DevToolsSectionProps): null;
+export {};

package/DevToolsSection.js

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { getHook } from "./useDebugConfig.js";
+function DevToolsSection({ name, data, group, views }) {
+    const dataKey = safeStringify(data);
+    useEffect(()=>{
+        if ("development" !== process.env.NODE_ENV) return;
+        const normalizedViews = views ? Array.isArray(views) ? views : [
+            views
+        ] : [
+            "browse",
+            "raw"
+        ];
+        let plainData;
+        try {
+            plainData = JSON.parse(dataKey);
+        } catch  {
+            plainData = data;
+        }
+        const hook = getHook();
+        hook.sections[name] = {
+            data: plainData,
+            group: group || "Sections",
+            views: normalizedViews,
+            updatedAt: Date.now()
+        };
+        hook.revision++;
+        return ()=>{
+            if (window.__WEBINY_DEVTOOLS_HOOK__) {
+                delete window.__WEBINY_DEVTOOLS_HOOK__.sections[name];
+                window.__WEBINY_DEVTOOLS_HOOK__.revision++;
+            }
+        };
+    }, [
+        name,
+        dataKey,
+        group,
+        Array.isArray(views) ? views.join(",") : views
+    ]);
+    return null;
+}
+function safeStringify(value) {
+    try {
+        return JSON.stringify(value, (_key, v)=>{
+            if ("function" == typeof v) return `[Function: ${v.name || "anonymous"}]`;
+            if (void 0 === v) return "[undefined]";
+            return v;
+        });
+    } catch  {
+        return String(value);
+    }
+}
+export { DevToolsSection };
+
+//# sourceMappingURL=DevToolsSection.js.map

package/DevToolsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsSection.js","sources":["../src/DevToolsSection.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { getHook } from \"./useDebugConfig.js\";\n\ntype DevToolsView = \"browse\" | \"raw\";\n\ninterface DevToolsSectionProps {\n    name: string;\n    data: unknown;\n    /**\n     * Group name for the sidebar. Items with the same group appear\n     * under the same header. Defaults to \"Sections\".\n     *\n     * @example\n     * ```tsx\n     * <DevToolsSection name=\"Article\" group=\"CMS\" data={model} />\n     * <DevToolsSection name=\"Author\" group=\"CMS\" data={author} />\n     * ```\n     */\n    group?: string;\n    /**\n     * Which views to show in the detail panel.\n     * - `\"browse\"` — split view with root keys on the left, value tree on the right\n     * - `\"raw\"` — full JSON tree view\n     *\n     * Accepts a single view or an array. First item is the default tab.\n     * @default [\"browse\", \"raw\"]\n     */\n    views?: DevToolsView | DevToolsView[];\n}\n\n/**\n * Registers a named section in the Webiny DevTools extension.\n * Renders nothing — purely a data registration side-effect.\n *\n * When the component unmounts (e.g., route change), the section\n * is automatically removed from DevTools.\n *\n * @example\n * ```tsx\n * <DevToolsSection name=\"CMS Model\" data={model} />\n * <DevToolsSection name=\"Article\" group=\"CMS\" data={model} views=\"raw\" />\n * ```\n */\nexport function DevToolsSection({ name, data, group, views }: DevToolsSectionProps) {\n    // Snapshot the data on every render to get a stable, plain value.\n    // This also ensures that if data is a MobX observable, we capture\n    // the current state as a plain object (no proxies on the hook).\n    const dataKey = safeStringify(data);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"development\") {\n            return;\n        }\n\n        const normalizedViews: DevToolsView[] = views\n            ? Array.isArray(views)\n                ? views\n                : [views]\n            : [\"browse\", \"raw\"];\n\n        let plainData: unknown;\n        try {\n            plainData = JSON.parse(dataKey);\n        } catch {\n            plainData = data;\n        }\n\n        const hook = getHook();\n        hook.sections[name] = {\n            data: plainData,\n            group: group || \"Sections\",\n            views: normalizedViews,\n            updatedAt: Date.now()\n        };\n        hook.revision++;\n\n        return () => {\n            if (window.__WEBINY_DEVTOOLS_HOOK__) {\n                delete window.__WEBINY_DEVTOOLS_HOOK__.sections[name];\n                window.__WEBINY_DEVTOOLS_HOOK__.revision++;\n            }\n        };\n    }, [name, dataKey, group, Array.isArray(views) ? views.join(\",\") : views]);\n\n    return null;\n}\n\nfunction safeStringify(value: unknown): string {\n    try {\n        return JSON.stringify(value, (_key, v) => {\n            if (typeof v === \"function\") {\n                return `[Function: ${v.name || \"anonymous\"}]`;\n            }\n            if (typeof v === \"undefined\") {\n                return \"[undefined]\";\n            }\n            return v;\n        });\n    } catch {\n        return String(value);\n    }\n}\n"],"names":["DevToolsSection","name","data","group","views","dataKey","safeStringify","useEffect","process","normalizedViews","Array","plainData","JSON","hook","getHook","Date","window","value","_key","v","String"],"mappings":";;AA2CO,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAwB;IAI9E,MAAMC,UAAUC,cAAcJ;IAE9BK,UAAU;QACN,IAAIC,AAAyB,kBAAzBA,QAAQ,GAAG,CAAC,QAAQ,EACpB;QAGJ,MAAMC,kBAAkCL,QAClCM,MAAM,OAAO,CAACN,SACVA,QACA;YAACA;SAAM,GACX;YAAC;YAAU;SAAM;QAEvB,IAAIO;QACJ,IAAI;YACAA,YAAYC,KAAK,KAAK,CAACP;QAC3B,EAAE,OAAM;YACJM,YAAYT;QAChB;QAEA,MAAMW,OAAOC;QACbD,KAAK,QAAQ,CAACZ,KAAK,GAAG;YAClB,MAAMU;YACN,OAAOR,SAAS;YAChB,OAAOM;YACP,WAAWM,KAAK,GAAG;QACvB;QACAF,KAAK,QAAQ;QAEb,OAAO;YACH,IAAIG,OAAO,wBAAwB,EAAE;gBACjC,OAAOA,OAAO,wBAAwB,CAAC,QAAQ,CAACf,KAAK;gBACrDe,OAAO,wBAAwB,CAAC,QAAQ;YAC5C;QACJ;IACJ,GAAG;QAACf;QAAMI;QAASF;QAAOO,MAAM,OAAO,CAACN,SAASA,MAAM,IAAI,CAAC,OAAOA;KAAM;IAEzE,OAAO;AACX;AAEA,SAASE,cAAcW,KAAc;IACjC,IAAI;QACA,OAAOL,KAAK,SAAS,CAACK,OAAO,CAACC,MAAMC;YAChC,IAAI,AAAa,cAAb,OAAOA,GACP,OAAO,CAAC,WAAW,EAAEA,EAAE,IAAI,IAAI,YAAY,CAAC,CAAC;YAEjD,IAAI,AAAa,WAANA,GACP,OAAO;YAEX,OAAOA;QACX;IACJ,EAAE,OAAM;QACJ,OAAOC,OAAOH;IAClB;AACJ"}

package/Properties.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { PropertyStore } from "./domain/index.js";
 export interface ConnectToPropertiesProps {
     name: string;
     children: React.ReactNode;
@@ -16,10 +17,11 @@ export interface Property {
 interface AddPropertyOptions {
     after?: string;
     before?: string;
+    priority?: number;
 }
 interface PropertiesContext {
     name?: string;
-    properties: Property[];
+    store: PropertyStore;
     getAncestor(name: string): PropertiesContext | undefined;
     getObject<T = unknown>(): T;
     addProperty(property: Property, options?: AddPropertyOptions): void;
@@ -34,6 +36,7 @@ interface PropertiesProps {
 }
 export declare const Properties: ({ name, onChange, children }: PropertiesProps) => React.JSX.Element;
 export declare function useProperties(): PropertiesContext;
+export declare function useMaybeProperties(): PropertiesContext | undefined;
 export declare function useAncestorByName(name: string | undefined): PropertiesContext | undefined;
 interface PropertyProps {
     id?: string;

package/Properties.js

@@ -1,224 +1,140 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { getUniqueId, toObject } from "./utils";
-const PropertiesTargetContext = /*#__PURE__*/createContext(undefined);
-export const ConnectToProperties = ({
-  name,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(PropertiesTargetContext.Provider, {
-    value: name
-  }, children);
+import react, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { getUniqueId, toObject } from "./utils.js";
+import { PropertyStore } from "./domain/index.js";
+import { usePropertyPriority } from "./PropertyPriority.js";
+const PropertiesTargetContext = /*#__PURE__*/ createContext(void 0);
+const ConnectToProperties = ({ name, children })=>/*#__PURE__*/ react.createElement(PropertiesTargetContext.Provider, {
+        value: name
+    }, children);
+const PropertiesContext = /*#__PURE__*/ createContext(void 0);
+const Properties = ({ name, onChange, children })=>{
+    const storeRef = useRef(null);
+    if (!storeRef.current) storeRef.current = new PropertyStore();
+    const store = storeRef.current;
+    let parent;
+    try {
+        parent = useProperties();
+    } catch  {}
+    useEffect(()=>{
+        if (!onChange) return;
+        return store.subscribe((properties)=>{
+            onChange(properties);
+        });
+    }, [
+        store,
+        onChange
+    ]);
+    const context = useMemo(()=>({
+            name,
+            store,
+            getAncestor (ancestorName) {
+                if (!parent) return;
+                return parent && parent.name === ancestorName ? parent : parent.getAncestor(ancestorName);
+            },
+            getObject () {
+                return toObject(store.allProperties);
+            },
+            addProperty (property, options = {}) {
+                store.addProperty(property, options);
+            },
+            removeProperty (id) {
+                store.removeProperty(id);
+            },
+            replaceProperty (id, property) {
+                store.replaceProperty(id, property);
+            }
+        }), [
+        store
+    ]);
+    return /*#__PURE__*/ react.createElement(PropertiesContext.Provider, {
+        value: context
+    }, children);
 };
-function removeByParent(id, properties) {
-  return properties.filter(prop => prop.parent === id).reduce((acc, item) => {
-    return removeByParent(item.id, acc.filter(prop => prop.id !== item.id));
-  }, properties);
-}
-function putPropertyBefore(properties, property, before) {
-  const existingIndex = properties.findIndex(prop => prop.id === property.id);
-  if (existingIndex > -1) {
-    const existingProperty = properties[existingIndex];
-    const newProperties = properties.filter(p => p.id !== property.id);
-    const targetIndex = before.endsWith("$first") ? 0 : newProperties.findIndex(prop => prop.id === before);
-    return [...newProperties.slice(0, targetIndex), existingProperty, ...newProperties.slice(targetIndex)];
-  }
-  const targetIndex = properties.findIndex(prop => prop.id === before);
-  return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];
+function useProperties() {
+    const context = useContext(PropertiesContext);
+    if (!context) throw Error("Properties context provider is missing!");
+    return context;
 }
-function putPropertyAfter(properties, property, after) {
-  const existingIndex = properties.findIndex(prop => prop.id === property.id);
-  if (existingIndex > -1) {
-    const [removedProperty] = properties.splice(existingIndex, 1);
-    const targetIndex = after.endsWith("$last") ? properties.length - 1 : properties.findIndex(prop => prop.id === after);
-    return [...properties.slice(0, targetIndex + 1), removedProperty, ...properties.slice(targetIndex + 1)];
-  }
-  const targetIndex = properties.findIndex(prop => prop.id === after);
-  return [...properties.slice(0, targetIndex + 1), property, ...properties.slice(targetIndex + 1)];
-}
-function mergeProperty(properties, property) {
-  const index = properties.findIndex(prop => prop.id === property.id);
-  if (index > -1) {
-    return [...properties.slice(0, index), {
-      ...properties[index],
-      ...property
-    }, ...properties.slice(index + 1)];
-  }
-  return properties;
-}
-const PropertiesContext = /*#__PURE__*/createContext(undefined);
-export const Properties = ({
-  name,
-  onChange,
-  children
-}) => {
-  const [properties, setProperties] = useState([]);
-  let parent;
-  try {
-    parent = useProperties();
-  } catch {
-    // Do nothing, if there's no parent.
-  }
-  useEffect(() => {
-    if (onChange) {
-      onChange(properties);
-    }
-  }, [properties]);
-  const context = useMemo(() => ({
-    name,
-    properties,
-    getAncestor(ancestorName) {
-      if (!parent) {
-        return undefined;
-      }
-      return parent && parent.name === ancestorName ? parent : parent.getAncestor(ancestorName);
-    },
-    getObject() {
-      return toObject(properties);
-    },
-    addProperty(property, options = {}) {
-      setProperties(properties => {
-        const index = properties.findIndex(prop => prop.id === property.id);
-        if (index > -1) {
-          const newProperties = mergeProperty(properties, property);
-          if (options.after) {
-            return putPropertyAfter(newProperties, property, options.after);
-          }
-          if (options.before) {
-            return putPropertyBefore(newProperties, property, options.before);
-          }
-          return newProperties;
-        }
-        if (options.after) {
-          return putPropertyAfter(properties, property, options.after);
-        }
-        if (options.before) {
-          return putPropertyBefore(properties, property, options.before);
-        }
-        return [...properties, property];
-      });
-    },
-    removeProperty(id) {
-      setProperties(properties => {
-        return removeByParent(id, properties.filter(prop => prop.id !== id));
-      });
-    },
-    replaceProperty(id, property) {
-      setProperties(properties => {
-        const toReplace = properties.findIndex(prop => prop.id === id);
-        if (toReplace > -1) {
-          // Replace the property and remove all remaining child properties.
-          return removeByParent(id, [...properties.slice(0, toReplace), property, ...properties.slice(toReplace + 1)]);
-        }
-        return properties;
-      });
-    }
-  }), [properties]);
-  return /*#__PURE__*/React.createElement(PropertiesContext.Provider, {
-    value: context
-  }, children);
-};
-export function useProperties() {
-  const properties = useContext(PropertiesContext);
-  if (!properties) {
-    throw Error("Properties context provider is missing!");
-  }
-  return properties;
+function useMaybeProperties() {
+    return useContext(PropertiesContext);
 }
-export function useAncestorByName(name) {
-  const parent = useProperties();
-  return useMemo(() => {
-    if (!name) {
-      return undefined;
-    }
-    if (parent.name === name) {
-      return parent;
-    }
-    return parent.getAncestor(name);
-  }, [name]);
+function useAncestorByName(name) {
+    const parent = useMaybeProperties();
+    return useMemo(()=>{
+        if (!name || !parent) return;
+        if (parent.name === name) return parent;
+        return parent.getAncestor(name);
+    }, [
+        name
+    ]);
 }
-const PropertyContext = /*#__PURE__*/createContext(undefined);
-export function useParentProperty() {
-  return useContext(PropertyContext);
+const PropertyContext = /*#__PURE__*/ createContext(void 0);
+function useParentProperty() {
+    return useContext(PropertyContext);
 }
-export function useAncestor(params) {
-  const property = useParentProperty();
-  const {
-    properties
-  } = useProperties();
-  const matchOrGetAncestor = (property, params) => {
-    const matchedProps = properties.filter(prop => prop.parent === property.id).filter(prop => prop.name in params && prop.value === params[prop.name]);
-    if (matchedProps.length === Object.keys(params).length) {
-      return property;
-    }
-    const newParent = property.parent ? properties.find(prop => prop.id === property.parent) : undefined;
-    return newParent ? matchOrGetAncestor(newParent, params) : undefined;
-  };
-  return property ? matchOrGetAncestor(property, params) : undefined;
+function useAncestor(params) {
+    const property = useParentProperty();
+    const { store } = useProperties();
+    const matchOrGetAncestor = (property, params)=>{
+        const children = store.getChildrenOf(property.id);
+        const matchedProps = children.filter((prop)=>prop.name in params && prop.value === params[prop.name]);
+        if (matchedProps.length === Object.keys(params).length) return property;
+        const newParent = property.parent ? store.getById(property.parent) : void 0;
+        return newParent ? matchOrGetAncestor(newParent, params) : void 0;
+    };
+    return property ? matchOrGetAncestor(property, params) : void 0;
 }
-export const Property = ({
-  id,
-  name,
-  value,
-  children,
-  after = undefined,
-  before = undefined,
-  replace = undefined,
-  remove = false,
-  array = false,
-  root = false,
-  parent = undefined
-}) => {
-  const targetName = useContext(PropertiesTargetContext);
-  const uniqueId = useMemo(() => id || getUniqueId(), []);
-  const parentProperty = useParentProperty();
-  const immediateProperties = useProperties();
-  const ancestorByName = useAncestorByName(targetName);
-  const properties = targetName ? ancestorByName : immediateProperties;
-  if (!properties) {
-    throw Error("<Properties> provider is missing higher in the hierarchy!");
-  }
-  const {
-    addProperty,
-    removeProperty,
-    replaceProperty
-  } = properties;
-  const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
-  const property = {
-    id: uniqueId,
-    name,
-    value,
-    parent: parentId,
-    array
-  };
-  useEffect(() => {
-    if (remove) {
-      removeProperty(uniqueId);
-      return;
-    }
-    if (replace) {
-      replaceProperty(replace, property);
-      return;
-    }
-    const $isFirst = before === "$first";
-    const $isLast = after === "$last";
-    addProperty({
-      ...property,
-      $isFirst,
-      $isLast
-    }, {
-      after,
-      before
-    });
-    return () => {
-      removeProperty(uniqueId);
+const Property = ({ id, name, value, children, after, before, replace, remove = false, array = false, root = false, parent })=>{
+    const targetName = useContext(PropertiesTargetContext);
+    const uniqueId = useMemo(()=>id || getUniqueId(), []);
+    const parentProperty = useParentProperty();
+    const immediateProperties = useProperties();
+    const ancestorByName = useAncestorByName(targetName);
+    const previousValue = useRef(value);
+    const priority = usePropertyPriority();
+    const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;
+    if (!properties) throw Error("<Properties> provider is missing higher in the hierarchy!");
+    const { addProperty, removeProperty, replaceProperty, store: propertyStore } = properties;
+    const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
+    const property = {
+        id: uniqueId,
+        name,
+        value,
+        parent: parentId,
+        array
     };
-  }, []);
-  if (children) {
-    return /*#__PURE__*/React.createElement(PropertyContext.Provider, {
-      value: property
+    if (!remove) propertyStore.registerLookup(property);
+    useEffect(()=>{
+        if (remove) return void removeProperty(uniqueId);
+        if (replace) return void replaceProperty(replace, property);
+        const $isFirst = "$first" === before;
+        const $isLast = "$last" === after;
+        addProperty({
+            ...property,
+            $isFirst,
+            $isLast
+        }, {
+            after,
+            before,
+            priority
+        });
+        return ()=>{
+            removeProperty(uniqueId);
+        };
+    }, []);
+    useEffect(()=>{
+        if (previousValue.current !== value) {
+            previousValue.current = value;
+            if (!remove && !replace) replaceProperty(uniqueId, property);
+        }
+    }, [
+        value
+    ]);
+    if (children) return /*#__PURE__*/ react.createElement(PropertyContext.Provider, {
+        value: property
     }, children);
-  }
-  return null;
+    return null;
 };
+export { ConnectToProperties, Properties, Property, useAncestor, useAncestorByName, useMaybeProperties, useParentProperty, useProperties };
 
 //# sourceMappingURL=Properties.js.map