@atlaskit/editor-plugin-table 5.8.6 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 6.0.0
+
+### Major Changes
+
+- [#67764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67764) [`392964912fad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/392964912fad) - Fixed incorrectly imported dependencies from src in the editor-plugin-table
+
+### Patch Changes
+
+- [#67255](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67255) [`f73d19be272d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f73d19be272d) - Set pointer events to none on column controls while dragging. Fixes issue where column controls prevent drop targets from showing.
+
 ## 5.8.6
 
 ### Patch Changes

package/dist/cjs/commands/column-resize.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
-var _utils = require("@atlaskit/editor-tables/src/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
 var _utils2 = require("../pm-plugins/table-resizing/utils");

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -46,7 +46,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     canDrag = _ref.canDrag,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    isDragging = _ref.isDragging;
   var columnControlsRef = (0, _react.useRef)(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -205,7 +206,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,

package/dist/cjs/ui/TableFloatingColumnControls/index.js

@@ -42,8 +42,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     setTableRect = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hasDropTargets = _useState4[0],
-    setHasDropTargets = _useState4[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
   var containerRef = (0, _react.useRef)(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -91,10 +91,10 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart: function onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop: function onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -137,8 +137,9 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/es2019/commands/column-resize.js

@@ -1,6 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
-import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/src/utils';
+import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, resizeColumn, updateControls } from '../pm-plugins/table-resizing/utils';

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -36,7 +36,8 @@ export const ColumnControls = ({
   isTableHovered,
   canDrag,
   tableContainerWidth,
-  isNumberColumnEnabled
+  isNumberColumnEnabled,
+  isDragging
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const columnControlsRef = useRef(null);
@@ -202,7 +203,8 @@ export const ColumnControls = ({
       gridTemplateColumns: widths,
       marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(({
     startIndex,

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -24,7 +24,7 @@ export const TableFloatingColumnControls = ({
     width: 0,
     height: 0
   });
-  const [hasDropTargets, setHasDropTargets] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -62,10 +62,10 @@ export const TableFloatingColumnControls = ({
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -108,8 +108,9 @@ export const TableFloatingColumnControls = ({
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/esm/commands/column-resize.js

@@ -1,6 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
-import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/src/utils';
+import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, resizeColumn, updateControls } from '../pm-plugins/table-resizing/utils';

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -37,7 +37,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     canDrag = _ref.canDrag,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    isDragging = _ref.isDragging;
   var columnControlsRef = useRef(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -196,7 +197,8 @@ export var ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,

package/dist/esm/ui/TableFloatingColumnControls/index.js

@@ -32,8 +32,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     setTableRect = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasDropTargets = _useState4[0],
-    setHasDropTargets = _useState4[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
   var containerRef = useRef(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -81,10 +81,10 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart: function onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop: function onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -127,8 +127,9 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/types/commands/column-resize.d.ts

@@ -1,5 +1,5 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { Direction } from '@atlaskit/editor-tables/src/types';
+import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -17,6 +17,7 @@ export interface ColumnControlsProps {
     canDrag?: boolean;
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
+    isDragging?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, tableContainerWidth, isNumberColumnEnabled, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, tableContainerWidth, isNumberColumnEnabled, isDragging, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -1,5 +1,5 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { Direction } from '@atlaskit/editor-tables/src/types';
+import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -17,6 +17,7 @@ export interface ColumnControlsProps {
     canDrag?: boolean;
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
+    isDragging?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, tableContainerWidth, isNumberColumnEnabled, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, tableContainerWidth, isNumberColumnEnabled, isDragging, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.8.6",
+  "version": "6.0.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/commands/column-resize.ts

@@ -4,10 +4,7 @@ import type {
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
 import { TableMap } from '@atlaskit/editor-tables';
-import type {
-  CellAttributes,
-  Direction,
-} from '@atlaskit/editor-tables/src/types';
+import type { CellAttributes, Direction } from '@atlaskit/editor-tables/types';
 import {
   findCellClosestToPos,
   findCellRectClosestToPos,
@@ -15,7 +12,7 @@ import {
   getSelectionRect,
   isSelectionType,
   nextCell,
-} from '@atlaskit/editor-tables/src/utils';
+} from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -39,6 +39,7 @@ export interface ColumnControlsProps {
   canDrag?: boolean;
   tableContainerWidth?: number;
   isNumberColumnEnabled?: boolean;
+  isDragging?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -68,6 +69,7 @@ export const ColumnControls = ({
   canDrag,
   tableContainerWidth,
   isNumberColumnEnabled,
+  isDragging,
 }: ColumnControlsProps) => {
   const columnControlsRef = useRef<HTMLDivElement>(null);
   const widths =
@@ -300,6 +302,7 @@ export const ColumnControls = ({
     isNumberColumnEnabled && tableContainerWidth
       ? tableContainerWidth - akEditorTableNumberColumnWidth
       : tableContainerWidth;
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -314,6 +317,7 @@ export const ColumnControls = ({
           marginTop,
           width: stickyTop ? containerWidth : undefined,
           overflowX: stickyTop ? 'hidden' : 'visible',
+          pointerEvents: isDragging ? 'none' : undefined,
         }}
       >
         {!isResizing &&

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -59,7 +59,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );
-  const [hasDropTargets, setHasDropTargets] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const node = getNode();
@@ -105,10 +105,10 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         );
       },
       onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       },
     });
   }, [editorView, currentNodeLocalId]);
@@ -160,8 +160,9 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         canDrag={canDrag}
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={isNumberColumnEnabled}
+        isDragging={isDragging}
       />
-      {hasDropTargets && (
+      {isDragging && (
         <ColumnDropTargets
           tableRef={tableRef}
           stickyTop={tableActive ? stickyTop : undefined}