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;

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