@expcat/tigercat-react 2.1.0 → 2.1.1

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

@@ -6,7 +6,7 @@ import {
 } 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",
           {

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-NWVNTZOP.mjs → chunk-DECUASRW.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.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-IR7VA6AO.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";

package/dist/{chunk-HOYBHB7B.mjs → chunk-FNK2VWPP.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/{chunk-RJPNBYK5.mjs → chunk-FQS24AUH.mjs}

@@ -26,9 +26,10 @@ import {
   tourFooterClasses,
   tourIndicatorClasses,
   tourCloseButtonClasses,
+  tourMaskClasses,
   getTourTargetRect,
   getTourPopoverPosition,
-  getTourSpotlightStyle,
+  getTourMaskHoleStyle,
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
@@ -169,8 +170,16 @@ var Tour = ({
     };
   }
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    showMask && targetRect && /* @__PURE__ */ jsx("div", { style: getTourSpotlightStyle(targetRect), "aria-hidden": "true" }),
-    showMask && !targetRect && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[1000] bg-black/45", "aria-hidden": "true", onClick: close }),
+    showMask && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: tourMaskClasses,
+        "data-tiger-tour-mask": "",
+        "aria-hidden": "true",
+        style: targetRect ? getTourMaskHoleStyle(targetRect) : void 0,
+        onClick: close
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-LADKKOJT.mjs → chunk-GBEDWXLL.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Stepper.tsx
 import { useEffect, useRef } from "react";
 import {
@@ -13,7 +17,8 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Stepper = ({
-  value = 0,
+  value,
+  defaultValue,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -25,16 +30,17 @@ var Stepper = ({
   decrementAriaLabel = "Decrease",
   onChange
 }) => {
+  const [currentValue, setCurrentValue] = useControlledState(value, defaultValue ?? 0, onChange);
   const repeatControllerRef = useRef(createRafRepeatActionController());
-  const repeatValueRef = useRef(value);
+  const repeatValueRef = useRef(currentValue);
   const suppressNextClickRef = useRef(false);
   useEffect(() => () => repeatControllerRef.current.stop(), []);
   function setValue(v) {
     const clamped = clampStepperValue(v, min, max, precision);
-    onChange?.(clamped);
+    setCurrentValue(clamped);
     return clamped;
   }
-  function stepBy(direction, baseValue = value) {
+  function stepBy(direction, baseValue = currentValue) {
     return setValue(direction === "up" ? baseValue + step : baseValue - step);
   }
   function handleStepClick(direction) {
@@ -48,10 +54,10 @@ var Stepper = ({
     return (event) => {
       event.preventDefault();
       if (disabled) return;
-      if (direction === "down" && value <= min) return;
-      if (direction === "up" && value >= max) return;
+      if (direction === "down" && currentValue <= min) return;
+      if (direction === "up" && currentValue >= max) return;
       suppressNextClickRef.current = true;
-      repeatValueRef.current = value;
+      repeatValueRef.current = currentValue;
       repeatControllerRef.current.start(() => {
         const baseValue = repeatValueRef.current;
         const nextValue = stepBy(direction, baseValue);
@@ -65,8 +71,8 @@ var Stepper = ({
   function stopStepRepeat() {
     repeatControllerRef.current.stop();
   }
-  const atMin = value <= min;
-  const atMax = value >= max;
+  const atMin = currentValue <= min;
+  const atMax = currentValue >= max;
   const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
   return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
     /* @__PURE__ */ jsx(
@@ -89,7 +95,7 @@ var Stepper = ({
       {
         type: "text",
         className: getStepperInputClasses(size),
-        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        value: precision !== void 0 ? currentValue.toFixed(precision) : String(currentValue),
         disabled,
         "aria-label": "Value",
         onChange: (e) => {

package/dist/{chunk-2ENQZECC.mjs → chunk-HAXRHSCN.mjs}

@@ -15,6 +15,7 @@ import {
   getAutoCompleteInputClasses,
   getAutoCompleteOptionClasses,
   filterAutoCompleteOptions,
+  resolveAutoCompleteDisplayValue,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
@@ -87,7 +88,7 @@ var AutoComplete = (props) => {
   const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
   const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
-    String(searchValue ?? value ?? defaultSearchValue ?? "")
+    searchValue ?? resolveAutoCompleteDisplayValue(value, options, defaultSearchValue)
   );
   const inputValue = searchValue ?? uncontrolledSearchValue;
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -111,8 +112,8 @@ var AutoComplete = (props) => {
     if (searchValue !== void 0) {
       return;
     }
-    setUncontrolledSearchValue(String(value ?? defaultSearchValue ?? ""));
-  }, [defaultSearchValue, searchValue, value]);
+    setUncontrolledSearchValue(resolveAutoCompleteDisplayValue(value, options, defaultSearchValue));
+  }, [defaultSearchValue, options, searchValue, value]);
   const filteredOptions = useMemo(
     () => filterAutoCompleteOptions(options, inputValue, filterOption),
     [options, inputValue, filterOption]

package/dist/{chunk-K4GIKSZE.mjs → chunk-I2BENK5X.mjs}

@@ -19,6 +19,7 @@ import {
   getLoadingDotsWrapperClasses,
   getLoadingTextClasses,
   getSpinnerSVG,
+  DEFAULT_LOADING_BACKGROUND,
   loadingContainerBaseClasses,
   loadingFullscreenBaseClasses,
   loadingColorClasses,
@@ -32,7 +33,7 @@ var Loading = ({
   text,
   fullscreen = false,
   delay = 0,
-  background = "rgba(255, 255, 255, 0.9)",
+  background = DEFAULT_LOADING_BACKGROUND,
   customColor,
   lockScroll = true,
   className,

package/dist/{chunk-DNOPEJ5I.mjs → chunk-JZZPLKTW.mjs}

@@ -8,6 +8,7 @@ import {
 function useChartInteraction(options) {
   const {
     hoverable,
+    showTooltip = true,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -50,17 +51,18 @@ function useChartInteraction(options) {
   );
   const handleMouseEnter = useCallback(
     (index, event) => {
-      if (!hoverable) return;
+      if (!hoverable && !showTooltip) return;
       if (hoveredIndexProp === void 0) {
         setLocalHoveredIndex(index);
       }
       setTooltipPosition({ x: event.clientX, y: event.clientY });
+      if (!hoverable) return;
       onHoveredIndexChange?.(index);
       if (callbacks?.onHover && getData) {
         callbacks.onHover(index, getData(index) ?? null);
       }
     },
-    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+    [hoverable, showTooltip, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
   );
   const handleMouseMove = useCallback(
     (event) => {
@@ -70,13 +72,14 @@ function useChartInteraction(options) {
   );
   const handleMouseLeave = useCallback(() => {
     tooltipScheduler.cancel();
-    if (!hoverable) return;
+    if (!hoverable && !showTooltip) return;
     if (hoveredIndexProp === void 0) {
       setLocalHoveredIndex(null);
     }
+    if (!hoverable) return;
     onHoveredIndexChange?.(null);
     callbacks?.onHover?.(null, null);
-  }, [hoverable, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  }, [hoverable, showTooltip, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
   const handleClick = useCallback(
     (index) => {
       if (!selectable) return;