@douyinfe/semi-foundation 2.89.0 → 2.89.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.
@@ -3,6 +3,9 @@ import BaseFoundation, { DefaultAdapter } from "../base/foundation";
3
3
  import { getUuidv4 } from "../utils/uuid";
4
4
  import { strings } from "./constants";
5
5
  import { Animation } from '@douyinfe/semi-animation';
6
+ import 'prismjs';
7
+ import "prismjs/components/prism-jsx.js";
8
+ import "prismjs/components/prism-tsx.js";
6
9
 
7
10
  export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
8
11
  getContainerRef: () => HTMLDivElement;
@@ -276,36 +276,39 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
276
276
  return validRichText || validAttachment;
277
277
  }
278
278
 
279
+ handleStopGenerate = () => {
280
+ const { generating } = this.getProps();
281
+ generating && this._adapter.notifyStopGenerate();
282
+ }
283
+
279
284
  handleSend = () => {
280
285
  const { generating, transformer } = this.getProps();
281
286
  if (generating) {
282
- this._adapter.notifyStopGenerate();
283
287
  return;
284
- } else {
285
- if (!this.canSend()) {
286
- return;
287
- }
288
- const references = this.getProp('references');
289
- const { attachments } = this.getStates();
290
- const editor = this._adapter.getEditor();
291
- let richTextResult = [];
292
- if (editor) {
293
- const json = editor.getJSON?.();
294
- richTextResult = transformJSONResult(json, transformer);
295
- }
296
- // close popup layer for template/skill/suggestion
297
- this.setState({
298
- templateVisible: false,
299
- skillVisible: false,
300
- suggestionVisible: false,
301
- });
302
- this._adapter.notifyMessageSend({
303
- references,
304
- attachments,
305
- inputContents: richTextResult,
306
- setup: this._adapter.getConfigureValue() ?? {}
307
- });
308
288
  }
289
+ if (!this.canSend()) {
290
+ return;
291
+ }
292
+ const references = this.getProp('references');
293
+ const { attachments } = this.getStates();
294
+ const editor = this._adapter.getEditor();
295
+ let richTextResult = [];
296
+ if (editor) {
297
+ const json = editor.getJSON?.();
298
+ richTextResult = transformJSONResult(json, transformer);
299
+ }
300
+ // close popup layer for template/skill/suggestion
301
+ this.setState({
302
+ templateVisible: false,
303
+ skillVisible: false,
304
+ suggestionVisible: false,
305
+ });
306
+ this._adapter.notifyMessageSend({
307
+ references,
308
+ attachments,
309
+ inputContents: richTextResult,
310
+ setup: this._adapter.getConfigureValue() ?? {}
311
+ });
309
312
  }
310
313
 
