@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/timePicker/inputFoundation.js

@@ -4,73 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class TimePickerFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
+  init() {}
   destroy() {}
-
   handleFocus(e) {
     this.storeCursor();
-
     this._adapter.notifyFocus(e);
   }
-
   handleChange(v) {
     this.storeCursor();
-
     this._adapter.notifyChange(v);
   }
-
   handleBlur(e) {
     this.clearCursor();
-
     this._adapter.notifyBlur(e);
   }
-
   storeCursor() {
     const inputNode = this.getCache('inputNode');
-
     if (inputNode) {
       const {
         selectionStart: start
-      } = inputNode; // const beforeStr = typeof value === 'string' ? value.substr(0, start) : null;
+      } = inputNode;
+      // const beforeStr = typeof value === 'string' ? value.substr(0, start) : null;
       // const afterStr = typeof value === 'string' ? value.substr(start, value.length - start + 1) : null;
       // console.log(start, beforeStr, afterStr);
-
       this.setCache('cursorIndex', start);
     }
   }
-
   restoreCursor() {
     const inputNode = this.getCache('inputNode');
     const cursorIndex = this.getCache('cursorIndex');
-
     if (inputNode && !(0, _isNullOrUndefined.default)(cursorIndex)) {
       inputNode.selectionStart = cursorIndex;
       inputNode.selectionEnd = cursorIndex;
     }
   }
-
   clearCursor() {
     this.setCache('cursorIndex', null);
     this.setCache('beforeStr', null);
     this.setCache('afterStr', null);
   }
-
 }
-
 var _default = TimePickerFoundation;
 exports.default = _default;

package/lib/cjs/timePicker/timePicker.css

@@ -11,6 +11,17 @@
 .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before {
   height: 108px;
 }
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
 .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul,
 .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul {
   padding-bottom: 108px;
@@ -76,6 +87,10 @@
   cursor: pointer;
 }
 
+.semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix {
+  opacity: 0;
+}
+
 .semi-rtl .semi-timepicker,
 .semi-portal-rtl .semi-timepicker {
   direction: rtl;

package/lib/cjs/timePicker/timePicker.scss

@@ -20,6 +20,15 @@ $module-list: #{$prefix}-scrolllist;
 
             .#{$module-list}-item,
             .#{$module-list}-item-wheel .#{$module-list}-list-outer {
+                -ms-overflow-style: none; /* Internet Explorer 10+ */
+                scrollbar-width: none; /* Firefox */
+
+                &::-webkit-scrollbar {
+                    display: none;
+                    width: 0;
+                    height: 0;
+                }
+
                 & > ul {
                     padding-bottom: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
                 }
@@ -28,7 +37,7 @@ $module-list: #{$prefix}-scrolllist;
             .#{$module-list}-item {
                 -ms-overflow-style: none; /* Internet Explorer 10+ */
                 scrollbar-width: none; /* Firefox */
-                
+
                 &::-webkit-scrollbar {
                     display: none;
                     width: 0;
@@ -119,4 +128,16 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module} {
+    .#{$prefix}-input-borderless:not(:focus-within):not(:hover){
+        .#{$prefix}-input {
+            &-suffix {
+                opacity: 0;
+            }
+        }
+    }
+
+}
+
+
 @import "./rtl.scss";

package/lib/cjs/timePicker/utils/index.js

@@ -4,21 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformToArray = exports.secondIsDisabled = exports.parseToTimestamp = exports.parseToDate = exports.minuteIsDisabled = exports.isTimeFormatLike = exports.hourIsDisabled = exports.formatToString = void 0;
-
 var _toNumber2 = _interopRequireDefault(require("lodash/toNumber"));
-
 var _dateFns = require("date-fns");
-
 var _constants = require("../constants");
-
 var _isNullOrUndefined = _interopRequireDefault(require("../../utils/isNullOrUndefined"));
-
 var _locale = require("date-fns/locale");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable max-len */
-
 /**
  *
  * @param {string|Date|number} input
@@ -29,21 +20,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const parseToDate = function (input) {
   let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
   let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
-
   if (input instanceof Date) {
     return input;
-  } else if (typeof input === 'number' || !isNaN(Number(input))) {
+  } else if (typeof input === 'number') {
     return new Date((0, _toNumber2.default)(input));
   } else if (typeof input === 'string') {
-    let curDate = new Date(); // console.log(input, formatToken);
-
+    let curDate = new Date();
+    // console.log(input, formatToken);
     curDate = (0, _dateFns.parse)(input, formatToken, curDate, {
       locale: dateFnsLocale
-    }); // console.log(curDate, formatToken);
-
+    });
+    // console.log(curDate, formatToken);
     return curDate;
+  } else if (typeof input === 'undefined') {
+    return undefined;
   }
-
   return new Date();
 };
 /**
@@ -51,10 +42,7 @@ const parseToDate = function (input) {
  * @param {string|Date|number} input
  * @returns {number}
  */
