Merge pull request #506 from snehilvj/dash-3-0

Updates for Dash 3.0

.github/releasing.md

@@ -26,6 +26,10 @@ npm install
 npm run build
 ```
 
+Note: the build has a warning: ! Missing proptypes.js in dash_mantine_components/__init__.py !
+Do not add that yet because it doesn't handle Mantine prop types correctly. 
+
+
 Push updated `package-lock.json`
 
 2. Build source distribution.  
@@ -73,3 +77,7 @@ Anything that’s not a major should be safe to just bump. The ones to pay atten
 - types/ramda - just match ramda
 - style-loader and css-loader - these are used together within the webpack config. IIRC these particular upgrades don’t require any changes to the config for our normal usage, so most likely it’ll just work. If the bundle builds without errors you’re fine, otherwise need to look at the docs for these packages.
 - typescript - even if it's not a major bump, sometimes they tighten up their error checking in minor releases so the bundle fails to build and something about type annotations needs to be updated
+
+Others:
+- "dash-extensions-js": "^0.0.8" is required for the `renderDashComponent` function in Dash 2.  Do not upgrade unless support for dash 2 is dropped or the newer version of dash-extensions is dash 2 compatible
+

CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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 #506 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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dash_mantine_components",
-    "version": "0.15.3",
+    "version": "1.0.0rc1",
     "description": "Plotly Dash Components based on Mantine",
     "main": "index.ts",
     "repository": {

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;