@plasmicpkgs/plasmic-rich-components 1.0.42 → 1.0.43

package/dist/plasmic-rich-components.cjs.development.js

@@ -4,10 +4,432 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var React = require('react');
+var React__default = _interopDefault(React);
 var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
-var host = require('@plasmicapp/host');
+require('@plasmicapp/host/registerGlobalContext');
+var icons = require('@ant-design/icons');
+var proComponents = require('@ant-design/pro-components');
 var antd = require('antd');
-var React = _interopDefault(require('react'));
+var host = require('@plasmicapp/host');
+var sync = require('csv-stringify/sync');
+var fastStringify = _interopDefault(require('fast-stringify'));
+
+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;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function useIsClient() {
+  var _useState = React.useState(false),
+    loaded = _useState[0],
+    setLoaded = _useState[1];
+  React.useEffect(function () {
+    setLoaded(true);
+  });
+  return loaded;
+}
+function capitalize(text) {
+  return text.slice(0, 1).toUpperCase() + text.slice(1);
+}
+
+function registerComponentHelper(loader, component, meta) {
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+}
+
+var _excluded = ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className"];
+function RichLayout(_ref) {
+  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 _location = location,
+    pathname = _location.pathname;
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(proComponents.ProLayout, Object.assign({}, layoutProps, {
+    // 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__default.createElement(antd.Dropdown, {
+          menu: {
+            items: [{
+              key: "logout",
+              icon: React__default.createElement(icons.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__default.createElement("a", {
+        href: item.path
+      }, dom);
+    },
+    headerTitleRender: function headerTitleRender(logo, title, _) {
+      return React__default.createElement("a", {
+        href: rootUrl
+      }, logo, title);
+    }
+  }), children));
+}
+
+function generateNavMenuType(remainingDepth, displayName, defaultValue) {
+  return {
+    displayName: displayName ? displayName : "Nested items",
+    type: "array",
+    defaultValue: defaultValue,
+    itemType: {
+      type: "object",
+      nameFunc: function nameFunc(item) {
+        return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
+      },
+      fields: _extends({
+        path: "string",
+        name: "string"
+      }, remainingDepth === 0 ? {} : {
+        routes: generateNavMenuType(remainingDepth - 1)
+      })
+    }
+  };
+}
+var richLayoutMeta = {
+  name: "hostless-rich-layout",
+  displayName: "Rich Layout",
+  props: {
+    children: "slot",
+    actionsChildren: "slot",
+    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: "/welcome",
+      name: "Welcome"
+    }, {
+      path: "/admin",
+      name: "Admin",
+      // icon: <CrownFilled />,
+      // access: "canAdmin",
+      // component: "./Admin",
+      routes: [{
+        path: "/admin/sub-page1",
+        name: "Sub page 1"
+      }, {
+        path: "/admin/sub-page2",
+        name: "Sub page 2"
+      }, {
+        path: "/admin/sub-page3",
+        name: "Sub page 3"
+      }]
+    }, {
+      name: "List",
+      // icon: <TabletFilled />,
+      path: "/list",
+      // component: "./ListTableList",
+      routes: [{
+        path: "/list/sub-page",
+        name: "Page group",
+        // icon: <CrownFilled />,
+        routes: [{
+          path: "sub-sub-page1",
+          name: "Sub sub page 1"
+        }, {
+          path: "sub-sub-page2",
+          name: "Sub sub page 2"
+        }, {
+          path: "sub-sub-page3",
+          name: "Sub sub page 3"
+        }]
+      }, {
+        path: "/list/sub-page2",
+        name: "Sub page 2"
+      }, {
+        path: "/list/sub-page3",
+        name: "Sub page 3"
+      }]
+    }, {
+      path: "https://ant.design",
+      name: "Extern link"
+    }]),
+    layout: {
+      displayName: "Layout",
+      type: "choice",
+      options: /*#__PURE__*/["side", "top", "mix"].map(function (value) {
+        return {
+          value: value,
+          label: capitalize(value)
+        };
+      }),
+      defaultValue: "mix"
+    },
+    // 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",
+      defaultValue: true,
+    },
+    fixSiderbar: {
+      displayName: "Sticky sidebar",
+      type: "boolean",
+      defaultValue: true,
+    },
+    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/dist/rich-layout/RichLayout"
+};
+function registerRichLayout(loader) {
+  registerComponentHelper(loader, RichLayout, richLayoutMeta);
+}
+
+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;
+  // Ugly: when adding a new item to an array from Plasmic Studio UI, no way to specify default values for the new item,
+  // so we have to do it here. The only one we need is the random key.
+  for (var _iterator = _createForOfIteratorHelperLoose(specifiedFieldsPartial), _step; !(_step = _iterator()).done;) {
+    var field = _step.value;
+    if (!field.key) {
+      field.key = mkShortId();
+    }
+  }
+  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(), {
+      fieldId: field.id,
+      title: field.label || field.id,
+      expr: function expr(currentItem) {
+        return currentItem[field.id];
+      }
+    });
+  }
+  var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f) {
+    var fieldId = f.fieldId;
+    if (!fieldId) {
+      return [_extends({}, defaultColumnConfig(), 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;
@@ -50,141 +472,404 @@ function tryGetSchema(data) {
     })
   };
 }
-function DataTable(props) {
+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
+  });
+}
+function RichTable(props) {
+  var _data$data;
   var className = props.className,
-    data = props.data,
-    children = props.children,
-    size = props.size,
-    columns = props.columns,
-    onSelect = props.onSelect,
-    pagination = props.pagination,
-    setControlContextData = props.setControlContextData;
-  var columnDefinitions = React.useMemo(function () {
-    var _ref3;
-    var schema = tryGetSchema(data);
-    if (!schema) {
-      return [];
-    }
-    setControlContextData == null ? void 0 : setControlContextData(schema);
-    return ((_ref3 = columns && columns.length > 0 ? columns : undefined) != null ? _ref3 : schema.fields.map(function (f) {
-      return f.id;
-    })).map(function (columnId, columnIndex, columnsArray) {
-      var _schema$fields$find;
-      var columnDefinition = {
-        columnIndex: columnIndex,
-        title: ((_schema$fields$find = schema.fields.find(function (f) {
-          return f.id === columnId;
-        })) == null ? void 0 : _schema$fields$find.label) || columnId,
-        dataIndex: columnId,
-        key: columnId,
-        render: function render(value, record, rowIndex) {
-          return React.createElement(host.DataProvider, {
-            name: "currentRow",
-            data: record
-          }, React.createElement(host.DataProvider, {
-            name: "currentRowIndex",
-            data: rowIndex
-          }, React.createElement(host.DataProvider, {
-            name: "currentColumn",
-            data: value
-          }, children && (typeof children === "object" ? (Array.isArray(children) ? children : [children]).map(function (child) {
-            return host.repeatedElement(rowIndex * columnsArray.length + columnIndex, child);
-          }) : children))));
-        }
+    _props$data = props.data,
+    rawData = _props$data === void 0 ? {
+      data: [],
+      schema: {
+        id: "inferred",
+        fields: [{
+          id: "id",
+          type: "string",
+          readOnly: false
+        }]
+      }
+    } : _props$data,
+    defaultSize = props.defaultSize,
+    fields = props.fields,
+    setControlContextData = props.setControlContextData,
+    title = props.title,
+    addHref = props.addHref,
+    actions = props.actions,
+    customActionChildren = props.customActionChildren,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
+    _props$pageSize = props.pageSize,
+    pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize;
+  var data = normalizeData(rawData);
+  var _useState = React.useState(""),
+    search = _useState[0],
+    setSearch = _useState[1];
+  var _React$useMemo = React__default.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__default.createElement(host.DataProvider, {
+              name: "currentRow",
+              data: record
+            }, React__default.createElement(host.DataProvider, {
+              name: "currentRowIndex",
+              data: rowIndex
+            }, React__default.createElement(host.DataProvider, {
+              name: "currentColumn",
+              data: value
+            }, cconfig.expr ? cconfig.expr(record) : record)));
+          }
+        };
+        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__default.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__default.createElement("a", {
+                key: aindex,
+                href: record.url
+              }, "View") : _action.type === "delete" ? React__default.createElement("a", {
+                key: aindex,
+                onClick: function onClick() {
+                  // TODO delete
+                }
+              }, "Delete") : customActionChildren;
+            }), [React__default.createElement(proComponents.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
       };
-      return columnDefinition;
-    });
-  }, [children, columns, data, setControlContextData]);
-  return React.createElement(antd.Table, {
+    }, [fields, data, setControlContextData, Math.random()]),
+    columnDefinitions = _React$useMemo.columnDefinitions;
+  var actionRef = React.useRef();
+  var isClient = useIsClient();
+  if (!isClient) {
+    return null;
+  }
+  // return <NestedTest {...{ fields }} />;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(proComponents.ProTable, {
+    actionRef: actionRef,
     className: className,
     columns: columnDefinitions,