311
314
  handleContainerMouseDown = (e: React.MouseEvent) => {
@@ -4,6 +4,10 @@ import { Animation } from '@douyinfe/semi-animation';
4
4
  import { debounce } from "lodash";
5
5
  import { getUuidv4 } from "../utils/uuid";
6
6
  import { handlePrevent } from "../utils/a11y";
7
+ // code's default height type is html/js/css, add jsx & tsx;
8
+ import 'prismjs';
9
+ import "prismjs/components/prism-jsx.js";
10
+ import "prismjs/components/prism-tsx.js";
7
11
 
8
12
  const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE,
9
13
  SCROLL_ANIMATION_TIME, SHOW_SCROLL_GAP
@@ -1,5 +1,8 @@
1
1
  /// <reference types="lodash" />
2
2
  import BaseFoundation, { DefaultAdapter } from "../base/foundation";
3
+ import 'prismjs';
4
+ import "prismjs/components/prism-jsx.js";
5
+ import "prismjs/components/prism-tsx.js";
3
6
  export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
4
7
  getContainerRef: () => HTMLDivElement;
5
8
  setWheelScroll: (flag: boolean) => void;
@@ -9,6 +9,9 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
9
9
  var _uuid = require("../utils/uuid");
10
10
  var _constants = require("./constants");
11
11
  var _semiAnimation = require("@douyinfe/semi-animation");
12
+ require("prismjs");
13
+ require("prismjs/components/prism-jsx.js");
14
+ require("prismjs/components/prism-tsx.js");
12
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
16
  class DialogueFoundation extends _foundation.default {
14
17
  constructor(adapter) {
@@ -51,6 +51,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
51
51
  onUploadChange: (props: any) => void;
52
52
  _isRichTextEmpty: () => boolean;
53
53
  canSend: () => any;
54
+ handleStopGenerate: () => void;
54
55
  handleSend: () => void;
55
56
  handleContainerMouseDown: (e: React.MouseEvent) => void;
56
57
  handleContainerClick: (e: React.MouseEvent) => void;
@@ -256,6 +256,12 @@ class AIChatInputFoundation extends _foundation.default {
256
256
  const validAttachment = Array.isArray(attachments) && attachments.length > 0;
257
257
  return validRichText || validAttachment;
258
258
  };
259
+ this.handleStopGenerate = () => {
260
+ const {
261
+ generating
262
+ } = this.getProps();
263
+ generating && this._adapter.notifyStopGenerate();
264
+ };
259
265
  this.handleSend = () => {
260
266
  var _a, _b;
261
267
  const {
@@ -263,35 +269,33 @@ class AIChatInputFoundation extends _foundation.default {
263
269
  transformer
264
270
  } = this.getProps();
265
271
  if (generating) {
266
- this._adapter.notifyStopGenerate();
267
272
  return;
268
- } else {
269
- if (!this.canSend()) {
270
- return;
271
- }
272
- const references = this.getProp('references');
273
- const {
274
- attachments
275
- } = this.getStates();
276
- const editor = this._adapter.getEditor();
277
- let richTextResult = [];
278
- if (editor) {
279
- const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
280
- richTextResult = (0, _utils.transformJSONResult)(json, transformer);
281
- }
282
- // close popup layer for template/skill/suggestion
283
- this.setState({
284
- templateVisible: false,
285
- skillVisible: false,
286
- suggestionVisible: false
287
- });
288
- this._adapter.notifyMessageSend({
289
- references,
290
- attachments,
291
- inputContents: richTextResult,
292
- setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
293
- });
294
273
  }
274
+ if (!this.canSend()) {
275
+ return;
276
+ }
277
+ const references = this.getProp('references');
278
+ const {
279
+ attachments
280
+ } = this.getStates();
281
+ const editor = this._adapter.getEditor();
282
+ let richTextResult = [];
283
+ if (editor) {
284
+ const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
285
+ richTextResult = (0, _utils.transformJSONResult)(json, transformer);
286
+ }
287
+ // close popup layer for template/skill/suggestion
288
+ this.setState({
289
+ templateVisible: false,
290
+ skillVisible: false,
291
+ suggestionVisible: false
292
+ });
293
+ this._adapter.notifyMessageSend({
294
+ references,
295
+ attachments,
296
+ inputContents: richTextResult,
297
+ setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
298
+ });
295
299
  };
296
300
  this.handleContainerMouseDown = e => {
297
301
  this.mouseDownTarget = e.target;
@@ -1,5 +1,8 @@
1
1
  /// <reference types="lodash" />
2
2
  import BaseFoundation, { DefaultAdapter } from "../base/foundation";
3
+ import 'prismjs';
4
+ import "prismjs/components/prism-jsx.js";
5
+ import "prismjs/components/prism-tsx.js";
3
6
  export interface Content {
4
7
  type: 'text' | 'image_url' | 'file_url';
5
8
  text?: string;
@@ -10,7 +10,12 @@ var _constants = require("./constants");
10
10
  var _semiAnimation = require("@douyinfe/semi-animation");
11
11
  var _uuid = require("../utils/uuid");
12
12
  var _a11y = require("../utils/a11y");
13
+ require("prismjs");
14
+ require("prismjs/components/prism-jsx.js");
15
+ require("prismjs/components/prism-tsx.js");
13
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
+ // code's default height type is html/js/css, add jsx & tsx;
18
+
14
19
  const {
15
20
  PIC_PREFIX,
16
21
  PIC_SUFFIX_ARRAY,
@@ -388,36 +388,41 @@
388
388
  .semi-table .semi-table-column-filter.on {
389
389
  color: var(--semi-color-primary);
390
390
  }
391
- .semi-table-bordered .semi-table-title {
391
+ .semi-table-bordered > .semi-table-title {
392
392
  padding-left: 16px;
393
393
  padding-right: 16px;
394
394
  border-top: 1px solid var(--semi-color-border);
395
395
  border-right: 1px solid var(--semi-color-border);
396
396
  border-left: 1px solid var(--semi-color-border);
397
397
  }
398
- .semi-table-bordered .semi-table-container {
398
+ .semi-table-bordered > .semi-table-container {
399
399
  border: 1px solid var(--semi-color-border);
400
400
  border-right: 0;
401
401
  border-bottom: 0;
402
402
  }
403
- .semi-table-bordered .semi-table-header::-webkit-scrollbar {
403
+ :where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
404
404
  border-right: 1px solid var(--semi-color-border);
405
405
  }
406
- .semi-table-bordered .semi-table-footer {
406
+ :where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
407
407
  border-left: 1px solid var(--semi-color-border);
408
408
  border-right: 1px solid var(--semi-color-border);
409
409
  border-bottom: 1px solid var(--semi-color-border);
410
410
  }
411
- .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
411
+ :where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
412
+ border-right: 1px solid var(--semi-color-border);
413
+ }
414
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
412
415
  background-color: transparent;
413
416
  }
414
- .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
415
- .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
417
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
416
418
  border-right: 1px solid var(--semi-color-border);
417
419
  }
418
- .semi-table-bordered .semi-table-placeholder {
420
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
419
421
  border-right: 1px solid var(--semi-color-border);
420
422
  }
423
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
424
+ background-color: transparent;
425
+ }
421
426
  .semi-table-placeholder {
422
427
  position: sticky;
423
428
  left: 0px;
@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
508
508
  }
509
509
 
510
510
  &-bordered {
511
- .#{$module}-title {
511
+ & > .#{$module}-title {
512
512
  padding-left: $spacing-table_bordered_titler-paddingLeft;
513
513
  padding-right: $spacing-table_bordered_titler-paddingRight;
514
514
  border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
516
516
  border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
517
517
  }
518
518
 
519
- .#{$module}-container {
519
+ & > .#{$module}-container {
520
520
  border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
521
521
  border-right: 0;
522
522
  border-bottom: 0;
523
523
  }
524
524
 
525
- .#{$module}-header {
526
- &::-webkit-scrollbar {
527
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
525
+ :where(&) {
526
+ & > .#{$module}-container {
527
+ & > .#{$module}-header {
528
+ &::-webkit-scrollbar {
529
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
530
+ }
531
+ }
532
+
533
+ & > .#{$module}-footer {
534
+ border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
535
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
536
+ border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
537
+ }
528
538
  }
529
539
  }
530
540
 
531
- .#{$module}-footer {
532
- border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
533
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
534
- border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
541
+ :where(& > .#{$module}-container) {
542
+ & > .#{$module}-body > .#{$module}-placeholder {
543
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
544
+ }
535
545
  }
536
546
 
537
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
538
- .react-resizable-handle {
539
- background-color: transparent;
547
+ :where(& > .#{$module}-container > .#{$module}-body) {
548
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
549
+ .react-resizable-handle {
550
+ background-color: transparent;
551
+ }
540
552
  }
541
- }
542
553
 
543
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
544
- .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
545
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
554
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
555
+ & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
556
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
557
+ }
546
558
  }
