@plasmicpkgs/plasmic-cms 0.0.214 → 0.0.215

package/dist/plasmic-cms.cjs.development.js

@@ -9,8 +9,7 @@ var registerGlobalContext = _interopDefault(require('@plasmicapp/host/registerGl
 var host = require('@plasmicapp/host');
 var query = require('@plasmicapp/query');
 var dayjs = _interopDefault(require('dayjs'));
-var React = require('react');
-var React__default = _interopDefault(React);
+var React = _interopDefault(require('react'));
 
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
@@ -447,6 +446,7 @@ function queryParamsToApi(params) {
   return {
     where: params.where,
     limit: params.limit,
+    offset: params.offset,
     order: params.orderBy ? [{
       field: params.orderBy,
       dir: params.desc ? "desc" : "asc"
@@ -463,7 +463,7 @@ var HttpError = /*#__PURE__*/function (_Error) {
   }
   return HttpError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
-var API = /*#__PURE__*/function (_get, _fetchTables, _query) {
+var API = /*#__PURE__*/function (_get, _fetchTables, _query, _count) {
   function API(config) {
     this.config = config;
   }
@@ -503,7 +503,9 @@ var API = /*#__PURE__*/function (_get, _fetchTables, _query) {
               if ((_json$error = json.error) != null && _json$error.message) {
                 message = json.error.message;
               }
-            } catch (_unused) {}
+            } catch (_unused) {
+              // ignored
+            }
             throw new HttpError(response.status, message);
           case 12:
             _context.next = 14;
@@ -572,6 +574,36 @@ var API = /*#__PURE__*/function (_get, _fetchTables, _query) {
       }, _callee3, this, [[1, 8]]);
     }))).apply(this, arguments);
   };
+  _proto.count = function count(_x5, _x6) {
+    return (_count = _count || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(table, params) {
+      var response;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (params === void 0) {
+              params = {};
+            }
+            _context4.prev = 1;
+            _context4.next = 4;
+            return this.get("/tables/" + table + "/count", {
+              q: JSON.stringify(queryParamsToApi(params)),
+              draft: Number(params.useDraft)
+            });
+          case 4:
+            response = _context4.sent;
+            return _context4.abrupt("return", response.count);
+          case 8:
+            _context4.prev = 8;
+            _context4.t0 = _context4["catch"](1);
+            console.error(_context4.t0);
+            throw _context4.t0;
+          case 12:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, this, [[1, 8]]);
+    }))).apply(this, arguments);
+  };
   return API;
 }();
 function mkApi(config) {
@@ -589,9 +621,17 @@ var mkQueryContextKey = function mkQueryContextKey(table) {
   return "" + contextPrefix + capitalizeFirst(table) + collectionResultSuffix;
 };
 var itemContextSuffix = "Item";
+var countContextSuffix = "Count";
+var modeContextSuffix = "Mode";
 var mkRowContextKey = function mkRowContextKey(table) {
   return "" + contextPrefix + capitalizeFirst(table) + itemContextSuffix;
 };
+var mkCountContextKey = function mkCountContextKey(table) {
+  return "" + contextPrefix + capitalizeFirst(table) + countContextSuffix;
+};
+var mkModeContextKey = function mkModeContextKey(table) {
+  return "" + contextPrefix + capitalizeFirst(table) + modeContextSuffix;
+};
 function capitalizeFirst(str) {
   var _str$;
   return ((_str$ = str[0]) == null ? void 0 : _str$.toUpperCase()) + str.slice(1);
@@ -602,7 +642,7 @@ function useDatabase() {
 function DatabaseProvider(_ref) {
   var config = _ref.config,
     children = _ref.children;
-  return React__default.createElement(host.DataProvider, {
+  return React.createElement(host.DataProvider, {
     name: databaseContextKey,
     data: config,
     hidden: true
@@ -614,15 +654,15 @@ function useTables() {
 function TablesProvider(_ref2) {
   var children = _ref2.children,
     tables = _ref2.tables;
-  return React__default.createElement(host.DataProvider, {
+  return React.createElement(host.DataProvider, {
     name: tablesContextKey,
     data: tables,
     hidden: true
   }, children);
 }
-function getClosestMatchingKeys(env, suffix) {
-  return [].concat(Object.keys(env).reverse()).filter(function (k) {
-    return k.endsWith(suffix);
+function getClosestMatchingKeysBy(env, pred) {
+  return [].concat(Object.keys(env).reverse()).filter(function (key) {
+    return pred(key);
   });
 }
 function QueryResultProvider(_ref3) {
@@ -630,13 +670,17 @@ function QueryResultProvider(_ref3) {
     table = _ref3.table,
     rows = _ref3.rows,
     hidden = _ref3.hidden;
-  return React__default.createElement(host.DataProvider, {
+  return React.createElement(host.DataProvider, {
+    name: table ? mkModeContextKey(table) : undefined,
+    data: "rows",
+    hidden: true
+  }, React.createElement(host.DataProvider, {
     name: table ? mkQueryContextKey(table) : undefined,
     data: rows,
     hidden: hidden
-  }, children);
+  }, children));
 }
-function useTablesWithDataLoaded() {
+function useTablesWithDataLoaded(mode) {
   var env = host.useDataEnv();
   var tables = useTables();
   if (!env) {
@@ -645,21 +689,39 @@ function useTablesWithDataLoaded() {
   if (!tables) {
     return undefined;
   }
-  var matchingKeys = getClosestMatchingKeys(env, itemContextSuffix);
+  var matchingKeys = getClosestMatchingKeysBy(env, function (key) {
+    if (mode === "rows") {
+      return key.endsWith(itemContextSuffix);
+    } else if (mode === "count") {
+      return key.endsWith(countContextSuffix);
+    } else {
+      return key.endsWith(itemContextSuffix) || key.endsWith(countContextSuffix);
+    }
+  });
   return tables.filter(function (table) {
     return matchingKeys.some(function (key) {
-      return mkRowContextKey(table.identifier) === key;
+      if (mode === "rows") {
+        return mkRowContextKey(table.identifier) === key;
+      } else if (mode === "count") {
+        return mkCountContextKey(table.identifier) === key;
+      } else {
+        return mkRowContextKey(table.identifier) === key || mkCountContextKey(table.identifier) === key;
+      }
     });
   });
 }
+function deriveTableId(tables, table) {
+  if (!table && tables && tables.length > 0) {
+    table = tables[0].identifier;
+  }
+  return table;
+}
 function useRow(tables, table) {
   var env = host.useDataEnv();
   if (!env) {
     return undefined;
   }
-  if (!table && tables && tables.length > 0) {
-    table = tables[0].identifier;
-  }
+  table = deriveTableId(tables, table);
   if (table) {
     return {
       table: table,
@@ -668,15 +730,42 @@ function useRow(tables, table) {
   }
   return undefined;
 }
+function useCount(tables, table) {
+  var env = host.useDataEnv();
+  if (!env) {
+    return undefined;
+  }
+  table = deriveTableId(tables, table);
+  if (table) {
+    return {
+      table: table,
+      count: env[mkCountContextKey(table)]
+    };
+  }
+  return undefined;
+}
 function RowProvider(_ref4) {
   var children = _ref4.children,
     table = _ref4.table,
     row = _ref4.row;
-  return React__default.createElement(host.DataProvider, {
+  return React.createElement(host.DataProvider, {
     name: mkRowContextKey(table),
     data: row
   }, children);
 }
+function CountProvider(_ref5) {
+  var children = _ref5.children,
+    table = _ref5.table,
+    count = _ref5.count;
+  return React.createElement(host.DataProvider, {
+    name: table ? mkModeContextKey(table) : undefined,
+    data: "count",
+    hidden: true
+  }, React.createElement(host.DataProvider, {
+    name: table ? mkCountContextKey(table) : undefined,
+    data: count
+  }, children));
+}
 
 function mkTableOptions(tables) {
   if (!tables) {
@@ -723,27 +812,28 @@ function mkFieldOptions(tables, tableIdentifier, types) {
 }
 
 var _excluded = ["className", "table", "field", "dateFormat", "setControlContextData"],
-  _excluded2 = ["table", "field", "valueProp", "children", "setControlContextData"];
+  _excluded2 = ["className", "table", "setControlContextData"],
+  _excluded3 = ["table", "field", "valueProp", "children", "setControlContextData"];
 var modulePath = "@plasmicpkgs/plasmic-cms";
 var componentPrefix = "hostless-plasmic-cms";
 function renderMaybeData(maybeData, renderFn, loaderProps, inEditor, loadingMessage, forceLoadingState) {
   if ("error" in maybeData) {
     var error = maybeData.error;
     if (!inEditor) {
-      return React__default.createElement(React__default.Fragment, null, loadingMessage != null ? loadingMessage : React__default.createElement("div", null, "Loading..."));
+      return React.createElement(React.Fragment, null, loadingMessage != null ? loadingMessage : React.createElement("div", null, "Loading..."));
     }
     if (error && error instanceof HttpError && error.status === 404) {
       if (loaderProps.hideIfNotFound) {
         return null;
       } else {
-        return React__default.createElement("div", null, "Error: Data not found");
+        return React.createElement("div", null, "Error: Data not found");
       }
     } else {
-      return React__default.createElement("div", null, "Error: ", error == null ? void 0 : error.message);
+      return React.createElement("div", null, "Error: ", error == null ? void 0 : error.message);
     }
   }
   if (!("data" in maybeData) || forceLoadingState) {
-    return React__default.createElement(React__default.Fragment, null, loadingMessage != null ? loadingMessage : React__default.createElement("div", null, "Loading..."));
+    return React.createElement(React.Fragment, null, loadingMessage != null ? loadingMessage : React.createElement("div", null, "Loading..."));
   }
   return renderFn(maybeData.data);
 }
@@ -793,9 +883,9 @@ function CmsCredentialsProvider(_ref) {
     locale: locale,
     host: host || defaultHost
   };
-  return React__default.createElement(DatabaseProvider, {
+  return React.createElement(DatabaseProvider, {
     config: config
-  }, React__default.createElement(TablesFetcher, null, children));
+  }, React.createElement(TablesFetcher, null, children));
 }
 function TablesFetcher(_ref2) {
   var children = _ref2.children;
@@ -824,10 +914,10 @@ function TablesFetcher(_ref2) {
       }
     }, _callee);
   })));
-  var inEditor = !!React.useContext(host.PlasmicCanvasContext);
-  return React__default.createElement(TablesProvider, {
+  var inEditor = !!host.usePlasmicCanvasContext();
+  return React.createElement(TablesProvider, {
     tables: maybeData.data
-  }, inEditor && maybeData.error ? React__default.createElement("div", null, "CMS Error: ", maybeData.error.message) : children);
+  }, inEditor && maybeData.error ? React.createElement("div", null, "CMS Error: ", maybeData.error.message) : children);
 }
 function isDatabaseConfigured(config) {
   return (config == null ? void 0 : config.databaseId) && (config == null ? void 0 : config.databaseToken);
@@ -877,6 +967,17 @@ var cmsQueryRepeaterMeta = {
         return true;
       }
     },
+    mode: {
+      type: "choice",
+      options: [{
+        label: "Rows",
+        value: "rows"
+      }, {
+        label: "Count",
+        value: "count"
+      }],
+      defaultValueHint: "rows"
+    },
     where: {
       type: "object",
       displayName: "Filter",
@@ -906,19 +1007,36 @@ var cmsQueryRepeaterMeta = {
       description: "Field to order by.",
       options: function options(_, ctx) {
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, ctx == null ? void 0 : ctx.table, ["number", "boolean", "date-time", "long-text", "text"]);
+      },
+      hidden: function hidden(ps) {
+        return ps.mode === "count";
       }
     },
     desc: {
       type: "boolean",
       displayName: "Sort descending?",
       description: 'Sort descending by "Order by" field.',
-      defaultValue: false
+      defaultValue: false,
+      hidden: function hidden(ps) {
+        return ps.mode === "count";
+      }
     },
     limit: {
       type: "number",
       displayName: "Limit",
       description: "Maximum number of entries to fetch (0 for unlimited).",
-      defaultValue: 0
+      defaultValue: 0,
+      hidden: function hidden(ps) {
+        return ps.mode === "count";
+      }
+    },
+    offset: {
+      type: "number",
+      displayName: "Offset",
+      description: "Skips this number of rows in the result set; used in combination with limit to build pagination",
+      hidden: function hidden(ps) {
+        return ps.mode === "count";
+      }
     },
     emptyMessage: {
       type: "slot",
@@ -956,7 +1074,10 @@ var cmsQueryRepeaterMeta = {
       type: "boolean",
       displayName: "No auto-repeat",
       description: "Do not automatically repeat children for every entry.",
-      defaultValue: false
+      defaultValue: false,
+      hidden: function hidden(ps) {
+        return ps.mode === "count";
+      }
     }
   }
 };
@@ -964,11 +1085,13 @@ function CmsQueryRepeater(_ref5) {
   var table = _ref5.table,
     children = _ref5.children,
     setControlContextData = _ref5.setControlContextData,
+    mode = _ref5.mode,
     where = _ref5.where,
     useDraft = _ref5.useDraft,
     orderBy = _ref5.orderBy,
     desc = _ref5.desc,
     limit = _ref5.limit,
+    offset = _ref5.offset,
     emptyMessage = _ref5.emptyMessage,
     forceEmptyState = _ref5.forceEmptyState,
     loadingMessage = _ref5.loadingMessage,
@@ -989,13 +1112,15 @@ function CmsQueryRepeater(_ref5) {
     useDraft: useDraft,
     orderBy: orderBy,
     desc: desc,
-    limit: limit
+    limit: limit,
+    offset: offset
   };
   if (!table && tables && tables.length > 0) {
     table = tables[0].identifier;
   }
   var cacheKey = JSON.stringify({
     component: "CmsQueryLoader",
+    mode: mode,
     table: table,
     databaseConfig: databaseConfig,
     params: params
@@ -1031,34 +1156,52 @@ function CmsQueryRepeater(_ref5) {
           }
           throw new Error("There is no model called \"" + table + "\"");
         case 10:
+          if (!(mode === "count")) {
+            _context2.next = 14;
+            break;
+          }
+          return _context2.abrupt("return", mkApi(databaseConfig).count(table, params));
+        case 14:
           return _context2.abrupt("return", mkApi(databaseConfig).query(table, params));
-        case 11:
+        case 15:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  var inEditor = !!React.useContext(host.PlasmicCanvasContext);
-  var node = renderMaybeData(maybeData, function (rows) {
-    if (rows.length === 0 || forceEmptyState) {
-      return emptyMessage;
-    }
-    return noAutoRepeat ? children : rows.map(function (row, index) {
-      return React__default.createElement(RowProvider, {
-        key: index,
-        table: table,
-        row: row
-      }, host.repeatedElement(index, children));
-    });
-  }, {
-    hideIfNotFound: false
-  }, inEditor, loadingMessage, forceLoadingState);
-  return React__default.createElement(QueryResultProvider, {
-    rows: maybeData == null ? void 0 : maybeData.data,
-    table: table
-  }, noLayout ? React__default.createElement(React__default.Fragment, null, " ", node, " ") : React__default.createElement("div", {
-    className: className
-  }, " ", node, " "));
+  var inEditor = !!host.usePlasmicCanvasContext();
+  if (mode === "count") {
+    var node = renderMaybeData(maybeData, function () {
+      return children;
+    }, {
+      hideIfNotFound: false
+    }, inEditor, loadingMessage, forceLoadingState);
+    return React.createElement(CountProvider, {
+      table: table,
+      count: typeof (maybeData == null ? void 0 : maybeData.data) === "number" ? maybeData.data : undefined
+    }, node);
+  } else {
+    var _node = renderMaybeData(maybeData, function (rows) {
+      if (rows.length === 0 || forceEmptyState) {
+        return emptyMessage;
+      }
+      return noAutoRepeat ? children : rows.map(function (row, index) {
+        return React.createElement(RowProvider, {
+          key: index,
+          table: table,
+          row: row
+        }, host.repeatedElement(index, children));
+      });
+    }, {
+      hideIfNotFound: false
+    }, inEditor, loadingMessage, forceLoadingState);
+    return React.createElement(QueryResultProvider, {
+      rows: Array.isArray(maybeData == null ? void 0 : maybeData.data) ? maybeData.data : undefined,
+      table: table
+    }, noLayout ? React.createElement(React.Fragment, null, " ", _node, " ") : React.createElement("div", {
+      className: className
+    }, " ", _node, " "));
+  }
 }
 var cmsRowFieldMeta = {
   name: componentPrefix + "-row-field",
@@ -1174,9 +1317,9 @@ function CmsRowField(_ref9) {
     dateFormat = _ref9.dateFormat,
     setControlContextData = _ref9.setControlContextData,
     rest = _objectWithoutPropertiesLoose(_ref9, _excluded);
-  var tables = useTablesWithDataLoaded();
+  var tables = useTablesWithDataLoaded("rows");
   var res = useRow(tables, table);
-  var unknown = React__default.createElement("div", Object.assign({
+  var unknown = React.createElement("div", Object.assign({
     className: className
   }, rest), "Field ", table != null ? table : "Unknown Model", ".", field != null ? field : "Unknown Field");
   var fieldMeta = res ? deriveInferredTableField({
@@ -1199,7 +1342,7 @@ function CmsRowField(_ref9) {
     return unknown;
   }
   if (!res.row) {
-    return React__default.createElement("div", {
+    return React.createElement("div", {
       className: className
     }, "Error: No CMS Entry found");
   }
@@ -1217,6 +1360,50 @@ function CmsRowField(_ref9) {
     className: className
   }, rest)) : null;
 }
+var cmsCountFieldMeta = {
+  name: componentPrefix + "-count",
+  displayName: "CMS Entries Count",
+  importName: "CmsCount",
+  importPath: modulePath,
+  props: {
+    table: {
+      type: "choice",
+      displayName: "Model",
+      hidden: function hidden(props, ctx) {
+        var _ctx$tables$length2, _ctx$tables2;
+        return ((_ctx$tables$length2 = ctx == null || (_ctx$tables2 = ctx.tables) == null ? void 0 : _ctx$tables2.length) != null ? _ctx$tables$length2 : 0) <= 1 && !props.table;
+      },
+      helpText: "Pick model from a CMS Data Fetcher",
+      description: "Usually not used! Only with multiple CMS Data Loaders, use this to choose which to show. Otherwise, go select the CMS Data Loader if you want to load different data.",
+      options: function options(_, ctx) {
+        return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      },
+      defaultValueHint: function defaultValueHint(_, ctx) {
+        return ctx == null ? void 0 : ctx.table;
+      }
+    }
+  }
+};
+function CmsCount(_ref10) {
+  var className = _ref10.className,
+    table = _ref10.table,
+    rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
+  var tables = useTablesWithDataLoaded("count");
+  var res = useCount(tables, table);
+  var unknown = React.createElement("div", Object.assign({
+    className: className
+  }, rest), "Count: ", table != null ? table : "Unknown Model");
+  if (!res) {
+    return unknown;
+  }
+  if (res.count == null) {
+    return null;
+  } else {
+    return React.createElement("div", Object.assign({
+      className: className
+    }, rest), new Intl.NumberFormat().format(res.count));
+  }
+}
 var DEFAULT_TYPE_FILTERS = ["text"];
 function deriveInferredTableField(opts) {
   var _tables$find;
@@ -1246,9 +1433,9 @@ function renderValue(value, type, props) {
     case "long-text":
     case "date-time":
     case "ref":
-      return React__default.createElement("div", Object.assign({}, props), value);
+      return React.createElement("div", Object.assign({}, props), value);
     case "rich-text":
-      return React__default.createElement("div", Object.assign({
+      return React.createElement("div", Object.assign({
         dangerouslySetInnerHTML: {
           __html: value
         },
@@ -1258,7 +1445,7 @@ function renderValue(value, type, props) {
       }, props));
     case "image":
       if (value && typeof value === "object" && value.url && value.imageMeta) {
-        return React__default.createElement("img", Object.assign({
+        return React.createElement("img", Object.assign({
           src: value.url,
           width: value.imageMeta.width,
           height: value.imageMeta.height
@@ -1267,7 +1454,7 @@ function renderValue(value, type, props) {
       return null;
     case "file":
       if (value && typeof value === "object" && value.url && value.name) {
-        return React__default.createElement("a", Object.assign({
+        return React.createElement("a", Object.assign({
           href: value.url,
           target: "_blank"
         }, props), value.name);
@@ -1295,8 +1482,8 @@ var cmsRowLinkMeta = {
       type: "choice",
       displayName: "Model",
       hidden: function hidden(props, ctx) {
-        var _ctx$tables$length2, _ctx$tables2;
-        return ((_ctx$tables$length2 = ctx == null || (_ctx$tables2 = ctx.tables) == null ? void 0 : _ctx$tables2.length) != null ? _ctx$tables$length2 : 0) <= 1 && !props.table;
+        var _ctx$tables$length3, _ctx$tables3;
+        return ((_ctx$tables$length3 = ctx == null || (_ctx$tables3 = ctx.tables) == null ? void 0 : _ctx$tables3.length) != null ? _ctx$tables$length3 : 0) <= 1 && !props.table;
       },
       helpText: "Pick model from a CMS Data Fetcher",
       description: "Usually not used! Only with multiple CMS Data Loaders, use this to choose which to show. Otherwise, go select the CMS Data Loader if you want to load different data.",
@@ -1311,9 +1498,9 @@ var cmsRowLinkMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref10, ctx) {
+      options: function options(_ref11, ctx) {
         var _ctx$table3;
-        var table = _ref10.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);
       },
       defaultValueHint: function defaultValueHint(_, ctx) {
@@ -1347,19 +1534,19 @@ var cmsRowLinkMeta = {
     }
   }
 };
-function CmsRowLink(_ref11) {
+function CmsRowLink(_ref12) {
   var _res$row$data2;
-  var table = _ref11.table,
-    field = _ref11.field,
-    hrefProp = _ref11.hrefProp,
-    children = _ref11.children,
-    setControlContextData = _ref11.setControlContextData,
-    prefix = _ref11.prefix,
-    suffix = _ref11.suffix;
-  var tables = useTablesWithDataLoaded();
+  var table = _ref12.table,
+    field = _ref12.field,
+    hrefProp = _ref12.hrefProp,
+    children = _ref12.children,
+    setControlContextData = _ref12.setControlContextData,
+    prefix = _ref12.prefix,
+    suffix = _ref12.suffix;
+  var tables = useTablesWithDataLoaded("rows");
   var res = useRow(tables, table);
   if (!res || !res.row) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   var fieldMeta = deriveInferredTableField({
     table: res.table,
@@ -1377,20 +1564,20 @@ function CmsRowLink(_ref11) {
     });
   }
   if (!fieldMeta) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   if (!children) {
     return null;
   }
   var value = ((_res$row$data2 = res.row.data) == null ? void 0 : _res$row$data2[fieldMeta.identifier]) || "";
-  var childrenWithProps = React__default.Children.map(children, function (child) {
-    if (React__default.isValidElement(child)) {
+  var childrenWithProps = React.Children.map(children, function (child) {
+    if (React.isValidElement(child)) {
       var _React$cloneElement;
-      return React__default.cloneElement(child, (_React$cloneElement = {}, _React$cloneElement[hrefProp] = fieldMeta.type === "file" ? value.url : prefix || suffix ? "" + (prefix || "") + value + (suffix || "") : value, _React$cloneElement));
+      return React.cloneElement(child, (_React$cloneElement = {}, _React$cloneElement[hrefProp] = fieldMeta.type === "file" ? value.url : prefix || suffix ? "" + (prefix || "") + value + (suffix || "") : value, _React$cloneElement));
     }
     return child;
   });
-  return React__default.createElement(React__default.Fragment, null, childrenWithProps != null ? childrenWithProps : null);
+  return React.createElement(React.Fragment, null, childrenWithProps != null ? childrenWithProps : null);
 }
 var cmsRowImageMeta = {
   name: componentPrefix + "-row-image",
@@ -1409,8 +1596,8 @@ var cmsRowImageMeta = {
       type: "choice",
       displayName: "Model",
       hidden: function hidden(props, ctx) {
-        var _ctx$tables$length3, _ctx$tables3;
-        return ((_ctx$tables$length3 = ctx == null || (_ctx$tables3 = ctx.tables) == null ? void 0 : _ctx$tables3.length) != null ? _ctx$tables$length3 : 0) <= 1 && !props.table;
+        var _ctx$tables$length4, _ctx$tables4;
+        return ((_ctx$tables$length4 = ctx == null || (_ctx$tables4 = ctx.tables) == null ? void 0 : _ctx$tables4.length) != null ? _ctx$tables$length4 : 0) <= 1 && !props.table;
       },
       helpText: "Pick model from a CMS Data Fetcher",
       description: "Usually not used! Only with multiple CMS Data Loaders, use this to choose which to show. Otherwise, go select the CMS Data Loader if you want to load different data.",
@@ -1425,9 +1612,9 @@ var cmsRowImageMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref12, ctx) {
+      options: function options(_ref13, ctx) {
         var _ctx$table4;
-        var table = _ref12.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, ["image"]);
       },
       defaultValueHint: function defaultValueHint(_, ctx) {
@@ -1443,17 +1630,17 @@ var cmsRowImageMeta = {
     }
   }
 };
-function CmsRowImage(_ref13) {
+function CmsRowImage(_ref14) {
   var _res$row$data3;
-  var table = _ref13.table,
-    field = _ref13.field,
-    srcProp = _ref13.srcProp,
-    children = _ref13.children,
-    setControlContextData = _ref13.setControlContextData;
-  var tables = useTablesWithDataLoaded();
+  var table = _ref14.table,
+    field = _ref14.field,
+    srcProp = _ref14.srcProp,
+    children = _ref14.children,
+    setControlContextData = _ref14.setControlContextData;
+  var tables = useTablesWithDataLoaded("rows");
   var res = useRow(tables, table);
   if (!res || !res.row) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   var fieldMeta = deriveInferredTableField({
     table: res.table,
@@ -1471,25 +1658,25 @@ function CmsRowImage(_ref13) {
     });
   }
   if (!fieldMeta) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   var value = ((_res$row$data3 = res.row.data) == null ? void 0 : _res$row$data3[fieldMeta.identifier]) || "";
-  var childrenWithProps = React__default.Children.map(children, function (child) {
-    if (React__default.isValidElement(child) && value) {
+  var childrenWithProps = React.Children.map(children, function (child) {
+    if (React.isValidElement(child) && value) {
       var _React$cloneElement3;
       if (typeof value === "object" && value.url && value.imageMeta) {
         var _React$cloneElement2;
-        return React__default.cloneElement(child, (_React$cloneElement2 = {}, _React$cloneElement2[srcProp] = {
+        return React.cloneElement(child, (_React$cloneElement2 = {}, _React$cloneElement2[srcProp] = {
           src: value.url,
           fullHeight: value.imageMeta.height,
           fullWidth: value.imageMeta.width
         }, _React$cloneElement2));
       }
-      return React__default.cloneElement(child, (_React$cloneElement3 = {}, _React$cloneElement3[srcProp] = value, _React$cloneElement3));
+      return React.cloneElement(child, (_React$cloneElement3 = {}, _React$cloneElement3[srcProp] = value, _React$cloneElement3));
     }
     return child;
   });
-  return React__default.createElement(React__default.Fragment, null, childrenWithProps);
+  return React.createElement(React.Fragment, null, childrenWithProps);
 }
 var cmsRowFieldValueMeta = {
   name: componentPrefix + "-row-value",
@@ -1504,8 +1691,8 @@ var cmsRowFieldValueMeta = {
       type: "choice",
       displayName: "Model",
       hidden: function hidden(props, ctx) {
-        var _ctx$tables$length4, _ctx$tables4;
-        return ((_ctx$tables$length4 = ctx == null || (_ctx$tables4 = ctx.tables) == null ? void 0 : _ctx$tables4.length) != null ? _ctx$tables$length4 : 0) <= 1 && !props.table;
+        var _ctx$tables$length5, _ctx$tables5;
+        return ((_ctx$tables$length5 = ctx == null || (_ctx$tables5 = ctx.tables) == null ? void 0 : _ctx$tables5.length) != null ? _ctx$tables$length5 : 0) <= 1 && !props.table;
       },
       helpText: "Pick model from a CMS Data Fetcher",
       description: "Usually not used! Only with multiple CMS Data Loaders, use this to choose which to show. Otherwise, go select the CMS Data Loader if you want to load different data.",
@@ -1520,9 +1707,9 @@ var cmsRowFieldValueMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref14, ctx) {
+      options: function options(_ref15, ctx) {
         var _ctx$table5;
-        var table = _ref14.table;
+        var table = _ref15.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table5 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table5 : table);
       },
       defaultValueHint: function defaultValueHint(_, ctx) {
@@ -1538,18 +1725,18 @@ var cmsRowFieldValueMeta = {
     }
   }
 };
-function CmsRowFieldValue(_ref15) {
+function CmsRowFieldValue(_ref16) {
   var _res$row$data4;
-  var table = _ref15.table,
-    field = _ref15.field,
-    valueProp = _ref15.valueProp,
-    children = _ref15.children,
-    setControlContextData = _ref15.setControlContextData,
-    rest = _objectWithoutPropertiesLoose(_ref15, _excluded2);
-  var tables = useTablesWithDataLoaded();
+  var table = _ref16.table,
+    field = _ref16.field,
+    valueProp = _ref16.valueProp,
+    children = _ref16.children,
+    setControlContextData = _ref16.setControlContextData,
+    rest = _objectWithoutPropertiesLoose(_ref16, _excluded3);
+  var tables = useTablesWithDataLoaded("rows");
   var res = useRow(tables, table);
   if (!res || !res.row) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   var fieldMeta = deriveInferredTableField({
     table: res.table,
@@ -1567,17 +1754,17 @@ function CmsRowFieldValue(_ref15) {
     });
   }
   if (!fieldMeta) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
   }
   var value = ((_res$row$data4 = res.row.data) == null ? void 0 : _res$row$data4[fieldMeta.identifier]) || "";
-  var childrenWithProps = React__default.Children.map(children, function (child) {
-    if (React__default.isValidElement(child)) {
+  var childrenWithProps = React.Children.map(children, function (child) {
+    if (React.isValidElement(child)) {
       var _extends2;
-      return React__default.cloneElement(child, _extends({}, rest, (_extends2 = {}, _extends2[valueProp] = value, _extends2)));
+      return React.cloneElement(child, _extends({}, rest, (_extends2 = {}, _extends2[valueProp] = value, _extends2)));
     }
     return child;
   });
-  return React__default.createElement(React__default.Fragment, null, childrenWithProps);
+  return React.createElement(React.Fragment, null, childrenWithProps);
 }
 
 function registerAll(loader) {
@@ -1603,9 +1790,11 @@ function registerAll(loader) {
   _registerComponent(CmsRowLink, cmsRowLinkMeta);
   _registerComponent(CmsRowImage, cmsRowImageMeta);
   _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta);
+  _registerComponent(CmsCount, cmsCountFieldMeta);
 }
 
 exports.API = API;
+exports.CmsCount = CmsCount;
 exports.CmsCredentialsProvider = CmsCredentialsProvider;
 exports.CmsQueryRepeater = CmsQueryRepeater;
 exports.CmsRowField = CmsRowField;
@@ -1613,6 +1802,7 @@ exports.CmsRowFieldValue = CmsRowFieldValue;
 exports.CmsRowImage = CmsRowImage;
 exports.CmsRowLink = CmsRowLink;
 exports.HttpError = HttpError;
+exports.cmsCountFieldMeta = cmsCountFieldMeta;
 exports.cmsCredentialsProviderMeta = cmsCredentialsProviderMeta;
 exports.cmsQueryRepeaterMeta = cmsQueryRepeaterMeta;
 exports.cmsRowFieldMeta = cmsRowFieldMeta;