@measured/puck 0.14.0-canary.53b7937 → 0.14.0-canary.5bb1708

package/dist/{Config-0bf39037.d.ts → Config-487c2755.d.ts}

@@ -65,7 +65,7 @@ type ObjectField<Props extends {
 }> = BaseField & {
     type: "object";
     objectFields: {
-        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
+        [SubPropName in keyof Props]: Field<Props[SubPropName]>;
     };
 };
 type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
@@ -146,6 +146,7 @@ type PuckContext = {
 };
 type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = ComponentData<ComponentProps>> = {
     render: PuckComponent<ComponentProps>;
+    label?: string;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
     resolveData?: (data: DataShape, params: {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as Config, D as Data, I as ItemSelector, U as UiState, A as AppState, F as Field, a as DefaultComponentProps, b as DefaultRootProps, M as MappedItem, R as RootDataWithProps, c as RootData } from './Config-0bf39037.js';
-export { g as Adaptor, f as ArrayField, r as ArrayState, n as BaseData, B as BaseField, m as ComponentConfig, o as ComponentData, k as Content, i as CustomField, s as DropZone, h as ExternalField, E as ExternalFieldWithAdaptor, j as Fields, q as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, l as PuckContext, e as RadioField, p as RootDataWithoutProps, S as SelectField, T as TextField, d as TextareaField } from './Config-0bf39037.js';
+import { C as Config, D as Data, I as ItemSelector, U as UiState, A as AppState, F as Field, a as DefaultComponentProps, b as DefaultRootProps, M as MappedItem, R as RootDataWithProps, c as RootData } from './Config-487c2755.js';
+export { g as Adaptor, f as ArrayField, r as ArrayState, n as BaseData, B as BaseField, m as ComponentConfig, o as ComponentData, k as Content, i as CustomField, s as DropZone, h as ExternalField, E as ExternalFieldWithAdaptor, j as Fields, q as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, l as PuckContext, e as RadioField, p as RootDataWithoutProps, S as SelectField, T as TextField, d as TextareaField } from './Config-487c2755.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties, ReactElement, SyntheticEvent } from 'react';
@@ -121,13 +121,14 @@ declare const Drawer: {
         droppableId?: string | undefined;
         direction?: "horizontal" | "vertical" | undefined;
     }): react_jsx_runtime.JSX.Element;
-    Item: ({ name, children, id, index, }: {
+    Item: ({ name, children, id, label, index, }: {
         name: string;
         children?: ((props: {
             children: ReactNode;
             name: string;
         }) => ReactElement) | undefined;
         id?: string | undefined;
+        label?: string | undefined;
         index: number;
     }) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.js

@@ -29382,6 +29382,7 @@ var DrawerItem = ({
   name,
   children,
   id,
+  label,
   index
 }) => {
   const ctx = (0, import_react3.useContext)(drawerContext);
@@ -29391,7 +29392,7 @@ var DrawerItem = ({
     [children]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDraggable, { id: resolvedId, index, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassNameItem("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("name"), children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("name"), children: label != null ? label : name }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DragIcon, {}) })
   ] }) }) }) });
 };
