Master 3.0.2

@plotly/dash-test-components/src/components/RenderType.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+const RenderType = (props) => {
+    const onClick = () => {
+        props.setProps({n_clicks: (props.n_clicks || 0) + 1})
+    }
+
+    return <div id={props.id}>
+        <span>{props.dashRenderType}</span>
+        <button onClick={onClick}>Test Internal</button>
+    </div>;
+};
+
+RenderType.propTypes = {
+    id: PropTypes.string,
+    dashRenderType: PropTypes.string,
+    n_clicks: PropTypes.number,
+    setProps: PropTypes.func
+};
+
+RenderType.dashRenderType = true;
+export default RenderType;

@plotly/dash-test-components/src/index.js

@@ -7,6 +7,7 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
 import ComponentAsProp from './components/ComponentAsProp';
+import RenderType from './components/RenderType';
 
 import DrawCounter from './components/DrawCounter';
 import AddPropsComponent from "./components/AddPropsComponent";
@@ -32,4 +33,5 @@ export {
     ShapeOrExactKeepOrderComponent,
     ArrayOfExactOrShapeWithNodePropAssignNone,
     ExternalComponent,
+    RenderType
 };

CHANGELOG.md

@@ -2,6 +2,22 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [3.0.2] - 2025-04-01
+
+## Changed
+- [#3113](https://github.com/plotly/dash/pull/3113) Adjusted background polling requests to strip the data from the request, this allows for context to flow as normal. This addresses issue [#3111](https://github.com/plotly/dash/pull/3111)
+- [#3248](https://github.com/plotly/dash/pull/3248) Changes to rendering logic:
+  - if it is first time rendering, render from the parent props
+  - listens only to updates for that single component, no children listening to parents
+  - if parents change a prop with components as props, only the prop changed re-renders, this is then forced on all children regardless of whether or not the props changed
+
+## Fixed
+- [#3251](https://github.com/plotly/dash/pull/3251). Prevented default styles from overriding `className_*` props in `dcc.Upload` component.
+
+## 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`)
+
 ## [3.0.1] - 2025-03-24
 
 ## Fixed

components/dash-core-components/package.json

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

components/dash-core-components/src/fragments/Upload.react.js

@@ -64,6 +64,11 @@ export default class Upload extends Component {
             style_reject,
             style_disabled,
         } = this.props;
+
+        const activeStyle = className_active ? undefined : style_active;
+        const disabledStyle = className_disabled ? undefined : style_disabled;
+        const rejectStyle = className_reject ? undefined : style_reject;
+
         return (
             <LoadingElement id={id}>
                 <Dropzone
@@ -79,9 +84,9 @@ export default class Upload extends Component {
                     rejectClassName={className_reject}
                     disabledClassName={className_disabled}
                     style={style}
-                    activeStyle={style_active}
-                    rejectStyle={style_reject}
-                    disabledStyle={style_disabled}
+                    activeStyle={activeStyle}
+                    rejectStyle={rejectStyle}
+                    disabledStyle={disabledStyle}
                 >
                     {children}
                 </Dropzone>

components/dash-core-components/tests/integration/upload/test_children_accept_any_component.py

@@ -28,10 +28,32 @@ def test_upca001_upload_children_gallery(dash_dcc):
                     "textAlign": "center",
                 },
             ),
+            dcc.Upload(
+                "upload",
+                disabled=True,
+                className_disabled="upload-disabled",
+                id="upload",
+            ),
+            dcc.Upload("upload", disabled=True, id="upload-no-className"),
         ]
     )
     dash_dcc.start_server(app)
     time.sleep(0.5)
     dash_dcc.percy_snapshot("upca001 children gallery")
 
+    first_child = dash_dcc.find_element("#upload").find_element_by_css_selector(
+        ":first-child"
+    )
+    # Check that there is no default style since className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" not in style
+
+    first_child = dash_dcc.find_element(
+        "#upload-no-className"
+    ).find_element_by_css_selector(":first-child")
+
+    # Check that there is default style since no className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" in style
+
     assert dash_dcc.get_logs() == []

dash/_dash_renderer.py

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "2.0.5"
+__version__ = "2.0.6"
 
 _available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
 _available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
@@ -64,7 +64,7 @@ def _set_react_version(v_react, v_reactdom=None):
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/dash-renderer@2.0.5"
+        "external_url": "https://unpkg.com/dash-renderer@2.0.6"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },

