@webiny/react-properties 0.0.0-unstable.b14eaecf38 → 0.0.0-unstable.b6d7105cee

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,17 +1,28 @@
 import React from "react";
+import { PropertyStore } from "./domain/index.js";
+export interface ConnectToPropertiesProps {
+    name: string;
+    children: React.ReactNode;
+}
+export declare const ConnectToProperties: ({ name, children }: ConnectToPropertiesProps) => React.JSX.Element;
 export interface Property {
     id: string;
     parent: string;
     name: string;
     value?: unknown;
     array?: boolean;
+    $isFirst?: boolean;
+    $isLast?: boolean;
 }
 interface AddPropertyOptions {
     after?: string;
     before?: string;
+    priority?: number;
 }
 interface PropertiesContext {
-    properties: Property[];
+    name?: string;
+    store: PropertyStore;
+    getAncestor(name: string): PropertiesContext | undefined;
     getObject<T = unknown>(): T;
     addProperty(property: Property, options?: AddPropertyOptions): void;
     removeProperty(id: string): void;
@@ -19,10 +30,14 @@ interface PropertiesContext {
 }
 declare const PropertiesContext: React.Context<PropertiesContext | undefined>;
 interface PropertiesProps {
+    name?: string;
     onChange?(properties: Property[]): void;
+    children: React.ReactNode;
 }
-export declare const Properties: React.FC<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;
     name: string;
@@ -34,11 +49,12 @@ interface PropertyProps {
     remove?: boolean;
     parent?: string;
     root?: boolean;
+    children?: React.ReactNode;
 }
 export declare function useParentProperty(): Property | undefined;
 interface AncestorMatch {
     [key: string]: string | boolean | number | null | undefined;
 }
 export declare function useAncestor(params: AncestorMatch): Property | undefined;
-export declare const Property: React.FC<PropertyProps>;
+export declare const Property: ({ id, name, value, children, after, before, replace, remove, array, root, parent }: PropertyProps) => React.JSX.Element | null;
 export {};

package/Properties.js

@@ -1,193 +1,140 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Property = exports.Properties = void 0;
-exports.useAncestor = useAncestor;
-exports.useParentProperty = useParentProperty;
-exports.useProperties = useProperties;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("./utils");
-function removeByParent(id, properties) {
-  return properties.filter(function (prop) {
-    return prop.parent === id;
-  }).reduce(function (acc, item) {
-    return removeByParent(item.id, acc.filter(function (prop) {
-      return prop.id !== item.id;
-    }));
-  }, properties);
-}
-var PropertiesContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var Properties = function Properties(_ref) {
-  var onChange = _ref.onChange,
-    children = _ref.children;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    properties = _useState2[0],
-    setProperties = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (onChange) {
-      onChange(properties);
-    }
-  }, [properties]);
-  var context = (0, _react.useMemo)(function () {
-    return {
-      properties: properties,
-      getObject: function getObject() {
-        return (0, _utils.toObject)(properties);
-      },
-      addProperty: function addProperty(property) {
-        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        setProperties(function (properties) {
-          // If a property with this ID already exists, merge the two properties.
-          var index = properties.findIndex(function (prop) {
-            return prop.id === property.id;
-          });
-          if (index > -1) {
-            return [].concat((0, _toConsumableArray2.default)(properties.slice(0, index)), [(0, _objectSpread2.default)((0, _objectSpread2.default)({}, properties[index]), property)], (0, _toConsumableArray2.default)(properties.slice(index + 1)));
-          }
-          if (options.after) {
-            var _index = properties.findIndex(function (prop) {
-              return prop.id === options.after;
-            });
-            if (_index > -1) {
-              return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _index + 1)), [property], (0, _toConsumableArray2.default)(properties.slice(_index + 1)));
-            }
-          }
-          if (options.before) {
-            var _index2 = properties.findIndex(function (prop) {
-              return prop.id === options.before;
-            });
-            if (_index2 > -1) {
-              return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _index2)), [property], (0, _toConsumableArray2.default)(properties.slice(_index2)));
-            }
-          }
-          return [].concat((0, _toConsumableArray2.default)(properties), [property]);
-        });
-      },
-      removeProperty: function removeProperty(id) {
-        setProperties(function (properties) {
-          return removeByParent(id, properties.filter(function (prop) {
-            return prop.id !== id;
-          }));
-        });
-      },
-      replaceProperty: function replaceProperty(id, property) {
-        setProperties(function (properties) {
-          var toReplace = properties.findIndex(function (prop) {
-            return prop.id === id;
-          });
-          if (toReplace > -1) {
-            // Replace the property and remove all remaining child properties.
-            return removeByParent(id, [].concat((0, _toConsumableArray2.default)(properties.slice(0, toReplace)), [property], (0, _toConsumableArray2.default)(properties.slice(toReplace + 1))));
-          }
-          return properties;
+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);
         });
