@plasmicpkgs/plasmic-rich-components 1.0.61 → 1.0.62

package/dist/index.js

@@ -1,8 +1,974 @@
+'use strict';
 
-'use strict'
+var React = require('react');
+var registerComponent = require('@plasmicapp/host/registerComponent');
+require('@plasmicapp/host/registerGlobalContext');
+var icons = require('@ant-design/icons');
+var proComponents = require('@ant-design/pro-components');
+var antd = require('antd');
+var host = require('@plasmicapp/host');
+var csvWriterBrowser = require('csv-writer-browser');
+var fastStringify = require('fast-stringify');
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./plasmic-rich-components.cjs.production.min.js')
-} else {
-  module.exports = require('./plasmic-rich-components.cjs.development.js')
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
+var fastStringify__default = /*#__PURE__*/_interopDefault(fastStringify);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function useIsClient() {
+    var _a = React.useState(false), loaded = _a[0], setLoaded = _a[1];
+    React.useEffect(function () {
+        setLoaded(true);
+    });
+    return loaded;
+}
+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__default.default(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"]);
+    var isClient = useIsClient();
+    var _f = React.useState(undefined), pathname = _f[0], setPathname = _f[1];
+    React.useEffect(function () {
+        if (typeof location !== "undefined") {
+            setPathname(location.pathname);
+        }
+    }, []);
+    if (!isClient) {
+        return null;
+    }
+    return (React__default.default.createElement("div", { className: className },
+        React__default.default.createElement("style", null, ".ant-pro-layout-bg-list {\n            display: none;\n        }"),
+        React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { 
+            // Tweak defaults. ProLayout is janky and has terrible docs!
+            layout: (_b = layoutProps.layout) !== null && _b !== void 0 ? _b : "top", fixedHeader: (_c = layoutProps.fixedHeader) !== null && _c !== void 0 ? _c : false, fixSiderbar: 
+            // Doesn't stretch full height if you set this to false and you're in mix mode.
+            layoutProps.layout === "mix"
+                ? undefined
+                : (_d = layoutProps.fixSiderbar) !== null && _d !== void 0 ? _d : false, 
+            // This is always needed if you want layout mix to have effect and look any different from layout side - not clear why this should ever be false.
+            splitMenus: layoutProps.layout === "mix", route: {
+                path: rootUrl,
+                routes: navMenuItems,
+            }, location: {
+                pathname: pathname,
+            }, menu: {
+                // collapsedShowGroupTitle: true,
+                defaultOpenAll: true,
+                // hideMenuWhenCollapsed: true,
+            }, avatarProps: showAvatarMenu && false
+                ? {
+                    src: avatarImage,
+                    size: "small",
+                    title: avatarLabel,
+                    render: function (_props, dom) {
+                        return (React__default.default.createElement(antd.Dropdown, { menu: {
+                                items: [
+                                    {
+                                        key: "logout",
+                                        icon: React__default.default.createElement(icons.LogoutOutlined, null),
+                                        label: "Sign out",
+                                    },
+                                ],
+                            } }, dom));
+                    },
+                }
+                : undefined, actionsRender: function (_props) {
+                return [actionsChildren];
+            }, menuFooterRender: function (props) {
+                if (props === null || props === void 0 ? void 0 : props.collapsed)
+                    return undefined;
+                return footerChildren;
+            }, onMenuHeaderClick: function (e) { return console.log(e); }, menuItemRender: function (item, dom) { return React__default.default.createElement("a", { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
+                return (React__default.default.createElement("a", { href: rootUrl },
+                    logo,
+                    title));
+            } }), children)));
+}
+
+function generateNavMenuType(remainingDepth, displayName, defaultValue) {
+    return {
+        displayName: displayName ? displayName : "Nested items",
+        type: "array",
+        defaultValue: defaultValue,
+        itemType: {
+            type: "object",
+            nameFunc: function (item) {
+                return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
+            },
+            fields: __assign({ path: "string", name: "string" }, (remainingDepth === 0
+                ? {}
+                : {
+                    routes: generateNavMenuType(remainingDepth - 1),
+                })),
+        },
+    };
+}
+var richLayoutMeta = {
+    name: "hostless-rich-layout",
+    displayName: "Rich Page Layout",
+    props: {
+        children: "slot",
+        actionsChildren: {
+            type: "slot",
+            hidePlaceholder: true,
+        },
+        title: {
+            displayName: "Title",
+            type: "string",
+            defaultValue: "App title",
+        },
+        logo: {
+            displayName: "Logo",
+            type: "imageUrl",
+            defaultValue: "https://www.plasmic.app/favicon.ico",
+        },
+        navMenuItems: generateNavMenuType(2, "Nav menu items", [
+            {
+                path: "/",
+                name: "Link 1",
+            },
+            {
+                path: "/",
+                name: "Link 2",
+            },
+        ]),
+        layout: {
+            displayName: "Layout",
+            type: "choice",
+            options: ["side", "top", "mix"].map(function (value) { return ({
+                value: value,
+                label: capitalize(value),
+            }); }),
+            defaultValueHint: "top",
+        },
+        // Advanced, show later
+        /*
+        siderMenuType: {
+          displayName: "Sidebar mode",
+          type: "choice",
+          options: ["sub", "group"].map((value) => ({
+            value,
+            label: capitalize(value),
+          })),
+          defaultValue: "sub",
+        },
+        contentWidth: {
+          displayName: "Content width",
+          type: "choice",
+          options: ["Fluid", "Fixed"],
+          defaultValueHint: "Fluid",
+        },
+        navTheme: {
+          displayName: "Theme",
+          type: "choice",
+          options: [
+            { value: "realDark", label: "Dark" },
+            { value: "light", label: "Light" },
+          ],
+        },
+        colorPrimary: {
+          displayName: "Primary color",
+          type: "color",
+        },
+        */
+        fixedHeader: {
+            displayName: "Sticky header",
+            type: "boolean",
+            hidden: function (ps) { var _a; return ((_a = ps.layout) !== null && _a !== void 0 ? _a : "top") !== "top"; },
+            defaultValueHint: false,
+        },
+        fixSiderbar: {
+            displayName: "Sticky sidebar",
+            type: "boolean",
+            hidden: function (ps) { var _a; return ((_a = ps.layout) !== null && _a !== void 0 ? _a : "top") !== "side"; },
+            defaultValueHint: false,
+        },
+        /*
+        showAvatarMenu: {
+          displayName: "Show avatar",
+          type: "boolean",
+          defaultValue: true,
+        },
+        avatarLabel: {
+          displayName: "Avatar label",
+          type: "string",
+          defaultValue: "User Name",
+        },
+        avatarImage: {
+          displayName: "Avatar image",
+          type: "imageUrl",
+          defaultValue:
+            "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
+        },
+         */
+        menu: {
+            displayName: "Menu",
+            type: "object",
+            fields: {
+                defaultOpenAll: {
+                    displayName: "Default open all",
+                    type: "boolean",
+                },
+                hideMenuWhenCollapsed: {
+                    // displayName: "",
+                    type: "boolean",
+                },
+            },
+        },
+    },
+    defaultStyles: {
+        width: "stretch",
+        height: "stretch",
+    },
+    importName: "RichLayout",
+    importPath: "@plasmicpkgs/plasmic-rich-components",
+};
+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: [],
+        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, _d = props.scrollX, scrollX = _d === void 0 ? true : _d, scrollHeight = props.scrollHeight, hideSearch = props.hideSearch, hideDensity = props.hideDensity, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, rowKey = props.rowKey;
+    var data = normalizeData(rawData);
+    var _e = useColumnDefinitions(data, props), columnDefinitions = _e.columnDefinitions, normalized = _e.normalized;
+    var actionRef = React.useRef();
+    var _f = useSortedFilteredData(data, normalized), finalData = _f.finalData, search = _f.search, setSearch = _f.setSearch, setSortState = _f.setSortState;
+    var rowSelection = useRowSelection(data, props);
+    // const { containerRef, tableHeight } = useScrollHeight(data, props);
+    var isClient = useIsClient();
+    if (!isClient) {
+        return null;
+    }
+    return (React__default.default.createElement("div", { className: className },
+        React__default.default.createElement(proComponents.ProTable, { actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
+                setSortState({ sorter: sorter });
+            }, style: {
+                width: "100%",
+                height: "100%",
+            }, cardProps: {
+                ghost: true,
+            }, rowSelection: rowSelection, dataSource: finalData, rowKey: deriveRowKey(data, rowKey), defaultSize: defaultSize, editable: { type: "multiple" }, search: false, options: {
+                setting: hideColumnPicker
+                    ? false
+                    : {
+                        listsHeight: 400,
+                    },
+                reload: false,
+                density: !hideDensity,
+            }, pagination: pagination
+                ? {
+                    pageSize: pageSize,
+                    onChange: function (page) { return console.log(page); },
+                }
+                : false, dateFormatter: "string", headerTitle: title, 
+            // TODO in the future, figure out how to make this responsive to the CSS height
+            scroll: { x: scrollX || undefined, y: scrollHeight }, toolbar: {
+                search: !hideSearch
+                    ? {
+                        value: search,
+                        onChange: function (e) { return setSearch(e.target.value); },
+                        onSearch: function () {
+                            return;
+                        },
+                        placeholder: "Search",
+                    }
+                    : undefined,
+            }, toolBarRender: function () { return [
+                addHref && (React__default.default.createElement(antd.Button, { key: "button", icon: React__default.default.createElement(icons.PlusOutlined, null), type: "primary", href: addHref }, "Add")),
+                !hideExports && React__default.default.createElement(ExportMenu, { data: data }),
+            ]; } }),
+        React__default.default.createElement("style", null, "\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          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n        ")));
+}
+function deriveRowKey(data, rowKey) {
+    var _a;
+    if (rowKey) {
+        return rowKey;
+    }
+    var schema = tryGetSchema(data);
+    if (schema) {
+        return (_a = schema.fields[0]) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    return undefined;
+}
+function useColumnDefinitions(data, props) {
+    var fields = props.fields, setControlContextData = props.setControlContextData, actions = props.actions, customActionChildren = props.customActionChildren;
+    return React__default.default.useMemo(function () {
+        var schema = tryGetSchema(data);
+        if (!data || !schema) {
+            return { normalized: [], columnDefinitions: [] };
+        }
+        var _a = deriveFieldConfigs(fields !== null && fields !== void 0 ? fields : [], schema), 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,
+                // dataIndex: cconfig,
+                key: cconfig.key,
+                valueType: cconfig.dataType === "auto"
+                    ? undefined
+                    : cconfig.dataType === "string"
+                        ? "text"
+                        : cconfig.dataType === "number"
+                            ? "digit"
+                            : cconfig.dataType === "boolean"
+                                ? "switch"
+                                : undefined,
+                // To come later
+                readonly: false,
+                sorter: true,
+                copyable: false,
+                ellipsis: false,
+                tip: undefined,
+                formItemProps: {
+                    rules: [],
+                },
+                disable: false,
+                valueEnum: undefined,
+                search: undefined,
+                hideInSearch: false,
+                renderFormItem: function (_, _a) {
+                    var defaultRender = _a.defaultRender;
+                    return defaultRender(_);
+                },
+                render: function (value, record, rowIndex) {
+                    return (React__default.default.createElement(host.DataProvider, { name: "currentRow", data: record },
+                        React__default.default.createElement(host.DataProvider, { name: "currentRowIndex", data: rowIndex },
+                            React__default.default.createElement(host.DataProvider, { name: "currentColumn", data: value }, safeRender(cconfig.expr ? cconfig.expr(record) : value)))));
+                },
+            };
+            return columnDefinition;
+        });
+        if (actions && actions.length > 0) {
+            columnDefinitions.push({
+                title: "Actions",
+                valueType: "option",
+                key: "__plasmicActions",
+                render: function (_text, record, _, action) { return __spreadArray(__spreadArray([], actions
+                    .filter(function (_action) { return !_action.moreMenu; })
+                    .map(function (_action, aindex) {
+                    return _action.type === "edit" ? (React__default.default.createElement("a", { key: aindex, onClick: function () {
+                            var _a;
+                            (_a = action === null || action === void 0 ? void 0 : action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action, record.id);
+                        } }, "Edit")) : _action.type === "view" ? (React__default.default.createElement("a", { key: aindex, href: record.url }, "View")) : _action.type === "delete" ? (React__default.default.createElement("a", { key: aindex, onClick: function () {
+                            // TODO delete
+                        } }, "Delete")) : (customActionChildren);
+                }), true), [
+                    React__default.default.createElement(proComponents.TableDropdown, { key: "actionGroup", onSelect: function () { return action === null || action === void 0 ? void 0 : action.reload(); }, menus: actions
+                            .filter(function (_action) { return !!_action.moreMenu; })
+                            .map(function (_action, aindex) {
+                            var _a;
+                            return ({
+                                key: "" + aindex,
+                                name: (_a = _action.label) !== null && _a !== void 0 ? _a : _action.type,
+                            });
+                        }) }),
+                ], false); },
+            });
+        }
+        return { normalized: normalized, columnDefinitions: columnDefinitions };
+    }, [fields, data, setControlContextData, actions, customActionChildren]);
+}
+function useSortedFilteredData(data, columns) {
+    var _a = React.useState(""), search = _a[0], setSearch = _a[1];
+    var _b = React.useState(undefined), sortState = _b[0], setSortState = _b[1];
+    var finalData = React__default.default.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__default.default(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 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; });
+                    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;
+                        // 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 useRowSelection(data, props) {
+    var canSelectRows = props.canSelectRows, selectedRowKey = props.selectedRowKey, onRowSelectionChanged = props.onRowSelectionChanged, rowKey = props.rowKey;
+    var deriveSelectedRowKeys = function () {
+        if (!canSelectRows ||
+            canSelectRows === "none" ||
+            !deriveRowKey(data, rowKey)) {
+            return [];
+        }
+        if (typeof selectedRowKey === "string") {
+            return [selectedRowKey];
+        }
+        else if (Array.isArray(selectedRowKey)) {
+            if (canSelectRows === "single") {
+                return selectedRowKey.slice(0, 1);
+            }
+            else {
+                return selectedRowKey;
+            }
+        }
+        else {
+            return [];
+        }
+    };
+    var rowSelection = canSelectRows && canSelectRows !== "none"
+        ? {
+            type: canSelectRows === "single" ? "radio" : "checkbox",
+            selectedRowKeys: deriveSelectedRowKeys(),
+            onChange: function (rowKeys, rows) {
+                onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged(rowKeys, rows);
+            },
+            alwaysShowAlert: true,
+        }
+        : undefined;
+    return rowSelection;
 }
