@measured/puck 0.10.0-canary.2a12826 → 0.10.0-canary.6a9145c

package/dist/index.d.ts

@@ -195,9 +195,9 @@ type PuckAction = {
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
 
 type PathData = Record<string, {
-    selector: ItemSelector | null;
+    path: string[];
     label: string;
-}[]>;
+}>;
 type DropZoneContext = {
     data: Data;
     config: Config;
@@ -292,4 +292,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };
+export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, dropZoneContext };

package/dist/index.js

@@ -2646,7 +2646,7 @@ var getZoneId = (zoneCompound) => {
   if (zoneCompound && zoneCompound.indexOf(":") > -1) {
     return zoneCompound.split(":");
   }
-  return ["root", zoneCompound];
+  return [rootDroppableId, zoneCompound];
 };
 
 // components/DropZone/context.tsx
@@ -2713,15 +2713,15 @@ var DropZoneProvider = ({
       }
       const [area] = getZoneId(selector.zone);
       setPathData((latestPathData = {}) => {
-        const pathData2 = latestPathData[area] || [];
+        const parentPathData = latestPathData[area] || { path: [] };
         return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: [
-            ...pathData2,
-            {
-              selector,
-              label: item.type
-            }
-          ]
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...selector.zone ? [selector.zone] : []
+            ],
+            label: item.type
+          }
         });
       });
     },
@@ -3090,7 +3090,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -3189,8 +3189,10 @@ var appContext = (0, import_react24.createContext)({
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
   const mainContext = (0, import_react24.useContext)(appContext);
+  const selectedItem = mainContext.appData.state.itemSelector ? getItem(mainContext.appData.state.itemSelector, mainContext.appData.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
-    // Helper
+    // Helpers
+    selectedItem,
     setState: (state, recordHistory) => {
       return mainContext.dispatch({
         type: "setState",
@@ -3852,6 +3854,72 @@ var Heading = ({ children, rank, size = "m" }) => {
   );
 };
 
+// lib/use-breadcrumbs.ts
+init_react_import();
+var import_react28 = 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: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
+    );
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
+      }
+    ];
+  }, []);
+};
+var useBreadcrumbs = (renderCount) => {
+  const {
+    appData: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react28.useContext)(dropZoneContext);
+  return (0, import_react28.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+};
+
 // components/SidebarSection/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
@@ -3859,23 +3927,24 @@ var SidebarSection = ({
   children,
   title,
   background,
-  breadcrumbs = [],
-  breadcrumbClick,
+  showBreadcrumbs,
   noPadding
 }) => {
+  const { setState } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
-      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
+      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             className: getClassName16("breadcrumbLabel"),
-            onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
+            onClick: () => setState({ itemSelector: breadcrumb.selector }),
             children: breadcrumb.label
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
-      ] }, i)),
+      ] }, i)) : null,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
@@ -3887,15 +3956,15 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react28.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react28.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react29.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react29.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -3967,7 +4036,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -4312,7 +4381,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -4331,12 +4400,9 @@ init_react_import();
 var isChildOfZone = (item, maybeChild, ctx) => {
   var _a;
   const { data, pathData = {} } = ctx || {};
-  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.find((path) => {
-    if (path.selector) {
-      const pathItem = getItem(path.selector, data);
-      return (pathItem == null ? void 0 : pathItem.props.id) === item.props.id;
-    }
-    return false;
+  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.path.find((zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    return area === item.props.id;
   })) : false;
 };
 
@@ -4353,7 +4419,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react30.useContext)(dropZoneContext);
+  const ctx = (0, import_react31.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
@@ -4504,7 +4570,7 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react31.useState)(() => createReducer({ config }));
+  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
   const initialAppData = {
     data: initialData,
     state: {
@@ -4512,7 +4578,7 @@ function Puck({
       arrayState: {}
     }
   };
-  const [appData, dispatch] = (0, import_react31.useReducer)(
+  const [appData, dispatch] = (0, import_react32.useReducer)(
     reducer,
     flushZones(initialAppData)
   );
@@ -4522,7 +4588,7 @@ function Puck({
     dispatch
   });
   const { itemSelector, leftSideBarVisible } = state;
-  const setItemSelector = (0, import_react31.useCallback)(
+  const setItemSelector = (0, import_react32.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setState",
@@ -4532,7 +4598,7 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react31.useCallback)(
+  const Page = (0, import_react32.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4547,7 +4613,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react31.useCallback)(
+  const PageFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
@@ -4559,7 +4625,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react31.useCallback)(
+  const ComponentFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
@@ -4574,12 +4640,12 @@ 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_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { appData, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_react_beautiful_dnd5.DragDropContext,
     {
@@ -4647,11 +4713,6 @@ function Puck({
             areaId: "root"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
-            let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
-            if (path) {
-              path = [{ label: "Page", selector: null }, ...path];
-              path = path.slice(path.length - 2, path.length - 1);
-            }
             return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "div",
               {
@@ -4909,8 +4970,7 @@ function Puck({
                         SidebarSection,
                         {
                           noPadding: true,
-                          breadcrumbs: path,
-                          breadcrumbClick: (breadcrumb) => setItemSelector(breadcrumb.selector),
+                          showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
                             var _a2, _b2, _c, _d;

package/package.json

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