547
559
 
548
- .#{$module}-placeholder {
549
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
560
+ :where(& > .#{$module}-container > .#{$module}-header) {
561
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
562
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
563
+
564
+ .react-resizable-handle {
565
+ background-color: transparent;
566
+ }
567
+ }
550
568
  }
551
569
  }
552
570
 
@@ -1,5 +1,8 @@
1
1
  /// <reference types="lodash" />
2
2
  import BaseFoundation, { DefaultAdapter } from "../base/foundation";
3
+ import 'prismjs';
4
+ import "prismjs/components/prism-jsx.js";
5
+ import "prismjs/components/prism-tsx.js";
3
6
  export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
4
7
  getContainerRef: () => HTMLDivElement;
5
8
  setWheelScroll: (flag: boolean) => void;
@@ -3,6 +3,9 @@ import BaseFoundation from "../base/foundation";
3
3
  import { getUuidv4 } from "../utils/uuid";
4
4
  import { strings } from "./constants";
5
5
  import { Animation } from '@douyinfe/semi-animation';
6
+ import 'prismjs';
7
+ import "prismjs/components/prism-jsx.js";
8
+ import "prismjs/components/prism-tsx.js";
6
9
  export default class DialogueFoundation extends BaseFoundation {
7
10
  constructor(adapter) {
8
11
  super(Object.assign({}, adapter));
@@ -51,6 +51,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
51
51
  onUploadChange: (props: any) => void;
52
52
  _isRichTextEmpty: () => boolean;
53
53
  canSend: () => any;
54
+ handleStopGenerate: () => void;
54
55
  handleSend: () => void;
55
56
  handleContainerMouseDown: (e: React.MouseEvent) => void;
56
57
  handleContainerClick: (e: React.MouseEvent) => void;
@@ -249,6 +249,12 @@ export default class AIChatInputFoundation extends BaseFoundation {
249
249
  const validAttachment = Array.isArray(attachments) && attachments.length > 0;
250
250
  return validRichText || validAttachment;
251
251
  };
252
+ this.handleStopGenerate = () => {
253
+ const {
254
+ generating
255
+ } = this.getProps();
256
+ generating && this._adapter.notifyStopGenerate();
257
+ };
252
258
  this.handleSend = () => {
253
259
  var _a, _b;
254
260
  const {
@@ -256,35 +262,33 @@ export default class AIChatInputFoundation extends BaseFoundation {
256
262
  transformer
257
263
  } = this.getProps();
258
264
  if (generating) {
259
- this._adapter.notifyStopGenerate();
260
265
  return;
261
- } else {
262
- if (!this.canSend()) {
263
- return;
264
- }
265
- const references = this.getProp('references');
266
- const {
267
- attachments
268
- } = this.getStates();
269
- const editor = this._adapter.getEditor();
270
- let richTextResult = [];
271
- if (editor) {
272
- const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
273
- richTextResult = transformJSONResult(json, transformer);
274
- }
275
- // close popup layer for template/skill/suggestion
276
- this.setState({
277
- templateVisible: false,
278
- skillVisible: false,
279
- suggestionVisible: false
280
- });
281
- this._adapter.notifyMessageSend({
282
- references,
283
- attachments,
284
- inputContents: richTextResult,
285
- setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
286
- });
287
266
  }
267
+ if (!this.canSend()) {
268
+ return;
269
+ }
270
+ const references = this.getProp('references');
271
+ const {
272
+ attachments
273
+ } = this.getStates();
274
+ const editor = this._adapter.getEditor();
275
+ let richTextResult = [];
276
+ if (editor) {
277
+ const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
278
+ richTextResult = transformJSONResult(json, transformer);
279
+ }
280
+ // close popup layer for template/skill/suggestion
281
+ this.setState({
282
+ templateVisible: false,
283
+ skillVisible: false,
284
+ suggestionVisible: false
285
+ });
286
+ this._adapter.notifyMessageSend({
287
+ references,
288
+ attachments,
289
+ inputContents: richTextResult,
290
+ setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
291
+ });
288
292
  };
289
293
  this.handleContainerMouseDown = e => {
290
294
  this.mouseDownTarget = e.target;
@@ -1,5 +1,8 @@
1
1
  /// <reference types="lodash" />
2
2
  import BaseFoundation, { DefaultAdapter } from "../base/foundation";
3
+ import 'prismjs';
4
+ import "prismjs/components/prism-jsx.js";
5
+ import "prismjs/components/prism-tsx.js";
3
6
  export interface Content {
4
7
  type: 'text' | 'image_url' | 'file_url';
5
8
  text?: string;
@@ -4,6 +4,10 @@ import { strings } from "./constants";
4
4
  import { Animation } from '@douyinfe/semi-animation';
5
5
  import { getUuidv4 } from "../utils/uuid";
6
6
  import { handlePrevent } from "../utils/a11y";
7
+ // code's default height type is html/js/css, add jsx & tsx;
8
+ import 'prismjs';
9
+ import "prismjs/components/prism-jsx.js";
10
+ import "prismjs/components/prism-tsx.js";
7
11
  const {
8
12
  PIC_PREFIX,
9
13
  PIC_SUFFIX_ARRAY,
@@ -388,36 +388,41 @@
388
388
  .semi-table .semi-table-column-filter.on {
389
389
  color: var(--semi-color-primary);
390
390
  }
391
- .semi-table-bordered .semi-table-title {
391
+ .semi-table-bordered > .semi-table-title {
392
392
  padding-left: 16px;
393
393
  padding-right: 16px;
394
394
  border-top: 1px solid var(--semi-color-border);
395
395
  border-right: 1px solid var(--semi-color-border);
396
396
  border-left: 1px solid var(--semi-color-border);
397
397
  }
398
- .semi-table-bordered .semi-table-container {
398
+ .semi-table-bordered > .semi-table-container {
399
399
  border: 1px solid var(--semi-color-border);
400
400
  border-right: 0;
401
401
  border-bottom: 0;
402
402
  }
403
- .semi-table-bordered .semi-table-header::-webkit-scrollbar {
403
+ :where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
404
404
  border-right: 1px solid var(--semi-color-border);
405
405
  }
406
- .semi-table-bordered .semi-table-footer {
406
+ :where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
407
407
  border-left: 1px solid var(--semi-color-border);
408
408
  border-right: 1px solid var(--semi-color-border);
409
409
  border-bottom: 1px solid var(--semi-color-border);
410
410
  }
411
- .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
411
+ :where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
412
+ border-right: 1px solid var(--semi-color-border);
413
+ }
414
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
412
415
  background-color: transparent;
413
416
  }
414
- .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
415
- .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
417
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
416
418
  border-right: 1px solid var(--semi-color-border);
417
419
  }
418
- .semi-table-bordered .semi-table-placeholder {
420
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
419
421
  border-right: 1px solid var(--semi-color-border);
420
422
  }
423
+ :where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
424
+ background-color: transparent;
425
+ }
421
426
  .semi-table-placeholder {
422
427
  position: sticky;
423
428
  left: 0px;
@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
508
508
  }
509
509
 
510
510
  &-bordered {
511
- .#{$module}-title {
511
+ & > .#{$module}-title {
512
512
  padding-left: $spacing-table_bordered_titler-paddingLeft;
513
513
  padding-right: $spacing-table_bordered_titler-paddingRight;
514
514
  border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
516
516
  border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
517
517
  }
518
518
 
519
- .#{$module}-container {
519
+ & > .#{$module}-container {
520
520
  border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
521
521
  border-right: 0;
522
522
  border-bottom: 0;
523
523
  }
524
524
 
525
- .#{$module}-header {
526
- &::-webkit-scrollbar {
527
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
525
+ :where(&) {
526
+ & > .#{$module}-container {
527
+ & > .#{$module}-header {
528
+ &::-webkit-scrollbar {
529
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
530
+ }
531
+ }
532
+
533
+ & > .#{$module}-footer {
534
+ border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
535
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
536
+ border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
537
+ }
528
538
  }
529
539
  }
530
540
 
531
- .#{$module}-footer {
532
- border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
533
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
534
- border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
541
+ :where(& > .#{$module}-container) {
542
+ & > .#{$module}-body > .#{$module}-placeholder {
543
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
544
+ }
535
545
  }