-
-
 exports.parseToDate = parseToDate;
-
 const parseToTimestamp = function (input) {
   let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
   let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
@@ -66,10 +54,7 @@ const parseToTimestamp = function (input) {
  * @param {string} formatToken
  * @returns {string}
  */
-
-
 exports.parseToTimestamp = parseToTimestamp;
-
 const formatToString = function (dateOrTimestamp) {
   let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
   let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
@@ -77,51 +62,37 @@ const formatToString = function (dateOrTimestamp) {
     locale: dateFnsLocale
   });
 };
-
 exports.formatToString = formatToString;
-
 const hourIsDisabled = (disabledHours, hour) => {
   if (typeof disabledHours === 'function') {
     const disabledOptions = disabledHours();
-
     if (Array.isArray(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && disabledOptions.some(v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(hour))) {
       return true;
     }
   }
-
   return false;
 };
-
 exports.hourIsDisabled = hourIsDisabled;
-
 const minuteIsDisabled = (disabledMinutes, hour, minute) => {
   if (typeof disabledMinutes === 'function') {
     const disabledOptions = disabledMinutes(hour);
-
     if (Array.isArray(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && !(0, _isNullOrUndefined.default)(minute) && disabledOptions.some(v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(minute))) {
       return true;
     }
   }
-
   return false;
 };
-
 exports.minuteIsDisabled = minuteIsDisabled;
-
 const secondIsDisabled = (disabledSeconds, hour, minute, second) => {
   if (typeof disabledSeconds === 'function') {
     const disabledOptions = disabledSeconds(hour, minute);
-
     if (Array.isArray(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && !(0, _isNullOrUndefined.default)(minute) && !(0, _isNullOrUndefined.default)(second) && disabledOptions.some(v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(second))) {
       return true;
     }
   }
-
   return false;
 };
-
 exports.secondIsDisabled = secondIsDisabled;
-
 const transformToArray = value => {
   if (!Array.isArray(value)) {
     return [];
@@ -144,41 +115,31 @@ const transformToArray = value => {
  * @param {String} formatToken e.g. HH:mm
  * @returns {Boolean}
  */
-
-
 exports.transformToArray = transformToArray;
-
 const isTimeFormatLike = (time, formatToken) => {
   let isLike = true;
   const dateFnsSupportFormatCh = 'BDEGHKLMOPQRSTXYabcehimopqstuwxyz'; // dateFns support format character
-
-  const formatSupportChReg = new RegExp("[".concat(dateFnsSupportFormatCh, "]"), 'g');
-  const formatNotSupportChReg = new RegExp("[^".concat(dateFnsSupportFormatCh, "]"), 'g');
+  const formatSupportChReg = new RegExp(`[${dateFnsSupportFormatCh}]`, 'g');
+  const formatNotSupportChReg = new RegExp(`[^${dateFnsSupportFormatCh}]`, 'g');
   const hmsReg = /[H|m|s]{1,2}/;
   const formatSplitted = formatToken.split(formatNotSupportChReg); // => ['HH', 'mm'];
-
   const timeSeparator = formatToken.replace(formatSupportChReg, ''); // => :
-
-  const timeReg = new RegExp("[".concat(timeSeparator, "]"), 'g'); // => /[:]/g
-
+  const timeReg = new RegExp(`[${timeSeparator}]`, 'g'); // => /[:]/g
   const timeSplitted = time.split(timeReg); // => ['12', '0]
-
   if (formatSplitted.length !== timeSplitted.length) {
     isLike = false;
   } else {
     for (let i = 0, len = timeSplitted.length; i < len; i++) {
       const formatStr = formatSplitted[i];
-      const timeStr = timeSplitted[i]; // Returns false if the current character corresponds to minutes and seconds and the length is less than format
+      const timeStr = timeSplitted[i];
+      // Returns false if the current character corresponds to minutes and seconds and the length is less than format
       // when i=1 => '0'.length < 'mm'.length
-
       if (hmsReg.test(formatStr) && timeStr.length < formatStr.length) {
         isLike = false;
         break;
       }
     }
   }
-
   return isLike;
 };
-
 exports.isTimeFormatLike = isTimeFormatLike;

package/lib/cjs/timePicker/utils/localeDate.js

@@ -5,24 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.localeFormat = localeFormat;
 exports.localeParse = localeParse;
-
 var _dateFns = require("date-fns");
-
 /* istanbul ignore next */
 const replace = function replace(str, replacements) {
   let _str = str;
-
   for (const key of Object.keys(replacements)) {
     if (typeof replacements[key] === 'string') {
       _str = _str.replace(key, replacements[key]);
     }
   }
-
   return _str;
 };
 /* istanbul ignore next */
-
-
 function localeFormat(date, format) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
@@ -31,15 +25,11 @@ function localeFormat(date, format) {
   return str;
 }
 /* istanbul ignore next */
-
-
 function localeParse(dateString, format) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let defaultDate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   let options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-
   // const invertedLocale = invert(locale);
   const _dateString = replace(dateString, locale);
-
   return (0, _dateFns.parse)(_dateString, format, defaultDate, options);
 }

package/lib/cjs/timeline/constants.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline"),
-  ITEM: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline-item")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-timeline`,
+  ITEM: `${_constants.BASE_CLASS_PREFIX}-timeline-item`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/toast/animation.scss

@@ -9,3 +9,6 @@ $animation_opacity-toast-show: 0;
 $animation_opacity-toast-hide: 0;
 $animation_transform_translateY-toast-show: -100%;
 $animation_transform_translateY-toast-hide: -100%;
+
+$animation_duration-toast-stack: 300ms;
+$animation_function-toast-stack: cubic-bezier(.22,.57,.02,1.2)

package/lib/cjs/toast/constants.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
-const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-toast");
+const PREFIX = `${_constants.BASE_CLASS_PREFIX}-toast`;
 const cssClasses = {
   PREFIX,
-  WRAPPER: "".concat(PREFIX, "-wrapper"),
-  LIST: "".concat(PREFIX, "-list")
+  WRAPPER: `${PREFIX}-wrapper`,
+  LIST: `${PREFIX}-list`
 };
 exports.cssClasses = cssClasses;
 const strings = {
@@ -22,6 +20,5 @@ const strings = {
 exports.strings = strings;
 const numbers = {
   duration: 3 // default close time, unit: s
-
 };
 exports.numbers = numbers;

package/lib/cjs/toast/toast.css

@@ -5,13 +5,29 @@
   pointer-events: none;
 }
 .semi-toast-wrapper {
-  pointer-events: none;
   position: fixed;
+  height: 0;
   top: 0;
   width: 100%;
-  text-align: center;
+  display: flex;
+  justify-content: center;
   z-index: 1010;
 }
+.semi-toast-wrapper .semi-toast-innerWrapper {
+  width: fit-content;
+  height: fit-content;
+}
+.semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
+  perspective: unset;
+  perspective-origin: center center;
+}
+.semi-toast-zero-height-wrapper {
+  transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2);
+  perspective-origin: center 280px;
+  perspective: 280px;
+  height: 0;
+  overflow: visible;
+}
 .semi-toast-content {
   pointer-events: all;
   box-shadow: var(--semi-shadow-elevated);
@@ -20,7 +36,7 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: var(--semi-color-bg-3);
   border-radius: var(--semi-border-radius-medium);
-  padding: 12px 8px;
+  padding: 12px 8px 12px 8px;
   display: inline-flex;
   align-items: flex-start;
   justify-content: center;
@@ -36,23 +52,37 @@
   margin-left: 12px;
   margin-right: 12px;
   text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-toast-light.semi-toast-warning .semi-toast-content {
   background-color: var(--semi-color-warning-light-default);
   border: 1px solid var(--semi-color-warning);
 }
+.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
+  color: var(--semi-color-warning);
+}
 .semi-toast-light.semi-toast-success .semi-toast-content {
   background-color: var(--semi-color-success-light-default);
   border: 1px solid var(--semi-color-success);
 }
+.semi-toast-light.semi-toast-success .semi-toast-icon-success {
+  color: var(--semi-color-success);
+}
 .semi-toast-light.semi-toast-info .semi-toast-content {
   background-color: var(--semi-color-info-light-default);
   border: 1px solid var(--semi-color-info);
 }
+.semi-toast-light.semi-toast-info .semi-toast-icon-info {
+  color: var(--semi-color-info);
+}
 .semi-toast-light.semi-toast-error .semi-toast-content {
   background-color: var(--semi-color-danger-light-default);
   border: 1px solid var(--semi-color-danger);
 }
+.semi-toast-light.semi-toast-error .semi-toast-icon-error {
+  color: var(--semi-color-danger);
+}
 .semi-toast .semi-toast-icon-warning {
   color: var(--semi-color-warning);
 }
@@ -67,9 +97,11 @@
 }
 .semi-toast-animation-show {
   animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 .semi-toast-animation-hide {
   animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 @keyframes semi-toast-keyframe-toast-show {
   0% {

package/lib/cjs/toast/toast.scss

@@ -8,21 +8,44 @@ $icon: #{$prefix}-toast-icon;
     pointer-events: none;
 
     &-wrapper {
-        pointer-events: none;
         position: fixed;
+        height: 0;
         top: $spacing-toast_wrapper-top;
         width: $width-toast_wrapper;
-        text-align: center;
+        display: flex;
+        justify-content: center;
         z-index: $z-toast;
+        .#{$module}-innerWrapper{
+            width: fit-content;
+            height: fit-content;
+            &-hover{
+                .#{$module}-zero-height-wrapper{
+                    perspective: unset;
+                    perspective-origin: center center;
+                }
+            }
+        }
+
+
     }
 
+
+    &-zero-height-wrapper{
+        transition: all $animation_duration-toast-stack $animation_function-toast-stack;
+        perspective-origin: center $spacing-toast-perspective-originY; ;
+        perspective: $spacing-toast-perspective;
+        height: 0;
+        overflow: visible;
+    }
+
+
     &-content {
         pointer-events: all;
         @include shadow-elevated;
         @include font-size-regular;
         background-color: $color-toast-bg-default;
         border-radius: $radius-toast_content;
-        padding: $spacing-toast_content-paddingY $spacing-toast_content-paddingX;
+        padding: $spacing-toast_content-paddingTop $spacing-toast_content-paddingRight $spacing-toast_content-paddingBottom $spacing-toast_content-paddingLeft;
         display: inline-flex;
         align-items: flex-start;
         justify-content: center;
@@ -39,6 +62,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 
@@ -48,6 +74,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_warning_light-bg;
                 border: $width-toast_light-border solid $color-toast_warning_light-border;
             }
+            .#{$icon}-warning {
+                color: $color-toast_warning_light-icon;
+            }
         }
 
         &.#{$module}-success {
@@ -55,6 +84,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_success_light-bg;
                 border: $width-toast_light-border solid $color-toast_success_light-border;
             }
+            .#{$icon}-success {
+                color: $color-toast_success_light-icon;
+            }
         }
 
         &.#{$module}-info {
@@ -62,6 +94,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_info_light-bg;
                 border: $width-toast_light-border solid $color-toast_info_light-border;
             }