@@ -30074,7 +30075,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                 },
                 children: [
                   content.map((item, i) => {
-                    var _a2, _b;
+                    var _a2, _b, _c;
                     const componentId = item.props.id;
                     const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
                       puck: { renderDropZone: DropZone },
@@ -30104,14 +30105,14 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                               children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                 DraggableComponent,
                                 {
-                                  label: item.type.toString(),
+                                  label: (_b = config.components[item.type]["label"]) != null ? _b : item.type.toString(),
                                   id: `draggable-${componentId}`,
                                   index: i,
                                   isSelected,
                                   isLocked: userIsDragging,
                                   forceHover: hoveringComponent === componentId && !userIsDragging,
                                   indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
-                                  isLoading: (_b = appContext2.componentState[componentId]) == null ? void 0 : _b.loading,
+                                  isLoading: (_c = appContext2.componentState[componentId]) == null ? void 0 : _c.loading,
                                   onMount: () => {
                                     ctx.registerPath({
                                       index: i,
@@ -32260,10 +32261,11 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("ComponentList", styles_module_default15);
 var ComponentListItem = ({
   name,
+  label,
   index
 }) => {
   const { overrides } = useAppContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer.Item, { name, index, children: overrides.componentItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer.Item, { label, name, index, children: overrides.componentItem });
 };
 var ComponentList = ({
   children,
@@ -32292,9 +32294,11 @@ var ComponentList = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName20("content"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer, { droppableId: `component-list${title ? `:${title}` : ""}`, children: children || Object.keys(config.components).map((componentKey, i) => {
+      var _a;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ComponentListItem,
         {
+          label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
           name: componentKey,
           index: i
         },
@@ -32325,10 +32329,12 @@ var useComponentList = (config, ui) => {
               id: categoryKey,
               title: category.title || categoryKey,
               children: category.components.map((componentName, i) => {
+                var _a2;
                 matchedComponents.push(componentName);
                 return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   ComponentList.Item,
                   {
+                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
                     name: componentName,
                     index: i
                   },
@@ -32351,10 +32357,12 @@ var useComponentList = (config, ui) => {
               id: "other",
               title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
               children: remainingComponents.map((componentName, i) => {
+                var _a2;
                 return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
+                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
                     index: i
                   },
                   componentName
@@ -32367,7 +32375,7 @@ var useComponentList = (config, ui) => {
       }
       setComponentList(_componentList);
     }
-  }, [config.categories, ui.componentList]);
+  }, [config.categories, config.components, ui.componentList]);
   return componentList;
 };
 
@@ -32471,6 +32479,7 @@ var getClassName21 = get_class_name_factory_default("LayerTree", styles_module_d
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default16);
 var LayerTree = ({
   data,
+  config,
   zoneContent,
   itemSelector,
   setItemSelector,
@@ -32488,6 +32497,7 @@ var LayerTree = ({
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("ul", { className: getClassName21(), children: [
       zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
+        var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
         const containsZone = Object.keys(zonesForItem).length > 0;
@@ -32552,7 +32562,7 @@ var LayerTree = ({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassNameLayer("title"), children: [
                       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("name"), children: item.type })
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
                     ] })
                   ]
                 }
@@ -32560,6 +32570,7 @@ var LayerTree = ({
               containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 LayerTree,
                 {
+                  config,
                   data,
                   zoneContent: zones[zoneKey],
                   setItemSelector,
@@ -32581,7 +32592,7 @@ var LayerTree = ({
 var import_react24 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Outline = () => {
-  const { dispatch, state, overrides } = useAppContext();
+  const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const setItemSelector = (0, import_react24.useCallback)(
@@ -32598,6 +32609,7 @@ var Outline = () => {
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       LayerTree,
       {
+        config,
         data,
         label: areaContainsZones(data, "root") ? rootDroppableId : "",
         zoneContent: data.content,
@@ -32610,6 +32622,7 @@ var Outline = () => {
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           LayerTree,
           {
+            config,
             data,
             label: zoneKey,
             zone: zoneKey,
@@ -32750,6 +32763,7 @@ function Puck({
   headerTitle,
   headerPath
 }) {
+  var _a;
   const historyStore = useHistoryStore();
   const [reducer] = (0, import_react26.useState)(
     () => createReducer({ config, record: historyStore.record })
@@ -32859,8 +32873,8 @@ function Puck({
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
       );
-      const RenderHeader = (_a) => {
-        var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
+      const RenderHeader = (_a2) => {
+        var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
@@ -33098,7 +33112,7 @@ function Puck({
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
-                          title: selectedItem ? selectedItem.type : "Page",
+                          title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
                           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Fields, {})
                         }
                       ) })

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-0bf39037.js';
+import { C as Config, D as Data } from './Config-487c2755.js';
 import 'react';
 
 declare function Render<UserConfig extends Config<any, any, any> = Config<any, any, any>>({ config, data }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.0-canary.53b7937",
+  "version": "0.14.0-canary.5bb1708",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",