@quillsql/react 2.15.16 → 2.15.17

package/dist/index.js

@@ -620,9 +620,12 @@ var formatPercent = (value) => {
   return formatterPercent.format(Number(value));
 };
 var _getUTCDateHelper = (value, fmt) => {
+  if (value === null || value === void 0) {
+    return "-";
+  }
   const parsedDate = parse(value, fmt, /* @__PURE__ */ new Date());
   const utcDate = isValid(parsedDate) ? utcToZonedTime(parsedDate, "UTC") : utcToZonedTime(new Date(value), "UTC");
-  if (!isValid(utcDate)) return value;
+  if (!isValid(utcDate)) return "-";
   return format(utcDate, fmt);
 };
 var format_YYYY = (value) => _getUTCDateHelper(value, "yyyy");
@@ -633,8 +636,11 @@ var format_MMM_dd_yyyy = (value) => {
   return _getUTCDateHelper(value, "dd MMM yyyy");
 };
 var format_MMM_d_MMM_d = (value, dateRange, databaseType) => {
+  if (value === null || value === void 0) {
+    return "-";
+  }
   const utcDate = parseISO(value.split("T")[0]);
-  if (!isValid(utcDate)) return "Invalid date";
+  if (!isValid(utcDate)) return "-";
   let weekStartsOn = 1;
   if (databaseType && ["mssql"].includes(databaseType)) {
     weekStartsOn = 0;
@@ -665,15 +671,21 @@ var format_MMM_d_MMM_d = (value, dateRange, databaseType) => {
   }
 };
 var format_MMM_dd_hh_mm_ap_pm = (value) => {
+  if (value === null || value === void 0) {
+    return "-";
+  }
   const utcDate = utcToZonedTime(new Date(value), "UTC");
-  if (!isValid(utcDate)) return "Invalid date";
+  if (!isValid(utcDate)) return "-";
   const formatStr = utcDate.getMinutes() === 0 ? "MMM do h a" : "MMM do h:mm a";
   const res = format(utcDate, formatStr);
   return res.slice(0, -2) + res.slice(-2).toLowerCase();
 };
 var format_wo_yyyy = (value) => {
+  if (value === null || value === void 0) {
+    return "-";
+  }
   const utcDate = utcToZonedTime(new Date(value), "UTC");
-  if (!isValid(utcDate)) return "Invalid date";
+  if (!isValid(utcDate)) return "-";
   return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
 };
 function parseNumber(value) {
@@ -28384,7 +28396,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ jsxs22(ChartTooltipFrame2,
             paddingTop: 2,
             paddingBottom: 2
           },
-          children: !isNaN(new Date(props.label)) && props.dateFormatter ? props.dateFormatter(props.label) : !isNaN(new Date(props.label)) ? format6(new Date(props.label), "MMM yyyy") : props.label
+          children: props.label && !isNaN(new Date(props.label)) && props.dateFormatter ? props.dateFormatter(props.label) : props.label && !isNaN(new Date(props.label)) ? format6(new Date(props.label), "MMM yyyy") : props.label || "-"
         }
       )
     }
@@ -28433,9 +28445,9 @@ function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
       const nameKey = isComparison ? `comparison_${props.xAxisField}` : props.xAxisField;
       const days = LABEL_TO_DAYS[primaryLabel] ?? 0;
       const primaryDate = item.payload[props.xAxisField] ?? 0;
-      const compDate = subDays2(new Date(primaryDate), days + 1);
+      const compDate = primaryDate ? subDays2(new Date(primaryDate), days + 1) : /* @__PURE__ */ new Date();
       const date = item.payload[nameKey] ?? format6(compDate, props.xAxisFormat);
