@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

package/dist/cjs/components/Grid/index.cjs

@@ -0,0 +1,608 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactWindow = require('react-window');
+const AutoSizer = require('react-virtualized-auto-sizer');
+const RowNumberColumn = require('./RowNumberColumn.cjs');
+const Header = require('./Header.cjs');
+const styledComponents = require('styled-components');
+const useSelectionActions = require('./useSelectionActions.cjs');
+const mergeRefs = require('../../utils/mergeRefs.cjs');
+const Cell = require('./Cell.cjs');
+const toastEmitter = require('../Toast/toastEmitter.cjs');
+const copyGridElements = require('./copyGridElements.cjs');
+const useColumns = require('./useColumns.cjs');
+const useResizingState = require('./useResizingState.cjs');
+const ContextMenu = require('../ContextMenu/index.cjs');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const AutoSizer__default = /*#__PURE__*/_interopDefault(AutoSizer);
+
+const NO_BUTTONS_PRESSED = 0;
+const LEFT_BUTTON_PRESSED = 1;
+const RIGHT_BUTTON_PRESSED = 2;
+const GridContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-gq2dz7-0"
+})(["display:flex;flex-direction:column-reverse;user-select:none;overflow-anchor:none;"]);
+const getRenderedCursor = (children) => children.reduce(([minRow, maxRow, minColumn, maxColumn], {
+  props: {
+    columnIndex,
+    rowIndex
+  }
+}) => {
+  if (rowIndex < minRow) {
+    minRow = rowIndex;
+  }
+  if (rowIndex > maxRow) {
+    maxRow = rowIndex;
+  }
+  if (columnIndex < minColumn) {
+    minColumn = columnIndex;
+  }
+  if (columnIndex > maxColumn) {
+    maxColumn = columnIndex;
+  }
+  return [minRow, maxRow, minColumn, maxColumn];
+}, [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]);
+const GridDataContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-gq2dz7-1"
+})(["position:absolute;top:0;left:0;", ""], ({
+  $top,
+  $left
+}) => `
+    margin-top: ${$top}px;
+    margin-left: ${$left}px;
+  `);
+const ContextMenuTrigger = styledComponents.styled.div.withConfig({
+  componentId: "sc-gq2dz7-2"
+})(["outline:none;overflow:hidden;height:", ";width:100%;background:", ";border-radius:", ";", ";"], ({
+  $height
+}) => $height ? `${$height}px` : "100%", ({
+  theme
+}) => theme.click.grid.body.cell.color.background.default, ({
+  theme,
+  $rounded
+}) => theme.click.grid.radii[$rounded], ({
+  $showBorder,
+  theme
+}) => $showBorder && `border: 1px solid ${theme.click.grid.header.cell.color.stroke.default}`);
+const OuterElementType = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
+const Grid = react.forwardRef(({
+  autoFocus,
+  autoHeight = false,
+  rowStart = 0,
+  showRowNumber = true,
+  rounded = "none",
+  showHeader = true,
+  focus: focusProp,
+  useIsScrolling = true,
+  rowHeight = 33,
+  columnCount,
+  columnWidth: columnWidthProp,
+  onSelect: onSelectProp,
+  headerHeight = 33,
+  rowCount,
+  cell,
+  onColumnResize: onColumnResizeProp,
+  onFocusChange: onFocusChangeProp,
+  getMenuOptions,
+  onKeyDown: onKeyDownProp,
+  selection: selectionProp,
+  showToast,
+  onMouseDown: onMouseDownProp,
+  onMouseMove: onMouseMoveProp,
+  showBorder = false,
+  onCopy: onCopyProp,
+  onCopyCallback,
+  onContextMenu: onContextMenuProp,
+  forwardedGridRef,
+  onItemsRendered: onItemsRenderedProp,
+  rowAutoHeight,
+  ...props
+}, forwardedRef) => {
+  const [focus, setFocus] = react.useState(focusProp ?? {
+    row: rowStart,
+    column: 0
+  });
+  const [selection, setSelection] = react.useState(selectionProp ?? {
+    type: "empty"
+  });
+  const defaultOnCopy = react.useCallback(async () => {
+    try {
+      await copyGridElements.default({
+        cell,
+        selection,
+        focus: focusProp ?? focus,
+        rowCount,
+        columnCount,
+        outerRef
+      });
+      if (onCopyCallback) {
+        onCopyCallback(true);
+      }
+      if (showToast) {
+        toastEmitter.createToast({
+          title: "Copied successfully",
+          description: "Now you can paste the content",
+          type: "success"
+        });
+      }
+    } catch (e) {
+      console.error(e);
+      if (onCopyCallback) {
+        onCopyCallback(false);
+      }
+      if (showToast) {
+        toastEmitter.createToast({
+          title: "Failed to copy",
+          description: "Encountered an error while copying. Try again after sometime",
+          type: "danger"
+        });
+      }
+    }
+  }, [cell, columnCount, focus, focusProp, rowCount, selection, showToast, onCopyCallback]);
+  const customOnCopy = react.useMemo(() => {
+    const result = async () => {
+      if (onCopyProp) {
+        await onCopyProp(selection, focus);
+      }
+    };
+    return result;
+  }, [onCopyProp, selection, focus]);
+  const onCopy = typeof onCopyProp === "function" ? customOnCopy : defaultOnCopy;
+  const defaultMenuOptions = [{
+    label: "Copy",
+    onSelect: onCopy
+  }];
+  const [menuOptions, setMenuOptions] = react.useState(defaultMenuOptions);
+  const [contextMenuOpen, setContextMenuOpen] = react.useState(false);
+  const [scrolledVertical, setScrolledVertical] = react.useState(false);
+  const [scrolledHorizontal, setScrolledHorizontal] = react.useState(false);
+  const dragState = react.useRef(false);
+  const gridRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const outerRef = react.useRef(null);
+  const elementBorderRef = react.useRef({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    scrollBarWidth: 0,
+    scrollBarHeight: 0,
+    width: 0,
+    height: 0
+  });
+  const onCellSelect = react.useCallback((action, selection2, focus2) => {
+    setSelection(selection2);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(action, selection2, focus2);
+    }
+  }, [onSelectProp]);
+  const resizingState = useResizingState.default();
+  const [rowHeights, setRowHeights] = react.useState({});
+  const getRowHeight = react.useCallback((index) => {
+    if (rowAutoHeight && rowHeights[index] !== void 0) {
+      return rowHeights[index] + rowHeight;
+    }
+    return rowHeight;
+  }, [rowHeight, rowAutoHeight, rowHeights]);
+  const updateRowHeight = react.useCallback((rowIndex, height) => {
+    if (!rowAutoHeight) {
+      return;
+    }
+    setRowHeights((prevRowHeights) => {
+      if (height > (prevRowHeights[rowIndex] || 0) && gridRef.current) {
+        const newRowHeights = {
+          ...prevRowHeights,
+          [rowIndex]: height
+        };
+        gridRef.current.resetAfterRowIndex(rowIndex);
+        return newRowHeights;
+      }
+      return prevRowHeights;
+    });
+  }, [rowAutoHeight, gridRef]);
+  const onFocusChange = react.useCallback((row, column) => {
+    setFocus((focus2) => ({
+      row: row ?? focusProp?.row ?? focus2.row,
+      column: column ?? focusProp?.column ?? focus2.column
+    }));
+    if (typeof onFocusChangeProp === "function") {
+      onFocusChangeProp(row, column);
+    }
+  }, [onFocusChangeProp, focusProp]);
+  const rowNumberWidth = ((rowStart + rowCount).toString().length + 2) * 8 + 3;
+  const {
+    getColumnHorizontalPosition,
+    onColumnResize,
+    columnWidth,
+    initColumnSize
+  } = useColumns.default({
+    columnCount,
+    columnWidth: columnWidthProp,
+    outerGridRef: outerRef,
+    gridRef,
+    onColumnResize: onColumnResizeProp
+  });
+  const scrollGridTo = react.useCallback(async ({
+    row,
+    column
+  }) => {
+    if (!outerRef.current || !gridRef.current) {
+      return;
+    }
+    const rowIndex = row ?? 0;
+    const columnIndex = column ?? 0;
+    let element = outerRef.current?.querySelector(`[data-row="${rowIndex}"][data-column="${columnIndex}"]`);
+    if (!element) {
+      return;
+    }
+    const {
+      scrollTop,
+      scrollLeft
+    } = outerRef.current;
+    if (typeof element?.scrollIntoView === "function") {
+      element?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+      await new Promise(requestAnimationFrame);
+    }
+    element = outerRef.current?.querySelector(`[data-row="${rowIndex}"][data-column="${columnIndex}"]`);
+    if (!element) {
+      return;
+    }
+    if (scrollLeft > element.offsetLeft || scrollTop > element.offsetTop) {
+      outerRef.current?.scrollBy(scrollLeft > element.offsetLeft ? -rowNumberWidth : 0, scrollTop > element.offsetTop ? -headerHeight : 0);
+    }
+  }, [headerHeight, rowNumberWidth]);
+  const getFixedResizerLeftPosition = react.useCallback((clientX, width, columnIndex) => {
+    const columnPosition = getColumnHorizontalPosition(columnIndex);
+    const columnLeft = columnPosition + width;
+    const {
+      width: containerWidth,
+      left,
+      scrollBarWidth
+    } = elementBorderRef.current;
+    const scrollLeft = outerRef.current?.scrollLeft ?? 0;
+    if (clientX + rowNumberWidth - left > containerWidth + scrollBarWidth) {
+      return scrollLeft + containerWidth - scrollBarWidth - 4;
+    }
+    if (width < 50) {
+      return columnPosition + rowNumberWidth + 50;
+    }
+    return columnLeft + rowNumberWidth - 4;
+  }, [getColumnHorizontalPosition, rowNumberWidth]);
+  const getResizerPosition = react.useCallback((clientX, width, columnIndex) => {
+    const result = {
+      left: `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`
+    };
+    if (outerRef.current) {
+      result.top = `${outerRef.current.scrollTop}px`;
+    }
+    return result;
+  }, [getFixedResizerLeftPosition]);
+  const clearSelectionAndFocus = react.useCallback((force) => {
+    setSelection((selection2) => {
+      if (selection2.type === "columns" && !force) {
+        return selection2;
+      } else {
+        return {
+          type: "empty"
+        };
+      }
+    });
+    const newFocus = focusProp ?? focus;
+    onFocusChange(newFocus.row, newFocus.column);
+    scrollGridTo(newFocus);
+  }, [focus, focusProp, onFocusChange, scrollGridTo]);
+  react.useEffect(() => {
+    clearSelectionAndFocus(true);
+  }, [rowStart]);
+  const {
+    getSelectionType,
+    onSelection,
+    mouseMoveCellSelect,
+    moveSelection
+  } = useSelectionActions.useSelectionActions({
+    onCellSelect,
+    focus: focusProp ?? focus,
+    columnCount,
+    rowCount,
+    onFocusChange,
+    scrollGridTo,
+    selection: selectionProp ?? selection,
+    rowStart
+  });
+  const data = {
+    showRowNumber,
+    cell,
+    rowCount,
+    columnCount,
+    showHeader,
+    focus: focusProp ?? focus,
+    getSelectionType,
+    rowHeight,
+    headerHeight,
+    rowNumberWidth,
+    rowStart,
+    rowAutoHeight,
+    updateRowHeight,
+    getRowHeight
+  };
+  const InnerElementType = react.forwardRef(({
+    children,
+    ...containerProps
+  }, ref) => {
+    const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
+    return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
+      showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn.default, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
+      showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header.default, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
+    ] });
+  });
+  react.useEffect(() => {
+    if (autoFocus) {
+      containerRef.current?.focus();
+    }
+  }, [autoFocus]);
+  const onMouseDown = react.useCallback((e) => {
+    containerRef.current?.focus();
+    if (typeof onMouseDownProp === "function" && e.buttons === LEFT_BUTTON_PRESSED) {
+      onMouseDownProp(e);
+    }
+    const target = e.target.closest("[data-grid-row][data-grid-column]");
+    if (!target || target.dataset.gridRow === void 0 || target.dataset.gridColumn === void 0) {
+      return;
+    }
+    if (e.buttons === RIGHT_BUTTON_PRESSED && target.dataset.selected === "true") {
+      return;
+    }
+    const {
+      gridRow: rowIndexString,
+      gridColumn: columnIndexString
+    } = target.dataset;
+    const row = parseInt(rowIndexString);
+    const column = parseInt(columnIndexString);
+    if (row === -1 && column === -1) {
+      onSelection({
+        type: "all"
+      });
+      return;
+    }
+    const shiftKeyPressed = e.shiftKey;
+    if (row === -1) {
+      onSelection({
+        type: shiftKeyPressed ? "shiftColumnSelection" : "columnSelection",
+        column,
+        event: "click"
+      });
+      if (!shiftKeyPressed) {
+        onFocusChange(rowStart, column);
+      }
+      return;
+    }
+    if (column === -1) {
+      onSelection({
+        type: shiftKeyPressed ? "shiftRowSelection" : "rowSelection",
+        row,
+        event: "click"
+      });
+      if (!shiftKeyPressed) {
+        onFocusChange(row, 0);
+      }
+      return;
+    }
+    onSelection({
+      type: shiftKeyPressed ? "shiftSelection" : "normal",
+      row,
+      column,
+      event: "click"
+    });
+    if (!shiftKeyPressed) {
+      onFocusChange(row, column);
+    }
+  }, [onFocusChange, onMouseDownProp, onSelection, rowStart]);
+  const onPointerDown = react.useCallback((e) => {
+    dragState.current = e.pointerId;
+  }, []);
+  const setPointerCapture = react.useCallback((e) => {
+    if (e.buttons === NO_BUTTONS_PRESSED || dragState.current === false) {
+      return;
+    }
+    containerRef.current?.setPointerCapture(dragState.current);
+  }, []);
+  const onPointerUp = react.useCallback((e) => {
+    if (containerRef.current) {
+      containerRef.current.releasePointerCapture(e.pointerId);
+      if (!contextMenuOpen) {
+        containerRef.current.focus();
+      }
+    }
+    dragState.current = false;
+    const newFocus = focusProp ?? focus;
+    onFocusChange(newFocus.row, newFocus.column);
+  }, [contextMenuOpen, focus, focusProp, onFocusChange]);
+  const onMouseMove = react.useCallback(async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (typeof onMouseMoveProp === "function") {
+      onMouseMoveProp(e);
+    }
+    if (dragState.current === false || e.buttons === NO_BUTTONS_PRESSED || !containerRef.current || !outerRef.current) {
+      return;
+    }
+    containerRef.current.setPointerCapture(dragState.current);
+    let verticalSign = 0, horizontalSign = 0, x = e.clientX, y = e.clientY;
+    if (elementBorderRef.current.left >= e.clientX || e.clientX >= elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth) {
+      const scrollHorizontalDirection = e.clientX <= elementBorderRef.current.left ? "left" : "right";
+      if (scrollHorizontalDirection === "left" && e.movementX < 0 || scrollHorizontalDirection === "right" && e.movementX > 0) {
+        horizontalSign = scrollHorizontalDirection === "left" ? -1 : 1;
+      }
+      x = scrollHorizontalDirection === "left" ? elementBorderRef.current.left + rowNumberWidth + 10 : elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth - 10;
+    }
+    if (elementBorderRef.current.top >= e.clientY || e.clientY >= elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight) {
+      const scrollVerticalDirection = e.clientY <= elementBorderRef.current.top ? "top" : "bottom";
+      if (scrollVerticalDirection === "top" && e.movementY < 0 || scrollVerticalDirection === "bottom" && e.movementY > 0) {
+        verticalSign = scrollVerticalDirection === "top" ? -1 : 1;
+      }
+      y = scrollVerticalDirection === "top" ? elementBorderRef.current.top + headerHeight + 10 : elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight - 10;
+    }
+    await new Promise(requestAnimationFrame);
+    const cell2 = document.elementFromPoint(x, y);
+    if (!cell2) {
+      return;
+    }
+    const {
+      gridRow,
+      gridColumn
+    } = cell2.dataset;
+    if (!gridRow || !gridColumn) {
+      return;
+    }
+    const rowIndex = Number(gridRow) + verticalSign;
+    const columnIndex = Number(gridColumn) + horizontalSign;
+    mouseMoveCellSelect(rowIndex, columnIndex);
+  }, [headerHeight, mouseMoveCellSelect, onMouseMoveProp, rowNumberWidth]);
+  const onScroll = ({
+    scrollLeft,
+    scrollTop
+  }) => {
+    setScrolledVertical(scrollTop > 0);
+    setScrolledHorizontal(scrollLeft > 0);
+  };
+  const onResize = react.useCallback(({
+    height,
+    width
+  }) => {
+    setTimeout(() => {
+      if (!outerRef.current) {
+        return;
+      }
+      const {
+        top,
+        bottom,
+        left,
+        right
+      } = outerRef.current.getBoundingClientRect() ?? {};
+      elementBorderRef.current = {
+        top,
+        bottom,
+        left,
+        right,
+        scrollBarWidth: width - outerRef.current.clientWidth,
+        scrollBarHeight: height - outerRef.current.clientHeight,
+        width,
+        height
+      };
+      initColumnSize(outerRef.current.clientWidth - rowNumberWidth);
+    }, 0);
+  }, [initColumnSize, rowNumberWidth]);
+  const onKeyDown = react.useCallback(async (e) => {
+    if (typeof onKeyDownProp === "function") {
+      onKeyDownProp(e);
+    }
+    if (!e.defaultPrevented) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    const moveAnchor = e.shiftKey;
+    const {
+      row,
+      column
+    } = focusProp ?? focus;
+    const applyAction = (action) => {
+      if (action) {
+        onSelection({
+          ...action,
+          event: "keypress"
+        });
+      }
+      if (action?.type === "normal") {
+        onFocusChange(action.row, action.column);
+      }
+    };
+    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+      onCopy();
+      return;
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        applyAction(moveSelection(-1, 0, moveAnchor, "keypress"));
+        break;
+      case "ArrowRight":
+        applyAction(moveSelection(1, 0, moveAnchor, "keypress"));
+        break;
+      case "ArrowUp":
+        applyAction(moveSelection(0, -1, moveAnchor, "keypress"));
+        break;
+      case "ArrowDown":
+        applyAction(moveSelection(0, 1, moveAnchor, "keypress"));
+        break;
+      case "Enter":
+        onSelection({
+          type: "normal",
+          row,
+          column,
+          event: "keypress"
+        });
+        onFocusChange(row, column);
+        break;
+      case "Escape":
+        clearSelectionAndFocus(true);
+        break;
+    }
+    containerRef.current?.focus();
+  }, [onKeyDownProp, focusProp, focus, onSelection, onFocusChange, onCopy, moveSelection, clearSelectionAndFocus]);
+  const onContextMenu = (e) => {
+    onMouseDown(e);
+    if (typeof onContextMenuProp === "function") {
+      onContextMenuProp(e);
+    }
+    if (typeof getMenuOptions === "function") {
+      const newOptions = getMenuOptions(selection, focusProp ?? focus);
+      setMenuOptions([...defaultMenuOptions, ...newOptions]);
+    }
+  };
+  const lastItemsRenderedProps = react.useRef();
+  const lastRowStart = react.useRef(rowStart);
+  const onItemsRendered = react.useCallback((props2) => {
+    lastItemsRenderedProps.current = props2;
+    return onItemsRenderedProp?.({
+      ...props2,
+      visibleRowStartIndex: props2.visibleRowStartIndex + rowStart,
+      visibleRowStopIndex: props2.visibleRowStopIndex + rowStart,
+      overscanRowStartIndex: props2.overscanRowStartIndex + rowStart,
+      overscanRowStopIndex: props2.overscanRowStopIndex + rowStart
+    });
+  }, [onItemsRenderedProp, rowStart]);
+  react.useEffect(() => {
+    if (lastItemsRenderedProps.current && rowStart !== lastRowStart.current) {
+      onItemsRendered(lastItemsRenderedProps.current);
+      lastRowStart.current = rowStart;
+    }
+  }, [rowStart, onItemsRendered]);
+  const CellWithWidth = (args) => {
+    const width = columnWidth(args.columnIndex);
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { ...args, width });
+  };
+  react.useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.resetAfterRowIndex(0);
+    }
+  }, [rowCount, columnCount]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu.ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { as: ContextMenu.ContextMenu.Trigger, ref: mergeRefs.mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer__default.default, { onResize, children: ({
+      height,
+      width
+    }) => /* @__PURE__ */ jsxRuntime.jsx(reactWindow.VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs.mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Content, { children: menuOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index}`)) })
+  ] });
+});
+
+exports.Grid = Grid;
+//# sourceMappingURL=index.cjs.map