+            .#{$icon}-info {
+                color: $color-toast_info_light-icon;
+            }
         }
 
         &.#{$module}-error {
@@ -69,6 +104,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_danger_light-bg;
                 border: $width-toast_light-border solid $color-toast_danger_light-border;
             }
+            .#{$icon}-error {
+                color: $color-toast_danger_light-icon;
+            }
         }
     }
 
@@ -90,10 +128,12 @@ $icon: #{$prefix}-toast-icon;
 
     &-animation-show{
         animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
+        animation-fill-mode: forwards;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

package/lib/cjs/toast/toastFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type ToastType = 'success' | 'warning' | 'error' | 'info' | 'default';
-export declare type ToastTheme = 'light' | 'normal';
-export declare type Directions = 'ltr' | 'rtl';
+export type ToastType = 'success' | 'warning' | 'error' | 'info' | 'default';
+export type ToastTheme = 'light' | 'normal';
+export type Directions = 'ltr' | 'rtl';
 export interface ConfigProps {
     top?: number | string;
     bottom?: number | string;
@@ -9,6 +9,7 @@ export interface ConfigProps {
     right?: number | string;
     duration?: number;
     zIndex?: number;
+    theme?: ToastTheme;
     getPopupContainer?: () => HTMLElement | null;
 }
 export interface ToastProps extends ConfigProps {
@@ -20,9 +21,9 @@ export interface ToastProps extends ConfigProps {
     className?: string;
     showClose?: boolean;
     icon?: any;
-    theme?: ToastTheme;
     direction?: Directions;
     close?: (id: string) => void;
+    stack?: boolean;
 }
 export interface ToastInstance extends ToastProps {
     id?: string;