@apia/table2-controller 4.0.20

package/dist/index.js

@@ -0,0 +1,903 @@
+import { makeObservable, action, observable, computed } from 'mobx';
+import { EventEmitter, useMount, scrollParentIntoElement, disableChildrenFocus, getFocusSelector } from '@apia/util';
+import { useRef } from 'react';
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, key + "" , value);
+  return value;
+};
+const voidTable = {};
+class Element {
+  constructor(state) {
+    this.state = state;
+    __publicField$4(this, "table", voidTable);
+    makeObservable(this, {
+      state: observable,
+      setState: action
+    });
+  }
+  getTable() {
+    return this.table;
+  }
+  setTable(table) {
+    this.table = table || voidTable;
+    return this;
+  }
+  getState(prop) {
+    return this.state[prop];
+  }
+  setState(prop, value) {
+    if (typeof prop === "function") {
+      this.state = prop(this.state);
+    } else {
+      this.state[prop] = value;
+    }
+    return this;
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, key + "" , value);
+  return value;
+};
+class Cell extends Element {
+  constructor() {
+    super(...arguments);
+    __publicField$3(this, "parentRow", {});
+  }
+  getIndex() {
+    return this.getRow().getCellIndex(this);
+  }
+  getRow() {
+    return this.parentRow;
+  }
+  setRow(row) {
+    this.parentRow = row;
+    return this;
+  }
+  /**
+   *
+   * @param doFocus - If true, the cell will be focused after being set as the focused cell.
+   *                 If false, the cell will contain the tabIndex = 0 but will not be focused.
+   */
+  focus(doFocus = true) {
+    this.table.setFocusedCell(this, doFocus);
+  }
+  updateState(state) {
+    this.state = { ...this.state, ...state };
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, key + "" , value);
+  return value;
+};
+class Row extends Element {
+  constructor(id, properties) {
+    const { cells, isSelected, ...state } = properties || {};
+    super({ id, ...state, cells: cells || [] });
+    this.properties = properties;
+    __publicField$2(this, "container", {});
+    makeObservable(this, {
+      isSelected: computed,
+      index: computed
+    });
+  }
+  addCell(cell) {
+    this.state.cells.push(cell);
+    cell.setTable(this.table);
+    cell.setRow(this);
+    return this;
+  }
+  addCellAfter(anchor, newElement) {
+    const index = this.state.cells.indexOf(anchor) + 1;
+    if (index !== -1) {
+      newElement.setTable(this.table);
+      newElement.setRow(this);
+      this.state.cells.splice(index, 0, newElement);
+    }
+  }
+  addCellBefore(anchor, newElement) {
+    const index = this.state.cells.indexOf(anchor);
+    if (index !== -1) {
+      newElement.setTable(this.table);
+      newElement.setRow(this);
+      this.state.cells.splice(index, 0, newElement);
+    }
+  }
+  build(data) {
+    for (const cell of data.cells) {
+      const cellInstance = new Cell(cell);
+      this.addCell(cellInstance);
+    }
+  }
+  get cells() {
+    return this.state.cells;
+  }
+  get isSelected() {
+    return this.table.isSelected(this);
+  }
+  getCellByColumnName(colName) {
+    return this.cells.find((c) => c.getState("colName") === colName);
+  }
+  getCellByIndex(index) {
+    return this.cells[index];
+  }
+  getCellIndex(cell) {
+    return this.cells.indexOf(cell);
+  }
+  getContainer() {
+    return this.container;
+  }
+  getFollowingRow() {
+    const containerRows = [...this.container.getState("rows").values()];
+    const index = containerRows.findIndex(
+      (r) => r.getState("id") === this.state.id
+    );
+    return containerRows[index + 1] || null;
+  }
+  get index() {
+    return this.getContainer().getRowIndex(this);
+  }
+  getPreviousRow() {
+    const containerRows = [...this.container.getState("rows").values()];
+    const index = containerRows.findIndex(
+      (r) => r.getState("id") === this.state.id
+    );
+    return containerRows[index - 1] || null;
+  }
+  insertAfter(row) {
+    this.getContainer()?.insertAfter(this, row);
+  }
+  insertBefore(row) {
+    this.getContainer()?.insertBefore(this, row);
+  }
+  remove() {
+    this.getContainer()?.removeRow(this);
+  }
+  scrollIntoView() {
+    this.table.scrollRowIntoView(this);
+  }
+  setContainer(container) {
+    this.container = container;
+    return this;
+  }
+  setTable(table) {
+    super.setTable(table);
+    this.state.cells.forEach((c) => c.setTable(table));
+    if (table && this.properties?.isSelected) {
+      table.toggleRowSelection(this, true);
+    }
+    return this;
+  }
+  swap(withRow) {
+    this.getContainer()?.swapRows(this, withRow);
+  }
+  toggleSelection(forceState) {
+    this.table.toggleRowSelection(this, forceState);
+  }
+}
+
+class RowsGroup extends Element {
+  constructor(table, state) {
+    super({ ...state, rows: [] });
+    this.table = table;
+    makeObservable(this, { swapRows: action, rows: computed });
+  }
+  get rows() {
+    return this.state.rows;
+  }
+  addRow(row) {
+    this.state.rows.push(row);
+    row.setTable(this.table);
+    row.setContainer(this);
+    this.runAddRowPlugin(row);
+    return this;
+  }
+  addRows(rows) {
+    rows.forEach(this.addRow.bind(this));
+    return this;
+  }
+  clear() {
+    this.state.rows.forEach((row) => {
+      row.setContainer(null);
+      row.setTable(null);
+    });
+    return this.rows.splice(0, this.rows.length);
+  }
+  getRowById(id) {
+    return this.state.rows.find((c) => c.getState("id") === id);
+  }
+  getRowByIndex(index) {
+    return this.state.rows[index];
+  }
+  getRowIndex(row) {
+    return this.state.rows.indexOf(row);
+  }
+  insertAfter(anchor, newElement) {
+    if (anchor.getContainer() === this) {
+      const index = this.state.rows.indexOf(anchor);
+      this.state.rows.splice(index + 1, 0, newElement);
+      newElement.setTable(this.table);
+      newElement.setContainer(this);
+      this.runAddRowPlugin(newElement);
+    }
+  }
+  insertBefore(anchor, newElement) {
+    if (anchor.getContainer() === this) {
+      const index = this.state.rows.indexOf(anchor);
+      this.state.rows.splice(index, 0, newElement);
+      newElement.setTable(this.table);
+      newElement.setContainer(this);
+      this.runAddRowPlugin(newElement);
+    }
+  }
+  removeRow(row) {
+    if (row.getContainer() === this) {
+      row.setContainer(null);
+      this.state.rows = this.state.rows.filter((r) => r !== row);
+      this.table.removeRow(row);
+    }
+  }
+  swapRows(a, b) {
+    if (a?.getContainer() === this && b?.getContainer() === this) {
+      const aIndex = this.state.rows.findIndex(
+        (r) => r.getState?.("id") === a.getState?.("id")
+      );
+      const bIndex = this.state.rows.findIndex(
+        (r) => r.getState?.("id") === b.getState?.("id")
+      );
+      if (aIndex !== -1 && bIndex !== -1) {
+        this.state.rows[aIndex] = b;
+        this.state.rows[bIndex] = a;
+      }
+    }
+  }
+  runAddRowPlugin(newRow) {
+    const plugins = this.getTable().getApplicablePlugins("onAddRow");
+    plugins.forEach((c) => c(this, newRow));
+  }
+}
+
+class TableBody extends RowsGroup {
+  constructor(table) {
+    super(table, { rows: [] });
+  }
+  build(data) {
+    for (const row of data.rows) {
+      const bodyRow = new Row(row.id);
+      this.addRow(bodyRow);
+      bodyRow.build(row);
+    }
+  }
+}
+
+class TableHead extends RowsGroup {
+  constructor(table) {
+    super(table, { rows: [] });
+  }
+  build(data) {
+    this.state.rows = [];
+    const headerRow = new Row("header");
+    this.addRow(headerRow);
+    for (const column of data.columns) {
+      const headerCell = new Cell(column);
+      headerRow.addCell(headerCell);
+    }
+    if (data.filters.length) {
+      const filtersRow = new Row("filters");
+      filtersRow.setState((s) => ({
+        ...s,
+        domProperties: { ...s.domProperties, className: "filtersRow" }
+      }));
+      let hasFilter = false;
+      for (const column of data.columns) {
+        const filter = data.filters.find(
+          (currentFilter) => currentFilter.getState("column") === column.colName
+        );
+        const headerCell = new Cell({
+          colName: column.colName,
+          Renderer: filter ? filter.Render : void 0
+        });
+        filtersRow.addCell(headerCell);
+        if (filter) {
+          hasFilter = true;
+        }
+      }
+      if (hasFilter) {
+        this.addRow(filtersRow);
+      }
+    }
+  }
+}
+
+const defaultPlugins = () => [
+  new WaiAriaPlugin(),
+  new FocusControllerPlugin()
+];
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class TableController extends EventEmitter {
+  constructor(props) {
+    super();
+    __publicField$1(this, "state", {
+      allowEdition: true,
+      allowResize: true,
+      allowSelection: true,
+      editionMode: false,
+      focusedCell: null,
+      hiddenColumns: /* @__PURE__ */ new Set(),
+      plugins: [],
+      isSelectionMultiple: true,
+      selection: /* @__PURE__ */ new Set()
+    });
+    __publicField$1(this, "body", new TableBody(this));
+    __publicField$1(this, "head", new TableHead(this));
+    Object.assign(this.state, props || {});
+    if (!props?.plugins) {
+      this.state.plugins.push(...defaultPlugins());
+    }
+    makeObservable(this, {
+      build: action,
+      clearSelection: action,
+      isEditionMode: computed,
+      setFocusedCell: action,
+      state: observable,
+      toggleRowSelection: action,
+      toggleEditionMode: action
+    });
+  }
+  setHiddenColumns(cols) {
+    this.state.hiddenColumns.forEach((c) => {
+      if (!cols.has(c)) {
+        this.state.hiddenColumns.delete(c);
+      }
+    });
+    cols.forEach((c) => {
+      if (!this.state.hiddenColumns.has(c)) {
+        this.state.hiddenColumns.add(c);
+      }
+    });
+  }
+  /**
+   * Clears all data in the table, except for the events
+   * listeners and recreates the structure based on the passed data.
+   */
+  build(data) {
+    this.head.build(data);
+    this.body.build(data);
+    this.restoreFocus();
+  }
+  getRowById(id) {
+    return this.head.getRowById(id) || this.body.getRowById(id);
+  }
+  /**
+   * EDITION MODE
+   */
+  get isEditionMode() {
+    return this.state.editionMode;
+  }
+  toggleEditionMode(force) {
+    if (this.state.allowEdition) {
+      this.state.editionMode = force ?? !this.state.editionMode;
+      this.emit("editionMode", this.state.editionMode);
+    }
+  }
+  /**
+   * SELECTION
+   */
+  clearSelection() {
+    this.state.selection.clear();
+  }
+  /**
+   * Returns the selected rows.
+   */
+  getSelectedRows() {
+    return [...this.state.selection];
+  }
+  isSelected(row) {
+    return this.state.selection.has(row);
+  }
+  /**
+   * Toggles the selection state of a given row.
+   *
+   * If the `isSelected` parameter is provided, it explicitly sets the selection
+   * state of the row to the given value (`true` for selected, `false` for deselected).
+   * If `isSelected` is not provided, the method will toggle the current selection state
+   * of the row (i.e., select it if it's currently not selected, or deselect it if it is).
+   *
+   * @param row - The row to toggle selection for.
+   * @param isSelected - Optional. A boolean indicating whether the row should be selected (`true`)
+   *                     or deselected (`false`). If not provided, the selection state will be toggled.
+   */
+  toggleRowSelection(row, isSelected) {
+    if (this.state.allowSelection) {
+      isSelected = isSelected ?? !this.state.selection.has(row);
+      if (isSelected) {
+        if (row.getState("isSelectable") !== false) {
+          this.state.selection.add(row);
+        }
+      } else {
+        this.state.selection.delete(row);
+      }
+      this.emit("selectionChange", [...this.state.selection.values()]);
+    }
+  }
+  restoreFocus() {
+    if (!this.state.focusedCell || this.state.focusedCell.getTable() !== this) {
+      this.state.focusedCell = this.body.getState("rows").values().next().value?.cells[0] || this.head.getState("rows").values().next().value?.cells[0] || null;
+    }
+    if (this.state.focusedCell) {
+      this.emit("cellFocus", { cell: this.state.focusedCell, doFocus: false });
+    }
+  }
+  removeRow(row) {
+    if (row.getTable() === this) {
+      row.setTable(null);
+      this.head.removeRow(row);
+      this.body.removeRow(row);
+      if (this.state.selection.has(row)) {
+        this.state.selection.delete(row);
+        this.emit("selectionChange", [...this.state.selection.values()]);
+      }
+      if (this.state.focusedCell?.getRow() === row) {
+        this.restoreFocus();
+      }
+    }
+  }
+  /**
+   * FOCUS
+   */
+  /**
+   * @returns The currently focused cell in the table.
+   */
+  getFocusedCell() {
+    return this.state.focusedCell;
+  }
+  setFocusedCell(cell, doFocus = true) {
+    this.state.focusedCell = cell;
+    this.emit("cellFocus", { cell, doFocus });
+  }
+  setSelection(indices) {
+    this.clearSelection();
+    indices.forEach((index) => {
+      const row = this.body.getRowByIndex(index);
+      if (row) {
+        this.toggleRowSelection(row, true);
+      }
+    });
+  }
+  scrollRowIntoView(row) {
+    this.emit("scrollIntoRow", row);
+  }
+  /**
+   * STATE
+   */
+  /**
+   * Returns the current state of the `TableController` instance.
+   *
+   * @param prop - The property of the state to retrieve.
+   */
+  getState(prop) {
+    return this.state[prop];
+  }
+  setState(prop, value) {
+    if (typeof prop === "function") {
+      this.state = prop(this.state);
+    } else {
+      this.state[prop] = value;
+    }
+    return this;
+  }
+  toggleColumnVisibility(columnName, isVisible) {
+    if (isVisible !== false && this.state.hiddenColumns.has(columnName)) {
+      this.state.hiddenColumns.delete(columnName);
+    } else {
+      this.state.hiddenColumns.add(columnName);
+    }
+  }
+  isColumnVisible(columnName) {
+    return !this.state.hiddenColumns.has(columnName);
+  }
+  /**
+   * PLUGINS
+   */
+  getPluginOfType(clazz) {
+    return this.state.plugins.find((plugin) => plugin instanceof clazz);
+  }
+  /**
+   * Sets the plugins for the table.
+   */
+  setPlugins(cb) {
+    this.state.plugins = cb(this.state.plugins);
+  }
+  getApplicablePlugins(method) {
+    return this.state.plugins.filter((c) => c[method] !== void 0).map((c) => c[method].bind(c, this));
+  }
+}
+
+function getRow(controller, rowElement) {
+  const rowId = rowElement.dataset.rowid;
+  const row = controller.getRowById(rowId);
+  return row;
+}
+function selectBetweenRows(controller, rowA, rowB) {
+  const relativePosition = rowA.compareDocumentPosition(rowB);
+  let finished = false;
+  if (relativePosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+    let current = rowA;
+    if (rowA.closest("thead") && !rowB.closest("thead")) {
+      current = rowA.closest("table")?.querySelector("tbody")?.firstElementChild;
+    }
+    while (!finished) {
+      if (current) {
+        getRow(controller, current)?.toggleSelection(true);
+        finished = current === rowB;
+        current = current.nextElementSibling;
+      } else {
+        finished = true;
+      }
+    }
+  } else if (relativePosition & Node.DOCUMENT_POSITION_PRECEDING) {
+    let current = rowA;
+    while (!finished) {
+      if (current) {
+        getRow(controller, current)?.toggleSelection(true);
+        finished = current === rowB;
+        current = current.previousElementSibling;
+      } else {
+        finished = true;
+      }
+    }
+  }
+}
+function useFocusByClick(controller) {
+  const lastRow = useRef(null);
+  return (ev) => {
+    const { target } = ev;
+    if (target instanceof HTMLElement) {
+      const cellElement = target.closest("td[data-colname],th[data-colname]");
+      const rowElement = target.closest("tr[data-rowid]");
+      if (rowElement instanceof HTMLTableRowElement) {
+        const row = getRow(controller, rowElement);
+        if (row) {
+          if (ev.shiftKey) {
+            if (lastRow.current) {
+              selectBetweenRows(controller, lastRow.current, rowElement);
+            }
+          } else if (ev.ctrlKey) {
+            row?.toggleSelection();
+          } else {
+            controller.clearSelection();
+            row?.toggleSelection(true);
+          }
+          lastRow.current = rowElement;
+          if (cellElement instanceof HTMLTableCellElement) {
+            const colName = cellElement.dataset.colname;
+            const cell = row?.getCellByColumnName(colName);
+            if (cell) {
+              if (target.closest("thead")) {
+                controller.emit("columnClick", cell);
+              }
+              cell.focus();
+              cellElement.focus();
+            }
+          }
+        }
+      }
+    }
+  };
+}
+
+const pageSize = 6;
+function handleArrowKey(controller, ev) {
+  const { target } = ev;
+  if (target instanceof HTMLElement) {
+    const cellElement = target.closest("td[data-colname],th[data-colname]");
+    const rowElement = target.closest("tr[data-rowid]");
+    if (rowElement instanceof HTMLTableRowElement) {
+      if (cellElement instanceof HTMLTableCellElement) {
+        const colName = cellElement.dataset.colname;
+        let nextFocusedRow = rowElement;
+        let nextFocusedCell = cellElement;
+        switch (ev.code) {
+          case "ArrowUp": {
+            const test = rowElement?.previousElementSibling;
+            if (test) {
+              nextFocusedRow = test;
+            } else if (nextFocusedRow.closest("tbody")) {
+              const thead = nextFocusedRow.closest("table").querySelector("thead");
+              nextFocusedRow = thead.lastElementChild;
+            }
+            break;
+          }
+          case "ArrowDown": {
+            const test = rowElement?.nextElementSibling;
+            if (test) {
+              nextFocusedRow = test;
+            } else if (nextFocusedRow.closest("thead")) {
+              const tbody = nextFocusedRow.closest("table").querySelector("tbody");
+              nextFocusedRow = tbody.firstElementChild;
+            }
+            break;
+          }
+          case "ArrowLeft":
+            nextFocusedCell = cellElement.previousElementSibling;
+            break;
+          case "ArrowRight":
+            nextFocusedCell = cellElement.nextElementSibling;
+            break;
+          case "PageUp": {
+            let i = 0;
+            do {
+              const test = nextFocusedRow.previousElementSibling;
+              if (!test && nextFocusedRow.closest("tbody")) {
+                const thead = nextFocusedRow.closest("table").querySelector("thead");
+                nextFocusedRow = thead.lastElementChild;
+              } else if (test) {
+                nextFocusedRow = test;
+              }
+            } while (nextFocusedRow instanceof HTMLTableRowElement && ++i < pageSize);
+            break;
+          }
+          case "PageDown": {
+            let i = 0;
+            do {
+              const test = nextFocusedRow.nextElementSibling;
+              if (!test && nextFocusedRow.closest("thead")) {
+                const tbody = nextFocusedRow.closest("table").querySelector("tbody");
+                nextFocusedRow = tbody.firstElementChild;
+              } else if (test) {
+                nextFocusedRow = test;
+              }
+            } while (nextFocusedRow instanceof HTMLTableRowElement && ++i < pageSize);
+            break;
+          }
+          case "Home": {
+            if (ev.ctrlKey) {
+              nextFocusedRow = rowElement.closest("table")?.querySelector("thead tr");
+            } else {
+              nextFocusedCell = rowElement.firstElementChild;
+            }
+            break;
+          }
+          case "End":
+            if (ev.ctrlKey) {
+              nextFocusedRow = rowElement.closest("table").querySelector("tbody").lastElementChild;
+            } else {
+              nextFocusedCell = rowElement.lastChild;
+            }
+        }
+        if (nextFocusedCell !== cellElement && nextFocusedCell) {
+          getRow(controller, rowElement).getCellByColumnName(nextFocusedCell.dataset.colname).focus();
+        } else if (nextFocusedRow !== rowElement && nextFocusedRow) {
+          if (ev.shiftKey) {
+            selectBetweenRows(controller, rowElement, nextFocusedRow);
+          } else {
+            controller.clearSelection();
+            getRow(controller, nextFocusedRow)?.toggleSelection(true);
+          }
+          const cell = getRow(controller, nextFocusedRow).getCellByColumnName(colName) || getRow(controller, nextFocusedRow).getCellByIndex(0);
+          cell?.focus();
+        }
+      }
+    }
+  }
+}
+function useFocusByKey(controller) {
+  return (ev) => {
+    if (controller.isEditionMode) {
+      if (["Enter", "Escape"].includes(ev.code)) {
+        ev.preventDefault();
+      }
+      switch (ev.code) {
+        case "Enter":
+          controller.emit("keyEnter", null);
+          break;
+        case "Escape":
+          controller.toggleEditionMode(false);
+      }
+    } else {
+      if ([
+        "Escape",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End"
+      ].includes(ev.code) || ev.code === "Enter" && controller.getState("allowEdition") || ev.code === "Space" && ev.ctrlKey) {
+        ev.preventDefault();
+      }
+      switch (ev.code) {
+        case "Enter":
+          controller.emit("keyEnter", null);
+          controller.toggleEditionMode();
+          break;
+        case "Space":
+          {
+            if (ev.ctrlKey) {
+              const row = ev.target?.closest("tr");
+              if (row instanceof HTMLElement) {
+                getRow(controller, row).toggleSelection();
+              }
+            }
+          }
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "Home":
+        case "End":
+        case "PageUp":
+        case "PageDown":
+          handleArrowKey(controller, ev);
+          break;
+      }
+    }
+  };
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, key + "" , value);
+  return value;
+};
+function getCellElement(focusControllerRef, cell) {
+  return focusControllerRef.querySelector(
+    `tr[data-rowid="${cell.getRow().getState("id")}"] td[data-colname="${cell.getState("colName")}"], tr[data-rowid="${cell.getRow().getState("id")}"] th[data-colname="${cell.getState("colName")}"]`
+  );
+}
+function isVisible(el) {
+  if (!(el instanceof HTMLElement))
+    return false;
+  while (el) {
+    const style = getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+      return false;
+    }
+    el = el.parentElement;
+  }
+  return true;
+}
+function scrollIntoRow(row) {
+  if (row) {
+    scrollParentIntoElement(row, 150, 0, 0);
+  }
+}
+function restoreFocus(controller, tableElement, doFocus) {
+  const cell = controller.getFocusedCell();
+  if (cell) {
+    const cellElement = getCellElement(tableElement, cell);
+    if (cellElement) {
+      disableChildrenFocus(tableElement);
+      const widgets = cellElement.querySelectorAll(getFocusSelector());
+      const widget = [...widgets].find((c) => isVisible(c));
+      const focusableElement = widget || cellElement;
+      focusableElement.setAttribute("tabindex", "0");
+      restoreEditionMode(tableElement, cell.getTable().isEditionMode);
+      if (doFocus) {
+        focusableElement.focus();
+      }
+    }
+  }
+}
+function restoreEditionMode(focusController, editionMode) {
+  const focusable = focusController?.querySelector(
+    '[tabindex="0"]'
+  );
+  const cell = focusable?.closest("td, th");
+  if (cell instanceof HTMLElement) {
+    const widgets = cell.querySelectorAll(getFocusSelector());
+    widgets.forEach((widget) => {
+      widget.setAttribute("tabindex", editionMode ? "0" : "-1");
+    });
+    const firstFocusable = [...widgets].find((c) => isVisible(c)) || cell;
+    firstFocusable.setAttribute("tabindex", "0");
+  }
+}
+class FocusControllerPlugin {
+  constructor() {
+    __publicField(this, "rootElement", null);
+  }
+  scrollIntoView(rowId) {
+    const row = this.rootElement?.querySelector(
+      `tr[data-rowid="${rowId}"]`
+    );
+    if (row) {
+      scrollIntoRow(row);
+    }
+  }
+  useElementDomProps(controller, element, _context) {
+    if (element instanceof TableController) {
+      const disconnect = useRef(() => {
+      });
+      useMount(() => {
+        const uns1 = controller.on("cellFocus", (ev) => {
+          if (this.rootElement) {
+            restoreFocus(controller, this.rootElement, ev.doFocus);
+          }
+        });
+        const uns2 = controller.on("editionMode", (editionMode) => {
+          if (this.rootElement) {
+            restoreEditionMode(this.rootElement, editionMode);
+          }
+        });
+        const uns3 = controller.on("scrollIntoRow", (row) => {
+          this.scrollIntoView(row.getState("id"));
+        });
+        return () => {
+          uns1();
+          uns2();
+          uns3();
+        };
+      });
+      return {
+        className: "table__focus_controller",
+        onClick: useFocusByClick(controller),
+        onKeyDown: useFocusByKey(controller),
+        onBlur: (ev) => {
+          if (ev.relatedTarget instanceof HTMLElement && ev.relatedTarget.closest(".table__focus_controller") !== this.rootElement) {
+            controller.toggleEditionMode(false);
+          }
+        },
+        ref: (el) => {
+          this.rootElement = el;
+          if (el) {
+            const observer = new MutationObserver(() => {
+              restoreFocus(controller, this.rootElement, false);
+            });
+            disconnect.current?.();
+            observer.observe(el, { subtree: true, childList: true });
+            disconnect.current = () => {
+              observer.disconnect();
+            };
+          }
+        }
+      };
+    }
+    return {};
+  }
+}
+
+class WaiAriaPlugin {
+  useElementDomProps(controller, element, context) {
+    if (element instanceof Row) {
+      const base = element.getContainer() === controller.head ? 0 : controller.head.rows.length;
+      return {
+        "aria-selected": element.isSelected,
+        "aria-rowindex": context + base + 1
+      };
+    } else if (element instanceof Cell) {
+      return {
+        "aria-colindex": context + 1
+      };
+    } else if (element instanceof TableController) {
+      return {
+        role: "treegrid",
+        "aria-multiselectable": controller.getState("allowSelection") && controller.getState("isSelectionMultiple") ? true : void 0,
+        "aria-colcount": controller.head.rows[0]?.cells.length || 0,
+        "aria-rowcount": controller.head.rows.length + controller.body.rows.length
+      };
+    }
+    return {};
+  }
+}
+
+export { Cell, Element, FocusControllerPlugin, Row, RowsGroup, TableBody, TableController, TableHead, WaiAriaPlugin, defaultPlugins };
+//# sourceMappingURL=index.js.map