@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.3

package/Skeleton/Skeleton.d.ts

@@ -1,16 +1,23 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TypographySemanticType } from '../Typography';
 export interface SkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Whether the skeleton should be circular.
+     */
+    circle?: boolean;
     /**
      * Height of the skeleton.
+     * @default 100%
      */
     height?: number | string;
     /**
-     * Type of the skeleton.
-     * @default 'rectangle'
+     * Typography variant for strip skeleton height calculation.
+     * Only effective when circle and height are not set.
      */
-    type?: 'rectangle' | 'circle';
+    variant?: TypographySemanticType;
     /**
      * Width of the skeleton.
+     * @default 100%
      */
     width?: number | string;
 }

package/Skeleton/Skeleton.js

@@ -7,12 +7,20 @@ import cx from 'clsx';
  * The react component for `mezzanine` Skeleton.
  */
 const Skeleton = forwardRef(function Skeleton(props, ref) {
-    const { className, height: skeletonHeight, style: skeletonStyle, type, width: skeletonWidth, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, type === 'circle' && skeletonClasses.circle, className), style: {
-            width: skeletonWidth,
+    const { circle, className, height: skeletonHeight, style: skeletonStyle, variant, width: skeletonWidth, ...rest } = props;
+    // strip type
+    if (!skeletonHeight && !circle && variant) {
+        return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, skeletonClasses.type(variant), className), style: {
+                width: skeletonWidth,
+                ...skeletonStyle,
+            }, children: jsx("span", { className: skeletonClasses.bg }) }));
+    }
+    // circle / square type
+    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, skeletonClasses.bg, circle && skeletonClasses.circle, className), style: {
             height: skeletonHeight,
+            width: skeletonWidth,
             ...skeletonStyle,
-        }, ...rest }));
+        } }));
 });
 
 export { Skeleton as default };

package/Spin/Spin.d.ts

@@ -0,0 +1,39 @@
+import { IconProps } from '../Icon';
+import { BackdropProps } from '../Backdrop';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { GeneralSize } from '@mezzanine-ui/system/size';
+export interface SpinProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Customize description content
+     */
+    description?: string;
+    /**
+     * Customize description content className
+     */
+    descriptionClassName?: string;
+    /**
+     * Component Size
+     * @default 'main'
+     */
+    size?: GeneralSize;
+    /**
+     * When set stretch=true, host container will stretch to width & height 100%
+     * @default false
+     */
+    stretch?: boolean;
+    /**
+     * Custom icon props
+     */
+    iconProps?: Omit<IconProps, 'icon' | 'spin'>;
+    /**
+     * Whether Spin is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Custom backdrop props (only display when nested children)
+     */
+    backdropProps?: Omit<BackdropProps, 'container' | 'open'>;
+}
+declare const Spin: import("react").ForwardRefExoticComponent<SpinProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Spin;

package/{Loading/Loading.js → Spin/Spin.js}

@@ -1,30 +1,30 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { SpinnerIcon } from '@mezzanine-ui/icons';
-import { iconClasses } from '@mezzanine-ui/core/loading';
+import { iconClasses } from '@mezzanine-ui/core/spin';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Icon from '../Icon/Icon.js';
-import Overlay from '../Overlay/Overlay.js';
+import Backdrop from '../Backdrop/Backdrop.js';
 import cx from 'clsx';
 
-const Loading = forwardRef(function Loading(props, ref) {
+const Spin = forwardRef(function Spin(props, ref) {
     const hostRef = useRef(null);
-    const { children, className, stretch = false, iconProps = {}, loading = false, overlayProps = {}, tip, tipClassName, } = props;
+    const { children, className, description, descriptionClassName, stretch = false, size = 'main', iconProps = {}, loading = false, backdropProps = {}, } = props;
     const { className: iconClassName, color: iconColor, size: iconSize, style: iconStyle, ...iconPropsRest } = iconProps;
     const isNestedPattern = typeof children !== 'undefined';
     const composedHostRef = useComposeRefs([ref, hostRef]);
-    const spinElement = loading ? (jsxs("div", { ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, {
+    const spinElement = loading ? (jsxs("div", { ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, iconClasses.size(size), {
             [iconClasses.stretch]: stretch,
         }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor, icon: SpinnerIcon, spin: true, style: {
                     ...(iconSize ? { fontSize: `${iconSize}px` } : {}),
                     ...(iconStyle || {}),
-                } }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;
+                } }), description ? (jsx("span", { className: cx(iconClasses.description, descriptionClassName), children: description })) : null] })) : null;
     if (isNestedPattern) {
         return (jsxs("div", { ref: composedHostRef, className: cx(iconClasses.host, {
                 [iconClasses.stretch]: stretch,
-            }, className), children: [jsx(Overlay, { ...overlayProps, container: hostRef, onSurface: true, open: loading, children: spinElement }), children] }));
+            }, className), children: [jsx(Backdrop, { ...backdropProps, container: hostRef, open: loading, style: { pointerEvents: 'none' }, variant: "light", children: spinElement }), children] }));
     }
     return spinElement;
 });
 
