@measured/puck 0.8.0-canary.6e95652 → 0.8.0-canary.e4cab76

package/dist/index.css

@@ -502,38 +502,38 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_16exs_1 {
+._Input_izwhv_1 {
   color: var(--puck-color-grey-3);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
   font-family: var(--puck-font-stack);
 }
-._Input_16exs_1 ._Input_16exs_1 {
+._Input_izwhv_1 ._Input_izwhv_1 {
   padding: 0px;
 }
-._Input_16exs_1 * {
+._Input_izwhv_1 * {
   box-sizing: border-box;
 }
-._Input_16exs_1 + ._Input_16exs_1 {
+._Input_izwhv_1 + ._Input_izwhv_1 {
   border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
-._Input_16exs_1 ._Input_16exs_1 + ._Input_16exs_1 {
+._Input_izwhv_1 ._Input_izwhv_1 + ._Input_izwhv_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_16exs_27 {
+._Input-label_izwhv_27 {
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_16exs_34 {
+._Input-labelIcon_izwhv_34 {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
 }
-._Input-input_16exs_39 {
+._Input-input_izwhv_39 {
   border-width: 1px;
   border-style: solid;
   border-color: var(--puck-color-grey-8);
@@ -542,7 +542,7 @@
   padding: 12px 16px;
   width: 100%;
 }
-._Input_16exs_1 select {
+._Input_izwhv_1 select {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -550,19 +550,19 @@
   background-repeat: no-repeat;
   background-color: white;
 }
-._Input--readOnly_16exs_60 ._Input-input_16exs_39 {
+._Input--readOnly_izwhv_60 ._Input-input_izwhv_39 {
   background-color: var(--puck-color-grey-10);
   border-color: var(--puck-color-grey-8);
 }
-._Input-input_16exs_39:hover {
+._Input-input_izwhv_39:hover {
   border-color: var(--puck-color-neutral-3);
 }
-._Input-arrayItem_16exs_69 {
+._Input-arrayItem_izwhv_69 {
   background: white;
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
 }
-._Input-arrayItem_16exs_69 > summary {
+._Input-arrayItem_izwhv_69 > summary {
   color: var(--puck-color-grey-3);
   display: flex;
   align-items: center;
@@ -572,43 +572,42 @@
   padding: 12px 16px;
   position: relative;
 }
-._Input-arrayItem_16exs_69 > summary:hover {
+._Input-arrayItem_izwhv_69 > summary:hover {
   cursor: pointer;
   color: var(--puck-color-blue);
 }
-._Input-arrayItem_16exs_69 > summary::-webkit-details-marker {
+._Input-arrayItem_izwhv_69 > summary::-webkit-details-marker {
   display: none;
 }
-._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 {
+._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 {
   background-color: var(--puck-color-grey-11);
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
-  padding-bottom: 16px;
-  padding-top: 16px;
+  padding: 16px;
 }
-._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input_16exs_1 + ._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input_16exs_1 {
+._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 + ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 {
   margin-top: 16px;
 }
-._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input-label_16exs_27 {
+._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input-label_izwhv_27 {
   padding-bottom: 4px;
 }
-._Input-arrayItem_16exs_69 ._Input-arrayItemAction_16exs_117 {
+._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116 {
   border-radius: 4px;
   opacity: 0;
 }
-._Input-arrayItem_16exs_69 summary:hover ._Input-arrayItemAction_16exs_117 {
+._Input-arrayItem_izwhv_69 summary:hover ._Input-arrayItemAction_izwhv_116 {
   opacity: 1;
 }
-._Input-arrayItem_16exs_69 ._Input-arrayItemAction_16exs_117:hover {
+._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116:hover {
   background: var(--puck-color-grey-9);
   color: var(--puck-color-blue);
   cursor: pointer;
 }
-._Input-arrayItem_16exs_69 + ._Input-arrayItem_16exs_69 {
+._Input-arrayItem_izwhv_69 + ._Input-arrayItem_izwhv_69 {
   margin-top: 12px;
 }
-._Input-addButton_16exs_136 {
+._Input-addButton_izwhv_135 {
   background-color: white;
   border: none;
   border-radius: 4px;
@@ -620,45 +619,45 @@
   padding: 12px 16px;
   text-align: left;
 }
-._Input-addButton_16exs_136:hover {
+._Input-addButton_izwhv_135:hover {
   background: var(--puck-color-grey-10);
 }
-._Input-array_16exs_69 {
+._Input-array_izwhv_69 {
   overflow: hidden;
 }
-._Input-radioGroupItems_16exs_157 {
+._Input-radioGroupItems_izwhv_156 {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);
   border-radius: 4px;
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_16exs_157 {
+._Input-radio_izwhv_156 {
   border-right: 1px solid var(--puck-color-grey-7);
   flex-grow: 1;
 }
-._Input-radio_16exs_157:last-of-type {
+._Input-radio_izwhv_156:last-of-type {
   border-right: none;
 }
-._Input-radioInner_16exs_174 {
+._Input-radioInner_izwhv_173 {
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   padding: 8px 12px;
   text-align: center;
 }
-._Input-radioInner_16exs_174:hover {
+._Input-radioInner_izwhv_173:hover {
   background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
-._Input-radio_16exs_157 ._Input-radioInput_16exs_186:checked ~ ._Input-radioInner_16exs_174 {
+._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185:checked ~ ._Input-radioInner_izwhv_173 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-2);
   font-weight: 500;
 }
-._Input-radio_16exs_157 ._Input-radioInput_16exs_186 {
+._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185 {
   display: none;
 }
-._Input_16exs_1 textarea._Input-input_16exs_39 {
+._Input_izwhv_1 textarea._Input-input_izwhv_39 {
   margin-bottom: -4px;
 }
 
@@ -695,51 +694,52 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
-._SidebarSection_ivnrs_1 {
+._SidebarSection_f1p35_1 {
   display: flex;
   position: relative;
   flex-direction: column;
+  color: black;
 }
-._SidebarSection_ivnrs_1:last-of-type {
+._SidebarSection_f1p35_1:last-of-type {
   flex-grow: 1;
 }
-._SidebarSection-title_ivnrs_11 {
+._SidebarSection-title_f1p35_12 {
   background: white;
   padding: 16px;
   border-bottom: 1px solid var(--puck-color-grey-8);
-  overflow-x: scroll;
+  overflow-x: auto;
 }
-._SidebarSection-content_ivnrs_18 {
+._SidebarSection-content_f1p35_19 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   padding: 16px;
 }
-._SidebarSection--noPadding_ivnrs_23 ._SidebarSection-content_ivnrs_18 {
+._SidebarSection--noPadding_f1p35_24 ._SidebarSection-content_f1p35_19 {
   padding: 0px;
 }
-._SidebarSection_ivnrs_1:last-of-type ._SidebarSection-content_ivnrs_18 {
+._SidebarSection_f1p35_1:last-of-type ._SidebarSection-content_f1p35_19 {
   border-bottom: none;
   flex-grow: 1;
 }
-._SidebarSection-breadcrumbLabel_ivnrs_32 {
+._SidebarSection-breadcrumbLabel_f1p35_33 {
   color: var(--puck-color-azure-3);
   flex-shrink: 0;
 }
-._SidebarSection-breadcrumbLabel_ivnrs_32:hover {
+._SidebarSection-breadcrumbLabel_f1p35_33:hover {
   color: var(--puck-color-azure-4);
   cursor: pointer;
   text-decoration: underline;
 }
-._SidebarSection-breadcrumbs_ivnrs_43 {
+._SidebarSection-breadcrumbs_f1p35_44 {
   align-items: center;
   display: flex;
   gap: 4px;
 }
-._SidebarSection-breadcrumb_ivnrs_32 {
+._SidebarSection-breadcrumb_f1p35_33 {
   align-items: center;
   display: flex;
   gap: 4px;
 }
-._SidebarSection-heading_ivnrs_55 {
+._SidebarSection-heading_f1p35_56 {
   padding-right: 16px;
 }
 

package/dist/index.d.ts

@@ -7,6 +7,9 @@ type Adaptor<AdaptorParams = {}> = {
     name: string;
     fetchList: (adaptorParams?: AdaptorParams) => Promise<Record<string, any>[] | null>;
 };
+type WithId<T> = T & {
+    id: string;
+};
 type Field<Props extends {
     [key: string]: any;
 } = {
@@ -17,7 +20,7 @@ type Field<Props extends {
     adaptor?: Adaptor;
     adaptorParams?: object;
     arrayFields?: {
-        [SubPropName in keyof Props]: Field<Props[SubPropName]>;
+        [SubPropName in keyof Props]: Field<Props[SubPropName][0]>;
     };
     getItemSummary?: (item: Props, index?: number) => string;
     defaultItemProps?: Props;
@@ -52,7 +55,7 @@ type Content<Props extends {
     [key: string]: any;
 }> = MappedItem<Props>[];
 type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps> = {
-    render: (props: ComponentProps) => ReactElement;
+    render: (props: WithId<ComponentProps>) => ReactElement;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
 };
@@ -76,11 +79,9 @@ type MappedItem<Props extends {
     [key: string]: any;
 }> = {
     type: keyof Props;
-    props: {
+    props: WithId<{
         [key: string]: any;
-    } & {
-        id: string;
-    };
+    }>;
 };
 type Data<Props extends {
     [key: string]: any;

package/dist/index.js

@@ -1004,7 +1004,7 @@ var ExternalInput = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "Input": "_Input_16exs_1", "Input-label": "_Input-label_16exs_27", "Input-labelIcon": "_Input-labelIcon_16exs_34", "Input-input": "_Input-input_16exs_39", "Input--readOnly": "_Input--readOnly_16exs_60", "Input-arrayItem": "_Input-arrayItem_16exs_69", "Input-fieldset": "_Input-fieldset_16exs_95", "Input-arrayItemAction": "_Input-arrayItemAction_16exs_117", "Input-addButton": "_Input-addButton_16exs_136", "Input-array": "_Input-array_16exs_69", "Input-radioGroupItems": "_Input-radioGroupItems_16exs_157", "Input-radio": "_Input-radio_16exs_157", "Input-radioInner": "_Input-radioInner_16exs_174", "Input-radioInput": "_Input-radioInput_16exs_186" };
+var styles_module_default4 = { "Input": "_Input_izwhv_1", "Input-label": "_Input-label_izwhv_27", "Input-labelIcon": "_Input-labelIcon_izwhv_34", "Input-input": "_Input-input_izwhv_39", "Input--readOnly": "_Input--readOnly_izwhv_60", "Input-arrayItem": "_Input-arrayItem_izwhv_69", "Input-fieldset": "_Input-fieldset_izwhv_95", "Input-arrayItemAction": "_Input-arrayItemAction_izwhv_116", "Input-addButton": "_Input-addButton_izwhv_135", "Input-array": "_Input-array_izwhv_69", "Input-radioGroupItems": "_Input-radioGroupItems_izwhv_156", "Input-radio": "_Input-radio_izwhv_156", "Input-radioInner": "_Input-radioInner_izwhv_173", "Input-radioInput": "_Input-radioInput_izwhv_185" };
 
 // components/InputOrGroup/index.tsx
 var import_react_feather3 = require("react-feather");
@@ -1357,7 +1357,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "SidebarSection": "_SidebarSection_ivnrs_1", "SidebarSection-title": "_SidebarSection-title_ivnrs_11", "SidebarSection-content": "_SidebarSection-content_ivnrs_18", "SidebarSection--noPadding": "_SidebarSection--noPadding_ivnrs_23", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_ivnrs_32", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_ivnrs_43", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_ivnrs_32", "SidebarSection-heading": "_SidebarSection-heading_ivnrs_55" };
+var styles_module_default6 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
 
 // components/Heading/index.tsx
 init_react_import();
@@ -2056,6 +2056,8 @@ function Puck({
                     {
                       style: {
                         gridArea: "header",
+                        color: "var(--puck-color-black)",
+                        background: "var(--puck-color-white)",
                         borderBottom: "1px solid var(--puck-color-grey-8)"
                       },
                       children: renderHeader ? renderHeader({
@@ -2189,7 +2191,6 @@ function Puck({
                     "div",
                     {
                       style: {
-                        background: "var(--puck-color-grey-10)",
                         padding: 32,
                         overflowY: "auto",
                         gridArea: "editor",
@@ -2202,8 +2203,8 @@ function Puck({
                         {
                           className: "puck-root",
                           style: {
-                            background: "white",
                             border: "1px solid var(--puck-color-grey-8)",
+                            boxShadow: "0px 0px 0px 3rem var(--puck-color-grey-10)",
                             zoom: 0.75
                           },
                           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
@@ -2220,7 +2221,8 @@ function Puck({
                         gridArea: "right",
                         fontFamily: "var(--puck-font-stack)",
                         display: "flex",
-                        flexDirection: "column"
+                        flexDirection: "column",
+                        background: "var(--puck-color-white)"
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         SidebarSection,
@@ -2330,7 +2332,7 @@ init_react_import();
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function Render({ config, data }) {
   if (config.root) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) })) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.8.0-canary.6e95652",
+  "version": "0.8.0-canary.e4cab76",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",