@makeswift/runtime 0.0.1 → 0.0.4

package/dist/index.cjs.js

@@ -35,6 +35,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var React = require("react");
+var reactIs = require("react-is");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var client = require("@apollo/client");
 var reactPage = require("./react-page.cjs.js");
@@ -64,6 +65,7 @@ var ipsum = require("corporate-ipsum");
 var slateReact = require("slate-react");
 var Lists = require("@convertkit/slate-lists");
 var style = require("./style.cjs.js");
+var reactDom = require("react-dom");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
@@ -5662,11 +5664,15 @@ function DropDownButton(_U) {
   var _V = _U, {
     label,
     caret = "caret",
-    links: links2 = []
+    links: links2 = [],
+    textColor,
+    color
   } = _V, restOfProps = __objRest(_V, [
     "label",
     "caret",
-    "links"
+    "links",
+    "textColor",
+    "color"
   ]);
   const container = React.useRef(null);
   const [position, setPosition] = React.useState("left");
@@ -5680,6 +5686,8 @@ function DropDownButton(_U) {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropDownContainer, {
     ref: container,
     children: [/* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: useColor(textColor),
+      color: useColor(color),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
@@ -5769,16 +5777,22 @@ function MobileDropDownButton(_Y) {
     caret,
     links: links2 = [],
     onClose = () => {
-    }
+    },
+    color,
+    textColor
   } = _Z, restOfProps = __objRest(_Z, [
     "label",
     "caret",
     "links",
-    "onClose"
+    "onClose",
+    "color",
+    "textColor"
   ]);
   const [isOpen, setIsOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx(ButtonLink$1, __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: useColor(textColor),
+      color: useColor(color),
       onPointerDown: () => setIsOpen((prev) => !prev),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
@@ -5812,7 +5826,20 @@ function MobileDropDownButton(_Y) {
     })]
   });
 }
-const ButtonLink = styled__default["default"](Button$1)`
+function NavigationButton$1(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: useColor(textColor),
+    color: useColor(color)
+  }));
+}
+const ButtonLink = styled__default["default"](NavigationButton$1)`
   margin: 8px 0;
 `;
 const Container$3 = styled__default["default"].div`
@@ -5925,6 +5952,19 @@ const OpenIconContainer = styled__default["default"].button`
         color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
       `)}
 `;
+function NavigationButton(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: useColor(textColor),
+    color: useColor(color)
+  }));
+}
 const placeholder = {
   src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A",
   dimensions: {
@@ -5976,7 +6016,7 @@ const Navigation = React.forwardRef(function Navigation2({
           gutter,
           first: i === 0,
           last: i === links2.length - 1,
-          children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, link.payload), {
+          children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, __spreadProps(__spreadValues({}, link.payload), {
             children: link.payload.label
           })), link.type === "dropdown" && /* @__PURE__ */ jsxRuntime.jsx(DropDownButton, __spreadValues({}, link.payload))]
         }, link.id)) : /* @__PURE__ */ jsxRuntime.jsx(LinksPlaceholder, {
@@ -7526,7 +7566,7 @@ const Text = React.forwardRef(function Text2({
   }, [shouldCommit]);
   function handleChange(change) {
     setValue(change.value);
-    if (change.value.document !== value.document) {
+    if (change.value !== value) {
       setShouldCommit(false);
       controller == null ? void 0 : controller.onChange(change);
     }
@@ -7905,6 +7945,48 @@ function useProps(element) {
     }
   }));
 }
+function suppressWarningAndFindDomNode(instance) {
+  const error = console.error;
+  console.error = (...args) => {
+    const [msg, ...substitutions] = args;
+    const text = substitutions.reduce((text2, substitution) => text2.replace("%s", substitution), msg);
+    if (!text.includes("findDOMNode is deprecated in StrictMode.")) {
+      error.apply(console, args);
+    }
+  };
+  const foundDomNode = reactDom.findDOMNode(instance);
+  console.error = error;
+  return foundDomNode;
+}
+class FindDomNodeClassComponent extends React.Component {
+  componentDidMount() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  componentDidUpdate() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  setInnerRef(current) {
+    const {
+      innerRef
+    } = this.props;
+    if (innerRef == null)
+      return;
+    if (typeof innerRef === "function")
+      innerRef(current);
+    else
+      innerRef.current = current;
+  }
+  render() {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: this.props.children
+    });
+  }
+}
+const FindDomNode = React.forwardRef(function FindDomNode2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FindDomNodeClassComponent, __spreadProps(__spreadValues({}, props), {
+    innerRef: ref
+  }));
+});
 const contextDefaultValue = reactPage.configureStore();
 function createReactRuntime(store) {
   return {
@@ -8051,16 +8133,22 @@ const ElementData = React.memo(React.forwardRef(function ElementData2({
 }, ref) {
   const Component = useComponent(elementData.type);
   const props = useProps(elementData);
+  const forwardsRef = React.useMemo(() => reactIs.isForwardRef(Component), [Component]);
   if (Component == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
       text: "Component not found"
     });
   }
-  return /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
+  return forwardsRef ? /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
     key: elementData.key,
     ref
-  }));
+  })) : /* @__PURE__ */ jsxRuntime.jsx(FindDomNode, {
+    ref,
+    children: /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
+      key: elementData.key
+    }))
+  });
 }));
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference