plotly · T4rk1n · Jun 7, 2022 · Feb 24, 2022 · Feb 25, 2022 · Feb 25, 2022
@@ -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");
+        })
+    })
 });
@@ -0,0 +1,11 @@
+import React from 'react';
+import {WrappedHTMLProps} from '../props';
+
+/**
+ * Component docstring
+ */
+const WrappedHTML = (props: WrappedHTMLProps) => {
+    return null;
+};
+
+export default WrappedHTML;
@@ -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,
 };
@@ -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'>
@@ -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;
@@ -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,
 };
@@ -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

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

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

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

@@ -99,11 +99,7 @@ RadioItems.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

@@ -85,7 +85,11 @@ const Dropdown = props => {
     );
 
     useEffect(() => {
-        if (optionsCheck !== sanitizedOptions && !isNil(value)) {
+        if (
+            !isNil(sanitizedOptions) &&
+            optionsCheck !== sanitizedOptions &&
+            !isNil(value)
+        ) {
             const values = sanitizedOptions.map(option => option.value);
             if (multi && Array.isArray(value)) {
                 const invalids = value.filter(v => !values.includes(v));

@@ -108,6 +108,20 @@ export default class DashMarkdown extends Component {
                     )}
                 />
             ),
+            dashMathjax: props => (
+                <Math tex={props.value} inline={props.inline} />
+            ),
+        };
+
+        const regexMath = value => {
+            const newValue = value.replace(
+                /(\${1,2})((?:\\.|[^$])+)\1/g,
+                function (m, tag, src) {
+                    const inline = tag.length === 1 || src.indexOf('\n') === -1;
+                    return `<dashMathjax value='${src}' inline='${inline}'/>`;
+                }
+            );
+            return newValue;
         };
 
         return (
@@ -151,7 +165,11 @@ export default class DashMarkdown extends Component {
                                 props.value
                             ) : (
                                 <JsxParser
-                                    jsx={props.value}
+                                    jsx={
+                                        mathjax
+                                            ? regexMath(props.value)
+                                            : props.value
+                                    }
                                     components={componentTransforms}
                                     renderInWrapper={false}
                                 />

@@ -16,7 +16,7 @@ def select_date_single(self, compid, index=0, day="", outside_month=False):
         outside_month: used in conjunction with day. indicates if the day out
             the scope of current month. default False.
         """
-        date = self.find_element("#{} input".format(compid))
+        date = self.find_element(f"#{compid} input")
         date.click()
 
         def is_month_valid(elem):
@@ -66,11 +66,8 @@ def select_date_range(self, compid, day_range, start_first=True):
             )
             return
 
-        date = self.find_element(
-            '#{} input[aria-label="{} Date"]'.format(
-                compid, "Start" if start_first else "End"
-            )
-        )
+        prefix = "Start" if start_first else "End"
+        date = self.find_element(f'#{compid} input[aria-label="{prefix} Date"]')
         date.click()
         for day in day_range:
             self._wait_until_day_is_clickable()
@@ -85,8 +82,7 @@ def select_date_range(self, compid, day_range, start_first=True):
 
     def get_date_range(self, compid):
         return tuple(
-            _.get_attribute("value")
-            for _ in self.find_elements("#{} input".format(compid))
+            _.get_attribute("value") for _ in self.find_elements(f"#{compid} input")
         )
 
     def _wait_until_day_is_clickable(self, timeout=1):

@@ -67,7 +67,7 @@ def test_cdpr002_updatemodes(dash_dcc):
         ],
     )
     def update_output(start_date, end_date):
-        return "{} - {}".format(start_date, end_date)
+        return f"{start_date} - {end_date}"
 
     dash_dcc.start_server(app=app)
 

@@ -13,9 +13,9 @@
 )
 def test_dldf001_download_dataframe(fmt, dash_dcc):
     df = pd.DataFrame({"a": [1, 2, 3, 4], "b": [2, 1, 5, 6], "c": ["x", "x", "y", "y"]})
-    reader = getattr(pd, "read_{}".format(fmt))  # e.g. read_csv
-    writer = getattr(df, "to_{}".format(fmt))  # e.g. to_csv
-    filename = "df.{}".format(fmt)
+    reader = getattr(pd, f"read_{fmt}")  # e.g. read_csv
+    writer = getattr(df, f"to_{fmt}")  # e.g. to_csv
+    filename = f"df.{fmt}"
     # Create app.
     app = Dash(__name__, prevent_initial_callbacks=True)
     app.layout = html.Div(

@@ -67,3 +67,17 @@ def test_dddo002_array_comma_value(dash_dcc):
     dash_dcc.wait_for_text_to_equal("#react-select-2--value-0", "San Francisco, CA\n ")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_dddo003_value_no_options(dash_dcc):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(value="foobar", id="dropdown"),
+        ]
+    )
+
+    dash_dcc.start_server(app)
+    assert dash_dcc.get_logs() == []
+    dash_dcc.wait_for_element("#dropdown")
@@ -11,7 +11,7 @@ def test_ddsv001_search_value(dash_duo):
         Output("output", "children"), inputs=[Input("dropdown", "search_value")]
     )
     def update_output(search_value):
-        return 'search_value="{}"'.format(search_value)
+        return f'search_value="{search_value}"'
 
     dash_duo.start_server(app)
 

@@ -59,11 +59,11 @@ def test_grrs001_graph(dash_dcc, responsive, autosize, height, width, is_respons
         [
             html.Div(
                 [
-                    "responsive: {}, ".format(responsive),
-                    "autosize: {}, ".format(autosize),
-                    "height: {}, ".format(height),
-                    "width: {}, ".format(width),
-                    "is_responsive: {}".format(is_responsive),
+                    f"responsive: {responsive}, ",
+                    f"autosize: {autosize}, ",
+                    f"height: {height}, ",
+                    f"width: {width}, ",
+                    f"is_responsive: {is_responsive}",
                 ]
             ),
             html.Div(id="card", style=card_style, children=[header, graph]),