-    dataSource: data == null ? void 0 : data.data,
-    size: size,
-    onRow: function onRow(record) {
-      return {
-        onMouseUp: function onMouseUp() {
-          return onSelect == null ? void 0 : onSelect(record.id);
-        }
-      };
+    dataSource: data == null ? void 0 : (_data$data = data.data) == null ? void 0 : _data$data.filter(function (row) {
+      return fastStringify(Object.values(row)).toLowerCase().includes(search);
+    }),
+    rowKey: "id",
+    defaultSize: defaultSize,
+    // request={() =>
+    //   Promise.resolve({
+    //     data: data?.data?.filter((row) =>
+    //       fastStringify(row).toLowerCase().includes(search)
+    //     ),
+    //     success: true,
+    //   })
+    // }
+    editable: {
+      type: "multiple"
     },
-    pagination: pagination ? undefined : pagination,
-    rowKey: "id"
-  });
-}
-function TableValue(props) {
-  var _column$toString;
-  var className = props.className;
-  var column = host.useSelector("currentColumn");
-  return React.createElement("div", {
-    className: className
-  }, (_column$toString = column == null ? void 0 : column.toString()) != null ? _column$toString : "");
+    search: false,
+    options: {
+      setting: {
+        listsHeight: 400
+      }
+    },
+    pagination: {
+      pageSize: pageSize,
+      onChange: function onChange(page) {
+        return console.log(page);
+      }
+    },
+    dateFormatter: "string",
+    headerTitle: title,
+    toolbar: {
+      search: showSearch ? {
+        value: search,
+        onChange: function onChange(e) {
+          return setSearch(e.target.value);
+        },
+        onSearch: function onSearch() {},
+        placeholder: "Search"
+      } : undefined
+    },
+    toolBarRender: function toolBarRender() {
+      return [addHref && React__default.createElement(antd.Button, {
+        key: "button",
+        icon: React__default.createElement(icons.PlusOutlined, null),
+        type: "primary",
+        href: addHref
+      }, "Add"), React__default.createElement(antd.Dropdown, {
+        key: "menu",
+        menu: {
+          items: [{
+            label: "Download as CSV",
+            key: "csv",
+            onClick: function onClick() {
+              var _tryGetSchema$fields$, _tryGetSchema;
+              var dataStr = sync.stringify(data == null ? void 0 : data.data, {
+                columns: (_tryGetSchema$fields$ = (_tryGetSchema = tryGetSchema(data)) == null ? void 0 : _tryGetSchema.fields.map(function (f) {
+                  return f.id;
+                })) != null ? _tryGetSchema$fields$ : [],
+                header: true
+              });
+              var filename = "data.csv";
+              // Adapted from https://stackoverflow.com/a/68771795
+              var blob = new Blob([dataStr], {
+                type: "text/csv;charset=utf-8;"
+              });
+              if (navigator.msSaveBlob) {
+                // In case of IE 10+
+                navigator.msSaveBlob(blob, filename);
+              } else {
+                var link = document.createElement("a");
+                if (link.download !== undefined) {
+                  // Browsers that support HTML5 download attribute
+                  var 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);
+                }
+              }
+            }
+          }, {
+            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__default.createElement(antd.Button, null, React__default.createElement(icons.EllipsisOutlined, null)))];
+    }
+  }), React__default.createElement("style", null, "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          .ant-pro-table-list-toolbar-right {\n            flex-wrap: initial;\n            flex-shrink: 0;\n          }\n        "));
 }
 
