@measured/puck 0.16.0-canary.6386bd1 → 0.16.0-canary.7cac376

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

@@ -166,6 +166,7 @@ type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultCompo
     label?: string;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
+    permissions?: Partial<Permissions>;
     resolveFields?: (data: DataShape, params: {
         changed: Partial<Record<keyof ComponentProps, boolean>>;
         fields: Fields<ComponentProps>;
@@ -183,6 +184,12 @@ type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultCompo
         props?: Partial<ComponentProps>;
         readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
     };
+    resolvePermissions?: (data: DataShape, params: {
+        changed: Partial<Record<keyof ComponentProps, boolean>>;
+        lastPermissions: Partial<Permissions> | undefined;
+        initialPermissions: Partial<Permissions>;
+        appState: AppState;
+    }) => Partial<Permissions>;
 };
 type Category<ComponentName> = {
     components?: ComponentName[];
@@ -258,5 +265,12 @@ type AppState = {
     data: Data;
     ui: UiState;
 };
+type Permissions = {
+    drag: boolean;
+    duplicate: boolean;
+    delete: boolean;
+    edit: boolean;
+    insert: boolean;
+} & Record<string, boolean>;
 
-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 };
+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, Permissions 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, PuckComponent as h, PuckContext as i, ComponentConfig as j, RootDataWithoutProps as k, ItemWithId as l, ArrayState as m, BaseField as n, TextareaField as o, RadioField as p, ArrayField as q, Adaptor as r, ExternalField as s, CustomField as t, Fields as u };

package/dist/index.css

