@akinon/ui-tooltip 0.5.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,6 @@
1
+ /**
2
+ * Props for the Tooltip component, excluding specific attributes from AntTooltipProps.
3
+ */
1
4
  export type TooltipProps = Omit<
2
5
  AntTooltipProps,
3
6
  | 'prefixCls'
@@ -13,22 +16,64 @@ export type TooltipProps = Omit<
13
16
  | 'motion'
14
17
  >;
15
18
 
19
+ /**
20
+ * Configuration for overflow adjustments in tooltip placement.
21
+ */
16
22
  interface AdjustOverflow {
23
+ /**
24
+ * Adjust the X position of the tooltip if it overflows.
25
+ */
17
26
  adjustX?: 0 | 1;
27
+
28
+ /**
29
+ * Adjust the Y position of the tooltip if it overflows.
30
+ */
18
31
  adjustY?: 0 | 1;
19
32
  }
20
33
 
34
+ /**
35
+ * Configuration for tooltip placements.
36
+ */
21
37
  interface PlacementsConfig {
38
+ /**
39
+ * The width of the tooltip arrow in pixels.
40
+ */
22
41
  arrowWidth: number;
42
+
43
+ /**
44
+ * Whether the arrow should point at the center of the target element.
45
+ */
23
46
  arrowPointAtCenter?: boolean;
47
+
48
+ /**
49
+ * Whether to adjust the placement automatically when the tooltip overflows.
50
+ */
24
51
  autoAdjustOverflow?: boolean | AdjustOverflow;
52
+
53
+ /**
54
+ * Offset of the tooltip relative to the target element.
55
+ */
25
56
  offset: number;
57
+
58
+ /**
59
+ * The border radius of the tooltip in pixels.
60
+ */
26
61
  borderRadius: number;
62
+
63
+ /**
64
+ * Whether to prioritize visibility when multiple placements are possible.
65
+ */
27
66
  visibleFirst?: boolean;
28
67
  }
29
68
 
69
+ /**
70
+ * Literal union type supporting both predefined and custom string values.
71
+ */
30
72
  type LiteralUnion<T extends string> = T | (string & {});
31
73
 
74
+ /**
75
+ * Function that renders the tooltip content.
76
+ */
32
77
  type RenderFunction = () => React.ReactNode;
33
78
 
