@plasmicpkgs/plasmic-cms 0.0.46 → 0.0.50

package/dist/plasmic-cms.esm.js

@@ -165,44 +165,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -1216,55 +1178,6 @@ function TablesProvider(_ref2) {
     data: tables
   }, children);
 }
-function useQueryResults(table) {
-  var env = useDataEnv();
-  var tables = useTables();
-
-  if (!env) {
-    return undefined;
-  }
-
-  if (table) {
-    var _env$mkQueryContextKe;
-
-    return {
-      table: table,
-      rows: (_env$mkQueryContextKe = env[mkQueryContextKey(table)]) != null ? _env$mkQueryContextKe : []
-    };
-  }
-
-  if (!tables) {
-    return undefined;
-  }
-
-  var matchingKeys = getClosestMatchingKeys(env, queryResultPrefix);
-
-  var _loop = function _loop() {
-    var key = _step.value;
-    var inferredTable = tables.find(function (t) {
-      return mkQueryContextKey(t.identifier) === key;
-    });
-
-    if (inferredTable) {
-      var _env$key;
-
-      return {
-        v: {
-          table: inferredTable.identifier,
-          rows: (_env$key = env[key]) != null ? _env$key : []
-        }
-      };
-    }
-  };
-
-  for (var _iterator = _createForOfIteratorHelperLoose(matchingKeys), _step; !(_step = _iterator()).done;) {
-    var _ret = _loop();
-
-    if (typeof _ret === "object") return _ret.v;
-  }
-
-  return undefined;
-}
 
 function getClosestMatchingKeys(env, prefix) {
   return [].concat(Object.keys(env).reverse()).filter(function (k) {
@@ -1281,7 +1194,7 @@ function QueryResultProvider(_ref3) {
     data: rows
   }, children);
 }
-function useRow(table) {
+function useTablesWithDataLoaded() {
   var env = useDataEnv();
   var tables = useTables();
 
@@ -1289,39 +1202,33 @@ function useRow(table) {
     return undefined;
   }
 
-  if (table) {
-    return {
-      table: table,
-      row: env[mkRowContextKey(table)]
-    };
-  }
-
   if (!tables) {
     return undefined;
   }
 
   var matchingKeys = getClosestMatchingKeys(env, rowContextPrefix);
-
-  var _loop2 = function _loop2() {
-    var key = _step2.value;
-    var inferredTable = tables.find(function (t) {
-      return mkRowContextKey(t.identifier) === key;
+  return tables.filter(function (table) {
+    return matchingKeys.some(function (key) {
+      return mkRowContextKey(table.identifier) === key;
     });
+  });
+}
+function useRow(tables, table) {
+  var env = useDataEnv();
 
-    if (inferredTable) {
-      return {
-        v: {
-          table: inferredTable.identifier,
-          row: env[key]
-        }
-      };
-    }
-  };
+  if (!env) {
+    return undefined;
+  }
 
-  for (var _iterator2 = _createForOfIteratorHelperLoose(matchingKeys), _step2; !(_step2 = _iterator2()).done;) {
-    var _ret2 = _loop2();
+  if (!table && tables && tables.length > 0) {
+    table = tables[0].identifier;
+  }
 
-    if (typeof _ret2 === "object") return _ret2.v;
+  if (table) {
+    return {
+      table: table,
+      row: env[mkRowContextKey(table)]
+    };
   }
 
   return undefined;
@@ -1382,15 +1289,8 @@ var _excluded = ["children"],
     _excluded3 = ["table", "field", "valueProp", "children", "setControlContextData"];
 var modulePath = "@plasmicpkgs/plasmic-cms";
 var componentPrefix = "hostless-plasmic-cms";
-var fetcherComponentPropMetas = {
-  hideIfNotFound: {
-    type: "boolean",
-    defaultValue: false,
-    description: "Whether to show an error if no result is found"
-  }
-};
 
-function renderMaybeData(maybeData, renderFn, loaderProps) {
+function renderMaybeData(maybeData, renderFn, loaderProps, loadingMessage, forceLoadingState) {
   if ("error" in maybeData) {
     var error = maybeData.error;
 
@@ -1405,8 +1305,8 @@ function renderMaybeData(maybeData, renderFn, loaderProps) {
     }
   }
 
-  if (!("data" in maybeData)) {
-    return React.createElement("div", null, "Loading...");
+  if (!("data" in maybeData) || forceLoadingState) {
+    return React.createElement(React.Fragment, null, loadingMessage != null ? loadingMessage : React.createElement("div", null, "Loading..."));
   }
 
   return renderFn(maybeData.data);
@@ -1416,6 +1316,7 @@ var defaultHost = "https://studio.plasmic.app";
 var cmsCredentialsProviderMeta = {
   name: componentPrefix + "-credentials-provider",
   displayName: "CMS Credentials Provider",
+  description: "Find your CMS in the [dashboard](https://studio.plasmic.app), and go to the Settings tab for the ID and token.",
   importName: "CmsCredentialsProvider",
   importPath: modulePath,
   props: {
@@ -1495,204 +1396,26 @@ function TablesFetcher(_ref2) {
   });
 }
 
-var cmsQueryLoaderMeta = {
-  name: componentPrefix + "-query-loader",
-  displayName: "CMS Data Loader",
-  importName: "CmsQueryLoader",
-  importPath: modulePath,
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "component",
-        name: componentPrefix + "-row-repeater"
-      }
-    },
-    table: {
-      type: "choice",
-      displayName: "Model",
-      description: "CMS model (table) to query.",
-      options: function options(_, ctx) {
-        return mkTableOptions(ctx == null ? void 0 : ctx.tables);
-      }
-    },
-    useDraft: {
-      type: "boolean",
-      displayName: "Use drafts?",
-      description: "If set, also query unpublished content.",
-      defaultValue: false
-    },
-    where: {
-      type: "object",
-      displayName: "Filter",
-      description: "Filter clause, in JSON format."
-    },
-    orderBy: {
-      type: "choice",
-      displayName: "Order by",
-      description: "Field to order by.",
-      options: function options(_ref4, ctx) {
-        var table = _ref4.table;
-        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, table);
-      }
-    },
-    desc: {
-      type: "boolean",
-      displayName: "Sort descending?",
-      description: 'Sort descending by "Order by" field.',
-      defaultValue: false
-    },
-    limit: {
-      type: "number",
-      displayName: "Limit",
-      description: "Maximum number of entries to fetch (0 for unlimited).",
-      defaultValue: 0
-    }
-  }
-};
-
 function isDatabaseConfigured(config) {
   return (config == null ? void 0 : config.databaseId) && (config == null ? void 0 : config.databaseToken);
 }
 
-function CmsQueryLoader(_ref5) {
-  var table = _ref5.table,
-      children = _ref5.children,
-      setControlContextData = _ref5.setControlContextData,
-      where = _ref5.where,
-      useDraft = _ref5.useDraft,
-      orderBy = _ref5.orderBy,
-      desc = _ref5.desc,
-      limit = _ref5.limit;
-  var databaseConfig = useDatabase();
-  var tables = useTables();
-
-  if (tables) {
-    // TODO: Only include table if __plasmic_cms_row_{table} exists.
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables
-    });
-  }
-
-  var params = {
-    where: where,
-    useDraft: useDraft,
-    orderBy: orderBy,
-    desc: desc,
-    limit: limit
-  };
-  var cacheKey = JSON.stringify({
-    component: "CmsQueryLoader",
-    table: table,
-    databaseConfig: databaseConfig,
-    params: params
-  });
-  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-    return runtime_1.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            if (isDatabaseConfigured(databaseConfig)) {
-              _context2.next = 2;
-              break;
-            }
-
-            throw new Error("You must specify the CMS ID and API key");
-
-          case 2:
-            if (table) {
-              _context2.next = 6;
-              break;
-            }
-
-            throw new Error("You must select a model to query");
-
-          case 6:
-            if (!(tables && !tables.find(function (t) {
-              return t.identifier === table;
-            }))) {
-              _context2.next = 8;
-              break;
-            }
-
-            throw new Error("There is no model called \"" + table + "\"");
-
-          case 8:
-            return _context2.abrupt("return", mkApi(databaseConfig).query(table, params));
-
-          case 9:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-  return renderMaybeData(maybeData, function (rows) {
-    return React.createElement(QueryResultProvider, {
-      table: table,
-      rows: rows
-    }, children);
-  }, {
-    hideIfNotFound: false
-  });
-}
-var cmsRowRepeaterMeta = {
-  name: componentPrefix + "-row-repeater",
-  displayName: "CMS Entry Repeater",
-  importName: "CmsRowRepeater",
-  importPath: modulePath,
-  props: {
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "component",
-        name: componentPrefix + "-row-field"
-      }
-    },
-    table: {
-      type: "choice",
-      displayName: "Model",
-      description: "CMS model (table) to use.",
-      options: function options(_, ctx) {
-        return mkTableOptions(ctx == null ? void 0 : ctx.tables);
-      }
-    }
-  }
-};
-function CmsRowRepeater(_ref7) {
-  var table = _ref7.table,
-      children = _ref7.children,
-      setControlContextData = _ref7.setControlContextData;
-  var tables = useTables();
-
-  if (tables) {
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables
-    });
-  }
-
-  var res = useQueryResults(table);
-
-  if (!res) {
-    return React.createElement("div", null, "Error: No CMS query result to repeat.");
-  }
-
-  return React.createElement(React.Fragment, null, res.rows.map(function (row, index) {
-    return React.createElement(RowProvider, {
-      table: res.table,
-      row: row
-    }, repeatedElement(index === 0, children));
-  }));
-}
 var cmsQueryRepeaterMeta = {
   name: componentPrefix + "-query-repeater",
   displayName: "CMS Data Loader",
   description: "Fetches CMS data and repeats content of children once for every row fetched.",
   importName: "CmsQueryRepeater",
   importPath: modulePath,
+  defaultStyles: {
+    display: "flex",
+    width: "stretch",
+    maxWidth: "100%",
+    flexDirection: "column"
+  },
   props: {
     children: {
       type: "slot",
+      isRepeated: true,
       defaultValue: {
         type: "vbox",
         children: [{
@@ -1707,13 +1430,19 @@ var cmsQueryRepeaterMeta = {
       description: "CMS model (table) to query.",
       options: function options(_, ctx) {
         return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
       }
     },
     useDraft: {
       type: "boolean",
       displayName: "Use drafts?",
       description: "If set, also query unpublished content.",
-      defaultValue: false
+      defaultValue: false,
+      hidden: function hidden() {
+        return true;
+      }
     },
     where: {
       type: "object",
@@ -1727,9 +1456,8 @@ var cmsQueryRepeaterMeta = {
       type: "choice",
       displayName: "Order by",
       description: "Field to order by.",
-      options: function options(_ref8, ctx) {
-        var table = _ref8.table;
-        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, table);
+      options: function options(_, ctx) {
+        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, ctx == null ? void 0 : ctx.table);
       }
     },
     desc: {
@@ -1743,28 +1471,51 @@ var cmsQueryRepeaterMeta = {
       displayName: "Limit",
       description: "Maximum number of entries to fetch (0 for unlimited).",
       defaultValue: 0
+    },
+    emptyMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "No matching published entries found."
+      }
+    },
+    forceEmptyState: {
+      type: "boolean",
+      displayName: "Force empty state",
+      description: "If set, will render as if no matching entries were found.",
+      defaultValue: false
+    },
+    loadingMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Loading..."
+      }
+    },
+    forceLoadingState: {
+      type: "boolean",
+      displayName: "Force loading state",
+      description: "If set, will render as if it is waiting for the query to run.",
+      defaultValue: false
     }
   }
 };
-function CmsQueryRepeater(_ref9) {
-  var table = _ref9.table,
-      children = _ref9.children,
-      setControlContextData = _ref9.setControlContextData,
-      where = _ref9.where,
-      useDraft = _ref9.useDraft,
-      orderBy = _ref9.orderBy,
-      desc = _ref9.desc,
-      limit = _ref9.limit;
+function CmsQueryRepeater(_ref4) {
+  var table = _ref4.table,
+      children = _ref4.children,
+      setControlContextData = _ref4.setControlContextData,
+      where = _ref4.where,
+      useDraft = _ref4.useDraft,
+      orderBy = _ref4.orderBy,
+      desc = _ref4.desc,
+      limit = _ref4.limit,
+      emptyMessage = _ref4.emptyMessage,
+      forceEmptyState = _ref4.forceEmptyState,
+      loadingMessage = _ref4.loadingMessage,
+      forceLoadingState = _ref4.forceLoadingState,
+      className = _ref4.className;
   var databaseConfig = useDatabase();
   var tables = useTables();
-
-  if (tables) {
-    // TODO: Only include table if __plasmic_cms_row_{table} exists.
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables
-    });
-  }
-
   var params = {
     where: where,
     useDraft: useDraft,
@@ -1783,13 +1534,21 @@ function CmsQueryRepeater(_ref9) {
     table = tables[0].identifier;
   }
 
-  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-    return runtime_1.wrap(function _callee3$(_context3) {
+  if (tables) {
+    // TODO: Only include table if __plasmic_cms_row_{table} exists.
+    setControlContextData == null ? void 0 : setControlContextData({
+      tables: tables,
+      table: table
+    });
+  }
+
+  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+    return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
-        switch (_context3.prev = _context3.next) {
+        switch (_context2.prev = _context2.next) {
           case 0:
             if (isDatabaseConfigured(databaseConfig)) {
-              _context3.next = 2;
+              _context2.next = 2;
               break;
             }
 
@@ -1797,7 +1556,7 @@ function CmsQueryRepeater(_ref9) {
 
           case 2:
             if (table) {
-              _context3.next = 6;
+              _context2.next = 6;
               break;
             }
 
@@ -1807,25 +1566,30 @@ function CmsQueryRepeater(_ref9) {
             if (!(tables && !tables.find(function (t) {
               return t.identifier === table;
             }))) {
-              _context3.next = 10;
+              _context2.next = 10;
               break;
             }
 
             throw new Error("There is no model called \"" + table + "\"");
 
           case 10:
-            return _context3.abrupt("return", mkApi(databaseConfig).query(table, params));
+            return _context2.abrupt("return", mkApi(databaseConfig).query(table, params));
 
           case 11:
           case "end":
-            return _context3.stop();
+            return _context2.stop();
         }
       }
-    }, _callee3);
+    }, _callee2);
   })));
