@jsenv/navi 0.10.1 → 0.11.0

package/src/components/table/selection/table_selection.js

@@ -1,106 +0,0 @@
-import { createContext } from "preact";
-import { useMemo } from "preact/hooks";
-
-export const TableSelectionContext = createContext();
-export const useTableSelectionContextValue = (
-  selection,
-  selectionController,
-) => {
-  const selectionContextValue = useMemo(() => {
-    const selectedColumnIds = [];
-    const selectedRowIds = [];
-    const selectedCellIds = [];
-    const columnIdWithSomeSelectedCellSet = new Set();
-    const rowIdWithSomeSelectedCellSet = new Set();
-    for (const item of selection) {
-      const selectionValueInfo = parseTableSelectionValue(item);
-      if (selectionValueInfo.type === "row") {
-        const { rowId } = selectionValueInfo;
-        selectedRowIds.push(rowId);
-        continue;
-      }
-      if (selectionValueInfo.type === "column") {
-        const { columnId } = selectionValueInfo;
-        selectedColumnIds.push(columnId);
-        continue;
-      }
-      if (selectionValueInfo.type === "cell") {
-        const { cellId, columnId, rowId } = selectionValueInfo;
-        selectedCellIds.push(cellId);
-        columnIdWithSomeSelectedCellSet.add(columnId);
-        rowIdWithSomeSelectedCellSet.add(rowId);
-        continue;
-      }
-    }
-    return {
-      selection,
-      selectionController,
-      selectedColumnIds,
-      selectedRowIds,
-      columnIdWithSomeSelectedCellSet,
-      rowIdWithSomeSelectedCellSet,
-    };
-  }, [selection]);
-
-  return selectionContextValue;
-};
-
-export const parseTableSelectionValue = (selectionValue) => {
-  if (selectionValue.startsWith("column:")) {
-    const columnId = selectionValue.slice("column:".length);
-    return { type: "column", columnId };
-  }
-  if (selectionValue.startsWith("row:")) {
-    const rowId = selectionValue.slice("row:".length);
-    return { type: "row", rowId };
-  }
-  const cellId = selectionValue.slice("cell:".length);
-  const [columnId, rowId] = cellId.split("-");
-  return { type: "cell", cellId, columnId, rowId };
-};
-export const stringifyTableSelectionValue = (type, value) => {
-  if (type === "cell") {
-    const { columnId, rowId } = value;
-    return `cell:${columnId}-${rowId}`;
-  }
-  if (type === "column") {
-    return `column:${value}`;
-  }
-  if (type === "row") {
-    return `row:${value}`;
-  }
-  return "";
-};
-
-/**
- * Check if a specific cell is selected
- * @param {Array} selection - The selection set or array
- * @param {{rowIndex: number, columnIndex: number}} cellPosition - Cell coordinates
- * @returns {boolean} True if the cell is selected
- */
-export const isCellSelected = (selection, cellId) => {
-  const cellSelectionValue = stringifyTableSelectionValue("cell", cellId);
-  return selection.includes(cellSelectionValue);
-};
-
-/**
- * Check if a specific row is selected
- * @param {Array} selection - The selection set or array
- * @param {number} rowIndex - Row index
- * @returns {boolean} True if the row is selected
- */
-export const isRowSelected = (selection, rowId) => {
-  const rowSelectionValue = stringifyTableSelectionValue("row", rowId);
-  return selection.includes(rowSelectionValue);
-};
-
-/**
- * Check if a specific column is selected
- * @param {Array} selection - The selection set or array
- * @param {number} columnIndex - Column index
- * @returns {boolean} True if the column is selected
- */
-export const isColumnSelected = (selection, columnId) => {
-  const columnSelectionValue = stringifyTableSelectionValue("column", columnId);
-  return selection.has(columnSelectionValue);
-};

package/src/components/table/selection/table_selection.jsx

