fix: dont render columnadjuster when interactions.active is false (#452)

src/pivot-table/components/cells/ColumnAdjuster.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { ColumnWidthType } from "../../../types/QIX";
 import type { AdjusterCellInfo, DataModel } from "../../../types/types";
 import { GRID_BORDER } from "../../constants";
+import { useBaseContext } from "../../contexts/BaseProvider";
 import { useSelectionsContext } from "../../contexts/SelectionsProvider";
 import { ColumnWidthValues } from "../../hooks/use-column-width";
 import { CELL_PADDING } from "../shared-styles";
@@ -20,10 +21,11 @@ interface AdjusterProps {
  * While dragging this components follows the pointer, and on mouse up all column widths are updated.
  */
 const ColumnAdjuster = ({ cellInfo, columnWidth, dataModel, isLastColumn }: AdjusterProps) => {
+  const { interactions } = useBaseContext();
   const { isActive } = useSelectionsContext();
   const [, forceRerender] = useState({});
   const positionAdjustment = isLastColumn ? CELL_PADDING : CELL_PADDING + GRID_BORDER;
-  const shouldRender = !isActive && cellInfo.canBeResized;
+  const shouldRender = cellInfo.canBeResized && !!interactions.active && !isActive;
 
   const tempWidth = useMemo(() => ({ initWidth: columnWidth, columnWidth, initX: 0 }), [columnWidth]);
 

src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx

@@ -1,3 +1,4 @@
+import type { stardust } from "@nebula.js/stardust";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { ColumnWidthType } from "../../../../types/QIX";
@@ -9,21 +10,25 @@ describe("<ColumnAdjuster />", () => {
   let cellInfo: AdjusterCellInfo;
   let columnWidth: number;
   let dataModel: DataModel | undefined;
+  let selections: ExtendedSelections;
+  let interactions: stardust.Interactions;
 
   beforeEach(() => {
     columnWidth = 100;
     dataModel = {
       applyColumnWidth: jest.fn(),
     } as unknown as DataModel;
     cellInfo = { canBeResized: true } as AdjusterCellInfo;
+    interactions = { active: true };
+    selections = { isActive: () => false } as ExtendedSelections;
   });
 
-  const renderAdjuster = (isActive = false) =>
+  const renderAdjuster = () =>
     render(
       <ColumnAdjuster cellInfo={cellInfo} columnWidth={columnWidth} dataModel={dataModel} isLastColumn={false} />,
       {
         wrapper: ({ children }) => (
-          <TestWithProvider selections={{ isActive: () => isActive } as unknown as ExtendedSelections}>
+          <TestWithProvider selections={selections} interactions={interactions}>
             {children}
           </TestWithProvider>
         ),
@@ -37,15 +42,24 @@ describe("<ColumnAdjuster />", () => {
     expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).toBeInTheDocument();
   });
 
-  test("should not render ColumnAdjuster when isActive is true", () => {
-    renderAdjuster(true);
+  test("should not render ColumnAdjuster when canBeResized is false", () => {
+    cellInfo = { canBeResized: false } as AdjusterCellInfo;
+    renderAdjuster();
+
     expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
   });
 
-  test("should not render ColumnAdjuster when canBeResized is false", () => {
-    cellInfo = { canBeResized: false } as AdjusterCellInfo;
+  test("should not render ColumnAdjuster when isActive is true", () => {
+    selections.isActive = () => true;
+    renderAdjuster();
+
+    expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
+  });
 
+  test("should not render ColumnAdjuster when interactions.active is false", () => {
+    interactions.active = false;
     renderAdjuster();
+
     expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
   });