@payloadcms/richtext-lexical 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/features/experimental_table/client/plugins/TableActionMenuPlugin/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableRowNode, $isTableSelection, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableObserverFromTableElement } from '@lexical/table';
+import { $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableRowNode, $isTableSelection, $unmergeCell, getTableObserverFromTableElement, TableCellHeaderStates, TableCellNode } from '@lexical/table';
 import { useScrollInfo } from '@payloadcms/ui';
 import { $createParagraphNode, $getRoot, $getSelection, $isElementNode, $isParagraphNode, $isRangeSelection, $isTextNode } from 'lexical';
 import * as React from 'react';
@@ -18,43 +18,6 @@ function computeSelectionCount(selection) {
     rows: selectionShape.toY - selectionShape.fromY + 1
   };
 }
-// This is important when merging cells as there is no good way to re-merge weird shapes (a result
-// of selecting merged cells and non-merged)
-function isTableSelectionRectangular(selection) {
-  const nodes = selection.getNodes();
-  const currentRows = [];
-  let currentRow = null;
-  let expectedColumns = null;
-  let currentColumns = 0;
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-    if ($isTableCellNode(node)) {
-      const row = node.getParentOrThrow();
-      if ($isTableRowNode(row)) {
-        throw new Error('Expected CellNode to have a RowNode parent');
-      }
-      if (currentRow !== row) {
-        if (expectedColumns !== null && currentColumns !== expectedColumns) {
-          return false;
-        }
-        if (currentRow !== null) {
-          expectedColumns = currentColumns;
-        }
-        currentRow = row;
-        currentColumns = 0;
-      }
-      const colSpan = node.__colSpan;
-      for (let j = 0; j < colSpan; j++) {
-        if (currentRows[currentColumns + j] === undefined) {
-          currentRows[currentColumns + j] = 0;
-        }
-        currentRows[currentColumns + j] += node.__rowSpan;
-      }
-      currentColumns += colSpan;
-    }
-  }
-  return (expectedColumns === null || currentColumns === expectedColumns) && currentRows.every(v => v === currentRows[0]);
-}
 function $canUnmerge() {
   const selection = $getSelection();
   if ($isRangeSelection(selection) && !selection.isCollapsed() || $isTableSelection(selection) && !selection.anchor.is(selection.focus) || !$isRangeSelection(selection) && !$isTableSelection(selection)) {
@@ -83,39 +46,28 @@ function $selectLastDescendant(node) {
     lastDescendant.selectNext();
   }
 }
-function TableActionMenu(t0) {
-  const $ = _c(69);
-  const {
-    cellMerge,
-    contextRef,
-    onClose,
-    setIsMenuOpen,
-    tableCellNode: _tableCellNode
-  } = t0;
+function TableActionMenu({
+  cellMerge,
+  contextRef,
+  onClose,
+  setIsMenuOpen,
+  tableCellNode: _tableCellNode
+}) {
   const [editor] = useLexicalComposerContext();
   const dropDownRef = useRef(null);
   const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      columns: 1,
-      rows: 1
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const [selectionCounts, updateSelectionCounts] = useState(t1);
+  const [selectionCounts, updateSelectionCounts] = useState({
+    columns: 1,
+    rows: 1
+  });
   const [canMergeCells, setCanMergeCells] = useState(false);
   const [canUnmergeCell, setCanUnmergeCell] = useState(false);
   const {
     y
   } = useScrollInfo();
-  let t2;
-  let t3;
-  if ($[1] !== editor || $[2] !== tableCellNode) {
-    t2 = () => editor.registerMutationListener(TableCellNode, nodeMutations => {
-      const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
+  useEffect(() => {
+    return editor.registerMutationListener(TableCellNode, nodeMutations => {
+      const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
       if (nodeUpdated) {
         editor.getEditorState().read(() => {
           updateTableCellNode(tableCellNode.getLatest());
@@ -124,39 +76,20 @@ function TableActionMenu(t0) {
     }, {
       skipInitialization: true
     });
-    t3 = [editor, tableCellNode];
-    $[1] = editor;
-    $[2] = tableCellNode;
-    $[3] = t2;
-    $[4] = t3;
-  } else {
-    t2 = $[3];
-    t3 = $[4];
-  }
-  useEffect(t2, t3);
-  let t4;
-  let t5;
-  if ($[5] !== editor) {
-    t4 = () => {
-      editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        if ($isTableSelection(selection)) {
-          const currentSelectionCounts = computeSelectionCount(selection);
-          updateSelectionCounts(computeSelectionCount(selection));
-          setCanMergeCells(isTableSelectionRectangular(selection) && (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
-        }
-        setCanUnmergeCell($canUnmerge());
-      });
-    };
-    t5 = [editor];
-    $[5] = editor;
-    $[6] = t4;
-    $[7] = t5;
-  } else {
-    t4 = $[6];
-    t5 = $[7];
-  }
-  useEffect(t4, t5);
+  }, [editor, tableCellNode]);
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      // Merge cells
+      if ($isTableSelection(selection)) {
+        const currentSelectionCounts = computeSelectionCount(selection);
+        updateSelectionCounts(computeSelectionCount(selection));
+        setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
+      }
+      // Unmerge cell
+      setCanUnmergeCell($canUnmerge());
+    });
+  }, [editor]);
   useEffect(() => {
     const menuButtonElement = contextRef.current;
     const dropDownElement = dropDownRef.current;
@@ -164,488 +97,317 @@ function TableActionMenu(t0) {
     if (menuButtonElement != null && dropDownElement != null && rootElement != null) {
       const rootEleRect = rootElement.getBoundingClientRect();
       const menuButtonRect = menuButtonElement.getBoundingClientRect();
-      dropDownElement.style.opacity = "1";
+      dropDownElement.style.opacity = '1';
       const dropDownElementRect = dropDownElement.getBoundingClientRect();
-      let leftPosition = menuButtonRect.right + 5;
+      const margin = 5;
+      let leftPosition = menuButtonRect.right + margin;
       if (leftPosition + dropDownElementRect.width > window.innerWidth || leftPosition + dropDownElementRect.width > rootEleRect.right) {
-        const position = menuButtonRect.left - dropDownElementRect.width - 5;
-        leftPosition = (position < 0 ? 5 : position) + window.pageXOffset;
+        const position = menuButtonRect.left - dropDownElementRect.width - margin;
+        leftPosition = (position < 0 ? margin : position) + window.pageXOffset;
       }
       dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`;
       let topPosition = menuButtonRect.top;
       if (topPosition + dropDownElementRect.height > window.innerHeight) {
         const position_0 = menuButtonRect.bottom - dropDownElementRect.height;
-        topPosition = (position_0 < 0 ? 5 : position_0) + window.pageYOffset;
+        topPosition = (position_0 < 0 ? margin : position_0) + window.pageYOffset;
       }
       dropDownElement.style.top = `${topPosition}px`;
     }
   }, [contextRef, dropDownRef, editor, y]);
-  let t6;
-  if ($[8] !== setIsMenuOpen || $[9] !== contextRef) {
-    t6 = [setIsMenuOpen, contextRef];
-    $[8] = setIsMenuOpen;
-    $[9] = contextRef;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
   useEffect(() => {
-    const handleClickOutside = function handleClickOutside(event) {
+    function handleClickOutside(event) {
       if (dropDownRef.current != null && contextRef.current != null && !dropDownRef.current.contains(event.target) && !contextRef.current.contains(event.target)) {
         setIsMenuOpen(false);
       }
-    };
-    window.addEventListener("click", handleClickOutside);
-    return () => window.removeEventListener("click", handleClickOutside);
-  }, t6);
-  let t7;
-  if ($[11] !== editor || $[12] !== tableCellNode) {
-    t7 = () => {
-      editor.update(() => {
-        if (tableCellNode.isAttached()) {
-          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-          const tableElement = editor.getElementByKey(tableNode.getKey());
-          if (!tableElement) {
-            throw new Error("Expected to find tableElement in DOM");
-          }
-          const tableSelection = getTableObserverFromTableElement(tableElement);
-          if (tableSelection !== null) {
-            tableSelection.clearHighlight();
-          }
-          tableNode.markDirty();
-          updateTableCellNode(tableCellNode.getLatest());
+    }
+    window.addEventListener('click', handleClickOutside);
+    return () => window.removeEventListener('click', handleClickOutside);
+  }, [setIsMenuOpen, contextRef]);
+  const clearTableSelection = useCallback(() => {
+    editor.update(() => {
+      if (tableCellNode.isAttached()) {
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        const tableElement = editor.getElementByKey(tableNode.getKey());
+        if (!tableElement) {
+          throw new Error('Expected to find tableElement in DOM');
         }
-        const rootNode = $getRoot();
-        rootNode.selectStart();
-      });
-    };
-    $[11] = editor;
-    $[12] = tableCellNode;
-    $[13] = t7;
-  } else {
-    t7 = $[13];
-  }
-  const clearTableSelection = t7;
-  let t8;
-  if ($[14] !== editor || $[15] !== onClose) {
-    t8 = () => {
-      editor.update(() => {
-        const selection_0 = $getSelection();
-        if ($isTableSelection(selection_0)) {
-          const {
-            columns,
-            rows
-          } = computeSelectionCount(selection_0);
-          const nodes = selection_0.getNodes();
-          let firstCell = null;
-          for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-            if ($isTableCellNode(node)) {
-              if (firstCell === null) {
-                node.setColSpan(columns).setRowSpan(rows);
-                firstCell = node;
-                const isEmpty = $cellContainsEmptyParagraph(node);
-                let firstChild;
-                if (isEmpty && $isParagraphNode(firstChild = node.getFirstChild())) {
-                  firstChild.remove();
-                }
-              } else {
-                if ($isTableCellNode(firstCell)) {
-                  const isEmpty_0 = $cellContainsEmptyParagraph(node);
-                  if (!isEmpty_0) {
-                    firstCell.append(...node.getChildren());
-                  }
-                  node.remove();
-                }
+        const tableObserver = getTableObserverFromTableElement(tableElement);
+        if (tableObserver !== null) {
+          tableObserver.clearHighlight();
+        }
+        tableNode.markDirty();
+        updateTableCellNode(tableCellNode.getLatest());
+      }
+      const rootNode = $getRoot();
+      rootNode.selectStart();
+    });
+  }, [editor, tableCellNode]);
+  const mergeTableCellsAtSelection = () => {
+    editor.update(() => {
+      const selection_0 = $getSelection();
+      if ($isTableSelection(selection_0)) {
+        const {
+          columns,
+          rows
+        } = computeSelectionCount(selection_0);
+        const nodes = selection_0.getNodes();
+        let firstCell = null;
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i];
+          if ($isTableCellNode(node)) {
+            if (firstCell === null) {
+              node.setColSpan(columns).setRowSpan(rows);
+              firstCell = node;
+              const isEmpty = $cellContainsEmptyParagraph(node);
+              let firstChild;
+              if (isEmpty && $isParagraphNode(firstChild = node.getFirstChild())) {
+                firstChild.remove();
+              }
+            } else if ($isTableCellNode(firstCell)) {
+              const isEmpty_0 = $cellContainsEmptyParagraph(node);
+              if (!isEmpty_0) {
+                firstCell.append(...node.getChildren());
               }
+              node.remove();
             }
           }
-          if (firstCell !== null) {
-            if (firstCell.getChildrenSize() === 0) {
-              firstCell.append($createParagraphNode());
-            }
-            $selectLastDescendant(firstCell);
+        }
+        if (firstCell !== null) {
+          if (firstCell.getChildrenSize() === 0) {
+            firstCell.append($createParagraphNode());
           }
-          onClose();
+          $selectLastDescendant(firstCell);
         }
-      });
-    };
-    $[14] = editor;
-    $[15] = onClose;
-    $[16] = t8;
-  } else {
-    t8 = $[16];
-  }
-  const mergeTableCellsAtSelection = t8;
-  let t9;
-  if ($[17] !== editor) {
-    t9 = () => {
-      editor.update(() => {
-        $unmergeCell();
-      });
-    };
-    $[17] = editor;
-    $[18] = t9;
-  } else {
-    t9 = $[18];
-  }
-  const unmergeTableCellsAtSelection = t9;
-  let t10;
-  if ($[19] !== editor || $[20] !== onClose) {
-    t10 = shouldInsertAfter => {
-      editor.update(() => {
-        $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
         onClose();
-      });
-    };
-    $[19] = editor;
-    $[20] = onClose;
-    $[21] = t10;
-  } else {
-    t10 = $[21];
-  }
-  const insertTableRowAtSelection = t10;
-  let t11;
-  if ($[22] !== editor || $[23] !== selectionCounts.columns || $[24] !== onClose) {
-    t11 = shouldInsertAfter_0 => {
-      editor.update(() => {
-        for (let i_0 = 0; i_0 < selectionCounts.columns; i_0++) {
-          $insertTableColumn__EXPERIMENTAL(shouldInsertAfter_0);
+      }
+    });
+  };
+  const unmergeTableCellsAtSelection = () => {
+    editor.update(() => {
+      $unmergeCell();
+    });
+  };
+  const insertTableRowAtSelection = useCallback(shouldInsertAfter => {
+    editor.update(() => {
+      $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
+      onClose();
+    });
+  }, [editor, onClose]);
+  const insertTableColumnAtSelection = useCallback(shouldInsertAfter_0 => {
+    editor.update(() => {
+      for (let i_0 = 0; i_0 < selectionCounts.columns; i_0++) {
+        $insertTableColumn__EXPERIMENTAL(shouldInsertAfter_0);
+      }
+      onClose();
+    });
+  }, [editor, onClose, selectionCounts.columns]);
+  const deleteTableRowAtSelection = useCallback(() => {
+    editor.update(() => {
+      $deleteTableRow__EXPERIMENTAL();
+      onClose();
+    });
+  }, [editor, onClose]);
+  const deleteTableAtSelection = useCallback(() => {
+    editor.update(() => {
+      const tableNode_0 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      tableNode_0.remove();
+      clearTableSelection();
+      onClose();
+    });
+  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  const deleteTableColumnAtSelection = useCallback(() => {
+    editor.update(() => {
+      $deleteTableColumn__EXPERIMENTAL();
+      onClose();
+    });
+  }, [editor, onClose]);
+  const toggleTableRowIsHeader = useCallback(() => {
+    editor.update(() => {
+      const tableNode_1 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+      const tableRows = tableNode_1.getChildren();
+      if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+        throw new Error('Expected table cell to be inside of table row.');
+      }
+      const tableRow = tableRows[tableRowIndex];
+      if (!$isTableRowNode(tableRow)) {
+        throw new Error('Expected table row');
+      }
+      const newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.ROW;
+      tableRow.getChildren().forEach(tableCell => {
+        if (!$isTableCellNode(tableCell)) {
+          throw new Error('Expected table cell');
         }
-        onClose();
-      });
-    };
-    $[22] = editor;
-    $[23] = selectionCounts.columns;
-    $[24] = onClose;
-    $[25] = t11;
-  } else {
-    t11 = $[25];
-  }
-  const insertTableColumnAtSelection = t11;
-  let t12;
-  if ($[26] !== editor || $[27] !== onClose) {
-    t12 = () => {
-      editor.update(() => {
-        $deleteTableRow__EXPERIMENTAL();
-        onClose();
-      });
-    };
-    $[26] = editor;
-    $[27] = onClose;
-    $[28] = t12;
-  } else {
-    t12 = $[28];
-  }
-  const deleteTableRowAtSelection = t12;
-  let t13;
-  if ($[29] !== editor || $[30] !== tableCellNode || $[31] !== clearTableSelection || $[32] !== onClose) {
-    t13 = () => {
-      editor.update(() => {
-        const tableNode_0 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        tableNode_0.remove();
-        clearTableSelection();
-        onClose();
+        tableCell.setHeaderStyles(newStyle, TableCellHeaderStates.ROW);
       });
-    };
-    $[29] = editor;
-    $[30] = tableCellNode;
-    $[31] = clearTableSelection;
-    $[32] = onClose;
-    $[33] = t13;
-  } else {
-    t13 = $[33];
-  }
-  const deleteTableAtSelection = t13;
-  let t14;
-  if ($[34] !== editor || $[35] !== onClose) {
-    t14 = () => {
-      editor.update(() => {
-        $deleteTableColumn__EXPERIMENTAL();
-        onClose();
-      });
-    };
-    $[34] = editor;
-    $[35] = onClose;
-    $[36] = t14;
-  } else {
-    t14 = $[36];
-  }
-  const deleteTableColumnAtSelection = t14;
-  let t15;
-  if ($[37] !== editor || $[38] !== tableCellNode || $[39] !== clearTableSelection || $[40] !== onClose) {
-    t15 = () => {
-      editor.update(() => {
-        const tableNode_1 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-        const tableRows = tableNode_1.getChildren();
-        if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-          throw new Error("Expected table cell to be inside of table row.");
+      clearTableSelection();
+      onClose();
+    });
+  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  const toggleTableColumnIsHeader = useCallback(() => {
+    editor.update(() => {
+      const tableNode_2 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+      const tableRows_0 = tableNode_2.getChildren();
+      const maxRowsLength = Math.max(...tableRows_0.map(row => row.getChildren().length));
+      if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
+        throw new Error('Expected table cell to be inside of table row.');
+      }
+      const newStyle_0 = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.COLUMN;
+      for (let r = 0; r < tableRows_0.length; r++) {
+        const tableRow_0 = tableRows_0[r];
+        if (!$isTableRowNode(tableRow_0)) {
+          throw new Error('Expected table row');
         }
-        const tableRow = tableRows[tableRowIndex];
-        if (!$isTableRowNode(tableRow)) {
-          throw new Error("Expected table row");
+        const tableCells = tableRow_0.getChildren();
+        if (tableColumnIndex >= tableCells.length) {
+          continue;
         }
-        tableRow.getChildren().forEach(tableCell => {
-          if (!$isTableCellNode(tableCell)) {
-            throw new Error("Expected table cell");
-          }
-          tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
-        });
-        clearTableSelection();
-        onClose();
-      });
-    };
-    $[37] = editor;
-    $[38] = tableCellNode;
-    $[39] = clearTableSelection;
-    $[40] = onClose;
-    $[41] = t15;
-  } else {
-    t15 = $[41];
-  }
-  const toggleTableRowIsHeader = t15;
-  let t16;
-  if ($[42] !== editor || $[43] !== tableCellNode || $[44] !== clearTableSelection || $[45] !== onClose) {
-    t16 = () => {
-      editor.update(() => {
-        const tableNode_2 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-        const tableRows_0 = tableNode_2.getChildren();
-        const maxRowsLength = Math.max(...tableRows_0.map(row => row.getChildren().length));
-        if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
-          throw new Error("Expected table cell to be inside of table row.");
+        const tableCell_0 = tableCells[tableColumnIndex];
+        if (!$isTableCellNode(tableCell_0)) {
+          throw new Error('Expected table cell');
         }
-        for (let r = 0; r < tableRows_0.length; r++) {
-          const tableRow_0 = tableRows_0[r];
-          if (!$isTableRowNode(tableRow_0)) {
-            throw new Error("Expected table row");
-          }
-          const tableCells = tableRow_0.getChildren();
-          if (tableColumnIndex >= tableCells.length) {
-            continue;
-          }
-          const tableCell_0 = tableCells[tableColumnIndex];
-          if (!$isTableCellNode(tableCell_0)) {
-            throw new Error("Expected table cell");
-          }
-          tableCell_0.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
+        tableCell_0.setHeaderStyles(newStyle_0, TableCellHeaderStates.COLUMN);
+      }
+      clearTableSelection();
+      onClose();
+    });
+  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  const toggleRowStriping = useCallback(() => {
+    editor.update(() => {
+      if (tableCellNode.isAttached()) {
+        const tableNode_3 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        if (tableNode_3) {
+          tableNode_3.setRowStriping(!tableNode_3.getRowStriping());
         }
-        clearTableSelection();
-        onClose();
-      });
-    };
-    $[42] = editor;
-    $[43] = tableCellNode;
-    $[44] = clearTableSelection;
-    $[45] = onClose;
-    $[46] = t16;
-  } else {
-    t16 = $[46];
-  }
-  const toggleTableColumnIsHeader = t16;
+      }
+      clearTableSelection();
+      onClose();
+    });
+  }, [editor, tableCellNode, clearTableSelection, onClose]);
   let mergeCellButton = null;
   if (cellMerge) {
     if (canMergeCells) {
-      let t17;
-      if ($[47] !== mergeTableCellsAtSelection) {
-        t17 = () => mergeTableCellsAtSelection();
-        $[47] = mergeTableCellsAtSelection;
-        $[48] = t17;
-      } else {
-        t17 = $[48];
-      }
-      mergeCellButton = _jsx("button", {
+      mergeCellButton = /*#__PURE__*/_jsx("button", {
         className: "item",
         "data-test-id": "table-merge-cells",
-        onClick: t17,
+        onClick: () => mergeTableCellsAtSelection(),
         type: "button",
         children: "Merge cells"
       });
-    } else {
-      if (canUnmergeCell) {
-        let t17;
-        if ($[49] !== unmergeTableCellsAtSelection) {
-          t17 = () => unmergeTableCellsAtSelection();
-          $[49] = unmergeTableCellsAtSelection;
-          $[50] = t17;
-        } else {
-          t17 = $[50];
-        }
-        mergeCellButton = _jsx("button", {
-          className: "item",
-          "data-test-id": "table-unmerge-cells",
-          onClick: t17,
-          type: "button",
-          children: "Unmerge cells"
-        });
-      }
+    } else if (canUnmergeCell) {
+      mergeCellButton = /*#__PURE__*/_jsx("button", {
+        className: "item",
+        "data-test-id": "table-unmerge-cells",
+        onClick: () => unmergeTableCellsAtSelection(),
+        type: "button",
+        children: "Unmerge cells"
+      });
     }
   }
-  let t17;
-  if ($[51] !== insertTableRowAtSelection) {
-    t17 = () => insertTableRowAtSelection(false);
-    $[51] = insertTableRowAtSelection;
-    $[52] = t17;
-  } else {
-    t17 = $[52];
-  }
-  let t18;
-  if ($[53] !== insertTableRowAtSelection) {
-    t18 = () => insertTableRowAtSelection(true);
-    $[53] = insertTableRowAtSelection;
-    $[54] = t18;
-  } else {
-    t18 = $[54];
-  }
-  let t19;
-  if ($[55] !== insertTableColumnAtSelection) {
-    t19 = () => insertTableColumnAtSelection(false);
-    $[55] = insertTableColumnAtSelection;
-    $[56] = t19;
-  } else {
-    t19 = $[56];
-  }
-  let t20;
-  if ($[57] !== insertTableColumnAtSelection) {
-    t20 = () => insertTableColumnAtSelection(true);
-    $[57] = insertTableColumnAtSelection;
-    $[58] = t20;
-  } else {
-    t20 = $[58];
-  }
-  let t21;
-  if ($[59] !== deleteTableColumnAtSelection) {
-    t21 = () => deleteTableColumnAtSelection();
-    $[59] = deleteTableColumnAtSelection;
-    $[60] = t21;
-  } else {
-    t21 = $[60];
-  }
-  let t22;
-  if ($[61] !== deleteTableRowAtSelection) {
-    t22 = () => deleteTableRowAtSelection();
-    $[61] = deleteTableRowAtSelection;
-    $[62] = t22;
-  } else {
-    t22 = $[62];
-  }
-  let t23;
-  if ($[63] !== deleteTableAtSelection) {
-    t23 = () => deleteTableAtSelection();
-    $[63] = deleteTableAtSelection;
-    $[64] = t23;
-  } else {
-    t23 = $[64];
-  }
-  let t24;
-  if ($[65] !== toggleTableRowIsHeader) {
-    t24 = () => toggleTableRowIsHeader();
-    $[65] = toggleTableRowIsHeader;
-    $[66] = t24;
-  } else {
-    t24 = $[66];
-  }
-  let t25;
-  if ($[67] !== toggleTableColumnIsHeader) {
-    t25 = () => toggleTableColumnIsHeader();
-    $[67] = toggleTableColumnIsHeader;
-    $[68] = t25;
-  } else {
-    t25 = $[68];
-  }
-  return createPortal(_jsxs("div", {
+  return /*#__PURE__*/createPortal(
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+  /*#__PURE__*/
+  _jsxs("div", {
     className: "table-action-menu-dropdown",
-    onClick: _temp,
+    onClick: e => {
+      e.stopPropagation();
+    },
     ref: dropDownRef,
-    children: [mergeCellButton ? _jsxs(React.Fragment, {
-      children: [mergeCellButton, _jsx("hr", {})]
-    }) : null, _jsx("button", {
+    children: [mergeCellButton ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [mergeCellButton, /*#__PURE__*/_jsx("hr", {})]
+    }) : null, /*#__PURE__*/_jsx("button", {
+      className: "item",
+      "data-test-id": "table-row-striping",
+      onClick: () => toggleRowStriping(),
+      type: "button",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "text",
+        children: "Toggle Row Striping"
+      })
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-insert-row-above",
-      onClick: t17,
+      onClick: () => insertTableRowAtSelection(false),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: ["Insert ", selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`, " above"]
+        children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " above"]
       })
-    }), _jsx("button", {
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-insert-row-below",
-      onClick: t18,
+      onClick: () => insertTableRowAtSelection(true),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: ["Insert ", selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`, " below"]
+        children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " below"]
       })
-    }), _jsx("hr", {}), _jsx("button", {
+    }), /*#__PURE__*/_jsx("hr", {}), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-insert-column-before",
-      onClick: t19,
+      onClick: () => insertTableColumnAtSelection(false),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: ["Insert ", selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`, " ", "left"]
+        children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, ' ', "left"]
       })
-    }), _jsx("button", {
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-insert-column-after",
-      onClick: t20,
+      onClick: () => insertTableColumnAtSelection(true),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: ["Insert ", selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`, " ", "right"]
+        children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, ' ', "right"]
       })
-    }), _jsx("hr", {}), _jsx("button", {
+    }), /*#__PURE__*/_jsx("hr", {}), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-delete-columns",
-      onClick: t21,
+      onClick: () => deleteTableColumnAtSelection(),
       type: "button",
-      children: _jsx("span", {
+      children: /*#__PURE__*/_jsx("span", {
         className: "text",
         children: "Delete column"
       })
-    }), _jsx("button", {
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-delete-rows",
-      onClick: t22,
+      onClick: () => deleteTableRowAtSelection(),
       type: "button",
-      children: _jsx("span", {
+      children: /*#__PURE__*/_jsx("span", {
         className: "text",
         children: "Delete row"
       })
-    }), _jsx("button", {
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-delete",
-      onClick: t23,
+      onClick: () => deleteTableAtSelection(),
       type: "button",
-      children: _jsx("span", {
+      children: /*#__PURE__*/_jsx("span", {
         className: "text",
         children: "Delete table"
       })
-    }), _jsx("hr", {}), _jsx("button", {
+    }), /*#__PURE__*/_jsx("hr", {}), /*#__PURE__*/_jsx("button", {
       className: "item",
-      onClick: t24,
+      onClick: () => toggleTableRowIsHeader(),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add", " ", "row header"]
+        children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add', ' ', "row header"]
       })
-    }), _jsx("button", {
+    }), /*#__PURE__*/_jsx("button", {
       className: "item",
       "data-test-id": "table-column-header",
-      onClick: t25,
+      onClick: () => toggleTableColumnIsHeader(),
       type: "button",
-      children: _jsxs("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         className: "text",
-        children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add", " ", "column header"]
+        children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? 'Remove' : 'Add', ' ', "column header"]
       })
     })]
   }), document.body);
 }
-function _temp(e) {
-  e.stopPropagation();
-}
 function TableCellActionMenuContainer({
   anchorElem,
   cellMerge