@@ -136,6 +136,65 @@
 
 /* styles.css */
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
+._ActionBarComponent_8nyey_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;
+  min-height: 26px;
+}
+._ActionBarComponent-actionsLabel_8nyey_15 {
+  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: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._ActionBarComponent-action_8nyey_15:first-of-type {
+  border-left: 0.5px solid var(--puck-color-grey-05);
+  border-radius: 0;
+  padding-left: 16px;
+}
+._ActionBarComponent-action_8nyey_15 {
+  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_8nyey_15:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: -2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ActionBarComponent-action_8nyey_15:hover {
+    color: var(--puck-color-azure-06);
+    transition: none;
+  }
+}
+._ActionBarComponent-action_8nyey_15: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);
@@ -523,14 +582,17 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
-._DragIcon_1p5wn_1 {
+._DragIcon_17p8x_1 {
   color: var(--puck-color-grey-05);
   cursor: grab;
   padding: 4px;
   border-radius: 4px;
 }
+._DragIcon--disabled_17p8x_8 {
+  cursor: no-drop;
+}
 @media (hover: hover) and (pointer: fine) {
-  ._DragIcon_1p5wn_1:hover {
+  ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
     color: var(--puck-color-azure-05);
     background-color: var(--puck-color-azure-12);
   }
@@ -989,16 +1051,21 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
-._Drawer_6zh0b_1 {
+._Drawer_4yfqn_1 {
   font-family: var(--puck-font-family);
 }
-._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
+._DrawerItem--disabled_4yfqn_5 {
+  background: var(--puck-color-grey-11);
+  color: var(--puck-color-grey-05);
+  cursor: not-allowed;
+}
+._DrawerItem-default_4yfqn_11 ._DrawerItem-draggableWrapper_4yfqn_11 {
   padding-bottom: 12px;
 }
-._DrawerItem_6zh0b_5:last-of-type ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
+._DrawerItem_4yfqn_5:last-of-type ._DrawerItem-default_4yfqn_11 ._DrawerItem-draggableWrapper_4yfqn_11 {
   padding-bottom: 0;
 }
-._DrawerItem-draggable_6zh0b_5 {
+._DrawerItem-draggable_4yfqn_11 {
   background: var(--puck-color-white);
   padding: 12px;
   display: flex;
@@ -1007,50 +1074,49 @@ textarea._Input-input_3pq3z_47 {
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
-  cursor: grab;
   transition: background-color 50ms ease-in, color 50ms ease-in;
 }
-._DrawerItem_6zh0b_5:focus-visible {
+._DrawerItem_4yfqn_5:focus-visible {
   outline: 0;
 }
-._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem_6zh0b_5:focus-visible ._DrawerItem-draggable_6zh0b_5 {
+._Drawer_4yfqn_1:not(._Drawer--isDraggingFrom_4yfqn_36) ._DrawerItem_4yfqn_5:focus-visible ._DrawerItem-draggable_4yfqn_11 {
   border-radius: 4px;
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem-draggable_6zh0b_5:hover {
+  ._Drawer_4yfqn_1:not(._Drawer--isDraggingFrom_4yfqn_36) ._DrawerItem_4yfqn_5:not(._DrawerItem--disabled_4yfqn_5) ._DrawerItem-draggable_4yfqn_11:hover {
     background-color: var(--puck-color-azure-12);
     color: var(--puck-color-azure-04);
     transition: none;
   }
 }
-._DrawerItem-name_6zh0b_47 {
+._DrawerItem-name_4yfqn_54 {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* 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 +1127,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 +1148,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 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 { U as UiState, D as Data, A as AppState, I as ItemSelector, F as Field, a as FieldProps, C as Config, b as DropZoneProps, P as Permissions, V as Viewports, c as DefaultComponentProps, d as DefaultRootProps, M as MappedItem, R as RootData, e as RootDataWithProps, f as ComponentData } from './Config-CkVFT1_w.js';
+export { r as Adaptor, q as ArrayField, m as ArrayState, B as BaseData, n as BaseField, j as ComponentConfig, g as Content, t as CustomField, s as ExternalField, E as ExternalFieldWithAdaptor, u as Fields, l as ItemWithId, N as NumberField, O as ObjectField, h as PuckComponent, i as PuckContext, p as RadioField, k as RootDataWithoutProps, S as SelectField, T as TextField, o as TextareaField } from './Config-CkVFT1_w.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;
     }>;
@@ -102,6 +107,10 @@ type Overrides = OverridesGeneric<{
         children: ReactNode;
         name: string;
     }>;
+    iframe: RenderFunc<{
+        children: ReactNode;
+        document?: Document;
+    }>;
     outline: RenderFunc;
     puck: RenderFunc;
 }>;
@@ -123,6 +132,23 @@ 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;
@@ -176,7 +202,7 @@ declare const Drawer: {
         droppableId?: string;
         direction?: "vertical" | "horizontal";
     }): react_jsx_runtime.JSX.Element;
-    Item: ({ name, children, id, label, index, }: {
+    Item: ({ name, children, id, label, index, isDragDisabled, }: {
         name: string;
         children?: (props: {
             children: ReactNode;
@@ -185,6 +211,7 @@ declare const Drawer: {
         id?: string;
         label?: string;
         index: number;
+        isDragDisabled?: boolean;
     }) => react_jsx_runtime.JSX.Element;
 };
 
@@ -265,7 +292,7 @@ type IframeConfig = {
     enabled?: boolean;
 };
 
-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, }: {
+declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, onAction, permissions, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, initialHistory, }: {
     children?: ReactNode;
     config: UserConfig;
     data: Partial<Data>;
@@ -273,6 +300,7 @@ declare function Puck<UserConfig extends Config = Config>({ children, config, da
     onChange?: (data: Data) => void;
     onPublish?: (data: Data) => void;
     onAction?: OnAction;
+    permissions?: Partial<Permissions>;
     plugins?: Plugin[];
     overrides?: Partial<Overrides>;
     renderHeader?: (props: {
@@ -333,6 +361,17 @@ declare const usePuck: () => {
     appState: AppState;
     config: Config;
     dispatch: (action: PuckAction) => void;
+    getPermissions: ({ item, type, }?: {
+        item?: ComponentData;
+        type?: keyof DefaultComponentProps;
+    }) => {
+        [x: string]: boolean | undefined;
+        drag?: boolean | undefined;
+        duplicate?: boolean | undefined;
+        delete?: boolean | undefined;
+        edit?: boolean | undefined;
+        insert?: boolean | undefined;
+    };
     history: {
         back: VoidFunction;
         forward: VoidFunction;
@@ -349,4 +388,4 @@ declare const usePuck: () => {
     }> | null;
 };
 
-export { 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 };
+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, Permissions, type Plugin, Puck, type PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps, usePuck };