@webiny/react-properties 5.44.1-beta.1 → 5.45.0-beta.0

package/Properties.d.ts

@@ -1,17 +1,26 @@
 import React from "react";
+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;
 }
 interface PropertiesContext {
+    name?: string;
     properties: Property[];
+    getAncestor(name: string): PropertiesContext | undefined;
     getObject<T = unknown>(): T;
     addProperty(property: Property, options?: AddPropertyOptions): void;
     removeProperty(id: string): void;
@@ -19,11 +28,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: ({ onChange, children }: PropertiesProps) => React.JSX.Element;
+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;

package/Properties.js

@@ -1,213 +1,204 @@
-"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("./utils");
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { getUniqueId, toObject } from "./utils.js";
+const PropertiesTargetContext = /*#__PURE__*/createContext(undefined);
+export const ConnectToProperties = ({
+  name,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(PropertiesTargetContext.Provider, {
+    value: name
+  }, children);
+};
 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;
-    }));
+  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) {
-  var existingIndex = properties.findIndex(function (prop) {
-    return prop.id === property.id;
-  });
+  const existingIndex = properties.findIndex(prop => prop.id === property.id);
   if (existingIndex > -1) {
-    var existingProperty = properties[existingIndex];
-    var newProperties = properties.filter(function (p) {
-      return p.id !== property.id;
-    });
-    var _targetIndex = before.endsWith("$first") ? 0 : newProperties.findIndex(function (prop) {
-      return prop.id === before;
-    });
-    return [].concat((0, _toConsumableArray2.default)(newProperties.slice(0, _targetIndex)), [existingProperty], (0, _toConsumableArray2.default)(newProperties.slice(_targetIndex)));
+    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)];
   }
-  var targetIndex = properties.findIndex(function (prop) {
-    return prop.id === before;
-  });
-  return [].concat((0, _toConsumableArray2.default)(properties.slice(0, targetIndex)), [property], (0, _toConsumableArray2.default)(properties.slice(targetIndex)));
+  const targetIndex = properties.findIndex(prop => prop.id === before);
+  return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];
 }
 function putPropertyAfter(properties, property, after) {
-  var existingIndex = properties.findIndex(function (prop) {
-    return prop.id === property.id;
-  });
+  const existingIndex = properties.findIndex(prop => prop.id === property.id);
   if (existingIndex > -1) {
-    var _properties$splice = properties.splice(existingIndex, 1),
-      _properties$splice2 = (0, _slicedToArray2.default)(_properties$splice, 1),
-      removedProperty = _properties$splice2[0];
-    var _targetIndex2 = after.endsWith("$last") ? properties.length - 1 : properties.findIndex(function (prop) {
-      return prop.id === after;
-    });
-    return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _targetIndex2 + 1)), [removedProperty], (0, _toConsumableArray2.default)(properties.slice(_targetIndex2 + 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)];
   }
-  var targetIndex = properties.findIndex(function (prop) {
-    return prop.id === after;
-  });
-  return [].concat((0, _toConsumableArray2.default)(properties.slice(0, targetIndex + 1)), [property], (0, _toConsumableArray2.default)(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) {
-  var index = properties.findIndex(function (prop) {
-    return prop.id === property.id;
-  });
+  const index = properties.findIndex(prop => 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)));
+    return [...properties.slice(0, index), {
+      ...properties[index],
+      ...property
+    }, ...properties.slice(index + 1)];
   }
   return properties;
 }
-var PropertiesContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var Properties = exports.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 () {
+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]);
-  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) {
-          var index = properties.findIndex(function (prop) {
-            return prop.id === property.id;
-          });
-          if (index > -1) {
-            var newProperties = mergeProperty(properties, property);
-            if (options.after) {
-              return putPropertyAfter(newProperties, property, options.after);
-            }
-            if (options.before) {
-              return putPropertyBefore(newProperties, property, options.before);
-            }
-            return newProperties;
-          }
+  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(properties, property, options.after);
+            return putPropertyAfter(newProperties, property, options.after);
           }
           if (options.before) {
-            return putPropertyBefore(properties, property, options.before);
-          }
-          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 putPropertyBefore(newProperties, property, options.before);
           }
-          return properties;
-        });
-      }
-    };
-  }, [properties]);
-  return /*#__PURE__*/_react.default.createElement(PropertiesContext.Provider, {
+          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);
 };
-function useProperties() {
-  var properties = (0, _react.useContext)(PropertiesContext);
+export function useProperties() {
+  const properties = useContext(PropertiesContext);
   if (!properties) {
     throw Error("Properties context provider is missing!");
   }
   return properties;
 }
-var PropertyContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-function useParentProperty() {
-  return (0, _react.useContext)(PropertyContext);
+export function useMaybeProperties() {
+  const properties = useContext(PropertiesContext);
+  if (!properties) {
+    return undefined;
+  }
+  return properties;
 }
-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];
-    });
+export function useAncestorByName(name) {
+  const parent = useMaybeProperties();
+  return useMemo(() => {
+    if (!name || !parent) {
+      return undefined;
+    }
+    if (parent.name === name) {
+      return parent;
+    }
+    return parent.getAncestor(name);
+  }, [name]);
+}
+const PropertyContext = /*#__PURE__*/createContext(undefined);
+export 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;
     }
-    var newParent = property.parent ? properties.find(function (prop) {
-      return prop.id === property.parent;
-    }) : undefined;
-    return newParent ? _matchOrGetAncestor(newParent, params) : undefined;
+    const newParent = property.parent ? properties.find(prop => prop.id === property.parent) : undefined;
+    return newParent ? matchOrGetAncestor(newParent, params) : undefined;
   };
-  return property ? _matchOrGetAncestor(property, params) : undefined;
+  return property ? matchOrGetAncestor(property, params) : undefined;
 }
-var Property = exports.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();
+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 previousValue = useRef(value);
+  const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;
   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?.id || "";
