@plasmicpkgs/plasmic-rich-components 1.0.118 → 1.0.119

package/dist/index.js

@@ -3,10 +3,12 @@
 var registerComponent = require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 var React = require('react');
+var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+var luxon = require('luxon');
 var antd = require('antd');
 require('lodash/get');
 var dataSources = require('@plasmicapp/data-sources');
-var luxon = require('luxon');
 var tinycolor = require('@ctrl/tinycolor');
 var icons = require('@ant-design/icons');
 var proComponents = require('@ant-design/pro-components');
@@ -15,11 +17,14 @@ var csvWriterBrowser = require('csv-writer-browser');
 var fastStringify = require('fast-stringify');
 var classNames = require('classnames');
 var groupBy = require('lodash/groupBy');
+var lodash = require('lodash');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
 var React__default = /*#__PURE__*/_interopDefault(React);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var customParseFormat__default = /*#__PURE__*/_interopDefault(customParseFormat);
 var fastStringify__default = /*#__PURE__*/_interopDefault(fastStringify);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
@@ -45,9 +50,65 @@ function maybe(x, f) {
     return void 0;
   return f(x);
 }
+function isValidIsoDate(str, extendedOnly = false) {
+  if (!str)
+    return false;
+  if (typeof str !== "string")
+    return false;
+  if (str.includes(" "))
+    return false;
+  if (str.length === 10) {
+    if (extendedOnly)
+      return false;
+    dayjs__default.default.extend(customParseFormat__default.default);
+    return dayjs__default.default(str, "YYYY-MM-DD", true).isValid();
+  }
+  if (!dayjs__default.default(str).isValid())
+    return false;
+  if (isNaN(new Date(str).getTime()))
+    return false;
+  return true;
+}
+function parseDate(value) {
+  const dateTimeParsers = [
+    luxon.DateTime.fromISO,
+    luxon.DateTime.fromRFC2822,
+    luxon.DateTime.fromHTTP,
+    luxon.DateTime.fromSQL
+  ];
+  if (!value)
+    return void 0;
+  if (typeof value !== "string")
+    return void 0;
+  for (const parser of dateTimeParsers) {
+    const parsed = parser(value);
+    if (parsed.isValid) {
+      return parsed;
+    }
+  }
+  return void 0;
+}
+function isLikeDate(value) {
+  const parsed = parseDate(value);
+  return parsed ? true : false;
+}
 function isLikeImage(value) {
   return typeof value === "string" ? value.match(/\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$/i) : false;
 }
