@plasmicpkgs/plasmic-rich-components 1.0.61 → 1.0.63

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
@@ -8,1598 +8,950 @@ import { DataProvider } from '@plasmicapp/host';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+/*! *****************************************************************************
+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 _useState = useState(false),
-    loaded = _useState[0],
-    setLoaded = _useState[1];
-  useEffect(function () {
-    setLoaded(true);
-  });
-  return loaded;
+    var _a = useState(false), loaded = _a[0], setLoaded = _a[1];
+    useEffect(function () {
+        setLoaded(true);
+    });
+    return loaded;
 }
 function capitalize(text) {
-  return text.slice(0, 1).toUpperCase() + text.slice(1);
+    return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
 
 function registerComponentHelper(loader, component, meta) {
-  if (loader) {
-    loader.registerComponent(component, meta);
-  } else {
-    registerComponent(component, meta);
-  }
+    if (loader) {
+        loader.registerComponent(component, meta);
+    }
+    else {
+        registerComponent(component, meta);
+    }
 }
 
-var _excluded = ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className"];
-function RichLayout(_ref) {
-  var _layoutProps$layout, _layoutProps$fixedHea, _layoutProps$fixSider;
-  var children = _ref.children,
-    navMenuItems = _ref.navMenuItems,
-    _ref$rootUrl = _ref.rootUrl,
-    rootUrl = _ref$rootUrl === void 0 ? "/" : _ref$rootUrl,
-    actionsChildren = _ref.actionsChildren,
-    footerChildren = _ref.footerChildren,
-    avatarLabel = _ref.avatarLabel,
-    avatarImage = _ref.avatarImage,
-    showAvatarMenu = _ref.showAvatarMenu,
-    className = _ref.className,
-    layoutProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var isClient = useIsClient();
-  var _useState = useState(undefined),
-    pathname = _useState[0],
-    setPathname = _useState[1];
-  useEffect(function () {
-    if (typeof location !== "undefined") {
-      setPathname(location.pathname);
-    }
-  }, []);
-  if (!isClient) {
-    return null;
-  }
-  return React.createElement("div", {
-    className: className
-  }, React.createElement("style", null, ".ant-pro-layout-bg-list {\n            display: none;\n        }"), React.createElement(ProLayout, Object.assign({}, layoutProps, {
-    // Tweak defaults. ProLayout is janky and has terrible docs!
-    layout: (_layoutProps$layout = layoutProps.layout) != null ? _layoutProps$layout : "top",
-    fixedHeader: (_layoutProps$fixedHea = layoutProps.fixedHeader) != null ? _layoutProps$fixedHea : false,
-    fixSiderbar:
-    // Doesn't stretch full height if you set this to false and you're in mix mode.
-    layoutProps.layout === "mix" ? undefined : (_layoutProps$fixSider = layoutProps.fixSiderbar) != null ? _layoutProps$fixSider : 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
-    },
-    avatarProps: showAvatarMenu && false ? {
-      src: avatarImage,
-      size: "small",
-      title: avatarLabel,
-      render: function render(_props, dom) {
-        return React.createElement(Dropdown, {
-          menu: {
-            items: [{
-              key: "logout",
-              icon: React.createElement(LogoutOutlined, null),
-              label: "Sign out"
-            }]
-          }
-        }, dom);
-      }
-    } : undefined,
-    actionsRender: function actionsRender(_props) {
-      return [actionsChildren];
-    },
-    menuFooterRender: function menuFooterRender(props) {
-      if (props != null && props.collapsed) return undefined;
-      return footerChildren;
-    },
-    onMenuHeaderClick: function onMenuHeaderClick(e) {
-      return console.log(e);
-    },
-    menuItemRender: function menuItemRender(item, dom) {
-      return React.createElement("a", {
-        href: item.path
-      }, dom);
-    },
-    headerTitleRender: function headerTitleRender(logo, title, _) {
-      return React.createElement("a", {
-        href: rootUrl
-      }, logo, title);
+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 = useState(undefined), pathname = _f[0], setPathname = _f[1];
+    useEffect(function () {
+        if (typeof location !== "undefined") {
+            setPathname(location.pathname);
+        }
+    }, []);
+    if (!isClient) {
+        return null;
     }
-  }), children));
+    return (React.createElement("div", { className: className },
+        React.createElement("style", null, ".ant-pro-layout-bg-list {\n            display: none;\n        }"),
+        React.createElement(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.createElement(Dropdown, { menu: {
+                                items: [
+                                    {
+                                        key: "logout",
+                                        icon: React.createElement(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.createElement("a", { href: item.path }, dom); }, headerTitleRender: function (logo, title, _) {
+                return (React.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 nameFunc(item) {
-        return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
-      },
-      fields: _extends({
-        path: "string",
-        name: "string"
-      }, remainingDepth === 0 ? {} : {
-        routes: generateNavMenuType(remainingDepth - 1)
-      })
-    }
-  };
+    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: /*#__PURE__*/generateNavMenuType(2, "Nav menu items", [{
-      path: "/",
-      name: "Link 1"
-    }, {
-      path: "/",
-      name: "Link 2"
-    }]),
-    layout: {
-      displayName: "Layout",
-      type: "choice",
-      options: /*#__PURE__*/["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 hidden(ps) {
-        var _ps$layout;
-        return ((_ps$layout = ps.layout) != null ? _ps$layout : "top") !== "top";
-      },
-      defaultValueHint: false
+    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",
+                },
+            },
+        },
     },
