Merge pull request #2081 from plotly/master-2.5.0

Master 2.5.0

Author: T4rk1n

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -12,11 +12,8 @@ function getMetadata() {
                 '""', // reserved keywords
                 path.join(__dirname, 'src', 'components')
             ],
-            // To debug `meta-ts.js` using pycharm debugger:
-            //  comment `env` and add `MODULES_PATH=./node_modules`
-            //  in the run config environment variables.
             {
-                env: {MODULES_PATH: path.resolve(__dirname, './node_modules')},
+                env: {MODULES_PATH: path.resolve(__dirname, './node_modules'), ...process.env},
                 cwd: __dirname
             }
         );
@@ -218,6 +215,21 @@ describe('Test Typescript component metadata generation', () => {
                 });
             }
         );
+
+        test(
+            'Nested props to any', () => {
+                expect(
+                    R.path([
+                        'TypeScriptComponent',
+                        'props',
+                        'nested',
+                        'type',
+                        'value',
+                        'nested',
+                        'name'
+                    ], metadata)).toBe('any')
+            }
+        )
     });
 
     describe('Test component comments', () => {
@@ -245,4 +257,9 @@ describe('Test Typescript component metadata generation', () => {
             expect(R.path(['StandardComponent'], metadata)).toBeDefined();
         });
     });
+    describe('Test namespace props', () => {
+        test('Component with picked boolean prop', () => {
+            expect(R.path(['WrappedHTML', "props", "autoFocus", "type", "name"], metadata)).toBe("bool");
+        })
+    })
 });

@plotly/dash-generator-test-component-typescript/src/components/WrappedHTML.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {WrappedHTMLProps} from '../props';
+
+/**
+ * Component docstring
+ */
+const WrappedHTML = (props: WrappedHTMLProps) => {
+    return null;
+};
+
+export default WrappedHTML;

@plotly/dash-generator-test-component-typescript/src/index.ts

@@ -2,10 +2,12 @@ import TypeScriptComponent from './components/TypeScriptComponent';
 import TypeScriptClassComponent from './components/TypeScriptClassComponent';
 import MemoTypeScriptComponent from './components/MemoTypeScriptComponent';
 import StandardComponent from './components/StandardComponent.react';
+import WrappedHTML from './components/WrappedHTML';
 
 export {
     TypeScriptComponent,
     TypeScriptClassComponent,
     MemoTypeScriptComponent,
-    StandardComponent
+    StandardComponent,
+    WrappedHTML,
 };

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -1,6 +1,11 @@
 // 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 Nested = {
+    nested: Nested;
+}
+
 export type TypescriptComponentProps = {
     children?: React.ReactNode;
     id?: string;
@@ -35,4 +40,11 @@ export type TypescriptComponentProps = {
     setProps?: (props: Record<string, any>) => void;
     className?: string;
     style?: any;
+
+    nested?: Nested;
 };
+
+export type WrappedHTMLProps = {
+    children?: React.ReactNode;
+    id?: string;
+} & Pick<React.ButtonHTMLAttributes<any>, 'autoFocus'>

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ComponentAsProp = (props) => {
+    const { element, id, shapeEl, list_of_shapes } = props;
+    return (
+        <div id={id}>
+            {shapeEl && shapeEl.header}
+            {element}
+            {shapeEl && shapeEl.footer}
+            {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+        </div>
+    )
+}
+
+ComponentAsProp.propTypes = {
+    id: PropTypes.string,
+    element: PropTypes.node,
+
+    shapeEl: PropTypes.shape({
+        header: PropTypes.node,
+        footer: PropTypes.node,
+    }),
+
+    list_of_shapes: PropTypes.arrayOf(
+        PropTypes.exact({
+            label: PropTypes.node,
+            value: PropTypes.number,
+        })
+    )
+}
+
+export default ComponentAsProp;

@plotly/dash-test-components/src/index.js

@@ -6,6 +6,7 @@ import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
+import ComponentAsProp from './components/ComponentAsProp';
 
 export {
     AsyncComponent,
@@ -15,5 +16,6 @@ export {
     MyPersistedComponent,
     MyPersistedComponentNested,
     StyledComponent,
-    WidthComponent
+    WidthComponent,
+    ComponentAsProp,
 };

CHANGELOG.md

@@ -2,6 +2,33 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.5.0] - 2022-06-07
+
+### Added
+
+- [#1947](https://github.com/plotly/dash/pull/1947)  Added `pages` - a better way to build multi-page apps. For more information see the [forum post.](https://community.plotly.com/t/introducing-dash-pages-a-dash-2-x-feature-preview/57775)
+- [#1965](https://github.com/plotly/dash/pull/1965) Add component as props.
+- [#2049](https://github.com/plotly/dash/pull/2043) Added `wait_for_class_to_equal` and `wait_for_contains_class` methods to `dash.testing`
+
+### Changed
+
+- [#2050](https://github.com/plotly/dash/pull/2050) Changed `find_element` and `find_elements` to accept an `attribute` argument that aligns with Selenium's `By` class, allowing you to search elements by other attributes. Default value is `CSS_SELECTOR` to maintain backwards compatibility with previous `find_elements`.
+
+### Fixed
+
+- [#2043](https://github.com/plotly/dash/pull/2043) Fix bug 
+[#2003](https://github.com/plotly/dash/issues/2003) in which 
+`dangerously_allow_html=True` + `mathjax=True` works in some cases, and in some cases not.
+- [#2065](https://github.com/plotly/dash/pull/2065) Fix bug [#2064](https://github.com/plotly/dash/issues/2064) rendering of `dcc.Dropdown` with a value but no options.
+- [#2047](https://github.com/plotly/dash/pull/2047) Fix bug [#1979](https://github.com/plotly/dash/issues/1979) in which `DASH_DEBUG` as environment variable gets ignored.
+- [#2070](https://github.com/plotly/dash/pull/2070) Fix bug [#2066](https://github.com/plotly/dash/issues/2066) nested types triggering maximum call stack error when building typescript components.
+
+## [2.4.1] - 2022-05-11
+
+### Fixed
+
+- Fix [#2045](https://github.com/plotly/dash/issues/2045) import error when using pytest but `dash[testing]` is not installed.
+
 ## [2.4.0] - 2022-05-11
 
 ### Added

components/dash-core-components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

components/dash-core-components/package.json

@@ -104,11 +104,7 @@ Checklist.propTypes = {
                 /**
                  * The option's label
                  */
-                label: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.number,
-                    PropTypes.bool,
-                ]).isRequired,
+                label: PropTypes.node.isRequired,
 
                 /**
                  * The value of the option. This value