@plasmicpkgs/plasmic-rich-components 1.0.75 → 1.0.76

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

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
+import { ProDescriptions, ProLayout, ProTable, TableDropdown } from '@ant-design/pro-components';
+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox, Switch, Empty, Dropdown, Button } from 'antd';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
-import { ProLayout, ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Dropdown, Button } from 'antd';
-import { DataProvider } from '@plasmicapp/host';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 
@@ -94,6 +93,843 @@ function __spreadArray(to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 }
 
+function registerComponentHelper(loader, component, meta) {
+    if (loader) {
+        loader.registerComponent(component, meta);
+    }
+    else {
+        registerComponent(component, meta);
+    }
+}
+function isOneOf(elem, arr) {
+    return arr.includes(elem);
+}
+
+var tuple = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args;
+};
+function mkIdMap(xs) {
+    return new Map(xs.map(function (x) { return tuple(x.id, x); }));
+}
+var mkShortId = function () { return "".concat(Math.random()); };
+function withoutNils(xs) {
+    return xs.filter(function (x) { return x != null; });
+}
+var DEFAULT_CURRENCY_SETTINGS = {
+    dataType: "currency",
+    currency: "USD",
+    currencyDisplay: "narrowSymbol",
+};
+var NUMBER_TYPES = ["number", "percent", "currency"];
+var DEFAULT_DATETIME_SETTINGS = {
+    dataType: "datetime",
+    locale: "en-US",
+    dateStyle: "short",
+    timeStyle: "short",
+    hour12: true,
+};
+var DEFAULT_RELATIVE_DATETIME_SETTINGS = {
+    dataType: "relative-datetime",
+    locale: "en-US",
+    numeric: "always",
+    style: "long",
+    unit: "day",
+};
+var DATETIME_TYPES = ["datetime", "relative-datetime"];
+var DEFAULT_BOOLEAN_SETTINGS = {
+    dataType: "boolean",
+    showAs: "checkbox",
+};
+function deriveFieldConfigs(specifiedFieldsPartial, schema, makeDefaultConfig) {
+    var _a;
+    var schemaFields = (_a = schema === null || schema === void 0 ? void 0 : schema.fields) !== null && _a !== void 0 ? _a : [];
+    var fieldById = mkIdMap(schemaFields);
+    var specifiedFieldIds = new Set(withoutNils(specifiedFieldsPartial.map(function (f) { return f.fieldId; })));
+    var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f, index) {
+        var fieldId = f.fieldId;
+        if (!fieldId) {
+            return [
+                __assign(__assign(__assign({}, makeDefaultConfig(undefined)), { key: index }), f),
+            ];
+        }
+        var field = fieldById.get(fieldId);
+        // Drop configs with fieldIds no longer in the data.
+        if (!field) {
+            return [];
+        }
+        return [
+            __assign(__assign({}, makeDefaultConfig(field)), f),
+        ];
+    });
+    var newVirtualFields = schemaFields
+        .filter(function (f) { return !specifiedFieldIds.has(f.id); })
+        .map(function (f) { return (__assign({}, makeDefaultConfig(f))); });
+    var mergedFields = __spreadArray(__spreadArray([], keptSpecifiedFields, true), newVirtualFields, true);
+    var minimalFullLengthFields = __spreadArray(__spreadArray([], specifiedFieldsPartial, true), newVirtualFields.map(function (f) { return ({ key: f.key, fieldId: f.fieldId }); }), true);
+    return { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields };
+}
+function deriveValueType(cconfig) {
+    return cconfig.dataType === "auto"
+        ? undefined
+        : cconfig.dataType === "string"
+            ? "text"
+            : cconfig.dataType === "number"
+                ? "digit"
+                : cconfig.dataType === "boolean"
+                    ? "switch"
+                    : undefined;
+}
+function buildFieldsPropType(opts) {
+    function getDefaultValueHint(field) {
+        return function (_item, contextData) {
+            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) {
+                var _a;
+                var row = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _a === void 0 ? void 0 : _a[0];
+                var cell = _props.fieldId ? row === null || row === void 0 ? void 0 : row[_props.fieldId] : undefined;
+                return [row, cell];
+            },
+        });
+    };
+    return {
+        type: "array",
+        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__canDelete: function (ps, _props, ctx, _a) {
+            var item = _a.item;
+            if (!(ctx === null || ctx === void 0 ? void 0 : ctx.schema)) {
+                // still loading...
+                return false;
+            }
+            if (item.fieldId &&
+                ctx.schema.fields.some(function (f) { return f.id === item.fieldId; })) {
+                return false;
+            }
+            return true;
+        },
+        itemType: {
+            type: "object",
+            nameFunc: function (_item) {
+                var _a;
+                return (_a = _item.title) !== null && _a !== void 0 ? _a : _item.fieldId;
+            },
+            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 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),
+        },
+    };
+}
+
+function normalizeData(rawData) {
+    var _a;
+    if (!rawData) {
+        return undefined;
+    }
+    var dataArray = tryGetDataArray(rawData);
+    if (!dataArray) {
+        return undefined;
+    }
+    var schema = (_a = rawData.schema) !== null && _a !== void 0 ? _a : tryGetSchema(dataArray);
+    if (!schema) {
+        return undefined;
+    }
+    return { data: dataArray, schema: schema };
+}
+function tryGetDataArray(rawData) {
+    if (!rawData || typeof rawData !== "object") {
+        return undefined;
+    }
+    if (Array.isArray(rawData)) {
+        if (isArrayOfObjects(rawData)) {
+            return rawData;
+        }
+        else {
+            // TODO: array of primitives? Maybe we can wrap this?
+            return undefined;
+        }
+    }
+    if ("data" in rawData && Array.isArray(rawData.data)) {
+        if (isArrayOfObjects(rawData.data)) {
+            return rawData.data;
+        }
+        else {
+            return undefined;
+        }
+    }
+    if ("isLoading" in rawData || "error" in rawData) {
+        return undefined;
+    }
+    // Maybe a singleton record?
+    return [rawData];
+}
+function isArrayOfObjects(arr) {
+    return arr.every(function (x) { return typeof x === "object" && !Array.isArray(x); });
+}
+function tryGetSchema(data) {
+    var fieldMap = {};
+    data.forEach(function (entry) {
+        if (entry && typeof entry === "object") {
+            Array.from(Object.entries(entry)).forEach(function (_a) {
+                var k = _a[0], v = _a[1];
+                var inferredType = typeof v === "string"
+                    ? "string"
+                    : typeof v === "boolean"
+                        ? "boolean"
+                        : typeof v === "number"
+                            ? "number"
+                            : "unknown";
+                if (fieldMap[k] && fieldMap[k] !== inferredType) {
+                    fieldMap[k] = "unknown";
+                }
+                else {
+                    fieldMap[k] = inferredType;
+                }
+            });
+        }
+    });
+    return {
+        id: "inferred",
+        fields: Object.entries(fieldMap).map(function (_a) {
+            var f = _a[0], t = _a[1];
+            return ({
+                id: f,
+                type: t,
+                readOnly: false,
+            });
+        }),
+    };
+}
+
+function renderValue(value, record, cconfig) {
+    if (cconfig.expr) {
+        value = cconfig.expr(record, value);
+    }
+    if (value == null) {
+        return "";
+    }
+    if (cconfig.dataType === "auto") {
+        return renderAuto(value);
+    }
+    else {
+        var coerced = coerceValue(value, cconfig.dataType);
+        if (isOneOf(cconfig.dataType, NUMBER_TYPES) &&
+            typeof coerced === "number") {
+            return renderNumber(coerced, cconfig);
+        }
+        else if (cconfig.dataType === "boolean" && typeof coerced === "boolean") {
+            return renderBoolean(coerced, cconfig);
+        }
+        else if (cconfig.dataType === "datetime" && coerced instanceof Date) {
+            return renderDate(coerced, cconfig);
+        }
+        else if (cconfig.dataType === "relative-datetime" &&
+            coerced instanceof Date) {
+            return renderRelativeDate(coerced, cconfig);
+        }
+        return asString(value);
+    }
+}
+function renderAuto(value) {
+    if (typeof value === "number") {
+        return renderNumber(value, { dataType: "number" });
+    }
+    else if (typeof value === "boolean") {
+        return renderBoolean(value, DEFAULT_BOOLEAN_SETTINGS);
+    }
+    else if (value instanceof Date) {
+        return renderDate(value, DEFAULT_DATETIME_SETTINGS);
+    }
+    else {
+        var coerced = tryCoerceAuto(value);
+        if (coerced === CANNOT_COERCE) {
+            return asString(value);
+        }
+        else {
+            return renderAuto(coerced);
+        }
+    }
+}
+function tryCoerceAuto(value) {
+    for (var _i = 0, _a = [
+        "number",
+        "datetime",
+    ]; _i < _a.length; _i++) {
+        var dataType = _a[_i];
+        var coerced = coerceValue(value, dataType);
+        if (coerced !== CANNOT_COERCE) {
+            return coerced;
+        }
+    }
+    return CANNOT_COERCE;
+}
+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, __assign(__assign({}, cconfig), { style: "percent" })).format(value);
+    }
+    else if (cconfig.dataType === "currency") {
+        return new Intl.NumberFormat(cconfig.locale, __assign(__assign(__assign({}, DEFAULT_CURRENCY_SETTINGS), cconfig), { style: "currency" })).format(value);
+    }
+    else {
+        throw new Error("Unexpected dataType ".concat(cconfig.dataType));
+    }
+}
+function renderDate(value, cconfig) {
+    var opts = __assign(__assign({}, DEFAULT_DATETIME_SETTINGS), cconfig);
+    if (opts.dateStyle === "none") {
+        delete opts["dateStyle"];
+    }
+    if (opts.timeStyle === "none") {
+        delete opts["timeStyle"];
+    }
+    return new Intl.DateTimeFormat(cconfig.locale, opts).format(value);
+}
+var SECOND_MS = 1000;
+var MINUTE_MS = 60 * SECOND_MS;
+var HOUR_MS = 60 * MINUTE_MS;
+var DAY_MS = 24 * HOUR_MS;
+var WEEK_MS = 7 * DAY_MS;
+var UNIT_TO_MS = {
+    second: SECOND_MS,
+    minute: MINUTE_MS,
+    hour: HOUR_MS,
+    day: DAY_MS,
+    week: WEEK_MS,
+};
+var UNITS_BY_MS = Object.keys(UNIT_TO_MS);
+function renderRelativeDate(value, cconfig) {
+    var _a;
+    var opts = __assign(__assign({}, DEFAULT_RELATIVE_DATETIME_SETTINGS), cconfig);
+    var unit = (_a = cconfig.unit) !== null && _a !== void 0 ? _a : "day";
+    var formatter = new Intl.RelativeTimeFormat(cconfig.locale, opts);
+    if (isOneOf(unit, UNITS_BY_MS)) {
+        // for "exact" units, we can do it by just calcluating the difference
+        // by ms
+        var diff = value.getTime() - new Date().getTime();
+        return formatter.format(Math.round(diff / UNIT_TO_MS[unit]), unit);
+    }
+    else {
+        // otherwise we need to calculate by the specific unit
+        if (unit === "year") {
+            var diff = value.getFullYear() - new Date().getFullYear();
+            return formatter.format(diff, unit);
+        }
+        else if (unit === "month") {
+            var months = function (d) { return d.getFullYear() * 12 + d.getMonth() + 1; };
+            var diff = months(value) - months(new Date());
+            return formatter.format(diff, unit);
+        }
+        else {
+            throw new Error("Unexpected relative time unit ".concat(unit));
+        }
+    }
+}
+function renderBoolean(value, cconfig) {
+    var _a;
+    var showAs = (_a = cconfig.showAs) !== null && _a !== void 0 ? _a : DEFAULT_BOOLEAN_SETTINGS.showAs;
+    if (showAs === "checkbox") {
+        return React.createElement(Checkbox, { checked: value });
+    }
+    else if (showAs === "switch") {
+        return React.createElement(Switch, { checked: value });
+    }
+    else {
+        return value ? "true" : "false";
+    }
+}
+var CANNOT_COERCE = Symbol("plasmic-cannot-coerce");
+function coerceValue(value, dataType) {
+    if (value == null) {
+        return null;
+    }
+    try {
+        if (isOneOf(dataType, NUMBER_TYPES)) {
+            if (typeof value === "number") {
+                return value;
+            }
+            else if (typeof value === "string") {
+                var maybeNumber = +value;
+                if (!isNaN(maybeNumber)) {
+                    return maybeNumber;
+                }
+            }
+        }
+        else if (isOneOf(dataType, DATETIME_TYPES)) {
+            if (value instanceof Date) {
+                return value;
+            }
+            else if (typeof value === "number") {
+                return new Date(value);
+            }
+            else if (typeof value === "string") {
+                var maybeDate = new Date(value);
+                if (!isNaN(maybeDate.getTime())) {
+                    return maybeDate;
+                }
+            }
+        }
+        else if (dataType === "boolean") {
+            if (value === true || value === false) {
+                return value;
+            }
+            else if (typeof value === "number") {
+                return value !== 0;
+            }
+            else if (typeof value === "string") {
+                return value.toLowerCase() === "true";
+            }
+        }
+        else if (dataType === "string") {
+            return asString(value);
+        }
+        else if (dataType === "auto") {
+            return value;
+        }
+    }
+    catch (err) {
+        // Ignore error; just fail to coerce
+    }
+    return CANNOT_COERCE;
+}
+function asString(value) {
+    if (value == null) {
+        return "";
+    }
+    else if (typeof value === "string") {
+        return value;
+    }
+    else if (typeof value === "object") {
+        if ("toString" in value && typeof value.toString === "function") {
+            return value.toString();
+        }
+        else {
+            return JSON.stringify(value);
+        }
+    }
+    else {
+        return "".concat(value);
+    }
+}
+
+function RichDetails(props) {
+    var _a;
+    var className = props.className, rawData = props.data, size = props.size, bordered = props.bordered, layout = props.layout, _b = props.column, column = _b === void 0 ? 2 : _b;
+    var data = normalizeData(rawData);
+    var columnDefinitions = useColumnDefinitions$1(data, props).columnDefinitions;
+    if (!data) {
+        return React.createElement(Empty, { className: className });
+    }
+    return (React.createElement(ProDescriptions, { className: className, dataSource: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a[0], columns: columnDefinitions, size: size, bordered: bordered, layout: layout, column: {
+            xs: 1,
+            sm: 1,
+            md: column,
+        } }));
+}
+function useColumnDefinitions$1(data, props) {
+    var fields = props.fields, setControlContextData = props.setControlContextData;
+    return React.useMemo(function () {
+        var schema = data === null || data === void 0 ? void 0 : data.schema;
+        if (!data || !schema) {
+            return { normalized: [], columnDefinitions: [] };
+        }
+        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign({ key: mkShortId(), isHidden: false, dataType: "auto" }, (field && {
+            key: field.id,
+            fieldId: field.id,
+            title: field.label || field.id,
+            expr: function (currentItem) { return currentItem[field.id]; },
+        }))); }), mergedFields = _a.mergedFields, minimalFullLengthFields = _a.minimalFullLengthFields;
+        setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
+        var normalized = mergedFields;
+        var columnDefinitions = normalized
+            .filter(function (cconfig) { return !cconfig.isHidden; })
+            .map(function (cconfig, _columnIndex, _columnsArray) {
+            var columnDefinition = {
+                dataIndex: cconfig.fieldId,
+                title: cconfig.title,
+                key: cconfig.key,
+                valueType: deriveValueType(cconfig),
+                span: cconfig.span,
+                // To come later
+                copyable: false,
+                ellipsis: false,
+                tip: undefined,
+                formItemProps: {
+                    rules: [],
+                },
+                valueEnum: undefined,
+                renderFormItem: function (_, _a) {
+                    var defaultRender = _a.defaultRender;
+                    return defaultRender(_);
+                },
+                render: function (value, record, rowIndex) {
+                    return renderValue(value, record, cconfig);
+                },
+            };
+            return columnDefinition;
+        });
+        return { normalized: normalized, columnDefinitions: columnDefinitions };
+    }, [fields, data, setControlContextData]);
+}
+
+function registerRichDetails(loader) {
+    registerComponentHelper(loader, RichDetails, {
+        name: "hostless-rich-details",
+        displayName: "Data details",
+        defaultStyles: {
+            width: "stretch",
+            maxHeight: "100%",
+        },
+        props: {
+            data: {
+                type: "dataSourceOpData",
+                description: "The data to display",
+            },
+            fields: buildFieldsPropType({
+                fieldTypes: {
+                    span: {
+                        type: "number",
+                        displayName: "Number of columns to span",
+                        defaultValueHint: 1,
+                    },
+                },
+            }),
+            layout: {
+                displayName: "Layout",
+                type: "choice",
+                options: [
+                    { value: "horizontal", label: "Horizontal" },
+                    { value: "vertical", label: "Vertical" },
+                ],
+                defaultValueHint: "horizontal",
+            },
+            column: {
+                displayName: "Items per row",
+                type: "number",
+                description: "Number of items to display per row",
+                defaultValueHint: 2,
+            },
+            size: {
+                displayName: "Spacing",
+                type: "choice",
+                options: [
+                    { value: "small", label: "Small" },
+                    { value: "middle", label: "Medium" },
+                    { value: "default", label: "Large" },
+                ],
+                defaultValueHint: "default",
+            },
+            bordered: {
+                displayName: "Show borders?",
+                type: "boolean",
+                defaultValueHint: false,
+            },
+        },
+        importPath: "@plasmicpkgs/plasmic-rich-components",
+        importName: "RichDetails",
+    });
+}
+
 function useIsClient() {
     var _a = useState(false), loaded = _a[0], setLoaded = _a[1];
     useEffect(function () {
@@ -105,15 +941,6 @@ function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
 
-function registerComponentHelper(loader, component, meta) {
-    if (loader) {
-        loader.registerComponent(component, meta);
-    }
-    else {
-        registerComponent(component, meta);
-    }
-}
-
 function RichLayout(_a) {
     var _b, _c, _d;
     var children = _a.children, navMenuItems = _a.navMenuItems, _e = _a.rootUrl, rootUrl = _e === void 0 ? "/" : _e, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className"]);
@@ -321,142 +1148,6 @@ function registerRichLayout(loader) {
     registerComponentHelper(loader, RichLayout, richLayoutMeta);
 }
 
-var tuple = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return args;
-};
-function mkIdMap(xs) {
-    return new Map(xs.map(function (x) { return tuple(x.id, x); }));
-}
-var mkShortId = function () { return "".concat(Math.random()); };
-var withoutNils = function (xs) {
-    return xs.filter(function (x) { return x != null; });
-};
-var defaultColumnConfig = function () {
-    return ({
-        key: mkShortId(),
-        isEditableExpr: function () { return false; },
-        disableSorting: false,
-        sortByExpr: undefined,
-        isHidden: false,
-        formatting: {
-            styles: {},
-            align: "left",
-            freeze: "off",
-        },
-        dataType: "auto",
-    });
-};
-function deriveFieldConfigs(specifiedFieldsPartial, schema) {
-    var _a;
-    var schemaFields = (_a = schema === null || schema === void 0 ? void 0 : schema.fields) !== null && _a !== void 0 ? _a : [];
-    var fieldById = mkIdMap(schemaFields);
-    var specifiedFieldIds = new Set(withoutNils(specifiedFieldsPartial.map(function (f) { return f.fieldId; })));
-    function defaultColumnConfigForField(field) {
-        return __assign(__assign({}, defaultColumnConfig()), { key: field.id, fieldId: field.id, title: field.label || field.id, expr: function (currentItem) { return currentItem[field.id]; } });
-    }
-    var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f, index) {
-        var fieldId = f.fieldId;
-        if (!fieldId) {
-            return [
-                __assign(__assign(__assign({}, defaultColumnConfig()), { key: index }), f),
-            ];
-        }
-        var field = fieldById.get(fieldId);
-        // Drop configs with fieldIds no longer in the data.
-        if (!field) {
-            return [];
-        }
-        return [
-            __assign(__assign({}, defaultColumnConfigForField(field)), f),
-        ];
-    });
-    var newVirtualFields = schemaFields
-        .filter(function (f) { return !specifiedFieldIds.has(f.id); })
-        .map(function (f) { return (__assign({}, defaultColumnConfigForField(f))); });
-    var mergedFields = __spreadArray(__spreadArray([], keptSpecifiedFields, true), newVirtualFields, true);
-    var minimalFullLengthFields = __spreadArray(__spreadArray([], specifiedFieldsPartial, true), newVirtualFields.map(function (f) { return ({ key: f.key, fieldId: f.fieldId }); }), true);
-    return { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields };
-}
-
-function tryGetSchema(data) {
-    if (data === null || data === void 0 ? void 0 : data.schema) {
-        return data.schema;
-    }
-    if (Array.isArray(data)) {
-        data = { data: data };
-    }
-    if (!(data === null || data === void 0 ? void 0 : data.data) || !Array.isArray(data.data) || data.data.length === 0) {
-        return undefined;
-    }
-    var fieldMap = {};
-    data.data.forEach(function (entry) {
-        if (entry && typeof entry === "object") {
-            Array.from(Object.entries(entry)).forEach(function (_a) {
-                var k = _a[0], v = _a[1];
-                var inferredType = typeof v === "string"
-                    ? "string"
-                    : typeof v === "boolean"
-                        ? "boolean"
-                        : typeof v === "number"
-                            ? "number"
-                            : "unknown";
-                if (fieldMap[k] && fieldMap[k] !== inferredType) {
-                    fieldMap[k] = "unknown";
-                }
-                else {
-                    fieldMap[k] = inferredType;
-                }
-            });
-        }
-    });
-    return {
-        id: "inferred",
-        fields: Object.entries(fieldMap).map(function (_a) {
-            var f = _a[0], t = _a[1];
-            return ({
-                id: f,
-                type: t,
-                readOnly: false,
-            });
-        }),
-    };
-}
-function normalizeData(rawData) {
-    if (!rawData || typeof rawData !== "object") {
-        return undefined;
-    }
-    var obj = Array.isArray(rawData) ? { data: rawData } : rawData;
-    if (!("data" in obj)) {
-        return undefined;
-    }
-    var objWithData = obj;
-    if (!Array.isArray(objWithData.data) || objWithData.data.length === 0) {
-        return undefined;
-    }
-    // Make TS happy.
-    var normed = __assign(__assign({}, objWithData), { data: objWithData.data });
-    var schema = tryGetSchema(rawData);
-    if (!schema) {
-        return undefined;
-    }
-    return __assign(__assign({}, normed), { schema: schema });
-}
-/**
- * Render booleans, objects, arrays, etc. as JSON repr.
- */
-function safeRender(x) {
-    return x === undefined || x === null
-        ? ""
-        : typeof x === "string"
-            ? x
-            : typeof x === "number"
-                ? x.toString()
-                : JSON.stringify(x);
-}
 function RichTable(props) {
     var className = props.className, _a = props.data, rawData = _a === void 0 ? {
         data: [],
@@ -474,7 +1165,7 @@ function RichTable(props) {
     // 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; props.themeResetClassName;
+    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();
@@ -533,7 +1224,7 @@ function deriveRowKey(data, rowKey) {
     if (rowKey) {
         return rowKey;
     }
-    var schema = tryGetSchema(data);
+    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;
     }
@@ -550,14 +1241,34 @@ function deriveKeyOfRow(row, rowKey) {
         return undefined;
     }
 }
+var defaultColumnConfig = function () {
+    return ({
+        key: mkShortId(),
+        isEditableExpr: function () { return false; },
+        disableSorting: false,
+        sortByExpr: undefined,
+        isHidden: false,
+        formatting: {
+            styles: {},
+            align: "left",
+            freeze: "off",
+        },
+        dataType: "auto",
+    });
+};
 function useColumnDefinitions(data, props) {
     var fields = props.fields, setControlContextData = props.setControlContextData, rowActions = props.rowActions;
     return React.useMemo(function () {
-        var schema = tryGetSchema(data);
+        var schema = data === null || data === void 0 ? void 0 : data.schema;
         if (!data || !schema) {
             return { normalized: [], columnDefinitions: [] };
         }
-        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema), mergedFields = _a.mergedFields, minimalFullLengthFields = _a.minimalFullLengthFields;
+        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema, function (field) { return (__assign(__assign({}, defaultColumnConfig()), (field && {
+            key: field.id,
+            fieldId: field.id,
+            title: field.label || field.id,
+            expr: function (currentItem) { return currentItem[field.id]; },
+        }))); }), mergedFields = _a.mergedFields, minimalFullLengthFields = _a.minimalFullLengthFields;
         setControlContextData === null || setControlContextData === void 0 ? void 0 : setControlContextData(__assign(__assign({}, data), { mergedFields: mergedFields, minimalFullLengthFields: minimalFullLengthFields }));
         var normalized = mergedFields;
         var columnDefinitions = normalized
@@ -568,15 +1279,7 @@ function useColumnDefinitions(data, props) {
                 title: cconfig.title,
                 // dataIndex: cconfig,
                 key: cconfig.key,
-                valueType: cconfig.dataType === "auto"
-                    ? undefined
-                    : cconfig.dataType === "string"
-                        ? "text"
-                        : cconfig.dataType === "number"
-                            ? "digit"
-                            : cconfig.dataType === "boolean"
-                                ? "switch"
-                                : undefined,
+                valueType: deriveValueType(cconfig),
                 // To come later
                 readonly: false,
                 sorter: true,
@@ -595,9 +1298,7 @@ function useColumnDefinitions(data, props) {
                     return defaultRender(_);
                 },
                 render: function (value, record, rowIndex) {
-                    return (React.createElement(DataProvider, { name: "currentRow", data: record },
-                        React.createElement(DataProvider, { name: "currentRowIndex", data: rowIndex },
-                            React.createElement(DataProvider, { name: "currentColumn", data: value }, safeRender(cconfig.expr ? cconfig.expr(record) : value)))));
+                    return renderValue(value, record, cconfig);
                 },
             };
             return columnDefinition;
@@ -649,10 +1350,11 @@ function useSortedFilteredData(data, columns) {
             ? // We use .sort() rather than sortBy to use localeCompare
                 (function () {
                     var _a;
-                    var expr = (_a = columns.find(function (cconfig) { var _a; return cconfig.key === ((_a = sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column) === null || _a === void 0 ? void 0 : _a.key); }).expr) !== null && _a !== void 0 ? _a : (function (x) { return x; });
+                    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)) !== null && _a !== void 0 ? _a : null, b = (_b = expr(bb)) !== null && _b !== void 0 ? _b : null;
+                        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 : "")
@@ -750,7 +1452,7 @@ function ExportMenu(props) {
                         var _a, _b;
                         return __generator(this, function (_c) {
                             writer = createObjectCsvStringifier({
-                                header: (_b = (_a = tryGetSchema(data)) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return ({
+                                header: (_b = (_a = data === null || data === void 0 ? void 0 : data.schema) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return ({
                                     id: f.id,
                                     title: f.id,
                                 }); })) !== null && _b !== void 0 ? _b : [],
@@ -800,9 +1502,6 @@ function ExportMenu(props) {
             React.createElement(EllipsisOutlined, null))));
 }
 
-function ensureNumber(x) {
-    return x;
-}
 var tableHelpers = {
     states: {
         selectedRow: {
@@ -822,21 +1521,6 @@ var tableHelpers = {
         },
     },
 };
-var rowDataType = function (displayName, control) {
-    return ({
-        type: "function",
-        displayName: displayName,
-        control: control,
-        argNames: ["currentItem"],
-        argValues: function (_props, ctx) { var _a; return [(_a = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _a === void 0 ? void 0 : _a[0]]; },
-    });
-};
-function getDefaultValueHint(field) {
-    return function (_props, contextData, _a) {
-        var path = _a.path;
-        return contextData === null || contextData === void 0 ? void 0 : contextData.mergedFields[ensureNumber(path.slice(-2)[0])][field];
-    };
-}
 var dataTableMeta = {
     name: "hostless-rich-table",
     displayName: "Table",
@@ -850,93 +1534,7 @@ var dataTableMeta = {
             type: "dataSourceOpData",
             description: "The data to display in the table",
         },
-        defaultSize: {
-            displayName: "Density",
-            type: "choice",
-            options: [
-                {
-                    value: "large",
-                    label: "Larger",
-                },
-                {
-                    value: "middle",
-                    label: "Medium",
-                },
-                {
-                    value: "small",
-                    label: "Compact",
-                },
-            ],
-            defaultValueHint: "large",
-        },
-        pageSize: {
-            type: "number",
-            defaultValueHint: 10,
-        },
-        fields: {
-            type: "array",
-            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__canDelete: function (_item, _props, ctx, _a) {
-                var path = _a.path;
-                return !(ctx === null || ctx === void 0 ? void 0 : ctx.mergedFields[ensureNumber(path.slice(-1)[0])].fieldId);
-            },
-            itemType: {
-                type: "object",
-                nameFunc: function (_item, _props, ctx, _a) {
-                    var path = _a.path;
-                    return ctx === null || ctx === void 0 ? void 0 : ctx.mergedFields[ensureNumber(path.slice(-1)[0])].title;
-                },
-                fields: {
-                    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"),
-                    },
-                    dataType: {
-                        type: "choice",
-                        displayName: "Data type",
-                        options: ["auto", "number", "string", "boolean"],
-                        defaultValueHint: getDefaultValueHint("dataType"),
-                    },
-                    expr: rowDataType("Customize data"),
-                    // TODO
-                    // isEditableExpr: rowDataType("Is editable", {
-                    //   type: "boolean",
-                    //   defaultValueHint: false,
-                    // }),
-                    // disableSorting: {
-                    //   type: "boolean",
-                    //   displayName: "Disable sorting",
-                    //   defaultValueHint: getDefaultValueHint("disableSorting"),
-                    // },
-                    // sortByExpr: rowDataType("Sort by"),
-                    isHidden: {
-                        type: "boolean",
-                        displayName: "Is hidden",
-                        defaultValueHint: getDefaultValueHint("isHidden"),
-                    },
-                },
-            },
-        },
+        fields: buildFieldsPropType({}),
         canSelectRows: {
             type: "choice",
             displayName: "Select rows?",
@@ -991,7 +1589,7 @@ var dataTableMeta = {
             advanced: true,
             itemType: {
                 type: "object",
-                nameFunc: function (ps) { return ps.label; },
+                nameFunc: function (item) { return item.label; },
                 fields: {
                     type: {
                         type: "choice",
@@ -1021,7 +1619,10 @@ var dataTableMeta = {
                                 },
                             },
                         },
-                        hidden: function (ps) { return ps.type !== "menu"; },
+                        hidden: function (ps, ctx, _a) {
+                            var item = _a.item;
+                            return item.type !== "menu";
+                        },
                     },
                     onClick: {
                         type: "eventHandler",
@@ -1030,11 +1631,39 @@ var dataTableMeta = {
                             { name: "rowKey", type: "string" },
                             { name: "row", type: "object" },
                         ],
-                        hidden: function (ps) { return ps.type !== "item"; },
+                        hidden: function (ps, ctx, _a) {
+                            var item = _a.item;
+                            return item.type !== "item";
+                        },
                     },
                 },
             },
         },
+        defaultSize: {
+            displayName: "Density",
+            type: "choice",
+            options: [
+                {
+                    value: "large",
+                    label: "Larger",
+                },
+                {
+                    value: "middle",
+                    label: "Medium",
+                },
+                {
+                    value: "small",
+                    label: "Compact",
+                },
+            ],
+            defaultValueHint: "large",
+            advanced: true,
+        },
+        pageSize: {
+            type: "number",
+            defaultValueHint: 10,
+            advanced: true,
+        },
         pagination: {
             type: "boolean",
             advanced: true,
@@ -1097,7 +1726,8 @@ function registerRichTable(loader) {
 function registerAll(loader) {
     registerRichLayout(loader);
     registerRichTable(loader);
+    registerRichDetails(loader);
 }
 
-export { RichLayout, RichTable, registerAll, tableHelpers };
+export { RichDetails, RichLayout, RichTable, registerAll, tableHelpers };
 //# sourceMappingURL=plasmic-rich-components.esm.js.map