-    fixSiderbar: {
-      displayName: "Sticky sidebar",
-      type: "boolean",
-      hidden: function hidden(ps) {
-        var _ps$layout2;
-        return ((_ps$layout2 = ps.layout) != null ? _ps$layout2 : "top") !== "side";
-      },
-      defaultValueHint: false
+    defaultStyles: {
+        width: "stretch",
+        height: "stretch",
     },
-    /*
-    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"
+    importName: "RichLayout",
+    importPath: "@plasmicpkgs/plasmic-rich-components",
 };
 function registerRichLayout(loader) {
-  registerComponentHelper(loader, RichLayout, richLayoutMeta);
+    registerComponentHelper(loader, RichLayout, richLayoutMeta);
 }
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
-  /**
-   * Copyright (c) 2014-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var runtime = function (exports) {
-
-    var Op = Object.prototype;
-    var hasOwn = Op.hasOwnProperty;
-    var undefined$1; // More compressible than void 0.
-    var $Symbol = typeof Symbol === "function" ? Symbol : {};
-    var iteratorSymbol = $Symbol.iterator || "@@iterator";
-    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-    function define(obj, key, value) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-      return obj[key];
-    }
-    try {
-      // IE 8 has a broken Object.defineProperty that only works on DOM objects.
-      define({}, "");
-    } catch (err) {
-      define = function define(obj, key, value) {
-        return obj[key] = value;
-      };
+var tuple = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
     }
-    function wrap(innerFn, outerFn, self, tryLocsList) {
-      // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-      var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-      var generator = Object.create(protoGenerator.prototype);
-      var context = new Context(tryLocsList || []);
-
-      // The ._invoke method unifies the implementations of the .next,
-      // .throw, and .return methods.
-      generator._invoke = makeInvokeMethod(innerFn, self, context);
-      return generator;
+    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]; } });
     }
-    exports.wrap = wrap;
+    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 };
+}
 
-    // Try/catch helper to minimize deoptimizations. Returns a completion
-    // record like context.tryEntries[i].completion. This interface could
-    // have been (and was previously) designed to take a closure to be
-    // invoked without arguments, but in all the cases we care about we
-    // already have an existing method we want to call, so there's no need
-    // to create a new function object. We can even get away with assuming
-    // the method takes exactly one argument, since that happens to be true
-    // in every case, so we don't have to touch the arguments object. The
-    // only additional allocation required is the completion record, which
-    // has a stable shape and so hopefully should be cheap to allocate.
-    function tryCatch(fn, obj, arg) {
-      try {
-        return {
-          type: "normal",
-          arg: fn.call(obj, arg)
-        };
-      } catch (err) {
-        return {
-          type: "throw",
-          arg: err
-        };
-      }
+function tryGetSchema(data) {
+    if (data === null || data === void 0 ? void 0 : data.schema) {
+        return data.schema;
     }
-    var GenStateSuspendedStart = "suspendedStart";
-    var GenStateSuspendedYield = "suspendedYield";
-    var GenStateExecuting = "executing";
-    var GenStateCompleted = "completed";
-
-    // Returning this object from the innerFn has the same effect as
-    // breaking out of the dispatch switch statement.
-    var ContinueSentinel = {};
-
-    // Dummy constructor functions that we use as the .constructor and
-    // .constructor.prototype properties for functions that return Generator
-    // objects. For full spec compliance, you may wish to configure your
-    // minifier not to mangle the names of these two functions.
-    function Generator() {}
-    function GeneratorFunction() {}
-    function GeneratorFunctionPrototype() {}
-
-    // This is a polyfill for %IteratorPrototype% for environments that
-    // don't natively support it.
-    var IteratorPrototype = {};
-    define(IteratorPrototype, iteratorSymbol, function () {
-      return this;
-    });
-    var getProto = Object.getPrototypeOf;
-    var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-    if (NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-      // This environment has a native %IteratorPrototype%; use it instead
-      // of the polyfill.
-      IteratorPrototype = NativeIteratorPrototype;
+    if (Array.isArray(data)) {
+        data = { data: data };
     }
-    var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = GeneratorFunctionPrototype;
-    define(Gp, "constructor", GeneratorFunctionPrototype);
-    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
-    GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction");
-
-    // Helper for defining the .next, .throw, and .return methods of the
-    // Iterator interface in terms of a single ._invoke method.
-    function defineIteratorMethods(prototype) {
-      ["next", "throw", "return"].forEach(function (method) {
-        define(prototype, method, function (arg) {
-          return this._invoke(method, arg);
-        });
-      });
+    if (!(data === null || data === void 0 ? void 0 : data.data) || !Array.isArray(data.data) || data.data.length === 0) {
+        return undefined;
     }
-    exports.isGeneratorFunction = function (genFun) {
-      var ctor = typeof genFun === "function" && genFun.constructor;
-      return ctor ? ctor === GeneratorFunction ||
-      // For the native GeneratorFunction constructor, the best we can
-      // do is to check its .name property.
-      (ctor.displayName || ctor.name) === "GeneratorFunction" : false;
-    };
-    exports.mark = function (genFun) {
-      if (Object.setPrototypeOf) {
-        Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-      } else {
-        genFun.__proto__ = GeneratorFunctionPrototype;
-        define(genFun, toStringTagSymbol, "GeneratorFunction");
-      }
-      genFun.prototype = Object.create(Gp);
-      return genFun;
-    };
-
-    // Within the body of any async function, `await x` is transformed to
-    // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-    // `hasOwn.call(value, "__await")` to determine if the yielded value is
-    // meant to be awaited.
-    exports.awrap = function (arg) {
-      return {
-        __await: arg
-      };
-    };
-    function AsyncIterator(generator, PromiseImpl) {
-      function invoke(method, arg, resolve, reject) {
-        var record = tryCatch(generator[method], generator, arg);
-        if (record.type === "throw") {
-          reject(record.arg);
-        } else {
-          var result = record.arg;
-          var value = result.value;
-          if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
-            return PromiseImpl.resolve(value.__await).then(function (value) {
-              invoke("next", value, resolve, reject);
-            }, function (err) {
-              invoke("throw", err, resolve, reject);
+    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 PromiseImpl.resolve(value).then(function (unwrapped) {
-            // When a yielded Promise is resolved, its final value becomes
-            // the .value of the Promise<{value,done}> result for the
-            // current iteration.
-            result.value = unwrapped;
-            resolve(result);
-          }, function (error) {
-            // If a rejected Promise was yielded, throw the rejection back
-            // into the async generator function so it can be handled there.
-            return invoke("throw", error, resolve, reject);
-          });
-        }
-      }
-      var previousPromise;
-      function enqueue(method, arg) {
-        function callInvokeWithMethodAndArg() {
-          return new PromiseImpl(function (resolve, reject) {
-            invoke(method, arg, resolve, reject);
-          });
         }
-        return previousPromise =
-        // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(callInvokeWithMethodAndArg,
-        // Avoid propagating failures to Promises returned by later
-        // invocations of the iterator.
-        callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-
-      // Define the unified helper method that is used to implement .next,
-      // .throw, and .return (see defineIteratorMethods).
-      this._invoke = enqueue;
-    }
-    defineIteratorMethods(AsyncIterator.prototype);
-    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
-      return this;
     });
-    exports.AsyncIterator = AsyncIterator;
-
-    // Note that simple async functions are implemented on top of
-    // AsyncIterator objects; they just return a Promise for the value of
-    // the final result produced by the iterator.
-    exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-      if (PromiseImpl === void 0) PromiseImpl = Promise;
-      var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
-      return exports.isGeneratorFunction(outerFn) ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function (result) {
-        return result.done ? result.value : iter.next();
-      });
+    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 makeInvokeMethod(innerFn, self, context) {
-      var state = GenStateSuspendedStart;
-      return function invoke(method, arg) {
-        if (state === GenStateExecuting) {
-          throw new Error("Generator is already running");
-        }
-        if (state === GenStateCompleted) {
-          if (method === "throw") {
-            throw arg;
-          }
-
-          // Be forgiving, per 25.3.3.3.3 of the spec:
-          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
-          return doneResult();
-        }
-        context.method = method;
-        context.arg = arg;
-        while (true) {
-          var delegate = context.delegate;
-          if (delegate) {
-            var delegateResult = maybeInvokeDelegate(delegate, context);
-            if (delegateResult) {
-              if (delegateResult === ContinueSentinel) continue;
-              return delegateResult;
-            }
-          }
-          if (context.method === "next") {
-            // Setting context._sent for legacy support of Babel's
-            // function.sent implementation.
-            context.sent = context._sent = context.arg;
-          } else if (context.method === "throw") {
-            if (state === GenStateSuspendedStart) {
-              state = GenStateCompleted;
-              throw context.arg;
-            }
-            context.dispatchException(context.arg);
-          } else if (context.method === "return") {
-            context.abrupt("return", context.arg);
-          }
-          state = GenStateExecuting;
-          var record = tryCatch(innerFn, self, context);
-          if (record.type === "normal") {
-            // If an exception is thrown from innerFn, we leave state ===
-            // GenStateExecuting and loop back for another invocation.
-            state = context.done ? GenStateCompleted : GenStateSuspendedYield;
-            if (record.arg === ContinueSentinel) {
-              continue;
-            }
-            return {
-              value: record.arg,
-              done: context.done
-            };
-          } else if (record.type === "throw") {
-            state = GenStateCompleted;
-            // Dispatch the exception by looping back around to the
-            // context.dispatchException(context.arg) call above.
-            context.method = "throw";
-            context.arg = record.arg;
-          }
-        }
-      };
+}
+function normalizeData(rawData) {
+    if (!rawData || typeof rawData !== "object") {
+        return undefined;
     }
-
-    // Call delegate.iterator[context.method](context.arg) and handle the
-    // result, either by returning a { value, done } result from the
-    // delegate iterator, or by modifying context.method and context.arg,
-    // setting context.delegate to null, and returning the ContinueSentinel.
-    function maybeInvokeDelegate(delegate, context) {
-      var method = delegate.iterator[context.method];
-      if (method === undefined$1) {
-        // A .throw or .return when the delegate iterator has no .throw
-        // method always terminates the yield* loop.
-        context.delegate = null;
-        if (context.method === "throw") {
-          // Note: ["return"] must be used for ES3 parsing compatibility.
-          if (delegate.iterator["return"]) {
-            // If the delegate iterator has a return method, give it a
-            // chance to clean up.
-            context.method = "return";
-            context.arg = undefined$1;
-            maybeInvokeDelegate(delegate, context);
-            if (context.method === "throw") {
-              // If maybeInvokeDelegate(context) changed context.method from
-              // "return" to "throw", let that override the TypeError below.
-              return ContinueSentinel;
-            }
-          }
-          context.method = "throw";
-          context.arg = new TypeError("The iterator does not provide a 'throw' method");
-        }
-        return ContinueSentinel;
-      }
-      var record = tryCatch(method, delegate.iterator, context.arg);
-      if (record.type === "throw") {
-        context.method = "throw";
-        context.arg = record.arg;
-        context.delegate = null;
-        return ContinueSentinel;
-      }
-      var info = record.arg;
-      if (!info) {
-        context.method = "throw";
-        context.arg = new TypeError("iterator result is not an object");
-        context.delegate = null;
-        return ContinueSentinel;
-      }
-      if (info.done) {
-        // Assign the result of the finished delegate to the temporary
-        // variable specified by delegate.resultName (see delegateYield).
-        context[delegate.resultName] = info.value;
-
-        // Resume execution at the desired location (see delegateYield).
-        context.next = delegate.nextLoc;
-
-        // If context.method was "throw" but the delegate handled the
-        // exception, let the outer generator proceed normally. If
-        // context.method was "next", forget context.arg since it has been
-        // "consumed" by the delegate iterator. If context.method was
-        // "return", allow the original .return call to continue in the
-        // outer generator.
-        if (context.method !== "return") {
-          context.method = "next";
-          context.arg = undefined$1;
-        }
-      } else {
-        // Re-yield the result returned by the delegate method.
-        return info;
-      }
-
-      // The delegate iterator is finished, so forget it and continue with
-      // the outer generator.
-      context.delegate = null;
-      return ContinueSentinel;
+    var obj = Array.isArray(rawData) ? { data: rawData } : rawData;
+    if (!("data" in obj)) {
+        return undefined;
     }
-
-    // Define Generator.prototype.{next,throw,return} in terms of the
-    // unified ._invoke helper method.
-    defineIteratorMethods(Gp);
-    define(Gp, toStringTagSymbol, "Generator");
-
-    // A Generator should always return itself as the iterator object when the
-    // @@iterator function is called on it. Some browsers' implementations of the
-    // iterator prototype chain incorrectly implement this, causing the Generator
-    // object to not be returned from this call. This ensures that doesn't happen.
-    // See https://github.com/facebook/regenerator/issues/274 for more details.
-    define(Gp, iteratorSymbol, function () {
-      return this;
-    });
-    define(Gp, "toString", function () {
-      return "[object Generator]";
-    });
-    function pushTryEntry(locs) {
-      var entry = {
-        tryLoc: locs[0]
-      };
-      if (1 in locs) {
-        entry.catchLoc = locs[1];
-      }
-      if (2 in locs) {
-        entry.finallyLoc = locs[2];
-        entry.afterLoc = locs[3];
-      }
-      this.tryEntries.push(entry);
+    var objWithData = obj;
+    if (!Array.isArray(objWithData.data) || objWithData.data.length === 0) {
+        return undefined;
     }
-    function resetTryEntry(entry) {
-      var record = entry.completion || {};
-      record.type = "normal";
-      delete record.arg;
-      entry.completion = record;
+    // Make TS happy.
+    var normed = __assign(__assign({}, objWithData), { data: objWithData.data });
+    var schema = tryGetSchema(rawData);
+    if (!schema) {
+        return undefined;
     }
-    function Context(tryLocsList) {
-      // The root entry object (effectively a try statement without a catch
-      // or a finally block) gives us a place to store values thrown from
-      // locations where there is no enclosing try statement.
-      this.tryEntries = [{
-        tryLoc: "root"
-      }];
-      tryLocsList.forEach(pushTryEntry, this);
-      this.reset(true);
+    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, hideSearch = props.hideSearch, hideDensity = props.hideDensity, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, rowKey = props.rowKey;
+    var data = normalizeData(rawData);
+    var _d = useColumnDefinitions(data, props), columnDefinitions = _d.columnDefinitions, normalized = _d.normalized;
+    var actionRef = useRef();
+    var _e = useSortedFilteredData(data, normalized), finalData = _e.finalData, search = _e.search, setSearch = _e.setSearch, setSortState = _e.setSortState;
+    var rowSelection = useRowSelection(data, props);
+    // const { containerRef, tableHeight } = useScrollHeight(data, props);
+    var isClient = useIsClient();
+    if (!isClient) {
+        return null;
     }
-    exports.keys = function (object) {
-      var keys = [];
-      for (var key in object) {
-        keys.push(key);
-      }
-      keys.reverse();
-
-      // Rather than returning an object with a next method, we keep
-      // things simple and return the next function itself.
-      return function next() {
-        while (keys.length) {
-          var key = keys.pop();
-          if (key in object) {
-            next.value = key;
-            next.done = false;
-            return next;
-          }
-        }
-
-        // To avoid creating an additional object, we just hang the .value
-        // and .done properties off the next function object itself. This
-        // also ensures that the minifier will not anonymize the function.
-        next.done = true;
-        return next;
-      };
-    };
-    function values(iterable) {
-      if (iterable) {
-        var iteratorMethod = iterable[iteratorSymbol];
-        if (iteratorMethod) {
-          return iteratorMethod.call(iterable);
-        }
-        if (typeof iterable.next === "function") {
-          return iterable;
-        }
-        if (!isNaN(iterable.length)) {
-          var i = -1,
-            next = function next() {
-              while (++i < iterable.length) {
-                if (hasOwn.call(iterable, i)) {
-                  next.value = iterable[i];
-                  next.done = false;
-                  return next;
+    return (React.createElement("div", { className: className },
+        React.createElement(ProTable, { actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
+                setSortState({ sorter: sorter });
+            }, style: {
+                width: "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); },
                 }
-              }
-              next.value = undefined$1;
-              next.done = true;
-              return next;
-            };
-          return next.next = next;
-        }
-      }
-
-      // Return an iterator with no values.
-      return {
-        next: doneResult
-      };
+                : 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.createElement(Button, { key: "button", icon: React.createElement(PlusOutlined, null), type: "primary", href: addHref }, "Add")),
+                !hideExports && React.createElement(ExportMenu, { data: data }),
+            ]; } }),
+        React.createElement("style", { dangerouslySetInnerHTML: {
+                __html: "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {\n            height: 100%;\n          }\n          .ant-pro-table .ant-spin-container {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-pagination {\n            flex-shrink: 0;\n          }\n          .ant-pro-table .ant-table-content {\n            overflow: auto !important;\n            height: 100%;\n          }\n          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {\n            display: flex;\n            flex-direction: column;\n          }\n          .ant-pro-table .ant-table-wrapper {\n            flex-grow: 1;\n            min-height: 0;\n          }\n          .ant-pro-table .ant-table-thead > tr > th {\n            position: sticky;\n            top: 0;\n            z-index: 2;\n          }\n          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {\n            z-index: 3;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td {\n            z-index: 0;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {\n            z-index: 1;\n          }\n      ",
+            } })));
+}
+function deriveRowKey(data, rowKey) {
+    var _a;
+    if (rowKey) {
+        return rowKey;
     }
-    exports.values = values;
-    function doneResult() {
-      return {
-        value: undefined$1,
-        done: true
-      };
+    var schema = tryGetSchema(data);
+    if (schema) {
+        return (_a = schema.fields[0]) === null || _a === void 0 ? void 0 : _a.id;
     }
-    Context.prototype = {
-      constructor: Context,
-      reset: function reset(skipTempReset) {
-        this.prev = 0;
-        this.next = 0;
-        // Resetting context._sent for legacy support of Babel's
-        // function.sent implementation.
-        this.sent = this._sent = undefined$1;
-        this.done = false;
-        this.delegate = null;
-        this.method = "next";
-        this.arg = undefined$1;
-        this.tryEntries.forEach(resetTryEntry);
-        if (!skipTempReset) {
-          for (var name in this) {
-            // Not sure about the optimal order of these conditions:
-            if (name.charAt(0) === "t" && hasOwn.call(this, name) && !isNaN(+name.slice(1))) {
-              this[name] = undefined$1;
-            }
-          }
+    return undefined;
+}
+function useColumnDefinitions(data, props) {
+    var fields = props.fields, setControlContextData = props.setControlContextData, actions = props.actions, customActionChildren = props.customActionChildren;
+    return React.useMemo(function () {
+        var schema = tryGetSchema(data);
+        if (!data || !schema) {
+            return { normalized: [], columnDefinitions: [] };
         }
-      },
-      stop: function stop() {
-        this.done = true;
-        var rootEntry = this.tryEntries[0];
-        var rootRecord = rootEntry.completion;
-        if (rootRecord.type === "throw") {
-          throw rootRecord.arg;
+        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.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 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.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.createElement("a", { key: aindex, href: record.url }, "View")) : _action.type === "delete" ? (React.createElement("a", { key: aindex, onClick: function () {
+                            // TODO delete
+                        } }, "Delete")) : (customActionChildren);
+                }), true), [
+                    React.createElement(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 this.rval;
-      },
-      dispatchException: function dispatchException(exception) {
-        if (this.done) {
-          throw exception;
+        return { normalized: normalized, columnDefinitions: columnDefinitions };
+    }, [fields, data, setControlContextData, actions, customActionChildren]);
+}
+function useSortedFilteredData(data, columns) {
+    var _a = useState(""), search = _a[0], setSearch = _a[1];
+    var _b = useState(undefined), sortState = _b[0], setSortState = _b[1];
+    var finalData = React.useMemo(function () {
+        var _a;
+        var filtered = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.filter(function (row) {
+            return fastStringify(Object.values(row)).toLowerCase().includes(search);
+        });
+        var sorted = (sortState === null || sortState === void 0 ? void 0 : sortState.sorter.column)
+            ? // We use .sort() rather than sortBy to use localeCompare
+                (function () {
+                    var _a;
+                    var 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 [];
         }
-        var context = this;
-        function handle(loc, caught) {
-          record.type = "throw";
-          record.arg = exception;
-          context.next = loc;
-          if (caught) {
-            // If the dispatched exception was caught by a catch block,
-            // then let that catch block handle the exception normally.
-            context.method = "next";
-            context.arg = undefined$1;
-          }
-          return !!caught;
+        if (typeof selectedRowKey === "string") {
+            return [selectedRowKey];
         }
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          var record = entry.completion;
-          if (entry.tryLoc === "root") {
-            // Exception thrown outside of any try block that could handle
-            // it, so set the completion value of the entire function to
-            // throw the exception.
-            return handle("end");
-          }
-          if (entry.tryLoc <= this.prev) {
-            var hasCatch = hasOwn.call(entry, "catchLoc");
-            var hasFinally = hasOwn.call(entry, "finallyLoc");
-            if (hasCatch && hasFinally) {
-              if (this.prev < entry.catchLoc) {
-                return handle(entry.catchLoc, true);
-              } else if (this.prev < entry.finallyLoc) {
-                return handle(entry.finallyLoc);
-              }
-            } else if (hasCatch) {
-              if (this.prev < entry.catchLoc) {
-                return handle(entry.catchLoc, true);
-              }
-            } else if (hasFinally) {
-              if (this.prev < entry.finallyLoc) {
-                return handle(entry.finallyLoc);
-              }
-            } else {
-              throw new Error("try statement without catch or finally");
+        else if (Array.isArray(selectedRowKey)) {
+            if (canSelectRows === "single") {
+                return selectedRowKey.slice(0, 1);
             }
-          }
-        }
-      },
-      abrupt: function abrupt(type, arg) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-            var finallyEntry = entry;
-            break;
-          }
-        }
-        if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
-          // Ignore the finally entry if control is not jumping to a
-          // location outside the try/catch block.
-          finallyEntry = null;
-        }
-        var record = finallyEntry ? finallyEntry.completion : {};
-        record.type = type;
-        record.arg = arg;
-        if (finallyEntry) {
-          this.method = "next";
-          this.next = finallyEntry.finallyLoc;
-          return ContinueSentinel;
-        }
-        return this.complete(record);
-      },
-      complete: function complete(record, afterLoc) {
-        if (record.type === "throw") {
-          throw record.arg;
-        }
-        if (record.type === "break" || record.type === "continue") {
-          this.next = record.arg;
-        } else if (record.type === "return") {
-          this.rval = this.arg = record.arg;
-          this.method = "return";
-          this.next = "end";
-        } else if (record.type === "normal" && afterLoc) {
-          this.next = afterLoc;
-        }
-        return ContinueSentinel;
-      },
-      finish: function finish(finallyLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          if (entry.finallyLoc === finallyLoc) {
-            this.complete(entry.completion, entry.afterLoc);
-            resetTryEntry(entry);
-            return ContinueSentinel;
-          }
-        }
-      },
-      "catch": function _catch(tryLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          if (entry.tryLoc === tryLoc) {
-            var record = entry.completion;
-            if (record.type === "throw") {
-              var thrown = record.arg;
-              resetTryEntry(entry);
+            else {
+                return selectedRowKey;
             }
-            return thrown;
-          }
         }
-
-        // The context.catch method must only be called with a location
-        // argument that corresponds to a known catch block.
-        throw new Error("illegal catch attempt");
-      },
-      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
-        this.delegate = {
-          iterator: values(iterable),
-          resultName: resultName,
-          nextLoc: nextLoc
-        };
-        if (this.method === "next") {
-          // Deliberately forget the last sent value so that we don't
-          // accidentally pass it on to the delegate.
-          this.arg = undefined$1;
+        else {
+            return [];
         }
-        return ContinueSentinel;
-      }
-    };
-
-    // Regardless of whether this script is executing as a CommonJS module
-    // or not, return the runtime object so that we can declare the variable
-    // regeneratorRuntime in the outer scope, which allows this module to be
-    // injected easily by `bin/regenerator --include-runtime script.js`.
-    return exports;
-  }(
-  // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-   module.exports );
-  try {
-    regeneratorRuntime = runtime;
-  } catch (accidentalStrictMode) {
-    // This module should not be running in strict mode, so the above
-    // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, in modern engines
-    // we can explicitly access globalThis. In older engines we can escape
-    // strict mode using a global Function call. This could conceivably fail
-    // if a Content Security Policy forbids using Function, but in that case
-    // the proper solution is to fix the accidental strict mode problem. If
-    // you've misconfigured your bundler to force strict mode and applied a
-    // CSP to forbid Function, and you're not willing to fix either of those
-    // problems, please detail your unique predicament in a GitHub issue.
-    if (typeof globalThis === "object") {
-      globalThis.regeneratorRuntime = runtime;
-    } else {
-      Function("r", "regeneratorRuntime = r")(runtime);
-    }
-  }
-});
-
-var tuple = function tuple() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args;
-};
-function mkIdMap(xs) {
-  return new Map(xs.map(function (x) {
-    return tuple(x.id, x);
-  }));
-}
-var mkShortId = function mkShortId() {
-  return "" + Math.random();
-};
-var withoutNils = function withoutNils(xs) {
-  return xs.filter(function (x) {
-    return x != null;
-  });
-};
-var defaultColumnConfig = function defaultColumnConfig() {
-  return {
-    key: mkShortId(),
-    isEditableExpr: function isEditableExpr() {
-      return false;
-    },
-    disableSorting: false,
-    sortByExpr: undefined,
-    isHidden: false,
-    formatting: {
-      styles: {},
-      align: "left",
-      freeze: "off"
-    },
-    dataType: "auto"
-  };
-};
-function deriveFieldConfigs(specifiedFieldsPartial, schema) {
-  var _schema$fields;
-  var schemaFields = (_schema$fields = schema == null ? void 0 : schema.fields) != null ? _schema$fields : [];
-  var fieldById = mkIdMap(schemaFields);
-  var specifiedFieldIds = new Set(withoutNils(specifiedFieldsPartial.map(function (f) {
-    return f.fieldId;
-  })));
-  function defaultColumnConfigForField(field) {
-    return _extends({}, defaultColumnConfig(), {
-      key: field.id,
-      fieldId: field.id,
-      title: field.label || field.id,
-      expr: function expr(currentItem) {
-        return currentItem[field.id];
-      }
-    });
-  }
-  var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f, index) {
-    var fieldId = f.fieldId;
-    if (!fieldId) {
-      return [_extends({}, defaultColumnConfig(), {
-        key: index
-      }, f)];
-    }
-    var field = fieldById.get(fieldId);
-    // Drop configs with fieldIds no longer in the data.
-    if (!field) {
-      return [];
-    }
-    return [_extends({}, defaultColumnConfigForField(field), f)];
-  });
-  var newVirtualFields = schemaFields.filter(function (f) {
-    return !specifiedFieldIds.has(f.id);
-  }).map(function (f) {
-    return _extends({}, defaultColumnConfigForField(f));
-  });
-  var mergedFields = [].concat(keptSpecifiedFields, newVirtualFields);
-  var minimalFullLengthFields = [].concat(specifiedFieldsPartial, newVirtualFields.map(function (f) {
-    return {
-      key: f.key,
-      fieldId: f.fieldId
-    };
-  }));
-  return {
-    mergedFields: mergedFields,
-    minimalFullLengthFields: minimalFullLengthFields
-  };
-}
-
-function tryGetSchema(data) {
-  var _data, _data2;
-  if ((_data = data) != null && _data.schema) {
-    return data.schema;
-  }
-  if (Array.isArray(data)) {
-    data = {
-      data: data
     };
-  }
-  if (!((_data2 = data) != null && _data2.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 (_ref) {
-        var k = _ref[0],
-          v = _ref[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;
+    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,
         }
-      });
-    }
-  });
-  return {
-    id: "inferred",
-    fields: Object.entries(fieldMap).map(function (_ref2) {
-      var f = _ref2[0],
-        t = _ref2[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 = _extends({}, objWithData, {
-    data: objWithData.data
-  });
-  var schema = tryGetSchema(rawData);
-  if (!schema) {
-    return undefined;
-  }
-  return _extends({}, normed, {
-    schema: schema
-  });
+        : undefined;
+    return rowSelection;
 }
-/**
- * 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,
-    _props$data = props.data,
-    rawData = _props$data === void 0 ? {
-      data: [],
-      schema: {
-        id: "inferred",
-        fields: [{
-          id: "id",
-          type: "string",
-          readOnly: false
-        }]
-      }
-    } : _props$data,
-    _props$pagination = props.pagination,
-    pagination = _props$pagination === void 0 ? true : _props$pagination,
-    defaultSize = props.defaultSize,
-    fields = props.fields,
-    setControlContextData = props.setControlContextData,
-    title = props.title,
-    addHref = props.addHref,
-    actions = props.actions,
-    customActionChildren = props.customActionChildren,
-    _props$pageSize = props.pageSize,
-    pageSize = _props$pageSize === void 0 ? 10 : _props$pageSize,
-    _props$scrollX = props.scrollX,
-    scrollX = _props$scrollX === void 0 ? true : _props$scrollX,
-    scrollHeight = props.scrollHeight,
-    hideSearch = props.hideSearch,
-    hideDensity = props.hideDensity,
-    hideColumnPicker = props.hideColumnPicker,
-    hideExports = props.hideExports;
-  var data = normalizeData(rawData);
-  var _useState = useState(""),
-    search = _useState[0],
-    setSearch = _useState[1];
-  var _React$useMemo = React.useMemo(function () {
-      var schema = tryGetSchema(data);
-      if (!data || !schema) {
-        return {
-          normalized: [],
-          columnDefinitions: []
-        };
-      }
-      var _deriveFieldConfigs = deriveFieldConfigs(fields != null ? fields : [], schema),
-        mergedFields = _deriveFieldConfigs.mergedFields,
-        minimalFullLengthFields = _deriveFieldConfigs.minimalFullLengthFields;
-      setControlContextData == null ? void 0 : setControlContextData(_extends({}, 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 renderFormItem(_, _ref3) {
-            var defaultRender = _ref3.defaultRender;
-            return defaultRender(_);
-          },
-          render: function render(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 columnDefinition;
-      });
-      if (actions && actions.length > 0) {
-        columnDefinitions.push({
-          title: "Actions",
-          valueType: "option",
-          key: "__plasmicActions",
-          render: function render(_text, record, _, action) {
-            return [].concat(actions.filter(function (_action) {
-              return !_action.moreMenu;
-            }).map(function (_action, aindex) {
-              return _action.type === "edit" ? React.createElement("a", {
-                key: aindex,
-                onClick: function onClick() {
-                  action == null ? void 0 : action.startEditable == null ? void 0 : action.startEditable(record.id);
-                }
-              }, "Edit") : _action.type === "view" ? React.createElement("a", {
-                key: aindex,
-                href: record.url
-              }, "View") : _action.type === "delete" ? React.createElement("a", {
-                key: aindex,
-                onClick: function onClick() {
-                  // TODO delete
-                }
-              }, "Delete") : customActionChildren;
-            }), [React.createElement(TableDropdown, {
-              key: "actionGroup",
-              onSelect: function onSelect() {
-                return action == null ? void 0 : action.reload();
-              },
-              menus: actions.filter(function (_action) {
-                return !!_action.moreMenu;
-              }).map(function (_action, aindex) {
-                var _action$label;
-                return {
-                  key: "" + aindex,
-                  name: (_action$label = _action.label) != null ? _action$label : _action.type
-                };
-              })
-            })]);
-          }
-        });
-      }
-      return {
-        normalized: normalized,
-        columnDefinitions: columnDefinitions
-      };
-    }, [fields, data, setControlContextData]),
-    columnDefinitions = _React$useMemo.columnDefinitions,
-    normalized = _React$useMemo.normalized;
-  var actionRef = useRef();
-  var _useState2 = useState(undefined),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var finalData = useMemo(function () {
-    var _data$data;
-    var filtered = data == null ? void 0 : (_data$data = data.data) == null ? void 0 : _data$data.filter(function (row) {
-      return fastStringify(Object.values(row)).toLowerCase().includes(search);
-    });
-    var sorted = state != null && state.sorter.column ?
-    // We use .sort() rather than sortBy to use localeCompare
-    function () {
-      var _normalized$find$expr;
-      var expr = (_normalized$find$expr = normalized.find(function (cconfig) {
-        var _state$sorter$column;
-        return cconfig.key === (state == null ? void 0 : (_state$sorter$column = state.sorter.column) == null ? void 0 : _state$sorter$column.key);
-      }).expr) != null ? _normalized$find$expr : function (x) {
-        return x;
-      };
-      return (filtered != null ? filtered : []).sort(function (aa, bb) {
-        var _expr, _expr2;
-        var a = (_expr = expr(aa)) != null ? _expr : null,
-          b = (_expr2 = expr(bb)) != null ? _expr2 : null;
-        // Default nil to '' here because A < null < z which is weird.
-        return typeof a === "string" ? a.localeCompare(b != null ? b : "") : typeof b === "string" ? -b.localeCompare(a != null ? a : "") : a - b;
-      });
-    }() : filtered;
-    var reversed = (state == null ? void 0 : state.sorter.order) === "descend" ? sorted == null ? void 0 : sorted.reverse() : sorted;
-    return reversed;
-  }, [data, normalized, state, search]);
-  var isClient = useIsClient();
-  if (!isClient) {
-    return null;
-  }
-  return React.createElement(React.Fragment, null, React.createElement(ProTable, {
-    actionRef: actionRef,
-    className: className,
-    columns: columnDefinitions,
-    onChange: function onChange(_pagination, _filters, sorter, _extra) {
-      setState({
-        sorter: sorter
-      });
-    },
-    dataSource: finalData,
-    rowKey: "id",
-    defaultSize: defaultSize,
-    editable: {
-      type: "multiple"
-    },
-    search: false,
-    options: {
-      setting: hideColumnPicker ? false : {
-        listsHeight: 400
-      },
-      reload: false,
-      density: !hideDensity
-    },
-    pagination: pagination ? {
-      pageSize: pageSize,
-      onChange: function onChange(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 onChange(e) {
-          return setSearch(e.target.value);
-        },
-        onSearch: function onSearch() {},
-        placeholder: "Search"
-      } : undefined
-    },
-    toolBarRender: function toolBarRender() {
-      return [addHref && React.createElement(Button, {
-        key: "button",
-        icon: React.createElement(PlusOutlined, null),
-        type: "primary",
-        href: addHref
-      }, "Add"), !hideExports && React.createElement(Dropdown, {
-        key: "menu",
-        menu: {
-          items: [{
-            label: "Download as CSV",
-            key: "csv",
-            onClick: function () {
-              var _onClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-                var _tryGetSchema$fields$, _tryGetSchema;
-                var writer, dataStr, filename, blob, link, url;
-                return runtime_1.wrap(function _callee$(_context) {
-                  while (1) {
-                    switch (_context.prev = _context.next) {
-                      case 0:
-                        writer = createObjectCsvStringifier({
-                          header: (_tryGetSchema$fields$ = (_tryGetSchema = tryGetSchema(data)) == null ? void 0 : _tryGetSchema.fields.map(function (f) {
-                            return {
-                              id: f.id,
-                              title: f.id
-                            };
-                          })) != null ? _tryGetSchema$fields$ : []
+function ExportMenu(props) {
+    var _this = this;
+    var data = props.data;
+    return (React.createElement(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 = 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*/];
                         });
