Merge branch 'dev' into master-3.0.3

Author: T4rk1n

CHANGELOG.md

@@ -2,6 +2,17 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [3.0.3] - 2025-04-14
+
+## Fixed
+- [#3264](https://github.com/plotly/dash/pull/3264) Fixed an issue where moving components inside of children would not update the `setProps` path, leading to hashes being incorrect
+- [#3265](https://github.com/plotly/dash/pull/3265) Fixed issue where the resize of graphs was cancelling others
+- [#3273](https://github.com/plotly/dash/pull/3273) Fix hooks entry point, renamed from invalid hyphen `dash-hooks` to underscored `dash_hooks`. Fix [#3272](https://github.com/plotly/dash/issues/3272)
+- [#3271](https://github.com/plotly/dash/pull/3271) fix issue with tooltip styling. Fix [#3269](https://github.com/plotly/dash/issues/3269)
+
+## Added
+- [#3268](https://github.com/plotly/dash/pull/3268) Added the ability for component devs to subscribe to descendent updates by setting `dashChildrenUpdate = true` on the component, eg: `Tabs.dashChildrenUpdate = true`
+
 ## [3.0.2] - 2025-04-01
 
 ## Changed
@@ -17,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Added
 - [#3248](https://github.com/plotly/dash/pull/3248) added new `dashRenderType` to determine why the component layout was changed (`internal`, `callback`, `parent`, `clientsideApi`):
     - this can be utilized to keep from rendering components by the component having `dashRenderType` defined as a prop, and the `dashRenderType = true` must be set on the component, eg (`Div.dashRenderType = true`)
+- [#3241](https://github.com/plotly/dash/pull/3241) Added a collapse / expand button to Dash Dev Tools.
 
 ## [3.0.1] - 2025-03-24
 

components/dash-core-components/dash_core_components_base/__init__.py

@@ -13,7 +13,7 @@
     send_string,
 )
 
-__all__ = _components + [
+__all__ = _components + [  # type: ignore[reportUnsupportedDunderAll]
     "send_bytes",
     "send_data_frame",
     "send_file",

components/dash-core-components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

components/dash-core-components/package.json

@@ -121,14 +121,6 @@ const EnhancedTab = ({
     );
 };
 
-EnhancedTab.defaultProps = {
-    loading_state: {
-        is_loading: false,
-        component_name: '',
-        prop_name: '',
-    },
-};
-
 /**
  * A Dash component that lets you render pages with tabs - the Tabs component's children
  * can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold
@@ -439,3 +431,5 @@ Tabs.propTypes = {
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 };
+
+Tabs.dashChildrenUpdate = true;

components/dash-core-components/src/components/Tabs.react.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import _JSXStyle from 'styled-jsx/style'; // eslint-disable-line no-unused-vars
-import LoadingElement from '../utils/LoadingElement';
 
 /**
  * A tooltip with an absolute position.
@@ -27,9 +26,9 @@ const Tooltip = ({
     return (
         <>
             <div className="dcc-tooltip-bounding-box">
-                <LoadingElement
-                    elementType="span"
+                <div
                     className={`hover hover-${direction}`}
+                    data-dash-is-loading={is_loading}
                 >
                     <span
                         id={id}
@@ -42,7 +41,7 @@ const Tooltip = ({
                             props.children
                         )}
                     </span>
-                </LoadingElement>
+                </div>
             </div>
             <style jsx>{`
                 .dcc-tooltip-bounding-box {

components/dash-core-components/src/components/Tooltip.react.js

@@ -4,11 +4,10 @@ import PropTypes from 'prop-types';
 // Debounce 50 ms
 const DELAY = 50;
 
-let resizeTimeout;
-
 const ResizeDetector = props => {
     const {onResize, children, targets} = props;
     const ref = createRef();
+    let resizeTimeout;
 
     const debouncedResizeHandler = useCallback(() => {
         if (resizeTimeout) {

components/dash-core-components/src/utils/ResizeDetector.js

@@ -1,6 +1,7 @@
 import pytest
 
 from dash import Dash, Input, Output, State, dcc, html
+import plotly.graph_objects as go
 
 from dash.exceptions import PreventUpdate
 from dash.testing import wait
@@ -134,3 +135,77 @@ def resize(n_clicks, style):
     )
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grrs002_graph(dash_dcc):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Button("Generate Figures", id="generate-btn", n_clicks=0),
+            html.Button("Get Bounding Box", id="bounding-btn"),
+            html.Div(
+                id="graph-container",
+                children=[
+                    html.Div(id="bounding-output"),
+                    dcc.Graph(
+                        id="prec-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                    dcc.Graph(
+                        id="temp-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                ],
+                style={"display": "none"},
+            ),
+        ]
+    )
+
+    app.clientside_callback(
+        """() => {
+            pcd_container = document.querySelector("#prec-climate-daily")
+            pcd_container_bbox = pcd_container.getBoundingClientRect()
+            pcd_graph = pcd_container.querySelector('.main-svg')
+            pcd_graph_bbox = pcd_graph.getBoundingClientRect()
+            tcd_container = document.querySelector("#temp-climate-daily")
+            tcd_container_bbox = tcd_container.getBoundingClientRect()
+            tcd_graph = tcd_container.querySelector('.main-svg')
+            tcd_graph_bbox = tcd_graph.getBoundingClientRect()
+            return JSON.stringify(
+            pcd_container_bbox.height == pcd_graph_bbox.height &&
+            pcd_container_bbox.width == pcd_graph_bbox.width &&
+            tcd_container_bbox.height == tcd_graph_bbox.height &&
+            tcd_container_bbox.width == tcd_graph_bbox.width
+            )
+        }""",
+        Output("bounding-output", "children"),
+        Input("bounding-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+
+    @app.callback(
+        [
+            Output("prec-climate-daily", "figure"),
+            Output("temp-climate-daily", "figure"),
+            Output("graph-container", "style"),
+            Output("bounding-output", "children", allow_duplicate=True),
+        ],
+        [Input("generate-btn", "n_clicks")],
+        prevent_initial_call=True,
+    )
+    def update_figures(n_clicks):
+        fig_acc = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[0, 1, 0], mode="lines")])
+        fig_daily = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[1, 0, 1], mode="lines")])
+        return fig_acc, fig_daily, {"display": "block"}, "loaded"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#generate-btn", "Generate Figures")
+    dash_dcc.find_element("#generate-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "loaded")
+    dash_dcc.wait_for_element(".dash-graph .js-plotly-plot.dash-graph--pending")
+    dash_dcc.wait_for_element(".dash-graph .js-plotly-plot:not(.dash-graph--pending)")
+    dash_dcc.find_element("#bounding-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "true")

components/dash-core-components/tests/integration/graph/test_graph_responsive.py

@@ -1,3 +1,5 @@
+# type: ignore
+
 import os as _os
 import sys as _sys
 import json

components/dash-table/dash_table_base/__init__.py

@@ -472,25 +472,14 @@ export const propTypes = {
      * View the documentation examples to learn more.
      *
      */
-    fixed_columns: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one column is fixed.
-             */
+    fixed_columns: PropTypes.exact({
+        /**
+         * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
+         */
 
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
+        data: PropTypes.number,
+        headers: PropTypes.bool
+    }),
 
     /**
      * `fixed_rows` will "fix" the set of rows so that
@@ -505,24 +494,14 @@ export const propTypes = {
      * way that your columns are rendered or sized.
      * View the documentation examples to learn more.
      */
-    fixed_rows: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one row is fixed.
-             */
+    fixed_rows: PropTypes.exact({
+        /**
+         * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
+         */
 
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
+        data: PropTypes.number,
+        headers: PropTypes.bool
+    }),
 
     /**
      * If `single`, then the user can select a single column or group