Merge pull request #3547 from plotly/release/4.0.0rc5

Release `v4.0.0rc5`

Author: KoolADE85

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [4.0.0rc5] - 2025-12-16
+
+## Added
+- New prop in `dcc.Upload` allows users to recursively upload entire folders at once
+
+## Changed
+- Bugfixes for feedback received in `rc4`
+
 ## [4.0.0rc4] - 2025-12-04
 
 ## Added

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

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

components/dash-core-components/package.json

@@ -1,10 +1,6 @@
 .dash-button {
     line-height: 32px;
-    background: color-mix(
-        in srgb,
-        var(--Dash-Fill-Interactive-Strong) 5%,
-        transparent
-    );
+    background: var(--Dash-Fill-Interactive-Weak);
     color: var(--Dash-Fill-Interactive-Strong);
     padding: 0 calc(var(--Dash-Spacing) * 2);
     border-radius: 4px;

components/dash-core-components/src/components/css/button.css

@@ -42,11 +42,7 @@
 }
 
 .dash-datepicker-calendar td.dash-datepicker-calendar-date-highlighted {
-    background-color: color-mix(
-        in srgb,
-        var(--Dash-Fill-Interactive-Strong) 5%,
-        transparent 95%
-    );
+    background-color: var(--Dash-Fill-Interactive-Weak);
     color: var(--Dash-Fill-Interactive-Strong);
 }
 

components/dash-core-components/src/components/css/calendar.css

@@ -384,6 +384,9 @@ const DatePickerRange = ({
                         className="dash-datepicker-content"
                         align="start"
                         sideOffset={5}
+                        collisionBoundary={containerRef.current?.closest(
+                            '#_dash-app-content'
+                        )}
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -203,6 +203,9 @@ const DatePickerSingle = ({
                         className="dash-datepicker-content"
                         align="start"
                         sideOffset={5}
+                        collisionBoundary={containerRef.current?.closest(
+                            '#_dash-app-content'
+                        )}
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();

components/dash-core-components/src/fragments/DatePickerSingle.tsx

@@ -458,6 +458,9 @@ const Dropdown = (props: DropdownProps) => {
                     className="dash-dropdown-content"
                     align="start"
                     sideOffset={5}
+                    collisionBoundary={positioningContainerRef.current?.closest(
+                        '#_dash-app-content'
+                    )}
                     onOpenAutoFocus={e => e.preventDefault()}
                     onKeyDown={handleKeyDown}
                     style={{

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -16,9 +16,7 @@ def test_upfd001_folder_upload_with_enable_folder_selection(dash_dcc):
             html.Div("Folder Upload Test", id="title"),
             dcc.Upload(
                 id="upload-folder",
-                children=html.Div(
-                    ["Drag and Drop or ", html.A("Select Folder")]
-                ),
+                children=html.Div(["Drag and Drop or ", html.A("Select Folder")]),
                 style={
                     "width": "100%",
                     "height": "60px",
@@ -77,7 +75,9 @@ def test_upfd002_multiple_files_without_folder_selection(dash_dcc):
             html.Div("Multiple Files Test", id="title"),
             dcc.Upload(
                 id="upload-multiple",
-                children=html.Div(["Drag and Drop or ", html.A("Select Multiple Files")]),
+                children=html.Div(
+                    ["Drag and Drop or ", html.A("Select Multiple Files")]
+                ),
                 style={
                     "width": "100%",
                     "height": "60px",