-export { Loading as default };
+export { Spin as default };

package/Spin/index.d.ts

@@ -0,0 +1,2 @@
+export type { SpinProps } from './Spin';
+export { default } from './Spin';

package/Spin/index.js

@@ -0,0 +1 @@
+export { default } from './Spin.js';

package/Stepper/Step.d.ts

@@ -1,38 +1,4 @@
-import { IconProps } from '../Icon';
-import { TypographyProps } from '../Typography';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
-    /**
-     * Mark the step as active. automatically set by `activeStep` of `Stepper`.
-     */
-    active?: boolean;
-    /**
-     * Mark the step as completed. automatically set by `activeStep` of `Stepper`.
-     */
-    completed?: boolean;
-    /**
-     * Step icon props. effective only when the step is completed.
-     * @default 'icon: CheckIcon'
-     */
-    completedIconProps?: IconProps;
-    /**
-     * Mark the step as disabled. automatically set by `activeStep` of `Stepper`.
-     */
-    disabled?: boolean;
-    /**
-     * Step index. automatically set by the parent <Stepper />.
-     */
-    index?: number;
-    /**
-     * The step label on the right side of the icon, visible if value is not empty.
-     */
-    title?: string;
-    /**
-     * title typography props.
-     * @default 'variant: button2'
-     */
-    titleProps?: Omit<TypographyProps, 'children'>;
-}
+import { StepProps } from './typings';
 /**
  * The react component for `mezzanine` step.
  */

package/Stepper/Step.js

@@ -1,23 +1,56 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { stepClasses } from '@mezzanine-ui/core/stepper';
-import { CheckIcon } from '@mezzanine-ui/icons';
+import { Item0Icon, Item1Icon, Item2Icon, Item3Icon, Item4Icon, Item5Icon, Item6Icon, Item7Icon, Item8Icon, Item9Icon, DangerousFilledIcon, CheckedOutlineIcon } from '@mezzanine-ui/icons';
 import Typography from '../Typography/Typography.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
+const indicatorNumberIconList = [
+    Item0Icon,
+    Item1Icon,
+    Item2Icon,
+    Item3Icon,
+    Item4Icon,
+    Item5Icon,
+    Item6Icon,
+    Item7Icon,
+    Item8Icon,
+    Item9Icon,
+];
+/** icon and indicatorNumber */
+const NumberStatusIndicator = ({ status, error, indicatorNumber, }) => {
+    switch (true) {
+        case status === 'succeeded':
+            return (jsx(Icon, { className: stepClasses.statusIndicator, icon: CheckedOutlineIcon }));
+        case status !== 'processing' && error:
+            return (jsx(Icon, { className: stepClasses.statusIndicator, icon: DangerousFilledIcon }));
+        default:
+            return (jsx(Icon, { className: stepClasses.statusIndicator, icon: indicatorNumberIconList[indicatorNumber % 10] }));
+    }
+};
+const DotStatusIndicator = () => (jsx("span", { className: cx(stepClasses.statusIndicator, stepClasses.statusIndicatorDot) }));
 /**
  * The react component for `mezzanine` step.
  */
 const Step = forwardRef(function Step(props, ref) {
-    const { 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    active, children, className, completed, completedIconProps, disabled, index = -1, title, titleProps, ...rest } = props;
-    /** icon and step number */
-    const iconRender = (jsx(Typography, { className: stepClasses.iconBackground, variant: "button3", children: completed ? (jsx(Icon, { className: stepClasses.completedIcon, icon: CheckIcon, ...completedIconProps })) : (index + 1) }));
-    return (jsxs("div", { className: cx(stepClasses.host, disabled && stepClasses.disabled, className), ref: ref, ...rest, children: [iconRender, 
-            /** title (optional) */
-            title && (jsx(Typography, { className: stepClasses.title, variant: "button2", ...titleProps, children: title })), children] }));
+    const { className, description, index = 0, orientation, status = 'pending', title, type = 'number', error, disabled, ...rest } = props;
+    return (jsxs("div", { className: cx(stepClasses.host, {
+            // status
+            [stepClasses.processing]: status === 'processing',
+            [stepClasses.pending]: status === 'pending',
+            [stepClasses.succeeded]: status === 'succeeded',
+            [stepClasses.error]: status !== 'processing' && error,
+            [stepClasses.disabled]: status !== 'processing' && disabled,
+            // orientation
+            [stepClasses.horizontal]: orientation === 'horizontal',
+            [stepClasses.vertical]: orientation === 'vertical',
+            // type
+            [stepClasses.dot]: type === 'dot',
+            [stepClasses.number]: type === 'number',
+            // interactive
+            [stepClasses.interactive]: rest.onClick && !disabled,
+        }, className), ref: ref, ...rest, children: [type === 'number' && (jsx(NumberStatusIndicator, { status: status, indicatorNumber: index + 1, error: error })), type === 'dot' && jsx(DotStatusIndicator, {}), jsxs("div", { className: stepClasses.textContainer, children: [jsxs(Typography, { className: stepClasses.title, variant: "label-primary-highlight", children: [title, jsx("span", { className: stepClasses.titleConnectLine })] }), description && (jsx(Typography, { className: stepClasses.description, variant: "caption", children: description }))] })] }));
 });
 
 export { Step as default };