+function ExportMenu(props) {
+    var _this = this;
+    var data = props.data;
+    return (React__default.default.createElement(antd.Dropdown, { key: "menu", menu: {
+            items: [
+                {
+                    label: "Download as CSV",
+                    key: "csv",
+                    onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                        var writer, dataStr, filename, blob, link, url;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            writer = csvWriterBrowser.createObjectCsvStringifier({
+                                header: (_b = (_a = tryGetSchema(data)) === null || _a === void 0 ? void 0 : _a.fields.map(function (f) { return ({
+                                    id: f.id,
+                                    title: f.id,
+                                }); })) !== null && _b !== void 0 ? _b : [],
+                            });
+                            dataStr = writer.getHeaderString() +
+                                writer.stringifyRecords(data === null || data === void 0 ? void 0 : data.data);
+                            filename = "data.csv";
+                            blob = new Blob([dataStr], {
+                                type: "text/csv;charset=utf-8;",
+                            });
+                            if (navigator.msSaveBlob) {
+                                // In case of IE 10+
+                                navigator.msSaveBlob(blob, filename);
+                            }
+                            else {
+                                link = document.createElement("a");
+                                if (link.download !== undefined) {
+                                    url = URL.createObjectURL(blob);
+                                    link.setAttribute("href", url);
+                                    link.setAttribute("download", filename);
+                                    link.style.visibility = "hidden";
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                }
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                },
+                {
+                    label: "Download as JSON",
+                    key: "json",
+                    onClick: function () {
+                        var dataStr = fastStringify__default.default(data === null || data === void 0 ? void 0 : data.data);
+                        var dataUri = "data:application/json;charset=utf-8, ".concat(encodeURIComponent(dataStr));
+                        var exportFileDefaultName = "data.json";
+                        var linkElement = document.createElement("a");
+                        linkElement.setAttribute("href", dataUri);
+                        linkElement.setAttribute("download", exportFileDefaultName);
+                        linkElement.click();
+                    },
+                },
+            ],
+        } },
+        React__default.default.createElement(antd.Button, null,
+            React__default.default.createElement(icons.EllipsisOutlined, null))));
+}
+
+function ensureNumber(x) {
+    return x;
+}
+var tableHelpers = {
+    states: {
+        selectedRow: {
+            onChangeArgsToValue: function (rowKeys, rows) {
+                return rows[0];
+            },
+        },
+        selectedRows: {
+            onChangeArgsToValue: function (rowKeys, rows) {
+                return rows;
+            },
+        },
+        selectedRowKey: {
+            onChangeArgsToValue: function (rowKeys, rows) {
+                return rowKeys;
+            },
+        },
+    },
+};
+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",
+    defaultStyles: {
+        width: "stretch",
+    },
+    props: {
+        data: {
+            type: "dataSourceOpData",
+            description: "The data to display in the table",
+        },
+        defaultSize: {
+            type: "choice",
+            options: ["large", "middle", "small"],
+            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"),
+                    },
+                },
+            },
+        },
+        canSelectRows: {
+            type: "choice",
+            displayName: "Select rows?",
+            options: [
+                { label: "No", value: "none" },
+                { label: "Single", value: "single" },
+                { label: "Multiple", value: "multiple" },
+            ],
+            defaultValueHint: "none",
+        },
+        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",
+            hidden: function (ps) { return !ps.canSelectRows || ps.canSelectRows === "none"; },
+            defaultValueHint: function (ps) { return deriveRowKey(ps.data, ps.rowKey); },
+        },
+        selectedRowKey: {
+            type: "string",
+            displayName: "Selected Row Key",
+            hidden: function (ps) { return ps.canSelectRows !== "single"; },
+            advanced: true,
+        },
+        selectedRowKeys: {
+            type: "array",
+            displayName: "Selected Row Keys",
+            hidden: function (ps) { return ps.canSelectRows !== "multiple"; },
+            advanced: true,
+        },
+        onRowSelectionChanged: {
+            type: "eventHandler",
+            displayName: "On row selection changed",
+            argTypes: [
+                { name: "rowKeys", type: "object" },
+                { name: "rows", type: "object" },
+            ],
+        },
+        pagination: {
+            type: "boolean",
+            advanced: true,
+            defaultValueHint: true,
+        },
+        scrollX: {
+            type: "boolean",
+            advanced: true,
+            defaultValueHint: true,
+        },
+        scrollHeight: {
+            type: "number",
+            advanced: true,
+        },
+        hideSearch: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideExports: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideDensity: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideColumnPicker: {
+            type: "boolean",
+            advanced: 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),
+        selectedRows: __assign({ type: "readonly", onChangeProp: "onRowSelectionChanged", variableType: "array" }, tableHelpers.states.selectedRows),
+    },
+    componentHelpers: {
+        helpers: tableHelpers,
+        importName: "tableHelpers",
+        importPath: "@plasmicpkgs/plasmic-rich-components",
+    },
+    importName: "RichTable",
+    importPath: "@plasmicpkgs/plasmic-rich-components",
+};
+function registerRichTable(loader) {
+    registerComponentHelper(loader, RichTable, dataTableMeta);
+}
+
+function registerAll(loader) {
+    registerRichLayout(loader);
+    registerRichTable(loader);
+}
+
+exports.RichLayout = RichLayout;
+exports.RichTable = RichTable;
+exports.registerAll = registerAll;
+exports.tableHelpers = tableHelpers;
+//# sourceMappingURL=index.js.map