{
return (
{
return (
{
+export default class CellDropdown extends Component {
+ dropdownRef: React.RefObject;
+ constructor(props: IProps) {
+ super(props);
+ this.dropdownRef = createRef();
+ }
render() {
const {clearable, dropdown, onChange, value, disabled} = this.props;
@@ -37,7 +42,7 @@ export default class CellDropdown extends PureComponent {
}
{
onChange(newValue ? newValue.value : newValue);
@@ -71,7 +76,7 @@ export default class CellDropdown extends PureComponent {
return;
}
- const dropdown = this.refs.dropdown as any;
+ const dropdown = this.dropdownRef.current;
if (applyFocus && dropdown && document.activeElement !== dropdown) {
// Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
@@ -83,8 +88,8 @@ export default class CellDropdown extends PureComponent {
}
private handleOpenDropdown = () => {
- const {dropdown}: {[key: string]: any} = this.refs;
-
- dropdownHelper(dropdown.wrapper.querySelector('.Select-menu-outer'));
+ dropdownHelper(
+ this.dropdownRef.current.wrapper.querySelector('.Select-menu-outer')
+ );
};
}
diff --git a/components/dash-table/src/dash-table/components/CellInput/index.tsx b/components/dash-table/src/dash-table/components/CellInput/index.tsx
index 3ac51c6c2a..9ef2b7fe75 100644
--- a/components/dash-table/src/dash-table/components/CellInput/index.tsx
+++ b/components/dash-table/src/dash-table/components/CellInput/index.tsx
@@ -1,6 +1,7 @@
import React, {
ChangeEvent,
ClipboardEvent,
+ createRef,
KeyboardEvent,
MouseEvent,
PureComponent
@@ -25,12 +26,15 @@ interface ICellState {
}
export default class CellInput extends PureComponent {
+ textInputRef: React.RefObject;
constructor(props: ICellProps) {
super(props);
this.state = {
value: props.value
};
+
+ this.textInputRef = createRef();
}
render() {
@@ -46,7 +50,7 @@ export default class CellInput extends PureComponent {
{value}
{
return;
}
- const input = this.refs.textInput as HTMLInputElement;
+ const input = this.textInputRef.current;
if (applyFocus && input && document.activeElement !== input) {
input.focus();
diff --git a/components/dash-table/src/dash-table/components/CellLabel/index.tsx b/components/dash-table/src/dash-table/components/CellLabel/index.tsx
index 9711c70834..16a6bda1b6 100644
--- a/components/dash-table/src/dash-table/components/CellLabel/index.tsx
+++ b/components/dash-table/src/dash-table/components/CellLabel/index.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
interface IProps {
active: boolean;
@@ -8,11 +8,16 @@ interface IProps {
}
export default class CellLabel extends PureComponent {
+ elRef: React.RefObject;
+ constructor(props: IProps) {
+ super(props);
+ this.elRef = createRef();
+ }
render() {
const {className, value} = this.props;
return (
-
+
{typeof value === 'boolean' ? value.toString() : value}
);
@@ -32,7 +37,7 @@ export default class CellLabel extends PureComponent {
return;
}
- const el = this.refs.el as HTMLDivElement;
+ const el = this.elRef.current;
if (applyFocus && el && document.activeElement !== el) {
window.getSelection()?.selectAllChildren(el);
diff --git a/components/dash-table/src/dash-table/components/CellMarkdown/index.tsx b/components/dash-table/src/dash-table/components/CellMarkdown/index.tsx
index c156a457d1..8350f12ea0 100644
--- a/components/dash-table/src/dash-table/components/CellMarkdown/index.tsx
+++ b/components/dash-table/src/dash-table/components/CellMarkdown/index.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
import DOM from 'core/browser/DOM';
import {memoizeOne} from 'core/memoizer';
@@ -19,6 +19,7 @@ export default class CellMarkdown extends PureComponent {
__html: md.render(String(value))
}
}));
+ elRef: React.RefObject;
constructor(props: IProps) {
super(props);
@@ -28,6 +29,7 @@ export default class CellMarkdown extends PureComponent {
this.setState({});
});
}
+ this.elRef = createRef();
}
componentDidUpdate() {
@@ -43,7 +45,7 @@ export default class CellMarkdown extends PureComponent {
return (
@@ -56,7 +58,7 @@ export default class CellMarkdown extends PureComponent {
return;
}
- const el = this.refs.el as any;
+ const el = this.elRef.current;
if (applyFocus && el && document.activeElement !== el) {
// Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
diff --git a/components/dash-table/src/dash-table/components/ControlledTable/fragments/TableTooltip.tsx b/components/dash-table/src/dash-table/components/ControlledTable/fragments/TableTooltip.tsx
index e0d31a1a65..f5b6ea32f3 100644
--- a/components/dash-table/src/dash-table/components/ControlledTable/fragments/TableTooltip.tsx
+++ b/components/dash-table/src/dash-table/components/ControlledTable/fragments/TableTooltip.tsx
@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
+import React, {Component, createRef} from 'react';
import Tooltip, {ITooltipProps, Arrow} from 'dash-table/components/Tooltip';
import {getPositionalParent} from 'dash-table/components/tooltipHelper';
-import ReactDOM from 'react-dom';
+
import {isEqual} from 'core/comparer';
interface IState {
@@ -10,10 +10,16 @@ interface IState {
cell?: any;
}
-export default class TableTooltip extends Component {
+export default class TableTooltip extends Component<
+ Omit,
+ IState
+> {
+ tooltipRef: React.RefObject;
constructor(props: ITooltipProps) {
super(props);
+ this.tooltipRef = createRef();
+
this.state = {
arrow: Arrow.Bottom
};
@@ -40,7 +46,7 @@ export default class TableTooltip extends Component {
return (
@@ -50,7 +56,7 @@ export default class TableTooltip extends Component {
private adjustPosition() {
const {cell} = this.state;
- const el = ReactDOM.findDOMNode(this.refs.tooltip) as any;
+ const el = this.tooltipRef.current;
const positionalParent = getPositionalParent(el);
diff --git a/components/dash-table/src/dash-table/components/ControlledTable/index.tsx b/components/dash-table/src/dash-table/components/ControlledTable/index.tsx
index 4997ab1731..7be2006ba5 100644
--- a/components/dash-table/src/dash-table/components/ControlledTable/index.tsx
+++ b/components/dash-table/src/dash-table/components/ControlledTable/index.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
import * as R from 'ramda';
import Stylesheet from 'core/Stylesheet';
@@ -44,7 +44,25 @@ import reconcile from 'dash-table/type/reconcile';
import PageNavigation from 'dash-table/components/PageNavigation';
-type Refs = {[key: string]: HTMLElement};
+type Refs = {
+ table: React.RefObject;
+ tooltip: React.RefObject;
+ r0c0: React.RefObject;
+ r0c1: React.RefObject;
+ r1c0: React.RefObject;
+ r1c1: React.RefObject;
+ r1: React.RefObject;
+};
+
+const tableRefNames = [
+ 'table',
+ 'tooltip',
+ 'r0c0',
+ 'r0c1',
+ 'r1c0',
+ 'r1c1',
+ 'r1'
+];
const DEFAULT_STYLE = {
width: '100%'
@@ -72,10 +90,19 @@ export default class ControlledTable extends PureComponent
R.mergeAll(this.tableStyle(DEFAULT_STYLE, style))
);
+ tableRefs: Refs;
+
constructor(props: ControlledTableProps) {
super(props);
this.updateStylesheet();
+
+ this.tableRefs = tableRefNames.reduce((acc, name) => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ acc[name] = createRef>();
+ return acc;
+ }, {} as Refs);
}
getLexerResult = memoizeOne(lexer.bind(undefined, queryLexicon));
@@ -101,8 +128,8 @@ export default class ControlledTable extends PureComponent
return;
}
- const {r1c1} = this.refs as Refs;
- const parent: any = r1c1.parentElement;
+ const {r1c1} = this.tableRefs;
+ const parent: any = r1c1.current?.parentElement;
if (
uiViewport &&
@@ -199,24 +226,28 @@ export default class ControlledTable extends PureComponent
return;
}
- const {r1c1} = this.refs as Refs;
- const contentTd = r1c1.querySelector('tr > td:first-of-type');
+ const {r1c1} = this.tableRefs;
+ const contentTd = r1c1.current?.querySelector('tr > td:first-of-type');
if (!contentTd) {
return;
}
- const contentThs = r1c1.querySelectorAll('tr th:first-of-type');
+ const contentThs = r1c1.current?.querySelectorAll(
+ 'tr th:first-of-type'
+ );
- setState({
- uiCell: {
- height: contentTd.clientHeight
- },
- uiHeaders: R.map(
- (th: Element) => ({height: th.clientHeight}),
- Array.from(contentThs)
- )
- });
+ if (contentThs !== undefined) {
+ setState({
+ uiCell: {
+ height: contentTd.clientHeight
+ },
+ uiHeaders: R.map(
+ (th: Element) => ({height: th.clientHeight}),
+ Array.from(contentThs)
+ )
+ });
+ }
}
handleClick = (event: any) => {
@@ -348,24 +379,32 @@ export default class ControlledTable extends PureComponent
getScrollbarWidthOnce = R.once(getScrollbarWidth);
handleResizeIf = memoizeOne((..._: any[]) => {
- const {r0c0, r0c1, r1c0, r1c1} = this.refs as Refs;
+ const {r0c0, r0c1, r1c0, r1c1} = this.tableRefs;
- if (!this.isDisplayed(r1c1)) {
+ if (
+ !r1c1.current ||
+ !r1c1.current ||
+ !r0c0.current ||
+ !r0c1.current ||
+ !r1c0.current ||
+ !this.isDisplayed(r1c1.current)
+ ) {
return;
}
- r0c1.style.marginLeft = '';
- r1c1.style.marginLeft = '';
- r0c0.style.width = '';
- r1c0.style.width = '';
+ r0c1.current.style.marginLeft = '';
+ r1c1.current.style.marginLeft = '';
+ r0c0.current.style.width = '';
+ r1c0.current.style.width = '';
[r0c0, r0c1, r1c0].forEach(rc => {
- const table = rc.querySelector('table');
+ if (!rc.current) return;
+ const table = rc.current.querySelector('table');
if (table) {
table.style.width = '';
}
- this.resetFragmentCells(rc);
+ this.resetFragmentCells(rc.current);
});
this.handleResize();
@@ -374,22 +413,28 @@ export default class ControlledTable extends PureComponent
handleResize = (previousWidth = NaN, cycle = false) => {
const {fixed_columns, fixed_rows, setState} = this.props;
- const {r1, r1c1} = this.refs as Refs;
+ const {r1, r1c1, r0c0, r0c1, r1c0} = this.tableRefs;
- if (!this.isDisplayed(r1c1)) {
+ if (
+ !r1c1.current ||
+ !r1.current ||
+ !r1c1.current ||
+ !r0c0.current ||
+ !r0c1.current ||
+ !r1c0.current ||
+ !this.isDisplayed(r1c1.current)
+ ) {
return;
}
- this.getScrollbarWidthOnce(r1).then((scrollbarWidth: number) =>
+ this.getScrollbarWidthOnce(r1.current).then((scrollbarWidth: number) =>
setState({scrollbarWidth})
);
- const {r0c0, r0c1, r1c0} = this.refs as Refs;
-
- const r0c0Table = r0c0.querySelector('table');
- const r0c1Table = r0c1.querySelector('table');
- const r1c0Table = r1c0.querySelector('table');
- const r1c1Table = r1c1.querySelector('table') as HTMLElement;
+ const r0c0Table = r0c0.current.querySelector('table');
+ const r0c1Table = r0c1.current.querySelector('table');
+ const r1c0Table = r1c0.current.querySelector('table');
+ const r1c1Table = r1c1.current.querySelector('table') as HTMLElement;
const currentTableWidth = getComputedStyle(r1c1Table).width;
@@ -401,45 +446,48 @@ export default class ControlledTable extends PureComponent
if (fixed_columns || fixed_rows) {
const widths = Array.from(
- r1c1.querySelectorAll(
+ r1c1.current.querySelectorAll(
'table.cell-table > tbody > tr:last-of-type > *'
)
).map(c => c.getBoundingClientRect().width);
if (!cycle) {
- this.resizeFragmentCells(r0c0, widths);
- this.resizeFragmentCells(r0c1, widths);
- this.resizeFragmentCells(r1c0, widths);
+ this.resizeFragmentCells(r0c0.current, widths);
+ this.resizeFragmentCells(r0c1.current, widths);
+ this.resizeFragmentCells(r1c0.current, widths);
}
}
if (fixed_columns) {
- const lastFixedTd = r1c1.querySelector(
+ const lastFixedTd = r1c1.current.querySelector(
`tr:first-of-type > *:nth-of-type(${fixed_columns})`
);
if (lastFixedTd) {
const lastFixedTdBounds = lastFixedTd.getBoundingClientRect();
const lastFixedTdRight =
- lastFixedTdBounds.right - r1c1.getBoundingClientRect().left;
+ lastFixedTdBounds.right -
+ r1c1.current?.getBoundingClientRect().left;
// Force first column containers width to match visible portion of table
- r0c0.style.width = `${lastFixedTdRight}px`;
- r1c0.style.width = `${lastFixedTdRight}px`;
+ r0c0.current.style.width = `${lastFixedTdRight}px`;
+ r1c0.current.style.width = `${lastFixedTdRight}px`;
}
}
// Force second column containers width to match visible portion of table
- const firstVisibleTd = r1c1.querySelector(
+ const firstVisibleTd = r1c1.current?.querySelector(
`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`
);
if (firstVisibleTd) {
- const r1c1FragmentBounds = r1c1.getBoundingClientRect();
+ const r1c1FragmentBounds = r1c1.current?.getBoundingClientRect();
const firstTdBounds = firstVisibleTd.getBoundingClientRect();
const width = firstTdBounds.left - r1c1FragmentBounds.left;
- r0c1.style.marginLeft = `-${width + r1.scrollLeft}px`;
- r1c1.style.marginLeft = `-${width}px`;
+ r0c1.current.style.marginLeft = `-${
+ width + r1.current.scrollLeft
+ }px`;
+ r1c1.current.style.marginLeft = `-${width}px`;
}
if (!cycle) {
@@ -746,6 +794,25 @@ export default class ControlledTable extends PureComponent
});
};
+ getColumnRef(rowIndex: number, colIndex: number) {
+ if (rowIndex === 0) {
+ if (colIndex === 0) {
+ return this.tableRefs.r0c0;
+ }
+ if (colIndex === 1) {
+ return this.tableRefs.r0c1;
+ }
+ }
+ if (rowIndex == 1) {
+ if (colIndex === 0) {
+ return this.tableRefs.r1c0;
+ }
+ if (colIndex === 1) {
+ return this.tableRefs.r1c1;
+ }
+ }
+ }
+
getNextCell = (event: any, {restrictToSelection, currentCell}: any) => {
const {selected_cells, viewport, visibleColumns} = this.props;
@@ -858,13 +925,16 @@ export default class ControlledTable extends PureComponent
}
handleDropdown = () => {
- const {r1c1} = this.refs as Refs;
-
- dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
+ const {r1c1} = this.tableRefs;
+ if (r1c1.current) {
+ dropdownHelper(r1c1.current.querySelector('.Select-menu-outer'));
+ }
};
onScroll = (ev: any) => {
- const {r0c0, r0c1} = this.refs as Refs;
+ const {r0c0, r0c1} = this.tableRefs;
+
+ if (!r0c0.current || !r0c1.current) return;
Logger.trace(
`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`
@@ -872,9 +942,9 @@ export default class ControlledTable extends PureComponent
const margin =
parseFloat(ev.target.scrollLeft) +
- (parseFloat(r0c0.style.width) || 0);
+ (parseFloat(r0c0.current.style.width) || 0);
- r0c1.style.marginLeft = `${-margin}px`;
+ r0c1.current.style.marginLeft = `${-margin}px`;
this.updateUiViewport();
this.handleDropdown();
@@ -1000,7 +1070,7 @@ export default class ControlledTable extends PureComponent
>
@@ -1010,14 +1080,18 @@ export default class ControlledTable extends PureComponent
{grid.map((row, rowIndex) => (
@@ -1029,7 +1103,12 @@ export default class ControlledTable extends PureComponent
{g
@@ -1167,16 +1246,16 @@ export default class ControlledTable extends PureComponent
const {id, row, header} = currentTooltip;
- const {table, tooltip: t} = this.refs as {[key: string]: any};
+ const {table, tooltip: t} = this.tableRefs;
- if (t) {
- const cell = table.querySelector(
+ if (t.current && table.current) {
+ const cell = table.current.querySelector(
header
? `tr:nth-of-type(${row + 1}) th${columnSelector(id)}`
: `td[data-dash-row="${row}"]${columnSelector(id)}`
);
- (this.refs.tooltip as TableTooltip).updateBounds(cell);
+ t.current.updateBounds(cell);
}
}
diff --git a/components/dash-table/src/dash-table/components/Tooltip/index.tsx b/components/dash-table/src/dash-table/components/Tooltip/index.tsx
index 6af5c91a53..8bc4446f37 100644
--- a/components/dash-table/src/dash-table/components/Tooltip/index.tsx
+++ b/components/dash-table/src/dash-table/components/Tooltip/index.tsx
@@ -1,5 +1,5 @@
import * as R from 'ramda';
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
import {Remarkable} from 'remarkable';
import {isEqual} from 'core/comparer';
@@ -17,6 +17,7 @@ export enum Arrow {
export interface ITooltipProps {
arrow?: Arrow;
className?: string;
+ divRef: any;
tooltip: {
delay: number;
duration: number;
@@ -32,10 +33,7 @@ interface ITooltipState {
md: Remarkable;
}
-export default class Tooltip extends PureComponent<
- ITooltipProps,
- ITooltipState
-> {
+export default class Tooltip extends Component {
constructor(props: ITooltipProps) {
super(props);
@@ -85,6 +83,7 @@ export default class Tooltip extends PureComponent<
return (
=0.10.0"
@@ -8720,17 +8718,15 @@
}
},
"node_modules/react-dom": {
- "version": "16.14.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
- "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"dependencies": {
"loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "scheduler": "^0.19.1"
+ "scheduler": "^0.23.2"
},
"peerDependencies": {
- "react": "^16.14.0"
+ "react": "^18.3.1"
}
},
"node_modules/react-is": {
@@ -9224,12 +9220,11 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/scheduler": {
- "version": "0.19.1",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
- "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"dependencies": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1"
+ "loose-envify": "^1.1.0"
}
},
"node_modules/schema-utils": {
@@ -17219,13 +17214,11 @@
}
},
"react": {
- "version": "16.14.0",
- "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
- "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2"
+ "loose-envify": "^1.1.0"
}
},
"react-base16-styling": {
@@ -17251,14 +17244,12 @@
}
},
"react-dom": {
- "version": "16.14.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
- "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"requires": {
"loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "scheduler": "^0.19.1"
+ "scheduler": "^0.23.2"
}
},
"react-is": {
@@ -17607,12 +17598,11 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"scheduler": {
- "version": "0.19.1",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
- "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1"
+ "loose-envify": "^1.1.0"
}
},
"schema-utils": {
diff --git a/dash/dash-renderer/package.json b/dash/dash-renderer/package.json
index c4f961c2be..5ba2996bac 100644
--- a/dash/dash-renderer/package.json
+++ b/dash/dash-renderer/package.json
@@ -32,9 +32,9 @@
"node-polyfill-webpack-plugin": "^2.0.1",
"prop-types": "15.8.1",
"ramda": "^0.29.1",
- "react": "16.14.0",
+ "react": "18.3.1",
"react-cytoscapejs": "^2.0.0",
- "react-dom": "16.14.0",
+ "react-dom": "18.3.1",
"react-json-tree": "^0.17.0",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
diff --git a/dash/dash-renderer/src/AppProvider.react.tsx b/dash/dash-renderer/src/AppProvider.react.tsx
index 88438067b0..343789ca43 100644
--- a/dash/dash-renderer/src/AppProvider.react.tsx
+++ b/dash/dash-renderer/src/AppProvider.react.tsx
@@ -5,7 +5,16 @@ import {Provider} from 'react-redux';
import Store from './store';
import AppContainer from './AppContainer.react';
-const AppProvider = ({hooks}: any) => {
+const AppProvider = ({
+ hooks = {
+ layout_pre: null,
+ layout_post: null,
+ request_pre: null,
+ request_post: null,
+ callback_resolved: null,
+ request_refresh_jwt: null
+ }
+}: any) => {
const [{store}] = useState(() => new Store());
return (
@@ -25,15 +34,4 @@ AppProvider.propTypes = {
})
};
-AppProvider.defaultProps = {
- hooks: {
- layout_pre: null,
- layout_post: null,
- request_pre: null,
- request_post: null,
- callback_resolved: null,
- request_refresh_jwt: null
- }
-};
-
export default AppProvider;
diff --git a/dash/development/build_process.py b/dash/development/build_process.py
index 8f534d56e2..be65553716 100644
--- a/dash/development/build_process.py
+++ b/dash/development/build_process.py
@@ -169,7 +169,7 @@ def __init__(self):
"""dash-renderer's path is binding with the dash folder hierarchy."""
extras = [
"18.2.0",
- "18.3.1",
+ "16.14.0",
] # versions to include beyond what's in package.json
super().__init__(
self._concat(os.path.dirname(__file__), os.pardir, "dash-renderer"),
diff --git a/package.json b/package.json
index 94afcd7b5c..cf5f5335a0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"private::format.black": "black dash tests --exclude metadata_test.py",
"private::format.renderer": "cd dash/dash-renderer && npm run format",
"private::format.dcc": "cd components/dash-core-components && npm run format",
+ "private::format.table": "cd components/dash-table && npm run format",
"private::initialize.renderer": "cd dash/dash-renderer && npm ci",
"private::cibuild.components": "python dash/development/update_components.py 'all' --ci True",
"private::build.components": "python dash/development/update_components.py 'all'",
|