@plasmicpkgs/plasmic-rich-components 1.0.85 → 1.0.86

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

@@ -1,12 +1,14 @@
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
-import { ProDescriptions, ProLayout, ProConfigProvider, ProTable, TableDropdown } from '@ant-design/pro-components';
+import { groupBy } from 'lodash';
+import { ProDescriptions, ProLayout, ProConfigProvider, ProTable } from '@ant-design/pro-components';
 import React, { useState, useEffect, useRef } from 'react';
-import { Checkbox, Switch, Empty, theme, ConfigProvider, Dropdown, Button } from 'antd';
+import { Checkbox, Switch, Empty, theme, ConfigProvider, Dropdown, Button, Input, List, Card, Tag } from 'antd';
 import { tinycolor } from '@ctrl/tinycolor';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
+import classNames from 'classnames';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -102,10 +104,41 @@ function registerComponentHelper(loader, component, meta) {
         registerComponent(component, meta);
     }
 }
+function ensure(x) {
+    if (x === null || x === undefined) {
+        throw new Error("Expected non-null or non-undefined value");
+    }
+    return x;
+}
 function isOneOf(elem, arr) {
     return arr.includes(elem);
 }
-
+function maybe(x, f) {
+    if (x === undefined || x === null)
+        return undefined;
+    return f(x);
+}
+function isLikeImage(value) {
+    return typeof value === "string"
+        ? value.match(/\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$/i)
+        : false;
+}
+// Some heuristics to avoid selecting a row when
+// the object clicked is interactable -- like button, anchor,
+// input, etc.  This won't be bulletproof, so just some
+// heuristics!
+function isInteractable(target) {
+    if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
+        return true;
+    }
+    if (target.contentEditable === "true") {
+        return true;
+    }
+    return false;
+}
+function ensureArray(xs) {
+    return Array.isArray(xs) ? xs : [xs];
+}
 var tuple = function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -120,6 +153,10 @@ var mkShortId = function () { return "".concat(Math.random()); };
 function withoutNils(xs) {
     return xs.filter(function (x) { return x != null; });
 }
