Merge pull request #2926 from AnnMarieW/fix-defaultProps

Update default props

@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 <div id={id}>{required_string}</div>;
-};
-
-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 <div id={id}>{required_string}</div>;
 };
 
 export default TypeScriptComponent;

@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;

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

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\\.*"

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",

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;

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

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}) => <Fragment>{children}</Fragment>;
+
+/* eslint-disable no-unused-vars */
+const Tab = ({
+    children,
+    disabled = false,
+    disabled_style = {color: '#d6d6d6'},
+}) => <Fragment>{children}</Fragment>;
+/* 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;

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,