tw-react-components 0.0.175 → 0.0.177

package/index.esm.js

@@ -1617,7 +1617,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                             .map((action, actionIndex) => {
                                             var _a;
                                             const notification = (_a = action.hasNotification) === null || _a === void 0 ? void 0 : _a.call(action, item, rowIndex);
-                                            return (jsxs("div", { className: "relative", children: [jsx(Button, { size: "small", prefixIcon: action.icon, color: action.color, onClick: handleActionClicked(action, item, rowIndex), children: action.label, dataTestId: `${dataTestId}-action-button-${rowIndex}-${actionIndex}` }), notification &&
+                                            return (jsxs("div", { className: "relative", children: [jsx(Button, { size: "small", prefixIcon: action.icon, color: action.color, loading: action.loading, onClick: handleActionClicked(action, item, rowIndex), children: action.label, dataTestId: `${dataTestId}-action-button-${rowIndex}-${actionIndex}` }), notification &&
                                                         (notification === true ? (jsx(Hint.Dot, {})) : notification.type === 'dot' ? (jsx(Hint.Dot, Object.assign({}, notification.props))) : (jsx(Hint.Badge, Object.assign({}, notification.props))))] }, actionIndex));
                                         }) }) }))] }, rowIndex),
                         rowExtraContent && expandedRows[rowExtraContent.idGetter(item)] && (jsx(Table.Row, { dataTestId: `${dataTestId}-expanded-row-${rowIndex}`, children: jsx(Table.Cell, { className: "p-0", colSpan: columnsLength, dataTestId: `${dataTestId}-expanded-cell-${rowIndex}`, children: jsx(rowExtraContent.component, { item: item, rowIndex: rowIndex }) }) }, `${rowIndex}-expanded`)),
@@ -1683,8 +1683,13 @@ const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, on
     const [loading, setLoading] = useState(false);
     const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
-        yield onConfirm();
-        setLoading(false);
+        try {
+            yield onConfirm();
+        }
+        catch (_a) {
+            setLoading(false);
+        }
+        onClose();
     });
     return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), children, jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, "data-testid": `${dataTestId}-no-button`, children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleConfirm, "data-testid": `${dataTestId}-yes-button`, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' })] })] }) }));
 };
@@ -1788,8 +1793,13 @@ function ListSorterDialog({ className, open, title, items, idResolver, renderer,
     }, [items, open]);
     const handleSubmit = () => __awaiter(this, void 0, void 0, function* () {
         setLoading(true);
-        yield onSubmit(sortedItems);
-        setLoading(false);
+        try {
+            yield onSubmit(sortedItems);
+        }
+        catch (_a) {
+            setLoading(false);
+        }
+        onClose();
     });
     const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-hidden dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700", "data-testid": `${dataTestId}-drag-handle-${index}` }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
     return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleSubmit, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/DataTable/index.d.ts

@@ -43,6 +43,7 @@ export type DataTableAction<T> = {
     } | boolean;
     color?: Color;
     hide?: boolean | ((item: T) => boolean);
+    loading?: boolean;
     onClick: (item: T, rowIndex: number) => void;
 };
 export type DataTableProps<T> = {