@smallwebco/tinypivot-react 1.0.13 → 1.0.15

package/dist/index.d.cts

@@ -183,9 +183,10 @@ declare function usePivotTable(data: Record<string, unknown>[]): UsePivotTableRe
  */
 declare function setLicenseKey(key: string): Promise<void>;
 /**
- * Enable demo mode
+ * Enable demo mode - requires the correct demo secret
+ * Returns true if activation succeeded, false if secret was invalid
  */
-declare function enableDemoMode(): void;
+declare function enableDemoMode(secret: string): Promise<boolean>;
 /**
  * Configure the license secret
  */

package/dist/index.d.ts

@@ -183,9 +183,10 @@ declare function usePivotTable(data: Record<string, unknown>[]): UsePivotTableRe
  */
 declare function setLicenseKey(key: string): Promise<void>;
 /**
- * Enable demo mode
+ * Enable demo mode - requires the correct demo secret
+ * Returns true if activation succeeded, false if secret was invalid
  */
-declare function enableDemoMode(): void;
+declare function enableDemoMode(secret: string): Promise<boolean>;
 /**
  * Configure the license secret
  */

package/dist/index.js

@@ -1,9 +1,9 @@
 // src/components/DataGrid.tsx
-import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect4, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/useExcelGrid.ts
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -26,13 +26,17 @@ function useExcelGrid(options) {
   const [columnVisibility, setColumnVisibility] = useState({});
   const [globalFilter, setGlobalFilter] = useState("");
   const [columnStatsCache, setColumnStatsCache] = useState({});
+  const dataSignature = useMemo(
+    () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    [data]
+  );
   const columnKeys = useMemo(() => {
     if (data.length === 0) return [];
     return Object.keys(data[0]);
   }, [data]);
   const getColumnStats = useCallback(
     (columnKey) => {
-      const cacheKey = `${columnKey}-${data.length}`;
+      const cacheKey = `${columnKey}-${dataSignature}`;
       if (!columnStatsCache[cacheKey]) {
         const stats = getColumnUniqueValues(data, columnKey);
         setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
@@ -40,11 +44,14 @@ function useExcelGrid(options) {
       }
       return columnStatsCache[cacheKey];
     },
-    [data, columnStatsCache]
+    [data, columnStatsCache, dataSignature]
   );
   const clearStatsCache = useCallback(() => {
     setColumnStatsCache({});
   }, []);
+  useEffect(() => {
+    clearStatsCache();
+  }, [dataSignature, clearStatsCache]);
   const columnDefs = useMemo(() => {
     return columnKeys.map((key) => {
       const stats = getColumnStats(key);
@@ -172,7 +179,7 @@ function useExcelGrid(options) {
 }
 
 // src/hooks/usePivotTable.ts
-import { useState as useState3, useMemo as useMemo3, useEffect, useCallback as useCallback3 } from "react";
+import { useState as useState3, useMemo as useMemo3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import {
   computeAvailableFields,
   getUnassignedFields,
@@ -212,11 +219,17 @@ async function setLicenseKey(key) {
   }
   notifyListeners();
 }
-function enableDemoMode() {
+async function enableDemoMode(secret) {
+  const demoLicense = await getDemoLicenseInfo(secret);
+  if (!demoLicense) {
+    console.warn("[TinyPivot] Demo mode activation failed - invalid secret");
+    return false;
+  }
   globalDemoMode = true;
-  globalLicenseInfo = getDemoLicenseInfo();
+  globalLicenseInfo = demoLicense;
   console.info("[TinyPivot] Demo mode enabled - all Pro features unlocked for evaluation");
   notifyListeners();
+  return true;
 }
 function configureLicenseSecret(secret) {
   coreConfigureLicenseSecret(secret);
@@ -304,7 +317,7 @@ function usePivotTable(data) {
       showColumnTotals
     });
   }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
-  useEffect(() => {
+  useEffect2(() => {
     if (data.length === 0) return;
     const newKeys = Object.keys(data[0]);
     const storageKey = generateStorageKey(newKeys);
@@ -333,7 +346,7 @@ function usePivotTable(data) {
       }
     }
   }, [data]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!currentStorageKey) return;
     const config = {
       rowFields,
@@ -693,7 +706,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
 }
 
 // src/components/ColumnFilter.tsx
-import { useState as useState5, useEffect as useEffect2, useRef, useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { useState as useState5, useEffect as useEffect3, useRef, useCallback as useCallback5, useMemo as useMemo5 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ColumnFilter({
   columnName,
@@ -768,7 +781,7 @@ function ColumnFilter({
     onFilter([]);
     onClose();
   }, [onFilter, onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -777,7 +790,7 @@ function ColumnFilter({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeydown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -788,10 +801,10 @@ function ColumnFilter({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [onClose, applyFilter]);
-  useEffect2(() => {
+  useEffect3(() => {
     searchInputRef.current?.focus();
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     setLocalSelected(new Set(selectedValues));
   }, [selectedValues]);
   return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
@@ -1320,6 +1333,20 @@ function PivotSkeleton({
     if (!activeFilters || activeFilters.length === 0) return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
+  const [showFilterTooltip, setShowFilterTooltip] = useState7(false);
+  const filterTooltipDetails = useMemo7(() => {
+    if (!activeFilters || activeFilters.length === 0) return [];
+    return activeFilters.map((f) => {
+      const maxDisplay = 5;
+      const displayValues = f.values.slice(0, maxDisplay);
+      const remaining = f.values.length - maxDisplay;
+      return {
+        column: f.column,
+        values: displayValues,
+        remaining: remaining > 0 ? remaining : 0
+      };
+    });
+  }, [activeFilters]);
   const handleDragOver = useCallback7(
     (area, event) => {
       event.preventDefault();
@@ -1444,37 +1471,66 @@ function PivotSkeleton({
             /* @__PURE__ */ jsx3("span", { children: "Pivot Table" })
           ] }),
           /* @__PURE__ */ jsxs3("div", { className: "vpg-header-right", children: [
-            hasActiveFilters && /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-indicator", children: [
-              /* @__PURE__ */ jsx3(
-                "svg",
-                {
-                  className: "vpg-filter-icon",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx3(
-                    "path",
+            hasActiveFilters && /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "vpg-filter-indicator",
+                onMouseEnter: () => setShowFilterTooltip(true),
+                onMouseLeave: () => setShowFilterTooltip(false),
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "svg",
                     {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                      className: "vpg-filter-icon",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx3(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs3("span", { className: "vpg-filter-text", children: [
-                "Filtered: ",
-                /* @__PURE__ */ jsx3("strong", { children: filterSummary }),
-                filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs3("span", { className: "vpg-filter-count", children: [
-                  "(",
-                  filteredRowCount.toLocaleString(),
-                  " of ",
-                  totalRowCount.toLocaleString(),
-                  " rows)"
-                ] })
-              ] })
-            ] }),
+                  ),
+                  /* @__PURE__ */ jsxs3("span", { className: "vpg-filter-text", children: [
+                    "Filtered: ",
+                    /* @__PURE__ */ jsx3("strong", { children: filterSummary }),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs3("span", { className: "vpg-filter-count", children: [
+                      "(",
+                      filteredRowCount.toLocaleString(),
+                      " of ",
+                      totalRowCount.toLocaleString(),
+                      " rows)"
+                    ] })
+                  ] }),
+                  showFilterTooltip && /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-tooltip", children: [
+                    /* @__PURE__ */ jsx3("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
+                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs3("div", { className: "vpg-tooltip-filter", children: [
+                      /* @__PURE__ */ jsx3("div", { className: "vpg-tooltip-column", children: filter.column }),
+                      /* @__PURE__ */ jsxs3("div", { className: "vpg-tooltip-values", children: [
+                        filter.values.map((val, idx) => /* @__PURE__ */ jsx3("span", { className: "vpg-tooltip-value", children: val }, idx)),
+                        filter.remaining > 0 && /* @__PURE__ */ jsxs3("span", { className: "vpg-tooltip-more", children: [
+                          "+",
+                          filter.remaining,
+                          " more"
+                        ] })
+                      ] })
+                    ] }, filter.column)),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "vpg-tooltip-summary", children: [
+                      "Showing ",
+                      filteredRowCount.toLocaleString(),
+                      " of ",
+                      totalRowCount.toLocaleString(),
+                      " rows"
+                    ] })
+                  ] })
+                ]
+              }
+            ),
             isConfigured && /* @__PURE__ */ jsxs3("div", { className: "vpg-config-summary", children: [
               /* @__PURE__ */ jsxs3("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
@@ -1886,7 +1942,7 @@ function DataGrid({
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  useEffect3(() => {
+  useEffect4(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
   const selectionBounds = useMemo8(() => {
@@ -1924,7 +1980,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -1955,7 +2011,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!resizingColumnId) return;
     const handleResizeMove = (event) => {
       const diff = event.clientX - resizeStartX;
@@ -1985,7 +2041,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isResizingVertically) return;
     const handleVerticalResizeMove = (event) => {
       const diff = event.clientY - verticalResizeStartY;
@@ -2103,12 +2159,12 @@ function DataGrid({
     },
     [isSelecting]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();