@expcat/tigercat-react 2.1.0 → 2.1.2

package/dist/{chunk-RUAPTIQ7.mjs → chunk-246DAUEF.mjs}

@@ -144,7 +144,6 @@ var MaskInput = ({
         placeholder,
         disabled,
         readOnly: readonly,
-        name,
         id,
         autoComplete,
         autoFocus,
@@ -160,7 +159,8 @@ var MaskInput = ({
         onBlur
       }
     ),
-    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: rawValue }) : null,
+    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",

package/dist/{chunk-PU3JY6RE.mjs → chunk-2JMI7TCM.mjs}

@@ -1,6 +1,6 @@
 import {
   TaskBoard
-} from "./chunk-773LH7BK.mjs";
+} from "./chunk-O6VYD4E4.mjs";
 
 // src/components/Kanban.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-GCY55TBC.mjs → chunk-2XZHYYZ2.mjs}

@@ -1,12 +1,12 @@
 import {
   Select
-} from "./chunk-KVCI2346.mjs";
+} from "./chunk-S2V3HGLZ.mjs";
 import {
   Radio
 } from "./chunk-IIWUQK2P.mjs";
 import {
   Pagination
-} from "./chunk-PFL4HNWM.mjs";
+} from "./chunk-M6ZPTGBV.mjs";
 import {
   Empty
 } from "./chunk-W7BC4I2Y.mjs";
@@ -292,7 +292,7 @@ function useTableState(input) {
     }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
