@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/anchor/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isArray, get } from 'lodash-es';
+import { isArray, get } from 'lodash';
 import scrollIntoView, { CustomBehaviorOptions } from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
 import React from 'react';

package/autoComplete/autoComplete.scss

@@ -1,7 +1,8 @@
-$module: #{$prefix}-autocomplete;
-
 @import "./variables.scss";
 @import "../select/option.scss";
+
+$module: #{$prefix}-autocomplete;
+
 .#{$module} {
     cursor: text;
     display: inline-flex;

package/autoComplete/foundation.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-const, max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isString, isNumber, isUndefined, isObject } from 'lodash-es';
+import { isString, isNumber, isUndefined, isObject } from 'lodash';
 import warning from '../utils/warning';
 import KeyCode from '../utils/keyCode';
 

package/base/foundation.ts

@@ -5,7 +5,7 @@
  */
  
 import log from '../utils/log';
-import { noop } from 'lodash-es';
+import { noop } from 'lodash';
 
 export type noopFunction = (...args: any) => any;
 // eslint-disable-next-line

package/cascader/foundation.ts

@@ -1,4 +1,4 @@
-import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes } from 'lodash-es';
+import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     filter,

package/cascader/util.ts

@@ -2,7 +2,7 @@ import {
     isNull,
     isUndefined,
     isEqual
-} from 'lodash-es';
+} from 'lodash';
 
 function getPosition(level: any, index: any) {
     return `${level}-${index}`;

package/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

package/checkbox/checkboxFoundation.ts

@@ -8,6 +8,9 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
@@ -28,7 +31,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    getEvent(checked: boolean, e: MouseEvent) {
+    getEvent(checked: boolean, e: any) {
         const props = this.getProps();
         const cbValue = {
             target: {
@@ -41,16 +44,23 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
             preventDefault: () => {
                 e.preventDefault();
             },
+            nativeEvent: {
+                stopImmediatePropagation: () => {
+                    if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+                        e.nativeEvent.stopImmediatePropagation();
+                    }
+                }
+            },
         };
         return cbValue;
     }
 
-    notifyChange(checked: boolean, e: MouseEvent) {
+    notifyChange(checked: boolean, e: any) {
         const cbValue = this.getEvent(checked, e);
         this._adapter.notifyChange(cbValue);
     }
 
-    handleChange(e: MouseEvent) {
+    handleChange(e: any) {
         const disabled = this.getProp('disabled');
 
         if (disabled) {
@@ -78,7 +88,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         }
     }
 
-    handleChangeInGroup(e: MouseEvent) {
+    handleChangeInGroup(e: any) {
         const { value } = this.getProps();
         const groupValue = this._adapter.getGroupValue();
         const checked = groupValue.includes(value);

package/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

package/datePicker/_utils/getFullDateOffset.ts

@@ -1,4 +1,4 @@
-import { isFunction } from 'lodash-es';
+import { isFunction } from 'lodash';
 import { strings } from '../constants';
 import { format } from 'date-fns';
 

package/datePicker/foundation.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable max-len, max-depth,  */
 import { format, isValid, isSameSecond, isEqual as isDateEqual, isDate } from 'date-fns';
-import { get, isObject, isString, isEqual } from 'lodash-es';
+import { get, isObject, isString, isEqual } from 'lodash';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isValidDate, isTimestamp } from './_utils/index';

package/datePicker/monthsGridFoundation.ts

@@ -16,7 +16,7 @@ import {
 import { isBefore, isValidDate, getDefaultFormatToken, getFullDateOffset } from './_utils/index';
 import { formatFullDate, WeekStartNumber } from './_utils/getMonthTable';
 import { compatiableParse } from './_utils/parser';
-import { includes, isSet, isEqual } from 'lodash-es';
+import { includes, isSet, isEqual } from 'lodash';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';

package/form/foundation.ts

@@ -3,7 +3,7 @@ import BaseFoundation from '../base/foundation';
 import * as ObjectUtil from '../utils/object';
 import isPromise from '../utils/isPromise';
 import { isValid } from './utils';
-import { isUndefined, isFunction, toPath } from 'lodash-es';
+import { isUndefined, isFunction, toPath } from 'lodash';
 import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
 
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';

package/form/utils.ts

@@ -2,7 +2,7 @@
 /* eslint-disable prefer-const */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import AsyncValidator from 'async-validator';
-import { cloneDeep, toPath } from 'lodash-es';
+import { cloneDeep, toPath } from 'lodash';
 import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 
 export function getDisplayName(WrappedComponent: React.ComponentType | any) {

package/getBabelConfig.js

@@ -0,0 +1,36 @@
+module.exports = ({ isESM }) => {
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    modules: isESM ? false : 'commonjs',
+                    targets: {
+                        browsers: [
+                            "> 0.5%",
+                            "last 2 versions",
+                            "Firefox ESR",
+                            "not dead",
+                            "not IE 11"
+                        ]
+                    }
+                },
+            ],
+        ],
+        plugins: [
+            'lodash',
+            [
+                '@babel/plugin-transform-runtime',
+                {
+                    corejs: 3
+                },
+            ],
+            [
+                '@babel/plugin-proposal-decorators',
+                {
+                    legacy: true,
+                },
+            ],
+        ]
+    };
+};

package/gulpfile.js

@@ -6,23 +6,31 @@ const merge2 = require('merge2');
 const gulpTS = require('gulp-typescript');
 const gulpBabel = require('gulp-babel');
 const sass = require('gulp-sass')(require('sass'));
-const replace = require('gulp-replace');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const babelConfig = require('./babel.config');
+const getBabelConfig = require('./getBabelConfig');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-gulp.task('compileTS', function compileTSX() {
+function compileTS(isESM) {
+    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
     const tsStream = gulp.src(['**/*.ts', '!node_modules/**/*.*'])
         .pipe(gulpTS(tsConfig.compilerOptions));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(babelConfig))
-        .pipe(gulp.dest('lib/es'));
-    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
+        .pipe(gulpBabel(getBabelConfig({ isESM })))
+        .pipe(gulp.dest(targetDir));
+    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
     return merge2([jsStream, dtsStream]);
+}
+
+gulp.task('compileTSForESM', function compileTSForESM() {
+    return compileTS(true);
+});
+
+gulp.task('compileTSForCJS', function compileTSForCJS() {
+    return compileTS(false);
 });
 
 const excludeScss = [
@@ -45,15 +53,25 @@ gulp.task('compileScss', function compileScss() {
             }
         ))
         .pipe(sass().on('error', sass.logError))
-        .pipe(gulp.dest('lib/es'));
+        .pipe(gulp.dest('lib/es'))
+        .pipe(gulp.dest('lib/cjs'));
 });
 
 gulp.task('moveScss', function moveScss() {
     return gulp.src(['**/*.scss', '!node_modules/**/*.*'])
-        .pipe(gulp.dest('lib/es'));
+        .pipe(gulp.dest('lib/es'))
+        .pipe(gulp.dest('lib/cjs'));
 });
 
-gulp.task('compileLib', gulp.series(['cleanLib', 'compileScss', 'moveScss', 'compileTS']));
+gulp.task('compileLib', 
+    gulp.series(
+        [
+            'cleanLib', 'compileScss', 
+            'moveScss', 
+            gulp.parallel('compileTSForESM', 'compileTSForCJS'),
+        ]
+    )
+);
 
 gulp.task('findDupCSSVariables', function findDupCSSVariables() {
     return gulp.src(['**/variable?.scss', '!node_modules/**/*.*'])

package/input/foundation.ts

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
 import { strings } from './constants';
-import { noop, set, isNumber, isString, isFunction } from 'lodash-es';
+import { noop, set, isNumber, isString, isFunction } from 'lodash';
 
 const ENTER_KEY_CODE = 'Enter';
 

package/input/input.scss

@@ -73,10 +73,12 @@ $module: #{$prefix}-input;
 
         &:hover {
             background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
         }
 
         &:active {
             background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
         }
     }
 

package/input/textareaFoundation.ts

@@ -4,7 +4,7 @@ import {
     isFunction,
     isNumber,
     isString
-} from 'lodash-es';
+} from 'lodash';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
 

package/input/util/getSizingData.ts

@@ -1,5 +1,5 @@
 // Reference to https://github.com/andreypopp/react-textarea-autosize/
-import { pick } from 'lodash-es';
+import { pick } from 'lodash';
 
 const SIZING_STYLE = [
     'borderBottomWidth',

package/input/variables.scss

@@ -4,7 +4,7 @@ $color-input_default-bg-default: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-text-default: var(--semi-color-text-0); // 输入框文本颜色 - 默认
 
 $color-input_default-bg-hover: var(--semi-color-fill-1); // 输入框背景颜色 - 悬浮
-$color-input_default-border-hover: transparent·; // 输入框描边颜色 - 悬浮
+$color-input_default-border-hover: transparent; // 输入框描边颜色 - 悬浮
 
 $color-input_default-bg-active: var(--semi-color-fill-2); // 输入框背景颜色 - 按下
 $color-input_default-border-active: $color-input_default-bg-active; // 输入框描边颜色 - 按下

package/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash-es';
+import { toNumber, toString } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {

package/lib/cjs/_portal/portal.css

@@ -0,0 +1,15 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-portal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+.semi-portal-inner {
+  position: absolute;
+  background-color: transparent;
+  min-width: fit-content;
+}

package/lib/cjs/_portal/portal.scss

@@ -0,0 +1,17 @@
+//@import '../theme/variables.scss';
+
+$module: #{$prefix}-portal;
+
+.#{$module} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $z-portal;
+
+    &-inner {
+        position: absolute;
+        background-color: transparent;
+        min-width: fit-content;
+    }
+}

package/lib/cjs/anchor/anchor.css

@@ -0,0 +1,118 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-anchor {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.semi-anchor-size-small {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-anchor-slide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+}
+.semi-anchor-slide-muted {
+  display: none;
+}
+.semi-anchor-slide-bar {
+  display: none;
+  position: absolute;
+  top: 0;
+  width: 2px;
+  border-radius: 1px;
+}
+.semi-anchor-slide-bar-active {
+  display: inline-block;
+}
+.semi-anchor-slide-bar-default {
+  height: 28px;
+}
+.semi-anchor-slide-bar-small {
+  height: 24px;
+}
+.semi-anchor-slide-bar-primary {
+  background-color: var(--semi-color-primary);
+}
+.semi-anchor-slide-bar-tertiary {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-anchor-slide::before {
+  position: absolute;
+  display: block;
+  width: 2px;
+  height: 100%;
+  background-color: var(--semi-color-border);
+  border-radius: 1px;
+  content: " ";
+}
+.semi-anchor-link {
+  padding-left: 8px;
+}
+.semi-anchor-link-title {
+  cursor: pointer;
+  color: var(--semi-color-text-2);
+  padding-top: 4px;
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-anchor-link-title:hover {
+  color: var(--semi-color-tertiary-hover);
+}
+.semi-anchor-link-title-active {
+  color: var(--semi-color-text-0);
+}
+.semi-anchor-link-title-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-anchor-link-title-disabled:hover {
+  color: var(--semi-color-disabled-text);
+}
+.semi-anchor-link-tooltip {
+  cursor: pointer;
+  color: var(--semi-color-text-2) !important;
+}
+.semi-anchor-link-tooltip-small {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-anchor-link-tooltip:hover {
+  color: var(--semi-color-tertiary-hover) !important;
+}
+.semi-anchor-link-tooltip-active {
+  color: var(--semi-color-text-0) !important;
+}
+.semi-anchor-link-tooltip-disabled {
+  color: var(--semi-color-disabled-text) !important;
+  cursor: not-allowed;
+}
+.semi-anchor-link-tooltip-disabled:hover {
+  color: var(--semi-color-disabled-text) !important;
+}
+
+.semi-rtl .semi-anchor,
+.semi-portal-rtl .semi-anchor {
+  direction: rtl;
+}
+.semi-rtl .semi-anchor-slide,
+.semi-portal-rtl .semi-anchor-slide {
+  right: 0;
+  left: auto;
+}
+.semi-rtl .semi-anchor-link,
+.semi-portal-rtl .semi-anchor-link {
+  padding-right: 8px;
+  padding-left: auto;
+}