@measured/puck 0.9.1-canary.f4e8d4a → 0.10.0-canary.3fe6284

package/dist/index.d.ts

@@ -3,6 +3,11 @@ import { ReactElement, ReactNode, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DragStart, DragUpdate } from 'react-beautiful-dnd';
 
+type ItemSelector = {
+    index: number;
+    zone?: string;
+};
+
 type Adaptor<AdaptorParams = {}> = {
     name: string;
     fetchList: (adaptorParams?: AdaptorParams) => Promise<Record<string, any>[] | null>;
@@ -98,6 +103,14 @@ type Data<Props extends {
     content: Content<Props>;
     zones?: Record<string, Content<Props>>;
 };
+type AppState = {
+    leftSideBarVisible: boolean;
+    itemSelector?: ItemSelector | null;
+};
+type AppData = {
+    data: Data;
+    state: AppState;
+};
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
     children: ReactNode;
@@ -113,11 +126,6 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
     size?: "medium" | "large" | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-type ItemSelector = {
-    index: number;
-    zone?: string;
-};
-
 type InsertAction = {
     type: "insert";
     componentType: string;
@@ -153,10 +161,18 @@ type RemoveAction = {
     index: number;
     zone: string;
 };
+type SetStateAction = {
+    type: "setState";
+    state: Partial<AppState>;
+};
 type SetDataAction = {
-    type: "set";
+    type: "setData";
     data: Partial<Data>;
 };
+type SetAction = {
+    type: "set";
+    appData: Partial<AppData>;
+};
 type RegisterZoneAction = {
     type: "registerZone";
     zone: string;
@@ -165,7 +181,9 @@ type UnregisterZoneAction = {
     type: "unregisterZone";
     zone: string;
 };
-type PuckAction = ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetDataAction | RegisterZoneAction | UnregisterZoneAction;
+type PuckAction = {
+    recordHistory?: boolean;
+} & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
 
 type PathData = Record<string, {
     selector: ItemSelector | null;
@@ -265,4 +283,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };
+export { Adaptor, AppData, AppState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };

package/dist/index.js

@@ -3033,6 +3033,12 @@ var ExternalInput = ({
   const [data, setData] = (0, import_react23.useState)([]);
   const [isOpen, setOpen] = (0, import_react23.useState)(false);
   const [selectedData, setSelectedData] = (0, import_react23.useState)(value);
+  const keys = (0, import_react23.useMemo)(
+    () => Object.keys(data).filter(
+      (key) => typeof data[key] === "string" || typeof data[key] === "number"
+    ),
+    [data]
+  );
   (0, import_react23.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
@@ -3089,7 +3095,7 @@ var ExternalInput = ({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: getClassName5("modalHeading"), children: "Select content" }),
               data.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Object.keys(data[0]).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: data.map((item, i) => {
                   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "tr",
@@ -3100,7 +3106,7 @@ var ExternalInput = ({
                         setOpen(false);
                         setSelectedData(item);
                       },
-                      children: Object.keys(item).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: item[key] }, key))
+                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: item[key] }, key))
                     },
                     i
                   );
@@ -3522,96 +3528,9 @@ var SidebarSection = ({
   ] });
 };
 
-// lib/reducer.ts
+// reducer/index.ts
 init_react_import();
 
