@measured/puck 0.11.0-canary.f9033e2 → 0.11.0

package/README.md

@@ -234,33 +234,28 @@ The current DropZone implementation has certain rules and limitations:
 3. You can't drag between DropZones that don't share a parent (or _area_)
 4. Your mouse must be directly over a DropZone for a collision to be detected
 
-## Adaptors
+## External fields
 
-Adaptors can be used to import data from a third-party API, such as a headless CMS.
+External fields can be used to import data from a third-party API, such as a headless CMS.
 
 ### Example
 
-The `external` field type enables us to use an adaptor to query data from a third party API:
+The `external` field type enables us to query data from a third party API:
 
 ```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      text: response.json().text,
-    };
-  },
-};
-
 const config = {
   components: {
     HeadingBlock: {
       fields: {
         myData: {
           type: "external",
-          adaptor: myAdaptor,
+          fetchList: async () => {
+            const response = await fetch("https://www.example.com/api");
+
+            return {
+              text: response.json().text,
+            };
+          },
         },
       },
       render: ({ myData }) => {
@@ -271,7 +266,7 @@ const config = {
 };
 ```
 
-When the user interacts with this adaptor, they'll be presented with a list of items to choose from. Once they select an item, the value will be mapped onto the prop. In this case, `myData`.
+When the user interacts with this external field, they'll be presented with a list of items to choose from. Once they select an item, the value will be mapped onto the prop. In this case, `myData`.
 
 ## Dynamic prop resolution
 
@@ -317,29 +312,25 @@ const config = {
 };
 ```
 
-##### Combining with adaptors
+##### Combining with external fields
 
-A more advanced pattern is to combine the `resolveData` method with the adaptors to dynamically fetch data when rendering the component.
+A more advanced pattern is to combine the `resolveData` method with `external` fields to dynamically fetch data when rendering the component.
 
 ```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      id: response.json().id,
