asterui 0.12.43 → 0.12.45

package/dist/components/Tour.d.ts

@@ -1,5 +1,17 @@
 import { default as React } from 'react';
 export type TourPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'center';
+export type TourType = 'default' | 'primary';
+export interface TourArrowConfig {
+    pointAtCenter?: boolean;
+}
+export interface TourMaskConfig {
+    style?: React.CSSProperties;
+    color?: string;
+}
+export interface TourButtonProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+}
 export interface TourStepProps {
     /** Target element ref or function returning element */
     target?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null) | null;
@@ -11,14 +23,43 @@ export interface TourStepProps {
     cover?: React.ReactNode;
     /** Placement of popover relative to target */
     placement?: TourPlacement;
+    /** Whether to show arrow (overrides Tour setting) */
+    arrow?: boolean | TourArrowConfig;
+    /** Custom close icon for this step */
+    closeIcon?: React.ReactNode;
+    /** Show mask overlay (overrides Tour setting) */
+    mask?: boolean | TourMaskConfig;
+    /** Type affects styling (overrides Tour setting) */
+    type?: TourType;
+    /** Scroll into view options (overrides Tour setting) */
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+    /** Next button props */
+    nextButtonProps?: TourButtonProps;
+    /** Previous button props */
+    prevButtonProps?: TourButtonProps;
     /** Custom class for this step's popover */
     className?: string;
+    /** Custom style for this step's popover */
+    style?: React.CSSProperties;
     /** Called when this step becomes active */
-    onOpen?: () => void;
-    /** Called when leaving this step */
     onClose?: () => void;
 }
-export interface TourProps {
+export type TourSemanticName = 'root' | 'mask' | 'popover' | 'header' | 'content' | 'footer' | 'indicator' | 'close';
+export interface TourActionInfo {
+    current: number;
+    total: number;
+}
+export interface TourRef {
+    /** Go to a specific step */
+    goTo: (step: number) => void;
+    /** Go to the next step */
+    next: () => void;
+    /** Go to the previous step */
+    prev: () => void;
+    /** Close the tour */
+    close: () => void;
+}
+export interface TourProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Whether tour is visible */
     open?: boolean;
     /** Callback when tour closes */
@@ -31,12 +72,21 @@ export interface TourProps {
     current?: number;
     /** Callback when step changes */
     onChange?: (current: number) => void;
+    /** Whether to show arrow on popover */
+    arrow?: boolean | TourArrowConfig;
+    /** Custom close icon */
+    closeIcon?: React.ReactNode;
     /** Show mask overlay */
-    mask?: boolean;
+    mask?: boolean | TourMaskConfig;
+    /** Disable interaction on highlighted area */
+    disabledInteraction?: boolean;
     /** Type affects styling */
-    type?: 'default' | 'primary';
-    /** Gap between highlight and target [radius, offset] or single number */
-    gap?: number | [number, number];
+    type?: TourType;
+    /** Gap between highlight and target */
+    gap?: {
+        offset?: number | [number, number];
+        radius?: number;
+    };
     /** Text for prev button */
     prevButtonText?: React.ReactNode;
     /** Text for next button */
@@ -54,8 +104,20 @@ export interface TourProps {
     /** Close on escape key */
     closeOnEscape?: boolean;
     /** Scroll target into view */
-    scrollIntoView?: boolean;
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
     /** Z-index for tour overlay */
     zIndex?: number;
+    /** Custom indicator renderer */
+    indicatorsRender?: (current: number, total: number) => React.ReactNode;
+    /** Custom action buttons renderer */
+    actionsRender?: (originNode: React.ReactNode, info: TourActionInfo) => React.ReactNode;
+    /** Rendering container for tour */
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    /** Semantic class names */
+    classNames?: Partial<Record<TourSemanticName, string>>;
+    /** Semantic styles */
+    styles?: Partial<Record<TourSemanticName, React.CSSProperties>>;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
-export declare const Tour: React.FC<TourProps>;
+export declare const Tour: React.ForwardRefExoticComponent<TourProps & React.RefAttributes<TourRef>>;