-// lib/insert.ts
-init_react_import();
-var insert = (list, index, item) => {
-  const result = Array.from(list);
-  result.splice(index, 0, item);
-  return result;
-};
-
-// lib/remove.ts
-init_react_import();
-var remove = (list, index) => {
-  const result = Array.from(list);
-  result.splice(index, 1);
-  return result;
-};
-
-// lib/reduce-related-zones.ts
-init_react_import();
-
-// lib/generate-id.ts
-init_react_import();
-var import_crypto = require("crypto");
-var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
-
-// lib/reduce-related-zones.ts
-var reduceRelatedZones = (item, data, fn) => {
-  return __spreadProps(__spreadValues({}, data), {
-    zones: Object.keys(data.zones || {}).reduce(
-      (acc, key) => {
-        const [parentId] = getZoneId(key);
-        if (parentId === item.props.id) {
-          const zones = data.zones;
-          return fn(acc, key, zones[key]);
-        }
-        return __spreadProps(__spreadValues({}, acc), { [key]: data.zones[key] });
-      },
-      {}
-    )
-  });
-};
-var findRelatedByZoneId = (zoneId, data) => {
-  const [zoneParentId] = getZoneId(zoneId);
-  return (data.zones[zoneId] || []).reduce((acc, zoneItem) => {
-    const related = findRelatedByItem(zoneItem, data);
-    if (zoneItem.props.id === zoneParentId) {
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
-    }
-    return __spreadValues(__spreadValues({}, acc), related);
-  }, {});
-};
-var findRelatedByItem = (item, data) => {
-  return Object.keys(data.zones || {}).reduce((acc, zoneId) => {
-    const [zoneParentId] = getZoneId(zoneId);
-    if (item.props.id === zoneParentId) {
-      const related = findRelatedByZoneId(zoneId, data);
-      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
-        [zoneId]: data.zones[zoneId]
-      });
-    }
-    return acc;
-  }, {});
-};
-var removeRelatedZones = (item, data) => {
-  const newData = __spreadValues({}, data);
-  const related = findRelatedByItem(item, data);
-  Object.keys(related).forEach((key) => {
-    delete newData.zones[key];
-  });
-  return newData;
-};
-var duplicateRelatedZones = (item, data, newId) => {
-  return reduceRelatedZones(item, data, (acc, key, zone) => {
-    const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
-      props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
-    }));
-    const dupeOfDupes = dupedZone.reduce(
-      (dupeOfDupes2, item2, index) => __spreadValues(__spreadValues({}, dupeOfDupes2), duplicateRelatedZones(zone[index], data, item2.props.id).zones),
-      acc
-    );
-    const [_, zoneId] = getZoneId(key);
-    return __spreadProps(__spreadValues({}, dupeOfDupes), {
-      [key]: zone,
-      [`${newId}:${zoneId}`]: dupedZone
-    });
-  });
-};
-
 // lib/use-puck-history.ts
 init_react_import();
 var import_react26 = require("react");
@@ -3667,37 +3586,37 @@ var import_deep_diff = require("deep-diff");
 var DEBOUNCE_TIME = 250;
 var RECORD_DIFF = "RECORD_DIFF";
 var historyEmitter = (0, import_event_emitter.default)();
-var recordDiff = (newData) => historyEmitter.emit(RECORD_DIFF, newData);
+var recordDiff = (newAppData) => historyEmitter.emit(RECORD_DIFF, newAppData);
 function usePuckHistory({
-  data,
+  appData,
   dispatch
 }) {
   const { canForward, canRewind, rewind, forward, record } = useActionHistory();
   (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)(data, DEBOUNCE_TIME);
-  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newData) => {
-    const _diff = (0, import_deep_diff.diff)(snapshot, newData);
+  const [snapshot] = (0, import_use_debounce2.useDebounce)(appData, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppData) => {
+    const _diff = (0, import_deep_diff.diff)(snapshot, newAppData);
     if (!_diff) {
       return;
     }
     record({
       forward: () => {
-        const target = structuredClone(data);
+        const target = structuredClone(appData);
         _diff.reduce((target2, change) => {
           (0, import_deep_diff.applyChange)(target2, true, change);
           return target2;
         }, target);
-        dispatch({ type: "set", data: target });
+        dispatch({ type: "set", appData: target });
       },
       rewind: () => {
-        const target = structuredClone(data);
+        const target = structuredClone(appData);
         _diff.reduce((target2, change) => {
           (0, import_deep_diff.revertChange)(target2, true, change);
           return target2;
         }, target);
-        dispatch({ type: "set", data: target });
+        dispatch({ type: "set", appData: target });
       }
     });
   }, DEBOUNCE_TIME);
