@measured/puck 0.15.0-canary.aedd401 → 0.15.0-canary.b1c40c6

package/dist/{Config-550396e1.d.ts → Config-25917005.d.ts}

@@ -152,8 +152,16 @@ type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultCompo
     label?: string;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
+    resolveFields?: (data: DataShape, params: {
+        changed: Partial<Record<keyof ComponentProps, boolean>>;
+        fields: Fields<ComponentProps>;
+        lastFields: Fields<ComponentProps>;
+        lastData: DataShape;
+        appState: AppState;
+    }) => Promise<Fields<ComponentProps>> | Fields<ComponentProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof ComponentProps, boolean>>;
+        lastData: DataShape;
     }) => Promise<{
         props?: Partial<ComponentProps>;
         readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
@@ -179,7 +187,7 @@ type Config<Props extends Record<string, any> = Record<string, any>, RootProps e
         children?: ReactNode;
     }, Partial<RootProps & {
         children?: ReactNode;
-    }>, RootDataWithProps>>;
+    }>, RootData>>;
 };
 type BaseData<Props extends {
     [key: string]: any;
@@ -192,11 +200,11 @@ type ComponentData<Props extends DefaultComponentProps = DefaultComponentProps>
     type: keyof Props;
     props: WithPuckProps<Props>;
 } & BaseData<Props>;
-type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
+type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & {
     props: Props;
 };
 type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
-type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
+type RootData<Props extends DefaultRootProps = DefaultRootProps> = Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
 type MappedItem = ComponentData;
 type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
     root: RootData<RootProps>;

package/dist/index.css

@@ -1462,11 +1462,14 @@ textarea._Input-input_1qi5b_46 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
-._PuckFields_17k3p_1 {
+._PuckFields_1o0if_1 {
   position: relative;
   font-family: var(--puck-font-family);
 }
-._PuckFields-loadingOverlay_17k3p_6 {
+._PuckFields--isLoading_1o0if_6 {
+  min-height: 48px;
+}
+._PuckFields-loadingOverlay_1o0if_10 {
   background: var(--puck-color-white);
   display: flex;
   justify-content: center;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-550396e1.js';
-export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-550396e1.js';
+import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-25917005.js';
+export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-25917005.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';

package/dist/index.js

@@ -31095,6 +31095,20 @@ var import_react13 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
+
+// lib/get-changed.ts
+init_react_import();
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: oldItemProps[item] !== newItemProps[item]
+    });
+  }, {}) : {};
+};
+
+// lib/resolve-component-data.ts
 var cache = { lastChange: {} };
 var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
   return yield Promise.all(
@@ -31111,25 +31125,15 @@ var resolveAllComponentData = (content, 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;
-        }
-      });
+    const { item: oldItem = {}, resolved = {} } = cache.lastChange[item.props.id] || {};
+    if (item && item === oldItem) {
+      return resolved;
     }
