@expcat/tigercat-react 1.4.0 → 1.5.0

package/dist/{chunk-IZGXDHPB.mjs → chunk-7RI5W465.mjs}

@@ -70,18 +70,15 @@ var Form = forwardRef(
       [config.locale, locale]
     );
     const [errors, setErrors] = useState([]);
-    const [formValues, setFormValues] = useState(model);
     const fieldRulesRef = React.useRef({});
     const fieldConditionsRef = React.useRef({});
     const formValuesRef = React.useRef(model);
+    const initialValuesRef = React.useRef({ ...model });
     const validationDebouncerRef = React.useRef(
       createFormValidationDebouncer({ delay: validateDebounce })
     );
     const errorsByField = useMemo(() => createFormErrorMap(errors), [errors]);
     const [historyState, setHistoryState] = useState(() => createFormHistory(model, maxHistorySize));
-    React.useEffect(() => {
-      setFormValues(model);
-    }, [model]);
     React.useEffect(() => {
       validationDebouncerRef.current.cancel();
       validationDebouncerRef.current = createFormValidationDebouncer({ delay: validateDebounce });
@@ -286,27 +283,28 @@ var Form = forwardRef(
     }, []);
     const resetFields = useCallback(() => {
       clearValidate();
-      setFormValues(model);
-    }, [model, clearValidate]);
+      const next = { ...initialValuesRef.current };
+      formValuesRef.current = next;
+      onChange?.(next);
+      if (undoable) {
+        setHistoryState(createFormHistory(next, maxHistorySize));
+      }
+    }, [clearValidate, onChange, undoable, maxHistorySize]);
     const addField = useCallback(
       (fieldName, defaultValue) => {
         if (!fieldName) return;
-        setFormValues((prev) => {
-          const next = { ...prev, [fieldName]: defaultValue ?? null };
-          onChange?.(next);
-          return next;
-        });
+        const next = { ...formValuesRef.current, [fieldName]: defaultValue ?? null };
+        formValuesRef.current = next;
+        onChange?.(next);
       },
       [onChange]
     );
     const removeField = useCallback(
       (fieldName) => {
         if (!fieldName) return;
-        setFormValues((prev) => {
-          const { [fieldName]: _, ...next } = prev;
-          onChange?.(next);
-          return next;
-        });
+        const { [fieldName]: _, ...next } = formValuesRef.current;
+        formValuesRef.current = next;
+        onChange?.(next);
         clearValidate(fieldName);
       },
       [onChange, clearValidate]
@@ -337,11 +335,9 @@ var Form = forwardRef(
           }
           return clone;
         };
-        setFormValues((prevValues) => {
-          const newValues = setValueByPath(prevValues, fieldName, value);
-          onChange?.(newValues);
-          return newValues;
-        });
+        const newValues = setValueByPath(formValuesRef.current, fieldName, value);
+        formValuesRef.current = newValues;
+        onChange?.(newValues);
       },
       [onChange]
     );
