@smallwebco/tinypivot-react 1.0.38 → 1.0.48

package/dist/index.cjs

@@ -445,12 +445,11 @@ function usePivotTable(data) {
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
   const addRowField = (0, import_react3.useCallback)(
     (field) => {
-      if (!requirePro("Pivot Table - Row Fields")) return;
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
       }
     },
-    [rowFields, requirePro]
+    [rowFields]
   );
   const removeRowField = (0, import_react3.useCallback)((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
@@ -460,12 +459,11 @@ function usePivotTable(data) {
   }, []);
   const addColumnField = (0, import_react3.useCallback)(
     (field) => {
-      if (!requirePro("Pivot Table - Column Fields")) return;
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
       }
     },
-    [columnFields, requirePro]
+    [columnFields]
   );
   const removeColumnField = (0, import_react3.useCallback)((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
@@ -475,7 +473,9 @@ function usePivotTable(data) {
   }, []);
   const addValueField = (0, import_react3.useCallback)(
     (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;
@@ -1547,11 +1547,15 @@ function CalculatedFieldModal({
       ] })
     ] })
   ] }) });
+  if (typeof document === "undefined") return null;
   return (0, import_react_dom.createPortal)(modalContent, document.body);
 }
 
 // src/components/PivotConfig.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function aggregationRequiresPro(agg) {
+  return agg !== "sum";
+}
 function getFieldIcon(type, isCalculated) {
   if (isCalculated) return "\u0192";
   switch (type) {
@@ -1591,6 +1595,10 @@ function PivotConfig({
   const [fieldSearch, setFieldSearch] = (0, import_react8.useState)("");
   const [showCalcModal, setShowCalcModal] = (0, import_react8.useState)(false);
   const [editingCalcField, setEditingCalcField] = (0, import_react8.useState)(null);
+  const { canUseAdvancedAggregations } = useLicense();
+  const isAggregationAvailable = (0, import_react8.useCallback)((agg) => {
+    return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
+  }, [canUseAdvancedAggregations]);
   const numericFieldNames = (0, import_react8.useMemo)(
     () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
     [availableFields]
@@ -1656,9 +1664,13 @@ function PivotConfig({
   );
   const handleAggregationChange = (0, import_react8.useCallback)(
     (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 = (0, import_react8.useCallback)(
     (field, currentAssignment) => {
@@ -1796,11 +1808,20 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: agg.value, children: [
-                    agg.symbol,
-                    " ",
-                    agg.label
-                  ] }, agg.value))
+                  children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    "option",
+                    {
+                      value: agg.value,
+                      disabled: aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations,
+                      children: [
+                        agg.symbol,
+                        " ",
+                        agg.label,
+                        aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations ? " (Pro)" : ""
+                      ]
+                    },
+                    agg.value
+                  ))
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2703,7 +2724,7 @@ function DataGrid({
   onExport,
   onCopy
 }) {
-  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
   const currentTheme = (0, import_react10.useMemo)(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2877,6 +2898,7 @@ function DataGrid({
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
   (0, import_react10.useEffect)(() => {
+    if (typeof document === "undefined") return;
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -3409,11 +3431,11 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 className: "vpg-export-btn",
-                title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
+                title: "Export to CSV",
                 onClick: handleExport,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3425,8 +3447,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__ */ (0, import_jsx_runtime6.jsxs)(
+              "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__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "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)" : ""
                 ]
               }
             )
@@ -3775,7 +3818,7 @@ function DataGrid({
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {})
         ] }) }),
-        activeFilterColumn && (0, import_react_dom2.createPortal)(
+        activeFilterColumn && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "div",
             {