@@ -1,203 +0,0 @@
-import { useLayoutEffect } from "preact/hooks";
-
-import { useSelectionController } from "../../selection/selection.jsx";
-
-import.meta.css = /* css */ `
-  body {
-    --selection-border-color: #0078d4;
-    --selection-background-color: #eaf1fd;
-  }
-
-  .navi_table_cell[aria-selected="true"] {
-    background-color: var(--selection-background-color);
-  }
-
-  /* One border */
-  .navi_table_cell[data-selection-border-top]::after {
-    box-shadow: inset 0 1px 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-right]::after {
-    box-shadow: inset -1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-bottom]::after {
-    box-shadow: inset 0 -1px 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-left]::after {
-    box-shadow: inset 1px 0 0 0 var(--selection-border-color);
-  }
-
-  /* Two border combinations */
-  .navi_table_cell[data-selection-border-top][data-selection-border-right]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset -1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-top][data-selection-border-bottom]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-top][data-selection-border-left]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-right][data-selection-border-bottom]::after {
-    box-shadow:
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-right][data-selection-border-left]::after {
-    box-shadow:
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-bottom][data-selection-border-left]::after {
-    box-shadow:
-      inset 0 -1px 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-
-  /* Three border combinations */
-  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-bottom]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-top][data-selection-border-bottom][data-selection-border-left]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-left]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-  .navi_table_cell[data-selection-border-right][data-selection-border-bottom][data-selection-border-left]::after {
-    box-shadow:
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-
-  /* Four border combinations (full selection) */
-  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-bottom][data-selection-border-left]::after {
-    box-shadow:
-      inset 0 1px 0 0 var(--selection-border-color),
-      inset -1px 0 0 0 var(--selection-border-color),
-      inset 0 -1px 0 0 var(--selection-border-color),
-      inset 1px 0 0 0 var(--selection-border-color);
-  }
-`;
-
-export const useTableSelectionController = ({
-  tableRef,
-  selection,
-  onSelectionChange,
-  selectionColor,
-}) => {
-  const selectionController = useSelectionController({
-    elementRef: tableRef,
-    layout: "grid",
-    value: selection,
-    onChange: onSelectionChange,
-    selectAllName: "cell",
-  });
-
-  useLayoutEffect(() => {
-    const table = tableRef.current;
-    if (!table) {
-      return;
-    }
-    updateSelectionBorders(table, selectionController);
-  }, [selectionController.value]);
-
-  useLayoutEffect(() => {
-    const table = tableRef.current;
-    if (!table) {
-      return;
-    }
-    if (selectionColor) {
-      table.style.setProperty("--selection-border-color", selectionColor);
-    } else {
-      table.style.removeProperty("--selection-border-color");
-    }
-  }, [selectionColor]);
-
-  return selectionController;
-};
-
-const updateSelectionBorders = (tableElement, selectionController) => {
-  // Find all selected cells
-  const cells = Array.from(tableElement.querySelectorAll(".navi_table_cell"));
-  const selectedCells = [];
-  for (const cell of cells) {
-    if (selectionController.isElementSelected(cell)) {
-      selectedCells.push(cell);
-    }
-  }
-
-  // Clear all existing selection border attributes
-  tableElement
-    .querySelectorAll(
-      "[data-selection-border-top], [data-selection-border-right], [data-selection-border-bottom], [data-selection-border-left]",
-    )
-    .forEach((cell) => {
-      cell.removeAttribute("data-selection-border-top");
-      cell.removeAttribute("data-selection-border-right");
-      cell.removeAttribute("data-selection-border-bottom");
-      cell.removeAttribute("data-selection-border-left");
-    });
-
-  if (selectedCells.length === 0) {
-    return;
-  }
-
-  // Convert NodeList to array and get cell positions
-
-  const cellPositions = selectedCells.map((cell) => {
-    const row = cell.parentElement;
-    const allRows = Array.from(tableElement.querySelectorAll(".navi_tr"));
-    return {
-      element: cell,
-      rowIndex: allRows.indexOf(row),
-      columnIndex: Array.from(row.children).indexOf(cell),
-    };
-  });
-
-  // Create a set for fast lookup of selected cell positions
-  const selectedPositions = new Set(
-    cellPositions.map((pos) => `${pos.rowIndex},${pos.columnIndex}`),
-  );
-
-  // Apply selection borders based on actual neighbors (for proper L-shaped selection support)
-  cellPositions.forEach(({ element, rowIndex, columnIndex }) => {
-    // Top border: if cell above is NOT selected or doesn't exist
-    const cellAbove = `${rowIndex - 1},${columnIndex}`;
-    if (!selectedPositions.has(cellAbove)) {
-      element.setAttribute("data-selection-border-top", "");
-    }
-
-    // Bottom border: if cell below is NOT selected or doesn't exist
-    const cellBelow = `${rowIndex + 1},${columnIndex}`;
-    if (!selectedPositions.has(cellBelow)) {
-      element.setAttribute("data-selection-border-bottom", "");
-    }
-
-    // Left border: if cell to the left is NOT selected or doesn't exist
-    const cellLeft = `${rowIndex},${columnIndex - 1}`;
-    if (!selectedPositions.has(cellLeft)) {
-      element.setAttribute("data-selection-border-left", "");
-    }
-
-    // Right border: if cell to the right is NOT selected or doesn't exist
-    const cellRight = `${rowIndex},${columnIndex + 1}`;
-    if (!selectedPositions.has(cellRight)) {
-      element.setAttribute("data-selection-border-right", "");
-    }
-  });
-};