package/Stepper/Stepper.d.ts

@@ -1,17 +1,4 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * Set the active step (zero based index) and set other `<Step />` to completed or disabled depending on index.
-     * Set to -1 to disable all the steps.
-     * @default -1
-     */
-    activeStep?: number;
-    /**
-     * Two or more `<Step />` components.
-     */
-    children: ReactNode;
-}
+import { StepperProps } from './typings';
 /**
  * The react component for `mezzanine` stepper.
  */

package/Stepper/Stepper.js

@@ -1,33 +1,67 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, Children, useRef, useCallback, cloneElement, useEffect } from 'react';
 import { stepperClasses } from '@mezzanine-ui/core/stepper';
+import { useStepDistance } from './useStepDistance.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` stepper.
  */
 const Stepper = forwardRef(function Stepper(props, ref) {
-    const { activeStep = -1, children, className, ...rest } = props;
+    const { children, className, currentStep = 0, onStepChange, orientation = 'horizontal', type = 'number', ...rest } = props;
     const childrenArray = Children.toArray(children);
+    const stepperRef = useRef(null);
+    const stepRefs = useRef([]);
+    const mergedRef = useCallback((element) => {
+        stepperRef.current = element;
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else {
+                ref.current = element;
+            }
+        }
+    }, [ref]);
+    const stepPositions = useStepDistance(orientation, stepperRef, stepRefs, type, childrenArray);
+    const getStepStatus = (index, processingIndex) => {
+        if (index === processingIndex)
+            return 'processing';
+        if (index < processingIndex)
+            return 'succeeded';
+        return 'pending';
+    };
     const stepsWithState = childrenArray.map((element, index) => {
+        var _a;
         const step = element;
-        const state = {
-            index,
-            active: activeStep === index,
-            completed: activeStep > index,
-            disabled: activeStep < index,
-        };
-        if (step.props.active || step.props.disabled || step.props.completed) {
-            state.active = false;
-            state.completed = false;
-            state.disabled = false;
-        }
         return cloneElement(step, {
-            ...state,
+            index,
+            orientation,
+            ref: (el) => {
+                stepRefs.current[index] = el;
+            },
+            status: getStepStatus(index, currentStep),
+            style: {
+                '--connect-line-distance': ((_a = stepPositions === null || stepPositions === void 0 ? void 0 : stepPositions.distances) === null || _a === void 0 ? void 0 : _a[index])
+                    ? `${stepPositions.distances[index]}px`
+                    : undefined,
+                ...step.props.style,
+            },
+            type,
             ...step.props,
         });
     });
-    return (jsx("div", { className: cx(stepperClasses.host, className), ref: ref, ...rest, children: stepsWithState }));
+    useEffect(() => {
+        if (typeof onStepChange === 'function') {
+            onStepChange(currentStep);
+        }
+    }, [currentStep, onStepChange]);
+    return (jsx("div", { ...rest, className: cx(stepperClasses.host, {
+            [stepperClasses.horizontal]: orientation === 'horizontal',
+            [stepperClasses.vertical]: orientation === 'vertical',
+            [stepperClasses.dot]: type === 'dot',
+            [stepperClasses.number]: type === 'number',
+        }, className), ref: mergedRef, children: stepsWithState }));
 });
 
 export { Stepper as default };

package/Stepper/index.d.ts

