@douyinfe/semi-foundation 2.44.0 → 2.45.0-beta.0

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.
Files changed (28) hide show
  1. package/anchor/anchor.scss +6 -0
  2. package/anchor/variables.scss +4 -0
  3. package/datePicker/datePicker.scss +3 -0
  4. package/datePicker/variables.scss +1 -0
  5. package/input/textareaFoundation.ts +9 -4
  6. package/lib/cjs/anchor/anchor.css +5 -0
  7. package/lib/cjs/anchor/anchor.scss +6 -0
  8. package/lib/cjs/anchor/variables.scss +4 -0
  9. package/lib/cjs/datePicker/datePicker.css +3 -0
  10. package/lib/cjs/datePicker/datePicker.scss +3 -0
  11. package/lib/cjs/datePicker/variables.scss +1 -0
  12. package/lib/cjs/input/textareaFoundation.js +5 -5
  13. package/lib/cjs/notification/notificationListFoundation.d.ts +4 -1
  14. package/lib/cjs/notification/notificationListFoundation.js +9 -0
  15. package/lib/cjs/tooltip/foundation.js +46 -30
  16. package/lib/es/anchor/anchor.css +5 -0
  17. package/lib/es/anchor/anchor.scss +6 -0
  18. package/lib/es/anchor/variables.scss +4 -0
  19. package/lib/es/datePicker/datePicker.css +3 -0
  20. package/lib/es/datePicker/datePicker.scss +3 -0
  21. package/lib/es/datePicker/variables.scss +1 -0
  22. package/lib/es/input/textareaFoundation.js +5 -5
  23. package/lib/es/notification/notificationListFoundation.d.ts +4 -1
  24. package/lib/es/notification/notificationListFoundation.js +9 -0
  25. package/lib/es/tooltip/foundation.js +46 -30
  26. package/notification/notificationListFoundation.ts +14 -2
  27. package/package.json +3 -3
  28. package/tooltip/foundation.ts +49 -30
package/anchor/anchor.scss CHANGED
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
75
75
  border-radius: $width-anchor-outline_border_radius;
76
76
  transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
77
77
  transform: scale($transform_scale-anchor_title-text);
78
+ background: $color-anchor_title-bg-default;
78
79
  &:hover {
79
80
  color: $color-anchor_title-text-hover;
80
81
  }
81
82
 
82
83
  &-active {
83
84
  color: $color-anchor_title-text-active;
85
+ background: $color-anchor_title-bg-active;
86
+ &:hover{
87
+ color: $color-anchor_title_active-text-hover;
88
+ }
89
+
84
90
  }
85
91
 
86
92
  &:focus-visible {
package/anchor/variables.scss CHANGED
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
6
6
 
7
7
  $color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
8
8
  $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
9
+ $color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
9
10
  $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
10
11
  $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
11
12
 
13
+ $color-anchor_title-bg-default: transparent; // 背景色
14
+ $color-anchor_title-bg-active: transparent; // 背景色 - 选中
15
+
12
16
  $color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
13
17
 
14
18
  // Spacing
package/datePicker/datePicker.scss CHANGED
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
900
900
 
901
901
  &:active {
902
902
  border-color: $color-datepicker_range_trigger-border-active;
903
+ }
903
904
 
905
+ &:focus-within{
906
+ border-color: $color-datepicker_range_trigger-border-focus;
904
907
  }
905
908
 
906
909
  .#{$module}-monthRange-input {
package/datePicker/variables.scss CHANGED
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
148
148
  $color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
149
149
  $color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
150
150
  $color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
151
+ $color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
151
152
 
152
153
 
153
154
 
package/input/textareaFoundation.ts CHANGED
@@ -171,7 +171,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
171
171
 
172
172
  resizeTextarea = (cb?: any) => {
173
173
  const { height } = this.getStates();
174
- const { rows } = this.getProps();
174
+ const { rows, autosize } = this.getProps();
175
175
  const node = this._adapter.getRef();
176
176
  const nodeSizingData = getSizingData(node);
177
177
 
@@ -180,11 +180,16 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
180
180
  return;
181
181
  }
182
182
 
183
+ const [minRows, maxRows] = autosize !== null && typeof autosize === 'object' ? [
184
+ autosize?.minRows ?? rows,
185
+ autosize?.maxRows
186
+ ] : [rows];
187
+
183
188
  const newHeight = calculateNodeHeight(
184
189
  nodeSizingData,
185
190
  node.value || node.placeholder || 'x',
186
- rows
187
- // maxRows,
191
+ minRows,
192
+ maxRows
188
193
  );
189
194
 
190
195
  if (height !== newHeight) {
@@ -232,4 +237,4 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
232
237
  this._adapter.notifyClear(e);
233
238
  this.stopPropagation(e);
234
239
  }
235
- }
240
+ }
package/lib/cjs/anchor/anchor.css CHANGED
@@ -65,12 +65,17 @@
65
65
  border-radius: 3px;
66
66
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
67
67
  transform: scale(var(--semi-transform_scale-none));
68
+ background: transparent;
68
69
  }
69
70
  .semi-anchor-link-title:hover {
70
71
  color: var(--semi-color-tertiary-hover);
71
72
  }
72
73
  .semi-anchor-link-title-active {
73
74
  color: var(--semi-color-text-0);
75
+ background: transparent;
76
+ }
77
+ .semi-anchor-link-title-active:hover {
78
+ color: var(--semi-color-tertiary-hover);
74
79
  }
