@expcat/tigercat-react 1.2.34 → 1.2.39

package/dist/{chunk-VAZYY35F.js → chunk-M36PT6BS.js}

@@ -1,7 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
+var _chunk6Z4LLPZAjs = require('./chunk-6Z4LLPZA.js');
+
+
+var _chunkTMON4MPOjs = require('./chunk-TMON4MPO.js');
+
+
 var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
 
+
+var _chunkZRHDNGWOjs = require('./chunk-ZRHDNGWO.js');
+
+
+var _chunkF7H4ALKNjs = require('./chunk-F7H4ALKN.js');
+
 // src/components/Table.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
@@ -19,6 +31,11 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
+
+
+
+
+
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
@@ -266,6 +283,17 @@ function useTableState(input) {
     const total = _optionalChain([paginationConfig, 'optionalAccess', _25 => _25.total]) !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : processedData.length;
     return _tigercatcore.calculatePagination.call(void 0, total, currentPage, currentPageSize);
   }, [processedData.length, currentPage, currentPageSize, pagination, _optionalChain([paginationConfig, 'optionalAccess', _26 => _26.total])]);
+  function handleSetSort(newSortState) {
+    if (!isSortControlled) {
+      setUncontrolledSortState(newSortState);
+    }
+    _optionalChain([onSortChange, 'optionalCall', _27 => _27(newSortState)]);
+    _optionalChain([onChange, 'optionalCall', _28 => _28({
+      sort: newSortState,
+      filters: filterState,
+      pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
+    })]);
+  }
   function handleSort(columnKey) {
     const column = columnByKey[columnKey];
     if (!column || !column.sortable) return;
@@ -277,19 +305,10 @@ function useTableState(input) {
         newDirection = null;
       }
     }