@@ -1,4 +1,5 @@
-export type { StepProps } from './Step';
+export type { StepProps } from './typings';
 export { default as Step } from './Step';
-export type { StepperProps } from './Stepper';
+export type { StepperProps } from './typings';
 export { default } from './Stepper';
+export { useStepper } from './useStepper';

package/Stepper/index.js

@@ -1,2 +1,3 @@
 export { default as Step } from './Step.js';
 export { default } from './Stepper.js';
+export { useStepper } from './useStepper.js';

package/Stepper/typings.d.ts

@@ -0,0 +1,77 @@
+import { ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Three or more `<Step />` components.
+     */
+    children: ReactElement<StepProps> | ReactElement<StepProps>[];
+    /**
+     * Set the processing step index to replace step status.
+     * Index is zero-based (0 = first step, 1 = second step, etc.).
+     * @default 0
+     */
+    currentStep?: number;
+    /**
+     * Callback fired when the step changes.
+     * @param stepIndex The current step index after change.
+     */
+    onStepChange?: (stepIndex: number) => void;
+    /**
+     * The orientation of the stepper.
+     * - 'horizontal': Steps arranged horizontally
+     * - 'vertical': Steps arranged vertically
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The type of step indicator.
+     * - 'dot': Display as dots
+     * - 'number': Display as numbers
+     * @default 'number'
+     */
+    type?: 'dot' | 'number';
+}
+export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title' | 'children'> {
+    /**
+     * The step description, visible if value is not empty.
+     */
+    description?: string;
+    /**
+     * Whether the step is disabled.
+     * Only applies when status is not 'processing'.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is in error state.
+     * Only applies when status is not 'processing'.
+     */
+    error?: boolean;
+    /**
+     * Step index, automatically set by the parent <Stepper />.
+     * Zero-based index (0 = first step, 1 = second step, etc.).
+     */
+    index?: number;
+    /**
+     * The orientation of the step, inherited from parent Stepper.
+     * - 'horizontal': Step arranged horizontally
+     * - 'vertical': Step arranged vertically
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The current status of the step, automatically set by the parent <Stepper />.
+     * - 'processing': Currently active/in progress
+     * - 'pending': Waiting to be processed (default for future steps)
+     * - 'succeeded': Successfully completed
+     */
+    status?: 'processing' | 'pending' | 'succeeded';
+    /**
+     * The step title.
+     */
+    title?: string;
+    /**
+     * The type of step indicator, inherited from parent Stepper.
+     * - 'dot': Display as dot
+     * - 'number': Display as number
+     */
+    type?: 'dot' | 'number';
+}

package/Stepper/useStepDistance.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, RefObject } from 'react';
+export declare const useStepDistance: (orientation: "horizontal" | "vertical", stepperRef: RefObject<HTMLDivElement | null>, stepRefs: RefObject<(HTMLDivElement | null)[]>, type: "dot" | "number", childrenArray: Array<Exclude<ReactNode, boolean | null | undefined>>) => {
+    distances: number[];
+    positions: Array<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+};

package/Stepper/useStepDistance.js