34
79
  interface TooltipPropsWithOverlay extends AbstractTooltipProps {
@@ -36,6 +81,7 @@ interface TooltipPropsWithOverlay extends AbstractTooltipProps {
36
81
  * The text shown in the tooltip
37
82
  */
38
83
  title?: React.ReactNode | RenderFunction;
84
+
39
85
  //overlay?: React.ReactNode | RenderFunction;
40
86
  }
41
87
 
@@ -44,6 +90,7 @@ interface TooltipPropsWithTitle extends AbstractTooltipProps {
44
90
  * The text shown in the tooltip
45
91
  */
46
92
  title: React.ReactNode | RenderFunction;
93
+
47
94
  //overlay?: React.ReactNode | RenderFunction;
48
95
  }
49
96
 
@@ -55,6 +102,9 @@ type PurePanelProps = Omit<TooltipProps, 'children'>;
55
102
 
56
103
  declare const PurePanel: React.FC<PurePanelProps>;
57
104
 
105
+ /**
106
+ * Colors available for the tooltip's background.
107
+ */
58
108
  declare const PresetColors: readonly [
59
109
  'blue',
60
110
  'purple',
@@ -71,10 +121,19 @@ declare const PresetColors: readonly [
71
121
  'gold'
72
122
  ];
73
123
 
124
+ /**
125
+ * Key type for predefined tooltip colors.
126
+ */
74
127
  type PresetColorKey = (typeof PresetColors)[number];
75
128
 
129
+ /**
130
+ * Extended color type with inverse options.
131
+ */
76
132
  type InverseColor = `${PresetColorKey}-inverse`;
77
133
 
134
+ /**
135
+ * Available tooltip color types, including inverse options.
136
+ */
78
137
  type PresetColorType = PresetColorKey | InverseColor;
79
138
 
80
139
  export type { AdjustOverflow, PlacementsConfig };
@@ -83,6 +142,9 @@ export interface TooltipRef {
83
142
  forceAlign: VoidFunction;
84
143
  }
85
144
 
145
+ /**
146
+ * Positions where the tooltip can appear relative to the target element.
147
+ */
86
148
  export type TooltipPlacement =
87
149
  | 'top'
88
150
  | 'left'
@@ -97,16 +159,46 @@ export type TooltipPlacement =
97
159
  | 'rightTop'
98
160
  | 'rightBottom';
99
161
 
162
+ /**
163
+ * Configuration options for aligning the tooltip.
164
+ */
100
165
  export interface TooltipAlignConfig {
166
+ /**
167
+ * Points defining the source and target alignment.
168
+ */
101
169
  points?: [string, string];
170
+
171
+ /**
172
+ * Offset values for positioning the tooltip.
173
+ */
102
174
  offset?: [number | string, number | string];
175
+
176
+ /**
177
+ * Offset values for the target element.
178
+ */
103
179
  targetOffset?: [number | string, number | string];
180
+
181
+ /**
182
+ * Overflow adjustment configuration.
183
+ */
104
184
  overflow?: {
105
185
  adjustX: boolean;
106
186
  adjustY: boolean;
107
187
  };
188
+
189
+ /**
190
+ * Whether to use CSS right instead of left for positioning.
191
+ */
108
192
  useCssRight?: boolean;
193
+
194
+ /**
195
+ * Whether to use CSS bottom instead of top for positioning.
196
+ */
109
197
  useCssBottom?: boolean;
198
+
199
+ /**
200
+ * Whether to use CSS transform for positioning if supported.
201
+ */
110
202
  useCssTransform?: boolean;
111
203
  }
112
204
 
@@ -126,63 +218,104 @@ interface LegacyTooltipProps
126
218
  * Whether the floating tooltip card is open or not
127
219
  */
128
220
  open?: RcTooltipProps['visible'];
221
+
129
222
  /**
130
223
  * Whether the floating tooltip card is open by default
131
224
  */
132
225
  defaultOpen?: boolean;
226
+
133
227
  /**
134
228
  * Callback executed when visibility of the tooltip card is changed
135
229
  */
136
230
  onOpenChange?: (open: boolean) => void;
231
+
137
232
  //afterOpenChange?: RcTooltipProps['afterVisibleChange'];
138
233
  }
139
234
 
235
+ /**
236
+ * Abstract properties for the Tooltip component.
237
+ */
140
238
  export interface AbstractTooltipProps extends LegacyTooltipProps {
239
+ /**
240
+ * Inline styles for the tooltip container.
241
+ */
141
242
  style?: React.CSSProperties;
243
+
142
244
  /**
143
245
  * The additional css class
144
246
  */
145
247
  className?: string;
248
+
146
249
  /**
147
250
  * ClassName on the root element
148
251
  */
149
252
  rootClassName?: string;
253
+
150
254
  /**
151
255
  * The background color
152
256
  */
153
257
  color?: string;
258
+
154
259
  /**
155
260
  * The position of the tooltip relative to the target
156
261
  */
157
262
  placement?: TooltipPlacement;
263
+
158
264
  //builtinPlacements?: typeof Placements;
159
265
  //openClassName?: string;
160
266
  /**
161
267
  * Change arrow's visible state and change whether the arrow is pointed at the center of target
162
268
  */
163
269
  arrow?: boolean;
270
+
164
271
  /**
165
272
  * Whether to adjust popup placement automatically when popup is off screen
166
273
  */
167
274
  autoAdjustOverflow?: boolean;
275
+
168
276
  /**
169
277
  * The DOM container of the tip, the default behavior is to create a div element in body
170
278
  */
171
279
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
280
+
281
+ /**
282
+ * The content of the tooltip.
283
+ */
172
284
  children?: React.ReactNode;
285
+
173
286
  /**
174
287
  * Whether destroy tooltip when hidden
175
288
  */
176
289
  destroyTooltipOnHide?: boolean;
177
290
  }
178
291
 
292
+ /**
293
+ * Properties for a tooltip component that supports both a title and an overlay.
294
+ */
179
295
  export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
296
+ /**
297
+ * The main content of the tooltip. Can be a React node or a function that returns one.
298
+ */
180
299
  title?: React.ReactNode | RenderFunction;
300
+
301
+ /**
302
+ * Custom overlay content for the tooltip. Overrides the `title` if provided.
303
+ */
181
304
  overlay?: React.ReactNode | RenderFunction;
182
305
  }
