@makeswift/runtime 0.7.6 → 0.7.8

package/dist/index.cjs.js

@@ -46,9 +46,10 @@ var serialize = require("@emotion/serialize");
 var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
 var richText = require("./rich-text.cjs.js");
+require("slate");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
-var control = require("./control.cjs.js");
+require("slate-react");
 var shim = require("use-sync-external-store/shim");
 var redux = require("redux");
 var thunk = require("redux-thunk");
@@ -172,13 +173,13 @@ async function introspect(element, client, store) {
             remaining.push(child);
           }
         });
-        if (descriptor.type === control.ShapeControlType) {
+        if (descriptor.type === richText.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.config.type, prop);
         }
-        if (descriptor.type === control.ListControlType) {
+        if (descriptor.type === richText.ListControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -1001,7 +1002,7 @@ function useCachedSite(siteId) {
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.6";
+const version = "0.7.8";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -3417,11 +3418,19 @@ function useLinkControlValue(link, _definition) {
 function ListControlValue({
   definition,
   data,
-  children
+  children,
+  control
 }) {
+  const [controls, setControls] = React.useState(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    if (control == null || data == null)
+      return;
+    setControls(control.setItemsControl(data));
+  }, [data, control]);
   return (data != null ? data : []).reduce((renderFn, item) => (listControlValue) => /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
     definition: definition.config.type,
     data: item.value,
+    control: controls == null ? void 0 : controls.get(item.id),
     children: (value) => renderFn([value, ...listControlValue])
   }), children)([]);
 }
@@ -3434,98 +3443,18 @@ function useSelectControlValue(data, definition) {
 function ShapeControlValue({
   definition,
   data,
-  children
+  children,
+  control
 }) {
   return Object.entries(definition.config.type).reduceRight((renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
     definition: controlDefinition,
     data: data == null ? void 0 : data[key],
+    control: control == null ? void 0 : control.controls.get(key),
     children: (value) => renderFn(__spreadProps(__spreadValues({}, shapeControlValue), {
       [key]: value
     }))
   }), children)({});
 }
-function useTextAreaValue(data, definition) {
-  return data != null ? data : definition.config.defaultValue;
-}
-function useTextInputValue(data, definition) {
-  return data != null ? data : definition.config.defaultValue;
-}
-function ControlValue({
-  data,
-  definition,
-  children
-}) {
-  switch (definition.type) {
-    case textInput.CheckboxControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useCheckboxControlValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case textInput.NumberControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useNumber,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case textInput.TextInputControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useTextInputValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case textInput.TextAreaControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useTextAreaValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case textInput.SelectControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useSelectControlValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case richText.ColorControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useColorValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case richText.ImageControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useImageControlValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case control.LinkControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useLinkControlValue,
-        parameters: [data, definition],
-        children: (value) => children(value)
-      }, definition.type);
-    case combobox.ComboboxControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-        hook: useComboboxControlValue,
-        parameters: [data],
-        children: (value) => children(value)
-      }, definition.type);
-    case control.ShapeControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
-        definition,
-        data,
-        children: (value) => children(value)
-      });
-    case control.ListControlType:
-      return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
-        definition,
-        data,
-        children: (value) => children(value)
-      });
-    default:
-      return children(data);
-  }
-}
 function pollBoxModel({
   element,
   onBoxModelChange
@@ -3545,16 +3474,16 @@ function pollBoxModel({
     onBoxModelChange(null);
   };
 }
-function useSlot(data, control2) {
+function useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
-      control: control2
+      control
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Slot, {
-    control: control2,
+    control,
     children: data.elements.map((element, i) => /* @__PURE__ */ jsxRuntime.jsx(Slot.Item, {
-      control: control2,
+      control,
       grid: data.columns,
       index: i,
       children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
@@ -3566,7 +3495,7 @@ function useSlot(data, control2) {
 function Slot(_f) {
   var _g = _f, {
     as,
-    control: control2,
+    control,
     children,
     className
   } = _g, restOfProps = __objRest(_g, [
@@ -3583,13 +3512,13 @@ function Slot(_f) {
     width: "100%"
   });
   React.useEffect(() => {
-    if (element == null || control2 == null)
+    if (element == null || control == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control2.changeContainerBoxModel(boxModel)
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
     });
-  }, [element, control2]);
+  }, [element, control]);
   return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
     ref: setElement,
     className: css.cx(baseClassName, className),
@@ -3601,7 +3530,7 @@ Slot.Item = SlotItem;
 function SlotItem(_h) {
   var _i = _h, {
     as,
-    control: control2,
+    control,
     grid,
     index,
     children,
@@ -3633,13 +3562,13 @@ function SlotItem(_h) {
     };
   })));
   React.useEffect(() => {
-    if (element == null || control2 == null)
+    if (element == null || control == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control2.changeItemBoxModel(index, boxModel)
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
     });
-  }, [element, control2, index]);
+  }, [element, control, index]);
   return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
     ref: setElement,
     className: css.cx(baseClassName, className),
@@ -3647,17 +3576,17 @@ function SlotItem(_h) {
   }));
 }
 function SlotPlaceholder({
-  control: control2
+  control
 }) {
   const [element, setElement] = React.useState(null);
   React.useEffect(() => {
-    if (element == null || control2 == null)
+    if (element == null || control == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control2.changeContainerBoxModel(boxModel)
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
     });
-  }, [element, control2]);
+  }, [element, control]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: setElement,
     className: useStyle({
@@ -3688,17 +3617,108 @@ function SlotPlaceholder({
     })
   });
 }