-      }
-    };
-  }, [properties]);
-  return /*#__PURE__*/_react.default.createElement(PropertiesContext.Provider, {
-    value: context
-  }, children);
+    }, [
+        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);
 };
-exports.Properties = Properties;
 function useProperties() {
-  var properties = (0, _react.useContext)(PropertiesContext);
-  if (!properties) {
-    throw Error("Properties context provider is missing!");
-  }
-  return properties;
+    const context = useContext(PropertiesContext);
+    if (!context) throw Error("Properties context provider is missing!");
+    return context;
+}
+function useMaybeProperties() {
+    return useContext(PropertiesContext);
+}
+function useAncestorByName(name) {
+    const parent = useMaybeProperties();
+    return useMemo(()=>{
+        if (!name || !parent) return;
+        if (parent.name === name) return parent;
+        return parent.getAncestor(name);
+    }, [
+        name
+    ]);
 }
-var PropertyContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const PropertyContext = /*#__PURE__*/ createContext(void 0);
 function useParentProperty() {
-  return (0, _react.useContext)(PropertyContext);
+    return useContext(PropertyContext);
 }
 function useAncestor(params) {
-  var property = useParentProperty();
-  var _useProperties = useProperties(),
-    properties = _useProperties.properties;
-  var matchOrGetAncestor = function matchOrGetAncestor(property, params) {
-    var matchedProps = properties.filter(function (prop) {
-      return prop.parent === property.id;
-    }).filter(function (prop) {
-      return prop.name in params && prop.value === params[prop.name];
-    });
-    if (matchedProps.length === Object.keys(params).length) {
-      return property;
-    }
-    var newParent = property.parent ? properties.find(function (prop) {
-      return prop.id === property.parent;
-    }) : undefined;
-    return newParent ? matchOrGetAncestor(newParent, params) : undefined;
-  };
-  return property ? matchOrGetAncestor(property, params) : undefined;
+    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;
 }
-var Property = function Property(_ref2) {
-  var id = _ref2.id,
-    name = _ref2.name,
-    value = _ref2.value,
-    children = _ref2.children,
-    _ref2$after = _ref2.after,
-    after = _ref2$after === void 0 ? undefined : _ref2$after,
-    _ref2$before = _ref2.before,
-    before = _ref2$before === void 0 ? undefined : _ref2$before,
-    _ref2$replace = _ref2.replace,
-    replace = _ref2$replace === void 0 ? undefined : _ref2$replace,
-    _ref2$remove = _ref2.remove,
-    remove = _ref2$remove === void 0 ? false : _ref2$remove,
-    _ref2$array = _ref2.array,
-    array = _ref2$array === void 0 ? false : _ref2$array,
-    _ref2$root = _ref2.root,
-    root = _ref2$root === void 0 ? false : _ref2$root,
-    _ref2$parent = _ref2.parent,
-    parent = _ref2$parent === void 0 ? undefined : _ref2$parent;
-  var uniqueId = (0, _react.useMemo)(function () {
-    return id || (0, _utils.getUniqueId)();
-  }, []);
-  var parentProperty = useParentProperty();
-  var properties = useProperties();
-  if (!properties) {
-    throw Error("<Properties> provider is missing higher in the hierarchy!");
-  }
-  var addProperty = properties.addProperty,
-    removeProperty = properties.removeProperty,
-    replaceProperty = properties.replaceProperty;
-  var parentId = parent ? parent : root ? "" : (parentProperty === null || parentProperty === void 0 ? void 0 : parentProperty.id) || "";
-  var property = {
-    id: uniqueId,
-    name: name,
-    value: value,
-    parent: parentId,
-    array: array
-  };
-  (0, _react.useEffect)(function () {
-    if (remove) {
-      removeProperty(uniqueId);
-      return;
-    }
-    if (replace) {
-      replaceProperty(replace, property);
-      return;
-    }
-    addProperty(property, {
-      after: after,
-      before: before
-    });
-    return function () {
-      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.default.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;
 };
-exports.Property = Property;
+export { ConnectToProperties, Properties, Property, useAncestor, useAncestorByName, useMaybeProperties, useParentProperty, useProperties };
+
+//# sourceMappingURL=Properties.js.map