feat: sync changes from v2 to v2-develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.36.0-rc.2",
+  "version": "2.38.0",
   "engines": {
     "node": "20.5.0"
   },

src/actionbar/ActionButton.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { LoadingOutlined } from "@ant-design/icons";
+import { ButtonProps } from "antd";
 
-type Props = {
+type Props = ButtonProps & {
   tooltip: string;
   onClick: any;
   icon: any;
@@ -21,6 +22,7 @@ function ActionButton(props: Props) {
     icon,
     label,
     type = "default",
+    ...restProps
   } = props;
   const finalIcon = loading ? <LoadingOutlined /> : icon;
 
@@ -30,11 +32,16 @@ function ActionButton(props: Props) {
       tooltip={tooltip}
       onClick={onClick}
       disabled={disabled}
+      {...restProps}
     >
       {finalIcon}
       {label}
     </ButtonWithTooltip>
   );
 }
 
+export const ActionDangerButton = (props: Props) => {
+  return <ActionButton {...props} type="primary" danger={true} />;
+};
+
 export default ActionButton;

src/actionbar/FormActionBar.tsx

@@ -13,7 +13,7 @@ import {
   InfoCircleOutlined,
 } from "@ant-design/icons";
 import ChangeViewButton from "./ChangeViewButton";
-import ActionButton from "./ActionButton";
+import ActionButton, { ActionDangerButton } from "./ActionButton";
 import { useActionViewContext } from "@/context/ActionViewContext";
 import NewButton from "./NewButton";
 import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
@@ -224,7 +224,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
           })
         }
       />
-      <ActionButton
+      <ActionDangerButton
         icon={<DeleteOutlined />}
         tooltip={t("delete")}
         disabled={mustDisableButtons || currentId === undefined}

src/actionbar/NewButton.tsx

@@ -40,6 +40,7 @@ function NewButton(props: Props) {
       tooltip={t("new")}
       onClick={onNewClicked}
       disabled={disabled}
+      type="primary"
     />
   );
 }

src/actionbar/TreeActionBar.tsx

@@ -6,7 +6,7 @@ import {
   ActionViewContextType,
 } from "@/context/ActionViewContext";
 import NewButton from "./NewButton";
-import ActionButton from "./ActionButton";
+import ActionButton, { ActionDangerButton } from "./ActionButton";
 import Icon, {
   DeleteOutlined,
   PrinterOutlined,
@@ -260,7 +260,7 @@ function TreeActionBar(props: Props) {
             loading={duplicatingItem}
             onClick={tryDuplicate}
           />
-          <ActionButton
+          <ActionDangerButton
             icon={<DeleteOutlined />}
             tooltip={t("delete")}
             disabled={

src/widgets/base/one2many/One2manyTopBar.tsx

@@ -10,7 +10,7 @@ import {
   ApiOutlined,
 } from "@ant-design/icons";
 import { ViewType } from "@/types";
-import { theme } from "antd";
+import { theme, Badge } from "antd";
 const { useToken } = theme;
 
 type One2manyTopBarProps = {
@@ -74,16 +74,20 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
 
   function deleteButton() {
     return (
-      <ButtonWithTooltip
-        tooltip={isMany2Many ? "Unlink" : "Delete"}
-        icon={isMany2Many ? <ApiOutlined /> : <DeleteOutlined />}
-        onClick={onDelete}
-        disabled={
-          totalItems === 0 ||
-          readOnly ||
-          (mode !== "form" && selectedRowKeys.length === 0)
-        }
-      />
+      <Badge count={selectedRowKeys.length}>
+        <ButtonWithTooltip
+          tooltip={isMany2Many ? "Unlink" : "Delete"}
+          icon={isMany2Many ? <ApiOutlined /> : <DeleteOutlined />}
+          onClick={onDelete}
+          danger={!isMany2Many}
+          type={isMany2Many ? "default" : "primary"}
+          disabled={
+            totalItems === 0 ||
+            readOnly ||
+            (mode !== "form" && selectedRowKeys.length === 0)
+          }
+        />
+      </Badge>
     );
   }