+function withoutFalsey(xs) {
+    return xs.filter(function (x) { return !!x; });
+}
+
 var DEFAULT_CURRENCY_SETTINGS = {
     dataType: "currency",
     currency: "USD",
@@ -184,41 +221,369 @@ function deriveValueType(cconfig) {
                     ? "switch"
                     : undefined;
 }
-function buildFieldsPropType(opts) {
-    function getDefaultValueHint(field) {
-        return function (_props, contextData, _a) {
-            var item = _a.item;
-            if (item.fieldId) {
-                var fieldSetting = contextData === null || contextData === void 0 ? void 0 : contextData.mergedFields.find(function (f) { return f.fieldId === item.fieldId; });
-                return fieldSetting === null || fieldSetting === void 0 ? void 0 : fieldSetting[field];
-            }
-            return undefined;
-        };
-    }
-    var rowDataType = function (displayName, control) {
-        return ({
-            type: "function",
-            displayName: displayName,
-            control: control,
-            argNames: ["currentItem", "currentValue"],
-            argValues: function (_props, ctx, _a) {
-                var _b;
-                var item = _a.item;
-                var row = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _b === void 0 ? void 0 : _b[0];
-                var cell = item.fieldId ? row === null || row === void 0 ? void 0 : row[item.fieldId] : undefined;
-                return [row, cell];
+// Hacky "unique" string values
+var NoneField = "||NoneField||";
+var CustomField = "";
+function getFieldSubprops(opts) {
+    return __assign(__assign({ key: {
+            type: "string",
+            hidden: function () { return true; },
+        }, fieldId: {
+            type: "choice",
+            displayName: "Field name",
+            readOnly: !opts.canChangeField,
+            options: function (_props, ctx) {
+                var _a, _b;
+                return withoutFalsey(__spreadArray(__spreadArray([
+                    opts.canPickNoneField && { value: NoneField, label: "None" }
+                ], ((_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.schema) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map(function (f) {
+                    var _a;
+                    return ({
+                        value: f.id,
+                        label: (_a = f.label) !== null && _a !== void 0 ? _a : f.id,
+                    });
+                }), true), [
+                    { value: CustomField, label: "Custom value" },
+                ], false));
             },
-        });
+            hidden: function (ps, ctx, _a) {
+                _a.path;
+                // If this is change-able.
+                if (opts.canChangeField) {
+                    return false;
+                }
+                return true;
+            },
+        }, title: {
+            type: "string",
+            displayName: "Title",
+            defaultValueHint: getDefaultValueHint("title"),
+            hidden: function () { return !!opts.noTitle; },
+        }, expr: __assign(__assign({}, rowDataType("Custom value")), { hidden: function (ps, ctx, _a) {
+                _a.item; _a.path;
+                return false;
+            } }), isHidden: {
+            type: "boolean",
+            displayName: "Is hidden",
+            defaultValueHint: getDefaultValueHint("isHidden"),
+        } }, (opts.noDataType
+        ? {
+            dataType: {
+                type: "choice",
+                displayName: "Data type",
+                options: [
+                    {
+                        value: "auto",
+                        label: "Auto",
+                    },
+                    {
+                        value: "number",
+                        label: "Number",
+                    },
+                    {
+                        value: "percent",
+                        label: "Percentage",
+                    },
+                    {
+                        value: "currency",
+                        label: "Currency",
+                    },
+                    {
+                        value: "string",
+                        label: "String",
+                    },
+                    {
+                        value: "boolean",
+                        label: "Boolean",
+                    },
+                    {
+                        value: "datetime",
+                        label: "Date / Time",
+                    },
+                    {
+                        value: "relative-datetime",
+                        label: "Date / Time relative to now",
+                    },
+                ],
+                defaultValueHint: getDefaultValueHint("dataType"),
+            },
+            currency: {
+                displayName: "Currency",
+                description: "Must be a valid currency code",
+                type: "string",
+                defaultValueHint: "USD",
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "currency";
+                },
+            },
+            locale: {
+                displayName: "Locale",
+                description: "Must be a valid locale code",
+                type: "string",
+                defaultValueHint: "en-US",
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return !isOneOf(item.dataType, NUMBER_TYPES) &&
+                        !isOneOf(item.dataType, DATETIME_TYPES);
+                },
+            },
+            notation: {
+                displayName: "Notation",
+                type: "choice",
+                options: [
+                    {
+                        value: "standard",
+                        label: "Standard",
+                    },
+                    {
+                        value: "scientific",
+                        label: "Scientific notation (like 1E3)",
+                    },
+                    {
+                        value: "compact",
+                        label: "Compact (like 10K)",
+                    },
+                ],
+                defaultValueHint: "standard",
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return !isOneOf(item.dataType, NUMBER_TYPES);
+                },
+            },
+            signDisplay: {
+                type: "choice",
+                displayName: "Number sign",
+                options: [
+                    {
+                        value: "auto",
+                        label: "Only for negative numbers (10, -10)",
+                    },
+                    {
+                        value: "exceptZero",
+                        label: "Positive or negative (+10, -10)",
+                    },
+                ],
+                defaultValueHint: "auto",
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return !isOneOf(item.dataType, NUMBER_TYPES);
+                },
+            },
+            maximumFractionDigits: {
+                type: "number",
+                displayName: "Max decimal places",
+                defaultValueHint: 3,
+                min: 0,
+                max: 20,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return !isOneOf(item.dataType, NUMBER_TYPES);
+                },
+            },
+            minimumFractionDigits: {
+                type: "number",
+                displayName: "Min decimal places",
+                defaultValueHint: 0,
+                min: 0,
+                max: 20,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return !isOneOf(item.dataType, NUMBER_TYPES);
+                },
+            },
+            showAs: {
+                type: "choice",
+                options: [
+                    {
+                        value: "checkbox",
+                        label: "Checkboxes",
+                    },
+                    {
+                        value: "switch",
+                        label: "Toggle switches",
+                    },
+                    {
+                        value: "text",
+                        label: "Text",
+                    },
+                ],
+                displayName: "Show as",
+                defaultValueHint: "checkbox",
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "boolean";
+                },
+            },
+            dateStyle: {
+                displayName: "Date style",
+                type: "choice",
+                options: [
+                    {
+                        value: "none",
+                        label: "None (don't display date)",
+                    },
+                    {
+                        value: "short",
+                        label: "Short (like 12/25/2023)",
+                    },
+                    {
+                        value: "medium",
+                        label: "Medium (like Dec 25, 2023)",
+                    },
+                    {
+                        value: "long",
+                        label: "Long (like December 25, 2023)",
+                    },
+                    {
+                        value: "full",
+                        label: "Full (like Monday, December 25, 2023)",
+                    },
+                ],
+                defaultValueHint: DEFAULT_DATETIME_SETTINGS.dateStyle,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "datetime";
+                },
+            },
+            timeStyle: {
+                displayName: "Time style",
+                type: "choice",
+                options: [
+                    {
+                        value: "none",
+                        label: "None (don't display time)",
+                    },
+                    {
+                        value: "short",
+                        label: "Short (like 4:00 PM)",
+                    },
+                    {
+                        value: "medium",
+                        label: "Medium (like 4:00:00 PM)",
+                    },
+                    {
+                        value: "long",
+                        label: "Long (like 4:00:00 PM PST)",
+                    },
+                    {
+                        value: "full",
+                        label: "Full (like 4:00:00 PM Pacific Standard Time)",
+                    },
+                ],
+                defaultValueHint: DEFAULT_DATETIME_SETTINGS.timeStyle,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "datetime";
+                },
+            },
+            hour12: {
+                displayName: "Use AM/PM?",
+                description: "Whether to use AM/PM or 24-hour clock",
+                type: "boolean",
+                defaultValueHint: DEFAULT_DATETIME_SETTINGS.hour12,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "datetime";
+                },
+            },
+            numeric: {
+                type: "choice",
+                displayName: "Use numbers?",
+                options: [
+                    { value: "always", label: "Always use numbers" },
+                    {
+                        value: "auto",
+                        label: "Use words like 'Yesterday' or 'Tomorrow'",
+                    },
+                ],
+                defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.numeric,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "relative-datetime";
+                },
+            },
+            unit: {
+                type: "choice",
+                displayName: "Time unit",
+                options: [
+                    {
+                        value: "second",
+                        label: "Seconds",
+                    },
+                    {
+                        value: "minute",
+                        label: "Minutes",
+                    },
+                    {
+                        value: "hour",
+                        label: "Hours",
+                    },
+                    {
+                        value: "day",
+                        label: "Days",
+                    },
+                    {
+                        value: "week",
+                        label: "Weeks",
+                    },
+                    {
+                        value: "month",
+                        label: "Months",
+                    },
+                    {
+                        value: "year",
+                        label: "Years",
+                    },
+                ],
+                defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.unit,
+                hidden: function (ps, ctx, _a) {
+                    var item = _a.item;
+                    return item.dataType !== "relative-datetime";
+                },
+            },
+        }
+        : {})), opts.fieldTypes);
+}
+function getDefaultValueHint(field) {
+    return function (_props, contextData, _a) {
+        var item = _a.item;
+        if (item === null || item === void 0 ? void 0 : item.fieldId) {
+            var fieldSetting = contextData === null || contextData === void 0 ? void 0 : contextData.mergedFields.find(function (f) { return f.fieldId === item.fieldId; });
+            return fieldSetting === null || fieldSetting === void 0 ? void 0 : fieldSetting[field];
+        }
+        return undefined;
     };
+}
+var rowDataType = function (displayName, control) {
+    return ({
+        type: "function",
+        displayName: displayName,
+        control: control,
+        argNames: ["currentItem", "currentValue"],
+        argValues: function (_props, ctx, _a) {
+            var _b;
+            var item = _a.item;
+            var row = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _b === void 0 ? void 0 : _b[0];
+            var cell = item.fieldId ? row === null || row === void 0 ? void 0 : row[item.fieldId] : undefined;
+            return [row, cell];
+        },
+    });
+};
+function buildFieldsPropType(_a) {
+    var advanced = _a.advanced, displayName = _a.displayName, _b = _a.minimalValue, minimalValue = _b === void 0 ? function (_props, contextData) { return contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields; } : _b, opts = __rest(_a, ["advanced", "displayName", "minimalValue"]);
     return {
         type: "array",
+        advanced: advanced,
+        displayName: displayName,
         hidden: function (ps) { return !ps.data; },
         unstable__keyFunc: function (x) { return x.key; },
-        unstable__minimalValue: function (_props, contextData) {
-            return contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields;
-        },
+        unstable__minimalValue: minimalValue,
         unstable__canDelete: function (ps, _props, ctx, _a) {
             var item = _a.item;
+            if (opts.canChangeField) {
+                return true;
+            }
             if (!(ctx === null || ctx === void 0 ? void 0 : ctx.schema)) {
                 // still loading...
                 return false;
@@ -232,292 +597,10 @@ function buildFieldsPropType(opts) {
         itemType: {
             type: "object",
             nameFunc: function (_item) {
-                var _a;
-                return (_a = _item.title) !== null && _a !== void 0 ? _a : _item.fieldId;
+                // Prefer to show the field ID when available, since there's no other indication what field you're edtiing if you relabeled it.
+                return _item.fieldId || _item.title || "Custom value";
             },
-            fields: __assign({ key: {
-                    type: "string",
-                    hidden: function () { return true; },
-                }, fieldId: {
-                    type: "choice",
-                    displayName: "Field name",
-                    readOnly: true,
-                    options: function (_props, ctx) { var _a, _b; return ((_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.schema) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map(function (f) { return f.id; }); },
-                    hidden: function (_props, ctx, _a) {
-                        var _b, _c;
-                        var _controlPath = _a.path;
-                        return !(_controlPath.slice(-1)[0] in ((_c = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.schema) === null || _b === void 0 ? void 0 : _b.fields) !== null && _c !== void 0 ? _c : {}));
-                    },
-                }, title: {
-                    type: "string",
-                    displayName: "Title",
-                    defaultValueHint: getDefaultValueHint("title"),
-                }, expr: rowDataType("Customize cell data"), isHidden: {
-                    type: "boolean",
-                    displayName: "Is hidden",
-                    defaultValueHint: getDefaultValueHint("isHidden"),
-                }, dataType: {
-                    type: "choice",
-                    displayName: "Data type",
-                    options: [
-                        {
-                            value: "auto",
-                            label: "Auto",
-                        },
-                        {
-                            value: "number",
-                            label: "Number",
-                        },
-                        {
-                            value: "percent",
-                            label: "Percentage",
-                        },
-                        {
-                            value: "currency",
-                            label: "Currency",
-                        },
-                        {
-                            value: "string",
-                            label: "String",
-                        },
-                        {
-                            value: "boolean",
-                            label: "Boolean",
-                        },
-                        {
-                            value: "datetime",
-                            label: "Date / Time",
-                        },
-                        {
-                            value: "relative-datetime",
-                            label: "Date / Time relative to now",
-                        },
-                    ],
-                    defaultValueHint: getDefaultValueHint("dataType"),
-                }, currency: {
-                    displayName: "Currency",
-                    description: "Must be a valid currency code",
-                    type: "string",
-                    defaultValueHint: "USD",
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "currency";
-                    },
-                }, locale: {
-                    displayName: "Locale",
-                    description: "Must be a valid locale code",
-                    type: "string",
-                    defaultValueHint: "en-US",
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return !isOneOf(item.dataType, NUMBER_TYPES) &&
-                            !isOneOf(item.dataType, DATETIME_TYPES);
-                    },
-                }, notation: {
-                    displayName: "Notation",
-                    type: "choice",
-                    options: [
-                        {
-                            value: "standard",
-                            label: "Standard",
-                        },
-                        {
-                            value: "scientific",
-                            label: "Scientific notation (like 1E3)",
-                        },
-                        {
-                            value: "compact",
-                            label: "Compact (like 10K)",
-                        },
-                    ],
-                    defaultValueHint: "standard",
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return !isOneOf(item.dataType, NUMBER_TYPES);
-                    },
-                }, signDisplay: {
-                    type: "choice",
-                    displayName: "Number sign",
-                    options: [
-                        {
-                            value: "auto",
-                            label: "Only for negative numbers (10, -10)",
-                        },
-                        {
-                            value: "exceptZero",
-                            label: "Positive or negative (+10, -10)",
-                        },
-                    ],
-                    defaultValueHint: "auto",
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return !isOneOf(item.dataType, NUMBER_TYPES);
-                    },
-                }, maximumFractionDigits: {
-                    type: "number",
-                    displayName: "Max decimal places",
-                    defaultValueHint: 3,
-                    min: 0,
-                    max: 20,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return !isOneOf(item.dataType, NUMBER_TYPES);
-                    },
-                }, minimumFractionDigits: {
-                    type: "number",
-                    displayName: "Min decimal places",
-                    defaultValueHint: 0,
-                    min: 0,
-                    max: 20,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return !isOneOf(item.dataType, NUMBER_TYPES);
-                    },
-                }, showAs: {
-                    type: "choice",
-                    options: [
-                        {
-                            value: "checkbox",
-                            label: "Checkboxes",
-                        },
-                        {
-                            value: "switch",
-                            label: "Toggle switches",
-                        },
-                        {
-                            value: "text",
-                            label: "Text",
-                        },
-                    ],
-                    displayName: "Show as",
-                    defaultValueHint: "checkbox",
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "boolean";
-                    },
-                }, dateStyle: {
-                    displayName: "Date style",
-                    type: "choice",
-                    options: [
-                        {
-                            value: "none",
-                            label: "None (don't display date)",
-                        },
-                        {
-                            value: "short",
-                            label: "Short (like 12/25/2023)",
-                        },
-                        {
-                            value: "medium",
-                            label: "Medium (like Dec 25, 2023)",
-                        },
-                        {
-                            value: "long",
-                            label: "Long (like December 25, 2023)",
-                        },
-                        {
-                            value: "full",
-                            label: "Full (like Monday, December 25, 2023)",
-                        },
-                    ],
-                    defaultValueHint: DEFAULT_DATETIME_SETTINGS.dateStyle,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "datetime";
-                    },
-                }, timeStyle: {
-                    displayName: "Time style",
-                    type: "choice",
-                    options: [
-                        {
-                            value: "none",
-                            label: "None (don't display time)",
-                        },
-                        {
-                            value: "short",
-                            label: "Short (like 4:00 PM)",
-                        },
-                        {
-                            value: "medium",
-                            label: "Medium (like 4:00:00 PM)",
-                        },
-                        {
-                            value: "long",
-                            label: "Long (like 4:00:00 PM PST)",
-                        },
-                        {
-                            value: "full",
-                            label: "Full (like 4:00:00 PM Pacific Standard Time)",
-                        },
-                    ],
-                    defaultValueHint: DEFAULT_DATETIME_SETTINGS.timeStyle,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "datetime";
-                    },
-                }, hour12: {
-                    displayName: "Use AM/PM?",
-                    description: "Whether to use AM/PM or 24-hour clock",
-                    type: "boolean",
-                    defaultValueHint: DEFAULT_DATETIME_SETTINGS.hour12,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "datetime";
-                    },
-                }, numeric: {
-                    type: "choice",
-                    displayName: "Use numbers?",
-                    options: [
-                        { value: "always", label: "Always use numbers" },
-                        {
-                            value: "auto",
-                            label: "Use words like 'Yesterday' or 'Tomorrow'",
-                        },
-                    ],
-                    defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.numeric,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "relative-datetime";
-                    },
-                }, unit: {
-                    type: "choice",
-                    displayName: "Time unit",
-                    options: [
-                        {
-                            value: "second",
-                            label: "Seconds",
-                        },
-                        {
-                            value: "minute",
-                            label: "Minutes",
-                        },
-                        {
-                            value: "hour",
-                            label: "Hours",
-                        },
-                        {
-                            value: "day",
-                            label: "Days",
-                        },
-                        {
-                            value: "week",
-                            label: "Weeks",
-                        },
-                        {
-                            value: "month",
-                            label: "Months",
-                        },
-                        {
-                            value: "year",
-                            label: "Years",
-                        },
-                    ],
-                    defaultValueHint: DEFAULT_RELATIVE_DATETIME_SETTINGS.unit,
-                    hidden: function (ps, ctx, _a) {
-                        var item = _a.item;
-                        return item.dataType !== "relative-datetime";
-                    },
-                } }, opts.fieldTypes),
+            fields: getFieldSubprops(opts),
         },
     };
 }
