Updates for dash 3

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+# 1.0.0rc1
+
+###  Pre-release Highlights
+- This release ensures dash-mantine-components V1 is compatible with both Dash 2 and Dash 3
+- If you were using `dmc >= 0.15.0`, there are no known breaking change.
+- If you were using `dmc < 0.15.0`, please follow our [migration guide]().
+- ⚠️ **Important:** Apps using `dmc < 1.0.0` must pin `dash < 3` to avoid compatibility issues.
+
+### Changed
+- Updated to handle changes in Dash 3 #499 by @AnnMarieW:
+  - Removed `defaultProps` to be compatible with React 18.3
+  - Handled the removal of the `loading_state` prop
+  - Updated to use the new `dash_component_api` 
+
 # 0.15.3
 
 ### Added

requires-dev.txt

@@ -1,4 +1,4 @@
-dash[ci,dev,testing]>=2.0
+dash[ci,dev,testing]>=2
 pyyaml>=5.0
 pytest<8.1.0
 wheel

src/ts/components/charts/AreaChart.tsx

@@ -11,6 +11,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useState, useRef } from "react";
 import { getClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -64,8 +65,19 @@ interface Props
 }
 
 /** AreaChart */
-const AreaChart = (props: Props) => {
-    const { setProps, loading_state, clickData, hoverData, clickSeriesName, hoverSeriesName, series, highlightHover, areaChartProps, activeDotProps, areaProps, ...others } = props;
+const AreaChart = ({
+    setProps,
+    loading_state,
+    clickData,
+    hoverData,
+    clickSeriesName,
+    hoverSeriesName,
+    series,
+    highlightHover = false,
+    areaChartProps,
+    activeDotProps,
+    areaProps,
+    ...others }: Props) => {
 
     const [highlightedArea, setHighlightedArea] = useState(null);
     const shouldHighlight = highlightHover && highlightedArea !== null;
@@ -153,7 +165,7 @@ const AreaChart = (props: Props) => {
 
     return (
       <MantineAreaChart
-        data-dash-is-loading={(loading_state && loading_state.is_loading) || undefined}
+        data-dash-is-loading={getLoadingState(loading_state) || undefined}
         areaChartProps={newProps}
         series={series}
         activeDotProps={{
@@ -168,8 +180,4 @@ const AreaChart = (props: Props) => {
     );
 }
 
-AreaChart.defaultProps = {
-    highlightHover: false,
-};
-
 export default AreaChart;

src/ts/components/charts/BarChart.tsx

@@ -10,6 +10,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useState, useRef } from "react";
 import { getClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -53,11 +54,20 @@ interface Props
     barLabelColor?: MantineColor;
 }
 
+
 /** BarChart */
-const BarChart = (props: Props) => {
-    const {
-        setProps, loading_state, clickData, hoverData, barChartProps, clickSeriesName, hoverSeriesName, barProps,
-        highlightHover, ...others } =  props;
+const BarChart = ({
+    setProps,
+    loading_state,
+    clickData,
+    hoverData,
+    barChartProps,
+    clickSeriesName,
+    hoverSeriesName,
+    barProps,
+    highlightHover = false,
+    ...others
+}: Props) => {
 
     const [highlightedArea, setHighlightedArea] = useState(null);
     const shouldHighlight = highlightHover && highlightedArea !== null;
@@ -129,9 +139,7 @@ const BarChart = (props: Props) => {
 
     return (
         <MantineBarChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             barChartProps={newProps}
             barProps={barPropsFunction}
             {...others}
@@ -141,11 +149,6 @@ const BarChart = (props: Props) => {
 };
 
 
-BarChart.defaultProps = {
-    withBarValueLabel: false,
-    highlightHover: false,
-};
-
 
 
 export default BarChart;

src/ts/components/charts/BubbleChart.tsx

@@ -7,6 +7,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
 import { getScatterClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -68,15 +69,11 @@ const BubbleChart = (props: Props) => {
 
     return (
         <MantineBubbleChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             scatterProps={newProps}
             {...others}
         />
     );
 };
 
-BubbleChart.defaultProps = {};
-
 export default BubbleChart;

src/ts/components/charts/CompositeChart.tsx

@@ -9,6 +9,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useRef, useState } from "react";
 import { getClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -62,10 +63,23 @@ interface Props
     maxBarWidth?: number;
 }
 
+
 /** CompositeChart */
-const CompositeChart = (props: Props) => {
-    const { setProps, loading_state, clickData, hoverData, highlightHover, hoverSeriesName, clickSeriesName, composedChartProps, barProps, lineProps, areaProps, activeDotProps, ...others } =
-        props;
+const CompositeChart = ({
+    setProps,
+    loading_state,
+    clickData,
+    hoverData,
+    highlightHover = false,
+    hoverSeriesName,
+    clickSeriesName,
+    composedChartProps,
+    barProps,
+    lineProps,
+    areaProps,
+    activeDotProps,
+    ...others
+}: Props) => {
 
     const [highlightedArea, setHighlightedArea] = useState(null);
     const shouldHighlight = highlightHover && highlightedArea !== null;
@@ -159,9 +173,7 @@ const CompositeChart = (props: Props) => {
 
     return (
         <MantineCompositeChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             composedChartProps={newProps}
             barProps={(item) => propsFunction(item, 'bar')}   // Pass the chart type as 'bar'
             lineProps={(item) => propsFunction(item, 'line')}  // Pass the chart type as 'line'
@@ -177,10 +189,5 @@ const CompositeChart = (props: Props) => {
     );
 };
 
-CompositeChart.defaultProps = {
-    withPointLabels: false,
-    withBarValueLabel: false,
-    highlightHover: false
-};
 
 export default CompositeChart;

src/ts/components/charts/DonutChart.tsx

@@ -6,6 +6,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 import { getPieClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Data used to render chart */
@@ -15,9 +16,9 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Tooltip animation duration in ms, `0` by default */
     tooltipAnimationDuration?: number;
     /** Props passed down to `Tooltip` recharts component */
-    tooltipProps?: any;
+    tooltipProps?: object;
     /** Props passed down to recharts `Pie` component */
-    pieProps?: any;
+    pieProps?: object;
     /** Controls color of the segments stroke, by default depends on color scheme */
     strokeColor?: MantineColor;
     /** Controls text color of all labels, by default depends on color scheme */
@@ -84,9 +85,7 @@ const DonutChart = (props: Props) => {
 
     return (
         <MantineDonutChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             pieProps={newProps}
             {...others}
         />

src/ts/components/charts/LineChart.tsx

@@ -11,6 +11,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useState, useRef } from "react";
 import { getClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 
 interface Props
@@ -61,8 +62,20 @@ interface Props
 }
 
 /** Mantine-themed line chart built on top of the Recharts library, */
-const LineChart = (props: Props) => {
-    const { setProps, loading_state, clickData, hoverData, clickSeriesName, hoverSeriesName, series, highlightHover, lineChartProps, activeDotProps, lineProps, ...others } = props;
+const LineChart = ({
+    setProps,
+    loading_state,
+    clickData,
+    hoverData,
+    clickSeriesName,
+    hoverSeriesName,
+    series,
+    highlightHover = false,
+    lineChartProps,
+    activeDotProps,
+    lineProps,
+    ...others
+}: Props) => {
 
     const [highlightedArea, setHighlightedArea] = useState(null);
     const shouldHighlight = highlightHover && highlightedArea !== null;
@@ -149,9 +162,7 @@ const LineChart = (props: Props) => {
 
     return (
         <MantineLineChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             lineChartProps={newProps}
             series={series}
             activeDotProps={{
@@ -166,8 +177,5 @@ const LineChart = (props: Props) => {
     );
 };
 
-LineChart.defaultProps = {
-    highlightHover: false,
-};
 
 export default LineChart;

src/ts/components/charts/PieChart.tsx

@@ -6,6 +6,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 import { getPieClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Data used to render chart */
@@ -84,9 +85,7 @@ const PieChart = (props: Props) => {
 
     return (
         <MantinePieChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             pieProps={newProps}
             {...others}
         />

src/ts/components/charts/RadarChart.tsx

@@ -6,6 +6,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
 import { getClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Data used in the chart */
@@ -59,15 +60,11 @@ const RadarChart = (props: Props) => {
 
     return (
         <MantineRadarChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             radarChartProps={newProps}
             {...others}
         />
     );
 };
 
-RadarChart.defaultProps = {};
-
 export default RadarChart;

src/ts/components/charts/ScatterChart.tsx

@@ -6,6 +6,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
 import { getScatterClickData, isEventValid } from "../../utils/charts";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -74,15 +75,12 @@ const ScatterChart = (props: Props) => {
 
     return (
         <MantineScatterChart
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             scatterProps={newProps}
             {...others}
         />
     );
 };
 
-ScatterChart.defaultProps = {};
 
 export default ScatterChart;

src/ts/components/charts/Sparkline.tsx

@@ -8,6 +8,7 @@ import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
+import { getLoadingState } from "../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Data used to render the chart */
@@ -36,14 +37,10 @@ const Sparkline = (props: Props) => {
 
     return (
         <MantineSparkline
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             {...others}
         />
     );
 };
 
-Sparkline.defaultProps = {};
-
 export default Sparkline;