@douyinfe/semi-foundation 2.85.0 → 2.86.0

package/button/variables.scss

@@ -76,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
 $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
+$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 tertiary 边框颜色
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled

package/codeHighlight/codeHighlight.scss

@@ -33,8 +33,8 @@ $module: #{$prefix}-codeHighlight;
 
     pre[class*="language-"]::selection,
     code[class*="language-"]::selection,
-    pre[class*="language-"]::mozselection,
-    code[class*="language-"]::mozselection {
+    pre[class*="language-"]::-moz-selection,
+    code[class*="language-"]::-moz-selection {
       text-shadow: none;
       background: #b3d4fc;
     }

package/jsonViewer/foundation.ts

@@ -1,7 +1,8 @@
 import { JsonViewer, JsonViewerOptions, CustomRenderRule } from '@douyinfe/semi-json-viewer-core';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
+import { cssClasses } from './constants';
 export type { JsonViewerOptions, CustomRenderRule };
+
 export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getEditorRef: () => HTMLElement;
     getSearchRef: () => HTMLInputElement;
@@ -22,7 +23,10 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     init() {
         const props = this.getProps();
         const editorRef = this._adapter.getEditorRef();
-        this.jsonViewer = new JsonViewer(editorRef, props.value, props.options);
+        this.jsonViewer = new JsonViewer(editorRef, props.value, {
+            prefixCls: cssClasses.PREFIX,
+            ...props.options
+        });
         this.jsonViewer.emitter.on('customRender', (e) => {
             this._adapter.notifyCustomRender(e.customRenderMap);
         });

package/lib/cjs/button/variables.scss

@@ -76,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
 $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
+$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 tertiary 边框颜色
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled

package/lib/cjs/codeHighlight/codeHighlight.css

@@ -28,8 +28,8 @@
 }
 .semi-codeHighlight-defaultTheme pre[class*=language-]::selection,
 .semi-codeHighlight-defaultTheme code[class*=language-]::selection,
-.semi-codeHighlight-defaultTheme pre[class*=language-]::mozselection,
-.semi-codeHighlight-defaultTheme code[class*=language-]::mozselection {
+.semi-codeHighlight-defaultTheme pre[class*=language-]::-moz-selection,
+.semi-codeHighlight-defaultTheme code[class*=language-]::-moz-selection {
   text-shadow: none;
   background: #b3d4fc;
 }

package/lib/cjs/codeHighlight/codeHighlight.scss

@@ -33,8 +33,8 @@ $module: #{$prefix}-codeHighlight;
 
     pre[class*="language-"]::selection,
     code[class*="language-"]::selection,
-    pre[class*="language-"]::mozselection,
-    code[class*="language-"]::mozselection {
+    pre[class*="language-"]::-moz-selection,
+    code[class*="language-"]::-moz-selection {
       text-shadow: none;
       background: #b3d4fc;
     }

package/lib/cjs/jsonViewer/foundation.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _semiJsonViewerCore = require("@douyinfe/semi-json-viewer-core");
 var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class JsonViewerFoundation extends _foundation.default {
   constructor(adapter) {
@@ -15,7 +16,9 @@ class JsonViewerFoundation extends _foundation.default {
   init() {
     const props = this.getProps();
     const editorRef = this._adapter.getEditorRef();
-    this.jsonViewer = new _semiJsonViewerCore.JsonViewer(editorRef, props.value, props.options);
+    this.jsonViewer = new _semiJsonViewerCore.JsonViewer(editorRef, props.value, Object.assign({
+      prefixCls: _constants.cssClasses.PREFIX
+    }, props.options));
     this.jsonViewer.emitter.on('customRender', e => {
       this._adapter.notifyCustomRender(e.customRenderMap);
     });

package/lib/cjs/tagInput/tagInput.css

@@ -32,6 +32,7 @@
 }
 .semi-tagInput-sortable-item {
   position: relative;
+  max-width: 100%;
 }
 .semi-tagInput-sortable-item-over {
   overflow: visible;
@@ -82,6 +83,7 @@
   border-color: var(--semi-color-danger);
 }
 .semi-tagInput-disabled {
+  background-color: var(--semi-color-disabled-fill);
   cursor: not-allowed;
 }
 .semi-tagInput-disabled .semi-tagInput-clearBtn,
@@ -114,6 +116,7 @@
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
+  max-width: 100%;
 }
 .semi-tagInput-wrapper-tag-size-small {
   margin-top: 1px;

package/lib/cjs/tagInput/tagInput.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-tagInput;
 
     &-sortable-item {
         position: relative;
+        max-width: 100%;
         &-over {
             overflow: visible;
             &::before {
@@ -104,6 +105,7 @@ $module: #{$prefix}-tagInput;
     }
 
     &-disabled {
+        background-color: $color-tagInput_disabled-bg;
         cursor: not-allowed;
 
         .#{$module}-clearBtn,
@@ -139,6 +141,7 @@ $module: #{$prefix}-tagInput;
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
+            max-width: 100%;
 
             &-size {
                 &-small {

package/lib/cjs/tagInput/variables.scss

@@ -2,6 +2,7 @@ $color-tagInput-icon-default: var(--semi-color-text-2); // 标签输入框图标
 $color-tagInput-maxTagCount-default: var(--semi-color-text-0); // 标签输入框限制标签展示数量文字颜色
 $color-tagInput-icon-hover: var(--semi-color-primary-hover); // 标签输入框图标颜色 - 悬浮
 $color-tagInput_disabled-text-default: var(--semi-color-disabled-text); // 标签输入框禁用文字颜色
+$color-tagInput_disabled-bg: var(--semi-color-disabled-fill); // 标签输入框禁用背景色
 $color-tagInput_default-bg-focus: var(--semi-color-fill-0); // 标签输入框背景颜色 - 选中态
 
 $color-tagInput-border-default: transparent; // 标签输入框描边颜色 - 默认

package/lib/cjs/treeSelect/treeSelect.css

@@ -19,11 +19,6 @@
   background-color: var(--semi-color-fill-1);
   border: 1px solid transparent;
 }
-.semi-tree-select:focus {
-  border: 1px solid var(--semi-color-focus-border);
-  background-color: var(--semi-color-fill-0);
-  outline: 0;
-}
 .semi-tree-select:active {
   background-color: var(--semi-color-fill-2);
 }

package/lib/cjs/treeSelect/treeSelect.scss

@@ -22,11 +22,11 @@ $module: #{$prefix}-tree-select;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
-    &:focus {
-        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
-        background-color: $color-treeSelect_default-bg-focus;
-        outline: 0;
-    }
+    // &:focus {
+    //     border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+    //     background-color: $color-treeSelect_default-bg-focus;
+    //     outline: 0;
+    // }
 
     &:active{
         background-color: $color-treeSelect_default-bg-active;

package/lib/es/button/variables.scss

@@ -76,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
 $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
+$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 tertiary 边框颜色
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled

package/lib/es/codeHighlight/codeHighlight.css

@@ -28,8 +28,8 @@
 }
 .semi-codeHighlight-defaultTheme pre[class*=language-]::selection,
 .semi-codeHighlight-defaultTheme code[class*=language-]::selection,
-.semi-codeHighlight-defaultTheme pre[class*=language-]::mozselection,
-.semi-codeHighlight-defaultTheme code[class*=language-]::mozselection {
+.semi-codeHighlight-defaultTheme pre[class*=language-]::-moz-selection,
+.semi-codeHighlight-defaultTheme code[class*=language-]::-moz-selection {
   text-shadow: none;
   background: #b3d4fc;
 }

package/lib/es/codeHighlight/codeHighlight.scss

@@ -33,8 +33,8 @@ $module: #{$prefix}-codeHighlight;
 
     pre[class*="language-"]::selection,
     code[class*="language-"]::selection,
-    pre[class*="language-"]::mozselection,
-    code[class*="language-"]::mozselection {
+    pre[class*="language-"]::-moz-selection,
+    code[class*="language-"]::-moz-selection {
       text-shadow: none;
       background: #b3d4fc;
     }

package/lib/es/jsonViewer/foundation.js

@@ -1,5 +1,6 @@
 import { JsonViewer } from '@douyinfe/semi-json-viewer-core';
 import BaseFoundation from '../base/foundation';
+import { cssClasses } from './constants';
 class JsonViewerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, JsonViewerFoundation), adapter));
@@ -8,7 +9,9 @@ class JsonViewerFoundation extends BaseFoundation {
   init() {
     const props = this.getProps();
     const editorRef = this._adapter.getEditorRef();
-    this.jsonViewer = new JsonViewer(editorRef, props.value, props.options);
+    this.jsonViewer = new JsonViewer(editorRef, props.value, Object.assign({
+      prefixCls: cssClasses.PREFIX
+    }, props.options));
     this.jsonViewer.emitter.on('customRender', e => {
       this._adapter.notifyCustomRender(e.customRenderMap);
     });

package/lib/es/tagInput/tagInput.css

@@ -32,6 +32,7 @@
 }
 .semi-tagInput-sortable-item {
   position: relative;
+  max-width: 100%;
 }
 .semi-tagInput-sortable-item-over {
   overflow: visible;
@@ -82,6 +83,7 @@
   border-color: var(--semi-color-danger);
 }
 .semi-tagInput-disabled {
+  background-color: var(--semi-color-disabled-fill);
   cursor: not-allowed;
 }
 .semi-tagInput-disabled .semi-tagInput-clearBtn,
@@ -114,6 +116,7 @@
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
+  max-width: 100%;
 }
 .semi-tagInput-wrapper-tag-size-small {
   margin-top: 1px;

package/lib/es/tagInput/tagInput.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-tagInput;
 
     &-sortable-item {
         position: relative;
+        max-width: 100%;
         &-over {
             overflow: visible;
             &::before {
@@ -104,6 +105,7 @@ $module: #{$prefix}-tagInput;
     }
 
     &-disabled {
+        background-color: $color-tagInput_disabled-bg;
         cursor: not-allowed;
 
         .#{$module}-clearBtn,
@@ -139,6 +141,7 @@ $module: #{$prefix}-tagInput;
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
+            max-width: 100%;
 
             &-size {
                 &-small {

package/lib/es/tagInput/variables.scss

@@ -2,6 +2,7 @@ $color-tagInput-icon-default: var(--semi-color-text-2); // 标签输入框图标
 $color-tagInput-maxTagCount-default: var(--semi-color-text-0); // 标签输入框限制标签展示数量文字颜色
 $color-tagInput-icon-hover: var(--semi-color-primary-hover); // 标签输入框图标颜色 - 悬浮
 $color-tagInput_disabled-text-default: var(--semi-color-disabled-text); // 标签输入框禁用文字颜色
+$color-tagInput_disabled-bg: var(--semi-color-disabled-fill); // 标签输入框禁用背景色
 $color-tagInput_default-bg-focus: var(--semi-color-fill-0); // 标签输入框背景颜色 - 选中态
 
 $color-tagInput-border-default: transparent; // 标签输入框描边颜色 - 默认

package/lib/es/treeSelect/treeSelect.css

@@ -19,11 +19,6 @@
   background-color: var(--semi-color-fill-1);
   border: 1px solid transparent;
 }
-.semi-tree-select:focus {
-  border: 1px solid var(--semi-color-focus-border);
-  background-color: var(--semi-color-fill-0);
-  outline: 0;
-}
 .semi-tree-select:active {
   background-color: var(--semi-color-fill-2);
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -22,11 +22,11 @@ $module: #{$prefix}-tree-select;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
-    &:focus {
-        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
-        background-color: $color-treeSelect_default-bg-focus;
-        outline: 0;
-    }
+    // &:focus {
+    //     border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+    //     background-color: $color-treeSelect_default-bg-focus;
+    //     outline: 0;
+    // }
 
     &:active{
         background-color: $color-treeSelect_default-bg-active;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.85.0",
+    "version": "2.86.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.85.0",
-        "@douyinfe/semi-json-viewer-core": "2.85.0",
+        "@douyinfe/semi-animation": "2.86.0",
+        "@douyinfe/semi-json-viewer-core": "2.86.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "6ebf784e5bf044a1588c7e99037872e01d5bf154",
+    "gitHead": "772a43ea321ffc267e322f9c14d1b65eec9ea834",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tagInput/tagInput.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-tagInput;
 
     &-sortable-item {
         position: relative;
+        max-width: 100%;
         &-over {
             overflow: visible;
             &::before {
@@ -104,6 +105,7 @@ $module: #{$prefix}-tagInput;
     }
 
     &-disabled {
+        background-color: $color-tagInput_disabled-bg;
         cursor: not-allowed;
 
         .#{$module}-clearBtn,
@@ -139,6 +141,7 @@ $module: #{$prefix}-tagInput;
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
+            max-width: 100%;
 
             &-size {
                 &-small {

package/tagInput/variables.scss

@@ -2,6 +2,7 @@ $color-tagInput-icon-default: var(--semi-color-text-2); // 标签输入框图标
 $color-tagInput-maxTagCount-default: var(--semi-color-text-0); // 标签输入框限制标签展示数量文字颜色
 $color-tagInput-icon-hover: var(--semi-color-primary-hover); // 标签输入框图标颜色 - 悬浮
 $color-tagInput_disabled-text-default: var(--semi-color-disabled-text); // 标签输入框禁用文字颜色
+$color-tagInput_disabled-bg: var(--semi-color-disabled-fill); // 标签输入框禁用背景色
 $color-tagInput_default-bg-focus: var(--semi-color-fill-0); // 标签输入框背景颜色 - 选中态
 
 $color-tagInput-border-default: transparent; // 标签输入框描边颜色 - 默认

package/treeSelect/treeSelect.scss

@@ -22,11 +22,11 @@ $module: #{$prefix}-tree-select;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
-    &:focus {
-        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
-        background-color: $color-treeSelect_default-bg-focus;
-        outline: 0;
-    }
+    // &:focus {
+    //     border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+    //     background-color: $color-treeSelect_default-bg-focus;
+    //     outline: 0;
+    // }
 
     &:active{
         background-color: $color-treeSelect_default-bg-active;