536
546
 
537
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
538
- .react-resizable-handle {
539
- background-color: transparent;
547
+ :where(& > .#{$module}-container > .#{$module}-body) {
548
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
549
+ .react-resizable-handle {
550
+ background-color: transparent;
551
+ }
540
552
  }
541
- }
542
553
 
543
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
544
- .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
545
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
554
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
555
+ & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
556
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
557
+ }
546
558
  }
547
559
 
548
- .#{$module}-placeholder {
549
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
560
+ :where(& > .#{$module}-container > .#{$module}-header) {
561
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
562
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
563
+
564
+ .react-resizable-handle {
565
+ background-color: transparent;
566
+ }
567
+ }
550
568
  }
551
569
  }
552
570
 
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.89.0",
3
+ "version": "2.89.1",
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.89.0",
11
- "@douyinfe/semi-json-viewer-core": "2.89.0",
10
+ "@douyinfe/semi-animation": "2.89.1",
11
+ "@douyinfe/semi-json-viewer-core": "2.89.1",
12
12
  "@mdx-js/mdx": "^3.0.1",
13
13
  "async-validator": "^3.5.0",
14
14
  "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
29
29
  "*.scss",
30
30
  "*.css"
31
31
  ],
32
- "gitHead": "9928f1af6b523f59aaf103f4afd4b8ea95469dd5",
32
+ "gitHead": "ed705036239934698a8101b2fd4f84e362e1401d",
33
33
  "devDependencies": {
34
34
  "@babel/plugin-transform-runtime": "^7.15.8",
35
35
  "@babel/preset-env": "^7.15.8",
package/table/table.scss CHANGED
@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
508
508
  }