-  var property = {
+  const {
+    addProperty,
+    removeProperty,
+    replaceProperty
+  } = properties;
+  const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
+  const property = {
     id: uniqueId,
-    name: name,
-    value: value,
+    name,
+    value,
     parent: parentId,
-    array: array
+    array
   };
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (remove) {
       removeProperty(uniqueId);
       return;
@@ -216,16 +207,30 @@ var Property = exports.Property = function Property(_ref2) {
       replaceProperty(replace, property);
       return;
     }
-    addProperty(property, {
-      after: after,
-      before: before
+    const $isFirst = before === "$first";
+    const $isLast = after === "$last";
+    addProperty({
+      ...property,
+      $isFirst,
+      $isLast
+    }, {
+      after,
+      before
     });
-    return function () {
+    return () => {
       removeProperty(uniqueId);
     };
   }, []);
+  useEffect(() => {
+    if (previousValue.current !== value) {
+      previousValue.current = value;
+      if (!remove && !replace) {
+        replaceProperty(uniqueId, property);
+      }
+    }
+  }, [value]);
   if (children) {
-    return /*#__PURE__*/_react.default.createElement(PropertyContext.Provider, {
+    return /*#__PURE__*/React.createElement(PropertyContext.Provider, {
       value: property
     }, children);
   }

package/Properties.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","removeByParent","id","properties","filter","prop","parent","reduce","acc","item","putPropertyBefore","property","before","existingIndex","findIndex","existingProperty","newProperties","p","targetIndex","endsWith","concat","_toConsumableArray2","default","slice","putPropertyAfter","after","_properties$splice","splice","_properties$splice2","_slicedToArray2","removedProperty","length","mergeProperty","index","_objectSpread2","PropertiesContext","createContext","undefined","Properties","exports","_ref","onChange","children","_useState","useState","_useState2","setProperties","useEffect","context","useMemo","getObject","toObject","addProperty","options","arguments","removeProperty","replaceProperty","toReplace","createElement","Provider","value","useProperties","useContext","Error","PropertyContext","useParentProperty","useAncestor","params","_useProperties","matchOrGetAncestor","matchedProps","name","Object","keys","newParent","find","Property","_ref2","_ref2$after","_ref2$before","_ref2$replace","replace","_ref2$remove","remove","_ref2$array","array","_ref2$root","root","_ref2$parent","uniqueId","getUniqueId","parentProperty","parentId"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils\";\n\nexport interface Property {\n    id: string;\n    parent: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n    return properties\n        .filter(prop => prop.parent === id)\n        .reduce((acc, item) => {\n            return removeByParent(\n                item.id,\n                acc.filter(prop => prop.id !== item.id)\n            );\n        }, properties);\n}\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n}\n\ninterface PropertiesContext {\n    properties: Property[];\n    getObject<T = unknown>(): T;\n    addProperty(property: Property, options?: AddPropertyOptions): void;\n    removeProperty(id: string): void;\n    replaceProperty(id: string, property: Property): void;\n}\n\nfunction putPropertyBefore(properties: Property[], property: Property, before: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n    if (existingIndex > -1) {\n        const existingProperty = properties[existingIndex];\n        const newProperties = properties.filter(p => p.id !== property.id);\n        const targetIndex = before.endsWith(\"$first\")\n            ? 0\n            : newProperties.findIndex(prop => prop.id === before);\n        return [\n            ...newProperties.slice(0, targetIndex),\n            existingProperty,\n            ...newProperties.slice(targetIndex)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === before);\n\n    return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];\n}\n\nfunction putPropertyAfter(properties: Property[], property: Property, after: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n\n    if (existingIndex > -1) {\n        const [removedProperty] = properties.splice(existingIndex, 1);\n        const targetIndex = after.endsWith(\"$last\")\n            ? properties.length - 1\n            : properties.findIndex(prop => prop.id === after);\n        return [\n            ...properties.slice(0, targetIndex + 1),\n            removedProperty,\n            ...properties.slice(targetIndex + 1)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === after);\n\n    return [\n        ...properties.slice(0, targetIndex + 1),\n        property,\n        ...properties.slice(targetIndex + 1)\n    ];\n}\n\nfunction mergeProperty(properties: Property[], property: Property) {\n    const index = properties.findIndex(prop => prop.id === property.id);\n    if (index > -1) {\n        return [\n            ...properties.slice(0, index),\n            { ...properties[index], ...property },\n            ...properties.slice(index + 1)\n        ];\n    }\n    return properties;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n    onChange?(properties: Property[]): void;\n    children: React.ReactNode;\n}\n\nexport const Properties = ({ onChange, children }: PropertiesProps) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n\n    useEffect(() => {\n        if (onChange) {\n            onChange(properties);\n        }\n    }, [properties]);\n\n    const context: PropertiesContext = useMemo(\n        () => ({\n            properties,\n            getObject<T>() {\n                return toObject(properties) as T;\n            },\n            addProperty(property, options = {}) {\n                setProperties(properties => {\n                    const index = properties.findIndex(prop => prop.id === property.id);\n\n                    if (index > -1) {\n                        const newProperties = mergeProperty(properties, property);\n                        if (options.after) {\n                            return putPropertyAfter(newProperties, property, options.after);\n                        }\n                        if (options.before) {\n                            return putPropertyBefore(newProperties, property, options.before);\n                        }\n\n                        return newProperties;\n                    }\n\n                    if (options.after) {\n                        return putPropertyAfter(properties, property, options.after);\n                    }\n\n                    if (options.before) {\n                        return putPropertyBefore(properties, property, options.before);\n                    }\n\n                    return [...properties, property];\n                });\n            },\n            removeProperty(id) {\n                setProperties(properties => {\n                    return removeByParent(\n                        id,\n                        properties.filter(prop => prop.id !== id)\n                    );\n                });\n            },\n            replaceProperty(id, property) {\n                setProperties(properties => {\n                    const toReplace = properties.findIndex(prop => prop.id === id);\n\n                    if (toReplace > -1) {\n                        // Replace the property and remove all remaining child properties.\n                        return removeByParent(id, [\n                            ...properties.slice(0, toReplace),\n                            property,\n                            ...properties.slice(toReplace + 1)\n                        ]);\n                    }\n                    return properties;\n                });\n            }\n        }),\n        [properties]\n    );\n\n    return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n    const properties = useContext(PropertiesContext);\n    if (!properties) {\n        throw Error(\"Properties context provider is missing!\");\n    }\n\n    return properties;\n}\n\ninterface PropertyProps {\n    id?: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    after?: string;\n    before?: string;\n    replace?: string;\n    remove?: boolean;\n    parent?: string;\n    root?: boolean;\n    children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n    return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n    [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n    const property = useParentProperty();\n    const { properties } = useProperties();\n\n    const matchOrGetAncestor = (\n        property: Property,\n        params: AncestorMatch\n    ): Property | undefined => {\n        const matchedProps = properties\n            .filter(prop => prop.parent === property.id)\n            .filter(prop => prop.name in params && prop.value === params[prop.name]);\n\n        if (matchedProps.length === Object.keys(params).length) {\n            return property;\n        }\n\n        const newParent = property.parent\n            ? properties.find(prop => prop.id === property.parent)\n            : undefined;\n\n        return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n    };\n\n    return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n    id,\n    name,\n    value,\n    children,\n    after = undefined,\n    before = undefined,\n    replace = undefined,\n    remove = false,\n    array = false,\n    root = false,\n    parent = undefined\n}: PropertyProps) => {\n    const uniqueId = useMemo(() => id || getUniqueId(), []);\n    const parentProperty = useParentProperty();\n    const properties = useProperties();\n\n    if (!properties) {\n        throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n    }\n\n    const { addProperty, removeProperty, replaceProperty } = properties;\n    const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n    const property = { id: uniqueId, name, value, parent: parentId, array };\n\n    useEffect(() => {\n        if (remove) {\n            removeProperty(uniqueId);\n            return;\n        }\n\n        if (replace) {\n            replaceProperty(replace, property);\n            return;\n        }\n\n        addProperty(property, { after, before });\n\n        return () => {\n            removeProperty(uniqueId);\n        };\n    }, []);\n\n    if (children) {\n        return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n    }\n\n    return null;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","useState","getUniqueId","toObject","PropertiesTargetContext","undefined","ConnectToProperties","name","children","createElement","Provider","value","removeByParent","id","properties","filter","prop","parent","reduce","acc","item","putPropertyBefore","property","before","existingIndex","findIndex","existingProperty","newProperties","p","targetIndex","endsWith","slice","putPropertyAfter","after","removedProperty","splice","length","mergeProperty","index","PropertiesContext","Properties","onChange","setProperties","useProperties","context","getAncestor","ancestorName","getObject","addProperty","options","removeProperty","replaceProperty","toReplace","Error","useMaybeProperties","useAncestorByName","PropertyContext","useParentProperty","useAncestor","params","matchOrGetAncestor","matchedProps","Object","keys","newParent","find","Property","replace","remove","array","root","targetName","uniqueId","parentProperty","immediateProperties","ancestorByName","previousValue","parentId","$isFirst","$isLast","current"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils.js\";\n\nconst PropertiesTargetContext = createContext<string | undefined>(undefined);\n\nexport interface ConnectToPropertiesProps {\n    name: string;\n    children: React.ReactNode;\n}\n\nexport const ConnectToProperties = ({ name, children }: ConnectToPropertiesProps) => {\n    return (\n        <PropertiesTargetContext.Provider value={name}>{children}</PropertiesTargetContext.Provider>\n    );\n};\n\nexport interface Property {\n    id: string;\n    parent: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    $isFirst?: boolean;\n    $isLast?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n    return properties\n        .filter(prop => prop.parent === id)\n        .reduce((acc, item) => {\n            return removeByParent(\n                item.id,\n                acc.filter(prop => prop.id !== item.id)\n            );\n        }, properties);\n}\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n}\n\ninterface PropertiesContext {\n    name?: string;\n    properties: Property[];\n    getAncestor(name: string): PropertiesContext | undefined;\n    getObject<T = unknown>(): T;\n    addProperty(property: Property, options?: AddPropertyOptions): void;\n    removeProperty(id: string): void;\n    replaceProperty(id: string, property: Property): void;\n}\n\nfunction putPropertyBefore(properties: Property[], property: Property, before: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n    if (existingIndex > -1) {\n        const existingProperty = properties[existingIndex];\n        const newProperties = properties.filter(p => p.id !== property.id);\n        const targetIndex = before.endsWith(\"$first\")\n            ? 0\n            : newProperties.findIndex(prop => prop.id === before);\n        return [\n            ...newProperties.slice(0, targetIndex),\n            existingProperty,\n            ...newProperties.slice(targetIndex)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === before);\n\n    return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];\n}\n\nfunction putPropertyAfter(properties: Property[], property: Property, after: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n\n    if (existingIndex > -1) {\n        const [removedProperty] = properties.splice(existingIndex, 1);\n        const targetIndex = after.endsWith(\"$last\")\n            ? properties.length - 1\n            : properties.findIndex(prop => prop.id === after);\n        return [\n            ...properties.slice(0, targetIndex + 1),\n            removedProperty,\n            ...properties.slice(targetIndex + 1)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === after);\n\n    return [\n        ...properties.slice(0, targetIndex + 1),\n        property,\n        ...properties.slice(targetIndex + 1)\n    ];\n}\n\nfunction mergeProperty(properties: Property[], property: Property) {\n    const index = properties.findIndex(prop => prop.id === property.id);\n    if (index > -1) {\n        return [\n            ...properties.slice(0, index),\n            { ...properties[index], ...property },\n            ...properties.slice(index + 1)\n        ];\n    }\n    return properties;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n    name?: string;\n    onChange?(properties: Property[]): void;\n    children: React.ReactNode;\n}\n\nexport const Properties = ({ name, onChange, children }: PropertiesProps) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    let parent: PropertiesContext;\n\n    try {\n        parent = useProperties();\n    } catch {\n        // Do nothing, if there's no parent.\n    }\n\n    useEffect(() => {\n        if (onChange) {\n            onChange(properties);\n        }\n    }, [properties]);\n\n    const context: PropertiesContext = useMemo(\n        () => ({\n            name,\n            properties,\n            getAncestor(ancestorName: string) {\n                if (!parent) {\n                    return undefined;\n                }\n\n                return parent && parent.name === ancestorName\n                    ? parent\n                    : parent.getAncestor(ancestorName);\n            },\n            getObject<T>() {\n                return toObject(properties) as T;\n            },\n            addProperty(property, options = {}) {\n                setProperties(properties => {\n                    const index = properties.findIndex(prop => prop.id === property.id);\n\n                    if (index > -1) {\n                        const newProperties = mergeProperty(properties, property);\n                        if (options.after) {\n                            return putPropertyAfter(newProperties, property, options.after);\n                        }\n                        if (options.before) {\n                            return putPropertyBefore(newProperties, property, options.before);\n                        }\n\n                        return newProperties;\n                    }\n\n                    if (options.after) {\n                        return putPropertyAfter(properties, property, options.after);\n                    }\n\n                    if (options.before) {\n                        return putPropertyBefore(properties, property, options.before);\n                    }\n\n                    return [...properties, property];\n                });\n            },\n            removeProperty(id) {\n                setProperties(properties => {\n                    return removeByParent(\n                        id,\n                        properties.filter(prop => prop.id !== id)\n                    );\n                });\n            },\n            replaceProperty(id, property) {\n                setProperties(properties => {\n                    const toReplace = properties.findIndex(prop => prop.id === id);\n\n                    if (toReplace > -1) {\n                        // Replace the property and remove all remaining child properties.\n                        return removeByParent(id, [\n                            ...properties.slice(0, toReplace),\n                            property,\n                            ...properties.slice(toReplace + 1)\n                        ]);\n                    }\n                    return properties;\n                });\n            }\n        }),\n        [properties]\n    );\n\n    return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n    const properties = useContext(PropertiesContext);\n    if (!properties) {\n        throw Error(\"Properties context provider is missing!\");\n    }\n\n    return properties;\n}\n\nexport function useMaybeProperties() {\n    const properties = useContext(PropertiesContext);\n    if (!properties) {\n        return undefined;\n    }\n\n    return properties;\n}\n\nexport function useAncestorByName(name: string | undefined) {\n    const parent = useMaybeProperties();\n\n    return useMemo(() => {\n        if (!name || !parent) {\n            return undefined;\n        }\n\n        if (parent.name === name) {\n            return parent;\n        }\n\n        return parent.getAncestor(name);\n    }, [name]);\n}\n\ninterface PropertyProps {\n    id?: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    after?: string;\n    before?: string;\n    replace?: string;\n    remove?: boolean;\n    parent?: string;\n    root?: boolean;\n    children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n    return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n    [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n    const property = useParentProperty();\n    const { properties } = useProperties();\n\n    const matchOrGetAncestor = (\n        property: Property,\n        params: AncestorMatch\n    ): Property | undefined => {\n        const matchedProps = properties\n            .filter(prop => prop.parent === property.id)\n            .filter(prop => prop.name in params && prop.value === params[prop.name]);\n\n        if (matchedProps.length === Object.keys(params).length) {\n            return property;\n        }\n\n        const newParent = property.parent\n            ? properties.find(prop => prop.id === property.parent)\n            : undefined;\n\n        return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n    };\n\n    return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n    id,\n    name,\n    value,\n    children,\n    after = undefined,\n    before = undefined,\n    replace = undefined,\n    remove = false,\n    array = false,\n    root = false,\n    parent = undefined\n}: PropertyProps) => {\n    const targetName = useContext(PropertiesTargetContext);\n    const uniqueId = useMemo(() => id || getUniqueId(), []);\n    const parentProperty = useParentProperty();\n    const immediateProperties = useProperties();\n    const ancestorByName = useAncestorByName(targetName);\n    const previousValue = useRef(value);\n\n    const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;\n\n    if (!properties) {\n        throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n    }\n\n    const { addProperty, removeProperty, replaceProperty } = properties;\n    const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n    const property = { id: uniqueId, name, value, parent: parentId, array };\n\n    useEffect(() => {\n        if (remove) {\n            removeProperty(uniqueId);\n            return;\n        }\n\n        if (replace) {\n            replaceProperty(replace, property);\n            return;\n        }\n\n        const $isFirst = before === \"$first\";\n        const $isLast = after === \"$last\";\n\n        addProperty({ ...property, $isFirst, $isLast }, { after, before });\n\n        return () => {\n            removeProperty(uniqueId);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (previousValue.current !== value) {\n            previousValue.current = value;\n            if (!remove && !replace) {\n                replaceProperty(uniqueId, property);\n            }\n        }\n    }, [value]);\n\n    if (children) {\n        return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n    }\n\n    return null;\n};\n"],"mappings":"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","ignoreList":[]}

package/README.md

@@ -1,65 +1,11 @@
-# React Properties
+# @webiny/react-properties
 
-[![](https://img.shields.io/npm/dw/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
-[![](https://img.shields.io/npm/v/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-A tiny React properties framework, to build dynamic data objects using React components, which can be customized after initial creation. The usage is very similar to how you write XML data structures, but in this case you're using actual React.
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-## Basic Example
+---
 
-```jsx
-import React, { useCallback } from "react";
-import { Properties, Property, toObject } from "@webiny/react-properties";
-
-const View = () => {
-  const onChange = useCallback(properties => {
-    console.log(toObject(properties));
-  }, []);
-
-  return (
-    <Properties onChange={onChange}>
-      <Property name={"group"}>
-        <Property name={"name"} value={"layout"} />
-        <Property name={"label"} value={"Layout"} />
-        <Property name={"toolbar"}>
-          <Property name={"name"} value={"basic"} />
-        </Property>
-      </Property>
-      <Property name={"group"}>
-        <Property name={"name"} value={"heroes"} />
-        <Property name={"label"} value={"Heroes"} />
-        <Property name={"toolbar"}>
-          <Property name={"name"} value={"heroes"} />
-        </Property>
-      </Property>
-    </Properties>
-  );
-};
-```
-
-Output:
-
-```json
-{
-  "group": [
-    {
-      "name": "layout",
-      "label": "Layout",
-      "toolbar": {
-        "name": "basic"
-      }
-    },
-    {
-      "name": "heroes",
-      "label": "Heroes",
-      "toolbar": {
-        "name": "heroes"
-      }
-    }
-  ]
-}
-```
-
-For more examples, check out the test files.
+_This README file is automatically generated during the publish process._

package/createConfigurableComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Property } from "./Properties";
+import type { Property } from "./index.js";
 export interface WithConfigProps {
     children: React.ReactNode;
     onProperties?(properties: Property[]): void;

package/createConfigurableComponent.js

@@ -1,120 +1,106 @@
-"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.createConfigurableComponent = createConfigurableComponent;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce.js"));
-var _reactComposition = require("@webiny/react-composition");
-var _Properties = require("./Properties");
-var _utils = require("./utils");
-var _useDebugConfig = require("./useDebugConfig");
-var createHOC = function createHOC(newChildren) {
-  return function (BaseComponent) {
-    return function ConfigHOC(_ref) {
-      var children = _ref.children;
-      return /*#__PURE__*/_react.default.createElement(BaseComponent, null, newChildren, children);
-    };
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { Properties, toObject } from "./index.js";
+import { useDebugConfig } from "./useDebugConfig.js";
+import debounce from "lodash/debounce.js";
+const createHOC = newChildren => BaseComponent => {
+  return function ConfigHOC({
+    children
+  }) {
+    return /*#__PURE__*/React.createElement(BaseComponent, null, children, newChildren);
   };
 };
-function createConfigurableComponent(name) {
+export function createConfigurableComponent(name) {
   /**
    * This component is used when we want to mount all composed configs.
    */
-  var ConfigApplyPrimary = (0, _reactComposition.makeDecoratable)("".concat(name, "ConfigApply<Primary>"), function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  const ConfigApplyPrimary = makeDecoratable(`${name}ConfigApply<Primary>`, ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   });
-  var ConfigApplySecondary = (0, _reactComposition.makeDecoratable)("".concat(name, "ConfigApply<Secondary>"), function (_ref3) {
-    var children = _ref3.children;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  const ConfigApplySecondary = makeDecoratable(`${name}ConfigApply<Secondary>`, ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   });
 
   /**
    * This component is used to configure the component (it can be mounted many times).
    */
-  var Config = function Config(_ref4) {
-    var _ref4$priority = _ref4.priority,
-      priority = _ref4$priority === void 0 ? "primary" : _ref4$priority,
-      children = _ref4.children;
+  const Config = ({
+    priority = "primary",
+    children
+  }) => {
     if (priority === "primary") {
-      return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+      return /*#__PURE__*/React.createElement(Compose, {
         component: ConfigApplyPrimary,
         with: createHOC(children)
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    return /*#__PURE__*/React.createElement(Compose, {
       component: ConfigApplySecondary,
       with: createHOC(children)
     });
   };
-  var defaultContext = {
+  const defaultContext = {
     properties: []
   };
-  var ViewContext = /*#__PURE__*/_react.default.createContext(defaultContext);
-  var WithConfig = function WithConfig(_ref5) {
-    var onProperties = _ref5.onProperties,
-      children = _ref5.children;
-    var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      properties = _useState2[0],
-      setProperties = _useState2[1];
-    (0, _useDebugConfig.useDebugConfig)(name, properties);
-    var context = {
-      properties: properties
+  const ViewContext = /*#__PURE__*/React.createContext(defaultContext);
+  const WithConfig = ({
+    onProperties,
+    children
+  }) => {
+    const [properties, setProperties] = useState([]);
+    useDebugConfig(name, properties);
+    const context = {
+      properties
     };
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (typeof onProperties === "function") {
         onProperties(properties);
       }
     }, [properties]);
-    var stateUpdater = function stateUpdater(properties) {
+    const stateUpdater = properties => {
       setProperties(properties);
     };
-    return /*#__PURE__*/_react.default.createElement(ViewContext.Provider, {
+    return /*#__PURE__*/React.createElement(ViewContext.Provider, {
       value: context
-    }, /*#__PURE__*/_react.default.createElement(_Properties.Properties, {
+    }, /*#__PURE__*/React.createElement(Properties, {
       onChange: stateUpdater
-    }, /*#__PURE__*/_react.default.createElement(ConfigApplyPrimary, null), /*#__PURE__*/_react.default.createElement(DebounceRenderer, null, /*#__PURE__*/_react.default.createElement(ConfigApplySecondary, null), /*#__PURE__*/_react.default.createElement(DebounceRenderer, null, children))));
+    }, /*#__PURE__*/React.createElement(ConfigApplyPrimary, null), /*#__PURE__*/React.createElement(DebounceRenderer, null, /*#__PURE__*/React.createElement(ConfigApplySecondary, null), /*#__PURE__*/React.createElement(DebounceRenderer, null, children))));
   };
   function useConfig() {
-    var _useContext = (0, _react.useContext)(ViewContext),
-      properties = _useContext.properties;
-    return (0, _react.useMemo)(function () {
-      return (0, _utils.toObject)(properties);
-    }, [properties]);
+    const {
+      properties
+    } = useContext(ViewContext);
+    return useMemo(() => toObject(properties), [properties]);
   }
-  var DebounceRenderer = function DebounceRenderer(_ref6) {
-    var children = _ref6.children;
-    var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      render = _useState4[0],
-      setRender = _useState4[1];
-    var editorConfig = useConfig();
-    var debouncedRender = (0, _react.useMemo)(function () {
-      return (0, _debounce.default)(function () {
+  const DebounceRenderer = ({
+    children
+  }) => {
+    const [render, setRender] = useState(false);
+    const editorConfig = useConfig();
+    const debouncedRender = useMemo(() => {
+      return debounce(() => {
         setRender(true);
       }, 10);
     }, [setRender]);
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (render) {
         return;
       }
       debouncedRender();
-      return function () {
+      return () => {
         debouncedRender.cancel();
       };
     }, [editorConfig]);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, render ? children : null);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, render ? children : null);
   };
   return {
-    WithConfig: WithConfig,
-    Config: Config,
-    useConfig: useConfig
+    WithConfig,
+    Config,
+    useConfig
   };
 }
 

package/createConfigurableComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_reactComposition","_Properties","_utils","_useDebugConfig","createHOC","newChildren","BaseComponent","ConfigHOC","_ref","children","default","createElement","createConfigurableComponent","name","ConfigApplyPrimary","makeDecoratable","concat","_ref2","Fragment","ConfigApplySecondary","_ref3","Config","_ref4","_ref4$priority","priority","Compose","component","with","defaultContext","properties","ViewContext","React","createContext","WithConfig","_ref5","onProperties","_useState","useState","_useState2","_slicedToArray2","setProperties","useDebugConfig","context","useEffect","stateUpdater","Provider","value","Properties","onChange","DebounceRenderer","useConfig","_useContext","useContext","useMemo","toObject","_ref6","_useState3","_useState4","render","setRender","editorConfig","debouncedRender","debounce","cancel"],"sources":["createConfigurableComponent.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types.js\";\nimport type { Property } from \"./Properties\";\nimport { Properties } from \"./Properties\";\nimport { toObject } from \"./utils\";\nimport { useDebugConfig } from \"./useDebugConfig\";\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n    priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n    /**\n     * This component is used when we want to mount all composed configs.\n     */\n    const ConfigApplyPrimary = makeDecoratable(\n        `${name}ConfigApply<Primary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ConfigApplySecondary = makeDecoratable(\n        `${name}ConfigApply<Secondary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    /**\n     * This component is used to configure the component (it can be mounted many times).\n     */\n    const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n        if (priority === \"primary\") {\n            return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n        }\n        return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        properties: Property[];\n    }\n\n    const defaultContext = { properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        const [properties, setProperties] = useState<Property[]>([]);\n        useDebugConfig(name, properties);\n        const context = { properties };\n\n        useEffect(() => {\n            if (typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = (properties: Property[]) => {\n            setProperties(properties);\n        };\n\n        return (\n            <ViewContext.Provider value={context}>\n                <Properties onChange={stateUpdater}>\n                    <ConfigApplyPrimary />\n                    <DebounceRenderer>\n                        <ConfigApplySecondary />\n                        <DebounceRenderer>{children}</DebounceRenderer>\n                    </DebounceRenderer>\n                </Properties>\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    interface Props {\n        children?: React.ReactNode;\n    }\n\n    const DebounceRenderer = ({ children }: Props) => {\n        const [render, setRender] = useState(false);\n        const editorConfig = useConfig();\n\n        const debouncedRender = useMemo(() => {\n            return debounce(() => {\n                setRender(true);\n            }, 10);\n        }, [setRender]);\n\n        useEffect(() => {\n            if (render) {\n                return;\n            }\n\n            debouncedRender();\n\n            return () => {\n                debouncedRender.cancel();\n            };\n        }, [editorConfig]);\n\n        return <>{render ? children : null}</>;\n    };\n\n    return {\n        WithConfig,\n        Config,\n        useConfig\n    };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Compose","makeDecoratable","Properties","toObject","useDebugConfig","debounce","createHOC","newChildren","BaseComponent","ConfigHOC","children","createElement","createConfigurableComponent","name","ConfigApplyPrimary","Fragment","ConfigApplySecondary","Config","priority","component","with","defaultContext","properties","ViewContext","createContext","WithConfig","onProperties","setProperties","context","stateUpdater","Provider","value","onChange","DebounceRenderer","useConfig","render","setRender","editorConfig","debouncedRender","cancel"],"sources":["createConfigurableComponent.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types.js\";\nimport type { Property } from \"~/index.js\";\nimport { Properties, toObject } from \"~/index.js\";\nimport { useDebugConfig } from \"./useDebugConfig.js\";\nimport debounce from \"lodash/debounce.js\";\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {children}\n                    {newChildren}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n    priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n    /**\n     * This component is used when we want to mount all composed configs.\n     */\n    const ConfigApplyPrimary = makeDecoratable(\n        `${name}ConfigApply<Primary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ConfigApplySecondary = makeDecoratable(\n        `${name}ConfigApply<Secondary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    /**\n     * This component is used to configure the component (it can be mounted many times).\n     */\n    const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n        if (priority === \"primary\") {\n            return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n        }\n        return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        properties: Property[];\n    }\n\n    const defaultContext = { properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        const [properties, setProperties] = useState<Property[]>([]);\n        useDebugConfig(name, properties);\n        const context = { properties };\n\n        useEffect(() => {\n            if (typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = (properties: Property[]) => {\n            setProperties(properties);\n        };\n\n        return (\n            <ViewContext.Provider value={context}>\n                <Properties onChange={stateUpdater}>\n                    <ConfigApplyPrimary />\n                    <DebounceRenderer>\n                        <ConfigApplySecondary />\n                        <DebounceRenderer>{children}</DebounceRenderer>\n                    </DebounceRenderer>\n                </Properties>\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    interface Props {\n        children?: React.ReactNode;\n    }\n\n    const DebounceRenderer = ({ children }: Props) => {\n        const [render, setRender] = useState(false);\n        const editorConfig = useConfig();\n\n        const debouncedRender = useMemo(() => {\n            return debounce(() => {\n                setRender(true);\n            }, 10);\n        }, [setRender]);\n\n        useEffect(() => {\n            if (render) {\n                return;\n            }\n\n            debouncedRender();\n\n            return () => {\n                debouncedRender.cancel();\n            };\n        }, [editorConfig]);\n\n        return <>{render ? children : null}</>;\n    };\n\n    return {\n        WithConfig,\n        Config,\n        useConfig\n    };\n}\n"],"mappings":"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","ignoreList":[]}

package/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./utils";
-export * from "./Properties";
-export * from "./useIdGenerator";
-export * from "./createConfigurableComponent";
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";

package/index.js

@@ -1,51 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _utils[key];
-    }
-  });
-});
-var _Properties = require("./Properties");
-Object.keys(_Properties).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Properties[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Properties[key];
-    }
-  });
-});
-var _useIdGenerator = require("./useIdGenerator");
-Object.keys(_useIdGenerator).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useIdGenerator[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _useIdGenerator[key];
-    }
-  });
-});
-var _createConfigurableComponent = require("./createConfigurableComponent");
-Object.keys(_createConfigurableComponent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _createConfigurableComponent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _createConfigurableComponent[key];
-    }
-  });
-});
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Properties","_useIdGenerator","_createConfigurableComponent"],"sources":["index.ts"],"sourcesContent":["export * from \"./utils\";\nexport * from \"./Properties\";\nexport * from \"./useIdGenerator\";\nexport * from \"./createConfigurableComponent\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,WAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,WAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,WAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,WAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,eAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,eAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,eAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,eAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,4BAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,4BAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,4BAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAG,4BAAA,CAAAP,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./utils.js\";\nexport * from \"./Properties.js\";\nexport * from \"./useDebugConfig.js\";\nexport * from \"./useIdGenerator.js\";\nexport * from \"./createConfigurableComponent.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@webiny/react-properties",
-	"version": "5.44.1-beta.1",
+	"version": "5.45.0-beta.0",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -11,23 +12,20 @@
 	"license": "MIT",
 	"dependencies": {
 		"@types/react": "18.2.79",
-		"@webiny/react-composition": "5.44.1-beta.1",
-		"lodash": "4.17.21",
-		"nanoid": "3.3.11",
+		"@webiny/react-composition": "5.45.0-beta.0",
+		"lodash": "4.17.23",
+		"nanoid": "5.1.6",
 		"react": "18.2.0"
 	},
 	"devDependencies": {
 		"@testing-library/react": "15.0.7",
-		"@webiny/project-utils": "5.44.1-beta.1",
-		"prettier": "2.8.8"
+		"@webiny/build-tools": "5.45.0-beta.0",
+		"prettier": "3.6.2",
+		"vitest": "4.0.18"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
-	"gitHead": "ff5f085c417040291d39fdbe5153067f3a23ed86"
+	"gitHead": "b85c33cfbe7c02c130445c918d913ef4b2c09cb2"
 }

