@comet/admin 9.0.0-beta.3 → 9.0.0-beta.5

package/lib/dataGrid/__stories__/DataGridSingleSelectFilter.stories.js

@@ -0,0 +1,492 @@
+import { Check, Close, Education } from "@comet/admin-icons";
+import { Box } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { DataGridToolbar } from "../../common/toolbar/DataGridToolbar";
+import { GridCellContent } from "../GridCellContent";
+import { GridFilterButton } from "../GridFilterButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/dataGrid/DataGridSingleSelectFilter"
+};
+
+// Sample data
+var rows = [{
+  id: 1,
+  name: "Product A",
+  category: "electronics",
+  status: "active",
+  priority: "high",
+  department: "sales"
+}, {
+  id: 2,
+  name: "Product B",
+  category: "clothing",
+  status: "inactive",
+  priority: "medium",
+  department: "marketing"
+}, {
+  id: 3,
+  name: "Product C",
+  category: "electronics",
+  status: "active",
+  priority: "low",
+  department: "sales"
+}, {
+  id: 4,
+  name: "Product D",
+  category: "furniture",
+  status: "pending",
+  priority: "high",
+  department: "operations"
+}, {
+  id: 5,
+  name: "Product E",
+  category: "clothing",
+  status: "active",
+  priority: "medium",
+  department: "sales"
+}, {
+  id: 6,
+  name: "Product F",
+  category: "electronics",
+  status: "inactive",
+  priority: "low",
+  department: "marketing"
+}, {
+  id: 7,
+  name: "Product G",
+  category: "furniture",
+  status: "active",
+  priority: "high",
+  department: "operations"
+}, {
+  id: 8,
+  name: "Product H",
+  category: "clothing",
+  status: "pending",
+  priority: "medium",
+  department: "sales"
+}];
+
+// Story 1: Basic single select with simple string options
+export var BasicSingleSelect = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: ["active", "inactive", "pending"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "Basic SingleSelect Filter"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          initialState: {
+            filter: {
+              filterModel: {
+                items: []
+              }
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 2: Single select with custom labels
+export var WithCustomLabels = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "🔴 High Priority"
+      }, {
+        value: "medium",
+        label: "🟡 Medium Priority"
+      }, {
+        value: "low",
+        label: "🟢 Low Priority"
+      }]
+    }, {
+      field: "department",
+      headerName: "Department",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "sales",
+        label: "💼 Sales Department"
+      }, {
+        value: "marketing",
+        label: "📢 Marketing Department"
+      }, {
+        value: "operations",
+        label: "⚙️ Operations Department"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Custom Labels"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 3: Single select with long labels (showcases vertical expansion)
+export var WithLongLabels = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "electronics",
+        label: "Electronics and Computer Equipment with Accessories"
+      }, {
+        value: "clothing",
+        label: "Clothing, Apparel, and Fashion Items for All Seasons"
+      }, {
+        value: "furniture",
+        label: "Furniture, Home Decor, and Interior Design Products"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Long Labels"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 4: Single select with many options
+export var WithManyOptions = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category (Many Options)",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture", "books", "toys", "sports", "automotive", "food", "health", "beauty", "tools", "garden", "pet supplies", "office supplies", "musical instruments"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Many Options"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 5: Single select with custom cell content
+export var WithCustomCellContent = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "status",
+      headerName: "Status with Icon",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "active",
+        label: "Active Status",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Active",
+          icon: /*#__PURE__*/_jsx(Check, {
+            color: "success"
+          })
+        })
+      }, {
+        value: "inactive",
+        label: "Inactive Status",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Inactive",
+          icon: /*#__PURE__*/_jsx(Close, {
+            color: "error"
+          })
+        })
+      }, {
+        value: "pending",
+        label: "Pending Review",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Pending",
+          icon: /*#__PURE__*/_jsx(Education, {
+            color: "warning"
+          })
+        })
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Custom Cell Content"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 6: Multiple single select columns
+export var MultipleSingleSelectColumns = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 140,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: ["active", "inactive", "pending"]
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "High"
+      }, {
+        value: "medium",
+        label: "Medium"
+      }, {
+        value: "low",
+        label: "Low"
+      }]
+    }, {
+      field: "department",
+      headerName: "Department",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["sales", "marketing", "operations"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "Multiple SingleSelect Columns"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 7: Different density modes
+
+export var DifferentDensityModes = {
+  args: {
+    density: "standard"
+  },
+  argTypes: {
+    density: {
+      name: "Density",
+      control: "select",
+      options: ["standard", "comfortable", "compact"]
+    }
+  },
+  render: function render(_ref) {
+    var density = _ref.density;
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "active",
+        label: "Active Status"
+      }, {
+        value: "inactive",
+        label: "Inactive Status"
+      }, {
+        value: "pending",
+        label: "Pending Review"
+      }]
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "🔴 High Priority"
+      }, {
+        value: "medium",
+        label: "🟡 Medium Priority"
+      }, {
+        value: "low",
+        label: "🟢 Low Priority"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsxs(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: ["SingleSelect Filter - ", density, " Density"]
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          density: density,
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};

package/lib/error/errorHandler/ErrorHandlerProvider.d.ts

@@ -0,0 +1,8 @@
+import { type ErrorInfo, type PropsWithChildren } from "react";
+interface ErrorHandlerContextValue {
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+export declare function ErrorHandlerProvider({ children, onError }: PropsWithChildren<ErrorHandlerContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare const useErrorHandler: () => ErrorHandlerContextValue;
+export {};
+//# sourceMappingURL=ErrorHandlerProvider.d.ts.map

package/lib/error/errorHandler/ErrorHandlerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorHandlerProvider.d.ts","sourceRoot":"","sources":["../../../src/error/errorHandler/ErrorHandlerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE1F,UAAU,wBAAwB;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1D;AAID,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CAEtG;AAED,eAAO,MAAM,eAAe,gCAE3B,CAAC"}

package/lib/error/errorHandler/ErrorHandlerProvider.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ErrorHandlerContext = /*#__PURE__*/createContext({});
+export function ErrorHandlerProvider(_ref) {
+  var children = _ref.children,
+    onError = _ref.onError;
+  return /*#__PURE__*/_jsx(ErrorHandlerContext.Provider, {
+    value: {
+      onError: onError
+    },
+    children: children
+  });
+}
+export var useErrorHandler = function useErrorHandler() {
+  return useContext(ErrorHandlerContext);
+};

package/lib/error/errorboundary/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/error/errorboundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAAO,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAA6B,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,MAAM,MAAM,qBAAqB,GAC3B,OAAO,GACP,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,sBAAsB,GACtB,4BAA4B,GAC5B,4BAA4B,GAC5B,uBAAuB,GACvB,qBAAqB,CAAC;AAM5B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IAC/C,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC,GACE,wBAAwB,CAAC;IACrB,KAAK,EAAE,OAAO,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,UAAU,CAAC;IAC3B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,0BAA0B,EAAE,KAAK,CAAC;IAClC,0BAA0B,EAAE,KAAK,CAAC;IAClC,qBAAqB,EAAE,OAAO,UAAU,CAAC;IACzC,mBAAmB,EAAE,OAAO,UAAU,CAAC;CAC1C,CAAC,CAAC;AA6FP,eAAO,MAAM,aAAa,GAAI,SAAS,kBAAkB,4CAGxD,CAAC;AAsEF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,uBAAuB,EAAE,qBAAqB,CAAC;KAClD;IAED,UAAU,mBAAmB;QACzB,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;IAED,UAAU,UAAU;QAChB,uBAAuB,CAAC,EAAE;YACtB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,yBAAyB,CAAC,CAAC,CAAC;YACvE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,yBAAyB,CAAC,CAAC;SAC1E,CAAC;KACL;CACJ"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/error/errorboundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAAO,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAA6B,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAGvF,MAAM,MAAM,qBAAqB,GAC3B,OAAO,GACP,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,sBAAsB,GACtB,4BAA4B,GAC5B,4BAA4B,GAC5B,uBAAuB,GACvB,qBAAqB,CAAC;AAM5B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IAC/C,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC,GACE,wBAAwB,CAAC;IACrB,KAAK,EAAE,OAAO,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,UAAU,CAAC;IAC3B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,0BAA0B,EAAE,KAAK,CAAC;IAClC,0BAA0B,EAAE,KAAK,CAAC;IAClC,qBAAqB,EAAE,OAAO,UAAU,CAAC;IACzC,mBAAmB,EAAE,OAAO,UAAU,CAAC;CAC1C,CAAC,CAAC;AAiGP,eAAO,MAAM,aAAa,GAAI,SAAS,kBAAkB,4CAIxD,CAAC;AAwEF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,uBAAuB,EAAE,qBAAqB,CAAC;KAClD;IAED,UAAU,mBAAmB;QACzB,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;IAED,UAAU,UAAU;QAChB,uBAAuB,CAAC,EAAE;YACtB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,yBAAyB,CAAC,CAAC,CAAC;YACvE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,yBAAyB,CAAC,CAAC;SAC1E,CAAC;KACL;CACJ"}

package/lib/error/errorboundary/ErrorBoundary.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["variant", "icon", "toggleDetailsOpenedIcon", "toggleDetailsClosedIcon", "children", "slotProps", "userErrorMessage", "key"];
+var _excluded = ["variant", "icon", "toggleDetailsOpenedIcon", "toggleDetailsClosedIcon", "children", "slotProps", "userErrorMessage", "key", "onError"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -26,6 +26,7 @@ import { css, useThemeProps } from "@mui/material/styles";
 import { Component } from "react";
 import { FormattedMessage } from "react-intl";
 import { createComponentSlot } from "../../helpers/createComponentSlot";
+import { useErrorHandler } from "../errorHandler/ErrorHandlerProvider";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var Alert = createComponentSlot(MuiAlert)({
   componentName: "ErrorBoundary",
@@ -82,7 +83,11 @@ export var ErrorBoundary = function ErrorBoundary(inProps) {
     props: inProps,
     name: "CometAdminErrorBoundary"
   });
-  return /*#__PURE__*/_jsx(CoreErrorBoundary, _objectSpread({}, props));
+  var _useErrorHandler = useErrorHandler(),
+    onError = _useErrorHandler.onError;
+  return /*#__PURE__*/_jsx(CoreErrorBoundary, _objectSpread(_objectSpread({}, props), {}, {
+    onError: onError
+  }));
 };
 var CoreErrorBoundary = /*#__PURE__*/function (_Component) {
   function CoreErrorBoundary(props) {
@@ -96,35 +101,38 @@ var CoreErrorBoundary = /*#__PURE__*/function (_Component) {
   return _createClass(CoreErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(error, errorInfo) {
+      var _this$props$onError, _this$props;
       this.setState(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           error: error,
           errorInfo: errorInfo
         });
       });
+      (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props, error, errorInfo);
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        _this$props$variant = _this$props.variant,
-        variant = _this$props$variant === void 0 ? "filled" : _this$props$variant,
-        _this$props$icon = _this$props.icon,
-        icon = _this$props$icon === void 0 ? /*#__PURE__*/_jsx(Error, {}) : _this$props$icon,
-        _this$props$toggleDet = _this$props.toggleDetailsOpenedIcon,
-        toggleDetailsOpenedIcon = _this$props$toggleDet === void 0 ? /*#__PURE__*/_jsx(ChevronRight, {
+      var _this$props2 = this.props,
+        _this$props2$variant = _this$props2.variant,
+        variant = _this$props2$variant === void 0 ? "filled" : _this$props2$variant,
+        _this$props2$icon = _this$props2.icon,
+        icon = _this$props2$icon === void 0 ? /*#__PURE__*/_jsx(Error, {}) : _this$props2$icon,
+        _this$props2$toggleDe = _this$props2.toggleDetailsOpenedIcon,
+        toggleDetailsOpenedIcon = _this$props2$toggleDe === void 0 ? /*#__PURE__*/_jsx(ChevronRight, {
           fontSize: "small"
-        }) : _this$props$toggleDet,
-        _this$props$toggleDet2 = _this$props.toggleDetailsClosedIcon,
-        toggleDetailsClosedIcon = _this$props$toggleDet2 === void 0 ? /*#__PURE__*/_jsx(ChevronDown, {
+        }) : _this$props2$toggleDe,
+        _this$props2$toggleDe2 = _this$props2.toggleDetailsClosedIcon,
+        toggleDetailsClosedIcon = _this$props2$toggleDe2 === void 0 ? /*#__PURE__*/_jsx(ChevronDown, {
           fontSize: "small"
-        }) : _this$props$toggleDet2,
-        children = _this$props.children,
-        slotProps = _this$props.slotProps,
-        userErrorMessage = _this$props.userErrorMessage,
-        key = _this$props.key,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
+        }) : _this$props2$toggleDe2,
+        children = _this$props2.children,
+        slotProps = _this$props2.slotProps,
+        userErrorMessage = _this$props2.userErrorMessage,
+        key = _this$props2.key,
+        onError = _this$props2.onError,
+        restProps = _objectWithoutProperties(_this$props2, _excluded);
       var _this$state = this.state,
         error = _this$state.error,
         errorInfo = _this$state.errorInfo,

package/lib/form/FinalFormInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FinalFormInput.d.ts","sourceRoot":"","sources":["../../src/form/FinalFormInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQzD,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG;IAC/C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,KAAK,2BAA2B,GAAG,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAEpG,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,yBAAyB,EACzB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,mBAAmB,GAAG,2BAA2B,2CAsDnD"}
+{"version":3,"file":"FinalFormInput.d.ts","sourceRoot":"","sources":["../../src/form/FinalFormInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQzD,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG;IAC/C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,KAAK,2BAA2B,GAAG,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAEpG,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,yBAAyB,EACzB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,mBAAmB,GAAG,2BAA2B,2CAuDnD"}

package/lib/form/FinalFormInput.js

@@ -42,7 +42,7 @@ export function FinalFormInput(_ref) {
     translationEnabled = _useContentTranslatio.enabled,
     showApplyTranslationDialog = _useContentTranslatio.showApplyTranslationDialog,
     translate = _useContentTranslatio.translate;
-  var isTranslatable = translationEnabled && !disableContentTranslation && type === "text" && !props.disabled;
+  var isTranslatable = translationEnabled && !disableContentTranslation && (type === "text" || type === "textarea") && !props.disabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -108,7 +108,8 @@ export function FinalFormInput(_ref) {
       },
       originalText: input.value,
       translatedText: pendingTranslation,
-      onApplyTranslation: input.onChange
+      onApplyTranslation: input.onChange,
+      multiline: props.multiline
     })]
   });
 }