@gridsuite/commons-ui 0.92.3 → 0.93.1

package/dist/components/checkBoxList/CheckBoxList.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box } from "@mui/material";
-import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { DragDropContext, Droppable } from "@hello-pangea/dnd";
 import { CheckBoxListItems } from "./CheckBoxListItems.js";
 function CheckBoxList({
   isDndDragAndDropActive = false,

package/dist/components/checkBoxList/CheckBoxListItems.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { List, ListItem, ListItemButton, ListItemIcon, Checkbox, ListItemText } from "@mui/material";
 import { FormattedMessage } from "react-intl";
-import { Draggable } from "react-beautiful-dnd";
+import { Draggable } from "@hello-pangea/dnd";
 import { CheckBoxListItem } from "./CheckBoxListItem.js";
 import { OverflowableText } from "../overflowableText/OverflowableText.js";
 import { DraggableCheckBoxListItem } from "./DraggableCheckBoxListItem.js";

package/dist/components/checkBoxList/checkBoxList.type.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
+import { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
 import { SxProps, Theme } from '@mui/material';
 export type CheckBoxListItemSx = {
     checkBoxIcon?: SxProps<Theme>;

package/dist/components/filter/FilterCreationDialog.d.ts

@@ -8,5 +8,9 @@ export interface FilterCreationDialogProps {
         id: UUID;
         equipmentType: string;
     };
+    filterType: {
+        id: string;
+        label: string;
+    };
 }
-export declare function FilterCreationDialog({ open, onClose, activeDirectory, language, sourceFilterForExplicitNamingConversion, }: FilterCreationDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterCreationDialog({ open, onClose, activeDirectory, language, sourceFilterForExplicitNamingConversion, filterType, }: FilterCreationDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/FilterCreationDialog.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { saveExplicitNamingFilter, saveExpertFilter } from "./utils/filterApi.js";
@@ -18,7 +18,6 @@ import * as yup from "yup";
 const emptyFormData = {
   [FieldConstants.NAME]: "",
   [FieldConstants.DESCRIPTION]: "",
-  [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
   [FieldConstants.EQUIPMENT_TYPE]: null,
   ...getExplicitNamingFilterEmptyFormData(),
   ...getExpertFilterEmptyFormData()
@@ -26,7 +25,6 @@ const emptyFormData = {
 const formSchema = yup.object().shape({
   [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
   [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, "descriptionLimitError"),
-  [FieldConstants.FILTER_TYPE]: yup.string().required(),
   [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
   ...explicitNamingFilterSchema,
   ...expertFilterSchema
@@ -36,7 +34,8 @@ function FilterCreationDialog({
   onClose,
   activeDirectory,
   language,
-  sourceFilterForExplicitNamingConversion = void 0
+  sourceFilterForExplicitNamingConversion = void 0,
+  filterType
 }) {
   var _a;
   const { snackError } = useSnackMessage();
@@ -51,7 +50,7 @@ function FilterCreationDialog({
   const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
   const onSubmit = useCallback(
     (filterForm) => {
-      if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPLICIT_NAMING.id) {
+      if ((filterType == null ? void 0 : filterType.id) === FilterType.EXPLICIT_NAMING.id) {
         saveExplicitNamingFilter(
           filterForm[FILTER_EQUIPMENTS_ATTRIBUTES],
           true,
@@ -67,7 +66,7 @@ function FilterCreationDialog({
           onClose,
           activeDirectory
         );
-      } else if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPERT.id) {
+      } else if ((filterType == null ? void 0 : filterType.id) === FilterType.EXPERT.id) {
         saveExpertFilter(
           null,
           filterForm[EXPERT_FILTER_QUERY],
@@ -85,8 +84,17 @@ function FilterCreationDialog({
         );
       }
     },
-    [activeDirectory, snackError, onClose]
+    [activeDirectory, snackError, onClose, filterType]
   );
+  const titleId = useMemo(() => {
+    if (sourceFilterForExplicitNamingConversion) {
+      return "convertIntoExplicitNamingFilter";
+    }
+    if ((filterType == null ? void 0 : filterType.id) === FilterType.EXPERT.id) {
+      return "createNewCriteriaFilter";
+    }
+    return "createNewExplicitNamingFilter";
+  }, [sourceFilterForExplicitNamingConversion, filterType]);
   return /* @__PURE__ */ jsx(
     CustomMuiDialog,
     {
@@ -95,7 +103,7 @@ function FilterCreationDialog({
       onSave: onSubmit,
       formSchema,
       formMethods,
-      titleId: sourceFilterForExplicitNamingConversion ? "convertIntoExplicitNamingFilter" : "createNewFilter",
+      titleId,
       removeOptional: true,
       disabledSave: !!nameError || !!isValidating,
       language,
@@ -105,6 +113,7 @@ function FilterCreationDialog({
         {
           creation: true,
           activeDirectory,
+          filterType,
           sourceFilterForExplicitNamingConversion
         }
       )

package/dist/components/filter/FilterForm.d.ts

@@ -1,2 +1,2 @@
 import { FilterFormProps } from './HeaderFilterForm';
-export declare function FilterForm({ sourceFilterForExplicitNamingConversion, creation, activeDirectory, }: Readonly<FilterFormProps>): import("react/jsx-runtime").JSX.Element;
+export declare function FilterForm({ sourceFilterForExplicitNamingConversion, creation, activeDirectory, filterType, }: Readonly<FilterFormProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/FilterForm.js

@@ -1,51 +1,40 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useEffect } from "react";
 import { HeaderFilterForm } from "./HeaderFilterForm.js";
-import { FieldConstants } from "../../utils/constants/fieldConstants.js";
 import { ExplicitNamingFilterForm } from "./explicitNaming/ExplicitNamingFilterForm.js";
 import { ExpertFilterForm } from "./expert/ExpertFilterForm.js";
 import { FilterType } from "./constants/FilterConstants.js";
 import { unscrollableDialogStyles } from "../dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "react";
 import "react-intl";
+import "react-hook-form";
 import "@mui/icons-material";
 import "../treeViewFinder/TreeViewFinder.js";
 import "notistack";
 function FilterForm({
   sourceFilterForExplicitNamingConversion,
   creation,
-  activeDirectory
+  activeDirectory,
+  filterType
 }) {
-  const { setValue } = useFormContext();
-  const filterType = useWatch({ name: FieldConstants.FILTER_TYPE });
-  const handleFilterTypeChange = (_event, value) => {
-    setValue(FieldConstants.FILTER_TYPE, value);
-  };
-  useEffect(() => {
-    if (sourceFilterForExplicitNamingConversion) {
-      setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id);
-    }
-  }, [sourceFilterForExplicitNamingConversion, setValue]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Box, { sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(
       HeaderFilterForm,
       {
         creation,
         activeDirectory,
-        sourceFilterForExplicitNamingConversion,
-        handleFilterTypeChange
+        sourceFilterForExplicitNamingConversion
       }
     ) }),
-    filterType === FilterType.EXPLICIT_NAMING.id && /* @__PURE__ */ jsx(
+    (filterType == null ? void 0 : filterType.id) === FilterType.EXPLICIT_NAMING.id && /* @__PURE__ */ jsx(
       ExplicitNamingFilterForm,
       {
         sourceFilterForExplicitNamingConversion
       }
     ),
-    filterType === FilterType.EXPERT.id && /* @__PURE__ */ jsx(ExpertFilterForm, {})
+    (filterType == null ? void 0 : filterType.id) === FilterType.EXPERT.id && /* @__PURE__ */ jsx(ExpertFilterForm, {})
   ] });
 }
 export {

package/dist/components/filter/HeaderFilterForm.d.ts

@@ -13,16 +13,18 @@ export declare const filterStyles: {
 export interface FilterFormProps {
     creation?: boolean;
     activeDirectory?: UUID;
+    filterType?: {
+        id: string;
+        label: string;
+    };
     sourceFilterForExplicitNamingConversion?: {
         id: UUID;
         equipmentType: string;
     };
-    handleFilterTypeChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
 }
 export declare const HeaderFilterSchema: {
     name: yup.StringSchema<string, yup.AnyObject, undefined, "">;
-    filterType: yup.StringSchema<string, yup.AnyObject, undefined, "">;
     equipmentType: yup.StringSchema<string, yup.AnyObject, undefined, "">;
     description: yup.StringSchema<string | undefined, yup.AnyObject, undefined, "">;
 };
-export declare function HeaderFilterForm({ sourceFilterForExplicitNamingConversion, creation, activeDirectory, handleFilterTypeChange, }: Readonly<FilterFormProps>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderFilterForm({ creation, activeDirectory }: Readonly<FilterFormProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/HeaderFilterForm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
 import { FieldConstants } from "../../utils/constants/fieldConstants.js";
 import { MAX_CHAR_DESCRIPTION } from "../../utils/constants/uiConstants.js";
@@ -7,7 +7,6 @@ import "@mui/icons-material";
 import { ElementType } from "../../utils/types/elementType.js";
 import "../../utils/types/equipmentType.js";
 import "../../utils/yupConfig.js";
-import { FilterType } from "./constants/FilterConstants.js";
 import "react-intl";
 import "react";
 import "react-hook-form";
@@ -23,7 +22,6 @@ import "../customAGGrid/customAggrid.js";
 import "ag-grid-community";
 import "react-papaparse";
 import "react-csv-downloader";
-import { RadioInput } from "../inputs/reactHookForm/booleans/RadioInput.js";
 import "../inputs/reactHookForm/numbers/RangeInput.js";
 import "localized-countries";
 import "localized-countries/data/fr";
@@ -48,17 +46,10 @@ const filterStyles = {
 };
 const HeaderFilterSchema = {
   [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
-  [FieldConstants.FILTER_TYPE]: yup.string().required(),
   [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
   [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, "descriptionLimitError")
 };
-function HeaderFilterForm({
-  sourceFilterForExplicitNamingConversion,
-  creation,
-  activeDirectory,
-  handleFilterTypeChange
-}) {
-  const filterTypes = Object.values(FilterType);
+function HeaderFilterForm({ creation, activeDirectory }) {
   return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
     /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
       UniqueNameInput,
@@ -72,17 +63,7 @@ function HeaderFilterForm({
         fullWidth: false
       }
     ) }),
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) }),
-      creation && !sourceFilterForExplicitNamingConversion && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        RadioInput,
-        {
-          name: FieldConstants.FILTER_TYPE,
-          options: filterTypes,
-          formProps: { onChange: handleFilterTypeChange }
-        }
-      ) })
-    ] })
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(DescriptionField, { expandingTextSx: filterStyles.description }) })
   ] });
 }
 export {

package/dist/components/filter/expert/ExpertFilterEditionDialog.js

@@ -7,7 +7,7 @@ import { FetchStatus } from "../../../utils/constants/fetchStatus.js";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import "../../../utils/yupConfig.js";
 import { CustomMuiDialog } from "../../dialogs/customMuiDialog/CustomMuiDialog.js";
-import { FilterType, NO_ITEM_SELECTION_FOR_COPY } from "../constants/FilterConstants.js";
+import { NO_ITEM_SELECTION_FOR_COPY, FilterType } from "../constants/FilterConstants.js";
 import { FilterForm } from "../FilterForm.js";
 import { saveExpertFilter } from "../utils/filterApi.js";
 import { expertFilterSchema } from "./ExpertFilterForm.js";
@@ -54,7 +54,6 @@ function ExpertFilterEditionDialog({
         reset({
           [FieldConstants.NAME]: name,
           [FieldConstants.DESCRIPTION]: description,
-          [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
           [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
           [EXPERT_FILTER_QUERY]: importExpertRules(response[EXPERT_FILTER_QUERY])
         });
@@ -108,7 +107,7 @@ function ExpertFilterEditionDialog({
       isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
       language,
       unscrollableFullHeight: true,
-      children: isDataReady && /* @__PURE__ */ jsx(FilterForm, { activeDirectory })
+      children: isDataReady && /* @__PURE__ */ jsx(FilterForm, { activeDirectory, filterType: FilterType.EXPERT })
     }
   );
 }

package/dist/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js

@@ -12,7 +12,7 @@ import { saveExplicitNamingFilter } from "../utils/filterApi.js";
 import { explicitNamingFilterSchema } from "./ExplicitNamingFilterForm.js";
 import { FetchStatus } from "../../../utils/constants/fetchStatus.js";
 import { FilterForm } from "../FilterForm.js";
-import { FilterType, NO_ITEM_SELECTION_FOR_COPY } from "../constants/FilterConstants.js";
+import { NO_ITEM_SELECTION_FOR_COPY, FilterType } from "../constants/FilterConstants.js";
 import { HeaderFilterSchema } from "../HeaderFilterForm.js";
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from "./ExplicitNamingFilterConstants.js";
 import * as yup from "yup";
@@ -55,7 +55,6 @@ function ExplicitNamingFilterEditionDialog({
         reset({
           [FieldConstants.NAME]: name,
           [FieldConstants.DESCRIPTION]: description,
-          [FieldConstants.FILTER_TYPE]: FilterType.EXPLICIT_NAMING.id,
           [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
           [FILTER_EQUIPMENTS_ATTRIBUTES]: (_a2 = response[FILTER_EQUIPMENTS_ATTRIBUTES]) == null ? void 0 : _a2.map((row) => ({
             [FieldConstants.AG_GRID_ROW_UUID]: v4(),
@@ -109,7 +108,7 @@ function ExplicitNamingFilterEditionDialog({
       isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
       language,
       unscrollableFullHeight: true,
-      children: isDataReady && /* @__PURE__ */ jsx(FilterForm, { activeDirectory })
+      children: isDataReady && /* @__PURE__ */ jsx(FilterForm, { activeDirectory, filterType: FilterType.EXPLICIT_NAMING })
     }
   );
 }

package/dist/components/index.js

@@ -93,6 +93,7 @@ import { GroupValueEditor } from "./inputs/reactQueryBuilder/compositeRuleEditor
 import { RuleValueEditor } from "./inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js";
 import { useConvertValue } from "./inputs/reactQueryBuilder/hooks/useConvertValue.js";
 import { useValid } from "./inputs/reactQueryBuilder/hooks/useValid.js";
+import { ActivableChip } from "./inputs/ActivableChip.js";
 import { MultipleSelectionDialog } from "./multipleSelectionDialog/MultipleSelectionDialog.js";
 import { OverflowableText } from "./overflowableText/OverflowableText.js";
 import { SnackbarProvider } from "./snackbarProvider/SnackbarProvider.js";
@@ -106,6 +107,7 @@ import { useNotificationsListener } from "./notifications/hooks/useNotifications
 import { useListenerManager } from "./notifications/hooks/useListenerManager.js";
 export {
   AboutDialog,
+  ActivableChip,
   AddButton,
   AuthenticationRouter,
   default2 as AuthenticationRouterErrorDisplay,

package/dist/components/inputs/ActivableChip.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export interface ActivableChipProps {
+    isActivated: boolean;
+    label: string;
+    tooltipMessage: string;
+    onClick: () => void;
+    isDisabled?: boolean;
+}
+export declare function ActivableChip(props: Readonly<ActivableChipProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/ActivableChip.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, Chip } from "@mui/material";
+import { CheckCircleOutline, Cancel } from "@mui/icons-material";
+function ActivableChip(props) {
+  const { isActivated, label, tooltipMessage, onClick, isDisabled } = props;
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipMessage, arrow: true, children: /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label,
+      deleteIcon: isActivated ? /* @__PURE__ */ jsx(CheckCircleOutline, {}) : /* @__PURE__ */ jsx(Cancel, {}),
+      color: "primary",
+      size: "small",
+      variant: isActivated ? "filled" : "outlined",
+      onDelete: onClick,
+      onClick,
+      disabled: isDisabled
+    }
+  ) });
+}
+export {
+  ActivableChip
+};

package/dist/components/inputs/index.d.ts

@@ -7,3 +7,4 @@
 export * from './SelectClearable';
 export * from './reactHookForm';
 export * from './reactQueryBuilder';
+export * from './ActivableChip';

package/dist/components/inputs/index.js

@@ -51,7 +51,9 @@ import { GroupValueEditor } from "./reactQueryBuilder/compositeRuleEditor/GroupV
 import { RuleValueEditor } from "./reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js";
 import { useConvertValue } from "./reactQueryBuilder/hooks/useConvertValue.js";
 import { useValid } from "./reactQueryBuilder/hooks/useValid.js";
+import { ActivableChip } from "./ActivableChip.js";
 export {
+  ActivableChip,
   AddButton,
   AutocompleteInput,
   AutocompleteWithFavorites,

package/dist/index.js

@@ -94,6 +94,7 @@ import { GroupValueEditor } from "./components/inputs/reactQueryBuilder/composit
 import { RuleValueEditor } from "./components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js";
 import { useConvertValue } from "./components/inputs/reactQueryBuilder/hooks/useConvertValue.js";
 import { useValid } from "./components/inputs/reactQueryBuilder/hooks/useValid.js";
+import { ActivableChip } from "./components/inputs/ActivableChip.js";
 import { MultipleSelectionDialog } from "./components/multipleSelectionDialog/MultipleSelectionDialog.js";
 import { OverflowableText } from "./components/overflowableText/OverflowableText.js";
 import { SnackbarProvider } from "./components/snackbarProvider/SnackbarProvider.js";
@@ -189,6 +190,7 @@ import * as yup from "yup";
 export {
   AMPERE,
   AboutDialog,
+  ActivableChip,
   AddButton,
   AuthenticationRouter,
   default3 as AuthenticationRouterErrorDisplay,

package/dist/translations/en/filterEn.d.ts

@@ -45,6 +45,8 @@ export declare const filterEn: {
     missingDistributionKeyError: string;
     filterCsvFileName: string;
     createNewFilter: string;
+    createNewCriteriaFilter: string;
+    createNewExplicitNamingFilter: string;
     nameProperty: string;
     Countries: string;
     Countries1: string;

package/dist/translations/en/filterEn.js

@@ -39,6 +39,8 @@ const filterEn = {
   missingDistributionKeyError: "Missing distribution key",
   filterCsvFileName: "filterCreation",
   createNewFilter: "Create a filter",
+  createNewCriteriaFilter: "Create a criteria based filter",
+  createNewExplicitNamingFilter: "Create an explicit naming filter",
   nameProperty: "Name",
   Countries: "Countries",
   Countries1: "Countries 1",

package/dist/translations/fr/filterFr.d.ts

@@ -45,6 +45,8 @@ export declare const filterFr: {
     missingDistributionKeyError: string;
     filterCsvFileName: string;
     createNewFilter: string;
+    createNewCriteriaFilter: string;
+    createNewExplicitNamingFilter: string;
     nameProperty: string;
     Countries: string;
     Countries1: string;

package/dist/translations/fr/filterFr.js

@@ -39,6 +39,8 @@ const filterFr = {
   missingDistributionKeyError: "Clé de répartition manquante",
   filterCsvFileName: "creationFiltre",
   createNewFilter: "Créer un filtre",
+  createNewCriteriaFilter: "Créer un filtre par critères",
+  createNewExplicitNamingFilter: "Créer un filtre par nommage",
   nameProperty: "Nom",
   Countries: "Pays",
   Countries1: "Pays 1",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.92.3",
+    "version": "0.93.1",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",
@@ -34,6 +34,7 @@
         "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\""
     },
     "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
         "@react-querybuilder/dnd": "^8.2.0",
         "@react-querybuilder/material": "^8.2.0",
         "autosuggest-highlight": "^3.3.4",
@@ -42,7 +43,6 @@
         "localized-countries": "^2.0.0",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
-        "react-beautiful-dnd": "^13.1.1",
         "react-csv-downloader": "^3.3.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
@@ -96,7 +96,6 @@
         "@types/node": "^22.13.4",
         "@types/prop-types": "^15.7.14",
         "@types/react": "^18.3.18",
-        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.3.5",
         "@types/react-resizable": "^3.0.8",
         "@typescript-eslint/eslint-plugin": "^7.18.0",