@quillsql/react 2.16.65 → 2.16.67

package/dist/index.cjs

@@ -39092,6 +39092,7 @@ function GaugeChart({
   xAxisField,
   xAxisFormat,
   containerStyle,
+  className,
   colors,
   isAnimationActive = true
 }) {
@@ -39105,6 +39106,7 @@ function GaugeChart({
       percentage: normalizedPercentage,
       xAxisFormat,
       containerStyle: { ...containerStyle },
+      className,
       colors,
       isAnimationActive
     }
@@ -39113,6 +39115,7 @@ function GaugeChart({
 function D3Gauge({
   percentage,
   containerStyle,
+  className,
   xAxisFormat,
   colors,
   isAnimationActive
@@ -39281,7 +39284,8 @@ function D3Gauge({
     "div",
     {
       ref: containerRef,
-      style: { width: "100%", height: "100%", ...containerStyle }
+      style: { width: "100%", ...containerStyle },
+      className
     }
   );
 }
@@ -40371,6 +40375,7 @@ var ChartDisplay = ({
         xAxisField: config?.xAxisField ?? "",
         xAxisFormat: config?.xAxisFormat ?? "whole_number",
         containerStyle,
+        className,
         colors: chartColors,
         isAnimationActive
       }
@@ -43578,7 +43583,8 @@ function StaticChart(props) {
     onClickLegendElement,
     containerStyle,
     showLegend,
-    className
+    className,
+    hideTableChartOuterBorder = true
   } = props;
   const {
     report,
@@ -43637,7 +43643,14 @@ function StaticChart(props) {
       showLegend,
       onPageChange: useLocalPivotTablePagination ? void 0 : onPageChange,
       tableRowsLoading: useLocalPivotTablePagination ? false : pageLoading,
-      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange
+      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange,
+      tableChartWrapperBorders: hideTableChartOuterBorder && report?.chartType === "table" ? {
+        borderRadius: 0,
+        borderLeft: "none",
+        borderRight: "none",
+        borderTop: "none",
+        borderBottom: "none"
+      } : void 0
     }
   );
 }
@@ -65217,7 +65230,6 @@ function useReport(reportIdArg, options = {}) {
     () => stableSerializeForQueryKey(effectiveReportBuilderState),
     [effectiveReportBuilderState]
   );
-  const createdBootstrapStateMatchesEffectiveState = isCreatedReportBootstrapLoad && stableSerializeForQueryKey(initialReportBuilderStateForLoad) === effectiveReportBuilderStateHash;
   const prevPaginationResetStateHashRef = (0, import_react61.useRef)(null);
   (0, import_react61.useEffect)(() => {
     const prevHash = prevPaginationResetStateHashRef.current;
@@ -65351,7 +65363,7 @@ function useReport(reportIdArg, options = {}) {
         rowCountOnly: true
       });
     }),
-    enabled: createdBootstrapStateMatchesEffectiveState && Boolean(client) && !reportOverride,
+    enabled: isCreatedReportBootstrapLoad && Boolean(client) && !reportOverride,
     retry: false
   });
   (0, import_react61.useEffect)(() => {
@@ -65361,13 +65373,15 @@ function useReport(reportIdArg, options = {}) {
     setSourceReport(report);
   }, [effectiveReportId, tableRefreshQuery.data, tableRefreshQueryEnabled]);
   (0, import_react61.useEffect)(() => {
-    if (!createdBootstrapStateMatchesEffectiveState) return;
     const countReport = createdBootstrapRowCountQuery.data?.report;
     if (createdBootstrapRowCountQuery.data?.error || !countReport) return;
     setSourceReport((currentReport) => {
       if (!currentReport || currentReport.id !== effectiveReportId) {
         return currentReport;
       }
+      if (stableSerializeForQueryKey(currentReport.reportBuilderState) !== stableSerializeForQueryKey(countReport.reportBuilderState)) {
+        return currentReport;
+      }
       if (currentReport.rowCount === countReport.rowCount) {
         return currentReport;
       }
@@ -65375,7 +65389,6 @@ function useReport(reportIdArg, options = {}) {
     });
   }, [
     createdBootstrapRowCountQuery.data,
-    createdBootstrapStateMatchesEffectiveState,
     effectiveReportId,
     sourceReport?.id
   ]);

package/dist/index.d.cts

@@ -2722,6 +2722,8 @@ interface StaticChartBaseProps {
     onClickChartElement?: (data: any) => void;
     onClickLegendElement?: (data: any) => void;
     showLegend?: boolean;
+    /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
+    hideTableChartOuterBorder?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;

package/dist/index.d.ts

@@ -2722,6 +2722,8 @@ interface StaticChartBaseProps {
     onClickChartElement?: (data: any) => void;
     onClickLegendElement?: (data: any) => void;
     showLegend?: boolean;
+    /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
+    hideTableChartOuterBorder?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;

package/dist/index.js

@@ -39188,6 +39188,7 @@ function GaugeChart({
   xAxisField,
   xAxisFormat,
   containerStyle,
+  className,
   colors,
   isAnimationActive = true
 }) {
@@ -39201,6 +39202,7 @@ function GaugeChart({
       percentage: normalizedPercentage,
       xAxisFormat,
       containerStyle: { ...containerStyle },
+      className,
       colors,
       isAnimationActive
     }
@@ -39209,6 +39211,7 @@ function GaugeChart({
 function D3Gauge({
   percentage,
   containerStyle,
+  className,
   xAxisFormat,
   colors,
   isAnimationActive
@@ -39377,7 +39380,8 @@ function D3Gauge({
     "div",
     {
       ref: containerRef,
-      style: { width: "100%", height: "100%", ...containerStyle }
+      style: { width: "100%", ...containerStyle },
+      className
     }
   );
 }
@@ -40467,6 +40471,7 @@ var ChartDisplay = ({
         xAxisField: config?.xAxisField ?? "",
         xAxisFormat: config?.xAxisFormat ?? "whole_number",
         containerStyle,
+        className,
         colors: chartColors,
         isAnimationActive
       }
@@ -43681,7 +43686,8 @@ function StaticChart(props) {
     onClickLegendElement,
     containerStyle,
     showLegend,
-    className
+    className,
+    hideTableChartOuterBorder = true
   } = props;
   const {
     report,
@@ -43740,7 +43746,14 @@ function StaticChart(props) {
       showLegend,
       onPageChange: useLocalPivotTablePagination ? void 0 : onPageChange,
       tableRowsLoading: useLocalPivotTablePagination ? false : pageLoading,
-      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange
+      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange,
+      tableChartWrapperBorders: hideTableChartOuterBorder && report?.chartType === "table" ? {
+        borderRadius: 0,
+        borderLeft: "none",
+        borderRight: "none",
+        borderTop: "none",
+        borderBottom: "none"
+      } : void 0
     }
   );
 }
@@ -65429,7 +65442,6 @@ function useReport(reportIdArg, options = {}) {
     () => stableSerializeForQueryKey(effectiveReportBuilderState),
     [effectiveReportBuilderState]
   );
-  const createdBootstrapStateMatchesEffectiveState = isCreatedReportBootstrapLoad && stableSerializeForQueryKey(initialReportBuilderStateForLoad) === effectiveReportBuilderStateHash;
   const prevPaginationResetStateHashRef = useRef24(null);
   useEffect31(() => {
     const prevHash = prevPaginationResetStateHashRef.current;
@@ -65563,7 +65575,7 @@ function useReport(reportIdArg, options = {}) {
         rowCountOnly: true
       });
     }),
-    enabled: createdBootstrapStateMatchesEffectiveState && Boolean(client) && !reportOverride,
+    enabled: isCreatedReportBootstrapLoad && Boolean(client) && !reportOverride,
     retry: false
   });
   useEffect31(() => {
@@ -65573,13 +65585,15 @@ function useReport(reportIdArg, options = {}) {
     setSourceReport(report);
   }, [effectiveReportId, tableRefreshQuery.data, tableRefreshQueryEnabled]);
   useEffect31(() => {
-    if (!createdBootstrapStateMatchesEffectiveState) return;
     const countReport = createdBootstrapRowCountQuery.data?.report;
     if (createdBootstrapRowCountQuery.data?.error || !countReport) return;
     setSourceReport((currentReport) => {
       if (!currentReport || currentReport.id !== effectiveReportId) {
         return currentReport;
       }
+      if (stableSerializeForQueryKey(currentReport.reportBuilderState) !== stableSerializeForQueryKey(countReport.reportBuilderState)) {
+        return currentReport;
+      }
       if (currentReport.rowCount === countReport.rowCount) {
         return currentReport;
       }
@@ -65587,7 +65601,6 @@ function useReport(reportIdArg, options = {}) {
     });
   }, [
     createdBootstrapRowCountQuery.data,
-    createdBootstrapStateMatchesEffectiveState,
     effectiveReportId,
     sourceReport?.id
   ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.16.65",
+  "version": "2.16.67",
   "type": "module",
   "exports": {
     ".": {