@@ -602,10 +685,25 @@ function tryGetSchema(data) {
     };
 }
 
-function renderValue(value, record, cconfig) {
+function multiRenderValue(record, cconfigs) {
+    return cconfigs === null || cconfigs === void 0 ? void 0 : cconfigs.flatMap(function (cc) {
+        return cc.isHidden ? [] : [" \u2022 ", React.createElement(React.Fragment, null, renderValue(record, cc))];
+    }).slice(1);
+}
+function maybeRenderString(record, cconfig) {
+    return cconfig && !cconfig.isHidden
+        ? maybe(getFieldValue(record, cconfig), asString)
+        : undefined;
+}
+function getFieldValue(record, cconfig) {
+    var value = cconfig.fieldId ? record[cconfig.fieldId] : undefined;
     if (cconfig.expr) {
         value = cconfig.expr(record, value);
     }
+    return value;
+}
+function renderValue(record, cconfig) {
+    var value = getFieldValue(record, cconfig);
     if (value == null) {
         return "";
     }
@@ -866,10 +964,7 @@ function useColumnDefinitions$1(data, props) {
                     return defaultRender(_);
                 },
                 render: function (value, record, rowIndex) {
-                    var cellValue = cconfig.fieldId
-                        ? record[cconfig.fieldId]
-                        : undefined;
-                    return renderValue(cellValue, record, cconfig);
+                    return renderValue(record, cconfig);
                 },
             };
             return columnDefinition;
@@ -1251,44 +1346,132 @@ function registerRichLayout(loader) {
     registerComponentHelper(loader, RichLayout, richLayoutMeta);
 }
 
-function RichTable(props) {
-    var className = props.className, _a = props.data, rawData = _a === void 0 ? {
-        data: [],
-        schema: {
-            id: "inferred",
-            fields: [
-                {
-                    id: "id",
-                    type: "string",
-                    readOnly: false,
-                },
-            ],
-        },
-    } : _a, 
-    // children,
-    _b = props.pagination, 
-    // children,
-    pagination = _b === void 0 ? true : _b, defaultSize = props.defaultSize, title = props.title, addHref = props.addHref, _c = props.pageSize, pageSize = _c === void 0 ? 10 : _c, hideSearch = props.hideSearch, _d = props.hideDensity, hideDensity = _d === void 0 ? true : _d, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, _e = props.hideSelectionBar, hideSelectionBar = _e === void 0 ? true : _e, rowKey = props.rowKey, scopeClassName = props.scopeClassName;
-    var data = normalizeData(rawData);
-    var _f = useColumnDefinitions(data, props), columnDefinitions = _f.columnDefinitions, normalized = _f.normalized;
-    var actionRef = useRef();
-    var _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch, setSortState = _g.setSortState;
-    var rowSelectionProps = useRowSelectionProps(data, props);
-    var isClient = useIsClient();
-    if (!isClient) {
-        return null;
-    }
-    return (React.createElement("div", { className: "".concat(className, " ").concat(scopeClassName !== null && scopeClassName !== void 0 ? scopeClassName : "") },
-        React.createElement(ProTable, __assign({ rowClassName: props.onRowClick || props.canSelectRows === "click"
-                ? "plasmic-table-row-clickable"
-                : undefined, actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
-                setSortState({ sorter: sorter });
-            }, style: {
-                width: "100%",
-            }, cardProps: {
-                ghost: true,
-            } }, rowSelectionProps, { dataSource: finalData, rowKey: deriveRowKey(data, rowKey), defaultSize: defaultSize, editable: { type: "multiple" }, search: false, options: {
-                setting: hideColumnPicker
+function useSortedFilteredData(data, columns) {
+    var _a = useState(""), search = _a[0], setSearch = _a[1];
+    var _b = useState(undefined), sortState = _b[0], setSortState = _b[1];
+    var finalData = React.useMemo(function () {
+        var _a;
+        var filtered = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.filter(function (row) {
+            return fastStringify(Object.values(row)).toLowerCase().includes(search);
+        });
+        var sorted = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column)
+            ? // We use .sort() rather than sortBy to use localeCompare
+                (function () {
+                    var _a;
+                    var cconfig = columns.find(function (cc) { var _a; return cc.key === ((_a = sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column) === null || _a === void 0 ? void 0 : _a.key); });
+                    var expr = (_a = cconfig.expr) !== null && _a !== void 0 ? _a : (function (x) { return x; });
+                    return (filtered !== null && filtered !== void 0 ? filtered : []).sort(function (aa, bb) {
+                        var _a, _b;
+                        var a = (_a = expr(aa, cconfig.fieldId ? aa === null || aa === void 0 ? void 0 : aa[cconfig.fieldId] : null)) !== null && _a !== void 0 ? _a : null, b = (_b = expr(bb, cconfig.fieldId ? bb === null || bb === void 0 ? void 0 : bb[cconfig.fieldId] : null)) !== null && _b !== void 0 ? _b : null;
+                        // Default nil to '' here because A < null < z which is weird.
+                        return typeof a === "string"
+                            ? a.localeCompare(b !== null && b !== void 0 ? b : "")
+                            : typeof b === "string"
+                                ? -b.localeCompare(a !== null && a !== void 0 ? a : "")
+                                : a - b;
+                    });
+                })()
+            : filtered;
+        var reversed = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.order) === "descend" ? sorted === null || sorted === void 0 ? void 0 : sorted.reverse() : sorted;
+        return reversed;
+    }, [data, columns, sortState, search]);
+    return {
+        finalData: finalData,
+        search: search,
+        setSearch: setSearch,
+        setSortState: setSortState,
+    };
+}
+function deriveRowKey(data, rowKey) {
+    var _a;
+    if (rowKey) {
+        return rowKey;
+    }
+    var schema = data === null || data === void 0 ? void 0 : data.schema;
+    if (schema) {
+        return (_a = schema.fields[0]) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    return undefined;
+}
+function deriveKeyOfRow(row, rowKey) {
+    if (typeof rowKey === "function") {
+        return rowKey(row);
+    }
+    else if (typeof rowKey === "string") {
+        return row[rowKey];
+    }
+    else {
+        return undefined;
+    }
+}
+function renderActions(rowActions, row, data, rowKey) {
+    return rowActions.map(function (_action) {
+        var _a;
+        if (_action.type === "item") {
+            return (React.createElement("a", { key: _action.label, style: {
+                    whiteSpace: "nowrap",
+                }, onClick: function () {
+                    var _a;
+                    return (_a = _action.onClick) === null || _a === void 0 ? void 0 : _a.call(_action, deriveKeyOfRow(row, deriveRowKey(data, rowKey)), row);
+                } }, _action.label));
+        }
+        else {
+            return (React.createElement(Dropdown, { key: _action.label, menu: {
+                    items: ((_a = _action.children) !== null && _a !== void 0 ? _a : []).map(function (child) { return ({
+                        key: child.label,
+                        label: child.label,
+                        onClick: function () {
+                            var _a;
+                            return (_a = child.onClick) === null || _a === void 0 ? void 0 : _a.call(child, deriveKeyOfRow(row, deriveRowKey(data, rowKey)), row);
+                        },
+                    }); }),
+                } },
+                React.createElement("a", { href: "javascript: void 0", style: {
+                        whiteSpace: "nowrap",
+                    } }, _action.label)));
+        }
+    });
+}
+
+// In this code, ColumnConfigs are Plasmic, while ColumnDefinitions are Ant.
+function RichTable(props) {
+    var className = props.className, _a = props.data, rawData = _a === void 0 ? {
+        data: [],
+        schema: {
+            id: "inferred",
+            fields: [
+                {
+                    id: "id",
+                    type: "string",
+                    readOnly: false,
+                },
+            ],
+        },
+    } : _a, 
+    // children,
+    _b = props.pagination, 
+    // children,
+    pagination = _b === void 0 ? true : _b, defaultSize = props.defaultSize, title = props.title, addHref = props.addHref, _c = props.pageSize, pageSize = _c === void 0 ? 10 : _c, hideSearch = props.hideSearch, _d = props.hideDensity, hideDensity = _d === void 0 ? true : _d, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, _e = props.hideSelectionBar, hideSelectionBar = _e === void 0 ? true : _e, rowKey = props.rowKey, scopeClassName = props.scopeClassName;
+    var data = normalizeData(rawData);
+    var _f = useColumnDefinitions(data, props), columnDefinitions = _f.columnDefinitions, normalized = _f.normalized;
+    var actionRef = useRef();
+    var _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch, setSortState = _g.setSortState;
+    var rowSelectionProps = useRowSelectionProps(data, props);
+    var isClient = useIsClient();
+    if (!isClient) {
+        return null;
+    }
+    return (React.createElement("div", { className: "".concat(className, " ").concat(scopeClassName !== null && scopeClassName !== void 0 ? scopeClassName : "") },
+        React.createElement(ProTable, __assign({ rowClassName: props.onRowClick || props.canSelectRows === "click"
+                ? "plasmic-table-row-clickable"
+                : undefined, actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
+                setSortState({ sorter: sorter });
+            }, style: {
+                width: "100%",
+            }, cardProps: {
+                ghost: true,
+            } }, rowSelectionProps, { dataSource: finalData, rowKey: deriveRowKey(data, rowKey), defaultSize: defaultSize, editable: { type: "multiple" }, search: false, options: {
+                setting: hideColumnPicker
                     ? false
                     : {
                         listsHeight: 400,
@@ -1319,34 +1502,12 @@ function RichTable(props) {
                 ].filter(function (x) { return !!x; });
             } })),
         React.createElement("style", { dangerouslySetInnerHTML: {
-                __html: "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          :where(.plasmic-table-row-clickable) {\n            cursor: pointer;\n          }\n          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {\n            height: 100%;\n          }\n          .ant-pro-table .ant-spin-container {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-pagination {\n            flex-shrink: 0;\n          }\n          .ant-pro-table .ant-table-content {\n            overflow: auto !important;\n            height: 100%;\n          }\n          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table-wrapper {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-table-thead > tr > th, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {\n            position: sticky;\n            top: 0;\n            z-index: 2;\n          }\n          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {\n            z-index: 3;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td {\n            z-index: 0;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {\n            z-index: 1;\n          }\n          ".concat(scopeClassName && hideSelectionBar
+                __html: "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          .plasmic-table-row-clickable {\n            cursor: pointer;\n          }\n          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {\n            height: 100%;\n          }\n          .ant-pro-table .ant-spin-container {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-pagination {\n            flex-shrink: 0;\n          }\n          .ant-pro-table .ant-table-content {\n            overflow: auto !important;\n            height: 100%;\n          }\n          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table-wrapper {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-table-thead > tr > th, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {\n            position: sticky;\n            top: 0;\n            z-index: 2;\n          }\n          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {\n            z-index: 3;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td {\n            z-index: 0;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {\n            z-index: 1;\n          }\n          ".concat(scopeClassName && hideSelectionBar
                     ? "\n          .".concat(scopeClassName, " .ant-pro-table-alert {\n            display: none;\n          }\n          ")
                     : "", "\n      "),
             } })));
 }
-function deriveRowKey(data, rowKey) {
-    var _a;
-    if (rowKey) {
-        return rowKey;
-    }
-    var schema = data === null || data === void 0 ? void 0 : data.schema;
-    if (schema) {
-        return (_a = schema.fields[0]) === null || _a === void 0 ? void 0 : _a.id;
-    }
-    return undefined;
-}
-function deriveKeyOfRow(row, rowKey) {
-    if (typeof rowKey === "function") {
-        return rowKey(row);
-    }
-    else if (typeof rowKey === "string") {
-        return row[rowKey];
-    }
-    else {
-        return undefined;
-    }
-}
-var defaultColumnConfig = function () {
+var defaultColumnConfig$1 = function () {
     return ({
         key: mkShortId(),
         isEditableExpr: function () { return false; },
@@ -1368,7 +1529,7 @@ function useColumnDefinitions(data, props) {
         if (!data || !schema) {
             return { normalized: [], columnDefinitions: [] };
         }
-        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign(__assign({}, defaultColumnConfig()), (field && {
+        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign(__assign({}, defaultColumnConfig$1()), (field && {
             key: field.id,
             fieldId: field.id,
             title: field.label || field.id,
@@ -1403,14 +1564,12 @@ function useColumnDefinitions(data, props) {
                     return defaultRender(_);
                 },
                 render: function (value, record, rowIndex) {
-                    var cellValue = cconfig.fieldId
-                        ? record[cconfig.fieldId]
-                        : undefined;
-                    return renderValue(cellValue, record, cconfig);
+                    return renderValue(record, cconfig);
                 },
             };
             return columnDefinition;
         });
+        var rowKey = props.rowKey;
         if (rowActions && rowActions.length > 0) {
             columnDefinitions.push({
                 title: "Actions",
@@ -1418,70 +1577,12 @@ function useColumnDefinitions(data, props) {
                 key: "__plasmicActions",
                 fixed: "right",
                 className: props.themeResetClassName,
-                render: function (_text, row) { return __spreadArray([], rowActions.map(function (_action) {
-                    var _a;
-                    if (_action.type === "item") {
-                        return (React.createElement("a", { key: _action.label, style: {
-                                whiteSpace: "nowrap",
-                            }, onClick: function () {
-                                var _a;
-                                return (_a = _action.onClick) === null || _a === void 0 ? void 0 : _a.call(_action, deriveKeyOfRow(row, deriveRowKey(data, props.rowKey)), row);
-                            } }, _action.label));
-                    }
-                    else {
-                        return (React.createElement(TableDropdown, { key: _action.label, style: {
-                                whiteSpace: "nowrap",
-                            }, menus: ((_a = _action.children) !== null && _a !== void 0 ? _a : []).map(function (child) { return ({
-                                key: child.label,
-                                name: child.label,
-                                onClick: function () {
-                                    var _a;
-                                    return (_a = child.onClick) === null || _a === void 0 ? void 0 : _a.call(child, deriveKeyOfRow(row, deriveRowKey(data, props.rowKey)), row);
-                                },
-                            }); }) }, _action.label));
-                    }
-                }), true); },
+                render: function (_text, row) { return __spreadArray([], renderActions(rowActions, row, data, rowKey), true); },
             });
         }
         return { normalized: normalized, columnDefinitions: columnDefinitions };
     }, [fields, data, setControlContextData, rowActions]);
 }
-function useSortedFilteredData(data, columns) {
-    var _a = useState(""), search = _a[0], setSearch = _a[1];
-    var _b = useState(undefined), sortState = _b[0], setSortState = _b[1];
-    var finalData = React.useMemo(function () {
-        var _a;
-        var filtered = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.filter(function (row) {
-            return fastStringify(Object.values(row)).toLowerCase().includes(search);
-        });
-        var sorted = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column)
-            ? // We use .sort() rather than sortBy to use localeCompare
-                (function () {
-                    var _a;
-                    var cconfig = columns.find(function (cc) { var _a; return cc.key === ((_a = sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column) === null || _a === void 0 ? void 0 : _a.key); });
-                    var expr = (_a = cconfig.expr) !== null && _a !== void 0 ? _a : (function (x) { return x; });
-                    return (filtered !== null && filtered !== void 0 ? filtered : []).sort(function (aa, bb) {
-                        var _a, _b;
-                        var a = (_a = expr(aa, cconfig.fieldId ? aa === null || aa === void 0 ? void 0 : aa[cconfig.fieldId] : null)) !== null && _a !== void 0 ? _a : null, b = (_b = expr(bb, cconfig.fieldId ? bb === null || bb === void 0 ? void 0 : bb[cconfig.fieldId] : null)) !== null && _b !== void 0 ? _b : null;
-                        // Default nil to '' here because A < null < z which is weird.
-                        return typeof a === "string"
-                            ? a.localeCompare(b !== null && b !== void 0 ? b : "")
-                            : typeof b === "string"
-                                ? -b.localeCompare(a !== null && a !== void 0 ? a : "")
-                                : a - b;
-                    });
-                })()
-            : filtered;
-        var reversed = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.order) === "descend" ? sorted === null || sorted === void 0 ? void 0 : sorted.reverse() : sorted;
-        return reversed;
-    }, [data, columns, sortState, search]);
-    return {
-        finalData: finalData,
-        search: search,
-        setSearch: setSearch,
-        setSortState: setSortState,
-    };
-}
 function useRowSelectionProps(data, props) {
     var canSelectRows = props.canSelectRows, selectedRowKey = props.selectedRowKey, onRowSelectionChanged = props.onRowSelectionChanged, rowKey = props.rowKey, onRowClick = props.onRowClick;
     var deriveSelectedRowKeys = function () {
@@ -1521,16 +1622,9 @@ function useRowSelectionProps(data, props) {
         onRow: function (row) { return ({
             onClick: function (event) {
                 var key = deriveKeyOfRow(row, deriveRowKey(data, rowKey));
-                if (key != null) {
+                if (key != null && !isInteractable(event.target)) {
                     if (canSelectRows === "click") {
-                        // Some heuristics to avoid selecting a row when
-                        // the object clicked is interactable -- like button, anchor,
-                        // input, etc.  This won't be bulletproof, so just some
-                        // heuristics!
-                        var target = event.target;
-                        if (!isInteractable(target)) {
-                            onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged([key], [row]);
-                        }
+                        onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged([key], [row]);
                     }
                     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(key, row, event);
                 }
@@ -1538,15 +1632,6 @@ function useRowSelectionProps(data, props) {
         }); },
     };
 }
-function isInteractable(target) {
-    if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
-        return true;
-    }
-    if (target.contentEditable === "true") {
-        return true;
-    }
-    return false;
-}
 function ExportMenu(props) {
     var _this = this;
     var data = props.data;
@@ -1610,6 +1695,101 @@ function ExportMenu(props) {
             React.createElement(EllipsisOutlined, null))));
 }
 
+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: function (item) { return 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: function (_ps, _ctx, _a) {
+                        var item = _a.item;
+                        return item.type !== "menu";
+                    },
+                },
+                onClick: {
+                    type: "eventHandler",
+                    displayName: "Action",
+                    argTypes: [
+                        { name: "rowKey", type: "string" },
+                        { name: "row", type: "object" },
+                    ],
+                    hidden: function (_ps, _ctx, _a) {
+                        var item = _a.item;
+                        return 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 tableHelpers = {
     states: {
         selectedRow: {
@@ -1637,13 +1817,7 @@ var dataTableMeta = {
         padding: "16px",
         maxHeight: "100%",
     },
-    props: {
-        data: {
-            type: "dataSourceOpData",
-            description: "The data to display in the table",
-        },
-        fields: buildFieldsPropType({}),
-        canSelectRows: {
+    props: __assign(__assign({ data: dataProp(), fields: buildFieldsPropType({}), canSelectRows: {
             type: "choice",
             displayName: "Select rows?",
             options: [
@@ -1654,8 +1828,7 @@ var dataTableMeta = {
             ],
             defaultValueHint: "none",
             description: "Lets user select table rows by clicking on a row, or using radio buttons, or checkboxes if multiple rows can be selected together. If you have interactive elements in your row and you don't want clicking on them to select the row, you may use radio buttons instead.",
-        },
-        rowKey: {
+        }, rowKey: {
             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",
@@ -1664,93 +1837,24 @@ var dataTableMeta = {
                 var derivedRowKey = deriveRowKey(ps.data, ps.rowKey);
                 return derivedRowKey !== undefined ? "".concat(derivedRowKey) : undefined;
             },
-        },
-        selectedRowKey: {
+        }, selectedRowKey: {
             type: "string",
             displayName: "Selected Row Key",
             hidden: function (ps) { return ps.canSelectRows !== "single"; },
             advanced: true,
-        },
-        selectedRowKeys: {
+        }, selectedRowKeys: {
             type: "array",
             displayName: "Selected Row Keys",
             hidden: function (ps) { return ps.canSelectRows !== "multiple"; },
             advanced: true,
-        },
-        onRowSelectionChanged: {
+        }, onRowSelectionChanged: {
             type: "eventHandler",
             displayName: "On row selection changed",
             argTypes: [
                 { name: "rowKeys", type: "object" },
                 { name: "rows", type: "object" },
             ],
-        },
-        onRowClick: {
-            type: "eventHandler",
-            displayName: "On row clicked",
-            argTypes: [
-                { name: "rowKey", type: "string" },
-                { name: "row", type: "object" },
-                { name: "event", type: "object" },
-            ],
-        },
-        rowActions: {
-            type: "array",
-            displayName: "Row actions",
-            advanced: true,
-            itemType: {
-                type: "object",
-                nameFunc: function (item) { return 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: function (ps, ctx, _a) {
-                            var item = _a.item;
-                            return item.type !== "menu";
-                        },
-                    },
-                    onClick: {
-                        type: "eventHandler",
-                        displayName: "Action",
-                        argTypes: [
-                            { name: "rowKey", type: "string" },
-                            { name: "row", type: "object" },
-                        ],
-                        hidden: function (ps, ctx, _a) {
-                            var item = _a.item;
-                            return item.type !== "item";
-                        },
-                    },
-                },
-            },
-        },
-        defaultSize: {
+        }, onRowClick: onRowClickProp(), rowActions: rowActionsProp(), defaultSize: {
             displayName: "Density",
             type: "choice",
             options: [
@@ -1769,54 +1873,32 @@ var dataTableMeta = {
             ],
             defaultValueHint: "large",
             advanced: true,
-        },
-        pageSize: {
-            type: "number",
-            defaultValueHint: 10,
-            advanced: true,
-        },
-        pagination: {
-            type: "boolean",
-            advanced: true,
-            defaultValueHint: true,
-        },
-        hideSearch: {
-            type: "boolean",
-            description: "Hides the search toolbar",
-            advanced: true,
-        },
-        hideExports: {
+        } }, commonProps()), { hideExports: {
             type: "boolean",
             description: "Hides the button for exporting table data to CSV",
             advanced: true,
-        },
-        hideDensity: {
+        }, hideDensity: {
             type: "boolean",
             description: "Hides the control for changing the density of the table",
             advanced: true,
             defaultValueHint: true,
-        },
-        hideColumnPicker: {
+        }, hideColumnPicker: {
             type: "boolean",
             description: "Hides the control for reordering and pinning columns",
             advanced: true,
-        },
-        hideSelectionBar: {
+        }, hideSelectionBar: {
             type: "boolean",
             description: "Hides the toolbar that allows the user to clear selection",
             advanced: true,
             hidden: function (ps) { return !ps.canSelectRows || ps.canSelectRows === "none"; },
             defaultValueHint: true,
-        },
-        scopeClassName: {
+        }, scopeClassName: {
             type: "styleScopeClass",
             scopeName: "instance",
-        },
-        themeResetClassName: {
+        }, themeResetClassName: {
             type: "themeResetClass",
             targetAllTags: true,
-        },
-    },
+        } }),
     states: {
         selectedRowKey: __assign({ type: "writable", valueProp: "selectedRowKey", onChangeProp: "onRowSelectionChanged", variableType: "text" }, tableHelpers.states.selectedRowKey),
         selectedRow: __assign({ type: "readonly", onChangeProp: "onRowSelectionChanged", variableType: "object" }, tableHelpers.states.selectedRow),
@@ -1834,11 +1916,311 @@ function registerRichTable(loader) {
     registerComponentHelper(loader, RichTable, dataTableMeta);
 }
 
+// Should really be using token colorFillTertiary instead of #8881.
+var listCss = "\n.plasmic-list--grid .ant-list-items {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 16px;\n}\n\n.plasmic-list-search {\n  /* Matches RichTable search. */\n  max-width: 200px;\n  margin-bottom: 8px;\n}\n\n.plasmic-list-item-content--unbordered {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.plasmic-list-item--clickable:hover {\n  background-color: #8881;\n}\n\n.plasmic-list-item-image {\n  max-width: 80px;\n  max-height: 80px;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n  border-radius: 8px;\n}\n\n/* Unsure why needed, but cards otherwise can be much narrower. */\n.plasmic-list-item-card {\n  width: 100%;\n}\n\n.plasmic-list-item-card-cover {\n  max-height: 300px;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n}\n";
+function RichList(props) {
+    var _a = props.data, rawData = _a === void 0 ? {
+        data: [],
+        schema: {
+            id: "inferred",
+            fields: [
+                {
+                    id: "id",
+                    type: "string",
+                    readOnly: false,
+                },
+            ],
+        },
+    } : _a, _b = props.type, type = _b === void 0 ? "list" : _b, _c = props.bordered, bordered = _c === void 0 ? true : _c, className = props.className, size = props.size, header = props.header, footer = props.footer, _d = props.rowActions, rowActions = _d === void 0 ? [] : _d; props.title; var _e = props.pageSize, pageSize = _e === void 0 ? 10 : _e, hideSearch = props.hideSearch, rowKey = props.rowKey, pagination = props.pagination, onRowClick = props.onRowClick; __rest(props, ["data", "type", "bordered", "className", "size", "header", "footer", "rowActions", "title", "pageSize", "hideSearch", "rowKey", "pagination", "onRowClick"]);
+    var data = normalizeData(rawData);
+    var _f = useRoleDefinitions(data, props), normalized = _f.normalized, roleConfigs = _f.finalRoles;
+    useRef();
+    var _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch; _g.setSortState;
+    var actuallyBordered = type === "list" ? bordered : false;
+    return (React.createElement("div", { className: className },
+        React.createElement("style", null, listCss),
+        !hideSearch && (React.createElement(Input.Search, { className: "plasmic-list-search", onChange: function (e) { return setSearch(e.target.value); }, value: search, placeholder: "Search" })),
+        React.createElement(List, { className: classNames({
+                // We use CSS grid instead of the built-in Ant grid which can only define fixed # columns, and only at screen (and not container) breakpoints.
+                "plasmic-list--grid": type === "grid",
+            }), size: size, header: header, footer: footer, dataSource: finalData, itemLayout: "horizontal", bordered: actuallyBordered, pagination: pagination
+                ? {
+                    pageSize: pageSize,
+                    showSizeChanger: false,
+                }
+                : false, renderItem: function (record, index) {
+                var _a;
+                // Currently, actions are nested inside the list item / card, so can't have both linkTo and actions or else hydration error.
+                // Eventually can fork the Ant components to make the main linkTo area and actions not nest.
+                var actions = renderActions(rowActions, record, data, rowKey);
+                // actions={[
+                //   <SettingOutlined key="setting" />,
+                //   <EditOutlined key="edit" />,
+                //   <EllipsisOutlined key="ellipsis" />,
+                // ]}
+                var image = maybe(maybeRenderString(record, (_a = roleConfigs.image) === null || _a === void 0 ? void 0 : _a[0]), function (src) { return (React.createElement("img", { src: src, className: type === "list"
+                        ? "plasmic-list-item-image"
+                        : "plasmic-list-item-card-cover" })); });
+                var content = (React.createElement(ListItemContent, { bordered: actuallyBordered, image: type === "list" ? image : undefined, title: multiRenderValue(record, roleConfigs.title), subtitle: multiRenderValue(record, roleConfigs.subtitle), beforeTitle: multiRenderValue(record, roleConfigs.beforeTitle), afterTitle: multiRenderValue(record, roleConfigs.afterTitle), content: multiRenderValue(record, roleConfigs.content) }));
+                function makeLinkWrapper() {
+                    var _a;
+                    if ((actions !== null && actions !== void 0 ? actions : []).length > 0)
+                        return undefined;
+                    var href = maybeRenderString(record, (_a = roleConfigs.linkTo) === null || _a === void 0 ? void 0 : _a[0]);
+                    if (!href && !onRowClick)
+                        return undefined;
+                    var _linkWrapper = function (x) { return (React.createElement("a", { href: href, onClick: function (event) {
+                            var key = deriveKeyOfRow(record, deriveRowKey(data, rowKey));
+                            if (key != null &&
+                                !isInteractable(event.target)) {
+                                onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(key, record, event);
+                            }
+                        } }, x)); };
+                    return _linkWrapper;
+                }
+                var linkWrapper = makeLinkWrapper();
+                var hasLink = !!linkWrapper;
+                function maybeLink(x) {
+                    var _a;
+                    return (_a = linkWrapper === null || linkWrapper === void 0 ? void 0 : linkWrapper(x)) !== null && _a !== void 0 ? _a : x;
+                }
+                return type === "grid" ? (React.createElement(List.Item, null, maybeLink(React.createElement(Card, { className: "plasmic-list-item-card", size: "small", cover: image, hoverable: hasLink, actions: actions }, content)))) : (maybeLink(React.createElement(List.Item, { actions: actions, className: classNames({
+                        "plasmic-list-item--clickable": hasLink,
+                    }) }, content)));
+            } })));
+}
+function ListItemContent(_a) {
+    var className = _a.className, title = _a.title, subtitle = _a.subtitle, image = _a.image, beforeTitle = _a.beforeTitle, afterTitle = _a.afterTitle, content = _a.content, bordered = _a.bordered, others = __rest(_a, ["className", "title", "subtitle", "image", "beforeTitle", "afterTitle", "content", "bordered"]);
+    var prefixCls = "ant-list";
+    var classString = classNames("".concat(prefixCls, "-item-meta"), className);
+    return (React.createElement("div", __assign({}, others, { className: classNames({
+            "plasmic-list-item-content--unbordered": !bordered,
+        }, classString) }),
+        image && React.createElement("div", { className: "".concat(prefixCls, "-item-meta-avatar") }, image),
+        React.createElement("div", { className: "".concat(prefixCls, "-item-meta-content"), style: { display: "flex", flexDirection: "column", gap: 4 } },
+            beforeTitle && (React.createElement("div", null,
+                React.createElement(Tag, null, beforeTitle))),
+            React.createElement("div", { style: { display: "flex", gap: 8 } },
+                title && (React.createElement("h4", { className: "".concat(prefixCls, "-item-meta-title"), style: { margin: 0 } }, title)),
+                afterTitle && (React.createElement("div", { className: "".concat(prefixCls, "-item-meta-description") }, afterTitle))),
+            subtitle && (React.createElement("div", { className: "".concat(prefixCls, "-item-meta-description") }, subtitle)),
+            content && React.createElement("div", null, content))));
+}
+var defaultColumnConfig = function () {
+    return ({
+        key: mkShortId(),
+        isEditableExpr: function () { return false; },
+        disableSorting: false,
+        sortByExpr: undefined,
+        isHidden: false,
+        formatting: {
+            styles: {},
+            align: "left",
+            freeze: "off",
+        },
+        dataType: "auto",
+        role: undefined,
+    });
+};
+var roles = [
+    "linkTo",
+    "content",
+    "title",
+    "subtitle",
+    "beforeTitle",
+    "afterTitle",
+    "image",
+    "unset",
+];
+// This component is different from Table/Details since it has various different roles, so the UX is one of setting the choices for each role rather than a single list of fields.
+//
+// We first infer the defaults for each role.
+// This we always need to do because we want the choices to be 'stable'.
+// If the user sets one of the roles, without setting the others, we don't want to shift things around on the other roles as a result.
+// So the defaults need to always be there (they would only be irrelevant if all roles that would have had defaults were set/overridden by the user).
+//
+// Then, we layer on the user role choices.
+//
+// One UX wart is that unsetting a role will restore the default selection instead of clearing it.
+// User must know to actually set fieldId to none or (for arrays) remove the item.
+// Just another reason to fill in few roles by default.
+function useRoleDefinitions(data, props) {
+    var fields = props.fields, setControlContextData = props.setControlContextData, rowActions = props.rowActions;
+    return React.useMemo(function () {
+        var _a, _b, _c, _d;
+        var schema = data === null || data === void 0 ? void 0 : data.schema;
+        var schemaMap = new Map((_a = data === null || data === void 0 ? void 0 : data.schema) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return [f.id, f]; }));
+        if (!data || !schema) {
+            return { normalized: [], roleConfigs: {}, finalRoles: {} };
+        }
+        function tagFieldConfigs(role) {
+            var _a;
+            if (role !== "unset") {
+                return ensureArray((_a = props[role]) !== null && _a !== void 0 ? _a : []).map(function (field) {
+                    return __assign(__assign({}, field), { role: role });
+                });
+            }
+            else {
+                return [];
+            }
+        }
+        // This is only being computed to get the default role choices.
+        var _e = deriveFieldConfigs(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], tagFieldConfigs("image"), true), tagFieldConfigs("content"), true), tagFieldConfigs("title"), true), tagFieldConfigs("beforeTitle"), true), tagFieldConfigs("afterTitle"), true), tagFieldConfigs("subtitle"), true), tagFieldConfigs("linkTo"), true), schema, function (field) { return (__assign(__assign({}, defaultColumnConfig()), (field && {
+            key: field.id,
+            fieldId: field.id,
+            title: field.label || field.id,
+            // undefined means not yet determined in this routine, not 'unset'
+            role: undefined,
+            expr: function (currentItem) { return currentItem[field.id]; },
+        }))); }), mergedFields = _e.mergedFields, minimalFullLengthFields = _e.minimalFullLengthFields;
+        var normalized = mergedFields;
+        // Find a good default image field.
+        // Filter mergedFields where there are mostly values (in the sampleRows) that are a string that looks like a URL or path to an image file.
+        // Of these, prefer the one with a name like image, picture, pic, img, avatar, profile, photo, icon.
+        // Otherwise, prefer the one with a title with that substring.
+        // Otherwise, pick any remaining one.
+        if (data.data.length > 0 &&
+            !mergedFields.some(function (field) { return field.role === "image"; })) {
+            var sampleRows_1 = Array.from(new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (i) {
+                return Math.round((i / 9) * (data.data.length - 1));
+            }))).map(function (i) { return data.data[i]; });
+            var imageFieldCandidates = mergedFields.filter(function (field) {
+                return !field.role &&
+                    sampleRows_1.filter(function (row) { return field.fieldId && isLikeImage(row[field.fieldId]); }).length >=
+                        sampleRows_1.length / 2;
+            });
+            var imageField = (_c = (_b = imageFieldCandidates.find(function (f) {
+                var _a;
+                return (_a = f.fieldId) === null || _a === void 0 ? void 0 : _a.match(/^(image|picture|pic|img|avatar|profile|photo|icon)$/i);
+            })) !== null && _b !== void 0 ? _b : imageFieldCandidates.find(function (f) {
+                var _a;
+                return (_a = f.fieldId) === null || _a === void 0 ? void 0 : _a.match(/.*(image|picture|pic|img|avatar|profile|photo|icon).*/i);
+            })) !== null && _c !== void 0 ? _c : imageFieldCandidates[0];
+            if (imageField) {
+                imageField.role = "image";
+            }
+        }
+        // Find a good default title field, just based on the field name.
+        if (!mergedFields.some(function (field) { return field.role === "title"; })) {
+            var titleField = mergedFields.find(function (field) {
+                var _a;
+                return !field.role &&
+                    ((_a = field.fieldId) === null || _a === void 0 ? void 0 : _a.toLowerCase().match(/^(title|name|first[ _-]?name|full[ _-]?name)$/));
+            });
+            if (titleField) {
+                titleField.role = "title";
+            }
+        }
+        // Find a good default content field - just any remaining text field.
+        if (!mergedFields.some(function (field) { return field.role === "content"; })) {
+            var contentField = mergedFields.find(function (field) {
+                var _a;
+                return !field.role &&
+                    field.fieldId &&
+                    ((_a = schemaMap.get(field.fieldId)) === null || _a === void 0 ? void 0 : _a.type) === "string";
+            });
+            if (contentField) {
+                contentField.role = "content";
+            }
+        }
+        var roleConfigs = ensure(groupBy(mergedFields, function (f) { return f.role; }));
+        var finalRoles = {};
+        for (var _i = 0, roles_1 = roles; _i < roles_1.length; _i++) {
+            var role = roles_1[_i];
+            if (role !== "unset") {
+                finalRoles[role] = (_d = maybe(props[role], ensureArray)) !== null && _d !== void 0 ? _d : roleConfigs[role];
+            }
+        }
+        var fieldIdToRole = new Map(mergedFields.map(function (f) { return [f.fieldId, f.role]; }));
+        for (var _f = 0, minimalFullLengthFields_1 = minimalFullLengthFields; _f < minimalFullLengthFields_1.length; _f++) {
+            var f = minimalFullLengthFields_1[_f];
+            f.role = fieldIdToRole.get(f.fieldId);
+        }
+        setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
+        return { normalized: normalized, roleConfigs: roleConfigs, finalRoles: finalRoles };
+    }, [fields, data, setControlContextData, rowActions]);
+}
+
+function roleProp(_a) {
+    var role = _a.role, _b = _a.singular, singular = _b === void 0 ? false : _b, _c = _a.advanced, advanced = _c === void 0 ? false : _c, displayName = _a.displayName;
+    return singular
+        ? {
+            type: "object",
+            displayName: displayName,
+            advanced: advanced,
+            hidden: function (ps) { return !ps.data; },
+            nameFunc: function (item) {
+                return maybe(item, function (i) {
+                    return i.isHidden ? "Hidden" : i.fieldId || "Custom value";
+                });
+            },
+            fields: getFieldSubprops({
+                canChangeField: true,
+                noTitle: true,
+            }),
+            defaultValueHint: function (_props, contextData) {
+                var _a;
+                return ((_a = contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields) !== null && _a !== void 0 ? _a : []).find(function (f) { return f.role === role; });
+            },
+        }
+        : buildFieldsPropType({
+            displayName: displayName,
+            advanced: advanced,
+            noTitle: true,
+            canChangeField: true,
+            minimalValue: function (_props, contextData) {
+                var _a;
+                return ((_a = contextData === null || contextData === void 0 ? void 0 : contextData.minimalFullLengthFields) !== null && _a !== void 0 ? _a : []).filter(function (f) { return f.role === role; });
+            },
+        });
+}
+var richListMeta = {
+    name: "hostless-rich-list",
+    displayName: "Data List",
+    defaultStyles: {
+        width: "stretch",
+        padding: "16px",
+        maxHeight: "100%",
+    },
+    props: __assign({ data: dataProp(), type: {
+            type: "choice",
+            options: [
+                { value: "list", label: "List" },
+                { value: "grid", label: "Grid" },
+            ],
+            defaultValueHint: "list",
+        }, header: {
+            type: "slot",
+            hidePlaceholder: true,
+        }, footer: {
+            type: "slot",
+            hidePlaceholder: true,
+        }, title: roleProp({ role: "title" }), content: roleProp({ role: "content" }), image: roleProp({ role: "image", singular: true }), linkTo: roleProp({ role: "linkTo", singular: true }), subtitle: roleProp({
+            role: "subtitle",
+            displayName: "Subtitle",
+            advanced: true,
+        }), 
+        // Haven't styled these yet!
+        // beforeTitle: roleProp({ role: "beforeTitle", advanced: true }),
+        // afterTitle: roleProp({ role: "afterTitle", advanced: true }),
+        onRowClick: onRowClickProp(), rowActions: rowActionsProp(), bordered: {
+            type: "boolean",
+            defaultValue: true,
+            hidden: function (ps) { var _a; return ((_a = ps.type) !== null && _a !== void 0 ? _a : "list") !== "list"; },
+        } }, commonProps()),
+    importName: "RichList",
+    importPath: "@plasmicpkgs/plasmic-rich-components",
+};
+function registerRichList(loader) {
+    registerComponentHelper(loader, RichList, richListMeta);
+}
+
 function registerAll(loader) {
     registerRichLayout(loader);
+    registerRichList(loader);
     registerRichTable(loader);
     registerRichDetails(loader);
 }
 
-export { RichDetails, RichLayout, RichTable, registerAll, tableHelpers };
+export { RichDetails, RichLayout, RichList, RichTable, commonProps, dataProp, deriveKeyOfRow, deriveRowKey, ensureArray, isInteractable, isLikeImage, onRowClickProp, registerAll, renderActions, rowActionsProp, tableHelpers, useSortedFilteredData };
 //# sourceMappingURL=plasmic-rich-components.esm.js.map