@measured/puck 0.12.1-canary.9470ff9 → 0.13.0-canary.194c4e5

package/dist/{Config-35e6eaae.d.ts → Config-0331e026.d.ts}

@@ -8,6 +8,8 @@ type ItemSelector = {
 
 type DropZoneProps = {
     zone: string;
+    allow?: string[];
+    disallow?: string[];
     style?: CSSProperties;
 };
 declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
@@ -40,6 +42,16 @@ type ArrayField<Props extends {
     defaultItemProps?: Props[0];
     getItemSummary?: (item: Props[0], index?: number) => string;
 };
+type ObjectField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "object";
+    objectFields: {
+        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
+    };
+};
 type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
     name: string;
     fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
@@ -63,9 +75,13 @@ type ExternalField<Props extends {
 }> = BaseField & {
     type: "external";
     placeholder?: string;
-    fetchList: () => Promise<any[] | null>;
+    fetchList: (params: {
+        query: string;
+    }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
     getItemSummary: (item: Props, index?: number) => string;
+    showSearch?: boolean;
+    initialQuery?: string;
 };
 type CustomField<Props extends {
     [key: string]: any;
@@ -85,7 +101,7 @@ type Field<Props extends {
     [key: string]: any;
 } = {
     [key: string]: any;
-}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
+}> = TextField | SelectField | ArrayField<Props> | ObjectField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
 type DefaultRootProps = {
     title?: string;
     [key: string]: any;
@@ -193,4 +209,4 @@ type AppState = {
     ui: UiState;
 };
 
-export { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultRootProps as a, RootData as b, ArrayField as c, Adaptor as d, ExternalField as e, CustomField as f, DefaultComponentProps as g, Fields as h, Content as i, PuckContext as j, ComponentConfig as k, BaseData as l, ComponentData as m, RootDataWithoutProps as n, ItemWithId as o, ArrayState as p, DropZone as q };
+export { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultComponentProps as a, DefaultRootProps as b, RootData as c, ArrayField as d, Adaptor as e, ExternalField as f, CustomField as g, Fields as h, Content as i, PuckContext as j, ComponentConfig as k, BaseData as l, ComponentData as m, RootDataWithoutProps as n, ItemWithId as o, ArrayState as p, DropZone as q };

package/dist/index.css

@@ -656,13 +656,13 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput_157li_1 {
+._ExternalInput_s6fxy_1 {
   font-family: var(--puck-font-stack);
 }
-._ExternalInput-actions_157li_5 {
+._ExternalInput-actions_s6fxy_5 {
   display: flex;
 }
-._ExternalInput-button_157li_9 {
+._ExternalInput-button_s6fxy_9 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -679,20 +679,20 @@
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput-button_157li_9:hover,
-._ExternalInput-detachButton_157li_28:hover {
+._ExternalInput-button_s6fxy_9:hover,
+._ExternalInput-detachButton_s6fxy_28:hover {
   cursor: pointer;
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
   z-index: 1;
 }
-._ExternalInput--dataSelected_157li_35 ._ExternalInput-button_157li_9 {
+._ExternalInput--dataSelected_s6fxy_35 ._ExternalInput-button_s6fxy_9 {
   color: var(--puck-color-grey-2);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput-detachButton_157li_28 {
+._ExternalInput-detachButton_s6fxy_28 {
   border: 1px solid var(--puck-color-grey-8);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -705,22 +705,27 @@
   padding: 8px 12px;
   margin-left: -1px;
 }
-._ExternalInputModal_157li_56 {
+._ExternalInputModal_s6fxy_56 {
+  color: black;
   display: flex;
   flex-direction: column;
   position: relative;
   max-height: 90vh;
 }
-._ExternalInputModal-masthead_157li_63 {
+._ExternalInputModal-masthead_s6fxy_64 {
   background-color: white;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
   padding: 32px 24px;
 }
-._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal-tableWrapper_s6fxy_72 {
+  position: relative;
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_157li_68 {
+._ExternalInputModal-table_s6fxy_72 {
   border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
@@ -728,64 +733,125 @@
   z-index: 0;
   min-width: 100%;
 }
-._ExternalInputModal-thead_157li_83 {
+._ExternalInputModal-thead_s6fxy_88 {
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_157li_83 {
+._ExternalInputModal-th_s6fxy_88 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
-._ExternalInputModal-td_157li_97 {
+._ExternalInputModal-td_s6fxy_102 {
   font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
-._ExternalInputModal-tr_157li_102:nth-of-type(n) {
+._ExternalInputModal-tr_s6fxy_107:nth-of-type(n) {
   background-color: white;
 }
-._ExternalInputModal-tr_157li_102:nth-of-type(2n) {
+._ExternalInputModal-tr_s6fxy_107:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
-._ExternalInputModal-tr_157li_102 ._ExternalInputModal-td_157li_97:first-of-type {
+._ExternalInputModal-tr_s6fxy_107 ._ExternalInputModal-td_s6fxy_102:first-of-type {
   font-weight: 500;
 }
-._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover {
+._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
-._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover ._ExternalInputModal-td_157li_97:first-of-type {
+._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover ._ExternalInputModal-td_s6fxy_102:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
-._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal-tableWrapper_s6fxy_72 {
   display: none;
 }
-._ExternalInputModal--hasData_157li_133 ._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_157li_137 {
+._ExternalInputModal-loadingBanner_s6fxy_142 {
   display: none;
-  background-color: white;
+  background-color: #ffffff90;
   padding: 64px;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
-._ExternalInputModal--isLoading_157li_145 ._ExternalInputModal-loadingBanner_157li_137 {
+._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
   display: flex;
 }
-._ExternalInputModal-noContentBanner_157li_149 {
+._ExternalInputModal-noContentBanner_s6fxy_159 {
   display: none;
+  border-top: 1px solid var(--puck-color-grey-8);
+  padding: 24px;
+  text-align: center;
 }
-._ExternalInputModal--loaded_157li_153:not(._ExternalInputModal--hasData_157li_133) ._ExternalInputModal-noContentBanner_157li_149 {
+._ExternalInputModal--loaded_s6fxy_166:not(._ExternalInputModal--hasData_s6fxy_138) ._ExternalInputModal-noContentBanner_s6fxy_159 {
   display: block;
-  padding: 24px;
+}
+._ExternalInputModal-searchForm_s6fxy_171 {
+  display: flex;
+  margin-left: auto;
+  height: 43px;
+  gap: 12px;
+}
+._ExternalInputModal-search_s6fxy_171 {
+  display: flex;
+  background: white;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--puck-color-grey-8);
+  border-radius: 4px;
+  width: 100%;
+}
+._ExternalInputModal-search_s6fxy_171:focus-within {
+  border-color: var(--puck-color-azure-4);
+  outline: var(--puck-color-azure-8) 4px solid;
+  outline-offset: 0;
+}
+._ExternalInputModal-searchIcon_s6fxy_194 {
+  align-items: center;
+  background: var(--puck-color-grey-11);
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  border-right: 1px solid var(--puck-color-grey-8);
+  color: var(--puck-color-grey-6);
+  display: flex;
+  justify-content: center;
+  padding: 12px 15px;
+}
+._ExternalInputModal-searchIconText_s6fxy_206 {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+._ExternalInputModal-searchInput_s6fxy_216 {
+  border: none;
+  border-radius: 4px;
+  background: white;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 12px 15px;
+  width: 100%;
+}
+._ExternalInputModal-searchInput_s6fxy_216:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
@@ -854,6 +920,20 @@
   font-size: var(--puck-font-size-xs);
 }
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
+._ObjectField_56z4t_5 {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border: 1px solid var(--puck-color-grey-8);
+  border-radius: 4px;
+}
+._ObjectField-fieldset_56z4t_13 {
+  border: none;
+  margin: 0;
+  padding: 16px 15px;
+}
+
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
 ._ComponentList_1m8r5_1 {
   font-family: var(--puck-font-stack);

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-35e6eaae.js';
-export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-35e6eaae.js';
+import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, a as DefaultComponentProps, b as DefaultRootProps, M as MappedItem, R as RootDataWithProps, c as RootData } from './Config-0331e026.js';
+export { e as Adaptor, d as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, g as CustomField, q as DropZone, f as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, O as ObjectField, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-0331e026.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties, SyntheticEvent, ReactElement } from 'react';
@@ -99,7 +99,7 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
+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;
@@ -111,6 +111,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
     fullWidth?: boolean | undefined;
     icon?: ReactNode;
     size?: "medium" | "large" | undefined;
+    loading?: boolean | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -145,7 +146,7 @@ type Plugin = {
 };
 
 declare function Puck({ config, data: initialData, onChange, onPublish, plugins, renderComponentList, renderHeader, renderHeaderActions, headerTitle, headerPath, }: {
-    config: Config;
+    config: Config<any, any, any>;
     data: Data;
     onChange?: (data: Data) => void;
     onPublish: (data: Data) => void;
@@ -168,12 +169,25 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
     headerPath?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Render({ config, data }: {
-    config: Config;
+declare function Render({ config, data, }: {
+    config: Config<any, any, any>;
     data: Data;
 }): react_jsx_runtime.JSX.Element;
 
-declare const resolveAllData: (data: Data, config: Config, onResolveStart?: ((item: MappedItem) => void) | undefined, onResolveEnd?: ((item: MappedItem) => void) | undefined) => Promise<{
+declare function migrate(data: Data): Data;
+
+type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = Partial<{
+    [ComponentName in keyof Props]: (props: Props[ComponentName] & {
+        [key: string]: any;
+    }) => Props[ComponentName];
+} & {
+    root: (props: RootProps & {
+        [key: string]: any;
+    }) => RootProps;
+}>;
+declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultComponentProps>(data: Data, propTransforms: PropTransform<Props, RootProps>): Data;
+
+declare const resolveAllData: (data: Data, config: Config<any, any, any>, onResolveStart?: ((item: MappedItem) => void) | undefined, onResolveEnd?: ((item: MappedItem) => void) | undefined) => Promise<{
     root: RootDataWithProps<DefaultRootProps> | RootData<DefaultRootProps>;
     content: any[];
     zones: Record<string, MappedItem[]>;
@@ -188,4 +202,4 @@ declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }:
     className?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AppState, Button, Config, Data, DefaultRootProps, DropZoneProvider, FieldLabel, IconButton, MappedItem, Puck, PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, resolveAllData };
+export { AppState, Button, Config, Data, DefaultComponentProps, DefaultRootProps, DropZoneProvider, FieldLabel, IconButton, MappedItem, Puck, PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps };