@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/{chunk-UT5BV2VO.mjs → chunk-AYFKHWJS.mjs}

@@ -1,6 +1,12 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
@@ -9,16 +15,13 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/BarChart.tsx
 import { useId, useMemo } from "react";
@@ -31,7 +34,6 @@ import {
   getStableChartGradientPrefix,
   getBarValueLabelY,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
@@ -117,6 +119,7 @@ var BarChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -133,9 +136,11 @@ var BarChart = ({
       onClick: onBarClick
     }
   });
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
   );
   const xDomain = useMemo(() => data.map((item) => String(item.x)), [data]);
   const yValues = useMemo(() => data.map((item) => item.y), [data]);
@@ -229,6 +234,7 @@ var BarChart = ({
       title,
       desc,
       className: classNames(className),
+      onResolvedSizeChange,
       children: [
         gradient && /* @__PURE__ */ jsx("defs", { children: bars.map((bar) => /* @__PURE__ */ jsxs(
           "linearGradient",
@@ -342,7 +348,7 @@ var BarChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      open: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-RPSHILHD.mjs → chunk-BXAH2GH3.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Switch.tsx
 import {
   getSwitchClasses,
@@ -5,7 +9,8 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var Switch = ({
-  checked = false,
+  checked: checkedProp,
+  defaultChecked,
   disabled = false,
   size = "md",
   onChange,
@@ -15,11 +20,12 @@ var Switch = ({
   tabIndex,
   ...props
 }) => {
+  const [checked, setChecked] = useControlledState(checkedProp, defaultChecked ?? false, onChange);
   const switchClasses = getSwitchClasses(size, checked, disabled, className);
   const thumbClasses = getSwitchThumbClasses(size, checked);
   const toggle = () => {
     if (disabled) return;
-    onChange?.(!checked);
+    setChecked(!checked);
   };
   const handleClick = (event) => {
     onClick?.(event);

package/dist/{chunk-EW5EO7VE.mjs → chunk-BYD7EAWK.mjs}

@@ -1,6 +1,6 @@
 import {
   PieChart
-} from "./chunk-QGZ32NFQ.mjs";
+} from "./chunk-Z23KOLNU.mjs";
 
 // src/components/DonutChart.tsx
 import { useEffect, useMemo, useState } from "react";

package/dist/{chunk-BOGOQ44C.mjs → chunk-CQOLQAB5.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-IIWUQK2P.mjs";
 import {
   Pagination
-} from "./chunk-HHIW7V7B.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",
           {

package/dist/{chunk-L55UK45A.mjs → chunk-CRIEUKMD.mjs}

@@ -56,7 +56,9 @@ var InputNumber = ({
   onChange,
   onFocus,
   onBlur,
-  className
+  className,
+  style,
+  ...rest
 }) => {
   const inputGroup = useInputGroupContext();
   const effectiveSize = size ?? inputGroup?.size ?? "md";
@@ -181,7 +183,7 @@ var InputNumber = ({
     ),
     [effectiveSize, controls, controlsPosition]
   );
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, style, children: [
     controls && controlsPosition === "both" && /* @__PURE__ */ jsx(
       "button",
       {
@@ -212,6 +214,7 @@ var InputNumber = ({
     /* @__PURE__ */ jsx(
       "input",
       {
+        ...rest,
         ref: inputRef,
         type: "text",
         inputMode: "decimal",

package/dist/{chunk-DKNVSQSV.mjs → chunk-CUAXRBKO.mjs}

@@ -17,10 +17,12 @@ var ChartCanvas = ({
   title,
   desc,
   children,
+  onResolvedSizeChange,
   ...props
 }) => {
   const svgRef = useRef(null);
   const [observedSize, setObservedSize] = useState(null);
+  const lastReportedSizeRef = useRef(null);
   const resizeControllerRef = useRef(
     createChartResizeObserverController({
       onSizeChange: setObservedSize
@@ -47,6 +49,16 @@ var ChartCanvas = ({
     controller.observe(target);
     return () => controller.disconnect();
   }, [responsive]);
+  useEffect(() => {
+    if (!onResolvedSizeChange) return;
+    const prev = lastReportedSizeRef.current;
+    if (prev && prev.width === resolvedSize.width && prev.height === resolvedSize.height) {
+      return;
+    }
+    const nextSize = { width: resolvedSize.width, height: resolvedSize.height };
+    lastReportedSizeRef.current = nextSize;
+    onResolvedSizeChange(nextSize);
+  }, [resolvedSize.width, resolvedSize.height, onResolvedSizeChange]);
   return /* @__PURE__ */ jsxs(
     "svg",
     {

package/dist/{chunk-E7OTDBI6.mjs → chunk-DECUASRW.mjs}

@@ -1,6 +1,12 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
@@ -9,16 +15,13 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -29,7 +32,6 @@ import {
   classNames,
   createLinearScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
@@ -137,6 +139,7 @@ var ScatterChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -151,9 +154,11 @@ var ScatterChart = ({
     onSelectedIndexChange,
     callbacks: { onClick: onPointClick }
   });
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
   );
   const xValues = useMemo(() => data.map((item) => item.x), [data]);
   const yValues = useMemo(() => data.map((item) => item.y), [data]);
@@ -232,6 +237,7 @@ var ScatterChart = ({
       title,
       desc,
       className: classNames(className),
+      onResolvedSizeChange,
       children: [
         gradient && /* @__PURE__ */ jsx("defs", { children: palette.map((color, i) => /* @__PURE__ */ jsxs(
           "radialGradient",
@@ -330,20 +336,12 @@ var ScatterChart = ({
               `point-${index}`
             );
           }
-          return /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: getScatterPointPath(pointStyle, point.r),
-              transform: `translate(${point.cx},${point.cy})`,
-              ...sharedProps
-            },
-            `point-${index}`
-          );
+          return /* @__PURE__ */ jsx("g", { transform: `translate(${point.cx},${point.cy})`, children: /* @__PURE__ */ jsx("path", { d: getScatterPointPath(pointStyle, point.r), ...sharedProps }) }, `point-${index}`);
         }) })
       ]
     }
   );
-  const tooltip = showTooltip && hoverable && /* @__PURE__ */ jsx(
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/{chunk-XMTEMBQV.mjs → chunk-EAAWB3CK.mjs}

@@ -113,24 +113,27 @@ var Affix = ({
       style: { display: "block", width: 0, height: 0, pointerEvents: "none" }
     }
   );
-  if (state.affixed) {
+  const content = /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children });
+  const placeholder = state.affixed ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: originalRectRef.current?.width ?? 0,
+        height: originalRectRef.current?.height ?? 0
+      }
+    }
+  ) : null;
+  if (offsetBottom !== void 0) {
     return /* @__PURE__ */ jsxs("div", { children: [
-      sentinel,
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: originalRectRef.current?.width ?? 0,
-            height: originalRectRef.current?.height ?? 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+      placeholder,
+      content,
+      sentinel
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
     sentinel,
-    /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+    placeholder,
+    content
   ] });
 };
 

package/dist/{chunk-D33BIMGK.mjs → chunk-EG7EMDKK.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI6YWH66.mjs";
+} from "./chunk-RE5ZLA5D.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -61,7 +61,17 @@ var DataExport = ({
         setExporting(false);
       }
     },
-    [columns, dataSource, sheetName, cellFormatter, fileName, disabled, exporting, onExport, onError]
+    [
+      columns,
+      dataSource,
+      sheetName,
+      cellFormatter,
+      fileName,
+      disabled,
+      exporting,
+      onExport,
+      onError
+    ]
   );
   const formatLabel = (format) => format === "xlsx" ? resolvedLabels.xlsxText : resolvedLabels.markdownText;
   if (formats.length === 0) return null;