@plasmicpkgs/plasmic-rich-components 1.0.67 → 1.0.70

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

@@ -198,7 +198,10 @@ var richLayoutMeta = {
     name: "hostless-rich-layout",
     displayName: "Rich Page Layout",
     props: {
-        children: "slot",
+        children: {
+            type: "slot",
+            unstable__isMainContentSlot: true,
+        },
         actionsChildren: {
             type: "slot",
             hidePlaceholder: true,
@@ -471,25 +474,24 @@ function RichTable(props) {
     // children,
     _b = props.pagination, 
     // children,
-    pagination = _b === void 0 ? true : _b, defaultSize = props.defaultSize, title = props.title, addHref = props.addHref, _c = props.pageSize, pageSize = _c === void 0 ? 10 : _c, hideSearch = props.hideSearch, hideDensity = props.hideDensity, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, rowKey = props.rowKey;
+    pagination = _b === void 0 ? true : _b, defaultSize = props.defaultSize, title = props.title, addHref = props.addHref, _c = props.pageSize, pageSize = _c === void 0 ? 10 : _c, hideSearch = props.hideSearch, _d = props.hideDensity, hideDensity = _d === void 0 ? true : _d, hideColumnPicker = props.hideColumnPicker, hideExports = props.hideExports, _e = props.hideSelectionBar, hideSelectionBar = _e === void 0 ? true : _e, rowKey = props.rowKey, scopeClassName = props.scopeClassName; props.themeResetClassName;
     var data = normalizeData(rawData);
-    var _d = useColumnDefinitions(data, props), columnDefinitions = _d.columnDefinitions, normalized = _d.normalized;
+    var _f = useColumnDefinitions(data, props), columnDefinitions = _f.columnDefinitions, normalized = _f.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 _g = useSortedFilteredData(data, normalized), finalData = _g.finalData, search = _g.search, setSearch = _g.setSearch, setSortState = _g.setSortState;
+    var rowSelectionProps = useRowSelectionProps(data, props);
     var isClient = useIsClient();
     if (!isClient) {
         return null;
     }
-    return (React.createElement("div", { className: className },
-        React.createElement(ProTable, { actionRef: actionRef, columns: columnDefinitions, onChange: function (_pagination, _filters, sorter, _extra) {
+    return (React.createElement("div", { className: "".concat(className, " ").concat(scopeClassName !== null && scopeClassName !== void 0 ? scopeClassName : "") },
+        React.createElement(ProTable, __assign({ 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: {
+            } }, rowSelectionProps, { dataSource: finalData, rowKey: deriveRowKey(data, rowKey), defaultSize: defaultSize, editable: { type: "multiple" }, search: false, options: {
                 setting: hideColumnPicker
                     ? false
                     : {
@@ -503,10 +505,7 @@ function RichTable(props) {
                     onChange: function (page) { return console.log(page); },
                     showSizeChanger: false,
                 }
-                : 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: {
+                : false, dateFormatter: "string", headerTitle: title, toolbar: {
                 search: !hideSearch
                     ? {
                         value: search,
@@ -517,12 +516,16 @@ function RichTable(props) {
                         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 }),
-            ]; } }),
+            }, 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 }),
+                ].filter(function (x) { return !!x; });
+            } })),
         React.createElement("style", { dangerouslySetInnerHTML: {
-                __html: "\n          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {\n            display: none;\n          }\n          .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      ",
+                __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, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {\n            position: sticky;\n            top: 0;\n            z-index: 2;\n          }\n          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {\n            z-index: 3;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td {\n            z-index: 0;\n          }\n          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {\n            z-index: 1;\n          }\n          ".concat(scopeClassName && hideSelectionBar
+                    ? "\n          .".concat(scopeClassName, " .ant-pro-table-alert {\n            display: none;\n          }\n          ")
+                    : "", "\n      "),
             } })));
 }
 function deriveRowKey(data, rowKey) {
@@ -536,8 +539,19 @@ function deriveRowKey(data, rowKey) {
     }
     return undefined;
 }
+function deriveKeyOfRow(row, rowKey) {
+    if (typeof rowKey === "function") {
+        return rowKey(row);
+    }
+    else if (typeof rowKey === "string") {
+        return row[rowKey];
+    }
+    else {
+        return undefined;
+    }
+}
 function useColumnDefinitions(data, props) {
-    var fields = props.fields, setControlContextData = props.setControlContextData, actions = props.actions, customActionChildren = props.customActionChildren;
+    var fields = props.fields, setControlContextData = props.setControlContextData, rowActions = props.rowActions;
     return React.useMemo(function () {
         var schema = tryGetSchema(data);
         if (!data || !schema) {
@@ -588,35 +602,40 @@ function useColumnDefinitions(data, props) {
             };
             return columnDefinition;
         });
-        if (actions && actions.length > 0) {
+        if (rowActions && rowActions.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); },
+                fixed: "right",
+                className: props.themeResetClassName,
+                render: function (_text, row) { return __spreadArray([], rowActions.map(function (_action) {
+                    var _a;
+                    if (_action.type === "item") {
+                        return (React.createElement("a", { key: _action.label, style: {
+                                whiteSpace: "nowrap",
+                            }, onClick: function () {
+                                var _a;
+                                return (_a = _action.onClick) === null || _a === void 0 ? void 0 : _a.call(_action, deriveKeyOfRow(row, deriveRowKey(data, props.rowKey)), row);
+                            } }, _action.label));
+                    }
+                    else {
+                        return (React.createElement(TableDropdown, { key: _action.label, style: {
+                                whiteSpace: "nowrap",
+                            }, menus: ((_a = _action.children) !== null && _a !== void 0 ? _a : []).map(function (child) { return ({
+                                key: child.label,
+                                name: child.label,
+                                onClick: function () {
+                                    var _a;
+                                    return (_a = child.onClick) === null || _a === void 0 ? void 0 : _a.call(child, deriveKeyOfRow(row, deriveRowKey(data, props.rowKey)), row);
+                                },
+                            }); }) }, _action.label));
+                    }
+                }), true); },
             });
         }
         return { normalized: normalized, columnDefinitions: columnDefinitions };
-    }, [fields, data, setControlContextData, actions, customActionChildren]);
+    }, [fields, data, setControlContextData, rowActions]);
 }
 function useSortedFilteredData(data, columns) {
     var _a = useState(""), search = _a[0], setSearch = _a[1];
@@ -653,8 +672,8 @@ function useSortedFilteredData(data, columns) {
         setSortState: setSortState,
     };
 }