183
306
 
307
+ /**
308
+ * Properties for a tooltip component that requires a title and optionally supports an overlay.
309
+ */
184
310
  export interface TooltipPropsWithTitle extends AbstractTooltipProps {
311
+ /**
312
+ * The required main content of the tooltip. Can be a React node or a function that returns one.
313
+ */
185
314
  title: React.ReactNode | RenderFunction;
315
+
316
+ /**
317
+ * Custom overlay content for the tooltip. Overrides the `title` if provided.
318
+ */
186
319
  overlay?: React.ReactNode | RenderFunction;
187
320
  }
188
321
 
@@ -196,6 +329,9 @@ declare const InternalTooltip: React.ForwardRefExoticComponent<
196
329
 
197
330
  type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
198
331
 
332
+ /**
333
+ * Properties for configuring the core behavior and appearance of a tooltip.
334
+ */
199
335
  interface RcTooltipProps
200
336
  extends Pick<
201
337
  TriggerProps,
@@ -212,48 +348,128 @@ interface RcTooltipProps
212
348
  * Tooltip trigger mode. Could be multiple by passing an array
213
349
  */
214
350
  trigger?: ActionType | ActionType[];
351
+
352
+ /**
353
+ * Whether the tooltip is visible by default.
354
+ */
215
355
  defaultVisible?: boolean;
356
+
357
+ /**
358
+ * Whether the tooltip is currently visible.
359
+ */
216
360
  visible?: boolean;
361
+
362
+ /**
363
+ * The placement of the tooltip relative to its target.
364
+ */
217
365
  placement?: string;
218
- /** Config popup motion */
366
+
367
+ /**
368
+ * Motion configuration for animating the tooltip. Inherits from `popupMotion` in TriggerProps.
369
+ */
219
370
  motion?: TriggerProps['popupMotion'];
371
+
372
+ /**
373
+ * Callback function executed when the tooltip's visibility changes.
374
+ *
375
+ * @param visible - Whether the tooltip is now visible.
376
+ */
220
377
  onVisibleChange?: (visible: boolean) => void;
378
+
379
+ /**
380
+ * Callback function executed after the tooltip's visibility has changed.
381
+ *
382
+ * @param visible - Whether the tooltip is now visible.
383
+ */
221
384
  afterVisibleChange?: (visible: boolean) => void;
385
+
386
+ /**
387
+ * The content of the tooltip. Can be a React node or a function that returns one.
388
+ */
222
389
  overlay: (() => React.ReactNode) | React.ReactNode;
390
+
223
391
  /**
224
- * Style of the tooltip card
392
+ * Inline styles for the tooltip card.
225
393
  */
226
394
  overlayStyle?: React.CSSProperties;
395
+
227
396
  /**
228
- * Class name of the tooltip card
397
+ * Additional CSS class for the tooltip card.
229
398
  */
230
399
  overlayClassName?: string;
400
+
401
+ /**
402
+ * Function to specify the container where the tooltip should be rendered.
403
+ *
404
+ * @param node - The DOM node triggering the tooltip.
405
+ * @returns - The container element for the tooltip.
406
+ */
231
407
  getTooltipContainer?: (node: HTMLElement) => HTMLElement;
