@plasmicpkgs/plasmic-rich-components 1.0.153 → 1.0.155

package/dist/plasmic-rich-components.esm.js

@@ -3,14 +3,14 @@ import '@plasmicapp/host/registerGlobalContext';
 import { parseDate } from '@plasmicpkgs/luxon-parser';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Result, Checkbox, Switch, Empty, Descriptions, theme, ConfigProvider, Dropdown, Button, Input, List, Tag, Card, Calendar, Badge } from 'antd';
 import 'lodash/get';
 import { useNormalizedData, deriveFieldConfigs } from '@plasmicapp/data-sources';
 import { tinycolor } from '@ctrl/tinycolor';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { ProLayout, ProConfigProvider, ProTable } from '@ant-design/pro-components';
-import { useDataEnv, usePlasmicLink } from '@plasmicapp/host';
+import { usePlasmicLink } from '@plasmicapp/host';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 import classNames from 'classnames';
@@ -126,33 +126,33 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-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) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -188,7 +188,7 @@ function deriveValueType(cconfig) {
 const NoneField = "||NoneField||";
 const CustomField = "";
 function getFieldSubprops(opts) {
-  return __spreadValues$b(__spreadValues$b({
+  return __spreadValues$c(__spreadValues$c({
     key: {
       type: "string",
       hidden: () => true
@@ -224,7 +224,7 @@ function getFieldSubprops(opts) {
       defaultValueHint: getDefaultValueHint("title"),
       hidden: () => !!opts.noTitle
     },
-    expr: __spreadProps$8(__spreadValues$b({}, rowDataType("Custom value")), {
+    expr: __spreadProps$9(__spreadValues$c({}, rowDataType("Custom value")), {
       hidden: (ps, ctx, { item, path: _controlPath }) => {
         return false;
       }
@@ -536,25 +536,25 @@ function buildFieldsPropType(_a) {
   };
 }
 
-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) => {
+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$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]);
+    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 __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function multiRenderValue(record, cconfigs) {
   return cconfigs == null ? void 0 : cconfigs.flatMap(
     (cc) => cc.isHidden ? [] : [` \u2022 `, /* @__PURE__ */ React.createElement(React.Fragment, null, renderValue(record, cc))]
@@ -628,11 +628,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$7(__spreadValues$a({}, cconfig), {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$8(__spreadValues$b({}, cconfig), {
       style: "percent"
     })).format(value);
   } else if (cconfig.dataType === "currency") {
-    return new Intl.NumberFormat(cconfig.locale, __spreadProps$7(__spreadValues$a(__spreadValues$a({}, DEFAULT_CURRENCY_SETTINGS), cconfig), {
+    return new Intl.NumberFormat(cconfig.locale, __spreadProps$8(__spreadValues$b(__spreadValues$b({}, DEFAULT_CURRENCY_SETTINGS), cconfig), {
       style: "currency"
     })).format(value);
   } else {
@@ -640,7 +640,7 @@ function renderNumber(value, cconfig) {
   }
 }
 function renderDate(value, cconfig) {
-  const opts = __spreadValues$a(__spreadValues$a({}, DEFAULT_DATETIME_SETTINGS), cconfig);
+  const opts = __spreadValues$b(__spreadValues$b({}, DEFAULT_DATETIME_SETTINGS), cconfig);
   if (opts.dateStyle === "none") {
     delete opts["dateStyle"];
   }
@@ -664,7 +664,7 @@ const UNIT_TO_MS = {
 const UNITS_BY_MS = Object.keys(UNIT_TO_MS);
 function renderRelativeDate(value, cconfig) {
   var _a;
-  const opts = __spreadValues$a(__spreadValues$a({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
+  const opts = __spreadValues$b(__spreadValues$b({}, 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)) {
@@ -751,25 +751,25 @@ function asString(value) {
   }
 }
 
-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) => {
+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$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$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 RichDetails(props) {
   var _a;
   const {
@@ -812,7 +812,7 @@ function useColumnDefinitions$1(data, props) {
     const { mergedFields, minimalFullLengthFields } = deriveFieldConfigs(
       fields != null ? fields : [],
       schema,
-      (field) => __spreadValues$9({
+      (field) => __spreadValues$a({
         key: mkShortId(),
         isHidden: false,
         dataType: "auto"
@@ -823,7 +823,7 @@ function useColumnDefinitions$1(data, props) {
         expr: (currentItem) => currentItem[field.id]
       })
     );
-    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$6(__spreadValues$9({}, data), { mergedFields, minimalFullLengthFields }));
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$7(__spreadValues$a({}, data), { mergedFields, minimalFullLengthFields }));
     const normalized = mergedFields;
     const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
       const columnDefinition = {
@@ -916,6 +916,29 @@ function isLight(color) {
   return r * 0.299 + g * 0.587 + b * 0.114 > 186;
 }
 
+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$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$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+const AnchorLink = React.forwardRef(function AnchorLink2(props, ref) {
+  return /* @__PURE__ */ React.createElement("a", __spreadProps$6(__spreadValues$9({}, props), { ref }));
+});
+
 var __defProp$8 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -935,37 +958,14 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const AnchorLink = React.forwardRef(function AnchorLink2(props, ref) {
-  return /* @__PURE__ */ React.createElement("a", __spreadProps$5(__spreadValues$8({}, props), { ref }));
-});
-
-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$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$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+  if (source != null && __getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -976,7 +976,7 @@ function omitUndefined(x) {
   );
 }
 function processNavItems(navMenuItems) {
-  return navMenuItems.filter((item) => item.condition === void 0 || item.condition).map((item) => __spreadProps$4(__spreadValues$7({}, item), {
+  return navMenuItems.filter((item) => item.condition === void 0 || item.condition).map((item) => __spreadProps$5(__spreadValues$8({}, 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
@@ -1023,7 +1023,6 @@ function RichLayout(_a) {
     "logoElement"
   ]);
   var _a2, _b2, _c, _d, _e;
-  const $ctx = useDataEnv();
   const isClient = useIsClient();
   const [pathname, setPathname] = useState(void 0);
   useEffect(() => {
@@ -1031,7 +1030,7 @@ function RichLayout(_a) {
       setPathname(location.pathname);
     }
   }, []);
-  const PlasmicLink = (_b2 = (_a2 = usePlasmicLink) == null ? void 0 : _a2()) != null ? _b2 : AnchorLink;
+  const Link = (_b2 = (_a2 = usePlasmicLink) == null ? void 0 : _a2()) != null ? _b2 : AnchorLink;
   const { token } = theme.useToken();
   const origTextColor = token.colorTextBase;
   function getNavBgColor() {
@@ -1078,7 +1077,7 @@ function RichLayout(_a) {
   };
   return /* @__PURE__ */ React.createElement("div", { className, style: { display: "flex" } }, /* @__PURE__ */ React.createElement("style", null, baseStyles), /* @__PURE__ */ React.createElement(
     ProLayout,
-    __spreadProps$4(__spreadValues$7({}, layoutProps), {
+    __spreadProps$5(__spreadValues$8({}, layoutProps), {
       pageTitleRender: () => "",
       logo: logo != null ? logo : logoElement,
       headerRender: (_props, defaultDom) => /* @__PURE__ */ React.createElement(
@@ -1089,7 +1088,7 @@ function RichLayout(_a) {
         /* @__PURE__ */ React.createElement(ProConfigProvider, { dark: !isNavBgLight }, defaultDom)
       ),
       token: {
-        header: omitUndefined(__spreadValues$7({
+        header: omitUndefined(__spreadValues$8({
           colorBgHeader: navBgColor
         }, layoutColorOverrides)),
         // Ideally, we'd do something similar to headerRender above, and just specify general dark mode to specify
@@ -1150,29 +1149,28 @@ function RichLayout(_a) {
         return footerChildren;
       },
       onMenuHeaderClick: (e) => console.log(e),
-      selectedKeys: [$ctx == null ? void 0 : $ctx.pagePath],
-      menuItemRender: (item, dom) => /* @__PURE__ */ React.createElement(PlasmicLink, { href: item.path }, dom),
-      headerTitleRender: (logoEl, title, _) => {
-        return /* @__PURE__ */ React.createElement(PlasmicLink, { href: rootUrl }, logoEl, title);
+      menuItemRender: (item, dom) => /* @__PURE__ */ React.createElement(Link, { href: item.path }, dom),
+      headerTitleRender: (logo2, title, _) => {
+        return /* @__PURE__ */ React.createElement(Link, { href: rootUrl }, logo2, title);
       }
     }),
     children
   ));
 }
 
-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) => {
+var __defProp$7 = Object.defineProperty;
+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$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$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;
 };
@@ -1185,7 +1183,7 @@ function generateNavMenuType(isNested, remainingDepth, displayName, defaultValue
     itemType: {
       type: "object",
       nameFunc: (item) => item.name || (!displayName ? "Unnamed nested item" : "Unnamed item"),
-      fields: __spreadValues$6({
+      fields: __spreadValues$7({
         path: "href",
         name: "string",
         condition: {
@@ -1351,6 +1349,152 @@ function registerRichLayout(loader) {
   registerComponentHelper(loader, RichLayout, richLayoutMeta);
 }
 
+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",
+    description: "The data to display"
+  };
+}
+function commonProps() {
+  return {
+    pagination: {
+      type: "boolean",
+      advanced: true,
+      defaultValueHint: true
+    },
+    pageSize: {
+      type: "number",
+      defaultValueHint: 10,
+      advanced: true
+    },
+    hideSearch: {
+      type: "boolean",
+      description: "Hides the search toolbar",
+      advanced: true
+    }
+  };
+}
+function rowActionsProp() {
+  return {
+    type: "array",
+    displayName: "Row actions",
+    advanced: true,
+    itemType: {
+      type: "object",
+      nameFunc: (item) => item.label,
+      fields: {
+        type: {
+          type: "choice",
+          options: ["item", "menu"],
+          defaultValue: "item"
+        },
+        label: {
+          type: "string",
+          displayName: "Action label"
+        },
+        children: {
+          type: "array",
+          displayName: "Menu items",
+          itemType: {
+            type: "object",
+            fields: {
+              label: {
+                type: "string",
+                displayName: "Action label"
+              },
+              onClick: {
+                type: "eventHandler",
+                argTypes: [
+                  { name: "rowKey", type: "string" },
+                  { name: "row", type: "object" }
+                ]
+              }
+            }
+          },
+          hidden: (_ps, _ctx, { item }) => item.type !== "menu"
+        },
+        onClick: {
+          type: "eventHandler",
+          displayName: "Action",
+          argTypes: [
+            { name: "rowKey", type: "string" },
+            { name: "row", type: "object" }
+          ],
+          hidden: (_ps, _ctx, { item }) => item.type !== "item"
+        }
+      }
+    }
+  };
+}
+function onRowClickProp() {
+  return {
+    type: "eventHandler",
+    displayName: "On row clicked",
+    argTypes: [
+      { name: "rowKey", type: "string" },
+      { name: "row", type: "object" },
+      { name: "event", type: "object" }
+    ]
+  };
+}
+
+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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function useSortedFilteredData(data, columns) {
   const [search, setSearch] = useState("");
   const [sortState, setSortState] = useState(void 0);
@@ -1387,11 +1531,19 @@ function useSortedFilteredData(data, columns) {
     setSortState
   };
 }
-function deriveRowKey(data, rowKey) {
+function tagDataArray(xs) {
+  return xs.map((x, i) => __spreadProps$4(__spreadValues$6({}, x), { __tag: i + 1 }));
+}
+function getTag(x) {
+  return x.__tag;
+}
+function deriveRowKey(_data, rowKey) {
   if (rowKey) {
     return rowKey;
   }
-  return void 0;
+  return (x) => {
+    return ensure(getTag(x));
+  };
 }
 function deriveKeyOfRow(row, rowKey) {
   if (typeof rowKey === "function") {
@@ -1508,7 +1660,13 @@ function RichTable(props) {
     rowKey,
     scopeClassName
   } = props;
-  const data = useNormalizedData(rawData);
+  const normalizedData = useNormalizedData(rawData);
+  const data = useMemo(() => {
+    if (!(normalizedData == null ? void 0 : normalizedData.data)) {
+      return normalizedData;
+    }
+    return __spreadProps$3(__spreadValues$5({}, normalizedData), { data: tagDataArray(normalizedData.data) });
+  }, [normalizedData]);
   const { columnDefinitions, normalized } = useColumnDefinitions(data, props);
   const actionRef = useRef();
   const { finalData, search, setSearch, setSortState } = useSortedFilteredData(
@@ -1830,133 +1988,6 @@ 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",
-    description: "The data to display"
-  };
-}
-function commonProps() {
-  return {
-    pagination: {
-      type: "boolean",
-      advanced: true,
-      defaultValueHint: true
-    },
-    pageSize: {
-      type: "number",
-      defaultValueHint: 10,
-      advanced: true
-    },
-    hideSearch: {
-      type: "boolean",
-      description: "Hides the search toolbar",
-      advanced: true
-    }
-  };
-}
-function rowActionsProp() {
-  return {
-    type: "array",
-    displayName: "Row actions",
-    advanced: true,
-    itemType: {
-      type: "object",
-      nameFunc: (item) => item.label,
-      fields: {
-        type: {
-          type: "choice",
-          options: ["item", "menu"],
-          defaultValue: "item"
-        },
-        label: {
-          type: "string",
-          displayName: "Action label"
-        },
-        children: {
-          type: "array",
-          displayName: "Menu items",
-          itemType: {
-            type: "object",
-            fields: {
-              label: {
-                type: "string",
-                displayName: "Action label"
-              },
-              onClick: {
-                type: "eventHandler",
-                argTypes: [
-                  { name: "rowKey", type: "string" },
-                  { name: "row", type: "object" }
-                ]
-              }
-            }
-          },
-          hidden: (_ps, _ctx, { item }) => item.type !== "menu"
-        },
-        onClick: {
-          type: "eventHandler",
-          displayName: "Action",
-          argTypes: [
-            { name: "rowKey", type: "string" },
-            { name: "row", type: "object" }
-          ],
-          hidden: (_ps, _ctx, { item }) => item.type !== "item"
-        }
-      }
-    }
-  };
-}
-function onRowClickProp() {
-  return {
-    type: "eventHandler",
-    displayName: "On row clicked",
-    argTypes: [
-      { name: "rowKey", type: "string" },
-      { name: "row", type: "object" },
-      { name: "event", type: "object" }
-    ]
-  };
-}
-
 var __defProp$4 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -2027,11 +2058,7 @@ const dataTableMeta = {
       type: "string",
       displayName: "Row key",
       helpText: "Column key to use as row key; can also be a function that takes in a row and returns a key value",
-      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none",
-      defaultValueHint: (ps) => {
-        const derivedRowKey = deriveRowKey(ps.data, ps.rowKey);
-        return derivedRowKey !== void 0 ? `${derivedRowKey}` : void 0;
-      }
+      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none"
     },
     selectedRowKey: {
       type: "string",