-      data = sortData(data, sortState.key, sortState.direction, column?.sortFn);
+      data = sortData(data, sortState.key, sortState.direction, column?.sortFn, columns);
     }
     return data;
   }, [dataSource, columns, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
@@ -555,7 +555,8 @@ import {
   getFixedColumnStyle,
   getCheckboxCellClasses,
   getExpandIconCellClasses,
-  formatTableSortByText
+  formatTableSortByText,
+  tableSortButtonClasses
 } from "@expcat/tigercat-core";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function renderTableHeader(ctx, view) {
@@ -595,6 +596,7 @@ function renderTableHeader(ctx, view) {
         width: typeof column.width === "number" ? `${column.width}px` : column.width
       } : void 0;
       const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+      const titleNode = column.renderHeader ? column.renderHeader() : column.title;
       return /* @__PURE__ */ jsxs(
         "th",
         {
@@ -619,10 +621,21 @@ function renderTableHeader(ctx, view) {
           onDragStart: columnDraggable ? () => ctx.handleDragStart(column.key) : void 0,
           onDragOver: columnDraggable ? (e) => e.preventDefault() : void 0,
           onDrop: columnDraggable ? () => ctx.handleDrop(column.key) : void 0,
-          onClick: column.sortable ? () => ctx.handleSort(column.key) : void 0,
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              column.renderHeader ? column.renderHeader() : column.title,
+              column.sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-tiger-table-sort": "",
+                  className: tableSortButtonClasses,
+                  onClick: () => ctx.handleSort(column.key),
+                  children: [
+                    titleNode,
+                    /* @__PURE__ */ jsx2(SortIcon, { direction: sortDirection })
+                  ]
+                }
+              ) : titleNode,
               columnLockable && /* @__PURE__ */ jsx2(
                 "button",
                 {
@@ -641,8 +654,7 @@ function renderTableHeader(ctx, view) {
                   },
                   children: /* @__PURE__ */ jsx2(LockIcon, { locked: column.fixed === "left" || column.fixed === "right" })
                 }
-              ),
-              column.sortable && /* @__PURE__ */ jsx2(SortIcon, { direction: sortDirection })
+              )
             ] }),
             column.filter && /* @__PURE__ */ jsx2("div", { className: "mt-2", children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxs(
               "select",
@@ -1006,6 +1018,14 @@ function renderPagination(ctx, view) {
 
 // src/components/Table.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_TABLE_PAGINATION = {
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 0,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showTotal: true
+};
 function Table({
   columns,
   columnLockable = false,
@@ -1024,14 +1044,7 @@ function Table({
   locale,
   labels,
   emptyText,
-  pagination = {
-    current: 1,
-    pageSize: 10,
-    total: 0,
-    pageSizeOptions: [10, 20, 50, 100],
-    showSizeChanger: true,
-    showTotal: true
-  },
+  pagination = DEFAULT_TABLE_PAGINATION,
   rowSelection,
   expandable,
   rowKey = "id",
@@ -1214,16 +1227,10 @@ function Table({
     [effectiveVirtual, virtualScrollTop, virtualHeight, virtualItemHeight, ctx.paginatedData.length]
   );
   const wrapperStyle = useMemo2(() => {
-    if (effectiveVirtual) {
-      return {
-        height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
-        overflow: "auto"
-      };
-    }
     return maxHeight ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : void 0;
-  }, [effectiveVirtual, maxHeight, virtualHeight]);
+  }, [maxHeight]);
   useEffect2(() => {
     if (!shouldObserveGeometry) {
       return void 0;
@@ -1245,16 +1252,86 @@ function Table({
     controller.observe(wrapper, tableRef.current);
     return () => controller.disconnect();
   }, [shouldObserveGeometry, ctx.displayColumns.length, ctx.paginatedData.length]);
+  const tableInner = /* @__PURE__ */ jsxs4(
+    "table",
+    {
+      ref: tableRef,
+      className: classNames3(
+        tableBaseClasses,
+        getTableResponsiveTableClasses(responsiveMode, cardBreakpoint),
+        tableLayout === "fixed" ? "table-fixed" : "table-auto",
+        className
+      ),
+      ...props,
+      style: ctx.fixedColumnsInfo.hasFixedColumns && ctx.fixedColumnsInfo.minTableWidth ? {
+        ...props.style,
+        minWidth: `${ctx.fixedColumnsInfo.minTableWidth}px`
+      } : props.style,
+      children: [
+        (columnLockable || ctx.fixedColumnsInfo.hasFixedColumns) && /* @__PURE__ */ jsx6("colgroup", { children: getTableColgroup({
+          columns: ctx.displayColumns,
+          frozenWidths: ctx.frozenColumnWidths,
+          size,
+          hasSelectionColumn: !!internalRowSelection && internalRowSelection.showCheckbox !== false,
+          expand: internalExpandable ? internalExpandable.expandIconPosition === "end" ? "end" : "start" : false
+        }).map((entry, index) => /* @__PURE__ */ jsx6(
+          "col",
+          {
+            style: entry.width ? { width: entry.width } : void 0
+          },
+          `${entry.key}-${index}`
+        )) }),
+        renderTableHeader(ctx, {
+          size,
+          stickyHeader,
+          rowSelection: internalRowSelection,
+          expandable: internalExpandable,
+          columnLockable,
+          columnDraggable,
+          lockColumnAriaLabel: tableLabels.lockColumnAriaLabel,
+          unlockColumnAriaLabel: tableLabels.unlockColumnAriaLabel,
+          labels: tableLabels
+        }),
+        renderTableBody(ctx, {
+          size,
+          hoverable,
+          striped,
+          loading,
+          emptyText: tableLabels.emptyText,
+          rowSelection: internalRowSelection,
+          expandable: internalExpandable,
+          labels: tableLabels,
+          rowClassName: internalRowClassName,
+          rowDraggable,
+          interactiveRows: !!onRowClick || !!internalRowSelection,
+          virtualWindow
+        }),
+        renderSummaryRow(ctx, {
+          size,
+          rowSelection: internalRowSelection,
+          expandable: internalExpandable,
+          summaryRow
+        })
+      ]
+    }
+  );
+  const tableContent = effectiveVirtual ? /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
+        overflow: "auto"
+      },
+      onScroll: (e) => setVirtualScrollTop(e.target.scrollTop),
+      children: tableInner
+    }
+  ) : tableInner;
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: wrapperRef,
-      className: getTableWrapperClasses(
-        bordered,
-        maxHeight || (virtual ? virtualHeight : void 0)
-      ),
+      className: getTableWrapperClasses(bordered, maxHeight),
       style: wrapperStyle,
-      onScroll: effectiveVirtual ? (e) => setVirtualScrollTop(e.target.scrollTop) : void 0,
       "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
       "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
       "data-tiger-virtual-threshold": virtualRecommendation.recommended ? virtualRecommendation.threshold : void 0,
@@ -1271,69 +1348,7 @@ function Table({
             children: exportFormat === "excel" ? tableLabels.exportExcelText : tableLabels.exportCsvText
           }
         ) }),
-        /* @__PURE__ */ jsxs4(
-          "table",
-          {
-            ref: tableRef,
-            className: classNames3(
-              tableBaseClasses,
-              getTableResponsiveTableClasses(responsiveMode, cardBreakpoint),
-              tableLayout === "fixed" ? "table-fixed" : "table-auto",
-              className
-            ),
-            ...props,
-            style: ctx.fixedColumnsInfo.hasFixedColumns && ctx.fixedColumnsInfo.minTableWidth ? {
-              ...props.style,
-              minWidth: `${ctx.fixedColumnsInfo.minTableWidth}px`
-            } : props.style,
-            children: [
-              (columnLockable || ctx.fixedColumnsInfo.hasFixedColumns) && /* @__PURE__ */ jsx6("colgroup", { children: getTableColgroup({
-                columns: ctx.displayColumns,
-                frozenWidths: ctx.frozenColumnWidths,
-                size,
-                hasSelectionColumn: !!internalRowSelection && internalRowSelection.showCheckbox !== false,
-                expand: internalExpandable ? internalExpandable.expandIconPosition === "end" ? "end" : "start" : false
-              }).map((entry, index) => /* @__PURE__ */ jsx6(
-                "col",
-                {
-                  style: entry.width ? { width: entry.width } : void 0
-                },
-                `${entry.key}-${index}`
-              )) }),
-              renderTableHeader(ctx, {
-                size,
-                stickyHeader,
-                rowSelection: internalRowSelection,
-                expandable: internalExpandable,
-                columnLockable,
-                columnDraggable,
-                lockColumnAriaLabel: tableLabels.lockColumnAriaLabel,
-                unlockColumnAriaLabel: tableLabels.unlockColumnAriaLabel,
-                labels: tableLabels
-              }),
-              renderTableBody(ctx, {
-                size,
-                hoverable,
-                striped,
-                loading,
-                emptyText: tableLabels.emptyText,
-                rowSelection: internalRowSelection,
-                expandable: internalExpandable,
-                labels: tableLabels,
-                rowClassName: internalRowClassName,
-                rowDraggable,
-                interactiveRows: !!onRowClick || !!internalRowSelection,
-                virtualWindow
-              }),
-              renderSummaryRow(ctx, {
-                size,
-                rowSelection: internalRowSelection,
-                expandable: internalExpandable,
-                summaryRow
-              })
-            ]
-          }
-        ),
+        tableContent,
         responsiveMode === "card" && /* @__PURE__ */ jsxs4(
           "div",
           {