408
+
409
+ /**
410
+ * Whether to destroy the tooltip when it is hidden.
411
+ */
232
412
  destroyTooltipOnHide?: boolean;
413
+
233
414
  /**
234
- * This value will be merged into placement's config, please refer to the settings <a href="https://github.com/yiminghe/dom-align" target="_blank">dom-align</a>
415
+ * Alignment configuration for the tooltip. Combines placement settings with additional alignment rules.
416
+ * See: <a href="https://github.com/yiminghe/dom-align" target="_blank">dom-align</a>
235
417
  */
236
418
  align?: AlignType;
419
+
420
+ /**
421
+ * Whether to display an arrow in the tooltip.
422
+ */
237
423
  showArrow?: boolean | ArrowType;
424
+
425
+ /**
426
+ * Custom content for the arrow in the tooltip.
427
+ */
238
428
  arrowContent?: React.ReactNode;
429
+
430
+ /**
431
+ * Unique identifier for the tooltip element.
432
+ */
239
433
  id?: string;
434
+
240
435
  /**
241
- * Style of the tooltip inner content
436
+ * Inline styles for the inner content of the tooltip.
242
437
  */
243
438
  overlayInnerStyle?: React.CSSProperties;
439
+
244
440
  /**
245
- * Config z-index of Tooltip
441
+ * The z-index of the tooltip.
246
442
  */
247
443
  zIndex?: number;
248
444
  }
249
445
 
446
+ /**
447
+ * Configuration for the arrow displayed in the tooltip.
448
+ */
250
449
  interface ArrowType {
450
+ /**
451
+ * Additional CSS class for the arrow.
452
+ */
251
453
  className?: string;
454
+
455
+ /**
456
+ * Custom content for the arrow.
457
+ */
252
458
  content?: React.ReactNode;
253
459
  }
254
460
 
461
+ /**
462
+ * Reference to the tooltip, providing utility methods for alignment and DOM access.
463
+ */
255
464
  interface TooltipRef {
465
+ /**
466
+ * The native DOM element of the tooltip.
467
+ */
256
468
  nativeElement: HTMLElement;
469
+
470
+ /**
471
+ * Forces the alignment of the tooltip, recalculating its position relative to its target.
472
+ */
257
473
  forceAlign: VoidFunction;
258
474
  }
259
475
 
@@ -267,58 +483,207 @@ type StretchType = string;
267
483
 
268
484
  type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
269
485
 