-    const newSortState = {
+    handleSetSort({
       key: newDirection ? columnKey : null,
       direction: newDirection
-    };
-    if (!isSortControlled) {
-      setUncontrolledSortState(newSortState);
-    }
-    _optionalChain([onSortChange, 'optionalCall', _27 => _27(newSortState)]);
-    _optionalChain([onChange, 'optionalCall', _28 => _28({
-      sort: newSortState,
-      filters: filterState,
-      pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
-    })]);
+    });
   }
   function handleFilter(columnKey, value) {
     const newFilterState = { ...filterState, [columnKey]: value };
@@ -466,6 +485,7 @@ function useTableState(input) {
     handleFilter,
     handlePageChange,
     handlePageSizeChange,
+    handleSetSort,
     handleRowClick,
     handleToggleExpand,
     handleSelectRow,
@@ -927,7 +947,9 @@ function Table({
   striped = false,
   hoverable = true,
   loading = false,
-  emptyText = "No data",
+  locale,
+  labels,
+  emptyText,
   pagination = {
     current: 1,
     pageSize: 10,
@@ -944,6 +966,9 @@ function Table({
   maxHeight,
   tableLayout = "auto",
   responsiveMode = "scroll",
+  cardBreakpoint = "sm",
+  cardClassName,
+  renderCard,
   // v0.6.0 props
   virtual = false,
   autoVirtual = true,
@@ -985,12 +1010,18 @@ 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 = _react.useMemo.call(void 0, 
     () => paginationLocaleInput && !isPaginationI18nDisabled ? _tigercatcore.getImmediateTigerLocale.call(void 0, paginationLocaleInput) : void 0,
     [isPaginationI18nDisabled, paginationLocaleInput]
   );
   const [resolvedPaginationLocale, setResolvedPaginationLocale] = _react.useState.call(void 0, immediatePaginationLocale);
+  const immediateTableLocale = _react.useMemo.call(void 0, 
+    () => tableLocaleInput ? _tigercatcore.getImmediateTigerLocale.call(void 0, tableLocaleInput) : void 0,
+    [tableLocaleInput]
+  );
+  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, immediateTableLocale);
   _react.useEffect.call(void 0, () => {
     let active = true;
     setResolvedPaginationLocale(immediatePaginationLocale);
@@ -1005,10 +1036,36 @@ function Table({
       active = false;
     };
   }, [isPaginationI18nDisabled, paginationLocaleInput, immediatePaginationLocale]);
+  _react.useEffect.call(void 0, () => {
+    let active = true;
+    setResolvedTableLocale(immediateTableLocale);
+    if (tableLocaleInput && _tigercatcore.isLazyTigerLocale.call(void 0, tableLocaleInput)) {
+      _tigercatcore.resolveTigerLocale.call(void 0, tableLocaleInput).then((nextLocale) => {
+        if (active) setResolvedTableLocale(nextLocale);
+      }).catch(() => {
+        if (active) setResolvedTableLocale(immediateTableLocale);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [tableLocaleInput, immediateTableLocale]);
   const paginationLocale = _react.useMemo.call(void 0, 
     () => isPaginationI18nDisabled ? void 0 : _tigercatcore.mergeTigerLocale.call(void 0, config.locale, resolvedPaginationLocale),
     [config.locale, isPaginationI18nDisabled, resolvedPaginationLocale]
   );
+  const tableLocale = _react.useMemo.call(void 0, 
+    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, resolvedTableLocale),
+    [config.locale, resolvedTableLocale]
+  );
+  const tableLabelOverrides = _react.useMemo.call(void 0, 
+    () => emptyText === void 0 ? labels : { ...labels, emptyText },
+    [emptyText, labels]
+  );
+  const tableLabels = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getTableLabels.call(void 0, tableLocale, tableLabelOverrides),
+    [tableLabelOverrides, tableLocale]
+  );
   const ctx = useTableState({
     columns,
     dataSource,
@@ -1103,7 +1160,7 @@ function Table({
             ref: tableRef,
             className: _tigercatcore.classNames.call(void 0, 
               _tigercatcore.tableBaseClasses,
-              _tigercatcore.getTableResponsiveTableClasses.call(void 0, responsiveMode),
+              _tigercatcore.getTableResponsiveTableClasses.call(void 0, responsiveMode, cardBreakpoint),
               tableLayout === "fixed" ? "table-fixed" : "table-auto",
               className
             ),
@@ -1126,7 +1183,7 @@ function Table({
                 hoverable,
                 striped,
                 loading,
-                emptyText,
+                emptyText: tableLabels.emptyText,
                 rowSelection: internalRowSelection,
                 expandable: internalExpandable,
                 rowClassName: internalRowClassName,
@@ -1141,68 +1198,153 @@ function Table({
             ]
           }
         ),
-        responsiveMode === "card" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardListClasses, "data-tiger-table-mobile": "card", children: ctx.paginatedData.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.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 ? _optionalChain([internalExpandable, 'access', _67 => _67.expandedRowRender, 'optionalCall', _68 => _68(record, index)]) : null;
-          const expandedNode = expandedContent;
-          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "div",
-            {
-              className: _tigercatcore.tableResponsiveCardClasses,
-              onClick: () => ctx.handleRowClick(record, index, key),
-              children: [
-                _optionalChain([internalRowSelection, 'optionalAccess', _69 => _69.showCheckbox]) !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center gap-3", children: [
-                  internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "input",
-                    {
-                      type: internalRowSelection.type === "radio" ? "radio" : "checkbox",
-                      checked: ctx.selectedRowKeySet.has(key),
-                      disabled: _optionalChain([internalRowSelection, 'access', _70 => _70.getCheckboxProps, 'optionalCall', _71 => _71(record), 'optionalAccess', _72 => _72.disabled]),
-                      onClick: (event) => event.stopPropagation(),
-                      onChange: (event) => ctx.handleSelectRow(key, event.target.checked)
-                    }
-                  ),
-                  internalExpandable && isRowExpandable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "button",
-                    {
-                      type: "button",
-                      className: "text-sm text-[var(--tiger-primary,#2563eb)]",
-                      "aria-expanded": isExpanded,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        ctx.handleToggleExpand(key, record);
+        responsiveMode === "card" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: _tigercatcore.getTableResponsiveCardListClasses.call(void 0, cardBreakpoint),
+            "data-tiger-table-mobile": "card",
+            children: [
+              _optionalChain([internalRowSelection, 'optionalAccess', _67 => _67.type]) !== "radio" && _optionalChain([internalRowSelection, 'optionalAccess', _68 => _68.showCheckbox]) !== false && internalRowSelection && ctx.paginatedData.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkF7H4ALKNjs.Checkbox,
+                {
+                  size: "sm",
+                  checked: ctx.allSelected,
+                  indeterminate: ctx.someSelected,
+                  onChange: (checked) => ctx.handleSelectAll(checked),
+                  children: tableLabels.selectAllText
+                }
+              ) }) : null,
+              ctx.displayColumns.some((column) => column.sortable) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+                _chunk6Z4LLPZAjs.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: `${_tigercatcore.formatTableSortByText.call(void 0, tableLabels.sortByText, column.title)} \u2191`,
+                        value: `${column.key}:asc`
                       },
-                      children: isExpanded ? "Collapse" : "Expand"
+                      {
+                        label: `${_tigercatcore.formatTableSortByText.call(void 0, tableLabels.sortByText, column.title)} \u2193`,
+                        value: `${column.key}:desc`
+                      }
+                    ])
+                  ],
+                  clearable: false,
+                  onChange: (value) => {
+                    const nextValue = String(_nullishCoalesce(value, () => ( "")));
+                    if (!nextValue) {
+                      ctx.handleSetSort({ key: null, direction: null });
+                      return;
                     }
-                  )
-                ] }) : null,
-                ctx.displayColumns.map((column) => {
-                  const dataKey = column.dataKey || column.key;
-                  const cellValue = record[dataKey];
-                  const cellContent = column.render ? column.render(record, index) : cellValue;
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardRowClasses, children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardLabelClasses, children: column.title }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardValueClasses, children: cellContent })
-                  ] }, column.key);
-                }),
-                expandedNode && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
-              ]
-            },
-            key
-          );
-        }) }),
+                    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__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZRHDNGWOjs.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 ? _optionalChain([internalExpandable, 'access', _69 => _69.expandedRowRender, 'optionalCall', _70 => _70(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 = _optionalChain([renderCard, 'optionalCall', _71 => _71(renderContext)]);
+                const resolvedCardClassName = typeof cardClassName === "function" ? cardClassName(record, index) : cardClassName;
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    className: _tigercatcore.classNames.call(void 0, _tigercatcore.tableResponsiveCardClasses, resolvedCardClassName),
+                    onClick: () => ctx.handleRowClick(record, index, key),
+                    children: customCard !== void 0 && customCard !== null ? customCard : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                      _optionalChain([internalRowSelection, 'optionalAccess', _72 => _72.showCheckbox]) !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center gap-3", children: [
+                        internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { onClick: (event) => event.stopPropagation(), children: internalRowSelection.type === "radio" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _chunkTMON4MPOjs.Radio,
+                          {
+                            value: key,
+                            checked: isSelected,
+                            disabled: _optionalChain([internalRowSelection, 'access', _73 => _73.getCheckboxProps, 'optionalCall', _74 => _74(record), 'optionalAccess', _75 => _75.disabled]),
+                            "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
+                              tableLabels.selectRowAriaLabel,
+                              index + 1,
+                              _optionalChain([tableLocale, 'optionalAccess', _76 => _76.locale])
+                            ),
+                            onChange: () => ctx.handleSelectRow(key, true)
+                          }
+                        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _chunkF7H4ALKNjs.Checkbox,
+                          {
+                            size: "sm",
+                            checked: isSelected,
+                            disabled: _optionalChain([internalRowSelection, 'access', _77 => _77.getCheckboxProps, 'optionalCall', _78 => _78(record), 'optionalAccess', _79 => _79.disabled]),
+                            "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
+                              tableLabels.selectRowAriaLabel,
+                              index + 1,
+                              _optionalChain([tableLocale, 'optionalAccess', _80 => _80.locale])
+                            ),
+                            onChange: (checked) => ctx.handleSelectRow(key, checked)
+                          }
+                        ) }),
+                        internalExpandable && isRowExpandable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          "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 } = _tigercatcore.getCardColumns.call(void 0, ctx.displayColumns);
+                        const renderCellContent = (column) => {
+                          const dataKey = column.dataKey || column.key;
+                          return column.render ? column.render(record, index) : record[dataKey];
+                        };
+                        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                          titleColumn && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardTitleClasses, children: renderCellContent(titleColumn) }),
+                          bodyColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardRowClasses, children: [
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardLabelClasses, children: column.title }),
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.tableResponsiveCardValueClasses, children: renderCellContent(column) })
+                          ] }, column.key))
+                        ] });
+                      })(),
+                      expandedNode && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
+                    ] })
+                  },
+                  key
+                );
+              })
+            ]
+          }
+        ),
         loading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
             className: _tigercatcore.tableLoadingOverlayClasses,
             role: "status",
             "aria-live": "polite",
-            "aria-label": "Loading",
+            "aria-label": tableLabels.loadingText,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSpinner, {}),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Loading" })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: tableLabels.loadingText })
             ]
           }
         ),

package/dist/{chunk-VE2YEFG2.mjs → chunk-PCPAMUAE.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-4XOWNEZA.mjs";
+} from "./chunk-ZDEOTMXP.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-O4UDB6ZE.mjs → chunk-TAYQDWXN.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-4XOWNEZA.mjs";
+} from "./chunk-ZDEOTMXP.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";