509
509
 
510
510
  &-bordered {
511
- .#{$module}-title {
511
+ & > .#{$module}-title {
512
512
  padding-left: $spacing-table_bordered_titler-paddingLeft;
513
513
  padding-right: $spacing-table_bordered_titler-paddingRight;
514
514
  border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
516
516
  border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
517
517
  }
518
518
 
519
- .#{$module}-container {
519
+ & > .#{$module}-container {
520
520
  border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
521
521
  border-right: 0;
522
522
  border-bottom: 0;
523
523
  }
524
524
 
525
- .#{$module}-header {
526
- &::-webkit-scrollbar {
527
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
525
+ :where(&) {
526
+ & > .#{$module}-container {
527
+ & > .#{$module}-header {
528
+ &::-webkit-scrollbar {
529
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
530
+ }
531
+ }
532
+
533
+ & > .#{$module}-footer {
534
+ border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
535
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
536
+ border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
537
+ }
528
538
  }
529
539
  }
530
540
 
531
- .#{$module}-footer {
532
- border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
533
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
534
- border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
541
+ :where(& > .#{$module}-container) {
542
+ & > .#{$module}-body > .#{$module}-placeholder {
543
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
544
+ }
535
545
  }
536
546
 
537
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
538
- .react-resizable-handle {
539
- background-color: transparent;
547
+ :where(& > .#{$module}-container > .#{$module}-body) {
548
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
549
+ .react-resizable-handle {
550
+ background-color: transparent;
551
+ }
540
552
  }
541
- }
542
553
 
543
- .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
544
- .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
545
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
554
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
555
+ & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
556
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
557
+ }
546
558
  }
547
559
 
548
- .#{$module}-placeholder {
549
- border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
560
+ :where(& > .#{$module}-container > .#{$module}-header) {
561
+ & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
562
+ border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
563
+
564
+ .react-resizable-handle {
565
+ background-color: transparent;
566
+ }
567
+ }
550
568
  }
551
569
  }
552
570