486
+ /**
487
+ * Properties for configuring a trigger that controls the visibility of a popup element.
488
+ */
270
489
  interface TriggerProps {
490
+ /**
491
+ * The child element that triggers the popup.
492
+ */
271
493
  children: React.ReactElement;
494
+
495
+ /**
496
+ * The action(s) that trigger the popup. Options include 'hover', 'focus', 'click', or 'contextMenu'.
497
+ */
272
498
  action?: ActionType | ActionType[];
499
+
500
+ /**
501
+ * Actions that explicitly show the popup.
502
+ */
273
503
  showAction?: ActionType[];
504
+
505
+ /**
506
+ * Actions that explicitly hide the popup.
507
+ */
274
508
  hideAction?: ActionType[];
509
+
510
+ /**
511
+ * Prefix for the popup CSS class.
512
+ */
275
513
  prefixCls?: string;
514
+
515
+ /**
516
+ * The z-index of the popup.
517
+ */
276
518
  zIndex?: number;
519
+
520
+ /**
521
+ * Callback function executed when the popup is aligned with its target.
522
+ *
523
+ * @param element - The popup element.
524
+ * @param align - The alignment configuration.
525
+ */
277
526
  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
527
+
528
+ /**
529
+ * Determines how the popup stretches to fit its container.
530
+ */
278
531
  stretch?: string;
532
+
533
+ /**
534
+ * Whether the popup is currently visible.
535
+ */
279
536
  popupVisible?: boolean;
537
+
538
+ /**
539
+ * Whether the popup is visible by default.
540
+ */
280
541
  defaultPopupVisible?: boolean;
542
+
543
+ /**
544
+ * Callback function executed when the popup visibility changes.
545
+ *
546
+ * @param visible - Whether the popup is now visible.
547
+ */
281
548
  onPopupVisibleChange?: (visible: boolean) => void;
549
+
550
+ /**
551
+ * Callback function executed after the popup visibility has changed.
552
+ *
553
+ * @param visible - Whether the popup is now visible.
554
+ */
282
555
  afterPopupVisibleChange?: (visible: boolean) => void;
556
+
557
+ /**
558
+ * Function to specify the container where the popup should be rendered.
559
+ *
560
+ * @param node - The DOM node triggering the popup.
561
+ * @returns - The container element for the popup.
562
+ */
283
563
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
564
+
565
+ /**
566
+ * Whether to force the rendering of the popup, even if it is not visible.
567
+ */
284
568
  forceRender?: boolean;
569
+
570
+ /**
571
+ * Whether to automatically destroy the popup when it is hidden.
572
+ */
285
573
  autoDestroy?: boolean;
574
+
575
+ /**
576
+ * Whether to display a mask behind the popup.
577
+ */
286
578
  mask?: boolean;
579
+
580
+ /**
581
+ * Whether the popup should close when the mask is clicked.
582
+ */
287
583
  maskClosable?: boolean;
288
- /** Set popup motion. You can ref `rc-motion` for more info. */
584
+
585
+ /**
586
+ * Motion configuration for animating the popup. See `rc-motion` for more information.
587
+ */
289
588
  popupMotion?: CSSMotionProps;
290
- /** Set mask motion. You can ref `rc-motion` for more info. */
589
+
590
+ /**
591
+ * Motion configuration for animating the mask. See `rc-motion` for more information.
592
+ */
291
593
  maskMotion?: CSSMotionProps;
594
+
292
595
  /**
293
- * Delay in seconds, before tooltip is shown on mouse enter
596
+ * Delay (in seconds) before the popup is shown on mouse enter.
294
597
  */
295
598
  mouseEnterDelay?: number;
599
+
296
600
  /**
297
- * Delay in seconds, before tooltip is hidden on mouse leave
601
+ * Delay (in seconds) before the popup is hidden on mouse leave.
298
602
  */
299
603
  mouseLeaveDelay?: number;
604
+
605
+ /**
606
+ * Delay (in seconds) before the popup is shown on focus.
607
+ */
300
608
  focusDelay?: number;
609
+
610
+ /**
611
+ * Delay (in seconds) before the popup is hidden on blur.
612
+ */
301
613
  blurDelay?: number;
614
+
615
+ /**
616
+ * The content of the popup, which can be a React node or a function that returns one.
617
+ */
302
618
  popup: React.ReactNode | (() => React.ReactNode);
619
+
620
+ /**
621
+ * The placement of the popup relative to its target.
622
+ */
303
623
  popupPlacement?: string;
624
+
625
+ /**
626
+ * Custom placements for the popup, defined as a mapping of placement names to alignment configurations.
627
+ */
304
628
  builtinPlacements?: BuildInPlacements;
629
+
630
+ /**
631
+ * Alignment configuration for the popup.
632
+ */
305
633
  popupAlign?: AlignType;
634
+
635
+ /**
636
+ * Additional CSS class for the popup container.
637
+ */
306
638
  popupClassName?: string;
639
+
640
+ /**
641
+ * Inline styles for the popup container.
642
+ */
307
643
  popupStyle?: React.CSSProperties;
644
+
645
+ /**
646
+ * Function to generate the popup's class name based on its alignment.
647
+ *
648
+ * @param align - The alignment configuration.
649
+ * @returns - The class name for the popup.
650
+ */
308
651
  getPopupClassNameFromAlign?: (align: AlignType) => string;
652
+
653
+ /**
654
+ * Callback function executed when the popup is clicked.
655
+ */
309
656
  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
657
+
658
+ /**
659
+ * Whether to align the popup to a specific point instead of an element.
660
+ */
310
661
  alignPoint?: boolean;
662
+
311
663
  /**
312
- * Trigger will memo content when close.
313
- * This may affect the case if want to keep content update.
314
- * Set `fresh` to `false` will always keep update.
664
+ * Whether to refresh the popup content every time it is shown.
665
+ * If `false`, the content is memoized and not updated between visibility changes.
315
666
  */
316
667
  fresh?: boolean;
668
+
669
+ /**
670
+ * Whether to display an arrow in the popup.
671
+ */
317
672
  arrow?: boolean | ArrowTypeOuter;
318
673
  }