-                        dataStr = writer.getHeaderString() + writer.stringifyRecords(data == null ? void 0 : data.data); // const dataStr = stringify(data?.data as any, {
-                        //   columns:
-                        //     tryGetSchema(data)?.fields.map((f) => f.id) ?? [],
-                        //   header: true,
-                        // });
-                        filename = "data.csv"; // Adapted from https://stackoverflow.com/a/68771795
-                        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) {
-                            // Browsers that support HTML5 download attribute
-                            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);
-                          }
-                        }
-                      case 5:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }
-                }, _callee);
-              }));
-              function onClick() {
-                return _onClick.apply(this, arguments);
-              }
-              return onClick;
-            }()
-          }, {
-            label: "Download as JSON",
-            key: "json",
-            onClick: function onClick() {
-              var dataStr = fastStringify(data == null ? void 0 : data.data);
-              var dataUri = "data:application/json;charset=utf-8, " + encodeURIComponent(dataStr);
-              var exportFileDefaultName = "data.json";
-              var linkElement = document.createElement("a");
-              linkElement.setAttribute("href", dataUri);
-              linkElement.setAttribute("download", exportFileDefaultName);
-              linkElement.click();
-            }
-          }]
-        }
-      }, React.createElement(Button, null, React.createElement(EllipsisOutlined, null)))];
-    }
-  }), React.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        "));
+                    }); },
+                },
+                {
+                    label: "Download as JSON",
+                    key: "json",
+                    onClick: function () {
+                        var dataStr = fastStringify(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.createElement(Button, null,
+            React.createElement(EllipsisOutlined, null))));
 }
 
 function ensureNumber(x) {
-  return x;
+    return x;
 }