dash/dash-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {

dash/dash-renderer/src/actions/callbacks.ts

@@ -360,7 +360,8 @@ function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
         dispatch(
             updateProps({
                 props,
-                itempath: componentPath
+                itempath: componentPath,
+                renderType: 'callback'
             })
         );
         dispatch(notifyObservers({id: component_id, props}));
@@ -440,6 +441,7 @@ function handleServerside(
     const fetchCallback = () => {
         const headers = getCSRFHeader() as any;
         let url = `${urlBase(config)}_dash-update-component`;
+        let newBody = body;
 
         const addArg = (name: string, value: string) => {
             let delim = '?';
@@ -448,11 +450,19 @@ function handleServerside(
             }
             url = `${url}${delim}${name}=${value}`;
         };
-        if (cacheKey) {
-            addArg('cacheKey', cacheKey);
-        }
-        if (job) {
-            addArg('job', job);
+        if (cacheKey || job) {
+            if (cacheKey) addArg('cacheKey', cacheKey);
+            if (job) addArg('job', job);
+
+            // clear inputs as background callback doesnt need inputs, just verify for context
+            const tmpBody = JSON.parse(newBody);
+            for (let i = 0; i < tmpBody.inputs.length; i++) {
+                tmpBody.inputs[i]['value'] = null;
+            }
+            for (let i = 0; i < (tmpBody?.state || []).length; i++) {
+                tmpBody.state[i]['value'] = null;
+            }
+            newBody = JSON.stringify(tmpBody);
         }
 
         if (moreArgs) {
@@ -465,7 +475,7 @@ function handleServerside(
             mergeDeepRight(config.fetch, {
                 method: 'POST',
                 headers,
-                body
+                body: newBody
             })
         );
     };

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -8,8 +8,7 @@
     background: #ffffff;
     display: inline-block;
     /* shadow-1 */
-    box-shadow:
-        0px 6px 16px rgba(80, 103, 132, 0.165),
+    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
         0px 2px 6px rgba(80, 103, 132, 0.12),
         0px 0px 1px rgba(80, 103, 132, 0.32);
 }

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -124,7 +124,7 @@
 }
 
 .dash-be-error__str {
-    background-color: #F5F6FA;
+    background-color: #f5f6fa;
     min-width: 386px;
     width: 100%;
     overflow: auto;
@@ -177,8 +177,7 @@
     background-color: white;
     overflow: auto;
     border-radius: 6px;
-    box-shadow:
-        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+    box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
         0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
         0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
 }

dash/dash-renderer/src/components/error/menu/DebugMenu.css

@@ -25,7 +25,14 @@
     font-size: 14px;
     border-radius: 0px;
     letter-spacing: normal;
+    white-space: nowrap;
     gap: 6px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    outline: none;
+    display: flex;
+    align-items: center;
 }
 
 .dash-debug-menu__popup {
@@ -52,8 +59,7 @@
     align-self: flex-end;
     position: relative;
     /* Shadow/Small */
-    box-shadow:
-        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+    box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
         0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
         0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
 }
@@ -113,30 +119,28 @@
     transition: 0.3s;
     box-sizing: border-box;
     position: fixed;
-    bottom: 8px;
-    right: 8px;
+    bottom: -1px;
+    right: -1px;
     display: flex;
     color: black;
-    flex-direction: column;
+    flex-direction: row;
     font-family: Verdana, sans-serif !important;
     font-size: 14px;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     z-index: 10000;
-    border-radius: 5px;
-    padding: 5px;
+    border-radius: 5px 0 0 0;
+    padding: 15px 0;
     background-color: #f5f6fa;
-    box-shadow:
-        0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
+    box-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
         0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
     border: 1px solid rgba(0, 24, 102, 0.1);
 }
-.dash-debug-menu__outer--closed {
-    height: 60px;
-    width: 60px;
-    bottom: 37px;
-    right: 37px;
-    padding: 0;
+.dash-debug-menu__outer.dash-debug-menu__outer--collapsed {
+    max-width: 50px;
+}
+.dash-debug-menu__outer.dash-debug-menu__outer--expanded {
+    max-width: 682px;
 }
 
 .dash-debug-menu__upgrade-tooltip {
@@ -153,6 +157,22 @@
     z-index: 1200;
 }
 
+.dash-debug-menu__toggle {
+    color: #7f4bc4;
+    transition: 0.3s;
+}
+.dash-debug-menu__toggle--expanded {
+    transform: rotate(180deg);
+}
+.dash-debug-menu__error-indicator {
+    width: 8px;
+    height: 8px;
+    background-color: #DC3E42;
+    border-radius: 100%;
+    position: absolute;
+    right: 3px;
+    top: 13px;
+}
 .dash-debug-menu__status {
     display: flex;
     align-items: center;
@@ -162,7 +182,8 @@
 .dash-debug-menu__content {
     display: flex;
     align-items: stretch;
-    margin: 10px;
+    margin-left: 15px;
+    transition: all 0.5s ease;
 }
 
 .dash-debug-menu__version {
@@ -186,7 +207,6 @@
     justify-content: center;
     align-items: center;
     transition: background-color 0.2s;
-    cursor: pointer;
     font-family: Verdana, sans-serif !important;
     font-weight: bold;
     color: black;
@@ -213,8 +233,7 @@
     right: 29px;
     z-index: 10002;
     cursor: pointer;
-    box-shadow:
-        0px 0px 1px rgba(0, 0, 0, 0.25),
+    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
         0px 1px 3px rgba(162, 177, 198, 0.32);
     border-radius: 32px;
     background-color: white;