319
674
 
675
+ /**
676
+ * Configuration for the outer arrow of the popup.
677
+ */
320
678
  interface ArrowTypeOuter {
679
+ /**
680
+ * Additional CSS class for the arrow.
681
+ */
321
682
  className?: string;
683
+
684
+ /**
685
+ * Custom content for the arrow.
686
+ */
322
687
  content?: React.ReactNode;
323
688
  }
324
689
 
@@ -333,43 +698,145 @@ type MotionName =
333
698
  leaveActive?: string;
334
699
  };
335
700
 
701
+ /**
702
+ * Properties for configuring CSS-based motion animations.
703
+ */
336
704
  interface CSSMotionProps {
705
+ /**
706
+ * Name of the motion animation, which corresponds to a CSS class.
707
+ */
337
708
  motionName?: MotionName;
709
+
710
+ /**
711
+ * Determines whether the motion is currently visible.
712
+ */
338
713
  visible?: boolean;
714
+
715
+ /**
716
+ * Enables the motion to appear with an animation.
717
+ */
339
718
  motionAppear?: boolean;
719
+
720
+ /**
721
+ * Enables the motion to enter with an animation.
722
+ */
340
723
  motionEnter?: boolean;
724
+
725
+ /**
726
+ * Enables the motion to leave with an animation.
727
+ */
341
728
  motionLeave?: boolean;
729
+
730
+ /**
731
+ * Forces the motion to leave immediately without waiting for the animation.
732
+ */
342
733
  motionLeaveImmediately?: boolean;
734
+
735
+ /**
736
+ * Specifies the maximum duration (in milliseconds) for the motion.
737
+ */
343
738
  motionDeadline?: number;
739
+
344
740
  /**
345
- * Create element in view even the element is invisible.
346
- * Will patch `display: none` style on it.
741
+ * Forces the creation of the element in the DOM, even if it is not visible.
742
+ * Invisible elements are styled with `display: none`.
347
743
  */
348
744
  forceRender?: boolean;
745
+
349
746
  /**
350
- * Remove element when motion end. This will not work when `forceRender` is set.
747
+ * Removes the element from the DOM when the motion ends.
748
+ * This option will not work if `forceRender` is enabled.
351
749
  */
352
750
  removeOnLeave?: boolean;
751
+
752
+ /**
753
+ * CSS class applied to elements that have completed their motion and left the viewport.
754
+ */
353
755
  leavedClassName?: string;
354
- /** Prepare phase is used for measure element info. It will always trigger even motion is off */
756
+
757
+ /**
758
+ * Called during the preparation phase of the appear animation.
759
+ * Used to measure the element's properties.
760
+ */
355
761
  onAppearPrepare?: MotionPrepareEventHandler;
356
- /** Prepare phase is used for measure element info. It will always trigger even motion is off */
762
+
763
+ /**
764
+ * Called during the preparation phase of the enter animation.
765
+ * Used to measure the element's properties.
766
+ */
357
767
  onEnterPrepare?: MotionPrepareEventHandler;
358
- /** Prepare phase is used for measure element info. It will always trigger even motion is off */
768
+
769
+ /**
770
+ * Called during the preparation phase of the leave animation.
771
+ * Used to measure the element's properties.
772
+ */
359
773
  onLeavePrepare?: MotionPrepareEventHandler;
774
+
775
+ /**
776
+ * Called when the appear animation starts.
777
+ */
360
778
  onAppearStart?: MotionEventHandler;
779
+
780
+ /**
781
+ * Called when the enter animation starts.
782
+ */
361
783
  onEnterStart?: MotionEventHandler;
784
+
785
+ /**
786
+ * Called when the leave animation starts.
787
+ */
362
788
  onLeaveStart?: MotionEventHandler;
789
+
790
+ /**
791
+ * Called when the appear animation becomes active.
792
+ */
363
793
  onAppearActive?: MotionEventHandler;
794
+
795
+ /**
796
+ * Called when the enter animation becomes active.
797
+ */
364
798
  onEnterActive?: MotionEventHandler;
799
+
800
+ /**
801
+ * Called when the leave animation becomes active.
802
+ */
365
803
  onLeaveActive?: MotionEventHandler;
804
+
805
+ /**
806
+ * Called when the appear animation ends.
807
+ */
366
808
  onAppearEnd?: MotionEndEventHandler;
809
+
810
+ /**
811
+ * Called when the enter animation ends.
812
+ */
367
813
  onEnterEnd?: MotionEndEventHandler;
814
+
815
+ /**
816
+ * Called when the leave animation ends.
817
+ */
368
818
  onLeaveEnd?: MotionEndEventHandler;
369
- /** This will always trigger after final visible changed. Even if no motion configured. */
819
+
820
+ /**
821
+ * Always called after the final visibility state has changed, regardless of whether a motion is configured.
822
+ *
823
+ * @param visible - Indicates whether the element is visible after the change.
824
+ */
370
825
  onVisibleChanged?: (visible: boolean) => void;
826
+
827
+ /**
828
+ * Internal reference to the animated element.
829
+ */
371
830
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
372
831
  internalRef?: React.Ref<any>;
832
+
833
+ /**
834
+ * A render function for the motion's children.
835
+ *
836
+ * @param props - Props passed to the child element, including `visible`, `className`, and `style`.
837
+ * @param ref - Reference to the child element.
838
+ * @returns - A React element representing the animated child.
839
+ */
373
840
  children?: (
374
841
  props: {
375
842
  visible?: boolean;
@@ -386,11 +853,27 @@ interface CSSMotionProps {
386
853
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
387
854
  type MotionPrepareEventHandler = (element: HTMLElement) => Promise<any> | void;
388
855
 
856
+ /**
857
+ * Type definition for a handler function that executes during a motion event.
858
+ * The function can modify CSS properties of the animated element or perform side effects.
859
+ *
860
+ * @param element - The HTML element that is being animated.
861
+ * @param event - The motion event triggering this handler.
862
+ * @returns - Optionally returns a set of CSS properties to apply to the element.
863
+ */
389
864
  type MotionEventHandler = (
390
865
  element: HTMLElement,
391
866
  event: MotionEvent
392
867
  ) => React.CSSProperties | void;
393
868
 
869
+ /**
870
+ * Type definition for a handler function that executes at the end of a motion event.
871
+ * The function determines whether the motion was successfully completed or requires further actions.
872
+ *
873
+ * @param element - The HTML element that was animated.
874
+ * @param event - The motion event that has ended.
875
+ * @returns - Returns `true` if the motion is successfully completed, or `false` to indicate an error or retry.
876
+ */
394
877
  type MotionEndEventHandler = (
395
878
  element: HTMLElement,
396
879
  event: MotionEvent
@@ -404,25 +887,36 @@ type AlignPointLeftRight = 'l' | 'r' | 'c';
404
887
 
405
888
  type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
406
889
 
890
+ /**
891
+ * Configuration for aligning the tooltip or popup content relative to a target element.
892
+ */
407
893
  interface AlignType {
408
894
  /**
409
- * move point of source node to align with point of target node.
410
- * Such as ['tr','cc'], align top right point of source node with center point of target node.
411
- * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
895
+ * Defines the alignment points of the source and target nodes.
896
+ * Each point can be 't' (top), 'b' (bottom), 'c' (center), 'l' (left), or 'r' (right).
897
+ * For example, `['tr', 'cc']` aligns the top-right of the source node
898
+ * with the center of the target node.
899
+ */
412
900
  points?: (string | AlignPoint)[];
901
+
413
902
  /**
414
- * offset source node by offset[0] in x and offset[1] in y.
415
- * If offset contains percentage string value, it is relative to sourceNode region.
903
+ * Defines the offset for the source node in the x and y directions.
904
+ * If the offset contains a percentage string, it is relative to the source node's region.
416
905
  */
417
906
  offset?: OffsetType[];
907
+
418
908
  /**
419
- * offset target node by offset[0] in x and offset[1] in y.
420
- * If targetOffset contains percentage string value, it is relative to targetNode region.
909
+ * Defines the offset for the target node in the x and y directions.
910
+ * If the targetOffset contains a percentage string, it is relative to the target node's region.
421
911
  */
422
912
  targetOffset?: OffsetType[];
913
+
423
914
  /**
424
- * If adjustX field is true, will adjust source node in x direction if source node is invisible.
425
- * If adjustY field is true, will adjust source node in y direction if source node is invisible.
915
+ * Configuration for adjusting the source node's position to prevent it from being invisible.
916
+ * - `adjustX`: Adjusts the x position.
917
+ * - `adjustY`: Adjusts the y position.
918
+ * - `shiftX`: Shifts the x position slightly.
919
+ * - `shiftY`: Shifts the y position slightly.
426
920
  */
427
921
  overflow?: {
428
922
  adjustX?: boolean | number;
@@ -430,37 +924,43 @@ interface AlignType {
430
924
  shiftX?: boolean | number;
431
925
  shiftY?: boolean | number;
432
926
  };
433
- /** Auto adjust arrow position */
927
+
928
+ /**
929
+ * Whether to automatically adjust the arrow position based on the alignment.
930
+ */
434
931
  autoArrow?: boolean;
932
+
435
933
  /**
436
- * Config visible region check of html node. Default `visible`:
437
- * - `visible`:
438
- * The visible region of user browser window.
439
- * Use `clientHeight` for check.
440
- * If `visible` region not satisfy, fallback to `scroll`.
441
- * - `scroll`:
442
- * The whole region of the html scroll area.
443
- * Use `scrollHeight` for check.
444
- * - `visibleFirst`:
445
- * Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
934
+ * Defines the visible region check for the tooltip or popup.
935
+ * - `visible`: Checks the visible region of the browser window (default).
936
+ * - `scroll`: Includes the entire scrollable region.
937
+ * - `visibleFirst`: Prioritizes the visible region but falls back to `scroll` if necessary.
446
938
  */
447
939
  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
940
+
448
941
  /**
449
- * Auto chose position with `top` or `bottom` by the align result
942
+ * Automatically chooses a position with `top` or `bottom` based on the alignment result.
450
943
  */
451
944
  dynamicInset?: boolean;
945
+
452
946
  /**
453
- * Whether use css right instead of left to position
947
+ * Uses `css right` instead of `left` for positioning, if enabled.
454
948
  */
455
949
  useCssRight?: boolean;
950
+
456
951
  /**
457
- * Whether use css bottom instead of top to position
952
+ * Uses `css bottom` instead of `top` for positioning, if enabled.
458
953
  */
459
954
  useCssBottom?: boolean;
955
+
460
956
  /**
461
- * Whether use css transform instead of left/top/right/bottom to position if browser supports.
462
- * Defaults to false.
957
+ * Uses `css transform` for positioning instead of absolute properties like left, top, right, or bottom.
958
+ * Defaults to `false`.
463
959
  */
464
960
  useCssTransform?: boolean;
961
+
962
+ /**
963
+ * Ignores minor shaking effects in tooltip alignment.
964
+ */
465
965
  ignoreShake?: boolean;
466
966
  }