+    const changed = getChanged(item, oldItem);
     if (onResolveStart) {
       onResolveStart(item);
     }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed });
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed, lastData: oldItem });
     const { readOnly: existingReadOnly = {} } = item || {};
     const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
     const resolvedItem = __spreadProps(__spreadValues({}, item), {
@@ -31172,26 +31176,16 @@ var applyDynamicProps = (data, dynamicProps, rootData) => {
 init_react_import();
 var cache2 = {};
 var resolveRootData = (data, config) => __async(void 0, null, function* () {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-    let changed = Object.keys(data.root.props).reduce(
-      (acc, item) => __spreadProps(__spreadValues({}, acc), { [item]: true }),
-      {}
-    );
-    if (cache2.lastChange) {
-      const { original, resolved } = cache2.lastChange;
-      if (original === data.root) {
-        return resolved;
-      }
-      Object.keys(data.root.props).forEach((propName) => {
-        if (original.props[propName] === data.root.props[propName]) {
-          changed[propName] = false;
-        }
-      });
+    if (((_b = cache2.lastChange) == null ? void 0 : _b.original) === data.root) {
+      return cache2.lastChange.resolved;
     }
+    const changed = getChanged(data.root, (_c = cache2.lastChange) == null ? void 0 : _c.original);
     const rootWithProps = data.root;
-    const resolvedRoot = yield (_b = config.root) == null ? void 0 : _b.resolveData(rootWithProps, {
-      changed
+    const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
+      changed,
+      lastData: ((_d = cache2.lastChange) == null ? void 0 : _d.original) || {}
     });
     cache2.lastChange = {
       original: data.root,
@@ -32321,7 +32315,7 @@ var InputOrGroup = (_a) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
+var styles_module_default14 = { "PuckFields": "_PuckFields_1o0if_1", "PuckFields--isLoading": "_PuckFields--isLoading_1o0if_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_1o0if_10" };
 
 // components/Puck/components/Fields/index.tsx
 var import_react19 = require("react");
@@ -32334,13 +32328,73 @@ var DefaultFields = ({
   children,
   isLoading
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19({ isLoading }), children: [
     children,
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_spinners6.ClipLoader, { "aria-label": "loading" }) })
   ] });
 };
+var useResolvedFields = () => {
+  var _a;
+  const { selectedItem, state, config } = useAppContext();
+  const { data } = state;
+  const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
+  const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
+  const defaultFields = selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields;
+  const rootProps = data.root.props || data.root;
+  const [lastSelectedData, setLastSelectedData] = (0, import_react19.useState)(
+    {}
+  );
+  const [resolvedFields, setResolvedFields] = (0, import_react19.useState)(defaultFields || {});
+  const [fieldsLoading, setFieldsLoading] = (0, import_react19.useState)(false);
+  const defaultResolveFields = (_componentData, _params) => defaultFields;
+  const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const resolveFields = (0, import_react19.useCallback)(
+    (..._0) => __async(void 0, [..._0], function* (fields = {}) {
+      var _a2, _b, _c;
+      const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : {};
+      const changed = getChanged(componentData, lastData);
+      setLastSelectedData(componentData);
+      if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
+        return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+          componentData,
+          {
+            changed,
+            fields,
+            lastFields: resolvedFields,
+            lastData,
+            appState: state
+          }
+        );
+      }
+      if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
+        return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+          changed,
+          fields,
+          lastFields: resolvedFields,
+          lastData,
+          appState: state
+        });
+      }
+      return defaultResolveFields(componentData, {
+        changed,
+        fields,
+        lastFields: resolvedFields,
+        lastData
+      });
+    }),
+    [data, config, componentData, selectedItem, resolvedFields, state]
+  );
+  (0, import_react19.useEffect)(() => {
+    setFieldsLoading(true);
+    resolveFields(defaultFields).then((fields) => {
+      setResolvedFields(fields || {});
+      setFieldsLoading(false);
+    });
+  }, [data, defaultFields]);
+  return [resolvedFields, fieldsLoading];
+};
 var Fields = () => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const {
     selectedItem,
     state,
@@ -32352,9 +32406,9 @@ var Fields = () => {
   } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
-  const fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  const isLoading = selectedItem ? (_c = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _c.loading : (_d = componentState["puck-root"]) == null ? void 0 : _d.loading;
+  const [fields, fieldsResolving] = useResolvedFields();
+  const componentResolving = selectedItem ? (_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loading : (_b = componentState["puck-root"]) == null ? void 0 : _b.loading;
+  const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
   const Wrapper = (0, import_react19.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -32366,6 +32420,8 @@ var Fields = () => {
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
         const field = fields[fieldName];
+        if (!(field == null ? void 0 : field.type))
+          return null;
         const onChange = (value, updatedUi) => {
           var _a2, _b2;
           let currentProps;

package/dist/rsc.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './Config-550396e1.js';
+import { C as Config, D as Data } from './Config-25917005.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.15.0-canary.aedd401",
+  "version": "0.15.0-canary.b1c40c6",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",