Updates for dash 3

src/ts/components/core/Drawer.tsx

@@ -6,6 +6,7 @@ import {
 } from "props/modal";
 import { StylesApiProps } from "props/styles";
 import React, { useEffect, useState } from "react";
+import { getLoadingState } from "../../utils/dash3";
 
 type DrawerPosition = "bottom" | "left" | "right" | "top";
 
@@ -31,8 +32,8 @@ interface Props extends StylesApiProps, ModalBaseProps, DashBaseProps {
 }
 
 /** Drawer */
-const Drawer = (props: Props) => {
-    const { setProps, loading_state, opened, children, ...others } = props;
+const Drawer = ({ setProps, loading_state, opened = false, children, ...others }: Props) => {
+
     const [open, setOpen] = useState(opened);
 
     useEffect(() => {
@@ -46,9 +47,7 @@ const Drawer = (props: Props) => {
 
     return (
         <MantineDrawer
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             opened={open}
             onClose={onClose}
             {...others}
@@ -58,6 +57,4 @@ const Drawer = (props: Props) => {
     );
 };
 
-Drawer.defaultProps = { opened: false };
-
 export default Drawer;

src/ts/components/core/Skeleton.tsx

@@ -3,6 +3,7 @@ import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
+import { getLoadingStateChildren } from "../../utils/dash3";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Determines whether Skeleton overlay should be displayed, `true` by default */
@@ -22,23 +23,19 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
 }
 
 /** Skeleton */
-const Skeleton = (props: Props) => {
-    const { setProps, visible, loading_state, children, ...others } = props;
+const Skeleton = ({ setProps, visible = true, loading_state, children, ...others }: Props) => {
 
     return (
         <MantineSkeleton
             {...others}
-            visible={visible || (loading_state && loading_state.is_loading)}
+            visible={visible || getLoadingStateChildren(loading_state, children)}
         >
             {children}
         </MantineSkeleton>
     );
 };
 
+// for dash2
 Skeleton._dashprivate_isLoadingComponent = true;
 
-Skeleton.defaultProps = {
-    visible: true,
-};
-
 export default Skeleton;

src/ts/components/core/checkbox/Checkbox.tsx

@@ -8,6 +8,7 @@ import { BoxProps } from "props/box";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import React from "react";
+import { setPersistence, getLoadingState, applyDashProps } from "../../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -49,8 +50,7 @@ interface Props
 }
 
 /** Checkbox */
-const Checkbox = (props: Props) => {
-    const {
+const Checkbox = ({
         setProps,
         loading_state,
         persistence,
@@ -59,30 +59,24 @@ const Checkbox = (props: Props) => {
         icon,
         indeterminateIcon,
         ...others
-    } = props;
+    }: Props) => {
+
 
     const iconFunc = ({ indeterminate, ...others }) => {
         const selected: any = indeterminate ? indeterminateIcon : icon;
-        Object.assign(selected.props._dashprivate_layout.props, others);
-        return selected;
+        return applyDashProps(selected, others);
     };
 
     return (
         <MantineCheckbox
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             onChange={(ev) => setProps({ checked: ev.currentTarget.checked })}
             icon={icon || indeterminateIcon ? iconFunc : undefined}
             {...others}
         />
     );
 };
 
-Checkbox.defaultProps = {
-    persisted_props: ["checked"],
-    persistence_type: "local",
-    checked: false,
-};
+setPersistence(Checkbox, ["checked"] )
 
 export default Checkbox;

src/ts/components/core/input/NumberInput.tsx

@@ -5,6 +5,7 @@ import { DashBaseProps, PersistenceProps, DebounceProps } from "props/dash";
 import { __BaseInputProps } from "props/input";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
+import { setPersistence, getLoadingState } from "../../../utils/dash3";
 
 interface Props
     extends BoxProps,
@@ -61,23 +62,23 @@ interface Props
     autoComplete?: string;
     /** Sets disabled attribute on the input element */
     disabled?: boolean;
-
 }
 
 /** The NumberInput component allows users to input numeric values  */
-const NumberInput = (props: Props) => {
-    const {
-        setProps,
-        persistence,
-        persisted_props,
-        persistence_type,
-        loading_state,
-        value,
-        n_submit,
-        n_blur,
-        debounce,
-        ...others
-    } = props;
+
+const NumberInput = ({
+    setProps,
+    persistence,
+    persisted_props,
+    persistence_type,
+    loading_state,
+    value,
+    n_submit = 0,
+    n_blur = 0,
+    debounce = false,
+    autoComplete = "off",
+    ...others
+}: Props) => {
 
     const [val, setVal] = useState(value);
 
@@ -112,27 +113,17 @@ const NumberInput = (props: Props) => {
 
     return (
         <MantineNumberInput
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={getLoadingState(loading_state) || undefined}
             onChange={setVal}
             value={val}
             onKeyDown={handleKeyDown}
             onBlur={handleBlur}
+            autoComplete={autoComplete}
             {...others}
         />
     );
 };
 
-
-NumberInput.defaultProps = {
-    debounce: false,
-    value: "",
-    persisted_props: ["value"],
-    persistence_type: "local",
-    n_submit: 0,
-    n_blur: 0,
-    autoComplete: "off"
-};
+setPersistence(NumberInput)
 
 export default NumberInput;

src/ts/components/core/stepper/Stepper.tsx

@@ -12,6 +12,7 @@ import { DashBaseProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
 import { omit } from "ramda";
 import React, { useState } from "react";
+import { getChildLayout, getLoadingState } from "../../../utils/dash3";
 
 interface Props extends BoxProps, DashBaseProps, StylesApiProps {
     /** Index of the active step */
@@ -47,8 +48,7 @@ interface Props extends BoxProps, DashBaseProps, StylesApiProps {
 }
 
 /** Stepper */
-const Stepper = (props: Props) => {
-    const { setProps, loading_state, active, children, ...others } = props;
+const Stepper = ({ setProps, loading_state, active, children, ...others }: Props) => {
 
     const [act, setAct] = useState(active);
 
@@ -58,23 +58,21 @@ const Stepper = (props: Props) => {
 
     return (
         <MantineStepper
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
+            data-dash-is-loading={ getLoadingState(loading_state) || undefined
             }
             active={act}
             onStepClick={(a) => setProps({active: a})}
             {...others}
         >
             {React.Children.map(children, (child: any, index) => {
-                const childType = child.props._dashprivate_layout.type;
+                const { type: childType, props: childProps } = getChildLayout(child);
                 if (childType === "StepperCompleted") {
                     return (
                         <MantineStepper.Completed>
                             {child}
                         </MantineStepper.Completed>
                     );
                 } else {
-                    const childProps = child.props._dashprivate_layout.props;
                     const renderedProps = renderDashComponents(
                         omit(["children"], childProps),
                         [
@@ -97,6 +95,4 @@ const Stepper = (props: Props) => {
     );
 };
 
-Stepper.defaultProps = {};
-
 export default Stepper;

src/ts/components/styles/MantineProvider.tsx

@@ -20,6 +20,4 @@ const MantineProvider = (props: Props) => {
     );
 };
 
-MantineProvider.defaultProps = {};
-
 export default MantineProvider;

src/ts/props/dash.ts

@@ -9,7 +9,7 @@ export interface DashBaseProps {
     "aria-*"?: string;
     /** tab-index */
     tabIndex?: number;
-    /**  Object that holds the loading state object coming from dash-renderer  */
+    /**  Object that holds the loading state object coming from dash-renderer. For use with dash<3.  */
     loading_state?: {
         /** Determines if the component is loading or not */
         is_loading: boolean;

src/ts/utils/dash3.ts

@@ -0,0 +1,81 @@
+/**
+ * Utility functions to support both Dash 2 and Dash 3 components
+ *
+ * For more details, refer to the Dash documentation:
+ * Dash 3 for Component Developers - https://dash.plotly.com/dash-3-for-component-developers
+ */
+import React from "react";
+import { DashBaseProps } from "props/dash";
+
+/** check for dash version */
+export const isDash3 = (): boolean => {
+    return !!(window as any).dash_component_api;
+};
+
+/** Apply persistence settings based on React version */
+export const setPersistence = (Component: any, props: string[] = ["value"]): void => {
+    const persistence = { persisted_props: props, persistence_type: "local" };
+
+    if (parseFloat(React.version) < 18.3) {
+        Component.defaultProps = persistence;
+    } else {
+        Component.dashPersistence = persistence;
+    }
+};
+
+/** Get the loading state for the current component */
+export const getLoadingState = (loading_state?: DashBaseProps["loading_state"]): boolean => {
+    return isDash3()
+        ? (window as any).dash_component_api.useDashContext().useLoading()
+        : loading_state?.is_loading ?? false;
+};
+
+/** Get layout information for a child component */
+export const getChildLayout = (child: any): { type: any; props: any } => {
+    if (isDash3()) {
+        return (window as any).dash_component_api.getLayout(child.props.componentPath);
+    }
+
+    return {
+        type: child.props?._dashprivate_layout?.type,
+        props: child.props?._dashprivate_layout?.props,
+    };
+};
+
+/** Get only the props of a child component */
+export const getChildProps = (child: any): any => getChildLayout(child).props;
+
+/** Get the loading state of child components */
+export const getLoadingStateChildren = (
+    loading_state?: DashBaseProps["loading_state"],
+    children?: any
+): boolean => {
+    if (isDash3()) {
+        const ctx = (window as any).dash_component_api.useDashContext();
+        const childArray = React.Children.toArray(children);
+
+        // Get loading states for all children
+        const loadingStates = childArray.map((child: any) =>
+            ctx.useLoading({ rawPath: child.props?.componentPath })
+        );
+
+        return loadingStates.some(Boolean); // Check if any child is loading
+    }
+
+    return loading_state?.is_loading ?? false; // Dash 2 fallback
+};
+
+
+
+/** Apply props to a Dash component, handling Dash 2 & Dash 3 compatibility */
+export const applyDashProps = (component: any, props: Record<string, any>) => {
+    if (isDash3()) {
+        return React.cloneElement(component, { ...props });
+    }
+
+    if (component.props?._dashprivate_layout?.props) {
+        Object.assign(component.props._dashprivate_layout.props, props);
+    }
+
+    return component;
+};