@@ -3716,21 +3635,102 @@ function usePuckHistory({
   };
 }
 
-// lib/reducer.ts
+// reducer/data.ts
+init_react_import();
+
+// lib/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/remove.ts
+init_react_import();
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+// lib/reduce-related-zones.ts
+init_react_import();
+
+// lib/generate-id.ts
+init_react_import();
+var import_crypto = require("crypto");
+var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
+
+// lib/reduce-related-zones.ts
+var reduceRelatedZones = (item, data, fn) => {
+  return __spreadProps(__spreadValues({}, data), {
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, key) => {
+        const [parentId] = getZoneId(key);
+        if (parentId === item.props.id) {
+          const zones = data.zones;
+          return fn(acc, key, zones[key]);
+        }
+        return __spreadProps(__spreadValues({}, acc), { [key]: data.zones[key] });
+      },
+      {}
+    )
+  });
+};
+var findRelatedByZoneId = (zoneId, data) => {
+  const [zoneParentId] = getZoneId(zoneId);
+  return (data.zones[zoneId] || []).reduce((acc, zoneItem) => {
+    const related = findRelatedByItem(zoneItem, data);
+    if (zoneItem.props.id === zoneParentId) {
+      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
+    }
+    return __spreadValues(__spreadValues({}, acc), related);
+  }, {});
+};
+var findRelatedByItem = (item, data) => {
+  return Object.keys(data.zones || {}).reduce((acc, zoneId) => {
+    const [zoneParentId] = getZoneId(zoneId);
+    if (item.props.id === zoneParentId) {
+      const related = findRelatedByZoneId(zoneId, data);
+      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
+        [zoneId]: data.zones[zoneId]
+      });
+    }
+    return acc;
+  }, {});
+};
+var removeRelatedZones = (item, data) => {
+  const newData = __spreadValues({}, data);
+  const related = findRelatedByItem(item, data);
+  Object.keys(related).forEach((key) => {
+    delete newData.zones[key];
+  });
+  return newData;
+};
+var duplicateRelatedZones = (item, data, newId) => {
+  return reduceRelatedZones(item, data, (acc, key, zone) => {
+    const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
+      props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
+    }));
+    const dupeOfDupes = dupedZone.reduce(
+      (dupeOfDupes2, item2, index) => __spreadValues(__spreadValues({}, dupeOfDupes2), duplicateRelatedZones(zone[index], data, item2.props.id).zones),
+      acc
+    );
+    const [_, zoneId] = getZoneId(key);
+    return __spreadProps(__spreadValues({}, dupeOfDupes), {
+      [key]: zone,
+      [`${newId}:${zoneId}`]: dupedZone
+    });
+  });
+};
+
+// reducer/data.ts
 var zoneCache = {};
 var addToZoneCache = (key, data) => {
   zoneCache[key] = data;
 };