-      const name2 = props.dateFormatter(date);
+      const name2 = props.dateFormatter ? props.dateFormatter(date) : date;
       const color2 = item.color;
       const value = props.valueFormatter(item.value, item.name);
       if (!columnsByKey[""]) {
@@ -28467,7 +28479,7 @@ function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
   return columnsByKey;
 }
 function getTooltipLabel(props, altTooltipLabel, isDateXAxis) {
-  return props.payload.length <= 2 && altTooltipLabel && isDateXAxis ? !isNaN(new Date(altTooltipLabel)) && props.dateFormatter ? props.dateFormatter(altTooltipLabel) : !isNaN(new Date(altTooltipLabel)) ? format6(new Date(altTooltipLabel), "MMM yyyy") : altTooltipLabel : !isNaN(new Date(props.label)) && props.dateFormatter ? props.dateFormatter(props.label) : !isNaN(new Date(props.label)) ? format6(new Date(props.label), "MMM yyyy") : props.label;
+  return props.payload.length <= 2 && altTooltipLabel && isDateXAxis ? altTooltipLabel && !isNaN(new Date(altTooltipLabel)) && props.dateFormatter ? props.dateFormatter(altTooltipLabel) : altTooltipLabel && !isNaN(new Date(altTooltipLabel)) ? format6(new Date(altTooltipLabel), "MMM yyyy") : altTooltipLabel || "-" : props.label && !isNaN(new Date(props.label)) && props.dateFormatter ? props.dateFormatter(props.label) : props.label && !isNaN(new Date(props.label)) ? format6(new Date(props.label), "MMM yyyy") : props.label || "-";
 }
 function ChartTooltipComparison(props) {
   const isDateXAxis = isDateFormat(props.xAxisFormat);
@@ -39043,6 +39055,22 @@ import {
   useContext as useContext26,
   useMemo as useMemo21
 } from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS as DND_CSS } from "@dnd-kit/utilities";
 
 // src/internals/ReportBuilder/PivotModal.tsx
 import {
@@ -42312,6 +42340,173 @@ var CHART_TO_LABELS = {
   "World map": { xAxisLabel: "Country", yAxisLabel: "Value" },
   gauge: { xAxisLabel: "Value" }
 };
+function SortableColumnItem({
+  column,
+  index,
+  rows,
+  columns,
+  handleChange,
+  deleteRef,
+  deleteButtonMargin,
+  handleRemoveField,
+  SelectComponent,
+  TextInputComponent,
+  DeleteButtonComponent
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition: transition2 } = useSortable({ id: column.field });
+  const style2 = {
+    transform: DND_CSS.Transform.toString(transform),
+    transition: transition2
+  };
+  return /* @__PURE__ */ jsx65("div", { style: style2, ref: setNodeRef, children: /* @__PURE__ */ jsxs47(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      },
+      children: [
+        /* @__PURE__ */ jsxs47(
+          "div",
+          {
+            style: {
+              cursor: "grab",
+              display: "flex",
+              gap: 2,
+              flexDirection: "row",
+              paddingTop: 8,
+              paddingBottom: 8,
+              paddingLeft: 8,
+              paddingRight: 8,
+              borderRadius: 4
+            },
+            className: "handle",
+            ...attributes,
+            ...listeners,
+            children: [
+              /* @__PURE__ */ jsx65("style", { children: `.handle{background:white;} .handle:hover{background:rgba(0,0,0,0.03);}` }),
+              /* @__PURE__ */ jsxs47("div", { style: { display: "flex", gap: 2, flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs47("div", { style: { display: "flex", gap: 2, flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx65(
+                  "div",
+                  {
+                    style: {
+                      width: 3,
+                      height: 3,
+                      borderRadius: 3,
+                      background: "#9CA0A7"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs47("div", { style: { flex: 1, display: "flex", gap: 12 }, children: [
+          /* @__PURE__ */ jsx65(
+            SelectComponent,
+            {
+              value: column.field,
+              onChange: (e) => handleChange(e.target.value, "columns.field", index),
+              options: rows[0] ? Object.keys(rows[0]).map((elem) => ({
+                label: elem,
+                value: elem
+              })) : columns.map((elem) => ({
+                label: elem.field,
+                value: elem.field
+              })),
+              width: 200,
+              hideEmptyOption: true
+            }
+          ),
+          /* @__PURE__ */ jsx65(
+            TextInputComponent,
+            {
+              id: `chart-builder-column-label-${index}`,
+              width: 200,
+              value: column.label,
+              placeholder: "Column Label",
+              onChange: (e) => handleChange(e.target.value, "columns.label", index)
+            }
+          ),
+          /* @__PURE__ */ jsx65(
+            SelectComponent,
+            {
+              value: column.format,
+              onChange: (e) => handleChange(e.target.value, "columns.format", index),
+              options: ALL_FORMAT_OPTIONS,
+              width: 200,
+              hideEmptyOption: true
+            }
+          ),
+          /* @__PURE__ */ jsx65("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: /* @__PURE__ */ jsx65(
+            DeleteButtonComponent,
+            {
+              onClick: () => handleRemoveField("columns", index)
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
+}
 function getPivotMetricOptions(pivot, selectedPivotTable, chartType) {
   if (["metric", "gauge"].includes(chartType) && selectedPivotTable) {
     return selectedPivotTable.columns.map((elem) => ({
@@ -43777,6 +43972,26 @@ function ChartBuilder({
     );
     setFormData({ ...formData, [fieldName]: updatedArray });
   };
+  const columnDragSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleColumnDragEnd = (event) => {
+    const { active, over } = event;
+    if (!active || !over) return;
+    if (active.id !== over.id) {
+      const oldIndex = formData.columns.findIndex(
+        (col) => col.field === active.id
+      );
+      const newIndex = formData.columns.findIndex(
+        (col) => col.field === over.id
+      );
+      const newColumns = arrayMove(formData.columns, oldIndex, newIndex);
+      setFormData({ ...formData, columns: newColumns });
+    }
+  };
   const handleSubmit = (event) => {
     event.preventDefault();
   };
@@ -44685,141 +44900,98 @@ function ChartBuilder({
                               formData.pivot && selectedPivotTable && selectedPivotTable.columns && formData.chartType === "table" ? (
                                 // THIS CASE IF FOR PIVOT TABLES ONLY
                                 selectedPivotTable.columns.map(
-                                  (column, index) => /* @__PURE__ */ jsxs47(
-                                    ChartBuilderInputRowContainer,
-                                    {
-                                      children: [
-                                        /* @__PURE__ */ jsx65(
-                                          SelectComponent,
-                                          {
-                                            value: column.field,
-                                            onChange: (e) => handleChange(
-                                              e.target.value,
-                                              "pivot.field",
-                                              index
-                                            ),
-                                            options: selectedPivotTable.columns.map(
-                                              (elem) => ({
-                                                label: elem.field,
-                                                value: elem.field
-                                              })
-                                            ),
-                                            disabled: index === 0,
-                                            width: 200,
-                                            hideEmptyOption: true
-                                          }
+                                  (column, index) => /* @__PURE__ */ jsxs47(ChartBuilderInputRowContainer, { children: [
+                                    /* @__PURE__ */ jsx65(
+                                      SelectComponent,
+                                      {
+                                        value: column.field,
+                                        onChange: (e) => handleChange(
+                                          e.target.value,
+                                          "pivot.field",
+                                          index
                                         ),
-                                        /* @__PURE__ */ jsx65(
-                                          TextInputComponent,
-                                          {
-                                            id: `chart-builder-column-label-${index}`,
-                                            width: 200,
-                                            value: column.label,
-                                            placeholder: "Column Label",
-                                            onChange: (e) => handleChange(
-                                              e.target.value,
-                                              "pivot.label",
-                                              index
-                                            )
-                                          }
+                                        options: selectedPivotTable.columns.map(
+                                          (elem) => ({
+                                            label: elem.field,
+                                            value: elem.field
+                                          })
                                         ),
-                                        /* @__PURE__ */ jsx65(
-                                          SelectComponent,
-                                          {
-                                            value: (
-                                              // The first index use rowField for the rest of them use value fields
-                                              column.format
-                                            ),
-                                            onChange: (e) => handleChange(
-                                              e.target.value,
-                                              "pivot.format",
-                                              index
-                                            ),
-                                            options: formData.pivot && index === 0 && selectedPivotTable?.columns.length > 1 ? isDateField(
-                                              formData.pivot.rowFieldType || ""
-                                            ) ? [{ label: "date", value: "string" }] : [{ label: "string", value: "string" }] : [
-                                              ...NUMBER_OPTIONS,
-                                              { label: "string", value: "string" }
-                                            ],
-                                            width: 200,
-                                            hideEmptyOption: true
-                                          }
+                                        disabled: index === 0,
+                                        width: 200,
+                                        hideEmptyOption: true
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx65(
+                                      TextInputComponent,
+                                      {
+                                        id: `chart-builder-column-label-${index}`,
+                                        width: 200,
+                                        value: column.label,
+                                        placeholder: "Column Label",
+                                        onChange: (e) => handleChange(
+                                          e.target.value,
+                                          "pivot.label",
+                                          index
                                         )
-                                      ]
-                                    },
-                                    "column" + index
-                                  )
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx65(
+                                      SelectComponent,
+                                      {
+                                        value: (
+                                          // The first index use rowField for the rest of them use value fields
+                                          column.format
+                                        ),
+                                        onChange: (e) => handleChange(
+                                          e.target.value,
+                                          "pivot.format",
+                                          index
+                                        ),
+                                        options: formData.pivot && index === 0 && selectedPivotTable?.columns.length > 1 ? isDateField(
+                                          formData.pivot.rowFieldType || ""
+                                        ) ? [{ label: "date", value: "string" }] : [{ label: "string", value: "string" }] : [
+                                          ...NUMBER_OPTIONS,
+                                          { label: "string", value: "string" }
+                                        ],
+                                        width: 200,
+                                        hideEmptyOption: true
+                                      }
+                                    )
+                                  ] }, "column" + index)
                                 )
-                              ) : formData.columns.map(
-                                (column, index) => /* @__PURE__ */ jsxs47(
-                                  ChartBuilderInputRowContainer,
-                                  {
-                                    children: [
-                                      /* @__PURE__ */ jsx65(
-                                        SelectComponent,
-                                        {
-                                          value: column.field,
-                                          onChange: (e) => handleChange(
-                                            e.target.value,
-                                            "columns.field",
-                                            index
-                                          ),
-                                          options: rows[0] ? Object.keys(rows[0]).map((elem) => ({
-                                            label: elem,
-                                            value: elem
-                                          })) : columns.map((elem) => ({
-                                            label: elem.field,
-                                            value: elem.field
-                                          })),
-                                          width: 200,
-                                          hideEmptyOption: true
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx65(
-                                        TextInputComponent,
-                                        {
-                                          id: `chart-builder-column-label-${index}`,
-                                          width: 200,
-                                          value: column.label,
-                                          placeholder: "Column Label",
-                                          onChange: (e) => handleChange(
-                                            e.target.value,
-                                            "columns.label",
-                                            index
-                                          )
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx65(
-                                        SelectComponent,
-                                        {
-                                          value: column.format,
-                                          onChange: (e) => handleChange(
-                                            e.target.value,
-                                            "columns.format",
-                                            index
-                                          ),
-                                          options: ALL_FORMAT_OPTIONS,
-                                          width: 200,
-                                          hideEmptyOption: true
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx65(
-                                        "div",
-                                        {
-                                          ref: deleteRef,
-                                          style: { marginLeft: deleteButtonMargin },
-                                          children: /* @__PURE__ */ jsx65(
-                                            DeleteButtonComponent,
-                                            {
-                                              onClick: () => handleRemoveField("columns", index)
-                                            }
-                                          )
-                                        }
+                              ) : /* @__PURE__ */ jsx65(
+                                DndContext,
+                                {
+                                  sensors: columnDragSensors,
+                                  collisionDetection: closestCenter,
+                                  onDragEnd: handleColumnDragEnd,
+                                  children: /* @__PURE__ */ jsx65(
+                                    SortableContext,
+                                    {
+                                      items: formData.columns.map((col) => col.field),
+                                      strategy: verticalListSortingStrategy,
+                                      children: formData.columns.map(
+                                        (column, index) => /* @__PURE__ */ jsx65(
+                                          SortableColumnItem,
+                                          {
+                                            column,
+                                            index,
+                                            rows,
+                                            columns,
+                                            handleChange,
+                                            deleteRef,
+                                            deleteButtonMargin,
+                                            handleRemoveField,
+                                            SelectComponent,
+                                            TextInputComponent,
+                                            DeleteButtonComponent
+                                          },
+                                          column.field
+                                        )
                                       )
-                                    ]
-                                  },
-                                  "column" + index
-                                )
+                                    }
+                                  )
+                                }
                               ),
                               /* @__PURE__ */ jsx65("div", { children: !// hide when pivoted and chartType === 'table'
                               (formData.pivot && selectedPivotTable && selectedPivotTable.columns && formData.chartType === "table") && /* @__PURE__ */ jsxs47(
@@ -48994,21 +49166,21 @@ var useReportBuilder = ({
 // src/components/ReportBuilder/AddColumnModal.tsx
 import { useState as useState32, useRef as useRef19, useMemo as useMemo24, useEffect as useEffect26, useContext as useContext30 } from "react";
 import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors
+  DndContext as DndContext2,
+  closestCenter as closestCenter2,
+  KeyboardSensor as KeyboardSensor2,
+  PointerSensor as PointerSensor2,
+  useSensor as useSensor2,
+  useSensors as useSensors2
 } from "@dnd-kit/core";
 import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable
+  arrayMove as arrayMove2,
+  SortableContext as SortableContext2,
+  sortableKeyboardCoordinates as sortableKeyboardCoordinates2,
+  verticalListSortingStrategy as verticalListSortingStrategy2,
+  useSortable as useSortable2
 } from "@dnd-kit/sortable";
-import { CSS as DND_CSS } from "@dnd-kit/utilities";
+import { CSS as DND_CSS2 } from "@dnd-kit/utilities";
 import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 function AddColumnModal({
   onSave,
@@ -49077,10 +49249,10 @@ function AddColumnModal({
       setTimeout(() => setInitialLoad(false), 200);
     }
   }, [schemaLoading]);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
+  const sensors = useSensors2(
+    useSensor2(PointerSensor2),
+    useSensor2(KeyboardSensor2, {
+      coordinateGetter: sortableKeyboardCoordinates2
     })
   );
   function handleDragEnd(event) {
@@ -49090,7 +49262,7 @@ function AddColumnModal({
       setOrderedColumnNames((orderedColumnNames2) => {
         const oldIndex = orderedColumnNames2.indexOf(active.id);
         const newIndex = orderedColumnNames2.indexOf(over.id);
-        return arrayMove(orderedColumnNames2, oldIndex, newIndex);
+        return arrayMove2(orderedColumnNames2, oldIndex, newIndex);
       });
     }
   }
@@ -49134,16 +49306,16 @@ function AddColumnModal({
           }
         ),
         schemaLoading || initialLoad ? /* @__PURE__ */ jsx67(LoadingComponent, {}) : schema.length > 0 ? /* @__PURE__ */ jsx67(
-          DndContext,
+          DndContext2,
           {
             sensors,
-            collisionDetection: closestCenter,
+            collisionDetection: closestCenter2,
             onDragEnd: handleDragEnd,
             children: /* @__PURE__ */ jsx67(
-              SortableContext,
+              SortableContext2,
               {
                 items: orderedColumnNames,
-                strategy: verticalListSortingStrategy,
+                strategy: verticalListSortingStrategy2,
                 children: /* @__PURE__ */ jsxs49(
                   "div",
                   {
@@ -49351,9 +49523,9 @@ var SortableItem = ({
   selectedColumns,
   SelectColumn
 }) => {
-  const { attributes, listeners, setNodeRef, transform, transition: transition2 } = useSortable({ id: id2 });
+  const { attributes, listeners, setNodeRef, transform, transition: transition2 } = useSortable2({ id: id2 });
   const style2 = {
-    transform: DND_CSS.Transform.toString(transform),
+    transform: DND_CSS2.Transform.toString(transform),
     transition: transition2
   };
   const handleSelect = () => {
@@ -49383,17 +49555,17 @@ var SortableItem = ({
 
 // src/components/ReportBuilder/DraggableColumns.tsx
 import {
-  closestCenter as closestCenter2,
-  DndContext as DndContext2,
-  KeyboardSensor as KeyboardSensor2,
-  PointerSensor as PointerSensor2,
-  useSensor as useSensor2,
-  useSensors as useSensors2
+  closestCenter as closestCenter3,
+  DndContext as DndContext3,
+  KeyboardSensor as KeyboardSensor3,
+  PointerSensor as PointerSensor3,
+  useSensor as useSensor3,
+  useSensors as useSensors3
 } from "@dnd-kit/core";
 
 // src/components/ReportBuilder/DraggableItem.tsx
-import { useSortable as useSortable2 } from "@dnd-kit/sortable";
-import { CSS as DND_CSS2 } from "@dnd-kit/utilities";
+import { useSortable as useSortable3 } from "@dnd-kit/sortable";
+import { CSS as DND_CSS3 } from "@dnd-kit/utilities";
 import { jsx as jsx68 } from "react/jsx-runtime";
 function DraggableItem({
   id: id2,
@@ -49402,9 +49574,9 @@ function DraggableItem({
   DraggableColumnComponent,
   loading
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition: transition2 } = useSortable2({ id: id2 });
+  const { attributes, listeners, setNodeRef, transform, transition: transition2 } = useSortable3({ id: id2 });
   const style2 = {
-    transform: DND_CSS2.Transform.toString(transform),
+    transform: DND_CSS3.Transform.toString(transform),
     transition: transition2
   };
   return /* @__PURE__ */ jsx68("div", { style: { ...style2 }, ref: setNodeRef, children: /* @__PURE__ */ jsx68(
@@ -49430,10 +49602,10 @@ function DraggableItem({
 
 // src/components/ReportBuilder/DraggableColumns.tsx
 import {
-  arrayMove as arrayMove2,
-  SortableContext as SortableContext2,
-  sortableKeyboardCoordinates as sortableKeyboardCoordinates2,
-  verticalListSortingStrategy as verticalListSortingStrategy2
+  arrayMove as arrayMove3,
+  SortableContext as SortableContext3,
+  sortableKeyboardCoordinates as sortableKeyboardCoordinates3,
+  verticalListSortingStrategy as verticalListSortingStrategy3
 } from "@dnd-kit/sortable";
 import { useMemo as useMemo25 } from "react";
 import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
@@ -49443,10 +49615,10 @@ function DraggableColumns({
   DraggableColumnComponent,
   loading
 }) {
-  const sensors = useSensors2(
-    useSensor2(PointerSensor2),
-    useSensor2(KeyboardSensor2, {
-      coordinateGetter: sortableKeyboardCoordinates2
+  const sensors = useSensors3(
+    useSensor3(PointerSensor3),
+    useSensor3(KeyboardSensor3, {
+      coordinateGetter: sortableKeyboardCoordinates3
     })
   );
   const columnNames = useMemo25(() => {
@@ -49463,7 +49635,7 @@ function DraggableColumns({
     if (active.id !== over.id) {
       const oldIndex = columnNames.findIndex((c) => c.endsWith(active.id));
       const newIndex = columnNames.findIndex((c) => c.endsWith(over.id));
-      const newOrder = arrayMove2(columnNames, oldIndex, newIndex);
+      const newOrder = arrayMove3(columnNames, oldIndex, newIndex);
       const orderToColumns = newOrder.map((name2) => {
         const [table, field] = name2.split(".");
         return columns.find(
@@ -49480,16 +49652,16 @@ function DraggableColumns({
     onColumnOrderChange(newColumns);
   }
   return /* @__PURE__ */ jsx69(
-    DndContext2,
+    DndContext3,
     {
       sensors,
-      collisionDetection: closestCenter2,
+      collisionDetection: closestCenter3,
       onDragEnd: handleDragEnd,
       children: /* @__PURE__ */ jsx69(
-        SortableContext2,
+        SortableContext3,
         {
           items: columnNames,
-          strategy: verticalListSortingStrategy2,
+          strategy: verticalListSortingStrategy3,
           children: /* @__PURE__ */ jsxs50(
             "div",
             {