allows for parents to listen to descendent updates

Author: BSd3v

components/dash-core-components/src/components/Tabs.react.js

@@ -439,3 +439,5 @@ Tabs.propTypes = {
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 };
+
+Tabs.childrenLayoutHashes = true

dash/dash-renderer/src/wrapper/selectors.ts

@@ -1,8 +1,37 @@
 import {DashLayoutPath, DashComponent, BaseDashProps} from '../types/component';
-import {getComponentLayout, stringifyPath} from './wrapping';
+import {getComponentLayout, stringifyPath, checkChildrenLayoutHashes} from './wrapping';
+import {pathOr} from 'ramda'
 
 type SelectDashProps = [DashComponent, BaseDashProps, number, object, string];
 
+interface ChangedPropsRecord {
+    hash: number;
+    changedProps: Record<string, any>;
+    renderType: string;
+}
+
+const previousHashes = {}
+
+function determineChangedProps(state: any, strPath: string): ChangedPropsRecord {
+    let combinedHash = 0;
+    let renderType = 'update'; // Default render type, adjust as needed
+    Object.entries(state.layoutHashes).forEach(([updatedPath, pathHash]) => {
+        if (updatedPath.startsWith(strPath)) {
+            const previousHash: any = pathOr({}, [updatedPath], previousHashes);
+            combinedHash += pathOr(0, ['hash'], pathHash)
+            if (previousHash !== pathHash) {
+                previousHash[updatedPath] = pathHash
+            }
+        }
+    });
+
+    return {
+        hash: combinedHash,
+        changedProps: {},
+        renderType
+    };
+}
+
 export const selectDashProps =
     (componentPath: DashLayoutPath) =>
     (state: any): SelectDashProps => {
@@ -12,7 +41,12 @@ export const selectDashProps =
         // Then it can be easily compared without having to compare the props.
         const strPath = stringifyPath(componentPath);
 
-        const hash = state.layoutHashes[strPath];
+        let hash;
+        if (checkChildrenLayoutHashes(c)) {
+            hash = determineChangedProps(state, strPath)
+        } else {
+            hash = state.layoutHashes[strPath];
+        }
         let h = 0;
         let changedProps: object = {};
         let renderType = '';

dash/dash-renderer/src/wrapper/wrapping.ts

@@ -72,3 +72,14 @@ export function checkRenderTypeProp(componentDefinition: any) {
         )
     );
 }
+
+export function checkChildrenLayoutHashes(componentDefinition: any) {
+    return (
+        'childrenLayoutHashes' in
+        pathOr(
+            {},
+            [componentDefinition?.namespace, componentDefinition?.type],
+            window as any
+        )
+    );
+}