diff --git a/@plotly/dash-generator-test-component-typescript/src/components/TypeScriptComponent.tsx b/@plotly/dash-generator-test-component-typescript/src/components/TypeScriptComponent.tsx
index c885076d66..71eae8d54a 100644
--- a/@plotly/dash-generator-test-component-typescript/src/components/TypeScriptComponent.tsx
+++ b/@plotly/dash-generator-test-component-typescript/src/components/TypeScriptComponent.tsx
@@ -4,20 +4,17 @@ import {TypescriptComponentProps} from '../props';
/**
* Component docstring
*/
-const TypeScriptComponent = (props: TypescriptComponentProps) => {
- const {required_string, id} = props;
- return {required_string}
;
-};
-
-TypeScriptComponent.defaultProps = {
- string_default: 'default',
- number_default: 42,
- bool_default: true,
- null_default: null,
- obj_default: {
- a: 'a',
- b: 3
- }
+const TypeScriptComponent = ({
+ required_string,
+ id,
+ string_default = 'default',
+ number_default = 42,
+ bool_default = true,
+ null_default = null,
+ obj_default = { a: 'a', b: 3 },
+ ...props
+}: TypescriptComponentProps) => {
+ return {required_string}
;
};
export default TypeScriptComponent;
diff --git a/@plotly/dash-generator-test-component-typescript/src/props.ts b/@plotly/dash-generator-test-component-typescript/src/props.ts
index f6f3e05fe8..4b5ce7ca17 100644
--- a/@plotly/dash-generator-test-component-typescript/src/props.ts
+++ b/@plotly/dash-generator-test-component-typescript/src/props.ts
@@ -32,7 +32,7 @@ export type TypescriptComponentProps = {
array_elements?: JSX.Element[];
string_default?: string;
- number_default?: string;
+ number_default?: number;
obj_default?: {a: string; b: number};
bool_default?: boolean;
null_default?: any;
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07aae6781d..3cf2c30abb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,8 @@ This project adheres to [Semantic Versioning](https://semver.org/).
- [#3025](https://github.com/plotly/dash/pull/3025) Fix no output callback with error handler setting the response to NoUpdate and triggering an error.
- [#3034](https://github.com/plotly/dash/pull/3034) Remove whitespace from `metadata.json` files to reduce package size.
- [#3009](https://github.com/plotly/dash/pull/3009) Performance improvement on (pattern-matching) callbacks.
-- [3028](https://github.com/plotly/dash/pull/3028) Fix jupyterlab v4 support.
+- [#3028](https://github.com/plotly/dash/pull/3028) Fix jupyterlab v4 support.
+- [#2926](https://github.com/plotly/dash/pull/2926) Fix components defaultProps with react 18.3.1
- [#3051](https://github.com/plotly/dash/pull/3051) Add missing request data to callback context. Fix [#2235](https://github.com/plotly/dash/issues/2235).
## [2.18.1] - 2024-09-12
diff --git a/components/dash-core-components/.eslintrc b/components/dash-core-components/.eslintrc
index 7d73d3670a..93286a4042 100644
--- a/components/dash-core-components/.eslintrc
+++ b/components/dash-core-components/.eslintrc
@@ -29,6 +29,7 @@
"react",
"import"
],
+ "parser": "@babel/eslint-parser",
"rules": {
"accessor-pairs": ["error"],
"block-scoped-var": ["error"],
@@ -43,7 +44,7 @@
"import/named": ["off"],
"import/namespace": ["off"],
"import/no-duplicates": ["error"],
- "import/no-named-as-default": ["error"],
+ "import/no-named-as-default": ["off"],
"import/no-unresolved": ["off"],
"new-cap": ["error", {
"capIsNewExceptionPattern": "Immutable\\.*"
diff --git a/components/dash-core-components/package-lock.json b/components/dash-core-components/package-lock.json
index 239160447a..5052dc301b 100644
--- a/components/dash-core-components/package-lock.json
+++ b/components/dash-core-components/package-lock.json
@@ -40,6 +40,7 @@
"devDependencies": {
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.8",
+ "@babel/eslint-parser": "^7.25.8",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.25.8",
"@babel/preset-react": "^7.25.7",
@@ -177,6 +178,33 @@
"url": "https://opencollective.com/babel"
}
},
+ "node_modules/@babel/eslint-parser": {
+ "version": "7.25.8",
+ "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz",
+ "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==",
+ "dev": true,
+ "dependencies": {
+ "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+ "eslint-visitor-keys": "^2.1.0",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.11.0",
+ "eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
+ }
+ },
+ "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+ "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+ "dev": true,
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@babel/generator": {
"version": "7.25.7",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
@@ -2115,6 +2143,37 @@
"dev": true,
"optional": true
},
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+ "version": "5.1.1-v1",
+ "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+ "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+ "dev": true,
+ "dependencies": {
+ "eslint-scope": "5.1.1"
+ }
+ },
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/eslint-scope": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+ "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+ "dev": true,
+ "dependencies": {
+ "esrecurse": "^4.3.0",
+ "estraverse": "^4.1.1"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/estraverse": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+ "dev": true,
+ "engines": {
+ "node": ">=4.0"
+ }
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10255,6 +10314,25 @@
"semver": "^6.3.1"
}
},
+ "@babel/eslint-parser": {
+ "version": "7.25.8",
+ "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz",
+ "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==",
+ "dev": true,
+ "requires": {
+ "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+ "eslint-visitor-keys": "^2.1.0",
+ "semver": "^6.3.1"
+ },
+ "dependencies": {
+ "eslint-visitor-keys": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+ "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+ "dev": true
+ }
+ }
+ },
"@babel/generator": {
"version": "7.25.7",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
@@ -11504,6 +11582,33 @@
"dev": true,
"optional": true
},
+ "@nicolo-ribaudo/eslint-scope-5-internals": {
+ "version": "5.1.1-v1",
+ "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+ "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+ "dev": true,
+ "requires": {
+ "eslint-scope": "5.1.1"
+ },
+ "dependencies": {
+ "eslint-scope": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+ "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+ "dev": true,
+ "requires": {
+ "esrecurse": "^4.3.0",
+ "estraverse": "^4.1.1"
+ }
+ },
+ "estraverse": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+ "dev": true
+ }
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json
index 69879c0e6f..1fbedcf1fd 100644
--- a/components/dash-core-components/package.json
+++ b/components/dash-core-components/package.json
@@ -66,6 +66,7 @@
"devDependencies": {
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.8",
+ "@babel/eslint-parser": "^7.25.8",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.25.8",
"@babel/preset-react": "^7.25.7",
diff --git a/components/dash-core-components/src/components/Link.react.js b/components/dash-core-components/src/components/Link.react.js
index 61036dace4..123b844330 100644
--- a/components/dash-core-components/src/components/Link.react.js
+++ b/components/dash-core-components/src/components/Link.react.js
@@ -32,7 +32,7 @@ CustomEvent.prototype = window.Event.prototype;
* For links with destinations outside the current app, `html.A` is a better
* component to use.
*/
-const Link = props => {
+const Link = ({refresh = false, ...props}) => {
const {
className,
style,
@@ -42,7 +42,6 @@ const Link = props => {
children,
title,
target,
- refresh,
setProps,
} = props;
const cleanUrl = window.dash_clientside.clean_url;
@@ -155,7 +154,4 @@ Link.propTypes = {
setProps: PropTypes.func,
};
-Link.defaultProps = {
- refresh: false,
-};
export default Link;
diff --git a/components/dash-core-components/src/components/Loading.react.js b/components/dash-core-components/src/components/Loading.react.js
index 93cb53c8c2..8fdef32970 100644
--- a/components/dash-core-components/src/components/Loading.react.js
+++ b/components/dash-core-components/src/components/Loading.react.js
@@ -22,8 +22,8 @@ const getSpinner = spinnerType =>
const Loading = ({
children,
loading_state,
- display,
- color,
+ display = 'auto',
+ color = '#119DFF',
id,
className,
style,
@@ -32,10 +32,10 @@ const Loading = ({
overlay_style,
fullscreen,
debug,
- show_initially,
+ show_initially = true,
type: spinnerType,
- delay_hide,
- delay_show,
+ delay_hide = 0,
+ delay_show = 0,
target_components,
custom_spinner,
}) => {
@@ -164,15 +164,6 @@ const Loading = ({
Loading._dashprivate_isLoadingComponent = true;
-Loading.defaultProps = {
- type: 'default',
- color: '#119DFF',
- delay_show: 0,
- delay_hide: 0,
- show_initially: true,
- display: 'auto',
-};
-
Loading.propTypes = {
/**
* The ID of this component, used to identify dash components
diff --git a/components/dash-core-components/src/components/Tab.react.js b/components/dash-core-components/src/components/Tab.react.js
index c6e5869650..1985b884c7 100644
--- a/components/dash-core-components/src/components/Tab.react.js
+++ b/components/dash-core-components/src/components/Tab.react.js
@@ -5,7 +5,17 @@ import PropTypes from 'prop-types';
* Part of dcc.Tabs - this is the child Tab component used to render a tabbed page.
* Its children will be set as the content of that tab, which if clicked will become visible.
*/
-const Tab = ({children}) => {children};
+
+/* eslint-disable no-unused-vars */
+const Tab = ({
+ children,
+ disabled = false,
+ disabled_style = {color: '#d6d6d6'},
+}) => {children};
+/* eslint-enable no-unused-vars */
+
+// Default props are defined above for proper docstring generation in React 18.
+// The actual default values are set in Tabs.react.js.
Tab.propTypes = {
/**
@@ -84,11 +94,4 @@ Tab.propTypes = {
}),
};
-Tab.defaultProps = {
- disabled: false,
- disabled_style: {
- color: '#d6d6d6',
- },
-};
-
export default Tab;
diff --git a/components/dash-core-components/src/components/Tabs.react.js b/components/dash-core-components/src/components/Tabs.react.js
index 56f9451382..0857ed1c12 100644
--- a/components/dash-core-components/src/components/Tabs.react.js
+++ b/components/dash-core-components/src/components/Tabs.react.js
@@ -19,8 +19,8 @@ const EnhancedTab = ({
selected_style,
selectHandler,
value,
- disabled,
- disabled_style,
+ disabled = false,
+ disabled_style = {color: '#d6d6d6'},
disabled_className,
mobile_breakpoint,
amountOfTabs,
diff --git a/components/dash-core-components/src/components/Tooltip.react.js b/components/dash-core-components/src/components/Tooltip.react.js
index 72852388fb..1d2fcb7b0c 100644
--- a/components/dash-core-components/src/components/Tooltip.react.js
+++ b/components/dash-core-components/src/components/Tooltip.react.js
@@ -6,25 +6,35 @@ import _JSXStyle from 'styled-jsx/style'; // eslint-disable-line no-unused-vars
/**
* A tooltip with an absolute position.
*/
-const Tooltip = props => {
- const {bbox, border_color, background_color, id, loading_state} = props;
+const Tooltip = ({
+ show = true,
+ targetable = false,
+ direction = 'right',
+ border_color = '#d6d6d6',
+ background_color = 'white',
+ className = '',
+ zindex = 1,
+ loading_text = 'Loading...',
+ ...props
+}) => {
+ const {bbox, id, loading_state} = props;
const is_loading = loading_state?.is_loading;
- const show = props.show && bbox;
+ const show_tooltip = show && bbox;
return (
<>
{is_loading ? (
- {props.loading_text}
+ {loading_text}
) : (
props.children
)}
@@ -38,8 +48,8 @@ const Tooltip = props => {
left: ${bbox?.x0 || 0}px;
width: ${bbox?.x1 - bbox?.x0 || 0}px;
height: ${bbox?.y1 - bbox?.y0 || 0}px;
- display: ${show ? 'inline-block' : 'none'};
- pointer-events: ${props.targetable ? 'auto' : 'none'};
+ display: ${show_tooltip ? 'inline-block' : 'none'};
+ pointer-events: ${targetable ? 'auto' : 'none'};
}
.hover {
position: absolute;
@@ -70,7 +80,7 @@ const Tooltip = props => {
padding: 5px 10px;
background: ${background_color};
white-space: nowrap;
- z-index: ${props.zindex};
+ z-index: ${zindex};
pointer-events: none;
}
.hover .hover-content,
@@ -95,7 +105,7 @@ const Tooltip = props => {
position: absolute;
border-style: solid;
top: -6px;
- z-index: ${props.zindex};
+ z-index: ${zindex};
}
.hover:before,
.hover:after,
@@ -167,17 +177,6 @@ const Tooltip = props => {
);
};
-Tooltip.defaultProps = {
- show: true,
- targetable: false,
- direction: 'right',
- border_color: '#d6d6d6',
- background_color: 'white',
- className: '',
- zindex: 1,
- loading_text: 'Loading...',
-};
-
Tooltip.propTypes = {
/**
* The contents of the tooltip
diff --git a/components/dash-html-components/.eslintrc b/components/dash-html-components/.eslintrc
index d330fc4ebf..5860fdb8d9 100644
--- a/components/dash-html-components/.eslintrc
+++ b/components/dash-html-components/.eslintrc
@@ -29,6 +29,7 @@
"globals": {
"jest": true
},
+ "parser": "@babel/eslint-parser",
"plugins": [
"react",
"import"
@@ -45,7 +46,7 @@
"guard-for-in": ["off"],
"import/named": ["off"],
"import/no-duplicates": ["error"],
- "import/no-named-as-default": ["error"],
+ "import/no-named-as-default": ["off"],
"new-cap": ["error"],
"no-alert": [1],
"no-caller": ["error"],
@@ -111,7 +112,7 @@
}],
"no-unused-vars": ["error", {
"args": "after-used",
- "argsIgnorePattern": "^_",
+ "argsIgnorePattern": "(^_|n_clicks_timestamp)",
"caughtErrorsIgnorePattern": "^e$"
}],
"no-magic-numbers": ["error", {
diff --git a/components/dash-html-components/package-lock.json b/components/dash-html-components/package-lock.json
index d5a018d51b..b9ba5cfcc2 100644
--- a/components/dash-html-components/package-lock.json
+++ b/components/dash-html-components/package-lock.json
@@ -15,6 +15,7 @@
"devDependencies": {
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.8",
+ "@babel/eslint-parser": "^7.25.8",
"@babel/preset-env": "^7.25.8",
"@babel/preset-react": "^7.25.7",
"babel-loader": "^9.2.1",
@@ -143,6 +144,33 @@
"url": "https://opencollective.com/babel"
}
},
+ "node_modules/@babel/eslint-parser": {
+ "version": "7.25.8",
+ "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz",
+ "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==",
+ "dev": true,
+ "dependencies": {
+ "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+ "eslint-visitor-keys": "^2.1.0",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.11.0",
+ "eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
+ }
+ },
+ "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+ "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+ "dev": true,
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@babel/generator": {
"version": "7.25.7",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
@@ -2023,6 +2051,37 @@
"dev": true,
"optional": true
},
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+ "version": "5.1.1-v1",
+ "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+ "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+ "dev": true,
+ "dependencies": {
+ "eslint-scope": "5.1.1"
+ }
+ },
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/eslint-scope": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+ "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+ "dev": true,
+ "dependencies": {
+ "esrecurse": "^4.3.0",
+ "estraverse": "^4.1.1"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
+ "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/estraverse": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+ "dev": true,
+ "engines": {
+ "node": ">=4.0"
+ }
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8469,6 +8528,25 @@
"semver": "^6.3.1"
}
},
+ "@babel/eslint-parser": {
+ "version": "7.25.8",
+ "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz",
+ "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==",
+ "dev": true,
+ "requires": {
+ "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+ "eslint-visitor-keys": "^2.1.0",
+ "semver": "^6.3.1"
+ },
+ "dependencies": {
+ "eslint-visitor-keys": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+ "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+ "dev": true
+ }
+ }
+ },
"@babel/generator": {
"version": "7.25.7",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
@@ -9689,6 +9767,33 @@
"dev": true,
"optional": true
},
+ "@nicolo-ribaudo/eslint-scope-5-internals": {
+ "version": "5.1.1-v1",
+ "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+ "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+ "dev": true,
+ "requires": {
+ "eslint-scope": "5.1.1"
+ },
+ "dependencies": {
+ "eslint-scope": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+ "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+ "dev": true,
+ "requires": {
+ "esrecurse": "^4.3.0",
+ "estraverse": "^4.1.1"
+ }
+ },
+ "estraverse": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+ "dev": true
+ }
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/components/dash-html-components/package.json b/components/dash-html-components/package.json
index 59e08b0b77..9553ae58ac 100644
--- a/components/dash-html-components/package.json
+++ b/components/dash-html-components/package.json
@@ -34,6 +34,7 @@
"devDependencies": {
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.8",
+ "@babel/eslint-parser": "^7.25.8",
"@babel/preset-env": "^7.25.8",
"@babel/preset-react": "^7.25.7",
"babel-loader": "^9.2.1",
diff --git a/components/dash-html-components/scripts/generate-components.js b/components/dash-html-components/scripts/generate-components.js
index ee35109416..72ce51a13e 100644
--- a/components/dash-html-components/scripts/generate-components.js
+++ b/components/dash-html-components/scripts/generate-components.js
@@ -298,7 +298,7 @@ ${customImport}
* For detailed attribute info see:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${element}
*/
-const ${Component} = (props) => {
+const ${Component} = ({n_clicks = 0, n_clicks_timestamp = -1, ...props}) => {
const extraProps = {};
if(props.loading_state && props.loading_state.is_loading) {
extraProps['data-dash-is-loading'] = true;
@@ -310,7 +310,7 @@ ${customCode}
<${element}
{...(!isStatic && {onClick:
() => props.setProps({
- n_clicks: props.n_clicks + 1,
+ n_clicks: n_clicks + 1,
n_clicks_timestamp: Date.now()
})
})}
@@ -322,10 +322,6 @@ ${customCode}
);
};
-${Component}.defaultProps = {
- n_clicks: 0,
- n_clicks_timestamp: -1,
-};
${Component}.propTypes = {${propTypes}
};
diff --git a/dash/_dash_renderer.py b/dash/_dash_renderer.py
index 5eec4af9ad..a84ef66456 100644
--- a/dash/_dash_renderer.py
+++ b/dash/_dash_renderer.py
@@ -2,8 +2,8 @@
__version__ = "1.21.0"
-_available_react_versions = {"16.14.0", "18.2.0"}
-_available_reactdom_versions = {"16.14.0", "18.2.0"}
+_available_react_versions = {"16.14.0", "18.2.0", "18.3.1"}
+_available_reactdom_versions = {"16.14.0", "18.2.0", "18.3.1"}
_js_dist_dependencies = [] # to be set by _set_react_version
diff --git a/dash/extract-meta.js b/dash/extract-meta.js
index 0ed83954bc..17cbb4d7b9 100755
--- a/dash/extract-meta.js
+++ b/dash/extract-meta.js
@@ -727,6 +727,14 @@ function gatherComponents(sources, components = {}) {
let props;
if (propsType) {
+ if (
+ propsType.valueDeclaration &&
+ propsType.valueDeclaration.name &&
+ propsType.valueDeclaration.name.elements &&
+ propsType.valueDeclaration.name.elements.length
+ ) {
+ defaultProps = getDefaultPropsValues(propsType.valueDeclaration.name.elements);
+ }
props = getPropInfo(propsType, defaultProps);
} else {
defaultProps = getDefaultPropsForClassComponent(type, source);