@measured/puck 0.9.1-canary.efa4f45 → 0.10.0-canary.2a12826

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 AppState = {
+    leftSideBarVisible: boolean;
+    itemSelector?: ItemSelector | null;
+    arrayState: Record<string, ArrayState | undefined>;
+};
+type AppData = {
+    data: Data;
+    state: AppState;
+};
 
 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: "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 +190,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 +292,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, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };