Merge pull request #3595 from plotly/v4

Release `v4`

Author: KoolADE85

.circleci/config.yml

@@ -5,7 +5,6 @@ orbs:
   percy: percy/agent@0.1.3
   browser-tools: circleci/browser-tools@1.5.1
 
-
 jobs:
   artifacts:
     docker:
@@ -158,8 +157,8 @@ jobs:
             python -m venv venv && . venv/Scripts/activate
             pip install --no-cache-dir --upgrade -e .[ci,dev] --progress-bar off
       - run:
-           command: |
-             nvm install 18 && nvm use 18
+          command: |
+            nvm install 18 && nvm use 18
       - run:
           name: npm prereqs
           command: |
@@ -318,6 +317,8 @@ jobs:
           command: |
             . venv/bin/activate && rm -rf components/dash-core-components/dash_core_components
             cd components/dash-core-components
+            npm ci
+            npm run test:jest
             TESTFILES=$(circleci tests glob "tests/integration/**/test_*.py" | circleci tests split --split-by=timings)
             pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml --junitprefix="components.dash-core-components" ${TESTFILES}
       - store_artifacts:

.envrc

@@ -0,0 +1,8 @@
+# Check for common virtual environment directories from .gitignore patterns
+# and automatically activate one with direnv, if available.
+for venv_dir in .venv .env venv env .venv* env* ENV; do
+    if [ -d "$venv_dir" ] && [ -f "$venv_dir/bin/activate" ]; then
+        source "$venv_dir/bin/activate"
+        break
+    fi
+done

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -95,6 +95,10 @@ describe('Test Typescript component metadata generation', () => {
             `${componentName} element JSX.Element`,
             testTypeFactory('element', 'node')
         );
+        test(
+            `${componentName} dash_component DashComponent`,
+            testTypeFactory("dash_component", "node"),
+        );
         test(
             `${componentName} boolean type`,
             testTypeFactory('a_bool', 'bool')
@@ -197,6 +201,28 @@ describe('Test Typescript component metadata generation', () => {
             expect(propType.value.value[0].name).toBe('string');
             expect(propType.value.value[1].name).toBe('shape');
         });
+        test('Union of primitives and arrays of primitives', () => {
+            const propType = R.path(
+                propPath('TypeScriptComponent', 'array_primitive_mix').concat(
+                    'type'
+                ),
+                metadata
+            );
+            expect(propType.name).toBe('union');
+            expect(propType.value.length).toBe(4);
+            expect(propType.value[0].name).toBe('string');
+            expect(propType.value[1].name).toBe('number');
+            expect(propType.value[2].name).toBe('bool');
+            expect(propType.value[3].name).toBe('arrayOf');
+
+            // Verify that the array element type is a union of string, number, and boolean
+            const arrayElementType = propType.value[3].value;
+            expect(arrayElementType.name).toBe('union');
+            expect(arrayElementType.value.length).toBe(3);
+            expect(arrayElementType.value[0].name).toBe('string');
+            expect(arrayElementType.value[1].name).toBe('number');
+            expect(arrayElementType.value[2].name).toBe('bool');
+        });
         test('Obj properties', () => {
             const propType = R.path(
                 propPath('TypeScriptComponent', 'obj').concat('type', 'value'),
@@ -289,6 +315,40 @@ describe('Test Typescript component metadata generation', () => {
                 expect(propType.value[1].value).toBe('small');
             }
         )
+
+        test(
+            'union of boolean and literal values', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'boolean_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(3);
+                expect(propType.value[0].name).toBe('bool');
+                expect(propType.value[1].name).toBe('literal');
+                expect(propType.value[2].name).toBe('literal');
+                expect(propType.value[0].value).toBe(undefined);
+                expect(propType.value[1].value).toBe('small');
+                expect(propType.value[2].value).toBe('large');
+            }
+        )
+
+        test(
+            'union of duplicated types', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'duplicated_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(2);
+                expect(propType.value[0].name).toBe('number');
+                expect(propType.value[1].name).toBe('bool');
+            }
+        )
     });
 
     describe('Test component comments', () => {

@plotly/dash-generator-test-component-typescript/src/components/TypeScriptComponent.tsx

@@ -12,6 +12,7 @@ const TypeScriptComponent = ({
   bool_default = true,
   null_default = null,
   obj_default = { a: 'a', b: 3 },
+  array_primitive_mix = 1,
   ...props
 }: TypescriptComponentProps) => {
   return <div id={id}>{required_string}</div>;

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -1,6 +1,12 @@
 // Needs to export types if not in a d.ts file or if any import is present in the d.ts
 import React from 'react';
 
+type DashComponent = {
+    props: string;
+    namespace: string;
+    children?: [];
+}
+
 
 type Nested = {
     nested: Nested;
@@ -29,8 +35,14 @@ export type TypescriptComponentProps = {
     union?: number | string;
     union_shape?: {a: string} | string;
     array_union_shape?: ({a: string} | string)[];
+    array_primitive_mix?:
+        | string
+        | number
+        | (string | number | boolean)[]
+        | boolean;
     element?: JSX.Element;
     array_elements?: JSX.Element[];
+    dash_component?: DashComponent;
 
     string_default?: string;
     number_default?: number;
@@ -48,7 +60,9 @@ export type TypescriptComponentProps = {
     object_of_string?: {[k: string]: string};
     object_of_components?: {[k: string]: JSX.Element};
     ignored_prop?: {ignore: {me: string}};
-    union_enum?: number | 'small' | 'large'
+    union_enum?: number | 'small' | 'large';
+    boolean_enum?: boolean | 'small' | 'large';
+    duplicated_enum?: boolean | number | number;
 };
 
 export type WrappedHTMLProps = {

CHANGELOG.md

@@ -2,7 +2,73 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
-## [UNRELEASED]
+## [4.0.0] - 2026-02-03
+
+## Added
+- Finalize all redesigned dash core components
+- Add a prop to sliders, `allow_direct_input`, that can be used to disable the inputs rendered with sliders.
+- Improve CSS styles in calendar when looking at selected dates outside the current calendar month (`show_outside_days=True`)
+
+## [4.0.0rc6] - 2026-01-07
+
+## Added
+- Restored missing implementation for `with_portal` and `with_full_screen_portal` in datepickers
+
+## Changed
+- Bugfixes for feedback received in `rc5`: notably, popovers are `position: fixed` once again.
+
+## [4.0.0rc5] - 2025-12-16
+
+## Added
+- [#3464](https://github.com/plotly/dash/issues/3464) Add folder upload functionality to `dcc.Upload` component. When `multiple=True`, users can now select and upload entire folders in addition to individual files. The folder hierarchy is preserved in filenames (e.g., `folder/subfolder/file.txt`). Files within folders are filtered according to the `accept` prop. Folder support is available in Chrome, Edge, and Opera; other browsers gracefully fall back to file-only mode. The uploaded files use the same output API as multiple file uploads.
+
+## Changed
+- Bugfixes for feedback received in `rc4`
+
+## [4.0.0rc4] - 2025-12-04
+
+## Added
+- New `dcc.Button` component that mirrors `html.Button` but with default styles applied
+
+## [4.0.0rc3] - 2025-11-27
+- Modernized `dcc.Tabs`
+- Modernized `dcc.DatePickerSingle` and `dcc.DatePickerRange`
+- DatePicker calendars can now accept translations as an external script, either with Dash's `external_scripts` or from the assets folder. See [documentation](https://date-fns.org/v4.1.0/docs/CDN) for the underlying library that supports this.
+
+## Changed
+- `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
+- `dcc.Tab` can accept other Dash Components for its label, in addition to a simple string.
+
+## [4.0.0rc2] - 2025-10-10
+
+## Added
+- [3468](https://github.com/plotly/dash/pull/3468) Modernize dcc.TextArea & dcc.Tooltip
+- [3467](https://github.com/plotly/dash/pull/3467) Modernize dcc.Loading
+- [3453](https://github.com/plotly/dash/pull/3453) Modernize dcc.Checklist & dcc.RadioItems
+
+## Changed
+
+- Various tweaks and bugfixes to issues reported in `4.0.0rc1`
+
+- Dropdown API changes
+    * default value of optionHeight is now 'auto' which supports text wrapping of lengthy text on small screens; you can still specify a numeric pixel height if desired
+    * new `labels` prop to customize strings used within the component
+    * default value for closeOnSelect is now `True` for single-select dropdowns and `False` for multi-select
+
+- Slider API changes
+    * default value of `step` is now only set to `1` if the `min` and `max` props are both integers. Otherwise, it will be dynamically computed according to the available space for the slider
+
+## [4.0.0rc1] - 2025-09-22
+
+## Added
+- [#3440](https://github.com/plotly/dash/pull/3440) Modernize dcc.Dropdown
+
+## [4.0.0rc0] - 2025-09-11
+- [#3398](https://github.com/plotly/dash/pull/3398) Modernize dcc.Input
+- [#3414](https://github.com/plotly/dash/pull/3414) Modernize dcc.Slider
+
+
+## [3.4.0] - 2026-01-19
 
 ## Added
 
@@ -33,7 +99,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3347](https://github.com/plotly/dash/pull/3347) Added 'api_endpoint' to `callback` to expose api endpoints at the provided path for use to be executed directly without dash.
 - [#3445](https://github.com/plotly/dash/pull/3445) Added API to reverse direction of slider component.
 - [#3460](https://github.com/plotly/dash/pull/3460) Add `/health` endpoint for server monitoring and health checks.
-- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
+- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies.
 
 ## Fixed
 - [#3490](https://github.com/plotly/dash/pull/3490) Fix stack overflow when circular callbacks are displayed on the devtool callback 

components/dash-core-components/.eslintrc

@@ -25,6 +25,19 @@
     "jasmine": true,
     "node": true
   },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": [
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "rules": {
+        // You can add TypeScript-specific rules here
+      }
+    }
+  ],
   "plugins": [
     "react",
     "import"

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

@@ -122,6 +122,11 @@
             "namespace": "dash",
             "dynamic": True,
         },
+        {
+            "dev_package_path": "dcc/proptypes.js",
+            "dev_only": True,
+            "namespace": "dash",
+        },
     ]
 )
 

components/dash-core-components/jest.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    roots: ['<rootDir>/tests'],
+    testMatch: ['**/__tests__/**/*.{ts,tsx}', '**/?(*.)+(spec|test).{ts,tsx}'],
+    transform: {
+        '^.+\\.(ts|tsx)$': [
+            'ts-jest',
+            {
+                tsconfig: {
+                    jsx: 'react',
+                    esModuleInterop: true,
+                    allowSyntheticDefaultImports: true,
+                    types: ['jest', '@testing-library/jest-dom'],
+                },
+            },
+        ],
+        '^.+\\.js$': [
+            'ts-jest',
+            {
+                tsconfig: {
+                    allowJs: true,
+                },
+            },
+        ],
+    },
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    // Disable caching to ensure TypeScript type changes are always picked up
+    cache: false,
+    // Limit workers in CI to prevent out-of-memory errors
+    maxWorkers: 2,
+};

components/dash-core-components/jest.setup.js

@@ -0,0 +1,11 @@
+// Jest setup file
+// This file is loaded before every test file
+import '@testing-library/jest-dom';
+
+// Mock window.dash_component_api for components that use Dash context
+global.window = global.window || {};
+global.window.dash_component_api = {
+    useDashContext: () => ({
+        useLoading: () => false,
+    }),
+};