-  return renderMaybeData(maybeData, function (rows) {
-    if (rows.length === 0) {
-      return React.createElement("div", null, "No matching entries found.");
+  return React.createElement("div", {
+    className: className
+  }, renderMaybeData(maybeData, function (rows) {
+    if (rows.length === 0 || forceEmptyState) {
+      return React.createElement(QueryResultProvider, {
+        table: table,
+        rows: rows
+      }, emptyMessage);
     }
 
     return React.createElement(QueryResultProvider, {
@@ -1839,7 +1603,7 @@ function CmsQueryRepeater(_ref9) {
     }));
   }, {
     hideIfNotFound: false
-  });
+  }, loadingMessage, forceLoadingState));
 }
 var cmsRowFieldMeta = {
   name: componentPrefix + "-row-field",
@@ -1853,24 +1617,32 @@ var cmsRowFieldMeta = {
       description: "CMS model (table) to use.",
       options: function options(_, ctx) {
         return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
       }
     },
     field: {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref11, ctx) {
+      options: function options(_ref6, ctx) {
         var _ctx$table;
 
-        var table = _ref11.table;
+        var table = _ref6.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table = ctx == null ? void 0 : ctx.table) != null ? _ctx$table : table, ["number", "boolean", "text", "long-text", "date-time", "rich-text", "image"]);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        var _ctx$fieldMeta, _ctx$fieldMeta2;
+
+        return (ctx == null ? void 0 : (_ctx$fieldMeta = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta.name) || (ctx == null ? void 0 : (_ctx$fieldMeta2 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta2.identifier);
       }
     },
     dateFormat: {
       type: "choice",
       displayName: "Date Format",
-      hidden: function hidden(_ref12, ctx) {
-        var field = _ref12.field;
+      hidden: function hidden(_ref7, ctx) {
+        var field = _ref7.field;
 
         if (!ctx) {
           return true;
@@ -1939,18 +1711,18 @@ var cmsRowFieldMeta = {
     }
   }
 };
-function CmsRowField(_ref13) {
+function CmsRowField(_ref8) {
   var _res$row$data;
 
-  var className = _ref13.className,
-      table = _ref13.table,
-      field = _ref13.field,
-      dateFormat = _ref13.dateFormat,
-      setControlContextData = _ref13.setControlContextData,
-      rest = _objectWithoutPropertiesLoose(_ref13, _excluded2);
+  var className = _ref8.className,
+      table = _ref8.table,
+      field = _ref8.field,
+      dateFormat = _ref8.dateFormat,
+      setControlContextData = _ref8.setControlContextData,
+      rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
 
-  var tables = useTables();
-  var res = useRow(table);
+  var tables = useTablesWithDataLoaded();
+  var res = useRow(tables, table);
 
   if (!res) {
     return React.createElement("div", {
@@ -1964,22 +1736,23 @@ function CmsRowField(_ref13) {
     }, "Error: No CMS Entry found");
   }
 
+  var fieldMeta = deriveInferredTableField({
+    table: res.table,
+    tables: tables,
+    field: field,
+    typeFilters: ["text", "long-text", "rich-text"]
+  });
+
   if (tables) {
     // TODO: Only include table if __plasmic_cms_row_{table} exists.
     setControlContextData == null ? void 0 : setControlContextData({
       tables: tables,
       table: res.table,
-      row: res.row
+      row: res.row,
+      fieldMeta: fieldMeta
     });
   }
 
-  var fieldMeta = deriveInferredTableField({
-    table: res.table,
-    tables: tables,
-    field: field,
-    typeFilters: ["text", "long-text", "rich-text"]
-  });
-
   if (!fieldMeta) {
     throw new Error("Please select an entry field to display.");
   }
@@ -2007,6 +1780,7 @@ function deriveInferredTableField(opts) {
       tables = opts.tables,
       field = opts.field,
       typeFilters = opts.typeFilters;
+  if (!table) return undefined;
   var schema = tables == null ? void 0 : (_tables$find = tables.find(function (t) {
     return t.identifier === table;
   })) == null ? void 0 : _tables$find.schema;
@@ -2042,8 +1816,11 @@ function renderValue(value, type, props) {
       if (value && typeof value === "object" && value.url && value.imageMeta) {
         return React.createElement("img", Object.assign({
           src: value.url,
-          width: value.imageMeta.height,
-          height: value.imageMeta.height
+          width: value.imageMeta.width,
+          height: value.imageMeta.height,
+          style: {
+            objectFit: "cover"
+          }
         }, props));
       }
 
@@ -2074,17 +1851,25 @@ var cmsRowLinkMeta = {
       description: "CMS model (table) to use.",
       options: function options(_, ctx) {
         return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
       }
     },
     field: {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref14, ctx) {
+      options: function options(_ref9, ctx) {
         var _ctx$table2;
 
-        var table = _ref14.table;
+        var table = _ref9.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table2 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table2 : table);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        var _ctx$fieldMeta3, _ctx$fieldMeta4;
+
+        return (ctx == null ? void 0 : (_ctx$fieldMeta3 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta3.name) || (ctx == null ? void 0 : (_ctx$fieldMeta4 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta4.identifier);
       }
     },
     hrefProp: {
@@ -2105,31 +1890,23 @@ var cmsRowLinkMeta = {
     }
   }
 };
-function CmsRowLink(_ref15) {
+function CmsRowLink(_ref10) {
   var _res$row$data2;
 
-  var table = _ref15.table,
-      field = _ref15.field,
-      hrefProp = _ref15.hrefProp,
-      children = _ref15.children,
-      setControlContextData = _ref15.setControlContextData,
-      prefix = _ref15.prefix,
-      suffix = _ref15.suffix;
-  var tables = useTables();
-  var res = useRow(table);
+  var table = _ref10.table,
+      field = _ref10.field,
+      hrefProp = _ref10.hrefProp,
+      children = _ref10.children,
+      setControlContextData = _ref10.setControlContextData,
+      prefix = _ref10.prefix,
+      suffix = _ref10.suffix;
+  var tables = useTablesWithDataLoaded();
+  var res = useRow(tables, table);
 
   if (!res || !res.row) {
     return React.createElement(React.Fragment, null, children);
   }
 
-  if (tables) {
-    // TODO: Only include table if __plasmic_cms_row_{table} exists.
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables,
-      table: res.table
-    });
-  }
-
   var fieldMeta = deriveInferredTableField({
     table: res.table,
     tables: tables,
@@ -2137,6 +1914,16 @@ function CmsRowLink(_ref15) {
     typeFilters: ["text"]
   });
 
+  if (tables) {
+    // TODO: Only include table if __plasmic_cms_row_{table} exists.
+    setControlContextData == null ? void 0 : setControlContextData({
+      tables: tables,
+      table: res.table,
+      row: res.row,
+      fieldMeta: fieldMeta
+    });
+  }
+
   if (!fieldMeta) {
     return React.createElement(React.Fragment, null, children);
   }
@@ -2176,17 +1963,25 @@ var cmsRowImageMeta = {
       description: "CMS model (table) to use.",
       options: function options(_, ctx) {
         return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
       }
     },
     field: {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref16, ctx) {
+      options: function options(_ref11, ctx) {
         var _ctx$table3;
 
-        var table = _ref16.table;
-        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table3 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table3 : table);
+        var table = _ref11.table;
+        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table3 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table3 : table, ["image"]);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        var _ctx$fieldMeta5, _ctx$fieldMeta6;
+
+        return (ctx == null ? void 0 : (_ctx$fieldMeta5 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta5.name) || (ctx == null ? void 0 : (_ctx$fieldMeta6 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta6.identifier);
       }
     },
     srcProp: {
@@ -2197,29 +1992,21 @@ var cmsRowImageMeta = {
     }
   }
 };
-function CmsRowImage(_ref17) {
+function CmsRowImage(_ref12) {
   var _res$row$data3;
 
-  var table = _ref17.table,
-      field = _ref17.field,
-      srcProp = _ref17.srcProp,
-      children = _ref17.children,
-      setControlContextData = _ref17.setControlContextData;
-  var tables = useTables();
-  var res = useRow(table);
+  var table = _ref12.table,
+      field = _ref12.field,
+      srcProp = _ref12.srcProp,
+      children = _ref12.children,
+      setControlContextData = _ref12.setControlContextData;
+  var tables = useTablesWithDataLoaded();
+  var res = useRow(tables, table);
 
   if (!res || !res.row) {
     return React.createElement(React.Fragment, null, children);
   }
 
-  if (tables) {
-    // TODO: Only include table if __plasmic_cms_row_{table} exists.
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables,
-      table: res.table
-    });
-  }
-
   var fieldMeta = deriveInferredTableField({
     table: res.table,
     tables: tables,
@@ -2227,6 +2014,16 @@ function CmsRowImage(_ref17) {
     typeFilters: ["image"]
   });
 
+  if (tables) {
+    // TODO: Only include table if __plasmic_cms_row_{table} exists.
+    setControlContextData == null ? void 0 : setControlContextData({
+      tables: tables,
+      table: res.table,
+      row: res.row,
+      fieldMeta: fieldMeta
+    });
+  }
+
   if (!fieldMeta) {
     return React.createElement(React.Fragment, null, children);
   }
@@ -2268,17 +2065,25 @@ var cmsRowFieldValueMeta = {
       description: "CMS model (table) to use.",
       options: function options(_, ctx) {
         return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
       }
     },
     field: {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref18, ctx) {
+      options: function options(_ref13, ctx) {
         var _ctx$table4;
 
-        var table = _ref18.table;
+        var table = _ref13.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table4 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table4 : table);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        var _ctx$fieldMeta7, _ctx$fieldMeta8;
+
+        return (ctx == null ? void 0 : (_ctx$fieldMeta7 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta7.name) || (ctx == null ? void 0 : (_ctx$fieldMeta8 = ctx.fieldMeta) == null ? void 0 : _ctx$fieldMeta8.identifier);
       }
     },
     valueProp: {
@@ -2289,31 +2094,23 @@ var cmsRowFieldValueMeta = {
     }
   }
 };
-function CmsRowFieldValue(_ref19) {
+function CmsRowFieldValue(_ref14) {
   var _res$row$data4;
 
-  var table = _ref19.table,
-      field = _ref19.field,
-      valueProp = _ref19.valueProp,
-      children = _ref19.children,
-      setControlContextData = _ref19.setControlContextData,
-      rest = _objectWithoutPropertiesLoose(_ref19, _excluded3);
+  var table = _ref14.table,
+      field = _ref14.field,
+      valueProp = _ref14.valueProp,
+      children = _ref14.children,
+      setControlContextData = _ref14.setControlContextData,
+      rest = _objectWithoutPropertiesLoose(_ref14, _excluded3);
 
-  var tables = useTables();
-  var res = useRow(table);
+  var tables = useTablesWithDataLoaded();
+  var res = useRow(tables, table);
 
   if (!res || !res.row) {
     return React.createElement(React.Fragment, null, children);
   }
 
-  if (tables) {
-    // TODO: Only include table if __plasmic_cms_row_{table} exists.
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables,
-      table: res.table
-    });
-  }
-
   var fieldMeta = deriveInferredTableField({
     table: res.table,
     tables: tables,
@@ -2321,6 +2118,16 @@ function CmsRowFieldValue(_ref19) {
     typeFilters: ["text"]
   });
 
+  if (tables) {
+    // TODO: Only include table if __plasmic_cms_row_{table} exists.
+    setControlContextData == null ? void 0 : setControlContextData({
+      tables: tables,
+      table: res.table,
+      row: res.row,
+      fieldMeta: fieldMeta
+    });
+  }
+
   if (!fieldMeta) {
     return React.createElement(React.Fragment, null, children);
   }
@@ -2337,106 +2144,6 @@ function CmsRowFieldValue(_ref19) {
   });
   return React.createElement(React.Fragment, null, childrenWithProps);
 }
-var cmsRowLoaderMeta = {
-  name: componentPrefix + "-row-loader",
-  displayName: "CMS Row Loader",
-  importName: "CmsRowLoader",
-  importPath: modulePath,
-  props: /*#__PURE__*/_extends({
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "component",
-        name: componentPrefix + "-row-field"
-      }
-    },
-    row: {
-      type: "string",
-      displayName: "Entry ID",
-      description: "Row identifier to query."
-    },
-    table: {
-      type: "choice",
-      displayName: "Model",
-      description: "CMS model (table) to query.",
-      options: function options(_, ctx) {
-        return mkTableOptions(ctx == null ? void 0 : ctx.tables);
-      }
-    },
-    useDraft: {
-      type: "boolean",
-      displayName: "Use drafts?",
-      description: "If set, also query unpublished content.",
-      defaultValue: false
-    }
-  }, fetcherComponentPropMetas)
-};
-function CmsRowLoader(_ref20) {
-  var table = _ref20.table,
-      row = _ref20.row,
-      children = _ref20.children,
-      useDraft = _ref20.useDraft,
-      hideIfNotFound = _ref20.hideIfNotFound,
-      setControlContextData = _ref20.setControlContextData;
-  var databaseConfig = useDatabase();
-  var tables = useTables();
-
-  if (tables) {
-    setControlContextData == null ? void 0 : setControlContextData({
-      tables: tables
-    });
-  }
-
-  var cacheKey = JSON.stringify({
-    component: "CmsRowLoader",
-    table: table,
-    row: row,
-    databaseConfig: databaseConfig,
-    useDraft: useDraft
-  });
-  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
-    return runtime_1.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            if (table) {
-              _context4.next = 2;
-              break;
-            }
-
-            throw new Error("You must specify a model to fetch from.");
-
-          case 2:
-            if (row) {
-              _context4.next = 4;
-              break;
-            }
-
-            throw new Error("You must specify an entry name to fetch.");
-
-          case 4:
-            _context4.next = 6;
-            return mkApi(databaseConfig).fetchRow(table, row, useDraft);
-
-          case 6:
-            return _context4.abrupt("return", _context4.sent);
-
-          case 7:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  })));
-  return renderMaybeData(maybeData, function (row) {
-    return React.createElement(RowProvider, {
-      table: table,
-      row: row
-    }, children);
-  }, {
-    hideIfNotFound: hideIfNotFound
-  });
-}
 
 function registerAll(loader) {
   //const registerContext = loader?.registerContext ?? hostRegisterContext;
@@ -2457,9 +2164,7 @@ function registerAll(loader) {
     }
   };
 
-  _registerGlobalContext(CmsCredentialsProvider, cmsCredentialsProviderMeta); // _registerComponent(CmsQueryLoader, cmsQueryLoaderMeta);
-  // _registerComponent(CmsRowRepeater, cmsRowRepeaterMeta);
-
+  _registerGlobalContext(CmsCredentialsProvider, cmsCredentialsProviderMeta);
 
   _registerComponent(CmsQueryRepeater, cmsQueryRepeaterMeta);
 
@@ -2469,9 +2174,8 @@ function registerAll(loader) {
 
   _registerComponent(CmsRowImage, cmsRowImageMeta);
 
-  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta); // _registerComponent(CmsRowLoader, cmsRowLoaderMeta);
-
+  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta);
 }
 
-export { CmsCredentialsProvider, CmsQueryLoader, CmsQueryRepeater, CmsRowField, CmsRowFieldValue, CmsRowImage, CmsRowLink, CmsRowLoader, CmsRowRepeater, cmsCredentialsProviderMeta, cmsQueryLoaderMeta, cmsQueryRepeaterMeta, cmsRowFieldMeta, cmsRowFieldValueMeta, cmsRowImageMeta, cmsRowLinkMeta, cmsRowLoaderMeta, cmsRowRepeaterMeta, registerAll };
+export { CmsCredentialsProvider, CmsQueryRepeater, CmsRowField, CmsRowFieldValue, CmsRowImage, CmsRowLink, cmsCredentialsProviderMeta, cmsQueryRepeaterMeta, cmsRowFieldMeta, cmsRowFieldValueMeta, cmsRowImageMeta, cmsRowLinkMeta, registerAll };
 //# sourceMappingURL=plasmic-cms.esm.js.map