+function useTextAreaValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function useTextInputValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function ControlValue({
+  data,
+  definition,
+  children,
+  control
+}) {
+  switch (definition.type) {
+    case textInput.CheckboxControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useCheckboxControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.NumberControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useNumber,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.TextInputControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTextInputValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.TextAreaControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTextAreaValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.SelectControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useSelectControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case richText.ColorControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useColorValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case richText.ImageControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useImageControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case richText.LinkControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useLinkControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case combobox.ComboboxControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useComboboxControlValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
+    case richText.ShapeControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
+        definition,
+        data,
+        control,
+        children: (value) => children(value)
+      });
+    case richText.ListControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
+        definition,
+        data,
+        control,
+        children: (value) => children(value)
+      });
+    case richText.SlotControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useSlot,
+        parameters: [data, control],
+        children: (value) => children(value)
+      }, definition.type);
+    default:
+      return children(data);
+  }
+}
 const Text = forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
   return require("./index.cjs5.js");
 }))));
-function useRichText(data, control2) {
+function useRichText(data, control) {
   const textCallbackRef = React.useCallback((handle) => {
     var _a;
     if (constants.isPropControllersHandle(handle))
-      (_a = handle == null ? void 0 : handle.setPropControllers) == null ? void 0 : _a.call(handle, control2 == null ? null : {
-        text: control2
+      (_a = handle == null ? void 0 : handle.setPropControllers) == null ? void 0 : _a.call(handle, control == null ? null : {
+        text: control
       });
-  }, [control2]);
+  }, [control]);
   return /* @__PURE__ */ jsxRuntime.jsx(Text, {
     text: data,
     ref: textCallbackRef
@@ -3749,12 +3769,13 @@ function PropsValue({
       case richText.ColorControlType:
       case richText.ImageControlType:
       case combobox.ComboboxControlType:
-      case control.ShapeControlType:
-      case control.ListControlType:
-      case control.LinkControlType:
+      case richText.ShapeControlType:
+      case richText.ListControlType:
+      case richText.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
+          control: propControllers == null ? void 0 : propControllers[propName],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
@@ -3768,10 +3789,10 @@ function PropsValue({
           }))
         }, descriptor.type);
       case richText.RichTextControlType:
-        const control$1 = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useRichText,
-          parameters: [props[propName], control$1],
+          parameters: [props[propName], control],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
@@ -3932,9 +3953,9 @@ class ElementImperativeHandle {
     const current = this.getCurrent();
     if (current === null)
       this.setPropControllers(null);
-    else if (this.lastPropControllers !== null)
-      this.setPropControllers(this.lastPropControllers);
     this.getCurrent = getCurrent;
+    if (this.lastPropControllers !== null)
+      this.setPropControllers(this.lastPropControllers);
   }
   getBoxModel() {
     const current = this.getCurrent();
@@ -4208,6 +4229,7 @@ exports.DEVICES = DEVICES;
 exports.Document = Document$1;
 exports.DocumentReference = DocumentReference;
 exports.Element = Element$1;
+exports.ElementImperativeHandle = ElementImperativeHandle;
 exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
 exports.MakeswiftClient = MakeswiftClient;
@@ -4229,7 +4251,6 @@ exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
-exports.pollBoxModel = pollBoxModel;
 exports.responsiveGridItem = responsiveGridItem;
 exports.responsiveStyle = responsiveStyle;
 exports.responsiveTextStyle = responsiveTextStyle;