@measured/puck 0.16.0-canary.39e7f40 → 0.16.0-canary.48ec0d7

package/dist/{Config-041c35a2.d.ts → Config-VOJqVbHe.d.ts}

@@ -68,7 +68,7 @@ type ObjectField<Props extends {
     [key: string]: any;
 }> = BaseField & {
     type: "object";
-    objectFields: {
+    objectFields: Props extends any[] ? never : {
         [SubPropName in keyof Props]: Field<Props[SubPropName]>;
     };
 };
@@ -259,4 +259,4 @@ type AppState = {
     ui: UiState;
 };
 
-export { AppState as A, BaseData as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, NumberField as N, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, Viewports as V, FieldProps as a, DefaultRootProps as b, DropZoneProps as c, DefaultComponentProps as d, RootData as e, ComponentData as f, Content as g, PuckContext as h, ComponentConfig as i, RootDataWithoutProps as j, ItemWithId as k, ArrayState as l, BaseField as m, TextareaField as n, RadioField as o, ArrayField as p, Adaptor as q, ExternalField as r, CustomField as s, Fields as t };
+export type { AppState as A, BaseData as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, NumberField as N, ObjectField as O, PuckComponent as P, RootData as R, SelectField as S, TextField as T, UiState as U, Viewports as V, FieldProps as a, DropZoneProps as b, DefaultComponentProps as c, DefaultRootProps as d, RootDataWithProps as e, ComponentData as f, Content as g, PuckContext as h, ComponentConfig as i, RootDataWithoutProps as j, ItemWithId as k, ArrayState as l, BaseField as m, TextareaField as n, RadioField as o, ArrayField as p, Adaptor as q, ExternalField as r, CustomField as s, Fields as t };

package/dist/index.css

@@ -136,6 +136,61 @@
 
 /* styles.css */
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
+._ActionBarComponent_16pc9_1 {
+  display: flex;
+  width: auto;
+  padding: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-radius: 8px;
+  background: var(--puck-color-grey-01);
+  color: var(--puck-color-white);
+  font-family: var(--puck-font-family);
+  gap: 4px;
+}
+._ActionBarComponent-actionsLabel_16pc9_14 {
+  color: var(--puck-color-grey-08);
+  display: flex;
+  font-size: var(--puck-font-size-xxxs);
+  font-weight: 500;
+  justify-content: center;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 16px;
+  margin-right: 8px;
+  border-right: 0.5px solid var(--puck-color-grey-05);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._ActionBarComponent-action_16pc9_14 {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-08);
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 50ms ease-in;
+}
+._ActionBarComponent-action_16pc9_14:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: -2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ActionBarComponent-action_16pc9_14:hover {
+    color: var(--puck-color-azure-06);
+    transition: none;
+  }
+}
+._ActionBarComponent-action_16pc9_14:active {
+  color: var(--puck-color-azure-07);
+  transition: none;
+}
+
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
 ._Input_3pq3z_1 {
   color: var(--puck-color-grey-04);
@@ -1032,25 +1087,25 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_59z7f_1 {
+._DraggableComponent_1bhad_1 {
   pointer-events: auto;
   --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
 }
-._DraggableComponent--isDragging_59z7f_11 {
+._DraggableComponent--isDragging_1bhad_11 {
   background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
   overflow: hidden;
 }
-._DraggableComponent-contents_59z7f_16 {
+._DraggableComponent-contents_1bhad_16 {
   position: relative;
   pointer-events: none;
   z-index: 0;
 }
-._DraggableComponent-contents_59z7f_16::before,
-._DraggableComponent-contents_59z7f_16::after {
+._DraggableComponent-contents_1bhad_16::before,
+._DraggableComponent-contents_1bhad_16::after {
   content: " ";
   display: table;
 }
-._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent-overlay_1bhad_29 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -1061,13 +1116,13 @@ textarea._Input-input_3pq3z_47 {
   box-sizing: border-box;
   z-index: 1;
 }
-._DraggableComponent_59z7f_1:focus-visible > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
   outline: 1px solid var(--puck-color-azure-05);
 }
-._DraggableComponent--isDragging_59z7f_11 > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
   outline: 2px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent-loadingOverlay_59z7f_49 {
+._DraggableComponent-loadingOverlay_1bhad_49 {
   background: var(--puck-color-white);
   color: var(--puck-color-grey-03);
   border-radius: 4px;
@@ -1082,91 +1137,42 @@ textarea._Input-input_3pq3z_47 {
   opacity: 0.8;
   z-index: 1;
 }
-._DraggableComponent_59z7f_1:hover:not(._DraggableComponent--isLocked_59z7f_65) > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent--forceHover_59z7f_71 > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
   background: var(--overlay-background);
   pointer-events: none;
 }
-._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):hover > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
   outline: 2px var(--puck-color-azure-09) solid !important;
 }
-._DraggableComponent--indicativeHover_59z7f_81 > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
   pointer-events: none;
 }
-._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):has(._DraggableComponent_59z7f_1:hover > ._DraggableComponent-overlay_59z7f_29) > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
   display: none;
 }
