@expcat/tigercat-react 1.2.37 → 1.2.41

package/dist/{chunk-ZGPOMSGD.mjs → chunk-WYGO6XC7.mjs}

@@ -1,6 +1,18 @@
+import {
+  Select
+} from "./chunk-T4OVGM4X.mjs";
+import {
+  Radio
+} from "./chunk-NPTXXUXF.mjs";
 import {
   useTigerConfig
 } from "./chunk-QAIBQHIO.mjs";
+import {
+  Empty
+} from "./chunk-WIWTY74F.mjs";
+import {
+  Checkbox
+} from "./chunk-MSHCPJIJ.mjs";
 
 // src/components/Table.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
@@ -12,6 +24,9 @@ import {
   getTableResponsiveCardListClasses,
   getTableResponsiveTableClasses,
   getTableVirtualRecommendation,
+  formatTableSelectRowAriaLabel,
+  formatTableSortByText,
+  getTableLabels,
   tableBaseClasses,
   tableResponsiveCardClasses,
   tableResponsiveCardLabelClasses,
@@ -100,13 +115,16 @@ import {
   createTableRowKeyCache,
   filterDataAdvanced,
   groupDataByColumn,
-  getFixedColumnOffsets
+  getFixedColumnOffsets,
+  filterHiddenColumns
 } from "@expcat/tigercat-core";
 import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(input) {
   const {
     columns,
     dataSource,
+    hiddenColumnKeys,
+    defaultHiddenColumnKeys,
     sort,
     defaultSort,
     filters,
@@ -128,6 +146,7 @@ function useTableState(input) {
     onSelectionChange,
     onSortChange,
     onFilterChange,
+    onHiddenColumnsChange,
     onPageChange,
     onExpandChange,
     onCellChange,
@@ -137,6 +156,7 @@ function useTableState(input) {
   } = input;
   const isSortControlled = sort !== void 0;
   const isFiltersControlled = filters !== void 0;
+  const isHiddenColumnsControlled = hiddenColumnKeys !== void 0;
   const paginationConfig = pagination !== false && typeof pagination === "object" ? pagination : null;
   const isCurrentPageControlled = paginationConfig?.current !== void 0;
   const isPageSizeControlled = paginationConfig?.pageSize !== void 0;
@@ -145,6 +165,9 @@ function useTableState(input) {
   const [uncontrolledSortState, setUncontrolledSortState] = useState(
     defaultSort ?? { key: null, direction: null }
   );
+  const [uncontrolledHiddenColumnKeys, setUncontrolledHiddenColumnKeys] = useState(
+    defaultHiddenColumnKeys ?? hiddenColumnKeys ?? []
+  );
   const [uncontrolledFilterState, setUncontrolledFilterState] = useState(
     defaultFilters ?? {}
   );
@@ -157,6 +180,7 @@ function useTableState(input) {
   const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
   const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
   const sortState = isSortControlled ? sort : uncontrolledSortState;
+  const effectiveHiddenColumnKeys = isHiddenColumnsControlled ? hiddenColumnKeys : uncontrolledHiddenColumnKeys;
   const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
   const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
   const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
@@ -187,6 +211,11 @@ function useTableState(input) {
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  useEffect(() => {
+    if (isHiddenColumnsControlled && hiddenColumnKeys) {
+      setUncontrolledHiddenColumnKeys(hiddenColumnKeys);
+    }
+  }, [isHiddenColumnsControlled, hiddenColumnKeys]);
   useEffect(() => {
     if (isExpandControlled) {
       setUncontrolledExpandedRowKeys(expandable?.expandedRowKeys ?? []);
@@ -194,14 +223,15 @@ function useTableState(input) {
   }, [isExpandControlled, expandable?.expandedRowKeys]);
   const [fixedOverrides, setFixedOverrides] = useState({});
   const displayColumns = useMemo(() => {
-    return columns.map((column) => {
+    const mapped = columns.map((column) => {
       const hasOverride = Object.prototype.hasOwnProperty.call(fixedOverrides, column.key);
       return {
         ...column,
         fixed: hasOverride ? fixedOverrides[column.key] : column.fixed
       };
     });
-  }, [columns, fixedOverrides]);
+    return filterHiddenColumns(mapped, effectiveHiddenColumnKeys);
+  }, [columns, fixedOverrides, effectiveHiddenColumnKeys]);
   const totalColumnCount = useMemo(() => {
     let count = displayColumns.length;
     if (rowSelection && rowSelection.showCheckbox !== false) count++;
@@ -219,6 +249,12 @@ function useTableState(input) {
     () => getFixedColumnOffsets(displayColumns, measuredColumnWidths),
     [displayColumns, measuredColumnWidths]
   );
+  function handleSetHiddenColumns(hiddenKeys) {
+    if (!isHiddenColumnsControlled) {
+      setUncontrolledHiddenColumnKeys(hiddenKeys);
+    }
+    onHiddenColumnsChange?.(hiddenKeys);
+  }
   function toggleColumnLock(columnKey) {
     setFixedOverrides((prev) => {
       const original = columns.find((c) => c.key === columnKey)?.fixed;
@@ -268,6 +304,17 @@ function useTableState(input) {
     const total = paginationConfig?.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : processedData.length;
     return calculatePagination(total, currentPage, currentPageSize);
   }, [processedData.length, currentPage, currentPageSize, pagination, paginationConfig?.total]);
+  function handleSetSort(newSortState) {
+    if (!isSortControlled) {
+      setUncontrolledSortState(newSortState);
+    }
+    onSortChange?.(newSortState);
+    onChange?.({
+      sort: newSortState,
+      filters: filterState,
+      pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
+    });
+  }
   function handleSort(columnKey) {
     const column = columnByKey[columnKey];
     if (!column || !column.sortable) return;
@@ -279,18 +326,9 @@ function useTableState(input) {
         newDirection = null;
       }
     }
-    const newSortState = {
+    handleSetSort({
       key: newDirection ? columnKey : null,
       direction: newDirection
-    };
-    if (!isSortControlled) {
-      setUncontrolledSortState(newSortState);
-    }
-    onSortChange?.(newSortState);
-    onChange?.({
-      sort: newSortState,
-      filters: filterState,
-      pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
     });
   }
   function handleFilter(columnKey, value) {
@@ -460,14 +498,17 @@ function useTableState(input) {
     sortState,
     currentPage,
     currentPageSize,
+    hiddenColumnKeys: effectiveHiddenColumnKeys,
     editingCell,
     editingValue,
     setEditingValue,
     toggleColumnLock,
+    handleSetHiddenColumns,
     handleSort,
     handleFilter,
     handlePageChange,
     handlePageSizeChange,
+    handleSetSort,
     handleRowClick,
     handleToggleExpand,
     handleSelectRow,
@@ -920,6 +961,8 @@ function Table({
   columns,
   columnLockable = false,
   dataSource = [],
+  hiddenColumnKeys,
+  defaultHiddenColumnKeys,
   sort,
   defaultSort,
   filters,
@@ -929,7 +972,9 @@ function Table({
   striped = false,
   hoverable = true,
   loading = false,
-  emptyText = "No data",
+  locale,
+  labels,
+  emptyText,
   pagination = {
     current: 1,
     pageSize: 10,
@@ -947,6 +992,8 @@ function Table({
   tableLayout = "auto",
   responsiveMode = "scroll",
   cardBreakpoint = "sm",
+  cardClassName,
+  renderCard,
   // v0.6.0 props
   virtual = false,
   autoVirtual = true,
@@ -970,6 +1017,7 @@ function Table({
   onSelectionChange,
   onSortChange,
   onFilterChange,
+  onHiddenColumnsChange,
   onPageChange,
   onExpandChange,
   onCellChange,
@@ -988,12 +1036,20 @@ function Table({
   const internalExpandable = expandable;
   const internalRowClassName = rowClassName;
   const paginationLocaleInput = pagination !== false && typeof pagination === "object" ? pagination.locale : void 0;
+  const tableLocaleInput = locale;
   const isPaginationI18nDisabled = paginationLocaleInput === false;
   const immediatePaginationLocale = useMemo2(
     () => paginationLocaleInput && !isPaginationI18nDisabled ? getImmediateTigerLocale(paginationLocaleInput) : void 0,
     [isPaginationI18nDisabled, paginationLocaleInput]
   );
   const [resolvedPaginationLocale, setResolvedPaginationLocale] = useState2(immediatePaginationLocale);
+  const immediateTableLocale = useMemo2(
+    () => tableLocaleInput ? getImmediateTigerLocale(tableLocaleInput) : void 0,
+    [tableLocaleInput]
+  );
+  const [resolvedTableLocale, setResolvedTableLocale] = useState2(
+    immediateTableLocale
+  );
   useEffect2(() => {
     let active = true;
     setResolvedPaginationLocale(immediatePaginationLocale);
@@ -1008,13 +1064,41 @@ function Table({
       active = false;
     };
   }, [isPaginationI18nDisabled, paginationLocaleInput, immediatePaginationLocale]);
+  useEffect2(() => {
+    let active = true;
+    setResolvedTableLocale(immediateTableLocale);
+    if (tableLocaleInput && isLazyTigerLocale(tableLocaleInput)) {
+      resolveTigerLocale(tableLocaleInput).then((nextLocale) => {
+        if (active) setResolvedTableLocale(nextLocale);
+      }).catch(() => {
+        if (active) setResolvedTableLocale(immediateTableLocale);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [tableLocaleInput, immediateTableLocale]);
   const paginationLocale = useMemo2(
     () => isPaginationI18nDisabled ? void 0 : mergeTigerLocale(config.locale, resolvedPaginationLocale),
     [config.locale, isPaginationI18nDisabled, resolvedPaginationLocale]
   );
+  const tableLocale = useMemo2(
+    () => mergeTigerLocale(config.locale, resolvedTableLocale),
+    [config.locale, resolvedTableLocale]
+  );
+  const tableLabelOverrides = useMemo2(
+    () => emptyText === void 0 ? labels : { ...labels, emptyText },
+    [emptyText, labels]
+  );
+  const tableLabels = useMemo2(
+    () => getTableLabels(tableLocale, tableLabelOverrides),
+    [tableLabelOverrides, tableLocale]
+  );
   const ctx = useTableState({
     columns,
     dataSource,
+    hiddenColumnKeys,
+    defaultHiddenColumnKeys,
     sort,
     defaultSort,
     filters,
@@ -1036,6 +1120,7 @@ function Table({
     onSelectionChange,
     onSortChange,
     onFilterChange,
+    onHiddenColumnsChange,
     onPageChange,
     onExpandChange,
     onCellChange,
@@ -1129,7 +1214,7 @@ function Table({
                 hoverable,
                 striped,
                 loading,
-                emptyText,
+                emptyText: tableLabels.emptyText,
                 rowSelection: internalRowSelection,
                 expandable: internalExpandable,
                 rowClassName: internalRowClassName,
@@ -1144,68 +1229,141 @@ function Table({
             ]
           }
         ),
-        responsiveMode === "card" && /* @__PURE__ */ jsx6(
+        responsiveMode === "card" && /* @__PURE__ */ jsxs5(
           "div",
           {
             className: getTableResponsiveCardListClasses(cardBreakpoint),
             "data-tiger-table-mobile": "card",
-            children: ctx.paginatedData.length === 0 ? /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardClasses, children: emptyText }) : ctx.paginatedData.map((record, index) => {
-              const key = ctx.pageRowKeys[index];
-              const isExpanded = ctx.expandedRowKeySet.has(key);
-              const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
-              const expandedContent = internalExpandable && isExpanded && isRowExpandable ? internalExpandable.expandedRowRender?.(record, index) : null;
-              const expandedNode = expandedContent;
-              return /* @__PURE__ */ jsxs5(
-                "div",
+            children: [
+              internalRowSelection?.type !== "radio" && internalRowSelection?.showCheckbox !== false && internalRowSelection && ctx.paginatedData.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ jsx6(
+                Checkbox,
                 {
-                  className: tableResponsiveCardClasses,
-                  onClick: () => ctx.handleRowClick(record, index, key),
-                  children: [
-                    internalRowSelection?.showCheckbox !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-3", children: [
-                      internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: internalRowSelection.type === "radio" ? "radio" : "checkbox",
-                          checked: ctx.selectedRowKeySet.has(key),
-                          disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
-                          onClick: (event) => event.stopPropagation(),
-                          onChange: (event) => ctx.handleSelectRow(key, event.target.checked)
-                        }
-                      ),
-                      internalExpandable && isRowExpandable && /* @__PURE__ */ jsx6(
-                        "button",
-                        {
-                          type: "button",
-                          className: "text-sm text-[var(--tiger-primary,#2563eb)]",
-                          "aria-expanded": isExpanded,
-                          onClick: (event) => {
-                            event.stopPropagation();
-                            ctx.handleToggleExpand(key, record);
-                          },
-                          children: isExpanded ? "Collapse" : "Expand"
-                        }
-                      )
-                    ] }) : null,
-                    (() => {
-                      const { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns);
-                      const renderCellContent = (column) => {
-                        const dataKey = column.dataKey || column.key;
-                        return column.render ? column.render(record, index) : record[dataKey];
-                      };
-                      return /* @__PURE__ */ jsxs5(Fragment, { children: [
-                        titleColumn && /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardTitleClasses, children: renderCellContent(titleColumn) }),
-                        bodyColumns.map((column) => /* @__PURE__ */ jsxs5("div", { className: tableResponsiveCardRowClasses, children: [
-                          /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardLabelClasses, children: column.title }),
-                          /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardValueClasses, children: renderCellContent(column) })
-                        ] }, column.key))
-                      ] });
-                    })(),
-                    expandedNode && /* @__PURE__ */ jsx6("div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
-                  ]
-                },
-                key
-              );
-            })
+                  size: "sm",
+                  checked: ctx.allSelected,
+                  indeterminate: ctx.someSelected,
+                  onChange: (checked) => ctx.handleSelectAll(checked),
+                  children: tableLabels.selectAllText
+                }
+              ) }) : null,
+              ctx.displayColumns.some((column) => column.sortable) ? /* @__PURE__ */ jsx6("div", { className: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ jsx6(
+                Select,
+                {
+                  size: "sm",
+                  value: ctx.sortState.key && ctx.sortState.direction ? `${ctx.sortState.key}:${ctx.sortState.direction}` : "",
+                  options: [
+                    { label: tableLabels.clearSortText, value: "" },
+                    ...ctx.displayColumns.filter((column) => column.sortable).flatMap((column) => [
+                      {
+                        label: `${formatTableSortByText(tableLabels.sortByText, column.title)} \u2191`,
+                        value: `${column.key}:asc`
+                      },
+                      {
+                        label: `${formatTableSortByText(tableLabels.sortByText, column.title)} \u2193`,
+                        value: `${column.key}:desc`
+                      }
+                    ])
+                  ],
+                  clearable: false,
+                  onChange: (value) => {
+                    const nextValue = String(value ?? "");
+                    if (!nextValue) {
+                      ctx.handleSetSort({ key: null, direction: null });
+                      return;
+                    }
+                    const separatorIndex = nextValue.lastIndexOf(":");
+                    const key = nextValue.slice(0, separatorIndex);
+                    const direction = nextValue.slice(separatorIndex + 1);
+                    ctx.handleSetSort({ key, direction });
+                  }
+                }
+              ) }) : null,
+              ctx.paginatedData.length === 0 ? /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardClasses, children: /* @__PURE__ */ jsx6(Empty, { showImage: false, description: tableLabels.emptyText }) }) : ctx.paginatedData.map((record, index) => {
+                const key = ctx.pageRowKeys[index];
+                const isExpanded = ctx.expandedRowKeySet.has(key);
+                const isSelected = ctx.selectedRowKeySet.has(key);
+                const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
+                const expandedContent = internalExpandable && isExpanded && isRowExpandable ? internalExpandable.expandedRowRender?.(record, index) : null;
+                const expandedNode = expandedContent;
+                const renderContext = {
+                  record,
+                  index,
+                  columns: ctx.displayColumns,
+                  selected: isSelected,
+                  expanded: isExpanded,
+                  toggleExpand: () => ctx.handleToggleExpand(key, record),
+                  selectRow: (checked) => ctx.handleSelectRow(key, checked)
+                };
+                const customCard = renderCard?.(renderContext);
+                const resolvedCardClassName = typeof cardClassName === "function" ? cardClassName(record, index) : cardClassName;
+                return /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    className: classNames3(tableResponsiveCardClasses, resolvedCardClassName),
+                    onClick: () => ctx.handleRowClick(record, index, key),
+                    children: customCard !== void 0 && customCard !== null ? customCard : /* @__PURE__ */ jsxs5(Fragment, { children: [
+                      internalRowSelection?.showCheckbox !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-3", children: [
+                        internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ jsx6("span", { onClick: (event) => event.stopPropagation(), children: internalRowSelection.type === "radio" ? /* @__PURE__ */ jsx6(
+                          Radio,
+                          {
+                            value: key,
+                            checked: isSelected,
+                            disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
+                            "aria-label": formatTableSelectRowAriaLabel(
+                              tableLabels.selectRowAriaLabel,
+                              index + 1,
+                              tableLocale?.locale
+                            ),
+                            onChange: () => ctx.handleSelectRow(key, true)
+                          }
+                        ) : /* @__PURE__ */ jsx6(
+                          Checkbox,
+                          {
+                            size: "sm",
+                            checked: isSelected,
+                            disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
+                            "aria-label": formatTableSelectRowAriaLabel(
+                              tableLabels.selectRowAriaLabel,
+                              index + 1,
+                              tableLocale?.locale
+                            ),
+                            onChange: (checked) => ctx.handleSelectRow(key, checked)
+                          }
+                        ) }),
+                        internalExpandable && isRowExpandable && /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            type: "button",
+                            className: "text-sm text-[var(--tiger-primary,#2563eb)]",
+                            "aria-expanded": isExpanded,
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              ctx.handleToggleExpand(key, record);
+                            },
+                            children: isExpanded ? tableLabels.collapseText : tableLabels.expandText
+                          }
+                        )
+                      ] }) : null,
+                      (() => {
+                        const { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns);
+                        const renderCellContent = (column) => {
+                          const dataKey = column.dataKey || column.key;
+                          return column.render ? column.render(record, index) : record[dataKey];
+                        };
+                        return /* @__PURE__ */ jsxs5(Fragment, { children: [
+                          titleColumn && /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardTitleClasses, children: renderCellContent(titleColumn) }),
+                          bodyColumns.map((column) => /* @__PURE__ */ jsxs5("div", { className: tableResponsiveCardRowClasses, children: [
+                            /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardLabelClasses, children: column.title }),
+                            /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardValueClasses, children: renderCellContent(column) })
+                          ] }, column.key))
+                        ] });
+                      })(),
+                      expandedNode && /* @__PURE__ */ jsx6("div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
+                    ] })
+                  },
+                  key
+                );
+              })
+            ]
           }
         ),
         loading && /* @__PURE__ */ jsxs5(
@@ -1214,10 +1372,10 @@ function Table({
             className: tableLoadingOverlayClasses,
             role: "status",
             "aria-live": "polite",
-            "aria-label": "Loading",
+            "aria-label": tableLabels.loadingText,
             children: [
               /* @__PURE__ */ jsx6(LoadingSpinner, {}),
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Loading" })
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: tableLabels.loadingText })
             ]
           }
         ),