@@ -0,0 +1,81 @@
+import { stepClasses } from '@mezzanine-ui/core/stepper';
+import { useState, useLayoutEffect } from 'react';
+
+const useStepDistance = (orientation, stepperRef, stepRefs, type, childrenArray) => {
+    const [stepPositions, setStepPositions] = useState({ distances: [], positions: [] });
+    // Calculate position and distance between each step
+    useLayoutEffect(() => {
+        const calculatePositions = () => {
+            if (!stepperRef.current || stepRefs.current.length === 0)
+                return;
+            const stepperRect = stepperRef.current.getBoundingClientRect();
+            const positions = [];
+            const distances = [];
+            stepRefs.current.forEach((stepElement) => {
+                if (stepElement) {
+                    const stepRect = stepElement.getBoundingClientRect();
+                    positions.push({
+                        x: stepRect.left - stepperRect.left,
+                        y: stepRect.top - stepperRect.top,
+                        width: stepRect.width,
+                        height: stepRect.height,
+                    });
+                }
+            });
+            // Calculate distance between each pair of adjacent steps
+            for (let i = 0; i < positions.length - 1; i += 1) {
+                const next = positions[i + 1];
+                const currentStepElement = stepRefs.current[i];
+                if (orientation === 'horizontal' && type === 'number') {
+                    // Horizontal number version: from current step title to next step start
+                    const titleElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.titleConnectLine}`);
+                    if (titleElement) {
+                        const titleRect = titleElement.getBoundingClientRect();
+                        const titleEnd = titleRect.right - stepperRect.left;
+                        distances.push(next.x - titleEnd);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+                else if (orientation === 'horizontal' && type === 'dot') {
+                    // Horizontal dot version: calculate x-axis distance from status-indicator
+                    const statusIndicatorElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.statusIndicator}`);
+                    if (statusIndicatorElement) {
+                        const statusIndicatorRect = statusIndicatorElement.getBoundingClientRect();
+                        const statusIndicatorEnd = statusIndicatorRect.right - stepperRect.left;
+                        distances.push(next.x +
+                            next.width / 2 -
+                            statusIndicatorEnd -
+                            statusIndicatorElement.clientWidth / 2);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+                else {
+                    // Vertical orientation: calculate y-axis distance
+                    const statusIndicatorElement = currentStepElement === null || currentStepElement === void 0 ? void 0 : currentStepElement.querySelector(`.${stepClasses.statusIndicator}`);
+                    if (statusIndicatorElement) {
+                        const statusIndicatorRect = statusIndicatorElement.getBoundingClientRect();
+                        const statusIndicatorEnd = statusIndicatorRect.bottom - stepperRect.top;
+                        distances.push(next.y - statusIndicatorEnd);
+                    }
+                    else {
+                        distances.push(0);
+                    }
+                }
+            }
+            setStepPositions({ distances, positions });
+        };
+        calculatePositions();
+        // Add resize listener to recalculate positions on window resize
+        window.addEventListener('resize', calculatePositions);
+        return () => {
+            window.removeEventListener('resize', calculatePositions);
+        };
+    }, [orientation, type, childrenArray.length, stepperRef, stepRefs]);
+    return stepPositions;
+};
+
+export { useStepDistance };

package/Stepper/useStepper.d.ts

@@ -0,0 +1,21 @@
+export interface UseStepperOptions {
+    /**
+     * The default step index to start from.
+     * Index is zero-based (0 = first step, 1 = second step, etc.).
+     * @default 0
+     */
+    defaultStep?: number;
+    /**
+     * Total number of steps in the stepper.
+     * @default Number.MAX_VALUE
+     */
+    totalSteps?: number;
+}
+export declare const useStepper: ({ defaultStep, totalSteps, }: UseStepperOptions) => {
+    currentStep: number;
+    goToStep: (step: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    nextStep: () => void;
+    prevStep: () => void;
+};

package/Stepper/useStepper.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+const useStepper = ({ defaultStep = 0, totalSteps = Number.MAX_VALUE, }) => {
+    const [currentStep, setCurrentStep] = useState(defaultStep);
+    const goToStep = (step) => {
+        setCurrentStep(Math.max(0, Math.min(step, totalSteps - 1)));
+    };
+    const isFirstStep = currentStep === 0;
+    const isLastStep = currentStep === totalSteps - 1;
+    const nextStep = () => {
+        setCurrentStep((prev) => Math.min(prev + 1, totalSteps - 1));
+    };
+    const prevStep = () => {
+        setCurrentStep((prev) => Math.max(prev - 1, 0));
+    };
+    return {
+        currentStep,
+        goToStep,
+        isFirstStep,
+        isLastStep,
+        nextStep,
+        prevStep,
+    };
+};
+
+export { useStepper };

package/Table/Table.js

@@ -15,7 +15,7 @@ import { useTableDraggable } from './draggable/useTableDraggable.js';
 import useTableScroll from './useTableScroll.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { composeRefs } from '../utils/composeRefs.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import cx from 'clsx';
 
 const Table = forwardRef(function Table(props, ref) {
@@ -155,7 +155,7 @@ const Table = forwardRef(function Table(props, ref) {
         }
         return undefined;
     }, [bodyRowClassName]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
+    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Spin, { loading: loading, stretch: true, description: loadingTip, backdropProps: {
                             className: tableClasses.loading,
                         }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll
                                             ? {

package/Table/TableBody.js

@@ -4,7 +4,7 @@ import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { TableDataContext, TableContext } from './TableContext.js';
 import TableBodyRow from './TableBodyRow.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Empty from '../Empty/Empty.js';
 import cx from 'clsx';
 
@@ -25,7 +25,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     const currentDataSource = pagination && !disableAutoSlicing
         ? dataSource.slice(currentStartCount, currentEndCount)
         : dataSource;
-    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? (currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), rowData: rowData, rowIndex: index }, (rowData.key || rowData.id))))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? (currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), rowData: rowData, rowIndex: index }, (rowData.key || rowData.id))))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Spin, { loading: true }) }) })) : null] }));
 });
 
 export { TableBody as default };