-var dataTableValueMeta = {
-  name: "hostless-plasmic-rich-components-value",
-  displayName: "Table Value",
-  parentComponentName: "hostless-plasmic-rich-components",
-  props: {},
-  importName: "TableValue",
-  importPath: ""
+function ensureNumber(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]];
+    }
+  };
 };
+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];
+  };
+}
 var dataTableMeta = {
-  name: "hostless-plasmic-rich-components",
-  displayName: "Data Table",
+  name: "hostless-rich-table",
+  displayName: "Rich Table",
   props: {
     data: {
       type: "dataSourceOpData",
       description: "The data to display in the table"
     },
-    children: {
-      type: "slot",
-      defaultValue: {
-        type: "component",
-        name: "hostless-plasmic-rich-components-value"
-      }
-    },
-    size: {
+    defaultSize: {
       type: "choice",
       options: ["large", "middle", "small"],
       defaultValueHint: "large"
     },
-    pagination: {
-      type: "boolean",
-      defaultValueHint: true
+    // TODO
+    // pagination: {
+    //   type: "boolean",
+    //   defaultValueHint: true,
+    // },
+    pageSize: {
+      type: "number",
+      defaultValueHint: 20
     },
-    columns: {
-      type: "choice",
-      options: function options(_props, schema) {
-        if (!schema) {
-          return [];
-        }
-        return schema.fields.map(function (f) {
-          return {
-            label: f.label || f.id,
-            value: f.id
-          };
-        });
+    fields: {
+      type: "array",
+      unstable__keyFunc: function unstable__keyFunc(x) {
+        return x.key;
       },
-      multiSelect: true
+      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;
+        },
+        fields: {
+          key: {
+            type: "string",
+            hidden: function hidden() {
+              return true;
+            }
+          },
+          fieldId: {
+            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;
+              });
+            },
+            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: {
+            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: {
+            type: "boolean",
+            displayName: "Is hidden",
+            defaultValueHint: /*#__PURE__*/getDefaultValueHint("isHidden")
+          }
+        }
+      }
     }
   },
-  importName: "TableWrapper",
-  importPath: "DataTable"
+  importName: "RichTable",
+  importPath: "@plasmicpkgs/plasmic-rich-components/dist/rich-table/RichTable"
 };
+function registerRichTable(loader) {
+  registerComponentHelper(loader, RichTable, dataTableMeta);
+}
+
 function registerAll(loader) {
-  var _registerComponent = function _registerComponent(Component, defaultMeta) {
-    if (loader) {
-      loader.registerComponent(Component, defaultMeta);
-    } else {
-      registerComponent(Component, defaultMeta);
-    }
-  };
-  _registerComponent(DataTable, dataTableMeta);
-  _registerComponent(TableValue, dataTableValueMeta);
+  registerRichLayout(loader);
+  registerRichTable(loader);
 }
 
-exports.DataTable = DataTable;
-exports.TableValue = TableValue;
-exports.default = DataTable;
 exports.registerAll = registerAll;
 //# sourceMappingURL=plasmic-rich-components.cjs.development.js.map