package/useDebugConfig.d.ts

@@ -1,4 +1,4 @@
-import { Property } from "./Properties";
+import type { Property } from "./Properties.js";
 declare global {
     interface Window {
         __debugConfigs: Record<string, () => void>;

package/useDebugConfig.js

@@ -1,23 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDebugConfig = useDebugConfig;
-var _react = require("react");
-var _utils = require("./utils");
-function useDebugConfig(name, properties) {
-  (0, _react.useEffect)(function () {
+import { useEffect } from "react";
+import { toObject } from "./utils.js";
+export function useDebugConfig(name, properties) {
+  useEffect(() => {
     if (process.env.NODE_ENV !== "development") {
       return;
     }
-    var configs = window.__debugConfigs ?? {};
-    configs[name] = function () {
-      return console.log((0, _utils.toObject)(properties));
-    };
+    const configs = window.__debugConfigs ?? {};
+    configs[name] = () => console.log(toObject(properties));
     window.__debugConfigs = configs;
-    return function () {
-      var configs = window.__debugConfigs ?? {};
+    return () => {
+      const configs = window.__debugConfigs ?? {};
       delete configs[name];
       window.__debugConfigs = configs;
     };

package/useDebugConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","useDebugConfig","name","properties","useEffect","process","env","NODE_ENV","configs","window","__debugConfigs","console","log","toObject"],"sources":["useDebugConfig.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Property } from \"./Properties\";\nimport { toObject } from \"./utils\";\n\ndeclare global {\n    interface Window {\n        __debugConfigs: Record<string, () => void>;\n    }\n}\n\nexport function useDebugConfig(name: string, properties: Property[]) {\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"development\") {\n            return;\n        }\n\n        const configs = window.__debugConfigs ?? {};\n        configs[name] = () => console.log(toObject(properties));\n        window.__debugConfigs = configs;\n\n        return () => {\n            const configs = window.__debugConfigs ?? {};\n            delete configs[name];\n            window.__debugConfigs = configs;\n        };\n    }, [properties]);\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAQO,SAASE,cAAcA,CAACC,IAAY,EAAEC,UAAsB,EAAE;EACjE,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MACxC;IACJ;IAEA,IAAMC,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;IAC3CF,OAAO,CAACN,IAAI,CAAC,GAAG;MAAA,OAAMS,OAAO,CAACC,GAAG,CAAC,IAAAC,eAAQ,EAACV,UAAU,CAAC,CAAC;IAAA;IACvDM,MAAM,CAACC,cAAc,GAAGF,OAAO;IAE/B,OAAO,YAAM;MACT,IAAMA,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;MAC3C,OAAOF,OAAO,CAACN,IAAI,CAAC;MACpBO,MAAM,CAACC,cAAc,GAAGF,OAAO;IACnC,CAAC;EACL,CAAC,EAAE,CAACL,UAAU,CAAC,CAAC;AACpB","ignoreList":[]}
+{"version":3,"names":["useEffect","toObject","useDebugConfig","name","properties","process","env","NODE_ENV","configs","window","__debugConfigs","console","log"],"sources":["useDebugConfig.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Property } from \"./Properties.js\";\nimport { toObject } from \"./utils.js\";\n\ndeclare global {\n    interface Window {\n        __debugConfigs: Record<string, () => void>;\n    }\n}\n\nexport function useDebugConfig(name: string, properties: Property[]) {\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"development\") {\n            return;\n        }\n\n        const configs = window.__debugConfigs ?? {};\n        configs[name] = () => console.log(toObject(properties));\n        window.__debugConfigs = configs;\n\n        return () => {\n            const configs = window.__debugConfigs ?? {};\n            delete configs[name];\n            window.__debugConfigs = configs;\n        };\n    }, [properties]);\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,QAAQ;AAQjB,OAAO,SAASC,cAAcA,CAACC,IAAY,EAAEC,UAAsB,EAAE;EACjEJ,SAAS,CAAC,MAAM;IACZ,IAAIK,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MACxC;IACJ;IAEA,MAAMC,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;IAC3CF,OAAO,CAACL,IAAI,CAAC,GAAG,MAAMQ,OAAO,CAACC,GAAG,CAACX,QAAQ,CAACG,UAAU,CAAC,CAAC;IACvDK,MAAM,CAACC,cAAc,GAAGF,OAAO;IAE/B,OAAO,MAAM;MACT,MAAMA,OAAO,GAAGC,MAAM,CAACC,cAAc,IAAI,CAAC,CAAC;MAC3C,OAAOF,OAAO,CAACL,IAAI,CAAC;MACpBM,MAAM,CAACC,cAAc,GAAGF,OAAO;IACnC,CAAC;EACL,CAAC,EAAE,CAACJ,UAAU,CAAC,CAAC;AACpB","ignoreList":[]}

package/useIdGenerator.js

@@ -1,18 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIdGenerator = useIdGenerator;
-var _react = require("react");
-var _Properties = require("./Properties");
-function useIdGenerator(name) {
-  var parentProperty = (0, _Properties.useParentProperty)();
-  return (0, _react.useCallback)(function () {
-    for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
-      parts[_key] = arguments[_key];
+import { useCallback } from "react";
+import { useParentProperty } from "./Properties.js";
+const keywords = ["$first", "$last"];
+export function useIdGenerator(name) {
+  const parentProperty = useParentProperty();
+  return useCallback((...parts) => {
+    if (keywords.includes(parts[0])) {
+      return parts[0];
     }
-    return [parentProperty?.id, name].concat(parts).filter(Boolean).join(":");
+    return [parentProperty?.id, name, ...parts].filter(Boolean).join(":");
   }, [name, parentProperty]);
 }
 

package/useIdGenerator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_Properties","useIdGenerator","name","parentProperty","useParentProperty","useCallback","_len","arguments","length","parts","Array","_key","id","concat","filter","Boolean","join"],"sources":["useIdGenerator.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useParentProperty } from \"~/Properties\";\n\nexport function useIdGenerator(name: string) {\n    const parentProperty = useParentProperty();\n\n    return useCallback(\n        (...parts: string[]) => {\n            return [parentProperty?.id, name, ...parts].filter(Boolean).join(\":\");\n        },\n        [name, parentProperty]\n    );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEO,SAASE,cAAcA,CAACC,IAAY,EAAE;EACzC,IAAMC,cAAc,GAAG,IAAAC,6BAAiB,EAAC,CAAC;EAE1C,OAAO,IAAAC,kBAAW,EACd,YAAwB;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAApBC,KAAK,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAALF,KAAK,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IACL,OAAO,CAACR,cAAc,EAAES,EAAE,EAAEV,IAAI,EAAAW,MAAA,CAAKJ,KAAK,EAAEK,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EACzE,CAAC,EACD,CAACd,IAAI,EAAEC,cAAc,CACzB,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["useCallback","useParentProperty","keywords","useIdGenerator","name","parentProperty","parts","includes","id","filter","Boolean","join"],"sources":["useIdGenerator.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useParentProperty } from \"~/Properties.js\";\n\nconst keywords = [\"$first\", \"$last\"];\n\nexport function useIdGenerator(name: string) {\n    const parentProperty = useParentProperty();\n\n    return useCallback(\n        (...parts: string[]) => {\n            if (keywords.includes(parts[0])) {\n                return parts[0];\n            }\n            return [parentProperty?.id, name, ...parts].filter(Boolean).join(\":\");\n        },\n        [name, parentProperty]\n    );\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,iBAAiB;AAE1B,MAAMC,QAAQ,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC;AAEpC,OAAO,SAASC,cAAcA,CAACC,IAAY,EAAE;EACzC,MAAMC,cAAc,GAAGJ,iBAAiB,CAAC,CAAC;EAE1C,OAAOD,WAAW,CACd,CAAC,GAAGM,KAAe,KAAK;IACpB,IAAIJ,QAAQ,CAACK,QAAQ,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;MAC7B,OAAOA,KAAK,CAAC,CAAC,CAAC;IACnB;IACA,OAAO,CAACD,cAAc,EAAEG,EAAE,EAAEJ,IAAI,EAAE,GAAGE,KAAK,CAAC,CAACG,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EACzE,CAAC,EACD,CAACP,IAAI,EAAEC,cAAc,CACzB,CAAC;AACL","ignoreList":[]}

package/utils.d.ts

@@ -1,3 +1,3 @@
-import { Property } from "./Properties";
+import type { Property } from "./Properties.js";
 export declare function toObject<T = unknown>(properties: Property[]): T;
 export declare function getUniqueId(length?: number): string;

package/utils.js

@@ -1,45 +1,46 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getUniqueId = getUniqueId;
-exports.toObject = toObject;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _nanoid = require("nanoid");
-var nanoid = (0, _nanoid.customAlphabet)("1234567890abcdef");
+import { customAlphabet } from "nanoid";
+const nanoid = customAlphabet("1234567890abcdef");
+const sortPropertiesToTheTop = (a, b) => {
+  if (a.$isFirst && b.$isFirst) {
+    return -1;
+  }
+  return Number(b.$isFirst) - Number(a.$isFirst);
+};
+const sortPropertiesToTheBottom = (a, b) => {
+  if (a.$isLast && b.$isLast) {
+    return 1;
+  }
+  return Number(a.$isLast) - Number(b.$isLast);
+};
+const sortProperties = properties => {
+  return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);
+};
 function buildRoots(roots, properties) {
-  var obj = roots.reduce(function (acc, item) {
-    var isArray = item.array === true || roots.filter(function (r) {
-      return r.name === item.name;
-    }).length > 1;
-    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, acc), {}, (0, _defineProperty2.default)({}, item.name, isArray ? [] : {}));
+  const sortedRoots = sortProperties(roots);
+  const obj = sortedRoots.reduce((acc, item) => {
+    const isArray = item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;
+    return {
+      ...acc,
+      [item.name]: isArray ? [] : {}
+    };
   }, {});
-  roots.forEach(function (root) {
-    var isArray = root.array === true || Array.isArray(obj[root.name]);
+  sortedRoots.forEach(root => {
+    const isArray = root.array === true || Array.isArray(obj[root.name]);
     if (root.value !== undefined) {
-      obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [root.value]) : root.value;
+      obj[root.name] = isArray ? [...obj[root.name], root.value] : root.value;
       return;
     }
-    var nextRoots = properties.filter(function (p) {
-      return p.parent === root.id;
-    });
-    var value = buildRoots(nextRoots, properties);
-    obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [value]) : value;
+    const nextRoots = properties.filter(p => p.parent === root.id);
+    const value = buildRoots(nextRoots, properties);
+    obj[root.name] = isArray ? [...obj[root.name], value] : value;
   });
   return obj;
 }
-function toObject(properties) {
-  var roots = properties.filter(function (prop) {
-    return prop.parent === "";
-  });
+export function toObject(properties) {
+  const roots = properties.filter(prop => prop.parent === "");
   return buildRoots(roots, properties);
 }
-function getUniqueId() {
-  var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12;
+export function getUniqueId(length = 12) {
   return nanoid(length);
 }
 

package/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_nanoid","require","nanoid","customAlphabet","buildRoots","roots","properties","obj","reduce","acc","item","isArray","array","filter","r","name","length","_objectSpread3","default","_defineProperty2","forEach","root","Array","value","undefined","concat","_toConsumableArray2","nextRoots","p","parent","id","toObject","prop","getUniqueId","arguments"],"sources":["utils.ts"],"sourcesContent":["import { customAlphabet } from \"nanoid\";\nconst nanoid = customAlphabet(\"1234567890abcdef\");\nimport { Property } from \"./Properties\";\n\nfunction buildRoots(roots: Property[], properties: Property[]) {\n    const obj: Record<string, unknown> = roots.reduce((acc, item) => {\n        const isArray = item.array === true || roots.filter(r => r.name === item.name).length > 1;\n        return { ...acc, [item.name]: isArray ? [] : {} };\n    }, {});\n\n    roots.forEach(root => {\n        const isArray = root.array === true || Array.isArray(obj[root.name]);\n        if (root.value !== undefined) {\n            obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;\n            return;\n        }\n\n        const nextRoots = properties.filter(p => p.parent === root.id);\n        const value = buildRoots(nextRoots, properties);\n        obj[root.name] = isArray ? [...(obj[root.name] as Property[]), value] : value;\n    });\n\n    return obj;\n}\n\nexport function toObject<T = unknown>(properties: Property[]): T {\n    const roots = properties.filter(prop => prop.parent === \"\");\n    return buildRoots(roots, properties) as T;\n}\n\nexport function getUniqueId(length = 12) {\n    return nanoid(length);\n}\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAMC,MAAM,GAAG,IAAAC,sBAAc,EAAC,kBAAkB,CAAC;AAGjD,SAASC,UAAUA,CAACC,KAAiB,EAAEC,UAAsB,EAAE;EAC3D,IAAMC,GAA4B,GAAGF,KAAK,CAACG,MAAM,CAAC,UAACC,GAAG,EAAEC,IAAI,EAAK;IAC7D,IAAMC,OAAO,GAAGD,IAAI,CAACE,KAAK,KAAK,IAAI,IAAIP,KAAK,CAACQ,MAAM,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAI,KAAKL,IAAI,CAACK,IAAI;IAAA,EAAC,CAACC,MAAM,GAAG,CAAC;IACzF,WAAAC,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAAYT,GAAG,WAAAU,gBAAA,CAAAD,OAAA,MAAGR,IAAI,CAACK,IAAI,EAAGJ,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC;EACnD,CAAC,EAAE,CAAC,CAAC,CAAC;EAENN,KAAK,CAACe,OAAO,CAAC,UAAAC,IAAI,EAAI;IAClB,IAAMV,OAAO,GAAGU,IAAI,CAACT,KAAK,KAAK,IAAI,IAAIU,KAAK,CAACX,OAAO,CAACJ,GAAG,CAACc,IAAI,CAACN,IAAI,CAAC,CAAC;IACpE,IAAIM,IAAI,CAACE,KAAK,KAAKC,SAAS,EAAE;MAC1BjB,GAAG,CAACc,IAAI,CAACN,IAAI,CAAC,GAAGJ,OAAO,MAAAc,MAAA,KAAAC,mBAAA,CAAAR,OAAA,EAAQX,GAAG,CAACc,IAAI,CAACN,IAAI,CAAC,IAAiBM,IAAI,CAACE,KAAK,KAAIF,IAAI,CAACE,KAAK;MACvF;IACJ;IAEA,IAAMI,SAAS,GAAGrB,UAAU,CAACO,MAAM,CAAC,UAAAe,CAAC;MAAA,OAAIA,CAAC,CAACC,MAAM,KAAKR,IAAI,CAACS,EAAE;IAAA,EAAC;IAC9D,IAAMP,KAAK,GAAGnB,UAAU,CAACuB,SAAS,EAAErB,UAAU,CAAC;IAC/CC,GAAG,CAACc,IAAI,CAACN,IAAI,CAAC,GAAGJ,OAAO,MAAAc,MAAA,KAAAC,mBAAA,CAAAR,OAAA,EAAQX,GAAG,CAACc,IAAI,CAACN,IAAI,CAAC,IAAiBQ,KAAK,KAAIA,KAAK;EACjF,CAAC,CAAC;EAEF,OAAOhB,GAAG;AACd;AAEO,SAASwB,QAAQA,CAAczB,UAAsB,EAAK;EAC7D,IAAMD,KAAK,GAAGC,UAAU,CAACO,MAAM,CAAC,UAAAmB,IAAI;IAAA,OAAIA,IAAI,CAACH,MAAM,KAAK,EAAE;EAAA,EAAC;EAC3D,OAAOzB,UAAU,CAACC,KAAK,EAAEC,UAAU,CAAC;AACxC;AAEO,SAAS2B,WAAWA,CAAA,EAAc;EAAA,IAAbjB,MAAM,GAAAkB,SAAA,CAAAlB,MAAA,QAAAkB,SAAA,QAAAV,SAAA,GAAAU,SAAA,MAAG,EAAE;EACnC,OAAOhC,MAAM,CAACc,MAAM,CAAC;AACzB","ignoreList":[]}
+{"version":3,"names":["customAlphabet","nanoid","sortPropertiesToTheTop","a","b","$isFirst","Number","sortPropertiesToTheBottom","$isLast","sortProperties","properties","sort","buildRoots","roots","sortedRoots","obj","reduce","acc","item","isArray","array","filter","r","name","length","forEach","root","Array","value","undefined","nextRoots","p","parent","id","toObject","prop","getUniqueId"],"sources":["utils.ts"],"sourcesContent":["import { customAlphabet } from \"nanoid\";\nconst nanoid = customAlphabet(\"1234567890abcdef\");\nimport type { Property } from \"./Properties.js\";\n\nconst sortPropertiesToTheTop = (a: Property, b: Property) => {\n    if (a.$isFirst && b.$isFirst) {\n        return -1;\n    }\n\n    return Number(b.$isFirst) - Number(a.$isFirst);\n};\n\nconst sortPropertiesToTheBottom = (a: Property, b: Property) => {\n    if (a.$isLast && b.$isLast) {\n        return 1;\n    }\n\n    return Number(a.$isLast) - Number(b.$isLast);\n};\n\nconst sortProperties = (properties: Property[]) => {\n    return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);\n};\n\nfunction buildRoots(roots: Property[], properties: Property[]) {\n    const sortedRoots = sortProperties(roots);\n    const obj: Record<string, unknown> = sortedRoots.reduce((acc, item) => {\n        const isArray =\n            item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;\n        return { ...acc, [item.name]: isArray ? [] : {} };\n    }, {});\n\n    sortedRoots.forEach(root => {\n        const isArray = root.array === true || Array.isArray(obj[root.name]);\n        if (root.value !== undefined) {\n            obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;\n            return;\n        }\n\n        const nextRoots = properties.filter(p => p.parent === root.id);\n        const value = buildRoots(nextRoots, properties);\n        obj[root.name] = isArray ? [...(obj[root.name] as Property[]), value] : value;\n    });\n\n    return obj;\n}\n\nexport function toObject<T = unknown>(properties: Property[]): T {\n    const roots = properties.filter(prop => prop.parent === \"\");\n    return buildRoots(roots, properties) as T;\n}\n\nexport function getUniqueId(length = 12) {\n    return nanoid(length);\n}\n"],"mappings":"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","ignoreList":[]}