@makeswift/runtime 0.1.8 → 0.1.10

package/dist/index.es.js

@@ -38,26 +38,26 @@ var _e;
 import * as React from "react";
 import { createContext, useContext, useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as configureStore, m as getDocument, n as getElementId, o as getIsInBuilder, p as getReactComponent, c as createDocument } from "./react-page.es.js";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as getPropControllers, m as configureStore, n as getDocument, o as getElementId, p as getIsInBuilder, q as getReactComponent, c as createDocument } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
 import dynamic from "next/dynamic";
 import NextDocument from "next/document";
 import styled, { ServerStyleSheet } from "styled-components";
 import { KeyUtils } from "slate";
 import createEmotionServer from "@emotion/server/create-instance";
-import { cache, css } from "@emotion/css";
+import { cache, cx, css } from "@emotion/css";
 import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { T as Types, E as ElementID, B as Backgrounds, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid, h as TextInput, L as Link, i as ResponsiveColor, j as TextStyle, I as Images, N as Number, D as Date$1, F as Font, k as ResponsiveLength, l as TextArea, m as Table, n as TableFormFields, o as Image, p as ResponsiveOpacity, q as NavigationLinks, r as SocialLinks, s as RichText, V as Video, t as WidthControlValueFormats } from "./descriptors.es.js";
+import { T as Types, E as ElementID, B as Backgrounds, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid, h as TextInput, L as Link, i as ResponsiveColor, j as TextStyle, k as Images, N as Number, D as Date$1, F as Font, l as ResponsiveLength, m as TextArea, n as Table, o as TableFormFields, p as Image, q as ResponsiveOpacity, r as NavigationLinks, s as SocialLinks, t as RichText, V as Video, u as StyleControlProperty, v as ImageControlValueFormat, I as ImageControlType, w as StyleControlType, x as WidthControlValueFormats } from "./image.es.js";
 import { L as LinkControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ColorControlType } from "./color.es.js";
 import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
-import { a as ImageControlValueFormat, I as ImageControlType } from "./image.es.js";
-import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
+import { S as SlotControlType } from "./slot.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { g as getBox } from "./box-models.es.js";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
@@ -2140,6 +2140,9 @@ function responsiveWidth(widthData, defaultValue = "100%") {
     width: typeof width === "object" ? `${width.value}${width.unit}` : width
   })));
 }
+function colorToString(color) {
+  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
+}
 function murmur2(str) {
   var h = 0;
   var k, i = 0, len = str.length;
@@ -2398,8 +2401,18 @@ var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
     } while (current !== void 0);
   }
 };
-function colorToString(color) {
-  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_e = React[useInsertionEffectSpecifier]) != null ? _e : React.useLayoutEffect;
+function useStyle(style) {
+  const serialized = serializeStyles([style], cache.registered);
+  registerStyles(cache, serialized, false);
+  useInsertionEffect(() => {
+    insertStyles(cache, serialized, false);
+  });
+  if (isServer)
+    insertStyles(cache, serialized, false);
+  return `${cache.key}-${serialized.name}`;
 }
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
@@ -2473,18 +2486,9 @@ function useStyleControlCssObject(style, controlDefinition) {
     return `${fontSize.value}${fontSize.unit}`;
   }
 }
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_e = React[useInsertionEffectSpecifier]) != null ? _e : React.useLayoutEffect;
-const isServer = typeof window === "undefined";
 function useFormattedStyle(styleControlData, controlDefinition) {
   const style = useStyleControlCssObject(styleControlData, controlDefinition);
-  if (isServer)
-    return css(style);
-  const serialized = serializeStyles([style], cache.registered);
-  useInsertionEffect(() => {
-    insertStyles(cache, serialized, false);
-  });
-  return `${cache.key}-${serialized.name}`;
+  return useStyle(style);
 }
 function RenderHook({
   hook: useHook,
@@ -2711,6 +2715,179 @@ function ControlValue({
       return children(data);
   }
 }
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function useSlot(data, control) {
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ jsx(Slot.Placeholder, {
+      control
+    });
+  }
+  return /* @__PURE__ */ jsx(Slot, {
+    control,
+    children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, {
+      control,
+      grid: data.columns,
+      index: i,
+      children: /* @__PURE__ */ jsx(Element, {
+        element
+      })
+    }, element.key))
+  });
+}
+function Slot(_f) {
+  var _g = _f, {
+    as,
+    control,
+    children,
+    className
+  } = _g, restOfProps = __objRest(_g, [
+    "as",
+    "control",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: cx(baseClassName, className),
+    children
+  }));
+}
+Slot.Placeholder = SlotPlaceholder;
+Slot.Item = SlotItem;
+function SlotItem(_h) {
+  var _i = _h, {
+    as,
+    control,
+    grid,
+    index,
+    children,
+    className
+  } = _i, restOfProps = __objRest(_i, [
+    "as",
+    "control",
+    "grid",
+    "index",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = useState(null);
+  const baseClassName = useStyle(__spreadValues({
+    display: "flex"
+  }, responsiveStyle([grid], ([{
+    count = 12,
+    spans = [[12]]
+  } = {}]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, index);
+    const span = spans[rowIndex][columnIndex];
+    const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
+    return span === 0 ? {
+      display: "none"
+    } : {
+      flexBasis,
+      minWidth: flexBasis
+    };
+  })));
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: cx(baseClassName, className),
+    children
+  }));
+}
+function SlotPlaceholder({
+  control
+}) {
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx("div", {
+    ref: setElement,
+    className: useStyle({
+      width: "100%",
+      background: "rgba(161, 168, 194, 0.18)",
+      height: "80px"
+    }),
+    children: /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      className: useStyle({
+        overflow: "visible",
+        padding: 8
+      }),
+      children: /* @__PURE__ */ jsx("rect", {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: "100%",
+        strokeWidth: 2,
+        strokeDasharray: "4 2",
+        fill: "none",
+        stroke: "rgba(161, 168, 194, 0.40)",
+        rx: "4",
+        ry: "4"
+      })
+    })
+  });
+}
+function pollBoxModel({
+  element,
+  onBoxModelChange
+}) {
+  let currentBoxModel = null;
+  const handleAnimationFrameRequest = () => {
+    const measuredBoxModel = getBox(element);
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      currentBoxModel = measuredBoxModel;
+      onBoxModelChange(currentBoxModel);
+    }
+    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  };
+  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  return () => {
+    cancelAnimationFrame(animationFrameHandle);
+  };
+}
 function useDeviceMode() {
   return "desktop";
 }
@@ -2727,7 +2904,14 @@ function PropsValue({
   const store = useStore();
   const propControllerDescriptorsRef = useRef((_a = getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
   const props = element.props;
+  const documentKey = useDocumentKey();
+  const propControllers = useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return getPropControllers(state, documentKey, element.key);
+  });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
+    var _a2;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -2755,6 +2939,16 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
+      case SlotControlType: {
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useSlot,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
       case Types.Width:
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useWidth,
@@ -3061,5 +3255,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, isNonNullable as K, FILES_BY_ID as L, useElementId as M, deepEqual as N, MakeswiftClient as O, PageProvider as P, Document$1 as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, getServerSideProps as U, getStaticProps as V, getStaticPaths as W, Page as X, forwardNextDynamicRef as Y, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page$1 as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
+export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, getIndexes as K, isNonNullable as L, FILES_BY_ID as M, useElementId as N, deepEqual as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, Document$1 as U, getServerSideProps as V, getStaticProps as W, getStaticPaths as X, Page as Y, forwardNextDynamicRef as Z, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page$1 as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
 //# sourceMappingURL=index.es.js.map