@measured/puck 0.17.0-canary.8ea38c3 → 0.17.0-canary.f71da6d

package/dist/index.mjs

@@ -178,14 +178,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
-  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -880,7 +879,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1228,11 +1228,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -1298,32 +1300,60 @@ var ArrayField = ({
                               children: [
                                 field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
-                                  !readOnly && /* @__PURE__ */ jsx9("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
-                                    IconButton,
-                                    {
-                                      type: "button",
-                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        const existingValue = [
-                                          ...value || []
-                                        ];
-                                        const existingItems = [
-                                          ...arrayState.items || []
-                                        ];
-                                        existingValue.splice(i, 1);
-                                        existingItems.splice(i, 1);
-                                        onChange(
-                                          existingValue,
-                                          mapArrayStateToUi({
-                                            items: existingItems
-                                          })
-                                        );
-                                      },
-                                      title: "Delete",
-                                      children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
-                                    }
-                                  ) }) }),
+                                  !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: !!addDisabled,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          existingValue.splice(
+                                            i,
+                                            0,
+                                            existingValue[i]
+                                          );
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi(
+                                              regenerateArrayState(existingValue)
+                                            )
+                                          );
+                                        },
+                                        title: "Duplicate",
+                                        children: /* @__PURE__ */ jsx9(Copy, { size: 16 })
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
+                                      IconButton,
+                                      {
+                                        type: "button",
+                                        disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          const existingValue = [
+                                            ...value || []
+                                          ];
+                                          const existingItems = [
+                                            ...arrayState.items || []
+                                          ];
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
+                                          onChange(
+                                            existingValue,
+                                            mapArrayStateToUi({
+                                              items: existingItems
+                                            })
+                                          );
+                                        },
+                                        title: "Delete",
+                                        children: /* @__PURE__ */ jsx9(Trash, { size: 16 })
+                                      }
+                                    ) })
+                                  ] }),
                                   /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(DragIcon, {}) })
                                 ] })
                               ]
@@ -1455,7 +1485,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_wprq3_1", "ExternalInput-button": "_ExternalInput-button_wprq3_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_wprq3_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_wprq3_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_wprq3_35", "ExternalInput": "_ExternalInput_wprq3_1", "ExternalInputModal": "_ExternalInputModal_wprq3_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_wprq3_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_wprq3_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_wprq3_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_wprq3_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_wprq3_133", "ExternalInputModal-table": "_ExternalInputModal-table_wprq3_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_wprq3_149", "ExternalInputModal-th": "_ExternalInputModal-th_wprq3_149", "ExternalInputModal-td": "_ExternalInputModal-td_wprq3_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_wprq3_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_wprq3_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_wprq3_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_wprq3_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_wprq3_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_wprq3_227", "ExternalInputModal-search": "_ExternalInputModal-search_wprq3_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_wprq3_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_wprq3_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_wprq3_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_wprq3_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_wprq3_326", "ExternalInputModal-footer": "_ExternalInputModal-footer_wprq3_330" };
+var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_8wgzm_1", "ExternalInput-button": "_ExternalInput-button_8wgzm_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_8wgzm_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_8wgzm_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_8wgzm_35", "ExternalInput": "_ExternalInput_8wgzm_1", "ExternalInputModal": "_ExternalInputModal_8wgzm_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_8wgzm_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_8wgzm_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_8wgzm_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_8wgzm_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_8wgzm_133", "ExternalInputModal-table": "_ExternalInputModal-table_8wgzm_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_8wgzm_149", "ExternalInputModal-th": "_ExternalInputModal-th_8wgzm_149", "ExternalInputModal-td": "_ExternalInputModal-td_8wgzm_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_8wgzm_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_8wgzm_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_8wgzm_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_8wgzm_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_8wgzm_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_8wgzm_227", "ExternalInputModal-search": "_ExternalInputModal-search_8wgzm_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_8wgzm_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_8wgzm_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_8wgzm_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_8wgzm_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_8wgzm_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_8wgzm_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_8wgzm_330" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -1633,6 +1663,14 @@ var ExternalInput = ({
     }),
     [id, field]
   );
