@sondor-technology/sondor-components 1.0.5 → 1.0.7

package/src/components/table/data-table.ts

@@ -1,7 +1,8 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+import {ifDefined} from "lit/directives/if-defined.js";
 
 export interface DataTableColumn {
   header: string;
@@ -12,52 +13,24 @@ export interface DataTableColumn {
 
 export interface SortConfig {
   key: string;
-  direction: 'asc' | 'desc';
+  direction: "asc" | "desc";
 }
 
-@customElement('st-data-table')
+@customElement("st-data-table")
 export class StDataTable extends LitElement {
-  /**
-   * Array defining table headers, keys, and sortability.
-   */
-  @property({ type: Array }) columns: DataTableColumn[] = [];
-
-  /**
-   * Array of row data objects rendered in the table.
-   */
-  @property({ type: Array }) data: Record<string, any>[] = [];
-
-  /**
-   * Total number of rows available on the server (used for pagination).
-   */
-  @property({ type: Number, attribute: 'total-rows' }) totalRows = 0;
-
-  /**
-   * Current page number (1-indexed).
-   */
-  @property({ type: Number }) page = 1;
-
-  /**
-   * Number of rows per page.
-   */
-  @property({ type: Number, attribute: 'page-size' }) pageSize = 10;
-
-  /**
-   * Enables holding 'Shift' to sort by multiple columns sequentially.
-   */
-  @property({ type: Boolean, attribute: 'multi-sort' }) multiSort = false;
-
-  /**
-   * Displays loading skeleton rows and locks controls.
-   */
-  @property({ type: Boolean, reflect: true }) loading = false;
-
-  // --- Internal State ---
+  @property({type: Array}) columns: DataTableColumn[] = [];
+  @property({type: Array}) data: Record<string, any>[] = [];
+  @property({type: Number, attribute: "total-rows"}) totalRows = 0;
+  @property({type: Number}) page = 1;
+  @property({type: Number, attribute: "page-size"}) pageSize = 10;
+  @property({type: Boolean, attribute: "multi-sort"}) multiSort = false;
+  @property({type: Boolean, reflect: true}) loading = false;
+
   @state() private internalColumns: DataTableColumn[] = [];
   @state() private sortState: SortConfig[] = [];
-  @state() private searchQuery = '';
+  @state() private searchQuery = "";
   @state() private showColumnMenu = false;
-  
+
   private searchTimeout?: number;
   private draggedColumnKey: string | null = null;
 
@@ -251,59 +224,60 @@ export class StDataTable extends LitElement {
       .drag-handle:hover {
         opacity: 0.7;
       }
-    `
+    `,
   ];
 
-  willUpdate(changedProperties: PropertyValues) {
-    if (changedProperties.has('columns') && this.columns.length > 0) {
-      if (this.internalColumns.length === 0) {
-        this.internalColumns = [...this.columns];
-      }
-    }
-  }
-
-  firstUpdated() {
-    if (this.internalColumns.length === 0 && this.columns.length > 0) {
-      this.internalColumns = [...this.columns];
+  override willUpdate(changedProperties: PropertyValues) {
+    // 🚀 FIX: Properly sync dynamically updated columns while preserving user visibility states
+    if (changedProperties.has("columns") && this.columns) {
+      this.internalColumns = this.columns.map((newCol) => {
+        const existing = this.internalColumns.find((ic) => ic.key === newCol.key);
+        return {...newCol, hidden: existing ? existing.hidden : newCol.hidden};
+      });
     }
-    this.emitChange();
   }
 
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener('click', this.handleOutsideClick);
+    document.addEventListener("click", this.handleOutsideClick);
   }
 
   disconnectedCallback() {
-    document.removeEventListener('click', this.handleOutsideClick);
+    document.removeEventListener("click", this.handleOutsideClick);
     super.disconnectedCallback();
   }
 
-  private handleOutsideClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (!target.closest('.columns-toggle-wrapper')) {
+  private handleOutsideClick = (e: Event) => {
+    const path = e.composedPath();
+    const toggleWrapper = this.shadowRoot?.querySelector(".columns-toggle-wrapper");
+
+    // 🚀 THE FIX: Use composedPath() to pierce the Shadow DOM and check if
+    // the click originated from inside the wrapper element.
+    if (toggleWrapper && !path.includes(toggleWrapper)) {
       this.showColumnMenu = false;
     }
   };
 
   private emitChange() {
-    this.dispatchEvent(new CustomEvent('st-data-change', {
-      detail: {
-        page: this.page,
-        pageSize: this.pageSize,
-        search: this.searchQuery,
-        sort: this.sortState
-      },
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent("st-data-change", {
+        detail: {
+          page: this.page,
+          pageSize: this.pageSize,
+          search: this.searchQuery,
+          sort: this.sortState,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
   private handleSearchInput(e: Event) {
     if (this.loading) return;
     const val = (e.target as HTMLInputElement).value;
     window.clearTimeout(this.searchTimeout);
-    
+
     this.searchTimeout = window.setTimeout(() => {
       this.searchQuery = val;
       this.page = 1;
@@ -314,11 +288,11 @@ export class StDataTable extends LitElement {
   private handleSort(key: string, e: MouseEvent) {
     if (this.loading) return;
     const isShift = e.shiftKey && this.multiSort;
-    const existingIndex = this.sortState.findIndex(s => s.key === key);
-    let newDirection: 'asc' | 'desc' | null = 'asc';
+    const existingIndex = this.sortState.findIndex((s) => s.key === key);
+    let newDirection: "asc" | "desc" | null = "asc";
 
     if (existingIndex !== -1) {
-      newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
+      newDirection = this.sortState[existingIndex].direction === "asc" ? "desc" : null;
     }
 
     let newSortState = [...this.sortState];
@@ -328,14 +302,14 @@ export class StDataTable extends LitElement {
         if (existingIndex !== -1) {
           newSortState[existingIndex].direction = newDirection;
         } else {
-          newSortState.push({ key, direction: newDirection });
+          newSortState.push({key, direction: newDirection});
         }
       } else {
         newSortState.splice(existingIndex, 1);
       }
     } else {
       if (newDirection) {
-        newSortState = [{ key, direction: newDirection }];
+        newSortState = [{key, direction: newDirection}];
       } else {
         newSortState = [];
       }
@@ -365,41 +339,41 @@ export class StDataTable extends LitElement {
   }
 
   private toggleColumnVisibility(key: string) {
-    this.internalColumns = this.internalColumns.map(col => 
-      col.key === key ? { ...col, hidden: !col.hidden } : col
+    this.internalColumns = this.internalColumns.map((col) =>
+      col.key === key ? {...col, hidden: !col.hidden} : col,
     );
   }
 
   private handleDragStart(e: DragEvent, key: string) {
     this.draggedColumnKey = key;
     if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('text/plain', key);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", key);
     }
   }
 
   private handleDragOver(e: DragEvent) {
     e.preventDefault();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
-    const target = (e.target as HTMLElement).closest('th');
-    if (target) target.classList.add('drag-over');
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const target = (e.target as HTMLElement).closest("th");
+    if (target) target.classList.add("drag-over");
   }
 
   private handleDragLeave(e: DragEvent) {
-    const target = (e.target as HTMLElement).closest('th');
-    if (target) target.classList.remove('drag-over');
+    const target = (e.target as HTMLElement).closest("th");
+    if (target) target.classList.remove("drag-over");
   }
 
   private handleDrop(e: DragEvent, targetKey: string) {
     e.preventDefault();
-    const targetEl = (e.target as HTMLElement).closest('th');
-    if (targetEl) targetEl.classList.remove('drag-over');
+    const targetEl = (e.target as HTMLElement).closest("th");
+    if (targetEl) targetEl.classList.remove("drag-over");
 
     if (!this.draggedColumnKey || this.draggedColumnKey === targetKey) return;
 
     const newCols = [...this.internalColumns];
-    const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
-    const toIndex = newCols.findIndex(c => c.key === targetKey);
+    const fromIndex = newCols.findIndex((c) => c.key === this.draggedColumnKey);
+    const toIndex = newCols.findIndex((c) => c.key === targetKey);
 
     const [movedCol] = newCols.splice(fromIndex, 1);
     newCols.splice(toIndex, 0, movedCol);
@@ -409,136 +383,233 @@ export class StDataTable extends LitElement {
   }
 
   private renderSortIcon(key: string) {
-    const sortIndex = this.sortState.findIndex(s => s.key === key);
+    const sortIndex = this.sortState.findIndex((s) => s.key === key);
     if (sortIndex === -1) {
-      return html`<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+      return html`<svg
+        class="sort-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>`;
     }
 
     const sortConfig = this.sortState[sortIndex];
-    const icon = sortConfig.direction === 'asc' 
-      ? html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
-      : html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+    const icon =
+      sortConfig.direction === "asc"
+        ? html`<svg
+            class="sort-icon active"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m18 15-6-6-6 6" />
+          </svg>`
+        : html`<svg
+            class="sort-icon active"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>`;
 
-    const priority = this.sortState.length > 1 && this.multiSort 
-      ? html`<span class="sort-priority">${sortIndex + 1}</span>` 
-      : '';
+    const priority =
+      this.sortState.length > 1 && this.multiSort
+        ? html`<span class="sort-priority">${sortIndex + 1}</span>`
+        : "";
 
     return html`${icon}${priority}`;
   }
 
   render() {
-    const visibleColumns = this.internalColumns.filter(c => !c.hidden);
+    const visibleColumns = this.internalColumns.filter((c) => !c.hidden);
     const skeletonRowsCount = Math.min(this.pageSize, 5);
 
     return html`
-      <!-- Toolbar -->
       <div class="toolbar">
         <div class="search-wrapper">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          <input 
-            type="text" 
-            class="search-input" 
-            placeholder="Search..." 
+          <svg
+            class="search-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search..."
+            aria-label="Search data table"
+            spellcheck="false"
+            autocapitalize="none"
             ?disabled=${this.loading}
             @input=${this.handleSearchInput}
-          >
+          />
         </div>
 
         <div class="columns-toggle-wrapper">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
-            @click=${() => this.showColumnMenu = !this.showColumnMenu}
+          <st-button
+            variant="secondary"
+            size="sm"
+            aria-haspopup="menu"
+            aria-expanded=${this.showColumnMenu}
+            @click=${() => (this.showColumnMenu = !this.showColumnMenu)}
           >
             Columns
           </st-button>
-          
-          ${this.showColumnMenu ? html`
-            <div class="columns-menu">
-              ${this.internalColumns.map(col => html`
-                <label class="column-option">
-                  <input 
-                    type="checkbox" 
-                    .checked=${!col.hidden} 
-                    @change=${() => this.toggleColumnVisibility(col.key)}
-                  >
-                  ${col.header}
-                </label>
-              `)}
-            </div>
-          ` : ''}
+
+          ${this.showColumnMenu
+            ? html`
+                <div class="columns-menu" role="menu">
+                  ${this.internalColumns.map(
+                    (col) => html`
+                      <label
+                        class="column-option"
+                        role="menuitemcheckbox"
+                        aria-checked=${!col.hidden}
+                      >
+                        <input
+                          type="checkbox"
+                          .checked=${!col.hidden}
+                          @change=${() => this.toggleColumnVisibility(col.key)}
+                        />
+                        ${col.header}
+                      </label>
+                    `,
+                  )}
+                </div>
+              `
+            : ""}
         </div>
       </div>
 
-      <!-- Table -->
       <div class="table-wrapper">
-        <table>
+        <table aria-busy=${this.loading}>
           <thead>
             <tr>
-              ${visibleColumns.map(col => html`
-                <th 
-                  draggable="true"
-                  @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
-                  @dragover=${this.handleDragOver}
-                  @dragleave=${this.handleDragLeave}
-                  @drop=${(e: DragEvent) => this.handleDrop(e, col.key)}
-                >
-                  <div class="th-content">
-                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
-                    
-                    <div 
-                      class=${classMap({ 'sortable-header': !!col.sortable })} 
-                      @click=${(e: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
-                    >
-                      ${col.header}
-                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
+              ${visibleColumns.map((col) => {
+                const sortItem = this.sortState.find((s) => s.key === col.key);
+                const ariaSort = sortItem
+                  ? sortItem.direction === "asc"
+                    ? "ascending"
+                    : "descending"
+                  : "none";
+
+                return html`
+                  <th
+                    scope="col"
+                    aria-sort=${ifDefined(col.sortable ? ariaSort : undefined)}
+                    draggable="true"
+                    @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
+                    @dragover=${this.handleDragOver}
+                    @dragleave=${this.handleDragLeave}
+                    @drop=${(e: DragEvent) => this.handleDrop(e, col.key)}
+                  >
+                    <div class="th-content">
+                      <svg
+                        class="drag-handle"
+                        aria-hidden="true"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <circle cx="9" cy="12" r="1" />
+                        <circle cx="9" cy="5" r="1" />
+                        <circle cx="9" cy="19" r="1" />
+                        <circle cx="15" cy="12" r="1" />
+                        <circle cx="15" cy="5" r="1" />
+                        <circle cx="15" cy="19" r="1" />
+                      </svg>
+
+                      <div
+                        class=${classMap({"sortable-header": !!col.sortable})}
+                        @click=${(e: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
+                      >
+                        ${col.header} ${col.sortable ? this.renderSortIcon(col.key) : ""}
+                      </div>
                     </div>
-                  </div>
-                </th>
-              `)}
+                  </th>
+                `;
+              })}
             </tr>
           </thead>
-          <tbody>
-            ${this.loading ? html`
-              ${Array.from({ length: skeletonRowsCount }).map(() => html`
-                <tr>
-                  ${visibleColumns.map(() => html`
-                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
-                  `)}
-                </tr>
-              `)}
-            ` : this.data.length === 0 ? html`
-              <tr>
-                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
-              </tr>
-            ` : this.data.map(row => html`
-              <tr>
-                ${visibleColumns.map(col => html`
-                  <td>${row[col.key]}</td>
-                `)}
-              </tr>
-            `)}
+
+          <tbody aria-live="polite">
+            ${this.loading
+              ? html`
+                  ${Array.from({length: skeletonRowsCount}).map(
+                    () => html`
+                      <tr>
+                        ${visibleColumns.map(
+                          () => html`
+                            <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
+                          `,
+                        )}
+                      </tr>
+                    `,
+                  )}
+                `
+              : this.data.length === 0
+                ? html`
+                    <tr>
+                      <td
+                        colspan=${visibleColumns.length}
+                        style="text-align: center; padding: 2rem;"
+                      >
+                        No results found.
+                      </td>
+                    </tr>
+                  `
+                : this.data.map(
+                    (row) => html`
+                      <tr>
+                        ${visibleColumns.map((col) => html`<td>${row[col.key] ?? ""}</td>`)}
+                      </tr>
+                    `,
+                  )}
           </tbody>
         </table>
       </div>
 
-      <!-- Pagination -->
       <div class="pagination">
         <div class="pagination-info">
           Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
         </div>
         <div class="pagination-controls">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
+          <st-button
+            variant="secondary"
+            size="sm"
             ?disabled=${this.loading || this.page === 1}
             @click=${this.prevPage}
           >
             Prev
           </st-button>
-          <st-button 
-            variant="secondary" 
-            size="sm" 
+          <st-button
+            variant="secondary"
+            size="sm"
             ?disabled=${this.loading || this.page === this.totalPages}
             @click=${this.nextPage}
           >
@@ -552,6 +623,6 @@ export class StDataTable extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-data-table': StDataTable;
+    "st-data-table": StDataTable;
   }
-}
+}