@@ -354,7 +350,6 @@ var Form = forwardRef(
       setHistoryState((prev) => {
         const result = undoFormHistory(prev);
         if (result) {
-          setFormValues(result.present);
           formValuesRef.current = result.present;
           onChange?.(result.present);
           return result;
@@ -367,7 +362,6 @@ var Form = forwardRef(
       setHistoryState((prev) => {
         const result = redoFormHistory(prev);
         if (result) {
-          setFormValues(result.present);
           formValuesRef.current = result.present;
           onChange?.(result.present);
           return result;
@@ -416,7 +410,7 @@ var Form = forwardRef(
     );
     const contextValue = useMemo(
       () => ({
-        model: formValues,
+        model,
         rules,
         labelWidth,
         labelPosition,
@@ -436,7 +430,7 @@ var Form = forwardRef(
         updateValue
       }),
       [
-        formValues,
+        model,
         rules,
         labelWidth,
         labelPosition,

package/dist/{chunk-DCKBVRLI.js → chunk-7UZ7O7KX.js}

@@ -3,13 +3,13 @@
 var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
 
 
-var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+var _chunk23XPDNCAjs = require('./chunk-23XPDNCA.js');
 
 
 var _chunkAX5XRD2Qjs = require('./chunk-AX5XRD2Q.js');
 
 
-var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+var _chunkSK7PXSVEjs = require('./chunk-SK7PXSVE.js');
 
 
 var _chunkE5GD3H7Ljs = require('./chunk-E5GD3H7L.js');
@@ -50,13 +50,13 @@ var AreaChart = ({
   series,
   xScale: xScaleProp,
   yScale: yScaleProp,
-  areaColor: _areaColor = "var(--tiger-primary,#2563eb)",
+  areaColor = "var(--tiger-primary,#2563eb)",
   strokeWidth = 2,
   fillOpacity = 0.2,
   curve = "linear",
   showPoints = false,
   pointSize = 4,
-  pointColor: _pointColor,
+  pointColor,
   stacked = false,
   showGrid = true,
   showAxis = true,
@@ -114,8 +114,13 @@ var AreaChart = ({
     [width, height, padding]
   );
   const resolvedSeries = _react.useMemo.call(void 0, 
-    () => _tigercatcore.resolveSeriesData.call(void 0, series, data),
-    [series, data]
+    () => _tigercatcore.resolveSeriesData.call(void 0, series, data, {
+      // Single-series colors (`areaColor`/`pointColor`) seed the synthesized
+      // series so they take effect when only `data` is provided.
+      color: areaColor,
+      pointColor
+    }),
+    [series, data, areaColor, pointColor]
   );
   const {
     activeIndex,
@@ -291,9 +296,19 @@ var AreaChart = ({
     setHoveredPointInfo(null);
     _optionalChain([onPointHover, 'optionalCall', _9 => _9(null, null, null)]);
   }, [onPointHover]);
+  const showPointTooltipFromElement = _react.useCallback.call(void 0, 
+    (el, seriesIndex, pointIndex) => {
+      if (!hoverable) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      _optionalChain([onPointHover, 'optionalCall', _10 => _10(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _11 => _11[seriesIndex], 'optionalAccess', _12 => _12.data, 'access', _13 => _13[pointIndex]]))]);
+    },
+    [hoverable, onPointHover, resolvedSeries]
+  );
   const handlePointClick = _react.useCallback.call(void 0, 
     (seriesIndex, pointIndex) => {
-      _optionalChain([onPointClick, 'optionalCall', _10 => _10(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _11 => _11[seriesIndex], 'optionalAccess', _12 => _12.data, 'access', _13 => _13[pointIndex]]))]);
+      _optionalChain([onPointClick, 'optionalCall', _14 => _14(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _15 => _15[seriesIndex], 'optionalAccess', _16 => _16.data, 'access', _17 => _17[pointIndex]]))]);
       handleSeriesSelect(seriesIndex);
     },
     [onPointClick, resolvedSeries, handleSeriesSelect]
@@ -307,6 +322,7 @@ var AreaChart = ({
     },
     [selectable, handleSeriesSelect]
   );
+  const pointClickable = selectable || !!onPointClick;
   const reversedSeriesData = _react.useMemo.call(void 0, () => [...seriesData].reverse(), [seriesData]);
   const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _chunkUKLVOR4Ejs.ChartCanvas,
@@ -476,8 +492,10 @@ var AreaChart = ({
         )),
         seriesData.map(
           (sd) => sd.showPoints && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
-            const isHovered = _optionalChain([hoveredPointInfo, 'optionalAccess', _14 => _14.seriesIndex]) === sd.seriesIndex && _optionalChain([hoveredPointInfo, 'optionalAccess', _15 => _15.pointIndex]) === point.pointIndex;
+            const isHovered = _optionalChain([hoveredPointInfo, 'optionalAccess', _18 => _18.seriesIndex]) === sd.seriesIndex && _optionalChain([hoveredPointInfo, 'optionalAccess', _19 => _19.pointIndex]) === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
+            const datum = _optionalChain([resolvedSeries, 'access', _20 => _20[sd.seriesIndex], 'optionalAccess', _21 => _21.data, 'optionalAccess', _22 => _22[point.pointIndex]]);
+            const pointInteractive = hoverable || pointClickable;
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "circle",
               {
@@ -487,17 +505,46 @@ var AreaChart = ({
                 fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
-                className: _tigercatcore.linePointTransitionClasses,
+                className: _tigercatcore.classNames.call(void 0, 
+                  _tigercatcore.linePointTransitionClasses,
+                  pointInteractive && "cursor-pointer"
+                ),
                 style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                role: pointInteractive ? "button" : "img",
+                "aria-label": _nullishCoalesce(_optionalChain([datum, 'optionalAccess', _23 => _23.label]), () => ( String(_nullishCoalesce(_optionalChain([datum, 'optionalAccess', _24 => _24.y]), () => ( ""))))),
+                tabIndex: pointInteractive ? 0 : void 0,
                 "data-point-index": point.pointIndex,
                 "data-series-key": sd.seriesKey,
-                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                onMouseMove: handlePointMouseMove,
-                onMouseLeave: handlePointMouseLeave,
-                onClick: (e) => {
+                onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                onMouseMove: hoverable ? handlePointMouseMove : void 0,
+                onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                onClick: pointClickable ? (e) => {
                   e.stopPropagation();
                   handlePointClick(sd.seriesIndex, point.pointIndex);
-                }
+                } : void 0,
+                onFocus: hoverable ? (e) => showPointTooltipFromElement(
+                  e.currentTarget,
+                  sd.seriesIndex,
+                  point.pointIndex
+                ) : void 0,
+                onBlur: hoverable ? handlePointMouseLeave : void 0,
+                onKeyDown: pointInteractive ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (pointClickable) {
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    } else {
+                      showPointTooltipFromElement(
+                        e.currentTarget,
+                        sd.seriesIndex,
+                        point.pointIndex
+                      );
+                    }
+                  } else if (e.key === "Escape" && hoverable) {
+                    handlePointMouseLeave();
+                  }
+                } : void 0
               },
               `point-${sd.seriesKey}-${point.pointIndex}`
             );
@@ -507,7 +554,7 @@ var AreaChart = ({
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkUVMQJOTXjs.ChartTooltip,
+    _chunkSK7PXSVEjs.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoveredPointInfo !== null && tooltipContent !== "",
@@ -524,7 +571,7 @@ var AreaChart = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWV5XHYW6js.ChartLegend,
+      _chunk23XPDNCAjs.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-WZUADPYB.js → chunk-7YI5TAPT.js}

@@ -25,7 +25,7 @@ var RichTextEditor = ({
   value,
   defaultValue = "",
   placeholder,
-  mode: _mode = "html",
+  mode = "html",
   toolbar,
   height = 300,
   readOnly = false,
@@ -48,6 +48,7 @@ var RichTextEditor = ({
     const instance = factory.create({
       element: editorRef.current,
       initialValue: isControlled ? value : defaultValue,
+      mode,
       readOnly,
       disabled,
       placeholder,
@@ -76,10 +77,6 @@ var RichTextEditor = ({
   const execButtonAction = _react.useCallback.call(void 0, 
     (btn) => {
       if (readOnly || disabled) return;
-      if (btn.action && editorRef.current) {
-        btn.action(editorRef.current);
-        return;
-      }
       _optionalChain([engineRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.exec, 'call', _6 => _6(btn.name)]);
     },
     [readOnly, disabled]

package/dist/chunk-AI4V7L6K.mjs

@@ -0,0 +1,230 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
+// src/components/VirtualTable.tsx
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  isActivationKey,
+  resolveLocaleText,
+  mergeTigerLocale,
+  calculateVirtualRange,
+  calculateVirtualColumnRange,
+  getVirtualTableContainerClasses,
+  getVirtualTableRowClasses,
+  getVirtualRowKey,
+  getVirtualTableFixedInfo,
+  getVirtualTableFixedCellStyle,
+  getTableFixedCellClasses,
+  getTableFixedHeaderCellClasses,
+  getTableColgroup,
+  tableBaseClasses,
+  virtualTableHeaderClasses,
+  virtualTableHeaderCellClasses,
+  virtualTableCellClasses,
+  virtualTableEmptyClasses,
+  virtualTableLoadingClasses,
+  virtualTableFixedCellSelectedClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_VIRTUAL_COLUMN_WIDTH = 150;
+var VirtualTable = ({
+  data = [],
+  columns = [],
+  rowHeight = 48,
+  height = 400,
+  width = "auto",
+  overscan = 5,
+  stickyHeader = true,
+  virtualizeColumns = false,
+  rowKey,
+  rowClassName,
+  loading = false,
+  emptyText,
+  locale,
+  selectable = false,
+  selectedKeys = [],
+  striped = false,
+  bordered = false,
+  className,
+  onRowClick,
+  onSelect,
+  renderCell,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const range = useMemo(
+    () => calculateVirtualRange(scrollTop, height, data.length, rowHeight, overscan),
+    [scrollTop, height, data.length, rowHeight, overscan]
+  );
+  const visibleData = useMemo(
+    () => data.slice(range.start, range.end),
+    [data, range.start, range.end]
+  );
+  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const onScroll = useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+      setScrollLeft(containerRef.current.scrollLeft);
+    }
+  }, []);
+  const containerClasses = useMemo(
+    () => getVirtualTableContainerClasses(bordered, className),
+    [bordered, className]
+  );
+  const fixedInfo = useMemo(() => getVirtualTableFixedInfo(columns), [columns]);
+  const columnWidths = useMemo(
+    () => columns.map((c) => typeof c.width === "number" ? c.width : DEFAULT_VIRTUAL_COLUMN_WIDTH),
+    [columns]
+  );
+  const colVirtualActive = virtualizeColumns && !fixedInfo.hasFixedColumns && width !== "auto";
+  const colRange = useMemo(
+    () => colVirtualActive ? calculateVirtualColumnRange(scrollLeft, width, columnWidths) : void 0,
+    [colVirtualActive, scrollLeft, width, columnWidths]
+  );
+  const visibleColumns = colRange ? columns.slice(colRange.start, colRange.end) : columns;
+  const colIndexOffset = colRange ? colRange.start : 0;
+  const colgroupEntries = useMemo(
+    () => fixedInfo.hasFixedColumns ? getTableColgroup({
+      columns: visibleColumns,
+      size: "md",
+      hasSelectionColumn: false,
+      expand: false
+    }) : [],
+    [fixedInfo.hasFixedColumns, visibleColumns]
+  );
+  const resolveRowClassName = (row, index) => typeof rowClassName === "function" ? rowClassName(row, index) : rowClassName;
+  const bottomHeight = Math.max(0, range.totalHeight - range.end * rowHeight);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classNames(
+        containerClasses,
+        rest.className
+      ),
+      style: {
+        height: `${height}px`,
+        ...width !== "auto" ? { width: `${width}px` } : {}
+      },
+      onScroll,
+      role: "grid",
+      "aria-rowcount": data.length,
+      children: [
+        /* @__PURE__ */ jsxs("table", { className: classNames(tableBaseClasses, "table-fixed"), children: [
+          colgroupEntries.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: colgroupEntries.map((entry) => /* @__PURE__ */ jsx(
+            "col",
+            {
+              "data-tiger-table-col": entry.key,
+              style: entry.width ? { width: entry.width } : void 0
+            },
+            entry.key
+          )) }),
+          /* @__PURE__ */ jsx("thead", { className: stickyHeader ? virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsxs("tr", { children: [
+            colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
+            visibleColumns.map((col) => {
+              const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+              const stickyStyle = getVirtualTableFixedCellStyle(col.key, fixedInfo);
+              return /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: classNames(
+                    virtualTableHeaderCellClasses,
+                    getTableFixedHeaderCellClasses({
+                      view: "virtual-table",
+                      column: col,
+                      stickyHeader,
+                      fixedInfo
+                    })
+                  ),
+                  style: { ...widthStyle, ...stickyStyle },
+                  children: col.title ?? ""
+                },
+                col.key
+              );
+            }),
+            colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
+          ] }) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            /* @__PURE__ */ jsx("tr", { style: { height: `${range.offsetTop}px` }, "aria-hidden": true }),
+            visibleData.map((row, localIdx) => {
+              const globalIdx = range.start + localIdx;
+              const key = getVirtualRowKey(row, globalIdx, rowKey);
+              const isSelected = selectedSet.has(key);
+              const isInteractive = !!onRowClick || selectable;
+              const activate = () => {
+                onRowClick?.(row, globalIdx);
+                if (selectable) onSelect?.(key, row, globalIdx);
+              };
+              return /* @__PURE__ */ jsxs(
+                "tr",
+                {
+                  className: classNames(
+                    getVirtualTableRowClasses(globalIdx, striped, isSelected),
+                    resolveRowClassName(row, globalIdx)
+                  ),
+                  "aria-rowindex": globalIdx + 2,
+                  "aria-selected": selectable ? isSelected : void 0,
+                  tabIndex: isInteractive ? 0 : void 0,
+                  onClick: isInteractive ? activate : void 0,
+                  onKeyDown: isInteractive ? (e) => {
+                    if (isActivationKey(e)) {
+                      e.preventDefault();
+                      activate();
+                    }
+                  } : void 0,
+                  children: [
+                    colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
+                    visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        "aria-colindex": colIndexOffset + colIdx + 1,
+                        className: classNames(
+                          virtualTableCellClasses,
+                          getTableFixedCellClasses({
+                            view: "virtual-table",
+                            column: col,
+                            record: row,
+                            rowIndex: globalIdx,
+                            striped,
+                            stripedActive: striped && globalIdx % 2 === 1,
+                            selected: isSelected,
+                            hoverable: true,
+                            fixedInfo,
+                            selectedClassName: virtualTableFixedCellSelectedClasses
+                          })
+                        ),
+                        style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
+                        children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "")
+                      },
+                      col.key
+                    )),
+                    colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
+                  ]
+                },
+                key
+              );
+            }),
+            bottomHeight > 0 && /* @__PURE__ */ jsx("tr", { style: { height: `${bottomHeight}px` }, "aria-hidden": true })
+          ] })
+        ] }),
+        data.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: virtualTableEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) }),
+        loading && /* @__PURE__ */ jsx("div", { className: virtualTableLoadingClasses, children: resolveLocaleText("Loading...", mergedLocale?.common?.loadingText) })
+      ]
+    }
+  );
+};
+var VirtualTable_default = VirtualTable;
+
+export {
+  VirtualTable,
+  VirtualTable_default
+};