@smallwebco/tinypivot-react 1.0.38 → 1.0.48

package/dist/index.js

@@ -425,12 +425,11 @@ function usePivotTable(data) {
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
   const addRowField = useCallback3(
     (field) => {
-      if (!requirePro("Pivot Table - Row Fields")) return;
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
       }
     },
-    [rowFields, requirePro]
+    [rowFields]
   );
   const removeRowField = useCallback3((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
@@ -440,12 +439,11 @@ function usePivotTable(data) {
   }, []);
   const addColumnField = useCallback3(
     (field) => {
-      if (!requirePro("Pivot Table - Column Fields")) return;
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
       }
     },
-    [columnFields, requirePro]
+    [columnFields]
   );
   const removeColumnField = useCallback3((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
@@ -455,7 +453,9 @@ function usePivotTable(data) {
   }, []);
   const addValueField = useCallback3(
     (field, aggregation = "sum") => {
-      if (!requirePro("Pivot Table - Value Fields")) return;
+      if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
+        return;
+      }
       setValueFields((prev) => {
         if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
           return prev;
@@ -1532,11 +1532,15 @@ function CalculatedFieldModal({
       ] })
     ] })
   ] }) });
+  if (typeof document === "undefined") return null;
   return createPortal(modalContent, document.body);
 }
 
 // src/components/PivotConfig.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function aggregationRequiresPro(agg) {
+  return agg !== "sum";
+}
 function getFieldIcon(type, isCalculated) {
   if (isCalculated) return "\u0192";
   switch (type) {
@@ -1576,6 +1580,10 @@ function PivotConfig({
   const [fieldSearch, setFieldSearch] = useState8("");
   const [showCalcModal, setShowCalcModal] = useState8(false);
   const [editingCalcField, setEditingCalcField] = useState8(null);
+  const { canUseAdvancedAggregations } = useLicense();
+  const isAggregationAvailable = useCallback8((agg) => {
+    return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
+  }, [canUseAdvancedAggregations]);
   const numericFieldNames = useMemo8(
     () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
     [availableFields]
@@ -1641,9 +1649,13 @@ function PivotConfig({
   );
   const handleAggregationChange = useCallback8(
     (field, currentAgg, newAgg) => {
+      if (!isAggregationAvailable(newAgg)) {
+        console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
+        return;
+      }
       onUpdateAggregation(field, currentAgg, newAgg);
     },
-    [onUpdateAggregation]
+    [onUpdateAggregation, isAggregationAvailable]
   );
   const toggleRowColumn = useCallback8(
     (field, currentAssignment) => {
@@ -1781,11 +1793,20 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs4("option", { value: agg.value, children: [
-                    agg.symbol,
-                    " ",
-                    agg.label
-                  ] }, agg.value))
+                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs4(
+                    "option",
+                    {
+                      value: agg.value,
+                      disabled: aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations,
+                      children: [
+                        agg.symbol,
+                        " ",
+                        agg.label,
+                        aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations ? " (Pro)" : ""
+                      ]
+                    },
+                    agg.value
+                  ))
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -2688,7 +2709,7 @@ function DataGrid({
   onExport,
   onCopy
 }) {
-  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
   const currentTheme = useMemo10(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2862,6 +2883,7 @@ function DataGrid({
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
   useEffect7(() => {
+    if (typeof document === "undefined") return;
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -3394,11 +3416,11 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ jsxs6(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs6(
               "button",
               {
                 className: "vpg-export-btn",
-                title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
+                title: "Export to CSV",
                 onClick: handleExport,
                 children: [
                   /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
@@ -3410,8 +3432,29 @@ function DataGrid({
                       d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                     }
                   ) }),
-                  "Export",
-                  viewMode === "pivot" ? " Pivot" : ""
+                  "Export"
+                ]
+              }
+            ),
+            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
+                disabled: !isPro,
+                title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
+                onClick: () => isPro && handleExport(),
+                children: [
+                  /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                    }
+                  ) }),
+                  "Export Pivot",
+                  !isPro ? " (Pro)" : ""
                 ]
               }
             )
@@ -3760,7 +3803,7 @@ function DataGrid({
           /* @__PURE__ */ jsx6("span", {}),
           /* @__PURE__ */ jsx6("span", {})
         ] }) }),
-        activeFilterColumn && createPortal2(
+        activeFilterColumn && typeof document !== "undefined" && createPortal2(
           /* @__PURE__ */ jsx6(
             "div",
             {