Merge branch 'v4' into feat/add-folder-upload-support

Author: LeticiaBN

.circleci/config.yml

@@ -5,7 +5,6 @@ orbs:
   percy: percy/[email protected]
   browser-tools: circleci/[email protected]
 
-
 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,6 +2,43 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Added
+- Modernized `dcc.Tabs`
+
+## 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
+
 ## [UNRELEASED]
 
 ## Added

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,14 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    roots: ['<rootDir>/tests'],
+    testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
+    transform: {
+        '^.+\\.ts$': 'ts-jest',
+    },
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+};

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

@@ -0,0 +1,2 @@
+// Jest setup file
+// This file is loaded before every test file