-    };
-  },
-};
-
 const config = {
   components: {
     HeadingBlock: {
       fields: {
         myData: {
           type: "external",
-          adaptor: myAdaptor,
+          placeholder: "Select from example.com",
+          fetchList: async () => {
+            const response = await fetch("https://www.example.com/api");
+
+            return {
+              id: response.json().id,
+            };
+          },
         },
         title: {
           type: "text",
@@ -481,14 +472,12 @@ A `Field` represents a user input field shown in the Puck interface.
 
 ### External Fields
 
-External fields can be used to load content from an external content repository, like Strapi.js, using an `Adaptor`.
+External fields can be used to load content from an external content repository, like Strapi.js.
 
 - **type** (`"external"`)
-- **adaptor** (`Adaptor`): Content adaptor responsible for fetching data to show in the table
-  - **name** (`string`): The human-readable name of the adaptor
-  - **fetchList** (`(adaptorParams: object) => object`): Fetch content from a third-party API and return an array
-  - **mapProp** (`(selectedItem: object) => object`): Map the selected item into another shape
-- **adaptorParams** (`object`): Paramaters passed to the adaptor
+- **placeholder** (`string`): A placeholder for the external field button
+- **fetchList** (`() => object`): Fetch content from a third-party API and return an array
+- **mapProp** (`(selectedItem: object) => object`): Map the selected item into another shape
 
 ### Custom Fields
 

package/dist/index.css

@@ -634,13 +634,13 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput_ufl4h_1 {
+._ExternalInput_z7jih_1 {
   font-family: var(--puck-font-stack);
 }
-._ExternalInput-actions_ufl4h_5 {
+._ExternalInput-actions_z7jih_5 {
   display: flex;
 }
-._ExternalInput-button_ufl4h_9 {
+._ExternalInput-button_z7jih_9 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -657,20 +657,20 @@
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput-button_ufl4h_9:hover,
-._ExternalInput-detachButton_ufl4h_28:hover {
+._ExternalInput-button_z7jih_9:hover,
+._ExternalInput-detachButton_z7jih_28:hover {
   cursor: pointer;
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
   z-index: 1;
 }
-._ExternalInput--hasData_ufl4h_35 ._ExternalInput-button_ufl4h_9 {
+._ExternalInput--dataSelected_z7jih_35 ._ExternalInput-button_z7jih_9 {
   color: var(--puck-color-grey-2);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput-detachButton_ufl4h_28 {
+._ExternalInput-detachButton_z7jih_28 {
   border: 1px solid var(--puck-color-grey-8);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -683,54 +683,87 @@
   padding: 8px 12px;
   margin-left: -1px;
 }
-._ExternalInput-masthead_ufl4h_56 {
+._ExternalInputModal_z7jih_56 {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-height: 90vh;
+}
+._ExternalInputModal-masthead_z7jih_63 {
   background-color: white;
   padding: 32px 24px;
 }
-._ExternalInput-modalTableWrapper_ufl4h_61 {
-  overflow-x: scroll;
-  overflow-y: scroll;
+._ExternalInputModal-tableWrapper_z7jih_68 {
+  overflow-x: auto;
+  overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInput-table_ufl4h_67 {
+._ExternalInputModal-table_z7jih_68 {
+  border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
   position: relative;
+  z-index: 0;
 }
-._ExternalInput-table_ufl4h_67 thead {
+._ExternalInputModal-thead_z7jih_82 {
   position: sticky;
   top: 0;
+  z-index: 1;
 }
-._ExternalInput-table_ufl4h_67 th {
+._ExternalInputModal-th_z7jih_82 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
-._ExternalInput-table_ufl4h_67 td {
+._ExternalInputModal-td_z7jih_96 {
+  font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
-._ExternalInput-table_ufl4h_67 tr:nth-of-type(n) {
+._ExternalInputModal-tr_z7jih_101:nth-of-type(n) {
   background-color: white;
 }
-._ExternalInput-table_ufl4h_67 tr:nth-of-type(2n) {
+._ExternalInputModal-tr_z7jih_101:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
-._ExternalInput-table_ufl4h_67 tr td:first-of-type {
+._ExternalInputModal-tr_z7jih_101 ._ExternalInputModal-td_z7jih_96:first-of-type {
   font-weight: 500;
 }
-._ExternalInput-table_ufl4h_67 tbody tr:hover {
+._ExternalInputModal-tbody_z7jih_113 ._ExternalInputModal-tr_z7jih_101:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
-._ExternalInput-table_ufl4h_67 tbody tr:hover td:first-of-type {
+._ExternalInputModal-tbody_z7jih_113 ._ExternalInputModal-tr_z7jih_101:hover ._ExternalInputModal-td_z7jih_96:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
+._ExternalInputModal-tableWrapper_z7jih_68 {
+  display: none;
+}
+._ExternalInputModal--hasData_z7jih_132 ._ExternalInputModal-tableWrapper_z7jih_68 {
+  display: block;
+}
+._ExternalInputModal-loadingBanner_z7jih_136 {
+  display: none;
+  background-color: white;
+  padding: 64px;
+  align-items: center;
+  justify-content: center;
+}
+._ExternalInputModal--isLoading_z7jih_144 ._ExternalInputModal-loadingBanner_z7jih_136 {
+  display: flex;
+}
+._ExternalInputModal-noContentBanner_z7jih_148 {
+  display: none;
+}
+._ExternalInputModal--loaded_z7jih_152:not(._ExternalInputModal--hasData_z7jih_132) ._ExternalInputModal-noContentBanner_z7jih_148 {
+  display: block;
+  padding: 24px;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
 ._Modal_hx2u6_1 {
@@ -761,41 +794,40 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
-._Heading_7sjz7_1 {
+._Heading_1bvy5_1 {
   display: block;
   color: var(--puck-color-black);
   font-family: var(--puck-font-stack);
   font-weight: 700;
   margin: 0;
-  word-break: break-word;
 }
-._Heading_7sjz7_1 b {
+._Heading_1bvy5_1 b {
   font-weight: 700;
 }
-._Heading--xxxxl_7sjz7_14 {
+._Heading--xxxxl_1bvy5_13 {
   font-size: var(--puck-font-size-xxxxl);
   letter-spacing: 0.08ch;
   font-weight: 800;
 }
-._Heading--xxxl_7sjz7_20 {
+._Heading--xxxl_1bvy5_19 {
   font-size: var(--puck-font-size-xxxl);
 }
-._Heading--xxl_7sjz7_24 {
+._Heading--xxl_1bvy5_23 {
   font-size: var(--puck-font-size-xxl);
 }
-._Heading--xl_7sjz7_28 {
+._Heading--xl_1bvy5_27 {
   font-size: var(--puck-font-size-xl);
 }
-._Heading--l_7sjz7_32 {
+._Heading--l_1bvy5_31 {
   font-size: var(--puck-font-size-l);
 }
-._Heading--m_7sjz7_36 {
+._Heading--m_1bvy5_35 {
   font-size: var(--puck-font-size-m);
 }
-._Heading--s_7sjz7_40 {
+._Heading--s_1bvy5_39 {
   font-size: var(--puck-font-size-s);
 }
-._Heading--xs_7sjz7_44 {
+._Heading--xs_1bvy5_43 {
   font-size: var(--puck-font-size-xs);
 }
 

package/dist/index.d.ts

@@ -8,11 +8,6 @@ type ItemSelector = {
     zone?: string;
 };
 
-type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
-    name: string;
-    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
-    mapProp?: (value: TableShape) => PropShape;
-};
 type WithPuckProps<Props> = Props & {
     id: string;
 };
@@ -41,16 +36,33 @@ type ArrayField<Props extends {
     defaultItemProps?: Props[0];
     getItemSummary?: (item: Props[0], index?: number) => string;
 };
-type ExternalField<Props extends {
+type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
+    name: string;
+    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
+    mapProp?: (value: TableShape) => PropShape;
+};
+type ExternalFieldWithAdaptor<Props extends {
     [key: string]: any;
 } = {
     [key: string]: any;
 }> = BaseField & {
     type: "external";
+    placeholder?: string;
     adaptor: Adaptor<any, any, Props>;
     adaptorParams?: object;
     getItemSummary: (item: Props, index?: number) => string;
 };
+type ExternalField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "external";
+    placeholder?: string;
+    fetchList: () => Promise<any[] | null>;
+    mapProp?: (value: any) => Props;
+    getItemSummary: (item: Props, index?: number) => string;
+};
 type CustomField<Props extends {
     [key: string]: any;
 } = {
@@ -69,7 +81,7 @@ type Field<Props extends {
     [key: string]: any;
 } = {
     [key: string]: any;
-}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | CustomField;
+}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
 type DefaultRootProps = {
     title?: string;
     [key: string]: any;
@@ -362,4 +374,4 @@ declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }:
     className?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppState, ArrayField, ArrayState, BaseData, BaseField, Button, ComponentConfig, ComponentData, Config, Content, CustomField, Data, DefaultComponentProps, DefaultRootProps, DefaultRootRenderProps, DropZone, DropZoneProvider, ExternalField, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, RootData, RootDataWithProps, RootDataWithoutProps, SelectField, TextField, UiState, dropZoneContext, resolveAllData };
+export { Adaptor, AppState, ArrayField, ArrayState, BaseData, BaseField, Button, ComponentConfig, ComponentData, Config, Content, CustomField, Data, DefaultComponentProps, DefaultRootProps, DefaultRootRenderProps, DropZone, DropZoneProvider, ExternalField, ExternalFieldWithAdaptor, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, RootData, RootDataWithProps, RootDataWithoutProps, SelectField, TextField, UiState, dropZoneContext, resolveAllData };

package/dist/index.js

@@ -32372,7 +32372,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -32382,6 +32382,9 @@ init_react_import();
 init_react_import();
 var styles_module_default3 = { "Input": "_Input_1kw16_1", "Input-label": "_Input-label_1kw16_27", "Input-labelIcon": "_Input-labelIcon_1kw16_34", "Input-disabledIcon": "_Input-disabledIcon_1kw16_40", "Input-input": "_Input-input_1kw16_45", "Input--readOnly": "_Input--readOnly_1kw16_66", "Input-radioGroupItems": "_Input-radioGroupItems_1kw16_78", "Input-radio": "_Input-radio_1kw16_78", "Input-radioInner": "_Input-radioInner_1kw16_95", "Input-radioInput": "_Input-radioInput_1kw16_117" };
 
+// components/InputOrGroup/index.tsx
+var import_react31 = require("react");
+
 // components/InputOrGroup/fields/index.tsx
 init_react_import();
 
@@ -32701,6 +32704,7 @@ var DefaultField = ({
 
 // components/InputOrGroup/fields/ExternalField/index.tsx
 init_react_import();
+var import_react30 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
@@ -32708,7 +32712,7 @@ var import_react29 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput": "_ExternalInput_ufl4h_1", "ExternalInput-actions": "_ExternalInput-actions_ufl4h_5", "ExternalInput-button": "_ExternalInput-button_ufl4h_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_ufl4h_28", "ExternalInput--hasData": "_ExternalInput--hasData_ufl4h_35", "ExternalInput-masthead": "_ExternalInput-masthead_ufl4h_56", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_ufl4h_61", "ExternalInput-table": "_ExternalInput-table_ufl4h_67" };
+var styles_module_default6 = { "ExternalInput": "_ExternalInput_z7jih_1", "ExternalInput-actions": "_ExternalInput-actions_z7jih_5", "ExternalInput-button": "_ExternalInput-button_z7jih_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_z7jih_28", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_z7jih_35", "ExternalInputModal": "_ExternalInputModal_z7jih_56", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_z7jih_63", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_z7jih_68", "ExternalInputModal-table": "_ExternalInputModal-table_z7jih_68", "ExternalInputModal-thead": "_ExternalInputModal-thead_z7jih_82", "ExternalInputModal-th": "_ExternalInputModal-th_z7jih_82", "ExternalInputModal-td": "_ExternalInputModal-td_z7jih_96", "ExternalInputModal-tr": "_ExternalInputModal-tr_z7jih_101", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_z7jih_113", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_z7jih_132", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_z7jih_136", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_z7jih_144", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_z7jih_148", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_z7jih_152" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -32748,7 +32752,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "Heading": "_Heading_7sjz7_1", "Heading--xxxxl": "_Heading--xxxxl_7sjz7_14", "Heading--xxxl": "_Heading--xxxl_7sjz7_20", "Heading--xxl": "_Heading--xxl_7sjz7_24", "Heading--xl": "_Heading--xl_7sjz7_28", "Heading--l": "_Heading--l_7sjz7_32", "Heading--m": "_Heading--m_7sjz7_36", "Heading--s": "_Heading--s_7sjz7_40", "Heading--xs": "_Heading--xs_7sjz7_44" };
+var styles_module_default8 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
 
 // components/Heading/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -32767,17 +32771,21 @@ var Heading = ({ children, rank, size = "m" }) => {
 };
 
 // components/ExternalInput/index.tsx
+var import_react_spinners4 = require("react-spinners");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
+var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
+var dataCache = {};
 var ExternalInput = ({
   field,
   onChange,
-  value = null
+  value = null,
+  name
 }) => {
-  const { mapProp = (val) => val } = field.adaptor || {};
+  const { mapProp = (val) => val } = field || {};
   const [data, setData] = (0, import_react29.useState)([]);
   const [isOpen, setOpen] = (0, import_react29.useState)(false);
-  const [selectedData, setSelectedData] = (0, import_react29.useState)(value);
+  const [isLoading, setIsLoading] = (0, import_react29.useState)(true);
   const keys = (0, import_react29.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of data) {
@@ -32791,22 +32799,19 @@ var ExternalInput = ({
   }, [data]);
   (0, import_react29.useEffect)(() => {
     (() => __async(void 0, null, function* () {
-      if (field.adaptor) {
-        const listData = yield field.adaptor.fetchList(field.adaptorParams);
-        if (listData) {
-          setData(listData);
-        }
+      const listData = dataCache[name] || (yield field.fetchList());
+      if (listData) {
+        setData(listData);
+        setIsLoading(false);
+        dataCache[name] = listData;
       }
     }))();
-  }, [field.adaptor, field.adaptorParams]);
-  if (!field.adaptor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: "Incorrectly configured" });
-  }
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: getClassName10({
-        hasData: !!selectedData,
+        dataSelected: !!value,
         modalVisible: isOpen
       }),
       children: [
@@ -32816,48 +32821,64 @@ var ExternalInput = ({
             {
               onClick: () => setOpen(true),
               className: getClassName10("button"),
-              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(link_default, { size: "16" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
-                  "Select from ",
-                  field.adaptor.name
-                ] })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: field.placeholder })
               ] })
             }
           ),
-          selectedData && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               className: getClassName10("detachButton"),
               onClick: () => {
-                setSelectedData(null);
                 onChange(null);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(unlock_default, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Modal, { onClose: () => setOpen(false), isOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("masthead"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }) }),
-          data.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: getClassName10("table"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: data.map((item, i) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "tr",
-                {
-                  style: { whiteSpace: "nowrap" },
-                  onClick: (e) => {
-                    onChange(mapProp(item));
-                    setOpen(false);
-                    setSelectedData(mapProp(item));
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            className: getClassNameModal({
+              isLoading,
+              loaded: !isLoading,
+              hasData: !!data
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassNameModal("masthead"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassNameModal("tableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: getClassNameModal("table"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "th",
+                  {
+                    className: getClassNameModal("th"),
+                    style: { textAlign: "left" },
+                    children: key
                   },
-                  children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { children: item[key] }, key))
-                },
-                i
-              );
-            }) })
-          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: 24 }, children: "No content" })
-        ] })
+                  key
+                )) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "tr",
+                    {
+                      style: { whiteSpace: "nowrap" },
+                      className: getClassNameModal("tr"),
+                      onClick: (e) => {
+                        onChange(mapProp(item));
+                        setOpen(false);
+                      },
+                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                    },
+                    i
+                  );
+                }) })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No content" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_spinners4.ClipLoader, { size: 24 }) })
+            ]
+          }
+        ) })
       ]
     }
   );
@@ -32872,7 +32893,17 @@ var ExternalField = ({
   name,
   label
 }) => {
-  if (field.type !== "external" || !field.adaptor) {
+  var _a, _b, _c;
+  const validField = field;
+  const deprecatedField = field;
+  (0, import_react30.useEffect)(() => {
+    if (deprecatedField.adaptor) {
+      console.error(
+        "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
+      );
+    }
+  }, []);
+  if (field.type !== "external") {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -32881,7 +32912,24 @@ var ExternalField = ({
       label: label || name,
       icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(link_default, { size: 16 }),
       el: "div",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ExternalInput, { field, onChange, value })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        ExternalInput,
+        {
+          name,
+          field: __spreadProps(__spreadValues({}, validField), {
+            // DEPRECATED
+            placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder,
+            mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
+            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
+              return yield deprecatedField.adaptor.fetchList(
+                deprecatedField.adaptorParams
+              );
+            }) : validField.fetchList
+          }),
+          onChange,
+          value
+        }
+      )
     }
   );
 };
@@ -33021,6 +33069,7 @@ var TextareaField = ({
 };
 
 // components/InputOrGroup/index.tsx
+var import_use_debounce2 = require("use-debounce");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var getClassName14 = get_class_name_factory_default("Input", styles_module_default3);
 var FieldLabel = ({
@@ -33061,36 +33110,52 @@ var FieldLabelInternal = ({
     }
   );
 };
-var InputOrGroup = (props) => {
-  const { name, field, value, onChange, readOnly } = props;
+var InputOrGroup = (_a) => {
+  var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
+  const { name, field, value, readOnly } = props;
+  const [localValue, setLocalValue] = (0, import_react31.useState)(value);
+  const [localValueDb] = (0, import_use_debounce2.useDebounce)(localValue, 50, { leading: true });
+  (0, import_react31.useEffect)(() => {
+    if (value !== localValueDb) {
+      onChange(localValueDb);
+    }
+  }, [localValueDb]);
+  const onChangeLocal = (0, import_react31.useCallback)((val) => {
+    setLocalValue(val);
+  }, []);
+  (0, import_react31.useEffect)(() => {
+    setLocalValue(value);
+  }, [value]);
+  const localProps = {
+    value: localValue,
+    onChange: onChangeLocal
+  };
   if (field.type === "array") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArrayField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArrayField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "external") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExternalField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExternalField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextareaField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextareaField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "radio") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName14(), children: field.render({
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName14(), children: field.render(__spreadValues({
       field,
       name,
-      value,
-      onChange,
       readOnly
-    }) });
+    }, localProps)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultField, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultField, __spreadValues(__spreadValues({}, props), localProps));
 };
 
 // components/ComponentList/index.tsx
@@ -33187,10 +33252,10 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react30 = require("react");
+var import_react32 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react30.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react32.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -33242,7 +33307,7 @@ var styles_module_default10 = { "SidebarSection": "_SidebarSection_r7dv3_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react31 = require("react");
+var import_react33 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -33292,8 +33357,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react31.useContext)(dropZoneContext);
-  return (0, import_react31.useMemo)(() => {
+  const dzContext = (0, import_react33.useContext)(dropZoneContext);
+  return (0, import_react33.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -33307,7 +33372,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-var import_react_spinners4 = require("react-spinners");
+var import_react_spinners5 = require("react-spinners");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default10);
 var SidebarSection = ({
@@ -33336,7 +33401,7 @@ var SidebarSection = ({
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("content"), children }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_spinners4.ClipLoader, {}) })
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_spinners5.ClipLoader, {}) })
   ] });
 };
 
@@ -33345,21 +33410,21 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react34 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react32.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react32.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react34.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react34.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
   const record = (params) => {
     const history = __spreadValues({
-      id: Math.random().toString()
+      id: generateId("history")
     }, params);
     setHistories((prev) => [
       ...prev.slice(0, currentHistoryIndex + 1),
@@ -33393,7 +33458,7 @@ function useActionHistory() {
 // lib/use-puck-history.ts
 var import_react_hotkeys_hook = require("react-hotkeys-hook");
 var import_event_emitter = __toESM(require("event-emitter"));
-var import_use_debounce2 = require("use-debounce");
+var import_use_debounce3 = require("use-debounce");
 var DEBOUNCE_TIME = 250;
 var RECORD_DIFF = "RECORD_DIFF";
 var historyEmitter = (0, import_event_emitter.default)();
@@ -33423,8 +33488,8 @@ function usePuckHistory({
   (0, import_react_hotkeys_hook.useHotkeys)("meta+z", rewind, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
-  const [snapshot] = (0, import_use_debounce2.useDebounce)(appState, DEBOUNCE_TIME);
-  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppState) => {
+  const [snapshot] = (0, import_use_debounce3.useDebounce)(appState, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce3.useDebouncedCallback)((newAppState) => {
     return _recordHistory({
       snapshot,
       newSnapshot: newAppState,
@@ -33432,7 +33497,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -33534,6 +33599,23 @@ var zoneCache = {};
 var addToZoneCache = (key, data) => {
   zoneCache[key] = data;
 };
+var replaceAction = (data, action) => {
+  if (action.destinationZone === rootDroppableId) {
+    return __spreadProps(__spreadValues({}, data), {
+      content: replace(data.content, action.destinationIndex, action.data)
+    });
+  }
+  const newData = setupZone(data, action.destinationZone);
+  return __spreadProps(__spreadValues({}, newData), {
+    zones: __spreadProps(__spreadValues({}, newData.zones), {
+      [action.destinationZone]: replace(
+        newData.zones[action.destinationZone],
+        action.destinationIndex,
+        action.data
+      )
+    })
+  });
+};
 var reduceData = (data, action, config) => {
   if (action.type === "insert") {
     const emptyComponentData = {
@@ -33660,21 +33742,7 @@ var reduceData = (data, action, config) => {
     });
   }
   if (action.type === "replace") {
-    if (action.destinationZone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, data), {
-        content: replace(data.content, action.destinationIndex, action.data)
-      });
-    }
-    const newData = setupZone(data, action.destinationZone);
-    return __spreadProps(__spreadValues({}, newData), {
-      zones: __spreadProps(__spreadValues({}, newData.zones), {
-        [action.destinationZone]: replace(
-          newData.zones[action.destinationZone],
-          action.destinationIndex,
-          action.data
-        )
-      })
-    });
+    return replaceAction(data, action);
   }
   if (action.type === "remove") {
     const item = getItem({ index: action.index, zone: action.zone }, data);
@@ -33785,7 +33853,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -33823,7 +33891,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react34.useContext)(dropZoneContext);
+  const ctx = (0, import_react36.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(layers_default, { size: "16" }) }),
@@ -33948,11 +34016,11 @@ var flushZones = (appState) => {
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react35.useState)();
-  (0, import_react35.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react37.useState)();
+  (0, import_react37.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -34018,56 +34086,64 @@ var useComponentList = (config, ui) => {
 
 // lib/use-resolved-data.ts
 init_react_import();
-var import_react36 = require("react");
+var import_react38 = require("react");
 
-// lib/resolve-all-props.ts
+// lib/resolve-component-data.ts
 init_react_import();
 var cache = { lastChange: {} };
-var resolveAllProps = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
+var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
   return yield Promise.all(
     content.map((item) => __async(void 0, null, function* () {
-      const configForItem = config.components[item.type];
-      if (configForItem.resolveData) {
-        let changed = Object.keys(item.props).reduce(
-          (acc, item2) => __spreadProps(__spreadValues({}, acc), { [item2]: true }),
-          {}
-        );
-        if (cache.lastChange[item.props.id]) {
-          const { item: oldItem, resolved } = cache.lastChange[item.props.id];
-          if (oldItem === item) {
-            return resolved;
-          }
-          Object.keys(item.props).forEach((propName) => {
-            if (oldItem.props[propName] === item.props[propName]) {
-              changed[propName] = false;
-            }
-          });
-        }
-        if (onResolveStart) {
-          onResolveStart(item);
-        }
-        const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed });
-        const { readOnly: existingReadOnly = {} } = item || {};
-        const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
-        const resolvedItem = __spreadProps(__spreadValues({}, item), {
-          props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
-        });
-        if (Object.keys(newReadOnly).length) {
-          resolvedItem.readOnly = newReadOnly;
-        }
-        cache.lastChange[item.props.id] = {
-          item,
-          resolved: resolvedItem
-        };
-        if (onResolveEnd) {
-          onResolveEnd(resolvedItem);
-        }
-        return resolvedItem;
-      }
-      return item;
+      return yield resolveComponentData(
+        item,
+        config,
+        onResolveStart,
+        onResolveEnd
+      );
     }))
   );
 });
+var resolveComponentData = (item, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
+  const configForItem = config.components[item.type];
+  if (configForItem.resolveData) {
+    let changed = Object.keys(item.props).reduce(
+      (acc, item2) => __spreadProps(__spreadValues({}, acc), { [item2]: true }),
+      {}
+    );
+    if (cache.lastChange[item.props.id]) {
+      const { item: oldItem, resolved } = cache.lastChange[item.props.id];
+      if (oldItem === item) {
+        return resolved;
+      }
+      Object.keys(item.props).forEach((propName) => {
+        if (oldItem.props[propName] === item.props[propName]) {
+          changed[propName] = false;
+        }
+      });
+    }
+    if (onResolveStart) {
+      onResolveStart(item);
+    }
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed });
+    const { readOnly: existingReadOnly = {} } = item || {};
+    const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
+    const resolvedItem = __spreadProps(__spreadValues({}, item), {
+      props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
+    });
+    if (Object.keys(newReadOnly).length) {
+      resolvedItem.readOnly = newReadOnly;
+    }
+    cache.lastChange[item.props.id] = {
+      item,
+      resolved: resolvedItem
+    };
+    if (onResolveEnd) {
+      onResolveEnd(resolvedItem);
+    }
+    return resolvedItem;
+  }
+  return item;
+});
 
 // lib/apply-dynamic-props.ts
 init_react_import();
@@ -34125,55 +34201,81 @@ var resolveRootData = (data, config) => __async(void 0, null, function* () {
 
 // lib/use-resolved-data.ts
 var useResolvedData = (data, config, dispatch) => {
-  const [runResolversKey, setRunResolversKey] = (0, import_react36.useState)(0);
-  const [componentState, setComponentState] = (0, import_react36.useState)({});
-  const runResolvers = () => {
-    const flatContent = Object.keys(data.zones || {}).reduce((acc, zone) => [...acc, ...data.zones[zone]], data.content).filter((item) => !!config.components[item.type].resolveData);
-    resolveAllProps(
-      flatContent,
-      config,
-      (item) => {
-        setComponentState((prev) => __spreadProps(__spreadValues({}, prev), {
-          [item.props.id]: __spreadProps(__spreadValues({}, prev[item.props.id]), { loading: true })
-        }));
-      },
-      (item) => {
+  const [{ resolverKey, newData }, setResolverState] = (0, import_react38.useState)({
+    resolverKey: 0,
+    newData: data
+  });
+  const [componentState, setComponentState] = (0, import_react38.useState)({});
+  const deferredSetStates = {};
+  const setComponentLoading = (0, import_react38.useCallback)(
+    (id, loading, defer = 0) => {
+      if (deferredSetStates[id]) {
+        clearTimeout(deferredSetStates[id]);
+        delete deferredSetStates[id];
+      }
+      const setLoading = deferredSetStates[id] = setTimeout(() => {
         setComponentState((prev) => __spreadProps(__spreadValues({}, prev), {
-          [item.props.id]: __spreadProps(__spreadValues({}, prev[item.props.id]), { loading: false })
+          [id]: __spreadProps(__spreadValues({}, prev[id]), { loading })
         }));
-      }
-    ).then((dynamicContent) => __async(void 0, null, function* () {
-      setComponentState((prev) => __spreadProps(__spreadValues({}, prev), {
-        "puck-root": __spreadProps(__spreadValues({}, prev["puck-root"]), { loading: true })
-      }));
-      const dynamicRoot = yield resolveRootData(data, config);
-      setComponentState((prev) => __spreadProps(__spreadValues({}, prev), {
-        "puck-root": __spreadProps(__spreadValues({}, prev["puck-root"]), { loading: false })
-      }));
-      const newDynamicProps = dynamicContent.reduce(
-        (acc, item) => {
-          return __spreadProps(__spreadValues({}, acc), { [item.props.id]: item });
-        },
-        {}
-      );
-      const processed = applyDynamicProps(data, newDynamicProps, dynamicRoot);
+        delete deferredSetStates[id];
+      }, defer);
+    },
+    []
+  );
+  const runResolvers = () => __async(void 0, null, function* () {
+    const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => !!config.components[item.type].resolveData);
+    const applyIfChange = (dynamicDataMap, dynamicRoot) => {
+      const processed = applyDynamicProps(data, dynamicDataMap, dynamicRoot);
       const containsChanges = JSON.stringify(data) !== JSON.stringify(processed);
       if (containsChanges) {
         dispatch({
           type: "setData",
-          data: (prev) => applyDynamicProps(prev, newDynamicProps, dynamicRoot),
-          recordHistory: true
+          data: (prev) => applyDynamicProps(prev, dynamicDataMap, dynamicRoot),
+          recordHistory: resolverKey > 0
         });
       }
-    }));
-  };
-  (0, import_react36.useEffect)(() => {
+    };
+    const promises = [];
+    promises.push(
+      (() => __async(void 0, null, function* () {
+        setComponentLoading("puck-root", true, 50);
+        const dynamicRoot = yield resolveRootData(newData, config);
+        applyIfChange({}, dynamicRoot);
+        setComponentLoading("puck-root", false);
+      }))()
+    );
+    flatContent.forEach((item) => {
+      promises.push(
+        (() => __async(void 0, null, function* () {
+          const dynamicData = yield resolveComponentData(
+            item,
+            config,
+            (item2) => {
+              setComponentLoading(item2.props.id, true, 50);
+            },
+            (item2) => {
+              deferredSetStates[item2.props.id];
+              setComponentLoading(item2.props.id, false);
+            }
+          );
+          const dynamicDataMap = { [item.props.id]: dynamicData };
+          applyIfChange(dynamicDataMap);
+        }))()
+      );
+    });
+    yield Promise.all(promises);
+  });
+  (0, import_react38.useEffect)(() => {
     runResolvers();
-  }, [runResolversKey]);
+  }, [resolverKey]);
+  const resolveData = (0, import_react38.useCallback)((newData2 = data) => {
+    setResolverState((curr) => ({
+      resolverKey: curr.resolverKey + 1,
+      newData: newData2
+    }));
+  }, []);
   return {
-    resolveData: () => {
-      setRunResolversKey((curr) => curr + 1);
-    },
+    resolveData,
     componentState
   };
 };
@@ -34208,7 +34310,7 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react37.useState)(() => createReducer({ config }));
+  const [reducer] = (0, import_react39.useState)(() => createReducer({ config }));
   const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
     data: initialData,
     ui: __spreadProps(__spreadValues({}, defaultAppState.ui), {
@@ -34228,7 +34330,7 @@ function Puck({
       ) : {}
     })
   });
-  const [appState, dispatch] = (0, import_react37.useReducer)(
+  const [appState, dispatch] = (0, import_react39.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -34243,7 +34345,7 @@ function Puck({
     dispatch
   });
   const { itemSelector, leftSideBarVisible } = ui;
-  const setItemSelector = (0, import_react37.useCallback)(
+  const setItemSelector = (0, import_react39.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -34253,7 +34355,7 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react37.useCallback)(
+  const Page = (0, import_react39.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -34269,7 +34371,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react37.useCallback)(
+  const PageFieldWrapper = (0, import_react39.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34282,7 +34384,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react37.useCallback)(
+  const ComponentFieldWrapper = (0, import_react39.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34295,7 +34397,7 @@ function Puck({
     ),
     []
   );
-  const ComponentListWrapper = (0, import_react37.useCallback)((props) => {
+  const ComponentListWrapper = (0, import_react39.useCallback)((props) => {
     const children = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34315,18 +34417,18 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react37.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
   const componentList = useComponentList(config, appState.ui);
   const rootProps = data.root.props || data.root;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (Object.keys(data.root).length > 0 && !data.root.props) {
       console.error(
-        "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release "
+        "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
       );
     }
   }, []);
@@ -34678,6 +34780,7 @@ function Puck({
                                 children: Object.keys(fields).map((fieldName) => {
                                   const field = fields[fieldName];
                                   const onChange2 = (value) => {
+                                    var _a3, _b3;
                                     let currentProps;
                                     if (selectedItem) {
                                       currentProps = selectedItem.props;
@@ -34688,26 +34791,35 @@ function Puck({
                                       [fieldName]: value
                                     });
                                     if (itemSelector) {
-                                      dispatch({
+                                      const action = {
                                         type: "replace",
                                         destinationIndex: itemSelector.index,
                                         destinationZone: itemSelector.zone || rootDroppableId,
                                         data: __spreadProps(__spreadValues({}, selectedItem), { props: newProps })
-                                      });
-                                      resolveData();
+                                      };
+                                      if ((_a3 = config.components[selectedItem.type]) == null ? void 0 : _a3.resolveData) {
+                                        resolveData(replaceAction(data, action));
+                                      } else {
+                                        dispatch(action);
+                                      }
                                     } else {
                                       if (data.root.props) {
-                                        dispatch({
-                                          type: "setData",
-                                          data: { root: { props: { newProps } } }
-                                        });
+                                        if ((_b3 = config.root) == null ? void 0 : _b3.resolveData) {
+                                          resolveData(__spreadProps(__spreadValues({}, data), {
+                                            root: { props: { newProps } }
+                                          }));
+                                        } else {
+                                          dispatch({
+                                            type: "setData",
+                                            data: { root: { props: { newProps } } }
+                                          });
+                                        }
                                       } else {
                                         dispatch({
                                           type: "setData",
                                           data: { root: newProps }
                                         });
                                       }
-                                      resolveData();
                                     }
                                   };
                                   if (selectedItem && itemSelector) {
@@ -34790,7 +34902,7 @@ var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(voi
   const resolvedZones = {};
   for (let i = 0; i < zoneKeys.length; i++) {
     const zoneKey = zoneKeys[i];
-    resolvedZones[zoneKey] = yield resolveAllProps(
+    resolvedZones[zoneKey] = yield resolveAllComponentData(
       zones[zoneKey],
       config,
       onResolveStart,
@@ -34799,7 +34911,7 @@ var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(voi
   }
   return __spreadProps(__spreadValues({}, data), {
     root: dynamicRoot,
-    content: yield resolveAllProps(
+    content: yield resolveAllComponentData(
       data.content,
       config,
       onResolveStart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.11.0-canary.f9033e2",
+  "version": "0.11.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",