-function useRowSelection(data, props) {
-    var canSelectRows = props.canSelectRows, selectedRowKey = props.selectedRowKey, onRowSelectionChanged = props.onRowSelectionChanged, rowKey = props.rowKey;
+function useRowSelectionProps(data, props) {
+    var canSelectRows = props.canSelectRows, selectedRowKey = props.selectedRowKey, onRowSelectionChanged = props.onRowSelectionChanged, rowKey = props.rowKey, onRowClick = props.onRowClick;
     var deriveSelectedRowKeys = function () {
         if (!canSelectRows ||
             canSelectRows === "none" ||
@@ -665,7 +684,7 @@ function useRowSelection(data, props) {
             return [selectedRowKey];
         }
         else if (Array.isArray(selectedRowKey)) {
-            if (canSelectRows === "single") {
+            if (canSelectRows === "single" || canSelectRows === "click") {
                 return selectedRowKey.slice(0, 1);
             }
             else {
@@ -677,16 +696,46 @@ function useRowSelection(data, props) {
         }
     };
     var rowSelection = canSelectRows && canSelectRows !== "none"
-        ? {
-            type: canSelectRows === "single" ? "radio" : "checkbox",
-            selectedRowKeys: deriveSelectedRowKeys(),
-            onChange: function (rowKeys, rows) {
+        ? __assign({ type: canSelectRows === "single" || canSelectRows === "click"
+                ? "radio"
+                : "checkbox", selectedRowKeys: deriveSelectedRowKeys(), onChange: function (rowKeys, rows) {
                 onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged(rowKeys, rows);
+            }, alwaysShowAlert: true }, (canSelectRows === "click" && {
+            renderCell: function () { return null; },
+            columnWidth: 0,
+            columnTitle: null,
+            hideSelectAll: true,
+        })) : undefined;
+    return {
+        rowSelection: rowSelection,
+        onRow: function (row) { return ({
+            onClick: function (event) {
+                var key = deriveKeyOfRow(row, deriveRowKey(data, rowKey));
+                if (key) {
+                    if (canSelectRows === "click") {
+                        // Some heuristics to avoid selecting a row when
+                        // the object clicked is interactable -- like button, anchor,
+                        // input, etc.  This won't be bulletproof, so just some
+                        // heuristics!
+                        var target = event.target;
+                        if (!isInteractable(target)) {
+                            onRowSelectionChanged === null || onRowSelectionChanged === void 0 ? void 0 : onRowSelectionChanged([key], [row]);
+                        }
+                    }
+                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(key, row, event);
+                }
             },
-            alwaysShowAlert: true,
-        }
-        : undefined;
-    return rowSelection;
+        }); },
+    };
+}
+function isInteractable(target) {
+    if (["A", "BUTTON", "INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) {
+        return true;
+    }
+    if (target.contentEditable === "true") {
+        return true;
+    }
+    return false;
 }
 function ExportMenu(props) {
     var _this = this;
@@ -893,10 +942,12 @@ var dataTableMeta = {
             displayName: "Select rows?",
             options: [
                 { label: "No", value: "none" },
-                { label: "Single", value: "single" },
-                { label: "Multiple", value: "multiple" },
+                { label: "By clicking a row", value: "click" },
+                { label: "Using radio buttons", value: "single" },
+                { label: "Using checkboxes", value: "multiple" },
             ],
             defaultValueHint: "none",
+            description: "Lets user select table rows by clicking on a row, or using radio buttons, or checkboxes if multiple rows can be selected together. If you have interactive elements in your row and you don't want clicking on them to select the row, you may use radio buttons instead.",
         },
         rowKey: {
             type: "string",
@@ -925,6 +976,65 @@ var dataTableMeta = {
                 { name: "rows", type: "object" },
             ],
         },
+        onRowClick: {
+            type: "eventHandler",
+            displayName: "On row clicked",
+            argTypes: [
+                { name: "rowKey", type: "string" },
+                { name: "row", type: "object" },
+                { name: "event", type: "object" },
+            ],
+        },
+        rowActions: {
+            type: "array",
+            displayName: "Row actions",
+            advanced: true,
+            itemType: {
+                type: "object",
+                nameFunc: function (ps) { return ps.label; },
+                fields: {
+                    type: {
+                        type: "choice",
+                        options: ["item", "menu"],
+                        defaultValue: "item",
+                    },
+                    label: {
+                        type: "string",
+                        displayName: "Action label",
+                    },
+                    children: {
+                        type: "array",
+                        displayName: "Menu items",
+                        itemType: {
+                            type: "object",
+                            fields: {
+                                label: {
+                                    type: "string",
+                                    displayName: "Action label",
+                                },
+                                onClick: {
+                                    type: "eventHandler",
+                                    argTypes: [
+                                        { name: "rowKey", type: "string" },
+                                        { name: "row", type: "object" },
+                                    ],
+                                },
+                            },
+                        },
+                        hidden: function (ps) { return ps.type !== "menu"; },
+                    },
+                    onClick: {
+                        type: "eventHandler",
+                        displayName: "Action",
+                        argTypes: [
+                            { name: "rowKey", type: "string" },
+                            { name: "row", type: "object" },
+                        ],
+                        hidden: function (ps) { return ps.type !== "item"; },
+                    },
+                },
+            },
+        },
         pagination: {
             type: "boolean",
             advanced: true,
@@ -932,19 +1042,39 @@ var dataTableMeta = {
         },
         hideSearch: {
             type: "boolean",
+            description: "Hides the search toolbar",
             advanced: true,
         },
         hideExports: {
             type: "boolean",
+            description: "Hides the button for exporting table data to CSV",
             advanced: true,
         },
         hideDensity: {
             type: "boolean",
+            description: "Hides the control for changing the density of the table",
             advanced: true,
+            defaultValueHint: true,
         },
         hideColumnPicker: {
             type: "boolean",
+            description: "Hides the control for reordering and pinning columns",
+            advanced: true,
+        },
+        hideSelectionBar: {
+            type: "boolean",
+            description: "Hides the toolbar that allows the user to clear selection",
             advanced: true,
+            hidden: function (ps) { return !ps.canSelectRows || ps.canSelectRows === "none"; },
+            defaultValueHint: true,
+        },
+        scopeClassName: {
+            type: "styleScopeClass",
+            scopeName: "instance",
+        },
+        themeResetClassName: {
+            type: "themeResetClass",
+            targetAllTags: true,
         },
     },
     states: {