75
80
  .semi-anchor-link-title:focus-visible {
76
81
  outline: 2px solid var(--semi-color-primary-light-active);
package/lib/cjs/anchor/anchor.scss CHANGED
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
75
75
  border-radius: $width-anchor-outline_border_radius;
76
76
  transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
77
77
  transform: scale($transform_scale-anchor_title-text);
78
+ background: $color-anchor_title-bg-default;
78
79
  &:hover {
79
80
  color: $color-anchor_title-text-hover;
80
81
  }
81
82
 
82
83
  &-active {
83
84
  color: $color-anchor_title-text-active;
85
+ background: $color-anchor_title-bg-active;
86
+ &:hover{
87
+ color: $color-anchor_title_active-text-hover;
88
+ }
89
+
84
90
  }
85
91
 
86
92
  &:focus-visible {
package/lib/cjs/anchor/variables.scss CHANGED
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
6
6
 
7
7
  $color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
8
8
  $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
9
+ $color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
9
10
  $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
10
11
  $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
11
12
 
13
+ $color-anchor_title-bg-default: transparent; // 背景色
14
+ $color-anchor_title-bg-active: transparent; // 背景色 - 选中
15
+
12
16
  $color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
13
17
 
14
18
  // Spacing
package/lib/cjs/datePicker/datePicker.css CHANGED
@@ -593,6 +593,9 @@
593
593
  .semi-datepicker-range-input:active {
594
594
  border-color: transparent;
595
595
  }
596
+ .semi-datepicker-range-input:focus-within {
597
+ border-color: transparent;
598
+ }
596
599
  .semi-datepicker-range-input .semi-datepicker-monthRange-input {
597
600
  background-color: transparent;
598
601
  }
package/lib/cjs/datePicker/datePicker.scss CHANGED
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
900
900
 
901
901
  &:active {
902
902
  border-color: $color-datepicker_range_trigger-border-active;
903
+ }
903
904
 
905
+ &:focus-within{
906
+ border-color: $color-datepicker_range_trigger-border-focus;
904
907
  }
905
908
 
906
909
  .#{$module}-monthRange-input {
package/lib/cjs/datePicker/variables.scss CHANGED
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
148
148
  $color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
149
149
  $color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
150
150
  $color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
151
+ $color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
151
152
 
152
153
 
153
154
 
package/lib/cjs/input/textareaFoundation.js CHANGED
@@ -28,11 +28,13 @@ class TextAreaFoundation extends _foundation.default {
28
28
  constructor(adapter) {
29
29
  super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
30
30
  this.resizeTextarea = cb => {
31
+ var _a;
31
32
  const {
32
33
  height
33
34
  } = this.getStates();
34
35
  const {
35
- rows
36
+ rows,
37
+ autosize
36
38
  } = this.getProps();
37
39
  const node = this._adapter.getRef();
38
40
  const nodeSizingData = (0, _getSizingData.default)(node);
@@ -40,10 +42,8 @@ class TextAreaFoundation extends _foundation.default {
40
42
  cb && cb();
41
43
  return;
42
44
  }
43
- const newHeight = (0, _calculateNodeHeight.default)(nodeSizingData, node.value || node.placeholder || 'x', rows
44
- // maxRows,
45
- );
46
-
45
+ const [minRows, maxRows] = autosize !== null && typeof autosize === 'object' ? [(_a = autosize === null || autosize === void 0 ? void 0 : autosize.minRows) !== null && _a !== void 0 ? _a : rows, autosize === null || autosize === void 0 ? void 0 : autosize.maxRows] : [rows];
46
+ const newHeight = (0, _calculateNodeHeight.default)(nodeSizingData, node.value || node.placeholder || 'x', minRows, maxRows);
47
47
  if (height !== newHeight) {
48
48
  this._adapter.notifyHeightUpdate(newHeight);
49
49
  node.style.height = `${newHeight}px`;
package/lib/cjs/notification/notificationListFoundation.d.ts CHANGED
@@ -6,9 +6,10 @@ export interface NotificationListProps {
6
6
  export interface NotificationListState {
7
7
  notices: NoticeInstance[];
8
8
  removedItems: NoticeInstance[];
9
+ updatedItems: NoticeInstance[];
9
10
  }
10
11
  export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
11
- updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
12
+ updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => void;
12
13
  getNotices: () => NoticeInstance[];
13
14
  }
14
15
  export interface ConfigProps {
@@ -23,6 +24,8 @@ export interface ConfigProps {
23
24
  }
24
25
  export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
25
26
  addNotice(opts: NoticeProps): void;
27
+ has(id: string): boolean;
28
+ update(id: string, noticeOpts: NoticeProps): void;
26
29
  removeNotice(id: string): void;
27
30
  destroyAll(): void;
28
31
  }
package/lib/cjs/notification/notificationListFoundation.js CHANGED
@@ -20,6 +20,15 @@ class NotificationListFoundation extends _foundation.default {
20
20
  // return id;
21
21
  }
22
22
 
23
+ has(id) {
24
+ return this._adapter.getNotices().some(notice => notice.id === id);
25
+ }
26
+ update(id, noticeOpts) {
27
+ let notices = this._adapter.getNotices();
28
+ notices = notices.map(notice => notice.id === id ? Object.assign(Object.assign({}, notice), noticeOpts) : notice);
29
+ const updatedItems = notices.filter(notice => notice.id === id);
30
+ this._adapter.updateNotices(notices, [], updatedItems);
31
+ }
23
32
  removeNotice(id) {
24
33
  let notices = this._adapter.getNotices();
25
34
  // let notices = this._adapter.getNotices();
package/lib/cjs/tooltip/foundation.js CHANGED
@@ -438,13 +438,21 @@ class Tooltip extends _foundation.default {
438
438
  const containerRect = ((0, _isEmpty2.default)(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
439
439
  const wrapperRect = ((0, _isEmpty2.default)(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect);
440
440
  const position = props.position != null ? props.position : this.getProp('position');
441
- const SPACING = spacing != null ? spacing : this.getProp('spacing');
441
+ const RAW_SPACING = spacing != null ? spacing : this.getProp('spacing');
442
442
  const {
443
443
  arrowPointAtCenter,
444
444
  showArrow,
445
445
  arrowBounding
446
446
  } = this.getProps();
447
447
  const pointAtCenter = showArrow && arrowPointAtCenter;
448
+ let SPACING = RAW_SPACING;
449
+ let ANO_SPACING = 0;
450
+ if (typeof RAW_SPACING !== 'number') {
451
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
452
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
453
+ SPACING = isTopOrBottom ? RAW_SPACING.y : RAW_SPACING.x;
454
+ ANO_SPACING = isTopOrBottom ? RAW_SPACING.x : RAW_SPACING.y;
455
+ }
448
456
  const horizontalArrowWidth = (0, _get2.default)(arrowBounding, 'width', 24);
449
457
  const verticalArrowHeight = (0, _get2.default)(arrowBounding, 'width', 24);
450
458
  const arrowOffsetY = (0, _get2.default)(arrowBounding, 'offsetY', 0);
@@ -473,7 +481,7 @@ class Tooltip extends _foundation.default {
473
481
  case 'top':
474
482
  // left = middleX;
475
483
  // top = triggerRect.top - SPACING;
476
- left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
484
+ left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX + ANO_SPACING;
477
485
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
478
486
  translateX = -0.5;
479
487
  translateY = -1;
@@ -481,14 +489,14 @@ class Tooltip extends _foundation.default {
481
489
  case 'topLeft':
482
490
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
483
491
  // top = triggerRect.top - SPACING;
484
- left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
492
+ left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING;
485
493
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
486
494
  translateY = -1;
487
495
  break;
488
496
  case 'topRight':
489
497
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
490
498
  // top = triggerRect.top - SPACING;
491
- left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
499
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING;
492
500
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
493
501
  translateY = -1;
494
502
  translateX = -1;
@@ -498,7 +506,7 @@ class Tooltip extends _foundation.default {
498
506
  // top = middleY;
499
507
  // left = isWidthOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
500
508
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
501
- top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
509
+ top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY + ANO_SPACING;
502
510
  translateX = -1;
503
511
  translateY = -0.5;
504
512
  break;
@@ -506,34 +514,34 @@ class Tooltip extends _foundation.default {
506
514
  // left = triggerRect.left - SPACING;
507
515
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
508
516
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
509
- top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
517
+ top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING;
510
518
  translateX = -1;
511
519
  break;
512
520
  case 'leftBottom':
513
521
  // left = triggerRect.left - SPACING;
514
522
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
515
523
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
516
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
524
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING;
517
525
  translateX = -1;
518
526
  translateY = -1;
519
527
  break;
520
528
  case 'bottom':
521
529
  // left = middleX;
522
530
  // top = triggerRect.top + triggerRect.height + SPACING;
523
- left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
531
+ left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX + ANO_SPACING;
524
532
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
525
533
  translateX = -0.5;
526
534
  break;
527
535
  case 'bottomLeft':
528
536
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
529
537
  // top = triggerRect.bottom + SPACING;
530
- left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
538
+ left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING;
531
539
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
532
540
  break;
533
541
  case 'bottomRight':
534
542
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
535
543
  // top = triggerRect.bottom + SPACING;
536
- left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
544
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING;
537
545
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
538
546
  translateX = -1;
539
547
  break;
@@ -541,20 +549,20 @@ class Tooltip extends _foundation.default {
541
549
  // left = triggerRect.right + SPACING;
542
550
  // top = middleY;
543
551
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
544
- top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
552
+ top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY + ANO_SPACING;
545
553
  translateY = -0.5;
546
554
  break;
547
555
  case 'rightTop':
548
556
  // left = triggerRect.right + SPACING;
549
557
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
550
558
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
551
- top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
559
+ top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING;
552
560
  break;
553
561
  case 'rightBottom':
554
562
  // left = triggerRect.right + SPACING;
555
563
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
556
564
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
557
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
565
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING;
558
566
  translateY = -1;
559
567
  break;
560
568
  case 'leftTopOver':
@@ -687,7 +695,6 @@ class Tooltip extends _foundation.default {
687
695
  innerHeight
688
696
  } = window;
689
697
  const {
690
- spacing,
691
698
  margin
692
699
  } = this.getProps();
693
700
  const marginLeft = typeof margin === 'number' ? margin : margin.marginLeft;
@@ -696,6 +703,15 @@ class Tooltip extends _foundation.default {
696
703
  const marginBottom = typeof margin === 'number' ? margin : margin.marginBottom;
697
704
  let isHeightOverFlow = false;
698
705
  let isWidthOverFlow = false;
706
+ const raw_spacing = this.getProp('spacing');
707
+ let spacing = raw_spacing;
708
+ let ano_spacing = 0;
709
+ if (typeof raw_spacing !== 'number') {
710
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
711
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
712
+ spacing = isTopOrBottom ? raw_spacing.y : raw_spacing.x;
713
+ ano_spacing = isTopOrBottom ? raw_spacing.x : raw_spacing.y;
714
+ }
699
715
  if (wrapperRect.width > 0 && wrapperRect.height > 0) {
700
716
  // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
701
717
  // let clientTop = top + translateY * wrapperRect.height - containerRect.scrollTop;
@@ -726,10 +742,10 @@ class Tooltip extends _foundation.default {
726
742
  const shouldViewReverseRight = restClientRight - marginRight < wrapperRect.width + spacing && clientLeft - marginLeft > wrapperRect.width + spacing;
727
743
  const shouldViewReverseTopOver = restClientTop - marginBottom < wrapperRect.height + spacing && clientBottom - marginTop > wrapperRect.height + spacing;
728
744
  const shouldViewReverseBottomOver = clientBottom - marginTop < wrapperRect.height + spacing && restClientTop - marginBottom > wrapperRect.height + spacing;
729
- const shouldViewReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
730
- const shouldViewReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
731
- const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
732
- const shouldViewReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
745
+ const shouldViewReverseTopSide = restClientTop < wrapperRect.height + ano_spacing && clientBottom > wrapperRect.height + ano_spacing;
746
+ const shouldViewReverseBottomSide = clientBottom < wrapperRect.height + ano_spacing && restClientTop > wrapperRect.height + ano_spacing;
747
+ const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width + ano_spacing && clientRight > wrapperRect.width + ano_spacing;
748
+ const shouldViewReverseRightSide = clientRight < wrapperRect.width + ano_spacing && restClientLeft > wrapperRect.width + ano_spacing;
733
749
  const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
734
750
  const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
735
751
  const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
@@ -752,10 +768,10 @@ class Tooltip extends _foundation.default {
752
768
  const shouldContainerReverseRight = this.isReverse(restClientRightInContainer - marginRight, clientLeftInContainer - marginLeft, wrapperRect.width + spacing);
753
769
  const shouldContainerReverseTopOver = this.isReverse(restClientTopInContainer - marginBottom, clientBottomInContainer - marginTop, wrapperRect.height + spacing);
754
770
  const shouldContainerReverseBottomOver = this.isReverse(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
755
- const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height);
756
- const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height);
757
- const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width);
758
- const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width);
771
+ const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height + ano_spacing);
772
+ const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height + ano_spacing);
773
+ const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width + ano_spacing);
774
+ const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width + ano_spacing);
759
775
  const halfHeight = triggerRect.height / 2;
760
776
  const halfWidth = triggerRect.width / 2;
761
777
  // 视口, 原空间与反向空间是否都不足判断
@@ -764,20 +780,20 @@ class Tooltip extends _foundation.default {
764
780
  const isViewXOverFlow = this.isOverFlow(clientLeft - marginLeft, restClientRight - marginRight, wrapperRect.width + spacing);
765
781
  const isViewYOverFlowSide = this.isOverFlow(clientBottom - marginTop, restClientTop - marginBottom, wrapperRect.height + spacing);
766
782
  const isViewXOverFlowSide = this.isOverFlow(clientRight - marginLeft, restClientLeft - marginRight, wrapperRect.width + spacing);
767
- const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
768
- const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
769
- const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
770
- const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
783
+ const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
784
+ const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
785
+ const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
786
+ const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
771
787
  // 容器, 原空间与反向空间是否都不足判断
772
788
  // container, whether the original space and the reverse space are insufficient to judge
773
789
  const isContainerYOverFlow = this.isOverFlow(clientTopInContainer - marginTop, restClientBottomInContainer - marginBottom, wrapperRect.height + spacing);
774
790
  const isContainerXOverFlow = this.isOverFlow(clientLeftInContainer - marginLeft, restClientRightInContainer - marginRight, wrapperRect.width + spacing);
775
791
  const isContainerYOverFlowSide = this.isOverFlow(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
776
792
  const isContainerXOverFlowSide = this.isOverFlow(clientRightInContainer - marginLeft, restClientLeftInContainer - marginRight, wrapperRect.width + spacing);
777
- const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
778
- const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
779
- const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
780
- const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
793
+ const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
794
+ const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
795
+ const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
796
+ const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
781
797
  // 综合 viewport + container 判断微调，即视口 + 容器都放置不行时才能考虑位置调整
782
798
  // Comprehensive viewport + container judgment fine-tuning, that is, the position adjustment can only be considered when the viewport + container cannot be placed.
783
799
  const shouldReverseTop = this.getReverse(isViewYOverFlow, isContainerYOverFlow, shouldViewReverseTop, shouldContainerReverseTop);
package/lib/es/anchor/anchor.css CHANGED
@@ -65,12 +65,17 @@
65
65
  border-radius: 3px;
66
66
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
67
67
  transform: scale(var(--semi-transform_scale-none));
68
+ background: transparent;
68
69
  }
69
70
  .semi-anchor-link-title:hover {
70
71
  color: var(--semi-color-tertiary-hover);
71
72
  }
72
73
  .semi-anchor-link-title-active {
73
74
  color: var(--semi-color-text-0);
75
+ background: transparent;
76
+ }
77
+ .semi-anchor-link-title-active:hover {
78
+ color: var(--semi-color-tertiary-hover);
74
79
  }
75
80
  .semi-anchor-link-title:focus-visible {
76
81
  outline: 2px solid var(--semi-color-primary-light-active);
package/lib/es/anchor/anchor.scss CHANGED
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
75
75
  border-radius: $width-anchor-outline_border_radius;
76
76
  transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
77
77
  transform: scale($transform_scale-anchor_title-text);
78
+ background: $color-anchor_title-bg-default;
78
79
  &:hover {
79
80
  color: $color-anchor_title-text-hover;
80
81
  }
81
82
 
82
83
  &-active {
83
84
  color: $color-anchor_title-text-active;
85
+ background: $color-anchor_title-bg-active;
86
+ &:hover{
87
+ color: $color-anchor_title_active-text-hover;
88
+ }
89
+
84
90
  }
85
91
 
86
92
  &:focus-visible {
package/lib/es/anchor/variables.scss CHANGED
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
6
6
 
7
7
  $color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
8
8
  $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
9
+ $color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
9
10
  $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
10
11
  $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
11
12
 
13
+ $color-anchor_title-bg-default: transparent; // 背景色
14
+ $color-anchor_title-bg-active: transparent; // 背景色 - 选中
15
+
12
16
  $color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
13
17
 
14
18
  // Spacing
package/lib/es/datePicker/datePicker.css CHANGED
@@ -593,6 +593,9 @@
593
593
  .semi-datepicker-range-input:active {
594
594
  border-color: transparent;
595
595
  }
596
+ .semi-datepicker-range-input:focus-within {
597
+ border-color: transparent;
598
+ }
596
599
  .semi-datepicker-range-input .semi-datepicker-monthRange-input {
597
600
  background-color: transparent;
598
601
  }
package/lib/es/datePicker/datePicker.scss CHANGED
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
900
900
 
901
901
  &:active {
902
902
  border-color: $color-datepicker_range_trigger-border-active;
903
+ }
903
904
 
905
+ &:focus-within{
906
+ border-color: $color-datepicker_range_trigger-border-focus;
904
907
  }
905
908
 
906
909
  .#{$module}-monthRange-input {
package/lib/es/datePicker/variables.scss CHANGED
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
148
148
  $color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
149
149
  $color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
150
150
  $color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
151
+ $color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
151
152
 
152
153
 
153
154
 
package/lib/es/input/textareaFoundation.js CHANGED
@@ -21,11 +21,13 @@ export default class TextAreaFoundation extends BaseFoundation {
21
21
  constructor(adapter) {
22
22
  super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
23
23
  this.resizeTextarea = cb => {
24
+ var _a;
24
25
  const {
25
26
  height
26
27
  } = this.getStates();
27
28
  const {
28
- rows
29
+ rows,
30
+ autosize
29
31
  } = this.getProps();
30
32
  const node = this._adapter.getRef();
31
33
  const nodeSizingData = getSizingData(node);
@@ -33,10 +35,8 @@ export default class TextAreaFoundation extends BaseFoundation {
33
35
  cb && cb();
34
36
  return;
35
37
  }
36
- const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', rows
37
- // maxRows,
38
- );
39
-
38
+ const [minRows, maxRows] = autosize !== null && typeof autosize === 'object' ? [(_a = autosize === null || autosize === void 0 ? void 0 : autosize.minRows) !== null && _a !== void 0 ? _a : rows, autosize === null || autosize === void 0 ? void 0 : autosize.maxRows] : [rows];
39
+ const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', minRows, maxRows);
40
40
  if (height !== newHeight) {
41
41
  this._adapter.notifyHeightUpdate(newHeight);
42
42
  node.style.height = `${newHeight}px`;
package/lib/es/notification/notificationListFoundation.d.ts CHANGED
@@ -6,9 +6,10 @@ export interface NotificationListProps {
6
6
  export interface NotificationListState {
7
7
  notices: NoticeInstance[];
8
8
  removedItems: NoticeInstance[];
9
+ updatedItems: NoticeInstance[];
9
10
  }
10
11
  export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
11
- updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
12
+ updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => void;
12
13
  getNotices: () => NoticeInstance[];
13
14
  }
14
15
  export interface ConfigProps {
@@ -23,6 +24,8 @@ export interface ConfigProps {
23
24
  }
24
25
  export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
25
26
  addNotice(opts: NoticeProps): void;
27
+ has(id: string): boolean;
28
+ update(id: string, noticeOpts: NoticeProps): void;
26
29
  removeNotice(id: string): void;
27
30
  destroyAll(): void;
28
31
  }
package/lib/es/notification/notificationListFoundation.js CHANGED
@@ -13,6 +13,15 @@ export default class NotificationListFoundation extends BaseFoundation {
13
13
  // return id;
14
14
  }
15
15
 
16
+ has(id) {
17
+ return this._adapter.getNotices().some(notice => notice.id === id);
18
+ }
19
+ update(id, noticeOpts) {
20
+ let notices = this._adapter.getNotices();
21
+ notices = notices.map(notice => notice.id === id ? Object.assign(Object.assign({}, notice), noticeOpts) : notice);
22
+ const updatedItems = notices.filter(notice => notice.id === id);
23
+ this._adapter.updateNotices(notices, [], updatedItems);
24
+ }
16
25
  removeNotice(id) {
17
26
  let notices = this._adapter.getNotices();
18
27
  // let notices = this._adapter.getNotices();
package/lib/es/tooltip/foundation.js CHANGED
@@ -431,13 +431,21 @@ export default class Tooltip extends BaseFoundation {
431
431
  const containerRect = (_isEmpty(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
432
432
  const wrapperRect = (_isEmpty(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect);
433
433
  const position = props.position != null ? props.position : this.getProp('position');
434
- const SPACING = spacing != null ? spacing : this.getProp('spacing');
434
+ const RAW_SPACING = spacing != null ? spacing : this.getProp('spacing');
435
435
  const {
436
436
  arrowPointAtCenter,
437
437
  showArrow,
438
438
  arrowBounding
439
439
  } = this.getProps();
440
440
  const pointAtCenter = showArrow && arrowPointAtCenter;
441
+ let SPACING = RAW_SPACING;
442
+ let ANO_SPACING = 0;
443
+ if (typeof RAW_SPACING !== 'number') {
444
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
445
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
446
+ SPACING = isTopOrBottom ? RAW_SPACING.y : RAW_SPACING.x;
447
+ ANO_SPACING = isTopOrBottom ? RAW_SPACING.x : RAW_SPACING.y;
448
+ }
441
449
  const horizontalArrowWidth = _get(arrowBounding, 'width', 24);
442
450
  const verticalArrowHeight = _get(arrowBounding, 'width', 24);
443
451
  const arrowOffsetY = _get(arrowBounding, 'offsetY', 0);
@@ -466,7 +474,7 @@ export default class Tooltip extends BaseFoundation {
466
474
  case 'top':
467
475
  // left = middleX;
468
476
  // top = triggerRect.top - SPACING;
469
- left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
477
+ left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX + ANO_SPACING;
470
478
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
471
479
  translateX = -0.5;
472
480
  translateY = -1;
@@ -474,14 +482,14 @@ export default class Tooltip extends BaseFoundation {
474
482
  case 'topLeft':
475
483
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
476
484
  // top = triggerRect.top - SPACING;
477
- left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
485
+ left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING;
478
486
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
479
487
  translateY = -1;
480
488
  break;
481
489
  case 'topRight':
482
490
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
483
491
  // top = triggerRect.top - SPACING;
484
- left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
492
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING;
485
493
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
486
494
  translateY = -1;
487
495
  translateX = -1;
@@ -491,7 +499,7 @@ export default class Tooltip extends BaseFoundation {
491
499
  // top = middleY;
492
500
  // left = isWidthOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
493
501
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
494
- top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
502
+ top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY + ANO_SPACING;
495
503
  translateX = -1;
496
504
  translateY = -0.5;
497
505
  break;
@@ -499,34 +507,34 @@ export default class Tooltip extends BaseFoundation {
499
507
  // left = triggerRect.left - SPACING;
500
508
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
501
509
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
502
- top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
510
+ top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING;
503
511
  translateX = -1;
504
512
  break;
505
513
  case 'leftBottom':
506
514
  // left = triggerRect.left - SPACING;
507
515
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
508
516
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
509
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
517
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING;
510
518
  translateX = -1;
511
519
  translateY = -1;
512
520
  break;
513
521
  case 'bottom':
514
522
  // left = middleX;
515
523
  // top = triggerRect.top + triggerRect.height + SPACING;
516
- left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
524
+ left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX + ANO_SPACING;
517
525
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
518
526
  translateX = -0.5;
519
527
  break;
520
528
  case 'bottomLeft':
521
529
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
522
530
  // top = triggerRect.bottom + SPACING;
523
- left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
531
+ left = isWidthOverFlow ? isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width : pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING;
524
532
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
525
533
  break;
526
534
  case 'bottomRight':
527
535
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
528
536
  // top = triggerRect.bottom + SPACING;
529
- left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
537
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING;
530
538
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
531
539
  translateX = -1;
532
540
  break;
@@ -534,20 +542,20 @@ export default class Tooltip extends BaseFoundation {
534
542
  // left = triggerRect.right + SPACING;
535
543
  // top = middleY;
536
544
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
537
- top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
545
+ top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY + ANO_SPACING;
538
546
  translateY = -0.5;
539
547
  break;
540
548
  case 'rightTop':
541
549
  // left = triggerRect.right + SPACING;
542
550
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
543
551
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
544
- top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
552
+ top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING;
545
553
  break;
546
554
  case 'rightBottom':
547
555
  // left = triggerRect.right + SPACING;
548
556
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
549
557
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
550
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
558
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING;
551
559
  translateY = -1;
552
560
  break;
553
561
  case 'leftTopOver':
@@ -680,7 +688,6 @@ export default class Tooltip extends BaseFoundation {
680
688
  innerHeight
681
689
  } = window;
682
690
  const {
683
- spacing,
684
691
  margin
685
692
  } = this.getProps();
686
693
  const marginLeft = typeof margin === 'number' ? margin : margin.marginLeft;
@@ -689,6 +696,15 @@ export default class Tooltip extends BaseFoundation {
689
696
  const marginBottom = typeof margin === 'number' ? margin : margin.marginBottom;
690
697
  let isHeightOverFlow = false;
691
698
  let isWidthOverFlow = false;
699
+ const raw_spacing = this.getProp('spacing');
700
+ let spacing = raw_spacing;
701
+ let ano_spacing = 0;
702
+ if (typeof raw_spacing !== 'number') {
703
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
704
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
705
+ spacing = isTopOrBottom ? raw_spacing.y : raw_spacing.x;
706
+ ano_spacing = isTopOrBottom ? raw_spacing.x : raw_spacing.y;
707
+ }
692
708
  if (wrapperRect.width > 0 && wrapperRect.height > 0) {
693
709
  // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
694
710
  // let clientTop = top + translateY * wrapperRect.height - containerRect.scrollTop;
@@ -719,10 +735,10 @@ export default class Tooltip extends BaseFoundation {
719
735
  const shouldViewReverseRight = restClientRight - marginRight < wrapperRect.width + spacing && clientLeft - marginLeft > wrapperRect.width + spacing;
720
736
  const shouldViewReverseTopOver = restClientTop - marginBottom < wrapperRect.height + spacing && clientBottom - marginTop > wrapperRect.height + spacing;
721
737
  const shouldViewReverseBottomOver = clientBottom - marginTop < wrapperRect.height + spacing && restClientTop - marginBottom > wrapperRect.height + spacing;
722
- const shouldViewReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
723
- const shouldViewReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
724
- const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
725
- const shouldViewReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
738
+ const shouldViewReverseTopSide = restClientTop < wrapperRect.height + ano_spacing && clientBottom > wrapperRect.height + ano_spacing;
739
+ const shouldViewReverseBottomSide = clientBottom < wrapperRect.height + ano_spacing && restClientTop > wrapperRect.height + ano_spacing;
740
+ const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width + ano_spacing && clientRight > wrapperRect.width + ano_spacing;
741
+ const shouldViewReverseRightSide = clientRight < wrapperRect.width + ano_spacing && restClientLeft > wrapperRect.width + ano_spacing;
726
742
  const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
727
743
  const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
728
744
  const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
@@ -745,10 +761,10 @@ export default class Tooltip extends BaseFoundation {
745
761
  const shouldContainerReverseRight = this.isReverse(restClientRightInContainer - marginRight, clientLeftInContainer - marginLeft, wrapperRect.width + spacing);
746
762
  const shouldContainerReverseTopOver = this.isReverse(restClientTopInContainer - marginBottom, clientBottomInContainer - marginTop, wrapperRect.height + spacing);
747
763
  const shouldContainerReverseBottomOver = this.isReverse(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
748
- const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height);
749
- const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height);
750
- const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width);
751
- const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width);
764
+ const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height + ano_spacing);
765
+ const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height + ano_spacing);
766
+ const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width + ano_spacing);
767
+ const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width + ano_spacing);
752
768
  const halfHeight = triggerRect.height / 2;
753
769
  const halfWidth = triggerRect.width / 2;
754
770
  // 视口, 原空间与反向空间是否都不足判断
@@ -757,20 +773,20 @@ export default class Tooltip extends BaseFoundation {
757
773
  const isViewXOverFlow = this.isOverFlow(clientLeft - marginLeft, restClientRight - marginRight, wrapperRect.width + spacing);
758
774
  const isViewYOverFlowSide = this.isOverFlow(clientBottom - marginTop, restClientTop - marginBottom, wrapperRect.height + spacing);
759
775
  const isViewXOverFlowSide = this.isOverFlow(clientRight - marginLeft, restClientLeft - marginRight, wrapperRect.width + spacing);
760
- const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
761
- const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
762
- const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
763
- const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
776
+ const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
777
+ const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
778
+ const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
779
+ const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
764
780
  // 容器, 原空间与反向空间是否都不足判断
765
781
  // container, whether the original space and the reverse space are insufficient to judge
766
782
  const isContainerYOverFlow = this.isOverFlow(clientTopInContainer - marginTop, restClientBottomInContainer - marginBottom, wrapperRect.height + spacing);
767
783
  const isContainerXOverFlow = this.isOverFlow(clientLeftInContainer - marginLeft, restClientRightInContainer - marginRight, wrapperRect.width + spacing);
768
784
  const isContainerYOverFlowSide = this.isOverFlow(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
769
785
  const isContainerXOverFlowSide = this.isOverFlow(clientRightInContainer - marginLeft, restClientLeftInContainer - marginRight, wrapperRect.width + spacing);
770
- const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
771
- const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
772
- const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
773
- const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
786
+ const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
787
+ const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
788
+ const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
789
+ const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
774
790
  // 综合 viewport + container 判断微调，即视口 + 容器都放置不行时才能考虑位置调整
775
791
  // Comprehensive viewport + container judgment fine-tuning, that is, the position adjustment can only be considered when the viewport + container cannot be placed.
776
792
  const shouldReverseTop = this.getReverse(isViewYOverFlow, isContainerYOverFlow, shouldViewReverseTop, shouldContainerReverseTop);
package/notification/notificationListFoundation.ts CHANGED
@@ -9,11 +9,12 @@ export interface NotificationListProps {
9
9
 
10
10
  export interface NotificationListState {
11
11
  notices: NoticeInstance[];
12
- removedItems: NoticeInstance[]
12
+ removedItems: NoticeInstance[];
13
+ updatedItems: NoticeInstance[]
13
14
  }
14
15
 
15
16
  export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
16
- updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
17
+ updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => void;
17
18
  getNotices: () => NoticeInstance[]
18
19
  }
19
20
 
@@ -46,6 +47,17 @@ export default class NotificationListFoundation extends BaseFoundation<Notificat
46
47
  // return id;
47
48
  }
48
49
 
50
+ has(id: string) {
51
+ return this._adapter.getNotices().some(notice=>notice.id===id);
52
+ }
53
+
54
+ update(id: string, noticeOpts: NoticeProps) {
55
+ let notices = this._adapter.getNotices();
56
+ notices = notices.map((notice) => notice.id === id ? { ...notice, ...noticeOpts }: notice);
57
+ const updatedItems = notices.filter(notice=>notice.id === id);
58
+ this._adapter.updateNotices(notices, [], updatedItems);
59
+ }
60
+
49
61
  removeNotice(id: string) {
50
62
  let notices = this._adapter.getNotices();
51
63
  // let notices = this._adapter.getNotices();
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.44.0",
3
+ "version": "2.45.0-beta.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.44.0",
10
+ "@douyinfe/semi-animation": "2.45.0-beta.0",
11
11
  "async-validator": "^3.5.0",
12
12
  "classnames": "^2.2.6",
13
13
  "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
23
23
  "*.scss",
24
24
  "*.css"
25
25
  ],
26
- "gitHead": "d683a25e4dd9c5fb8dbb069d83ffd24998b14191",
26
+ "gitHead": "7a93b57c88a43db5c47b649741a9b6ba861560f4",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
package/tooltip/foundation.ts CHANGED
@@ -407,10 +407,19 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
407
407
  };
408
408
  const wrapperRect = (isEmpty(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || { ...defaultRect as any };
409
409
  const position = props.position != null ? props.position : this.getProp('position');
410
- const SPACING = spacing != null ? spacing : this.getProp('spacing');
410
+ const RAW_SPACING = spacing != null ? spacing : this.getProp('spacing');
411
411
  const { arrowPointAtCenter, showArrow, arrowBounding } = this.getProps();
412
412
  const pointAtCenter = showArrow && arrowPointAtCenter;
413
413
 
414
+ let SPACING = RAW_SPACING;
415
+ let ANO_SPACING = 0;
416
+ if (typeof RAW_SPACING !== 'number') {
417
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
418
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
419
+ SPACING = isTopOrBottom ? RAW_SPACING.y : RAW_SPACING.x;
420
+ ANO_SPACING = isTopOrBottom ? RAW_SPACING.x : RAW_SPACING.y;
421
+ }
422
+
414
423
  const horizontalArrowWidth = get(arrowBounding, 'width', 24);
415
424
  const verticalArrowHeight = get(arrowBounding, 'width', 24);
416
425
  const arrowOffsetY = get(arrowBounding, 'offsetY', 0);
@@ -446,7 +455,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
446
455
  case 'top':
447
456
  // left = middleX;
448
457
  // top = triggerRect.top - SPACING;
449
- left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX;
458
+ left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
450
459
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
451
460
  translateX = -0.5;
452
461
  translateY = -1;
@@ -454,14 +463,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
454
463
  case 'topLeft':
455
464
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
456
465
  // top = triggerRect.top - SPACING;
457
- left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
466
+ left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING);
458
467
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
459
468
  translateY = -1;
460
469
  break;
461
470
  case 'topRight':
462
471
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
463
472
  // top = triggerRect.top - SPACING;
464
- left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right);
473
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING);
465
474
  top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
466
475
  translateY = -1;
467
476
  translateX = -1;
@@ -471,7 +480,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
471
480
  // top = middleY;
472
481
  // left = isWidthOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
473
482
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
474
- top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight): middleY;
483
+ top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight): middleY + ANO_SPACING;
475
484
  translateX = -1;
476
485
  translateY = -0.5;
477
486
  break;
@@ -479,34 +488,34 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
479
488
  // left = triggerRect.left - SPACING;
480
489
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
481
490
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
482
- top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top);
491
+ top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING);
483
492
  translateX = -1;
484
493
  break;
485
494
  case 'leftBottom':
486
495
  // left = triggerRect.left - SPACING;
487
496
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
488
497
  left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow: triggerRect.left - SPACING;
489
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight: (pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom);
498
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight: (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
490
499
  translateX = -1;
491
500
  translateY = -1;
492
501
  break;
493
502
  case 'bottom':
494
503
  // left = middleX;
495
504
  // top = triggerRect.top + triggerRect.height + SPACING;
496
- left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX;
505
+ left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
497
506
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING: triggerRect.top + triggerRect.height + SPACING;
498
507
  translateX = -0.5;
499
508
  break;
500
509
  case 'bottomLeft':
501
510
  // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
502
511
  // top = triggerRect.bottom + SPACING;
503
- left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
512
+ left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING: triggerRect.left + ANO_SPACING);
504
513
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
505
514
  break;
506
515
  case 'bottomRight':
507
516
  // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
508
517
  // top = triggerRect.bottom + SPACING;
509
- left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right);
518
+ left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING);
510
519
  top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
511
520
  translateX = -1;
512
521
  break;
@@ -514,20 +523,20 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
514
523
  // left = triggerRect.right + SPACING;
515
524
  // top = middleY;
516
525
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
517
- top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight) : middleY;
526
+ top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight) : middleY + ANO_SPACING;
518
527
  translateY = -0.5;
519
528
  break;
520
529
  case 'rightTop':
521
530
  // left = triggerRect.right + SPACING;
522
531
  // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
523
532
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
524
- top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top);
533
+ top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING);
525
534
  break;
526
535
  case 'rightBottom':
527
536
  // left = triggerRect.right + SPACING;
528
537
  // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
529
538
  left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
530
- top = isHeightOverFlow ? containerRect.bottom + offsetHeight : (pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom);
539
+ top = isHeightOverFlow ? containerRect.bottom + offsetHeight : (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
531
540
  translateY = -1;
532
541
  break;
533
542
  case 'leftTopOver':
@@ -723,7 +732,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
723
732
  // place the dom correctly
724
733
  adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect) {
725
734
  const { innerWidth, innerHeight } = window;
726
- const { spacing, margin } = this.getProps();
735
+ const { margin } = this.getProps();
727
736
 
728
737
  const marginLeft = typeof margin === 'number' ? margin : margin.marginLeft;
729
738
  const marginTop = typeof margin === 'number' ? margin : margin.marginTop;
@@ -733,6 +742,16 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
733
742
  let isHeightOverFlow = false;
734
743
  let isWidthOverFlow = false;
735
744
 
745
+ const raw_spacing = this.getProp('spacing');
746
+ let spacing = raw_spacing;
747
+ let ano_spacing = 0;
748
+ if (typeof raw_spacing !== 'number') {
749
+ // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
750
+ const isTopOrBottom = position.includes('top') || position.includes('bottom');
751
+ spacing = isTopOrBottom ? raw_spacing.y : raw_spacing.x;
752
+ ano_spacing = isTopOrBottom ? raw_spacing.x : raw_spacing.y;
753
+ }
754
+
736
755
  if (wrapperRect.width > 0 && wrapperRect.height > 0) {
737
756
  // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
738
757
  // let clientTop = top + translateY * wrapperRect.height - containerRect.scrollTop;
@@ -770,10 +789,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
770
789
  const shouldViewReverseTopOver = restClientTop - marginBottom< wrapperRect.height + spacing && clientBottom - marginTop> wrapperRect.height + spacing;
771
790
  const shouldViewReverseBottomOver = clientBottom - marginTop < wrapperRect.height + spacing && restClientTop - marginBottom > wrapperRect.height + spacing;
772
791
 
773
- const shouldViewReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
774
- const shouldViewReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
775
- const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
776
- const shouldViewReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
792
+ const shouldViewReverseTopSide = restClientTop < wrapperRect.height + ano_spacing && clientBottom > wrapperRect.height + ano_spacing;
793
+ const shouldViewReverseBottomSide = clientBottom < wrapperRect.height + ano_spacing && restClientTop > wrapperRect.height + ano_spacing;
794
+ const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width + ano_spacing && clientRight > wrapperRect.width + ano_spacing;
795
+ const shouldViewReverseRightSide = clientRight < wrapperRect.width + ano_spacing && restClientLeft > wrapperRect.width + ano_spacing;
777
796
 
778
797
  const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
779
798
  const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
@@ -802,10 +821,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
802
821
  const shouldContainerReverseTopOver = this.isReverse(restClientTopInContainer - marginBottom, clientBottomInContainer - marginTop, wrapperRect.height + spacing);
803
822
  const shouldContainerReverseBottomOver = this.isReverse(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
804
823
 
805
- const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height);
806
- const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height);
807
- const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width);
808
- const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width);
824
+ const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height + ano_spacing);
825
+ const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height + ano_spacing);
826
+ const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width + ano_spacing);
827
+ const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width + ano_spacing);
809
828
 
810
829
  const halfHeight = triggerRect.height / 2;
811
830
  const halfWidth = triggerRect.width / 2;
@@ -816,10 +835,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
816
835
  const isViewXOverFlow = this.isOverFlow(clientLeft - marginLeft, restClientRight - marginRight, wrapperRect.width + spacing);
817
836
  const isViewYOverFlowSide = this.isOverFlow(clientBottom - marginTop, restClientTop - marginBottom, wrapperRect.height + spacing);
818
837
  const isViewXOverFlowSide = this.isOverFlow(clientRight - marginLeft, restClientLeft - marginRight, wrapperRect.width + spacing);
819
- const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
820
- const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
821
- const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
822
- const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
838
+ const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
839
+ const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
840
+ const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
841
+ const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
823
842
 
824
843
  // 容器, 原空间与反向空间是否都不足判断
825
844
  // container, whether the original space and the reverse space are insufficient to judge
@@ -827,10 +846,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
827
846
  const isContainerXOverFlow = this.isOverFlow(clientLeftInContainer - marginLeft, restClientRightInContainer - marginRight, wrapperRect.width + spacing);
828
847
  const isContainerYOverFlowSide = this.isOverFlow(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
829
848
  const isContainerXOverFlowSide = this.isOverFlow(clientRightInContainer - marginLeft, restClientLeftInContainer - marginRight, wrapperRect.width + spacing);
830
- const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
831
- const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
832
- const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
833
- const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
849
+ const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
850
+ const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
851
+ const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
852
+ const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
834
853
 
835
854
  // 综合 viewport + container 判断微调，即视口 + 容器都放置不行时才能考虑位置调整
836
855
  // Comprehensive viewport + container judgment fine-tuning, that is, the position adjustment can only be considered when the viewport + container cannot be placed.