-var rowDataType = function rowDataType(displayName, control) {
-  return {
-    type: "function",
-    displayName: displayName,
-    control: control,
-    argNames: ["currentItem"],
-    argValues: function argValues(_props, ctx) {
-      var _ctx$data;
-      return [ctx == null ? void 0 : (_ctx$data = ctx.data) == null ? void 0 : _ctx$data[0]];
-    }
-  };
+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, _ref) {
-    var path = _ref.path;
-    return contextData == null ? void 0 : contextData.mergedFields[ensureNumber(path.slice(-2)[0])][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
+    name: "hostless-rich-table",
+    displayName: "Table",
+    defaultStyles: {
+        width: "stretch",
+        padding: "16px",
     },
-    fields: {
-      type: "array",
-      hidden: function hidden(ps) {
-        return !ps.data;
-      },
-      unstable__keyFunc: function unstable__keyFunc(x) {
-        return x.key;
-      },
-      unstable__minimalValue: function unstable__minimalValue(_props, contextData) {
-        return contextData == null ? void 0 : contextData.minimalFullLengthFields;
-      },
-      unstable__canDelete: function unstable__canDelete(_item, _props, ctx, _ref2) {
-        var path = _ref2.path;
-        return !(ctx != null && ctx.mergedFields[ensureNumber(path.slice(-1)[0])].fieldId);
-      },
-      itemType: {
-        type: "object",
-        nameFunc: function nameFunc(_item, _props, ctx, _ref3) {
-          var path = _ref3.path;
-          return ctx == null ? void 0 : ctx.mergedFields[ensureNumber(path.slice(-1)[0])].title;
+    props: {
+        data: {
+            type: "dataSourceOpData",
+            description: "The data to display in the table",
         },
-        fields: {
-          key: {
-            type: "string",
-            hidden: function hidden() {
-              return true;
-            }
-          },
-          fieldId: {
+        defaultSize: {
             type: "choice",
-            displayName: "Field name",
-            readOnly: true,
-            options: function options(_props, ctx) {
-              var _ctx$schema$fields, _ctx$schema;
-              return ((_ctx$schema$fields = ctx == null ? void 0 : (_ctx$schema = ctx.schema) == null ? void 0 : _ctx$schema.fields) != null ? _ctx$schema$fields : []).map(function (f) {
-                return f.id;
-              });
+            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;
             },
-            hidden: function hidden(_props, ctx, _ref4) {
-              var _ctx$schema$fields2, _ctx$schema2;
-              var _controlPath = _ref4.path;
-              return !(_controlPath.slice(-1)[0] in ((_ctx$schema$fields2 = ctx == null ? void 0 : (_ctx$schema2 = ctx.schema) == null ? void 0 : _ctx$schema2.fields) != null ? _ctx$schema$fields2 : {}));
-            }
-          },
-          title: {
-            type: "string",
-            displayName: "Title",
-            defaultValueHint: /*#__PURE__*/getDefaultValueHint("title")
-          },
-          dataType: {
+            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: "Data type",
-            options: ["auto", "number", "string", "boolean"],
-            defaultValueHint: /*#__PURE__*/getDefaultValueHint("dataType")
-          },
-          expr: /*#__PURE__*/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: {
+            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",
-            displayName: "Is hidden",
-            defaultValueHint: /*#__PURE__*/getDefaultValueHint("isHidden")
-          }
-        }
-      }
-    },
-    pagination: {
-      type: "boolean",
-      advanced: true,
-      defaultValueHint: true
-    },
-    scrollX: {
-      type: "boolean",
-      advanced: true,
-      defaultValueHint: true
-    },
-    scrollHeight: {
-      type: "number",
-      advanced: true
-    },
-    hideSearch: {
-      type: "boolean",
-      advanced: true
+            advanced: true,
+            defaultValueHint: true,
+        },
+        hideSearch: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideExports: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideDensity: {
+            type: "boolean",
+            advanced: true,
+        },
+        hideColumnPicker: {
+            type: "boolean",
+            advanced: true,
+        },
     },
-    hideExports: {
-      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),
     },
-    hideDensity: {
-      type: "boolean",
-      advanced: true
+    componentHelpers: {
+        helpers: tableHelpers,
+        importName: "tableHelpers",
+        importPath: "@plasmicpkgs/plasmic-rich-components",
     },
-    hideColumnPicker: {
-      type: "boolean",
-      advanced: true
-    }
-  },
-  importName: "RichTable",
-  importPath: "@plasmicpkgs/plasmic-rich-components"
+    importName: "RichTable",
+    importPath: "@plasmicpkgs/plasmic-rich-components",
 };
 function registerRichTable(loader) {
-  registerComponentHelper(loader, RichTable, dataTableMeta);
+    registerComponentHelper(loader, RichTable, dataTableMeta);
 }
 
 function registerAll(loader) {
-  registerRichLayout(loader);
-  registerRichTable(loader);
+    registerRichLayout(loader);
+    registerRichTable(loader);
 }
 
-export { RichLayout, RichTable, registerAll };
+export { RichLayout, RichTable, registerAll, tableHelpers };
 //# sourceMappingURL=plasmic-rich-components.esm.js.map