+function isLikeColor(value) {
+  if (typeof value !== "string")
+    return false;
+  const hex = /^#?([0-9a-fA-F]{3}([0-9a-fA-F]{3})?|[0-9a-fA-F]{4}([0-9a-fA-F]{4})?)$/;
+  const rgba = /^rgba?\((\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*(1|0?(\.\d+)?))?\s*)\)$/;
+  const cssNamed = /^(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)$/;
+  const hsla = /^hsla?\((\s*\d+(\.\d+)?\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%\s*(,\s*(1|0?\.\d+))?\s*)\)$/;
+  const cmyk = /^cmyka?\((\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%\s*(,\s*(1|0?\.\d+))?\s*)\)$/;
+  const hsv = /^hsva?\((\s*\d+(\.\d+)?\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%\s*(,\s*(1|0?\.\d+))?\s*)\)$/;
+  if (value.match(hex) || value.match(rgba) || value.match(cssNamed) || value.match(hsla) || value.match(cmyk) || value.match(hsv)) {
+    return true;
+  }
+  return false;
+}
 function isInteractable(target) {
   if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
     return true;
@@ -95,33 +156,33 @@ class ErrorBoundary extends React__default.default.Component {
   }
 }
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$2 = (source, exclude) => {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -157,7 +218,7 @@ function deriveValueType(cconfig) {
 const NoneField = "||NoneField||";
 const CustomField = "";
 function getFieldSubprops(opts) {
-  return __spreadValues$9(__spreadValues$9({
+  return __spreadValues$b(__spreadValues$b({
     key: {
       type: "string",
       hidden: () => true
@@ -193,7 +254,7 @@ function getFieldSubprops(opts) {
       defaultValueHint: getDefaultValueHint("title"),
       hidden: () => !!opts.noTitle
     },
-    expr: __spreadProps$7(__spreadValues$9({}, rowDataType("Custom value")), {
+    expr: __spreadProps$8(__spreadValues$b({}, rowDataType("Custom value")), {
       hidden: (ps, ctx, { item, path: _controlPath }) => {
         return false;
       }
@@ -471,7 +532,7 @@ function buildFieldsPropType(_a) {
     advanced,
     displayName,
     minimalValue = (_props, contextData) => contextData == null ? void 0 : contextData.minimalFullLengthFields
-  } = _b, opts = __objRest$2(_b, [
+  } = _b, opts = __objRest$3(_b, [
     "advanced",
     "displayName",
     "minimalValue"
@@ -505,25 +566,25 @@ function buildFieldsPropType(_a) {
   };
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function multiRenderValue(record, cconfigs) {
   return cconfigs == null ? void 0 : cconfigs.flatMap(
     (cc) => cc.isHidden ? [] : [` \u2022 `, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, renderValue(record, cc))]
@@ -539,6 +600,11 @@ function getFieldValue(record, cconfig) {
   }
   return value;
 }
+function getFieldAggregateValue(record, cconfigs, separator = ", ") {
+  if (!(cconfigs == null ? void 0 : cconfigs.length))
+    return void 0;
+  return (cconfigs == null ? void 0 : cconfigs.length) ? cconfigs.map((item) => getFieldValue(record, item)).join(separator) : void 0;
+}
 function renderValue(record, cconfig) {
   const value = getFieldValue(record, cconfig);
   if (value == null) {
@@ -592,11 +658,11 @@ function renderNumber(value, cconfig) {
   if (cconfig.dataType === "number") {
     return new Intl.NumberFormat(cconfig.locale, cconfig).format(value);
   } else if (cconfig.dataType === "percent") {
-    return new Intl.NumberFormat(cconfig.locale, __spreadProps$6(__spreadValues$8({}, cconfig), {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$7(__spreadValues$a({}, cconfig), {
       style: "percent"
     })).format(value);
   } else if (cconfig.dataType === "currency") {
-    return new Intl.NumberFormat(cconfig.locale, __spreadProps$6(__spreadValues$8(__spreadValues$8({}, DEFAULT_CURRENCY_SETTINGS), cconfig), {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$7(__spreadValues$a(__spreadValues$a({}, DEFAULT_CURRENCY_SETTINGS), cconfig), {
       style: "currency"
     })).format(value);
   } else {
@@ -604,7 +670,7 @@ function renderNumber(value, cconfig) {
   }
 }
 function renderDate(value, cconfig) {
-  const opts = __spreadValues$8(__spreadValues$8({}, DEFAULT_DATETIME_SETTINGS), cconfig);
+  const opts = __spreadValues$a(__spreadValues$a({}, DEFAULT_DATETIME_SETTINGS), cconfig);
   if (opts.dateStyle === "none") {
     delete opts["dateStyle"];
   }
@@ -628,7 +694,7 @@ const UNIT_TO_MS = {
 const UNITS_BY_MS = Object.keys(UNIT_TO_MS);
 function renderRelativeDate(value, cconfig) {
   var _a;
-  const opts = __spreadValues$8(__spreadValues$8({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
+  const opts = __spreadValues$a(__spreadValues$a({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
   const unit = (_a = cconfig.unit) != null ? _a : "day";
   const formatter = new Intl.RelativeTimeFormat(cconfig.locale, opts);
   if (isOneOf(unit, UNITS_BY_MS)) {
@@ -658,12 +724,6 @@ function renderBoolean(value, cconfig) {
     return value ? "true" : "false";
   }
 }
-const dateTimeParsers = [
-  luxon.DateTime.fromISO,
-  luxon.DateTime.fromRFC2822,
-  luxon.DateTime.fromHTTP,
-  luxon.DateTime.fromSQL
-];
 const CANNOT_COERCE = Symbol("plasmic-cannot-coerce");
 function coerceValue(value, dataType) {
   if (value == null) {
@@ -685,11 +745,9 @@ function coerceValue(value, dataType) {
       } else if (typeof value === "number") {
         return new Date(value);
       } else if (typeof value === "string") {
-        for (const parser of dateTimeParsers) {
-          const parsed = parser(value);
-          if (parsed.isValid) {
-            return parsed.toJSDate();
-          }
+        const parsed = parseDate(value);
+        if (parsed) {
+          return parsed.toJSDate();
         }
       }
     } else if (dataType === "boolean") {
@@ -725,25 +783,25 @@ function asString(value) {
   }
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 function RichDetails(props) {
   var _a;
   const {
@@ -786,7 +844,7 @@ function useColumnDefinitions$1(data, props) {
     const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(
       fields != null ? fields : [],
       schema,
-      (field) => __spreadValues$7({
+      (field) => __spreadValues$9({
         key: mkShortId(),
         isHidden: false,
         dataType: "auto"
@@ -797,7 +855,7 @@ function useColumnDefinitions$1(data, props) {
         expr: (currentItem) => currentItem[field.id]
       })
     );
-    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$5(__spreadValues$7({}, data), { mergedFields, minimalFullLengthFields }));
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$6(__spreadValues$9({}, data), { mergedFields, minimalFullLengthFields }));
     const normalized = mergedFields;
     const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
       const columnDefinition = {
@@ -890,56 +948,56 @@ function isLight(color) {
   return r * 0.299 + g * 0.587 + b * 0.114 > 186;
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const AnchorLink = React__default.default.forwardRef(function AnchorLink2(props, ref) {
-  return /* @__PURE__ */ React__default.default.createElement("a", __spreadProps$4(__spreadValues$6({}, props), { ref }));
+  return /* @__PURE__ */ React__default.default.createElement("a", __spreadProps$5(__spreadValues$8({}, props), { ref }));
 });
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$1 = (source, exclude) => {
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -950,7 +1008,7 @@ function omitUndefined(x) {
   );
 }
 function processNavItems(navMenuItems) {
-  return navMenuItems.filter((item) => item.condition === void 0 || item.condition).map((item) => __spreadProps$3(__spreadValues$5({}, item), {
+  return navMenuItems.filter((item) => item.condition === void 0 || item.condition).map((item) => __spreadProps$4(__spreadValues$7({}, item), {
     // We fill a default path because otherwise the item doesn't appear at all.
     path: item.path || "/",
     routes: item.routes ? processNavItems(item.routes) : void 0
@@ -982,7 +1040,7 @@ function RichLayout(_a) {
     simpleNavTheme,
     logo,
     logoElement
-  } = _b, layoutProps = __objRest$1(_b, [
+  } = _b, layoutProps = __objRest$2(_b, [
     "children",
     "navMenuItems",
     "rootUrl",
@@ -1051,7 +1109,7 @@ function RichLayout(_a) {
   };
   return /* @__PURE__ */ React__default.default.createElement("div", { className, style: { display: "flex" } }, /* @__PURE__ */ React__default.default.createElement("style", null, baseStyles), /* @__PURE__ */ React__default.default.createElement(
     proComponents.ProLayout,
-    __spreadProps$3(__spreadValues$5({}, layoutProps), {
+    __spreadProps$4(__spreadValues$7({}, layoutProps), {
       pageTitleRender: () => "",
       logo: logo != null ? logo : logoElement,
       headerRender: (_props, defaultDom) => /* @__PURE__ */ React__default.default.createElement(
@@ -1062,7 +1120,7 @@ function RichLayout(_a) {
         /* @__PURE__ */ React__default.default.createElement(proComponents.ProConfigProvider, { dark: !isNavBgLight }, defaultDom)
       ),
       token: {
-        header: omitUndefined(__spreadValues$5({
+        header: omitUndefined(__spreadValues$7({
           colorBgHeader: navBgColor
         }, layoutColorOverrides)),
         // Ideally, we'd do something similar to headerRender above, and just specify general dark mode to specify
@@ -1132,19 +1190,19 @@ function RichLayout(_a) {
   ));
 }
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
@@ -1157,7 +1215,7 @@ function generateNavMenuType(isNested, remainingDepth, displayName, defaultValue
     itemType: {
       type: "object",
       nameFunc: (item) => item.name || (!displayName ? "Unnamed nested item" : "Unnamed item"),
-      fields: __spreadValues$4({
+      fields: __spreadValues$6({
         path: "href",
         name: "string",
         condition: {
@@ -1436,25 +1494,25 @@ function renderActions(rowActions, row, data, rowKey) {
   });
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function RichTable(props) {
   const {
     className,
@@ -1499,7 +1557,7 @@ function RichTable(props) {
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: `${className} ${scopeClassName != null ? scopeClassName : ""}` }, /* @__PURE__ */ React__default.default.createElement(ErrorBoundary, { canvasEnvId: props["data-plasmic-canvas-envs"] }, /* @__PURE__ */ React__default.default.createElement(
     proComponents.ProTable,
-    __spreadProps$2(__spreadValues$3({
+    __spreadProps$3(__spreadValues$5({
       ErrorBoundary: false,
       rowClassName: props.onRowClick || props.canSelectRows === "click" ? "plasmic-table-row-clickable" : void 0,
       actionRef,
@@ -1623,7 +1681,7 @@ function RichTable(props) {
     }
   ));
 }
-const defaultColumnConfig$1 = () => ({
+const defaultColumnConfig$2 = () => ({
   key: mkShortId(),
   isEditableExpr: () => false,
   disableSorting: false,
@@ -1643,13 +1701,13 @@ function useColumnDefinitions(data, props) {
     if (!data || !schema) {
       return { normalized: [], columnDefinitions: [] };
     }
-    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(fields != null ? fields : [], schema, (field) => __spreadValues$3(__spreadValues$3({}, defaultColumnConfig$1()), field && {
+    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(fields != null ? fields : [], schema, (field) => __spreadValues$5(__spreadValues$5({}, defaultColumnConfig$2()), field && {
       key: field.id,
       fieldId: field.id,
       title: field.label || field.id,
       expr: (currentItem) => currentItem[field.id]
     }));
-    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$2(__spreadValues$3({}, data), { mergedFields, minimalFullLengthFields }));
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$3(__spreadValues$5({}, data), { mergedFields, minimalFullLengthFields }));
     const normalized = mergedFields;
     const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
       const columnDefinition = {
@@ -1717,7 +1775,7 @@ function useRowSelectionProps(data, props) {
       return [];
     }
   };
-  const rowSelection = canSelectRows && canSelectRows !== "none" ? __spreadValues$3({
+  const rowSelection = canSelectRows && canSelectRows !== "none" ? __spreadValues$5({
     type: canSelectRows === "single" || canSelectRows === "click" ? "radio" : "checkbox",
     selectedRowKeys: deriveSelectedRowKeys(),
     onChange: (rowKeys, rows) => {
@@ -1807,6 +1865,44 @@ function ExportMenu(props) {
   );
 }
 
+function roleProp({
+  role,
+  singular = false,
+  advanced = false,
+  displayName
+}) {
+  return singular ? {
+    type: "object",
+    displayName: displayName || `${capitalize(role)} field`,
+    advanced,
+    hidden: (ps) => !ps.data,
+    nameFunc: (item) => maybe(
+      item,
+      (i) => i.isHidden ? "Hidden" : i.fieldId || "Custom value"
+    ),
+    fields: getFieldSubprops({
+      canChangeField: true,
+      noTitle: true
+    }),
+    defaultValueHint: (_props, contextData) => {
+      var _a;
+      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).find(
+        (f) => f.role === role
+      );
+    }
+  } : buildFieldsPropType({
+    displayName: displayName || `${capitalize(role)} fields`,
+    advanced,
+    noTitle: true,
+    canChangeField: true,
+    minimalValue: (_props, contextData) => {
+      var _a;
+      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).filter(
+        (f) => f.role === role
+      );
+    }
+  });
+}
 function dataProp() {
   return {
     type: "dataSourceOpData",
@@ -1896,25 +1992,25 @@ function onRowClickProp() {
   };
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const tableHelpers = {
   states: {
     selectedRow: {
@@ -1947,7 +2043,7 @@ const dataTableMeta = {
     padding: "16px",
     maxHeight: "100%"
   },
-  props: __spreadProps$1(__spreadValues$2({
+  props: __spreadProps$2(__spreadValues$4({
     data: dataProp(),
     fields: buildFieldsPropType({}),
     canSelectRows: {
@@ -2048,24 +2144,24 @@ const dataTableMeta = {
     }
   }),
   states: {
-    selectedRowKey: __spreadValues$2({
+    selectedRowKey: __spreadValues$4({
       type: "writable",
       valueProp: "selectedRowKey",
       onChangeProp: "onRowSelectionChanged",
       variableType: "text"
     }, tableHelpers.states.selectedRowKey),
-    selectedRowKeys: __spreadValues$2({
+    selectedRowKeys: __spreadValues$4({
       type: "writable",
       valueProp: "selectedRowKeys",
       onChangeProp: "onRowSelectionChanged",
       variableType: "array"
     }, tableHelpers.states.selectedRowKeys),
-    selectedRow: __spreadValues$2({
+    selectedRow: __spreadValues$4({
       type: "readonly",
       onChangeProp: "onRowSelectionChanged",
       variableType: "object"
     }, tableHelpers.states.selectedRow),
-    selectedRows: __spreadValues$2({
+    selectedRows: __spreadValues$4({
       type: "readonly",
       onChangeProp: "onRowSelectionChanged",
       variableType: "array"
@@ -2083,33 +2179,33 @@ function registerRichTable(loader) {
   registerComponentHelper(loader, RichTable, dataTableMeta);
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2187,7 +2283,7 @@ function RichList(props) {
     rowKey,
     pagination = true,
     onRowClick
-  } = _a; __objRest(_a, [
+  } = _a; __objRest$1(_a, [
     "data",
     "type",
     "bordered",
@@ -2204,7 +2300,7 @@ function RichList(props) {
     "onRowClick"
   ]);
   const data = dataSources.normalizeData(rawData);
-  const { normalized, finalRoles: roleConfigs } = useRoleDefinitions(
+  const { normalized, finalRoles: roleConfigs } = useRoleDefinitions$1(
     data,
     props
   );
@@ -2334,7 +2430,7 @@ function ListItemContent(_a) {
     afterTitle,
     content,
     bordered
-  } = _b, others = __objRest(_b, [
+  } = _b, others = __objRest$1(_b, [
     "className",
     "title",
     "subtitle",
@@ -2348,7 +2444,7 @@ function ListItemContent(_a) {
   const classString = classNames__default.default(`${prefixCls}-item-meta`, className);
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
-    __spreadProps(__spreadValues$1({}, others), {
+    __spreadProps$1(__spreadValues$3({}, others), {
       className: classNames__default.default(
         {
           "plasmic-list-item-content--unbordered": !bordered
@@ -2377,7 +2473,7 @@ function ListItemContent(_a) {
     )
   );
 }
-const defaultColumnConfig = () => ({
+const defaultColumnConfig$1 = () => ({
   key: mkShortId(),
   isEditableExpr: () => false,
   disableSorting: false,
@@ -2391,7 +2487,7 @@ const defaultColumnConfig = () => ({
   dataType: "auto",
   role: void 0
 });
-const roles = [
+const roles$1 = [
   "content",
   "title",
   "subtitle",
@@ -2400,7 +2496,7 @@ const roles = [
   "image",
   "unset"
 ];
-function useRoleDefinitions(data, props) {
+function useRoleDefinitions$1(data, props) {
   const { fields, setControlContextData, rowActions } = props;
   return React__default.default.useMemo(() => {
     var _a, _b, _c, _d;
@@ -2413,7 +2509,7 @@ function useRoleDefinitions(data, props) {
       var _a2;
       if (role !== "unset") {
         return ensureArray((_a2 = props[role]) != null ? _a2 : []).map((field) => {
-          return __spreadProps(__spreadValues$1({}, field), {
+          return __spreadProps$1(__spreadValues$3({}, field), {
             role
           });
         });
@@ -2433,7 +2529,7 @@ function useRoleDefinitions(data, props) {
       return dataSources.deriveFieldConfigs(
         mode === "defaults" ? [] : specifiedFieldsPartial,
         schema,
-        (field) => __spreadValues$1(__spreadValues$1({}, defaultColumnConfig()), field && {
+        (field) => __spreadValues$3(__spreadValues$3({}, defaultColumnConfig$1()), field && {
           key: field.id,
           fieldId: field.id,
           title: field.label || field.id,
@@ -2524,12 +2620,12 @@ function useRoleDefinitions(data, props) {
       groupBy__default.default(mergedFieldsWithDefaults, (f) => f.role)
     );
     const finalRoles = {};
-    for (const role of roles) {
+    for (const role of roles$1) {
       if (role !== "unset") {
         finalRoles[role] = (_d = maybe(props[role], ensureArray)) != null ? _d : roleConfigs[role];
       }
     }
-    setControlContextData == null ? void 0 : setControlContextData(__spreadProps(__spreadValues$1({}, data), {
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$1(__spreadValues$3({}, data), {
       mergedFields: mergedFieldsWithDefaults,
       minimalFullLengthFields: minimalFullLengthFieldsWithDefaults
     }));
@@ -2538,60 +2634,22 @@ function useRoleDefinitions(data, props) {
   }, [fields, data, setControlContextData, rowActions]);
 }
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-function roleProp({
-  role,
-  singular = false,
-  advanced = false,
-  displayName
-}) {
-  return singular ? {
-    type: "object",
-    displayName,
-    advanced,
-    hidden: (ps) => !ps.data,
-    nameFunc: (item) => maybe(
-      item,
-      (i) => i.isHidden ? "Hidden" : i.fieldId || "Custom value"
-    ),
-    fields: getFieldSubprops({
-      canChangeField: true,
-      noTitle: true
-    }),
-    defaultValueHint: (_props, contextData) => {
-      var _a;
-      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).find(
-        (f) => f.role === role
-      );
-    }
-  } : buildFieldsPropType({
-    displayName,
-    advanced,
-    noTitle: true,
-    canChangeField: true,
-    minimalValue: (_props, contextData) => {
-      var _a;
-      return ((_a = contextData == null ? void 0 : contextData.minimalFullLengthFields) != null ? _a : []).filter(
-        (f) => f.role === role
-      );
-    }
-  });
-}
 const richListMeta = {
   name: "hostless-rich-list",
   displayName: "Data List",
@@ -2601,7 +2659,7 @@ const richListMeta = {
     maxHeight: "100%"
   },
   defaultDisplay: "block",
-  props: __spreadValues({
+  props: __spreadValues$2({
     data: dataProp(),
     type: {
       type: "choice",
@@ -2624,7 +2682,6 @@ const richListMeta = {
     image: roleProp({ role: "image", singular: true }),
     subtitle: roleProp({
       role: "subtitle",
-      displayName: "Subtitle",
       advanced: true
     }),
     // Haven't styled these yet!
@@ -2659,11 +2716,471 @@ function registerRichList(loader) {
   registerComponentHelper(loader, RichList, richListMeta);
 }
 
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function getEventFullDate(date) {
+  var _a;
+  return ((_a = parseDate(date)) == null ? void 0 : _a.toISODate()) || void 0;
+}
+function getEventMonthYear(date) {
+  var _a;
+  return (_a = getEventFullDate(date)) == null ? void 0 : _a.substring(0, 7);
+}
+function EventCell({ events }) {
+  if (!events || !events.length)
+    return null;
+  return /* @__PURE__ */ React__default.default.createElement("ul", { style: { all: "unset" } }, events.map((e) => /* @__PURE__ */ React__default.default.createElement("li", { key: JSON.stringify(e), style: { all: "unset", display: "block" } }, /* @__PURE__ */ React__default.default.createElement(antd.Badge, { color: e.color || "green", text: e.title }))));
+}
+function RichCalendar(props) {
+  const _a = props, {
+    data: rawData = {
+      data: [],
+      schema: {
+        id: "inferred",
+        fields: [
+          {
+            id: "id",
+            type: "string",
+            readOnly: false
+          }
+        ]
+      }
+    },
+    value: isoValue,
+    defaultValue: isoDefaultValue,
+    validRange: isoValidRange,
+    dateCellRender,
+    dateFullCellRender,
+    monthCellRender,
+    monthFullCellRender
+  } = _a, rest = __objRest(_a, [
+    "data",
+    "value",
+    "defaultValue",
+    "validRange",
+    "dateCellRender",
+    "dateFullCellRender",
+    "monthCellRender",
+    "monthFullCellRender"
+  ]);
+  const data = dataSources.normalizeData(rawData);
+  const { normalized, finalRoles: roleConfigs } = useRoleDefinitions(
+    data,
+    props
+  );
+  const {
+    eventsByDate,
+    eventsByMonth
+  } = React.useMemo(() => {
+    if (!data)
+      return { eventsByDate: {}, eventsByMonth: {} };
+    return data == null ? void 0 : data.data.reduce(
+      (acc, item) => {
+        const date = getFieldAggregateValue(item, roleConfigs.date);
+        const title = getFieldAggregateValue(item, roleConfigs.title);
+        const color = getFieldAggregateValue(item, roleConfigs.color);
+        const event = {
+          date,
+          title,
+          color
+        };
+        const keyDate = getEventFullDate(date);
+        const keyMonth = getEventMonthYear(date);
+        if (keyDate && keyMonth) {
+          acc.eventsByDate[keyDate] = [
+            ...acc.eventsByDate[keyDate] || [],
+            event
+          ];
+          acc.eventsByMonth[keyMonth] = [
+            ...acc.eventsByMonth[keyMonth] || [],
+            event
+          ];
+        }
+        return acc;
+      },
+      { eventsByDate: {}, eventsByMonth: {} }
+    );
+  }, [data, roleConfigs.color, roleConfigs.date, roleConfigs.title]);
+  const value = React.useMemo(
+    () => isValidIsoDate(isoValue) ? dayjs__default.default(isoValue) : dayjs__default.default(),
+    [isoValue]
+  );
+  const defaultValue = React.useMemo(
+    () => isValidIsoDate(isoDefaultValue) ? dayjs__default.default(isoDefaultValue) : dayjs__default.default(),
+    [isoDefaultValue]
+  );
+  const validRange = React.useMemo(() => {
+    if (!isoValidRange)
+      return void 0;
+    const range = isoValidRange.filter((dateIso) => isValidIsoDate(dateIso)).map((d) => dayjs__default.default(d));
+    if (range.length !== 2)
+      return void 0;
+    return [range[0], range[1]];
+  }, [isoValidRange]);
+  const key = React.useMemo(() => JSON.stringify(roleConfigs), [roleConfigs]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Calendar,
+    __spreadProps(__spreadValues$1({}, rest), {
+      key,
+      validRange,
+      defaultValue,
+      value,
+      dateCellRender: dateCellRender ? dateCellRender : (date) => /* @__PURE__ */ React__default.default.createElement(
+        EventCell,
+        {
+          events: eventsByDate[getEventFullDate(date.toISOString())]
+        }
+      ),
+      monthCellRender: monthCellRender ? monthCellRender : (date) => /* @__PURE__ */ React__default.default.createElement(
+        EventCell,
+        {
+          events: eventsByMonth[getEventMonthYear(date.toISOString())]
+        }
+      ),
+      dateFullCellRender,
+      monthFullCellRender
+    })
+  );
+}
+const defaultColumnConfig = () => ({
+  key: mkShortId(),
+  isEditableExpr: () => false,
+  disableSorting: false,
+  sortByExpr: void 0,
+  isHidden: false,
+  formatting: {
+    styles: {},
+    align: "left",
+    freeze: "off"
+  },
+  dataType: "auto",
+  role: void 0
+});
+const roles = ["date", "title", "color", "unset"];
+function useRoleDefinitions(data, props) {
+  const { fields, setControlContextData } = props;
+  return React__default.default.useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    const schema = data == null ? void 0 : data.schema;
+    if (!data || !schema) {
+      return { normalized: [], finalRoles: {} };
+    }
+    function tagFieldConfigs(role) {
+      var _a2;
+      if (role !== "unset") {
+        return ensureArray((_a2 = props[role]) != null ? _a2 : []).map((field) => {
+          return __spreadProps(__spreadValues$1({}, field), {
+            role
+          });
+        });
+      } else {
+        return [];
+      }
+    }
+    const specifiedFieldsPartial = [
+      ...tagFieldConfigs("date"),
+      ...tagFieldConfigs("color"),
+      ...tagFieldConfigs("title")
+    ];
+    function doDeriveFieldConfigs(mode) {
+      return dataSources.deriveFieldConfigs(
+        mode === "defaults" ? [] : specifiedFieldsPartial,
+        schema,
+        (field) => __spreadValues$1(__spreadValues$1({}, defaultColumnConfig()), field && {
+          key: field.id,
+          fieldId: field.id,
+          title: field.label || field.id,
+          // undefined means not yet determined in this routine, not 'unset'
+          role: void 0,
+          expr: (currentItem) => currentItem[field.id]
+        })
+      );
+    }
+    const {
+      mergedFields: defaultMergedFields,
+      minimalFullLengthFields: defaultMinimalFullLengthFields
+    } = doDeriveFieldConfigs("defaults");
+    if (data.data.length > 0 && !defaultMergedFields.some((field) => field.role === "date")) {
+      const sampleRows = Array.from(
+        new Set(
+          [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
+            (i) => Math.round(i / 9 * (data.data.length - 1))
+          )
+        )
+      ).map((i) => data.data[i]);
+      const dateFieldCandidates = defaultMergedFields.filter(
+        (field) => !field.role && sampleRows.filter(
+          (row) => field.fieldId && isLikeDate(row[field.fieldId])
+        ).length >= sampleRows.length / 2
+      );
+      const dateField = (_b = (_a = dateFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(/^(date|datetime|timestamp|eventdate)$/i);
+        }
+      )) != null ? _a : dateFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(/.*(date|time|event).*/i);
+        }
+      )) != null ? _b : dateFieldCandidates[0];
+      if (dateField) {
+        dateField.role = "date";
+      }
+    }
+    if (data.data.length > 0 && !defaultMergedFields.some((field) => field.role === "color")) {
+      const sampleRows = Array.from(
+        new Set(
+          [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
+            (i) => Math.round(i / 9 * (data.data.length - 1))
+          )
+        )
+      ).map((i) => data.data[i]);
+      const colorFieldCandidates = defaultMergedFields.filter(
+        (field) => !field.role && sampleRows.filter(
+          (row) => field.fieldId && isLikeColor(row[field.fieldId])
+        ).length >= sampleRows.length / 2
+      );
+      const colorField = (_d = (_c = colorFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(/^(color|hex|rgb|hsl|rgba|cmyk|hsv|hsb)$/i);
+        }
+      )) != null ? _c : colorFieldCandidates.find(
+        (f) => {
+          var _a2;
+          return (_a2 = f.fieldId) == null ? void 0 : _a2.match(/.*(color|hex|rgb|hsl|rgba|cmyk|hsv|hsb).*/i);
+        }
+      )) != null ? _d : colorFieldCandidates[0];
+      if (colorField) {
+        colorField.role = "color";
+      }
+    }
+    if (!defaultMergedFields.some((field) => field.role === "title")) {
+      const titleField = defaultMergedFields.find(
+        (field) => {
+          var _a2;
+          return !field.role && ((_a2 = field.fieldId) == null ? void 0 : _a2.toLowerCase().match(/^(title|name||event[ _-]?name)$/));
+        }
+      );
+      if (titleField) {
+        titleField.role = "title";
+      }
+    }
+    const fieldIdToDefaultRole = new Map(
+      defaultMergedFields.map((f) => [f.fieldId, f.role])
+    );
+    for (const f of defaultMinimalFullLengthFields) {
+      f.role = fieldIdToDefaultRole.get(f.fieldId);
+    }
+    const { mergedFields, minimalFullLengthFields } = doDeriveFieldConfigs("existing");
+    const minimalFullLengthFieldsWithDefaults = [
+      ...minimalFullLengthFields.filter((f) => f.role && f.role !== "unset"),
+      ...defaultMinimalFullLengthFields.filter(
+        (f) => f.role && f.role !== "unset" && !props[f.role]
+      )
+    ];
+    const mergedFieldsWithDefaults = [
+      ...mergedFields.filter((f) => f.role && f.role !== "unset"),
+      ...defaultMergedFields.filter(
+        (f) => f.role && f.role !== "unset" && !props[f.role]
+      )
+    ];
+    const roleConfigs = ensure(
+      lodash.groupBy(mergedFieldsWithDefaults, (f) => f.role)
+    );
+    const finalRoles = {};
+    for (const role of roles) {
+      if (role !== "unset") {
+        finalRoles[role] = (_e = maybe(props[role], ensureArray)) != null ? _e : roleConfigs[role];
+      }
+    }
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps(__spreadValues$1({}, data), {
+      mergedFields: mergedFieldsWithDefaults,
+      minimalFullLengthFields: minimalFullLengthFieldsWithDefaults
+    }));
+    const normalized = mergedFieldsWithDefaults;
+    return { normalized, finalRoles };
+  }, [data, setControlContextData, props]);
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const calendarHelpers = {
+  states: {
+    mode: {
+      onChangeArgsToValue: (_date, mode) => mode
+    },
+    selectedDate: {
+      onChangeArgsToValue: (date) => dayjs__default.default(date).toISOString()
+    }
+  }
+};
+const calendarComponentName = "hostless-rich-calendar";
+function registerRichCalendar(loader) {
+  registerComponentHelper(loader, RichCalendar, {
+    name: calendarComponentName,
+    displayName: "Calendar",
+    props: {
+      data: {
+        type: "dataSourceOpData",
+        description: "The data to display. Should be a list of records with some date field."
+      },
+      title: roleProp({ role: "title" }),
+      date: roleProp({ role: "date", singular: true }),
+      color: roleProp({ role: "color", singular: true }),
+      value: {
+        // Must have a corresponding state and eventhandler for any prop that I want to be able to change in interactive mode.
+        editOnly: true,
+        uncontrolledProp: "defaultValue",
+        type: "dateString",
+        description: `The date selected by default as an ISO string`,
+        validator: (value, ps) => {
+          if (!ps.validRange)
+            return true;
+          if (!isValidIsoDate(value))
+            return "Not a valid ISO string.";
+          if (dayjs__default.default(value).isBefore(ps.validRange[0]) || dayjs__default.default(value).isAfter(ps.validRange[1]))
+            return "Not within the valid range";
+          return true;
+        }
+      },
+      mode: {
+        type: "choice",
+        options: ["month", "year"],
+        description: "The default display mode of the calendar.",
+        defaultValueHint: "month"
+      },
+      validRange: {
+        type: "dateRangeStrings",
+        description: "Only allow selection of dates that lie within this range",
+        advanced: true,
+        validator: (value, ps) => {
+          if (!value)
+            return true;
+          if (!Array.isArray(value) || value.length !== 2)
+            return "Not an array with 2 items";
+          if (!isValidIsoDate(value[0]) || !isValidIsoDate(value[1]))
+            return "Min or max range is not in valid ISO date format.";
+          return true;
+        }
+      },
+      headerRender: {
+        type: "slot",
+        renderPropParams: ["headerProps"],
+        hidePlaceholder: true,
+        displayName: "Custom Header"
+      },
+      dateCellRender: {
+        type: "slot",
+        renderPropParams: ["dateProps"],
+        hidePlaceholder: true,
+        displayName: "Append Date Cell"
+      },
+      dateFullCellRender: {
+        type: "slot",
+        renderPropParams: ["dateProps"],
+        hidePlaceholder: true,
+        displayName: "Custom Date Cell"
+      },
+      monthCellRender: {
+        type: "slot",
+        renderPropParams: ["dateProps"],
+        hidePlaceholder: true,
+        displayName: "Append Month Cell"
+      },
+      monthFullCellRender: {
+        type: "slot",
+        renderPropParams: ["dateProps"],
+        hidePlaceholder: true,
+        displayName: "Custom Month Cell"
+      },
+      onPanelChange: {
+        type: "eventHandler",
+        description: "Triggers when the calendar mode changes (e.g. from month to year mode)",
+        argTypes: [
+          { name: "date", type: "object" },
+          { name: "mode", type: "string" }
+        ]
+      },
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "date", type: "object" }]
+      }
+    },
+    states: {
+      mode: __spreadValues({
+        type: "writable",
+        valueProp: "mode",
+        onChangeProp: "onPanelChange",
+        variableType: "text"
+      }, calendarHelpers.states.mode),
+      selectedDate: __spreadValues({
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }, calendarHelpers.states.selectedDate)
+    },
+    componentHelpers: {
+      helpers: calendarHelpers,
+      importName: "calendarHelpers",
+      importPath: "@plasmicpkgs/plasmic-rich-components"
+    },
+    importPath: "@plasmicpkgs/plasmic-rich-components",
+    importName: "RichCalendar"
+  });
+}
+
 function registerAll(loader) {
   registerRichLayout(loader);
   registerRichList(loader);
   registerRichTable(loader);
   registerRichDetails(loader);
+  registerRichCalendar(loader);
 }
 
 exports.RichDetails = RichDetails;