@measured/puck 0.7.1-canary.9b15c6b → 0.8.0-canary.06b145b

package/dist/index.d.ts

@@ -1,10 +1,15 @@
-import { ReactElement, ReactNode } from 'react';
+import * as react from 'react';
+import { ReactElement, ReactNode, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DragStart, DragUpdate } from 'react-beautiful-dnd';
 
 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;
 } = {
@@ -15,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;
@@ -44,8 +49,13 @@ type DefaultComponentProps = {
 type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
     [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName][0]>;
 };
+type Content<Props extends {
+    [key: string]: any;
+} = {
+    [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>;
 };
@@ -55,7 +65,7 @@ type Config<Props extends {
     [key: string]: any;
 }, RootProps extends DefaultRootProps = DefaultRootProps> = {
     components: {
-        [ComponentName in keyof Props]: ComponentConfig<Props[ComponentName]>;
+        [ComponentName in keyof Props]: ComponentConfig<Props[ComponentName], Props[ComponentName]>;
     };
     root?: ComponentConfig<RootProps & {
         children: ReactNode;
@@ -69,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;
@@ -87,7 +95,8 @@ type Data<Props extends {
     [key: string]: any;
 }> = {
     root: RootProps;
-    content: MappedItem<Props>[];
+    content: Content<Props>;
+    zones?: Record<string, Content<Props>>;
 };
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
@@ -104,6 +113,100 @@ 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;
+    destinationIndex: number;
+    destinationZone: string;
+};
+type DuplicateAction = {
+    type: "duplicate";
+    sourceIndex: number;
+    sourceZone: string;
+};
+type ReplaceAction = {
+    type: "replace";
+    destinationIndex: number;
+    destinationZone: string;
+    data: any;
+};
+type ReorderAction = {
+    type: "reorder";
+    sourceIndex: number;
+    destinationIndex: number;
+    destinationZone: string;
+};
+type MoveAction = {
+    type: "move";
+    sourceIndex: number;
+    sourceZone: string;
+    destinationIndex: number;
+    destinationZone: string;
+};
+type RemoveAction = {
+    type: "remove";
+    index: number;
+    zone: string;
+};
+type SetDataAction = {
+    type: "set";
+    data: Partial<Data>;
+};
+type RegisterZoneAction = {
+    type: "registerZone";
+    zone: string;
+};
+type UnregisterZoneAction = {
+    type: "unregisterZone";
+    zone: string;
+};
+type PuckAction = ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetDataAction | RegisterZoneAction | UnregisterZoneAction;
+
+type PathData = Record<string, {
+    selector: ItemSelector | null;
+    label: string;
+}[]>;
+type DropZoneContext = {
+    data: Data;
+    config: Config;
+    itemSelector?: ItemSelector | null;
+    setItemSelector?: (newIndex: ItemSelector | null) => void;
+    dispatch?: (action: PuckAction) => void;
+    areaId?: string;
+    draggedItem?: DragStart & Partial<DragUpdate>;
+    placeholderStyle?: CSSProperties;
+    hoveringArea?: string | null;
+    setHoveringArea?: (area: string | null) => void;
+    hoveringZone?: string | null;
+    setHoveringZone?: (zone: string | null) => void;
+    hoveringComponent?: string | null;
+    setHoveringComponent?: (id: string | null) => void;
+    registerZoneArea?: (areaId: string) => void;
+    areasWithZones?: Record<string, boolean>;
+    registerZone?: (zoneCompound: string) => void;
+    unregisterZone?: (zoneCompound: string) => void;
+    activeZones?: Record<string, boolean>;
+    pathData?: PathData;
+    registerPath?: (selector: ItemSelector) => void;
+    mode?: "edit" | "render";
+} | null;
+declare const dropZoneContext: react.Context<DropZoneContext>;
+declare const DropZoneProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: DropZoneContext;
+}) => react_jsx_runtime.JSX.Element;
+
+type DropZoneProps = {
+    zone: string;
+    style?: CSSProperties;
+};
+declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
+
 declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
     children: ReactNode;
     href?: string | undefined;
@@ -141,11 +244,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
     renderHeader?: (props: {
         children: ReactNode;
         data: Data;
-        setData: (data: Data) => void;
+        dispatch: (action: PuckAction) => void;
     }) => ReactElement;
     renderHeaderActions?: (props: {
         data: Data;
-        setData: (data: Data) => void;
+        dispatch: (action: PuckAction) => void;
     }) => ReactElement;
     headerTitle?: string;
     headerPath?: string;
@@ -162,4 +265,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, Button, ComponentConfig, Config, Data, DefaultComponentProps, DefaultRootProps, Field, FieldLabel, Fields, IconButton, Puck, Render };
+export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };