@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/lib/cjs/navigation/navigation.css

@@ -56,6 +56,7 @@
   padding: 8px 12px;
   box-sizing: border-box;
   margin-top: 0;
+  margin-bottom: 8px;
   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;
@@ -240,12 +241,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-.semi-navigation-sub.semi-navigation-sub-open {
-  margin-top: 8px;
 }
 .semi-navigation-sub .semi-navigation-item {
   color: var(--semi-color-text-0);
@@ -254,6 +249,9 @@
   font-weight: 400;
   width: 100%;
 }
+.semi-navigation-sub .semi-navigation-item:first-child {
+  margin-top: 8px;
+}
 .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child {
   margin-left: 44px;
 }
@@ -335,12 +333,6 @@
   transition: transform 200ms ease-in-out;
   transform: rotate(-180deg);
 }
-.semi-navigation-icon-rotate-0-no-transition {
-  transform: rotate(0);
-}
-.semi-navigation-icon-rotate-180-no-transition {
-  transform: rotate(-180deg);
-}
 
 /* Header、Footer-Common */
 .semi-navigation-header {
@@ -401,11 +393,6 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
 }
-.semi-navigation-vertical .semi-navigation-list {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title {
   color: var(--semi-color-text-0);
   background-color: transparent;
@@ -483,6 +470,9 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary-disabled);
 }
+.semi-navigation-vertical .semi-navigation-item:last-of-type {
+  margin-bottom: 0;
+}
 .semi-navigation-vertical .semi-navigation-inner {
   flex-direction: column;
 }
@@ -681,66 +671,6 @@
   padding: 0;
 }
 
-.semi-navigation-first-layer > .semi-navigation-sub-title .semi-navigation-item-text {
-  font-weight: 600;
-}
-.semi-navigation-first-layer > .semi-navigation-item-text {
-  font-weight: 600;
-}
-
-.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
-  color: var(--semi-color-primary);
-}
-
-.semi-navigation-sub-wrap .semi-navigation-sub-title {
-  margin-bottom: 0;
-}
-.semi-navigation-sub-wrap .semi-navigation-item:last-of-type {
-  margin-bottom: 0;
-}
-
-.semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
-  color: var(--semi-color-disabled-text);
-}
-
-.semi-navigation-item-horizontal.semi-navigation-item {
-  width: fit-content;
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-.semi-navigation-item-horizontal.semi-navigation-item.semi-navigation-item-disabled {
-  color: var(--semi-color-disabled-text);
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-text {
-  color: var(--semi-color-text-2);
-  background-color: transparent;
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-text {
-  color: var(--semi-color-text-0);
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
-  color: var(--semi-color-disabled-text);
-}
-.semi-navigation-item-horizontal.semi-navigation-first-layer {
-  color: var(--semi-color-text-2);
-}
-.semi-navigation-item-horizontal.semi-navigation-item-selected {
-  background-color: transparent;
-}
-.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-text {
-  color: var(--semi-color-text-0);
-}
-.semi-navigation-item-horizontal .semi-navigation-item-icon:first-child {
-  margin-right: 8px;
-}
-.semi-navigation-item-horizontal .semi-navigation-item-icon:last-child {
-  margin-left: 8px;
-}
-
 .semi-rtl .semi-navigation,
 .semi-portal-rtl .semi-navigation {
   direction: rtl;

package/lib/cjs/navigation/navigation.scss

@@ -76,7 +76,7 @@ $module: #{$prefix}-navigation;
         padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
         box-sizing: border-box;
         margin-top: 0;
-        // margin-bottom: $spacing-navigation_item-marginBottom;
+        margin-bottom: $spacing-navigation_item-marginBottom;
 
         @include font-size-regular;
         font-weight: $font-navigation_item_normal-fontWeight;
@@ -257,13 +257,6 @@ $module: #{$prefix}-navigation;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        row-gap: $spacing-navigation_item-marginBottom;
-
-        &.#{$module}-sub-open {
-            margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-        }
 
         .#{$module}-item {
             color: $color-navigation_itemLn-text-default;
@@ -275,9 +268,9 @@ $module: #{$prefix}-navigation;
             font-weight: $font-navigation_sub_item-fontWeight;
             width: 100%;
 
-            // &:first-child {
-            //     margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-            // }
+            &:first-child {
+                margin-top: $spacing-navigation_sub_item_first_child-marginTop;
+            }
 
             & > &-text:first-child {
                 margin-left: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
@@ -350,12 +343,6 @@ $module: #{$prefix}-navigation;
         transform: rotate(-180deg);
     }
 
-    &-icon-rotate-0-no-transition {
-        transform: rotate(0);
-    }
-    &-icon-rotate-180-no-transition {
-        transform: rotate(-180deg);
-    }
 }
 
 /* Header、Footer-Common */
@@ -443,12 +430,6 @@ $module: #{$prefix}-navigation;
             }
         }
 
-        &-list {
-            display: flex;
-            flex-direction: column;
-            row-gap: $spacing-navigation_item-marginBottom;
-        }
-
         &-list > .#{$module}-sub-wrap {
             & > .#{$module}-sub-title {
                 color: $color-navigation_itemL1-text-default;
@@ -502,9 +483,9 @@ $module: #{$prefix}-navigation;
         }
     }
 
-    // .#{$module}-item:last-of-type {
-    //     margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    // }
+    .#{$module}-item:last-of-type {
+        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
+    }
 
     .#{$module}-inner {
         flex-direction: column;
@@ -733,97 +714,4 @@ $module: #{$prefix}-navigation;
     }
 }
 
-// The following css is used for the variant generation of NavItem and NavSub in C2D
-.#{$module}-first-layer {
-    > .#{$module}-sub-title {
-        .#{$module}-item-text {
-            font-weight: 600;
-        }
-    }
-
-    > .#{$module}-item-text {
-        font-weight: 600;
-    }
-}
-
-.#{$module}-sub-title-selected {
-    .#{$module}-item-icon:first-child {
-        color: $color-navigation_itemL1_selected_icon-default;
-    }
-}
-
-.#{$module}-sub-wrap {
-    .#{$module}-sub-title {
-        margin-bottom: $spacing-navigation_sub_title-marginBottom;
-    }
-
-    .#{$module}-item:last-of-type {
-        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    } 
-}
-
-.#{$module}-sub-title {
-    &.#{$module}-sub-title-disabled {
-        .semi-navigation-item-text {
-            color: $color-navigation_itemL1_disabled-text-default;
-        }
-    }
-}
-
-.#{$module}-item-horizontal {
-    // The width of nav NavItem and NavSub in the horizontal direction both need fit-content
-    &.#{$module}-item { 
-        width: fit-content;
-        margin-bottom: $spacing-navigation_horizontal_nav_list_item-marginBottom;
-        margin-right: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
-
-        &.#{$module}-item-disabled {
-            color: $color-navigation_horizontal_itemL1_disabled-text-default;
-        }
-    }
-
-    .#{$module}-sub-title {
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: var(--semi-color-text-2);
-            background-color: transparent;
-        }
-
-        &.#{$module}-sub-title-selected {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_selected-text-default;
-            }
-        }
-
-        &.#{$module}-sub-title-disabled {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_disabled-text-default;
-            }
-        }
-    }
-
-    &.#{$module}-first-layer {
-        color: $color-navigation_horizontal_itemL1-text-default;
-    }
-
-    &.#{$module}-item-selected {
-        background-color: $color-navigation_horizontal_itemL1_selected-bg-default;
-
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: $color-navigation_horizontal_itemL1_selected-text-default;
-        }
-    }
-
-    .semi-navigation-item-icon:first-child {
-        margin-right: $spacing-navigation_horizontal_icon_last-marginLeft;
-    }
-
-    .semi-navigation-item-icon:last-child {
-        margin-left: $spacing-navigation_horizontal_icon_first-marginRight;
-    }
-}
-
 @import "./rtl.scss";

package/lib/cjs/navigation/subNavFoundation.d.ts

@@ -21,8 +21,6 @@ export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyGlobalOnClick(data: OnClickData): void;
     getIsSelected(itemKey: string | number): boolean;
     getIsOpen(): boolean;
-    getIsCollapsed(): boolean;
-    getMode(): string;
 }
 export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {
     constructor(adapter: SubNavAdapter<P, S>);

package/lib/cjs/navigation/subNavFoundation.js

@@ -4,79 +4,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const addKeys = function addKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len = arguments.length, willAddKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     willAddKeys[_key - 1] = arguments[_key];
   }
-
   willAddKeys.forEach(key => key && keySet.add(key));
   return Array.from(keySet);
 };
-
 const removeKeys = function removeKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len2 = arguments.length, willRemoveKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     willRemoveKeys[_key2 - 1] = arguments[_key2];
   }
-
   willRemoveKeys.forEach(key => key && keySet.delete(key));
   return Array.from(keySet);
 };
-
 class SubNavFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     // this.log('invoke SubNavFoundation init()');
     this._timer = null;
   }
-
   destroy() {} // eslint-disable-line
-
-
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   isValidKey(itemKey) {
     // eslint-disable-next-line eqeqeq
     return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
   }
-
   handleDropdownVisibleChange(visible) {
     const itemKey = this.getProp('itemKey');
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     const rawOpenKeys = this._adapter.getOpenKeys();
-
     const openKeys = visible ? addKeys(rawOpenKeys, itemKey) : removeKeys(rawOpenKeys, itemKey);
     this.clearDelayTimer();
-
     if (!openKeysIsControlled) {
       if (canUpdateOpenKeys) {
         this._adapter.updateOpen(visible);
-      } // this._adapter.updateIsHovered(visible);
-
+      }
+      // this._adapter.updateIsHovered(visible);
     }
 
     this._adapter.notifyGlobalOpenChange({
@@ -90,28 +69,22 @@ class SubNavFoundation extends _foundation.default {
    * @param {Event} e
    * @param {HTMLElement} titleRef
    */
-
-
   handleClick(e, titleRef) {
     const {
       itemKey,
       disabled
     } = this.getProps();
-
     if (disabled) {
       return;
-    } // this.log(e, titleRef, titleRef.contains(e.target));
-
-
+    }
+    // this.log(e, titleRef, titleRef.contains(e.target));
     const clickedDomIsTitle = titleRef && titleRef.contains(e.target);
     let isOpen = Boolean(this._adapter.getIsOpen());
-
     if (!clickedDomIsTitle) {
       isOpen = false;
     } else {
       isOpen = !isOpen;
     }
-
     const openKeys = isOpen ? addKeys(this._adapter.getOpenKeys(), itemKey) : removeKeys(this._adapter.getOpenKeys(), itemKey);
     const cbVal = {
       itemKey,
@@ -119,17 +92,12 @@ class SubNavFoundation extends _foundation.default {
       isOpen,
       domEvent: e
     };
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     if (!openKeysIsControlled && canUpdateOpenKeys) {
       this._adapter.updateOpen(isOpen);
     }
-
     this._adapter.notifyGlobalOpenChange(cbVal);
-
     this._adapter.notifyGlobalOnClick(cbVal);
   }
   /**
@@ -137,14 +105,10 @@ class SubNavFoundation extends _foundation.default {
    * @param e
    * @param titleRef
    */
-
-
   handleKeyPress(e, titleRef) {
     if ((0, _isEnterPress.default)(e)) {
       this.handleClick(e, titleRef);
     }
   }
-
 }
-
 exports.default = SubNavFoundation;

package/lib/cjs/notification/constants.js

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

package/lib/cjs/notification/notificationFoundation.d.ts

@@ -1,8 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from '../notification/constants';
-export declare type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export declare type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
-export declare type NoticeTheme = 'light' | 'normal';
+export type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
+export type NoticeTheme = 'light' | 'normal';
 export interface NoticeProps {
     duration?: number;
     id?: string | number;

package/lib/cjs/notification/notificationFoundation.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class NotificationFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, NotificationFoundation.defaultAdapter), adapter));
@@ -20,48 +16,36 @@ class NotificationFoundation extends _foundation.default {
 
   init() {
     this._startCloseTimer();
-
     this._id = this.getProp('id');
   }
-
   destroy() {
     this._clearCloseTimer();
   }
-
   _startCloseTimer() {
     // unit: s
     const duration = this.getProp('duration');
-
     if (duration && (0, _isNumber2.default)(duration)) {
       this._timer = setTimeout(() => {
         this.close(); // call parent to remove itself
       }, duration * 1000);
     }
   }
-
   close(e) {
     if (e) {
       e.stopPropagation();
     }
-
     this._adapter.notifyWrapperToRemove(this._id);
-
     this._adapter.notifyClose();
   }
-
   _clearCloseTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   restartCloseTimer() {
     this._clearCloseTimer();
-
     this._startCloseTimer();
   }
-
 }
-
 exports.default = NotificationFoundation;

package/lib/cjs/notification/notificationListFoundation.js

@@ -4,53 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable no-useless-constructor */
+
 class NotificationListFoundation extends _foundation.default {
   addNotice(opts) {
     // let notices = this._adapter.getNotices();
-    const notices = this._adapter.getNotices(); // opts = { ...opts, id };
+    const notices = this._adapter.getNotices();
+    // opts = { ...opts, id };
     // if (opts.duration) {
     //     setTimeout(() => {
     //         this.removeNotice(opts.id);
     //     }, opts.duration * 1000);
     // }
-
-
-    this._adapter.updateNotices([opts, ...notices]); // return id;
-
+    this._adapter.updateNotices([opts, ...notices]);
+    // return id;
   }
 
   removeNotice(id) {
-    let notices = this._adapter.getNotices(); // let notices = this._adapter.getNotices();
-
-
+    let notices = this._adapter.getNotices();
+    // let notices = this._adapter.getNotices();
     const removedItems = [];
     notices = notices.filter(notice => {
       if (notice.id === id) {
         removedItems.push(notice);
         return false;
       }
-
       return true;
     });
-
     this._adapter.updateNotices(notices, removedItems); // This must be updated at the same time https://github.com/facebook/react/issues/12312
-
   }
 
   destroyAll() {
     const notices = this._adapter.getNotices();
-
     if (notices.length > 0) {
       this._adapter.updateNotices([], notices);
     }
   }
-
 }
-
 exports.default = NotificationListFoundation;

package/lib/cjs/overflowList/constants.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
   PREFIX: _constants.BASE_CLASS_PREFIX + '-overflow-list'
 };