-._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-overlay_59z7f_29 {
+._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
   outline: 2px var(--puck-color-azure-07) solid !important;
 }
-._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 {
+._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
   display: block;
   position: sticky;
   z-index: 2;
 }
-._DraggableComponent-actions_59z7f_97 {
+._DraggableComponent-actions_1bhad_97 {
   position: absolute;
   width: auto;
-  padding: 4px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-radius: 8px;
-  background: var(--puck-color-grey-01);
-  color: var(--puck-color-white);
   cursor: grab;
   display: none;
-  font-family: var(--puck-font-family);
-  gap: 4px;
   pointer-events: auto;
   box-sizing: border-box;
   transform-origin: right top;
 }
-._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 > ._DraggableComponent-actions_59z7f_97 {
-  display: flex;
-}
-._DraggableComponent-actionsLabel_59z7f_127 {
-  color: var(--puck-color-grey-08);
-  display: flex;
-  font-size: var(--puck-font-size-xxxs);
-  font-weight: 500;
-  justify-content: center;
-  align-items: center;
-  padding-left: 8px;
-  padding-right: 16px;
-  margin-right: 8px;
-  border-right: 0.5px solid var(--puck-color-grey-05);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-._DraggableComponent-action_59z7f_97 {
-  background: transparent;
-  border: none;
-  color: var(--puck-color-grey-08);
-  cursor: pointer;
-  padding: 6px 8px;
-  border-radius: 4px;
-  overflow: hidden;
+._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 50ms ease-in;
-}
-._DraggableComponent-action_59z7f_97:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: -2px;
-}
-@media (hover: hover) and (pointer: fine) {
-  ._DraggableComponent-action_59z7f_97:hover {
-    color: var(--puck-color-azure-06);
-    transition: none;
-  }
-}
-._DraggableComponent-action_59z7f_97:active {
-  color: var(--puck-color-azure-07);
-  transition: none;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { U as UiState, D as Data, A as AppState, I as ItemSelector, F as Field, a as FieldProps, C as Config, b as DefaultRootProps, c as DropZoneProps, V as Viewports, d as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, e as RootData, f as ComponentData } from './Config-041c35a2.js';
-export { q as Adaptor, p as ArrayField, l as ArrayState, B as BaseData, m as BaseField, i as ComponentConfig, g as Content, s as CustomField, r as ExternalField, E as ExternalFieldWithAdaptor, t as Fields, k as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, h as PuckContext, o as RadioField, j as RootDataWithoutProps, S as SelectField, T as TextField, n as TextareaField } from './Config-041c35a2.js';
+import { U as UiState, D as Data, A as AppState, I as ItemSelector, F as Field, a as FieldProps, C as Config, b as DropZoneProps, V as Viewports, c as DefaultComponentProps, d as DefaultRootProps, M as MappedItem, R as RootData, e as RootDataWithProps, f as ComponentData } from './Config-VOJqVbHe.js';
+export { q as Adaptor, p as ArrayField, l as ArrayState, B as BaseData, m as BaseField, i as ComponentConfig, g as Content, s as CustomField, r as ExternalField, E as ExternalFieldWithAdaptor, t as Fields, k as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, h as PuckContext, o as RadioField, j as RootDataWithoutProps, S as SelectField, T as TextField, n as TextareaField } from './Config-VOJqVbHe.js';
 import * as react from 'react';
-import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
+import { ReactNode, ReactElement, SyntheticEvent, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DragStart, DragUpdate } from '@measured/dnd';
 
@@ -10,6 +10,7 @@ type InsertAction = {
     componentType: string;
     destinationIndex: number;
     destinationZone: string;
+    id?: string;
 };
 type DuplicateAction = {
     type: "duplicate";
@@ -80,6 +81,10 @@ type Overrides = OverridesGeneric<{
         actions: ReactNode;
         children: ReactNode;
     }>;
+    actionBar: RenderFunc<{
+        label?: string;
+        children: ReactNode;
+    }>;
     headerActions: RenderFunc<{
         children: ReactNode;
     }>;
@@ -123,13 +128,30 @@ type Plugin = {
     overrides: Partial<Overrides>;
 };
 
+declare const ActionBar: {
+    ({ label, children, }: {
+        label?: string;
+        children?: ReactNode;
+    }): react_jsx_runtime.JSX.Element;
+    Action: ({ children, label, onClick, }: {
+        children: ReactNode;
+        label?: string;
+        onClick: (e: SyntheticEvent) => void;
+    }) => react_jsx_runtime.JSX.Element;
+};
+declare const Action: ({ children, label, onClick, }: {
+    children: ReactNode;
+    label?: string;
+    onClick: (e: SyntheticEvent) => void;
+}) => react_jsx_runtime.JSX.Element;
+
 declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }: {
     children?: ReactNode;
     icon?: ReactNode;
     label: string;
-    el?: "label" | "div" | undefined;
-    readOnly?: boolean | undefined;
-    className?: string | undefined;
+    el?: "label" | "div";
+    readOnly?: boolean;
+    className?: string;
 }) => react_jsx_runtime.JSX.Element;
 type FieldLabelPropsInternal = {
     children?: ReactNode;
@@ -157,33 +179,33 @@ declare function AutoField<ValueType = any, FieldType extends Field<ValueType> =
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, loading: loadingProp, }: {
     children: ReactNode;
-    href?: string | undefined;
-    onClick?: ((e: any) => void | Promise<void>) | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
-    disabled?: boolean | undefined;
-    tabIndex?: number | undefined;
-    newTab?: boolean | undefined;
-    fullWidth?: boolean | undefined;
+    href?: string;
+    onClick?: (e: any) => void | Promise<void>;
+    variant?: "primary" | "secondary";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    tabIndex?: number;
+    newTab?: boolean;
+    fullWidth?: boolean;
     icon?: ReactNode;
-    size?: "medium" | "large" | undefined;
-    loading?: boolean | undefined;
+    size?: "medium" | "large";
+    loading?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const Drawer: {
     ({ children, droppableId: _droppableId, direction, }: {
         children: ReactNode;
-        droppableId?: string | undefined;
-        direction?: "vertical" | "horizontal" | undefined;
+        droppableId?: string;
+        direction?: "vertical" | "horizontal";
     }): react_jsx_runtime.JSX.Element;
     Item: ({ name, children, id, label, index, }: {
         name: string;
-        children?: ((props: {
+        children?: (props: {
             children: ReactNode;
             name: string;
-        }) => ReactElement) | undefined;
-        id?: string | undefined;
-        label?: string | undefined;
+        }) => ReactElement;
+        id?: string;
+        label?: string;
         index: number;
     }) => react_jsx_runtime.JSX.Element;
 };
@@ -207,6 +229,8 @@ type HistoryStore<D = any> = {
     setHistoryIndex: (index: number) => void;
 };
 
+type OnAction = (action: PuckAction, appState: AppState, prevAppState: AppState) => void;
+
 type PathData = Record<string, {
     path: string[];
     label: string;
@@ -238,7 +262,7 @@ type DropZoneContext<UserConfig extends Config = Config> = {
     zoneWillDrag?: string;
     setZoneWillDrag?: (zone: string) => void;
 } | null;
-declare const dropZoneContext: react.Context<DropZoneContext<Config<Record<string, any>, DefaultRootProps, string>>>;
+declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
 declare const DropZoneProvider: ({ children, value, }: {
     children: ReactNode;
     value: DropZoneContext;
@@ -248,14 +272,14 @@ 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;
-    onClick?: ((e: SyntheticEvent) => void | Promise<void>) | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
-    disabled?: boolean | undefined;
-    tabIndex?: number | undefined;
-    newTab?: boolean | undefined;
-    fullWidth?: boolean | undefined;
+    href?: string;
+    onClick?: (e: SyntheticEvent) => void | Promise<void>;
+    variant?: "primary" | "secondary";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    tabIndex?: number;
+    newTab?: boolean;
+    fullWidth?: boolean;
     title: string;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -263,13 +287,14 @@ type IframeConfig = {
     enabled?: boolean;
 };
 
-declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, initialHistory, }: {
+declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, onAction, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, initialHistory, }: {
     children?: ReactNode;
     config: UserConfig;
     data: Partial<Data>;
     ui?: Partial<UiState>;
     onChange?: (data: Data) => void;
     onPublish?: (data: Data) => void;
+    onAction?: OnAction;
     plugins?: Plugin[];
     overrides?: Partial<Overrides>;
     renderHeader?: (props: {
@@ -298,7 +323,7 @@ declare namespace Puck {
     var Fields: () => react_jsx_runtime.JSX.Element;
     var Outline: () => react_jsx_runtime.JSX.Element;
     var Preview: ({ id }: {
-        id?: string | undefined;
+        id?: string;
     }) => react_jsx_runtime.JSX.Element;
 }
 
@@ -321,29 +346,29 @@ type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps,
 declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultComponentProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
 
 declare function resolveAllData(data: Partial<Data>, config: Config, onResolveStart?: (item: MappedItem) => void, onResolveEnd?: (item: MappedItem) => void): Promise<{
-    root: RootDataWithProps<DefaultRootProps> | RootData<DefaultRootProps>;
-    content: any[];
+    root: RootData<DefaultRootProps> | RootDataWithProps;
+    content: any;
     zones: Record<string, MappedItem[]>;
 }>;
 
 declare const usePuck: () => {
     appState: AppState;
-    config: Config<Record<string, any>, DefaultRootProps, string>;
+    config: Config;
     dispatch: (action: PuckAction) => void;
     history: {
         back: VoidFunction;
         forward: VoidFunction;
-        setHistories: (histories: History<any>[]) => void;
+        setHistories: (histories: History[]) => void;
         setHistoryIndex: (index: number) => void;
         hasPast: boolean;
         hasFuture: boolean;
         histories: History<any>[];
         index: number;
-        historyStore: HistoryStore<any> | undefined;
+        historyStore: HistoryStore | undefined;
     };
     selectedItem: ComponentData<DefaultComponentProps & {
         id: string;
     }> | null;
 };
 
-export { AppState, AutoField, AutoFieldPrivate, Button, ComponentData, Config, Data, DefaultComponentProps, DefaultRootProps, Drawer, DropZone, DropZoneProvider, Field, FieldLabel, FieldLabelInternal, FieldProps, FieldPropsInternal, History, IconButton, MappedItem, Plugin, Puck, PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps, usePuck };
+export { Action, ActionBar, AppState, AutoField, AutoFieldPrivate, Button, ComponentData, Config, Data, DefaultComponentProps, DefaultRootProps, Drawer, DropZone, DropZoneProvider, Field, FieldLabel, FieldLabelInternal, FieldProps, type FieldPropsInternal, type History, IconButton, MappedItem, type Plugin, Puck, type PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps, usePuck };