@measured/puck 0.16.0-canary.60fe631 → 0.16.0-canary.7c79787

package/dist/index.d.ts

@@ -10,6 +10,7 @@ type InsertAction = {
     componentType: string;
     destinationIndex: number;
     destinationZone: string;
+    id?: string;
 };
 type DuplicateAction = {
     type: "duplicate";
@@ -207,6 +208,8 @@ type HistoryStore<D = any> = {
     setHistoryIndex: (index: number) => void;
 };
 
+type OnAction = (action: PuckAction, appState: AppState, prevAppState: AppState) => void;
+
 type PathData = Record<string, {
     path: string[];
     label: string;
@@ -263,13 +266,14 @@ type IframeConfig = {
     enabled?: boolean;
 };
 
-declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, initialHistory, }: {
+declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, onAction, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, initialHistory, }: {
     children?: ReactNode;
     config: UserConfig;
     data: Partial<Data>;
     ui?: Partial<UiState>;
     onChange?: (data: Data) => void;
     onPublish?: (data: Data) => void;
+    onAction?: OnAction;
     plugins?: Plugin[];
     overrides?: Partial<Overrides>;
     renderHeader?: (props: {

package/dist/index.js

@@ -31282,34 +31282,37 @@ var replaceAction = (data, action) => {
     })
   });
 };
-var reduceData = (data, action, config) => {
-  if (action.type === "insert") {
-    const emptyComponentData = {
-      type: action.componentType,
-      props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
-        id: generateId(action.componentType)
-      })
-    };
-    if (action.destinationZone === rootDroppableId) {
-      return __spreadProps(__spreadValues({}, data), {
-        content: insert(
-          data.content,
-          action.destinationIndex,
-          emptyComponentData
-        )
-      });
-    }
-    const newData = setupZone(data, action.destinationZone);
+var insertAction = (data, action, config) => {
+  const emptyComponentData = {
+    type: action.componentType,
+    props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
+      id: action.id || generateId(action.componentType)
+    })
+  };
+  if (action.destinationZone === rootDroppableId) {
     return __spreadProps(__spreadValues({}, data), {
-      zones: __spreadProps(__spreadValues({}, newData.zones), {
-        [action.destinationZone]: insert(
-          newData.zones[action.destinationZone],
-          action.destinationIndex,
-          emptyComponentData
-        )
-      })
+      content: insert(
+        data.content,
+        action.destinationIndex,
+        emptyComponentData
+      )
     });
   }
+  const newData = setupZone(data, action.destinationZone);
+  return __spreadProps(__spreadValues({}, data), {
+    zones: __spreadProps(__spreadValues({}, newData.zones), {
+      [action.destinationZone]: insert(
+        newData.zones[action.destinationZone],
+        action.destinationIndex,
+        emptyComponentData
+      )
+    })
+  });
+};
+var reduceData = (data, action, config) => {
+  if (action.type === "insert") {
+    return insertAction(data, action, config);
+  }
   if (action.type === "duplicate") {
     const item = getItem(
       { index: action.sourceIndex, zone: action.sourceZone },
@@ -31473,7 +31476,7 @@ var reduceUi = (ui, action) => {
 init_react_import();
 
 // reducer/index.ts
-var storeInterceptor = (reducer, record) => {
+var storeInterceptor = (reducer, record, onAction) => {
   return (state, action) => {
     const newAppState = reducer(state, action);
     const isValidType = ![
@@ -31486,6 +31489,7 @@ var storeInterceptor = (reducer, record) => {
     if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
       if (record) record(newAppState);
     }
+    onAction == null ? void 0 : onAction(action, newAppState, state);
     return newAppState;
   };
 };
@@ -31497,16 +31501,21 @@ var setAction = (state, action) => {
 };
 function createReducer({
   config,
-  record
+  record,
+  onAction
 }) {
-  return storeInterceptor((state, action) => {
-    const data = reduceData(state.data, action, config);
-    const ui = reduceUi(state.ui, action);
-    if (action.type === "set") {
-      return setAction(state, action);
-    }
-    return { data, ui };
-  }, record);
+  return storeInterceptor(
+    (state, action) => {
+      const data = reduceData(state.data, action, config);
+      const ui = reduceUi(state.ui, action);
+      if (action.type === "set") {
+        return setAction(state, action);
+      }
+      return { data, ui };
+    },
+    record,
+    onAction
+  );
 }
 
 // lib/flush-zones.ts
@@ -31767,20 +31776,8 @@ var MenuBar = ({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("inner"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            Undo2,
-            {
-              size: 21,
-              stroke: hasPast ? "var(--puck-color-black)" : "var(--puck-color-grey-08)"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            Redo2,
-            {
-              size: 21,
-              stroke: hasFuture ? "var(--puck-color-black)" : "var(--puck-color-grey-08)"
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Redo2, { size: 21 }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
@@ -33197,6 +33194,38 @@ var Canvas = () => {
   );
 };
 
+// lib/insert-component.ts
+init_react_import();
+var insertComponent = (componentType, zone, index, {
+  config,
+  dispatch,
+  resolveData,
+  state
+}) => {
+  const id = generateId(componentType);
+  const insertActionData = {
+    type: "insert",
+    componentType,
+    destinationIndex: index,
+    destinationZone: zone,
+    id
+  };
+  const insertedData = insertAction(state.data, insertActionData, config);
+  dispatch(__spreadProps(__spreadValues({}, insertActionData), {
+    // Dispatch insert rather set, as user's may rely on this via onAction
+    recordHistory: false
+  }));
+  const itemSelector = {
+    index,
+    zone
+  };
+  dispatch({ type: "setUi", ui: { itemSelector } });
+  resolveData({
+    data: insertedData,
+    ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector })
+  });
+};
+
 // components/Puck/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("Puck", styles_module_default14);
@@ -33208,6 +33237,7 @@ function Puck({
   ui: initialUi,
   onChange,
   onPublish,
+  onAction,
   plugins = [],
   overrides = {},
   renderHeader,
@@ -33224,7 +33254,7 @@ function Puck({
   var _a;
   const historyStore = useHistoryStore(initialHistory);
   const [reducer] = (0, import_react30.useState)(
-    () => createReducer({ config, record: historyStore.record })
+    () => createReducer({ config, record: historyStore.record, onAction })
   );
   const [initialAppState] = (0, import_react30.useState)(() => {
     var _a2, _b, _c, _d, _e, _f, _g;
@@ -33441,16 +33471,12 @@ function Puck({
               }
               if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
                 const [_, componentType] = droppedItem.draggableId.split("::");
-                dispatch({
-                  type: "insert",
-                  componentType: componentType || droppedItem.draggableId,
-                  destinationIndex: droppedItem.destination.index,
-                  destinationZone: droppedItem.destination.droppableId
-                });
-                setItemSelector({
-                  index: droppedItem.destination.index,
-                  zone: droppedItem.destination.droppableId
-                });
+                insertComponent(
+                  componentType || droppedItem.draggableId,
+                  droppedItem.destination.droppableId,
+                  droppedItem.destination.index,
+                  { config, dispatch, resolveData, state: appState }
+                );
                 return;
               } else {
                 const { source, destination } = droppedItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.16.0-canary.60fe631",
+  "version": "0.16.0-canary.7c79787",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",