-var storeInterceptor = (reducer) => {
-  return (data, action) => {
-    const newData = reducer(data, action);
-    if (!["registerZone", "unregisterZone", "set"].includes(action.type)) {
-      recordDiff(newData);
-    }
-    return newData;
-  };
-};
-var createReducer = ({ config }) => storeInterceptor((data, action) => {
+var reduceData = (data, action, config) => {
   if (action.type === "insert") {
     const emptyComponentData = {
       type: action.componentType,
@@ -3910,10 +3910,48 @@ var createReducer = ({ config }) => storeInterceptor((data, action) => {
     }
     return __spreadProps(__spreadValues({}, data), { zones: _zones });
   }
-  if (action.type === "set") {
+  if (action.type === "setData") {
     return __spreadValues(__spreadValues({}, data), action.data);
   }
   return data;
+};
+
+// reducer/state.ts
+init_react_import();
+var reduceState = (state, action) => {
+  if (action.type === "setState") {
+    return __spreadValues(__spreadValues({}, state), action.state);
+  }
+  return state;
+};
+
+// reducer/actions.tsx
+init_react_import();
+
+// reducer/index.ts
+var storeInterceptor = (reducer) => {
+  return (appData, action) => {
+    const newAppData = reducer(appData, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setState",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      recordDiff(newAppData);
+    }
+    return newAppData;
+  };
+};
+var createReducer = ({ config }) => storeInterceptor((appData, action) => {
+  const data = reduceData(appData.data, action, config);
+  const state = reduceState(appData.state, action);
+  if (action.type === "set") {
+    return __spreadValues(__spreadValues({}, appData), action.appData);
+  }
+  return { data, state };
 });
 
 // components/LayerTree/index.tsx
@@ -4084,17 +4122,19 @@ var areaContainsZones = (data, area) => {
 
 // lib/flush-zones.ts
 init_react_import();
-var flushZones = (data) => {
-  const containsZones = typeof data.zones !== "undefined";
+var flushZones = (appData) => {
+  const containsZones = typeof appData.data.zones !== "undefined";
   if (containsZones) {
-    Object.keys(data.zones || {}).forEach((zone) => {
-      addToZoneCache(zone, data.zones[zone]);
+    Object.keys(appData.data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, appData.data.zones[zone]);
     });
-    return __spreadProps(__spreadValues({}, data), {
-      zones: {}
+    return __spreadProps(__spreadValues({}, appData), {
+      data: __spreadProps(__spreadValues({}, appData.data), {
+        zones: {}
+      })
     });
   }
-  return data;
+  return appData;
 };
 
 // components/Puck/index.tsx
@@ -4126,15 +4166,29 @@ function Puck({
 }) {
   var _a, _b;
   const [reducer] = (0, import_react28.useState)(() => createReducer({ config }));
-  const [data, dispatch] = (0, import_react28.useReducer)(
+  const initialAppData = {
+    data: initialData,
+    state: { leftSideBarVisible: true, itemSelector: null }
+  };
+  const [appData, dispatch] = (0, import_react28.useReducer)(
     reducer,
-    flushZones(initialData)
+    flushZones(initialAppData)
   );
+  const { data, state } = appData;
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
-    data,
+    appData,
     dispatch
   });
-  const [itemSelector, setItemSelector] = (0, import_react28.useState)(null);
+  const { itemSelector, leftSideBarVisible } = state;
+  const setItemSelector = (0, import_react28.useCallback)(
+    (newItemSelector) => {
+      dispatch({
+        type: "setState",
+        state: { itemSelector: newItemSelector }
+      });
+    },
+    []
+  );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const Page = (0, import_react28.useCallback)(
     (pageProps) => {
@@ -4183,7 +4237,6 @@ function Puck({
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react28.useState)(true);
   const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_beautiful_dnd4.DragDropContext,
@@ -4263,7 +4316,7 @@ function Puck({
                 style: {
                   display: "grid",
                   gridTemplateAreas: '"header header header" "left editor right"',
-                  gridTemplateColumns: `${leftSidebarVisible ? "288px" : "0px"} auto 288px`,
+                  gridTemplateColumns: `${leftSideBarVisible ? "288px" : "0px"} auto 288px`,
                   gridTemplateRows: "min-content auto",
                   height: "100vh",
                   position: "fixed",
@@ -4316,7 +4369,12 @@ function Puck({
                                 children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                   IconButton,
                                   {
-                                    onClick: () => setLeftSidebarVisible(!leftSidebarVisible),
+                                    onClick: () => dispatch({
+                                      type: "setState",
+                                      state: {
+                                        leftSideBarVisible: !leftSideBarVisible
+                                      }
+                                    }),
                                     title: "Toggle left sidebar",
                                     children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(sidebar_default, {})
                                   }
@@ -4552,7 +4610,7 @@ function Puck({
                                 });
                               } else {
                                 dispatch({
-                                  type: "set",
+                                  type: "setData",
                                   data: { root: newProps }
                                 });
                               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.9.1-canary.f4e8d4a",
+  "version": "0.10.0-canary.3fe6284",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",