package/src/components/table/sticky/sticky_group.js

@@ -1,354 +0,0 @@
-// TODO: move this to @jsenv/dom (the initStickyGroup part, not the useLayoutEffect)
-
-import { createPubSub, setStyles } from "@jsenv/dom";
-import { useLayoutEffect } from "preact/hooks";
-
-// React hook version for easy integration
-export const useStickyGroup = (
-  elementRef,
-  { elementReceivingCumulativeStickyPositionRef, elementSelector } = {},
-) => {
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      return undefined;
-    }
-    return initStickyGroup(element, {
-      elementSelector,
-      elementReceivingCumulativeStickyPosition:
-        elementReceivingCumulativeStickyPositionRef.current,
-    });
-  }, [elementSelector]);
-};
-
-const ITEM_LEFT_VAR = "--sticky-group-item-left";
-const ITEM_TOP_VAR = "--sticky-group-item-top";
-const FRONTIER_LEFT_VAR = "--sticky-group-left";
-const FRONTIER_TOP_VAR = "--sticky-group-top";
-// const FRONTIER_LEFT_VIEWPORT_VAR = "--sticky-group-left-viewport";
-// const FRONTIER_TOP_VIEWPORT_VAR = "--sticky-group-top-viewport";
-
-/**
- * Creates a sticky group that manages positioning for multiple sticky elements
- * that need to be aware of each other's dimensions.
- * Always uses CSS variables for positioning.
- *
- * @param {HTMLElement} container The container element
- * @returns {Function} Cleanup function
- */
-const initStickyGroup = (
-  container,
-  { elementSelector, elementReceivingCumulativeStickyPosition } = {},
-) => {
-  if (!container) {
-    throw new Error("initStickyGroup: container is required");
-  }
-
-  const [teardown, addTeardown] = createPubSub();
-  const [cleanup, addCleanup, clearCleanup] = createPubSub();
-  addTeardown(cleanup);
-
-  const element = elementSelector
-    ? container.querySelector(elementSelector)
-    : container;
-  const isGrid =
-    element.tagName === "TABLE" || element.classList.contains("navi_table");
-  const updatePositions = () => {
-    // Clear all previous CSS variable cleanups before setting new ones
-    cleanup();
-    clearCleanup();
-
-    if (isGrid) {
-      updateGridPositions();
-    } else {
-      updateLinearPositions();
-    }
-  };
-
-  const updateGridPositions = () => {
-    // Handle table grid - update both horizontal and vertical sticky elements
-    updateTableColumns();
-    updateTableRows();
-  };
-  const updateTableColumns = () => {
-    // Find all sticky columns by checking all rows to identify which columns have sticky cells
-    const allStickyColumnCells = element.querySelectorAll(
-      ".navi_table_cell[data-sticky-left]",
-    );
-    if (allStickyColumnCells.length === 0) {
-      return;
-    }
-
-    // Get the first row to determine column indices (use any row that exists)
-    const firstRow = element.querySelector(".navi_tr");
-    if (!firstRow) {
-      return;
-    }
-
-    // Group sticky cells by column index
-    const stickyColumnsByIndex = new Map();
-    allStickyColumnCells.forEach((cell) => {
-      const row = cell.closest(".navi_tr");
-      const columnIndex = Array.from(row.children).indexOf(cell);
-      if (!stickyColumnsByIndex.has(columnIndex)) {
-        stickyColumnsByIndex.set(columnIndex, []);
-      }
-      stickyColumnsByIndex.get(columnIndex).push(cell);
-    });
-
-    // Sort columns by index and process them
-    const sortedColumnIndices = Array.from(stickyColumnsByIndex.keys()).sort(
-      (a, b) => a - b,
-    );
-    let cumulativeWidth = 0;
-
-    sortedColumnIndices.forEach((columnIndex, stickyIndex) => {
-      const cellsInColumn = stickyColumnsByIndex.get(columnIndex);
-      const leftPosition = stickyIndex === 0 ? 0 : cumulativeWidth;
-
-      // Set CSS variable on all sticky cells in this column using setStyles for proper cleanup
-      cellsInColumn.forEach((cell) => {
-        const restoreStyles = setStyles(cell, {
-          [ITEM_LEFT_VAR]: `${leftPosition}px`,
-        });
-        addCleanup(restoreStyles);
-      });
-
-      // Also set CSS variable on corresponding <col> element if it exists
-      const colgroup = element.querySelector(".navi_colgroup");
-      if (colgroup) {
-        const colElements = Array.from(colgroup.querySelectorAll(".navi_col"));
-        const correspondingCol = colElements[columnIndex];
-        if (correspondingCol) {
-          const restoreStyles = setStyles(correspondingCol, {
-            [ITEM_LEFT_VAR]: `${leftPosition}px`,
-          });
-          addCleanup(restoreStyles);
-        }
-      }
-
-      // Update cumulative width for next column using the first cell in this column as reference
-      const referenceCell = cellsInColumn[0];
-      const columnWidth = referenceCell.getBoundingClientRect().width;
-      if (stickyIndex === 0) {
-        cumulativeWidth = columnWidth;
-      } else {
-        cumulativeWidth += columnWidth;
-      }
-    });
-
-    // Set frontier variables with proper cleanup tracking
-    const restoreContainerStyles = setStyles(container, {
-      [FRONTIER_LEFT_VAR]: `${cumulativeWidth}px`,
-    });
-    addCleanup(restoreContainerStyles);
-
-    if (elementReceivingCumulativeStickyPosition) {
-      const restoreCumulativeStyles = setStyles(
-        elementReceivingCumulativeStickyPosition,
-        {
-          [FRONTIER_LEFT_VAR]: `${cumulativeWidth}px`,
-        },
-      );
-      addCleanup(restoreCumulativeStyles);
-    }
-  };
-  const updateTableRows = () => {
-    // Handle sticky rows by finding cells with data-sticky-top and grouping by row
-    const stickyCells = element.querySelectorAll(
-      ".navi_table_cell[data-sticky-top]",
-    );
-    if (stickyCells.length === 0) {
-      return;
-    }
-
-    // Group cells by their parent row
-    const rowsWithStickyCells = new Map();
-    stickyCells.forEach((cell) => {
-      const row = cell.parentElement;
-      if (!rowsWithStickyCells.has(row)) {
-        rowsWithStickyCells.set(row, []);
-      }
-      rowsWithStickyCells.get(row).push(cell);
-    });
-
-    // Convert to array and sort by row position in DOM
-    const allRows = Array.from(element.querySelectorAll(".navi_tr"));
-    const stickyRows = Array.from(rowsWithStickyCells.keys()).sort((a, b) => {
-      const aIndex = allRows.indexOf(a);
-      const bIndex = allRows.indexOf(b);
-      return aIndex - bIndex;
-    });
-
-    let cumulativeHeight = 0;
-    stickyRows.forEach((row, index) => {
-      const rowCells = rowsWithStickyCells.get(row);
-      const topPosition = index === 0 ? 0 : cumulativeHeight;
-
-      // Set CSS variable on all sticky cells in this row using setStyles for proper cleanup
-      rowCells.forEach((cell) => {
-        const restoreStyles = setStyles(cell, {
-          [ITEM_TOP_VAR]: `${topPosition}px`,
-        });
-        addCleanup(restoreStyles);
-      });
-
-      // Also set CSS variable on the <tr> element itself
-      const restoreRowStyles = setStyles(row, {
-        [ITEM_TOP_VAR]: `${topPosition}px`,
-      });
-      addCleanup(restoreRowStyles);
-
-      // Update cumulative height for next row
-      const rowHeight = row.getBoundingClientRect().height;
-      if (index === 0) {
-        cumulativeHeight = rowHeight;
-      } else {
-        cumulativeHeight += rowHeight;
-      }
-    });
-
-    // Set frontier variables with proper cleanup tracking
-    const restoreContainerStyles = setStyles(container, {
-      [FRONTIER_TOP_VAR]: `${cumulativeHeight}px`,
-    });
-    addCleanup(restoreContainerStyles);
-
-    if (elementReceivingCumulativeStickyPosition) {
-      const restoreCumulativeStyles = setStyles(
-        elementReceivingCumulativeStickyPosition,
-        {
-          [FRONTIER_TOP_VAR]: `${cumulativeHeight}px`,
-        },
-      );
-      addCleanup(restoreCumulativeStyles);
-    }
-  };
-
-  const updateLinearPositions = () => {
-    // Handle linear container - detect direction from first sticky element
-    const stickyElements = element.querySelectorAll(
-      "[data-sticky-left], [data-sticky-top]",
-    );
-    if (stickyElements.length <= 1) return;
-
-    const firstElement = stickyElements[0];
-    const isHorizontal = firstElement.hasAttribute("data-sticky-left");
-    const dimensionProperty = isHorizontal ? "width" : "height";
-    const cssVariableName = isHorizontal ? ITEM_LEFT_VAR : ITEM_TOP_VAR;
-
-    let cumulativeSize = 0;
-    stickyElements.forEach((element, index) => {
-      if (index === 0) {
-        // First element stays at position 0
-        const restoreStyles = setStyles(element, {
-          [cssVariableName]: "0px",
-        });
-        addCleanup(restoreStyles);
-        cumulativeSize = element.getBoundingClientRect()[dimensionProperty];
-      } else {
-        // Subsequent elements use cumulative positioning
-        const position = cumulativeSize;
-        const restoreStyles = setStyles(element, {
-          [cssVariableName]: `${position}px`,
-        });
-        addCleanup(restoreStyles);
-        cumulativeSize += element.getBoundingClientRect()[dimensionProperty];
-      }
-    });
-
-    // Set frontier variables with proper cleanup tracking
-    const frontierVar = isHorizontal ? FRONTIER_LEFT_VAR : FRONTIER_TOP_VAR;
-    const restoreContainerStyles = setStyles(container, {
-      [frontierVar]: `${cumulativeSize}px`,
-    });
-    addCleanup(restoreContainerStyles);
-
-    if (elementReceivingCumulativeStickyPosition) {
-      const restoreCumulativeStyles = setStyles(
-        elementReceivingCumulativeStickyPosition,
-        {
-          [frontierVar]: `${cumulativeSize}px`,
-        },
-      );
-      addCleanup(restoreCumulativeStyles);
-    }
-  };
-
-  // Initial positioning
-  updatePositions();
-
-  // Set up ResizeObserver to handle size changes
-  const resizeObserver = new ResizeObserver(() => {
-    updatePositions();
-  });
-
-  // Set up MutationObserver to handle DOM changes
-  const mutationObserver = new MutationObserver((mutations) => {
-    let shouldUpdate = false;
-
-    mutations.forEach((mutation) => {
-      // Check if sticky elements were added/removed or attributes changed
-      if (mutation.type === "childList") {
-        shouldUpdate = true;
-      }
-      if (mutation.type === "attributes") {
-        // Check if the mutation affects sticky attributes
-        if (
-          mutation.attributeName === "data-sticky-left" ||
-          mutation.attributeName === "data-sticky-top"
-        ) {
-          shouldUpdate = true;
-        }
-      }
-    });
-
-    if (shouldUpdate) {
-      updatePositions();
-    }
-  });
-
-  // Start observing
-  resizeObserver.observe(element);
-  addTeardown(() => {
-    resizeObserver.disconnect();
-  });
-
-  mutationObserver.observe(element, {
-    attributes: true,
-    childList: true,
-    subtree: true,
-    attributeFilter: ["data-sticky-left", "data-sticky-top"],
-  });
-  addTeardown(() => {
-    mutationObserver.disconnect();
-  });
-
-  // Return cleanup function
-  return () => {
-    teardown();
-  };
-};
-
-// const visualPositionEffect = (element, callback) => {
-//   const updatePosition = () => {
-//     const { left, top } = getVisualRect(element, document.body, {
-//       isStickyLeft: false,
-//       isStickyTop: false,
-//     });
-//     callback({ left, top });
-//   };
-//   updatePosition();
-
-//   window.addEventListener("scroll", updatePosition, { passive: true });
-//   window.addEventListener("resize", updatePosition);
-//   window.addEventListener("touchmove", updatePosition);
-
-//   return () => {
-//     window.removeEventListener("scroll", updatePosition, {
-//       passive: true,
-//     });
-//     window.removeEventListener("resize", updatePosition);
-//     window.removeEventListener("touchmove", updatePosition);
-//   };
-// };

package/src/components/table/sticky/table_sticky.js

@@ -1,25 +0,0 @@
-import { createContext } from "preact";
-import { useMemo } from "preact/hooks";
-
-import { useStableCallback } from "../../use_stable_callback.js";
-
-export const TableStickyContext = createContext();
-
-export const useTableStickyContextValue = ({
-  stickyLeftFrontierColumnIndex,
-  stickyTopFrontierRowIndex,
-  onStickyLeftFrontierChange,
-  onStickyTopFrontierChange,
-}) => {
-  onStickyLeftFrontierChange = useStableCallback(onStickyLeftFrontierChange);
-  onStickyTopFrontierChange = useStableCallback(onStickyTopFrontierChange);
-
-  return useMemo(() => {
-    return {
-      stickyLeftFrontierColumnIndex,
-      stickyTopFrontierRowIndex,
-      onStickyLeftFrontierChange,
-      onStickyTopFrontierChange,
-    };
-  }, [stickyLeftFrontierColumnIndex, stickyTopFrontierRowIndex]);
-};