@measured/puck 0.9.1-canary.f4e8d4a → 0.10.0-canary.18b3473

package/README.md

@@ -112,19 +112,32 @@ The plugin API follows a React paradigm. Each plugin passed to the Puck editor c
 - `renderRootFields` (`Component`): Render the root fields
 - `renderFields` (`Component`): Render the fields for the currently selected component
 
-Each render function receives the `children` prop, which you must render, and the `data` prop, which can be used to read the data model.
+Each render function receives three props:
+
+- **children** (`ReactNode`): The normal contents of the root or field. You must render this.
+- **state** (`AppState`): The current application state, including data and UI state
+- **dispatch** (`(action: PuckAction) => void`): The Puck dispatcher, used for making data changes or updating the UI. See the [action definitions](https://github.com/measuredco/puck/blob/main/packages/core/reducer/actions.tsx) for a full reference of available mutations.
 
 #### Example
 
-Here's a basic plugin that renders a "My plugin" heading in the root field area:
+Here's an example plugin that creates a button to toggle the left side-bar:
 
 ```jsx
 const myPlugin = {
-  renderRootFields: (props) => (
+  renderRootFields: ({ children, dispatch, state }) => (
     <div>
-      {props.children}
-
-      <h2>My plugin</h2>
+      {children}
+
+      <button
+        onClick={() => {
+          dispatch({
+            type: "setUi",
+            ui: { leftSideBarVisible: !state.ui.leftSideBarVisible },
+          });
+        }}
+      >
+        Toggle side-bar
+      </button>
     </div>
   ),
 };
@@ -285,9 +298,19 @@ A `Field` represents a user input field shown in the Puck interface.
   - **onChange** (`(value: any) => void`): Callback to change the value
   - **readOnly** (`boolean` | `undefined`): Whether or not the field should be in readOnly mode
 
+### `AppState`
+
+The `AppState` object stores the puck application state.
+
+- **data** (`Data`): The page data currently being rendered
+- **ui** (`object`):
+  - **leftSideBarVisible** (boolean): Whether or not the left side bar is visible
+  - **itemSelector** (object): An object describing which item is selected
+  - **arrayState** (object): An object describing the internal state of array items
+
 ### `Data`
 
-The `Data` object stores the puck state.
+The `Data` object stores the puck page data.
 
 - **root** (`object`):
   - **title** (string): Title of the content, typically used for the page title

package/dist/index.css

@@ -382,6 +382,222 @@
   cursor: pointer;
 }
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
+._Input_nkpu6_1 {
+  color: var(--puck-color-grey-3);
+  padding: 16px;
+  padding-bottom: 12px;
+  display: block;
+  font-family: var(--puck-font-stack);
+}
+._Input_nkpu6_1 ._Input_nkpu6_1 {
+  padding: 0px;
+}
+._Input_nkpu6_1 * {
+  box-sizing: border-box;
+}
+._Input_nkpu6_1 + ._Input_nkpu6_1 {
+  border-top: 1px solid var(--puck-color-grey-8);
+  margin-top: 8px;
+}
+._Input_nkpu6_1 ._Input_nkpu6_1 + ._Input_nkpu6_1 {
+  border-top: 0px;
+  margin-top: 12px;
+}
+._Input-label_nkpu6_27 {
+  display: flex;
+  padding-bottom: 12px;
+  font-size: var(--puck-font-size-xxs);
+  font-weight: 600;
+}
+._Input-labelIcon_nkpu6_34 {
+  color: var(--puck-color-grey-6);
+  margin-right: 4px;
+}
+._Input-input_nkpu6_39 {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--puck-color-grey-8);
+  border-radius: 4px;
+  font-family: inherit;
+  padding: 12px 16px;
+  width: 100%;
+}
+._Input_nkpu6_1 select._Input-input_nkpu6_39 {
+  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;
+  background-position: calc(100% - 12px) calc(50% + 3px);
+  background-repeat: no-repeat;
+  background-color: white;
+}
+._Input--readOnly_nkpu6_60 ._Input-input_nkpu6_39 {
+  background-color: var(--puck-color-grey-10);
+  border-color: var(--puck-color-grey-8);
+}
+._Input-input_nkpu6_39:hover {
+  border-color: var(--puck-color-neutral-3);
+}
+._Input-radioGroupItems_nkpu6_69 {
+  display: flex;
+  border: 1px solid var(--puck-color-grey-7);
+  border-radius: 4px;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+._Input-radio_nkpu6_69 {
+  border-right: 1px solid var(--puck-color-grey-7);
+  flex-grow: 1;
+}
+._Input-radio_nkpu6_69:last-of-type {
+  border-right: none;
+}
+._Input-radioInner_nkpu6_86 {
+  color: var(--puck-color-grey-4);
+  font-size: var(--puck-font-size-xxxs);
+  padding: 8px 12px;
+  text-align: center;
+}
+._Input-radioInner_nkpu6_86:hover {
+  background-color: var(--puck-color-azure-9);
+  cursor: pointer;
+}
+._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98:checked ~ ._Input-radioInner_nkpu6_86 {
+  background-color: var(--puck-color-azure-9);
+  color: var(--puck-color-grey-2);
+  font-weight: 500;
+}
+._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98 {
+  display: none;
+}
+._Input_nkpu6_1 textarea._Input-input_nkpu6_39 {
+  margin-bottom: -4px;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
+._ArrayField_zp334_5 {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--puck-color-grey-8);
+  border: 1px solid var(--puck-color-grey-8);
+  border-radius: 4px;
+}
+._ArrayField--isDraggingFrom_zp334_13 {
+  background-color: var(--puck-color-azure-9);
+}
+._ArrayField-addButton_zp334_17 {
+  background-color: white;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  color: var(--puck-color-azure-4);
+  justify-content: center;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  padding: 16px;
+  text-align: left;
+}
+._ArrayField--hasItems_zp334_31 > ._ArrayField-addButton_zp334_17 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+._ArrayField_zp334_5:not(._ArrayField--isDraggingFrom_zp334_13) > ._ArrayField-addButton_zp334_17:hover {
+  background: var(--puck-color-azure-9);
+  color: var(--puck-color-azure-4);
+}
+._ArrayFieldItem_zp334_45 {
+  background: white;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  display: block;
+  margin-bottom: 1px;
+}
+._ArrayField--isDraggingFrom_zp334_13 > ._ArrayFieldItem_zp334_45:not(._ArrayFieldItem--isDragging_zp334_53) {
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  margin-bottom: 0;
+}
+._ArrayFieldItem--isExpanded_zp334_58 {
+  border-bottom: 0;
+  outline: 1px solid var(--puck-color-azure-6);
+}
+._ArrayFieldItem--isDragging_zp334_53 {
+  box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
+}
+._ArrayFieldItem_zp334_45 + ._ArrayFieldItem_zp334_45 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+._ArrayFieldItem-summary_zp334_72 {
+  color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--puck-font-size-xxs);
+  list-style: none;
+  padding: 12px 16px;
+  position: relative;
+  overflow: hidden;
+}
+._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
+  font-weight: 600;
+}
+._ArrayFieldItem_zp334_45:first-of-type > ._ArrayFieldItem-summary_zp334_72 {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+._ArrayFieldItem-summary_zp334_72:hover,
+._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
+  background: var(--puck-color-azure-9);
+  cursor: pointer;
+  color: var(--puck-color-azure-4);
+}
+._ArrayFieldItem-summary_zp334_72::-webkit-details-marker {
+  display: none;
+}
+._ArrayFieldItem-body_zp334_104 {
+  display: none;
+}
+._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-body_zp334_104 {
+  display: block;
+}
+._ArrayFieldItem-fieldset_zp334_112 {
+  border: none;
+  border-top: 1px solid var(--puck-color-grey-8);
+  margin: 0;
+  padding: 16px;
+}
+._ArrayFieldItem-rhs_zp334_119 {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+._ArrayFieldItem-actions_zp334_125 {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+}
+._ArrayFieldItem-summary_zp334_72:hover > ._ArrayFieldItem-rhs_zp334_119 > ._ArrayFieldItem-actions_zp334_125 {
+  opacity: 1;
+}
+._ArrayFieldItem-action_zp334_125:hover {
+  background: var(--puck-color-grey-9);
+  border-radius: 4px;
+  color: var(--puck-color-blue);
+  cursor: pointer;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
+._DragIcon_o29on_1 {
+  color: var(--puck-color-grey-4);
+  padding: 4px;
+  border-radius: 4px;
+}
+._DragIcon_o29on_1:hover {
+  cursor: grab;
+  background: var(--puck-color-grey-9);
+}
+
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
 ._ExternalInput_l4bks_1 {
   font-family: var(--puck-font-stack);
@@ -506,196 +722,33 @@
   padding-left: 20px;
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_izwhv_1 {
-  color: var(--puck-color-grey-3);
-  padding: 16px;
-  padding-bottom: 12px;
-  display: block;
-  font-family: var(--puck-font-stack);
-}
-._Input_izwhv_1 ._Input_izwhv_1 {
-  padding: 0px;
-}
-._Input_izwhv_1 * {
-  box-sizing: border-box;
-}
-._Input_izwhv_1 + ._Input_izwhv_1 {
-  border-top: 1px solid var(--puck-color-grey-8);
-  margin-top: 8px;
-}
-._Input_izwhv_1 ._Input_izwhv_1 + ._Input_izwhv_1 {
-  border-top: 0px;
-  margin-top: 12px;
-}
-._Input-label_izwhv_27 {
-  display: flex;
-  padding-bottom: 12px;
-  font-size: var(--puck-font-size-xxs);
-  font-weight: 600;
-}
-._Input-labelIcon_izwhv_34 {
-  color: var(--puck-color-grey-6);
-  margin-right: 4px;
-}
-._Input-input_izwhv_39 {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--puck-color-grey-8);
-  border-radius: 4px;
-  font-family: inherit;
-  padding: 12px 16px;
-  width: 100%;
-}
-._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;
-  background-position: calc(100% - 12px) calc(50% + 3px);
-  background-repeat: no-repeat;
-  background-color: white;
-}
-._Input--readOnly_izwhv_60 ._Input-input_izwhv_39 {
-  background-color: var(--puck-color-grey-10);
-  border-color: var(--puck-color-grey-8);
-}
-._Input-input_izwhv_39:hover {
-  border-color: var(--puck-color-neutral-3);
-}
-._Input-arrayItem_izwhv_69 {
-  background: white;
-  border: 1px solid var(--puck-color-grey-8);
-  border-radius: 4px;
-}
-._Input-arrayItem_izwhv_69 > summary {
-  color: var(--puck-color-grey-3);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--puck-font-size-xxs);
-  list-style: none;
-  padding: 12px 16px;
-  position: relative;
-}
-._Input-arrayItem_izwhv_69 > summary:hover {
-  cursor: pointer;
-  color: var(--puck-color-blue);
-}
-._Input-arrayItem_izwhv_69 > summary::-webkit-details-marker {
-  display: none;
-}
-._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: 16px;
-}
-._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_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input-label_izwhv_27 {
-  padding-bottom: 4px;
-}
-._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116 {
-  border-radius: 4px;
-  opacity: 0;
-}
-._Input-arrayItem_izwhv_69 summary:hover ._Input-arrayItemAction_izwhv_116 {
-  opacity: 1;
-}
-._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116:hover {
-  background: var(--puck-color-grey-9);
-  color: var(--puck-color-blue);
-  cursor: pointer;
-}
-._Input-arrayItem_izwhv_69 + ._Input-arrayItem_izwhv_69 {
-  margin-top: 12px;
-}
-._Input-addButton_izwhv_135 {
-  background-color: white;
-  border: none;
-  border-radius: 4px;
-  color: var(--puck-color-blue);
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  margin-top: 12px;
-  padding: 12px 16px;
-  text-align: left;
-}
-._Input-addButton_izwhv_135:hover {
-  background: var(--puck-color-grey-10);
-}
-._Input-array_izwhv_69 {
-  overflow: hidden;
-}
-._Input-radioGroupItems_izwhv_156 {
-  display: flex;
-  border: 1px solid var(--puck-color-grey-7);
-  border-radius: 4px;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-._Input-radio_izwhv_156 {
-  border-right: 1px solid var(--puck-color-grey-7);
-  flex-grow: 1;
-}
-._Input-radio_izwhv_156:last-of-type {
-  border-right: none;
-}
-._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_izwhv_173:hover {
-  background-color: var(--puck-color-azure-9);
-  cursor: pointer;
-}
-._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_izwhv_156 ._Input-radioInput_izwhv_185 {
-  display: none;
-}
-._Input_izwhv_1 textarea._Input-input_izwhv_39 {
-  margin-bottom: -4px;
-}
-
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_1ybn0_1 {
-  display: grid;
+._ComponentList_bvy0z_1 {
   font-family: var(--puck-font-stack);
-  grid-template-columns: 1fr;
   max-width: 100%;
-  grid-gap: 12px;
 }
-._ComponentList-item_1ybn0_9,
-._ComponentList-itemShadow_1ybn0_10 {
+._ComponentList-item_bvy0z_6 {
   background: white;
   padding: 12px;
   display: flex;
   border: 1px var(--puck-color-grey-8) solid;
-  border-radius: 8px;
+  border-radius: 4px;
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   cursor: grab;
+  margin-bottom: 12px;
 }
-._ComponentList-item_1ybn0_9:last-of-type,
-._ComponentList-itemShadow_1ybn0_10:last-of-type {
+._ComponentList-item_bvy0z_6:last-of-type {
   margin-bottom: 0px;
 }
-._ComponentList-itemIcon_1ybn0_28 {
+._ComponentList-itemIcon_bvy0z_24 {
   color: var(--puck-color-grey-4);
 }
-._ComponentList-item_1ybn0_9:hover {
+._ComponentList_bvy0z_1:not(._ComponentList--isDraggingFrom_bvy0z_28) ._ComponentList-item_bvy0z_6:hover {
   background-color: var(--puck-color-azure-9);
+  color: var(--puck-color-azure-4);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */

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,23 @@ type Data<Props extends {
     content: Content<Props>;
     zones?: Record<string, Content<Props>>;
 };
+type ItemWithId = {
+    _arrayId: string;
+    data: any;
+};
+type ArrayState = {
+    items: ItemWithId[];
+    openId: string;
+};
+type UiState = {
+    leftSideBarVisible: boolean;
+    itemSelector: ItemSelector | null;
+    arrayState: Record<string, ArrayState | undefined>;
+};
+type AppState = {
+    data: Data;
+    ui: UiState;
+};
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
     children: ReactNode;
@@ -113,11 +135,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 +170,18 @@ type RemoveAction = {
     index: number;
     zone: string;
 };
+type SetStateAction = {
+    type: "setUi";
+    ui: Partial<UiState>;
+};
 type SetDataAction = {
-    type: "set";
+    type: "setData";
     data: Partial<Data>;
 };
+type SetAction = {
+    type: "set";
+    state: Partial<AppState>;
+};
 type RegisterZoneAction = {
     type: "registerZone";
     zone: string;
@@ -165,12 +190,14 @@ 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;
+    path: string[];
     label: string;
-}[]>;
+}>;
 type DropZoneContext = {
     data: Data;
     config: Config;
@@ -223,15 +250,18 @@ declare const IconButton: ({ children, href, onClick, variant, type, disabled, t
 type Plugin = {
     renderRootFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderRoot?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
 };
 
@@ -243,11 +273,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
     plugins?: Plugin[];
     renderHeader?: (props: {
         children: ReactNode;
-        data: Data;
         dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement;
     renderHeaderActions?: (props: {
-        data: Data;
+        state: AppState;
         dispatch: (action: PuckAction) => void;
     }) => ReactElement;
     headerTitle?: string;
@@ -265,4 +295,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, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, UiState, dropZoneContext };