Update default props

Author: AnnMarieW

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,

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 (
         <>
             <div className="dcc-tooltip-bounding-box">
                 <span
                     data-dash-is-loading={is_loading || undefined}
-                    className={`hover hover-${props.direction}`}
+                    className={`hover hover-${direction}`}
                 >
                     <span
                         id={id}
-                        className={`hover-content ${props.className}`}
+                        className={`hover-content ${className}`}
                         style={props.style}
                     >
                         {is_loading ? (
-                            <span>{props.loading_text}</span>
+                            <span>{loading_text}</span>
                         ) : (
                             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

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;
@@ -322,10 +322,6 @@ ${customCode}
     );
 };
 
-${Component}.defaultProps = {
-    n_clicks: 0,
-    n_clicks_timestamp: -1,
-};
 
 ${Component}.propTypes = {${propTypes}
 };