+  const Footer = useCallback4(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs7("span", { className: getClassNameModal("footer"), children: [
+      props.items.length,
+      " result",
+      props.items.length === 1 ? "" : "s"
+    ] }),
+    [field.renderFooter]
+  );
   useEffect7(() => {
     search(searchQuery, filters);
   }, []);
@@ -1772,11 +1810,7 @@ var ExternalInput = ({
                   /* @__PURE__ */ jsx14("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx14(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs7("div", { className: getClassNameModal("footer"), children: [
-                mappedData.length,
-                " result",
-                mappedData.length === 1 ? "" : "s"
-              ] })
+              /* @__PURE__ */ jsx14("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx14(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -2056,6 +2090,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2103,7 +2138,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2135,23 +2170,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = useCallback5(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = useCallback5((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState10(value);
-  const [recentlyChanged, setRecentlyChanged] = useState10(false);
-  const timeoutRef = useRef2();
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -2161,15 +2218,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   useEffect9(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);
@@ -3520,6 +3572,22 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
+
+// lib/use-parent.ts
+init_react_import();
+import { useContext as useContext5 } from "react";
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = useContext5(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
 import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3533,6 +3601,7 @@ var DefaultFields = ({
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
@@ -3563,7 +3632,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3573,7 +3643,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3595,7 +3666,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3902,7 +3973,7 @@ import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
 init_react_import();
 import {
   createContext as createContext4,
-  useContext as useContext5,
+  useContext as useContext6,
   useEffect as useEffect15,
   useRef as useRef3,
   useState as useState17
@@ -4112,7 +4183,7 @@ var CopyHostStyles = ({
   return /* @__PURE__ */ jsx31(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
-var useFrame = () => useContext5(autoFrameContext);
+var useFrame = () => useContext6(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4265,7 +4336,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4292,7 +4363,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext6(dropZoneContext);
+  const ctx = useContext7(dropZoneContext);
   return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),

package/dist/{resolve-all-data-CaVk1fIL.d.mts → resolve-all-data-C7aAQCY3.d.mts}

@@ -94,6 +94,9 @@ type ExternalField<Props extends {
     mapRow?: (value: any) => Record<string, string | number | ReactElement>;
     getItemSummary?: (item: Props, index?: number) => string;
     showSearch?: boolean;
+    renderFooter?: (props: {
+        items: any[];
+    }) => ReactElement;
     initialQuery?: string;
     filterFields?: Record<string, Field>;
     initialFilters?: Record<string, any>;
@@ -142,6 +145,7 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
         appState: AppState;
+        parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
@@ -271,6 +275,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/{resolve-all-data-CaVk1fIL.d.ts → resolve-all-data-C7aAQCY3.d.ts}

@@ -94,6 +94,9 @@ type ExternalField<Props extends {
     mapRow?: (value: any) => Record<string, string | number | ReactElement>;
     getItemSummary?: (item: Props, index?: number) => string;
     showSearch?: boolean;
+    renderFooter?: (props: {
+        items: any[];
+    }) => ReactElement;
     initialQuery?: string;
     filterFields?: Record<string, Field>;
     initialFilters?: Record<string, any>;
@@ -142,6 +145,7 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
         appState: AppState;
+        parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
@@ -271,6 +275,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-CaVk1fIL.mjs';
-export { a4 as resolveAllData } from './resolve-all-data-CaVk1fIL.mjs';
+import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.mjs';
+export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-CaVk1fIL.js';
-export { a4 as resolveAllData } from './resolve-all-data-CaVk1fIL.js';
+import { C as Config, D as Data } from './resolve-all-data-C7aAQCY3.js';
+export { a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.17.0-canary.8ea38c3",
+  "version": "0.17.0-canary.f71da6d",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",