@douyinfe/semi-foundation 2.28.0-alpha.0 → 2.28.0-beta.0

package/cascader/foundation.ts

@@ -1,4 +1,4 @@
-import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes } from 'lodash';
+import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes, isFunction } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     filter,
@@ -24,7 +24,8 @@ export interface BasicData {
     data: BasicCascaderData;
     disabled: boolean;
     key: string;
-    searchText: any[]
+    searchText: any[];
+    pathData?: BasicCascaderData[]
 }
 
 export interface BasicEntities {
@@ -115,7 +116,9 @@ export interface BasicCascaderProps {
     emptyContent?: any;
     filterLeafOnly?: boolean;
     motion?: boolean;
-    filterTreeNode?: ((inputValue: string, treeNodeString: string) => boolean) | boolean;
+    filterTreeNode?: ((inputValue: string, treeNodeString: string, data?: BasicCascaderData) => boolean) | boolean;
+    filterSorter?: (first: BasicCascaderData, second: BasicCascaderData, inputValue: string) => number;
+    filterRender?: (props: any) => any;
     placeholder?: string;
     searchPlaceholder?: string;
     size?: CascaderType;
@@ -863,12 +866,12 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         if (sugInput) {
             filteredKeys = (Object.values(keyEntities) as BasicEntity[])
                 .filter(item => {
-                    const { key, _notExist } = item;
+                    const { key, _notExist, data } = item;
                     if (_notExist) {
                         return false;
                     }
                     const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-                    return filter(sugInput, filteredPath, filterTreeNode, false);
+                    return filter(sugInput, data, filterTreeNode, false, filteredPath);
                 })
                 .filter(
                     item => (filterTreeNode && !filterLeafOnly) ||
@@ -950,8 +953,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     }
 
     getFilteredData() {
-        const { treeNodeFilterProp } = this.getProps();
-        const { filteredKeys, keyEntities } = this.getStates();
+        const { treeNodeFilterProp, filterSorter } = this.getProps();
+        const { filteredKeys, keyEntities, inputValue } = this.getStates();
         const filteredList: BasicData[] = [];
         const filteredKeyArr = [...filteredKeys];
         filteredKeyArr.forEach(key => {
@@ -959,15 +962,23 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             if (!item) {
                 return;
             }
-            const itemSearchPath = this.getItemPropPath(key, treeNodeFilterProp);
+            const pathData = this.getItemPropPath(key, []);
+            const itemSearchPath = pathData.map(item => item[treeNodeFilterProp]);
             const isDisabled = this._isOptionDisabled(key, keyEntities);
             filteredList.push({
                 data: item.data,
+                pathData,
                 key,
                 disabled: isDisabled,
                 searchText: itemSearchPath
             });
         });
+
+        if (isFunction(filterSorter)) {
+            filteredList.sort((a, b) => {
+                return filterSorter(a.pathData, b.pathData, inputValue);
+            });
+        }
         return filteredList;
     }
 

package/lib/cjs/select/select.css

@@ -83,6 +83,8 @@
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
+  max-height: 300px;
+  overflow-y: auto;
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
@@ -224,6 +226,24 @@
   align-items: center;
   height: 100%;
 }
+.semi-select-content-wrapper-collapse {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 100%;
+}
+.semi-select-content-wrapper-collapse .semi-overflow-list-overflow {
+  max-width: 100%;
+  min-width: 50px;
+}
+.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-tag {
+  background-color: transparent;
+}
+.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-N {
+  background-color: transparent;
+  padding: 4px;
+  color: var(--semi-color-text-0);
+  font-size: 12px;
+}
 .semi-select-multiple {
   height: auto;
 }

package/lib/cjs/select/select.scss

@@ -8,6 +8,7 @@ $module: #{$prefix}-select;
 $single: #{$module}-single;
 $filterable: #{$module}-filterable;
 $multiple: #{$module}-multiple;
+$overflowList: #{$prefix}-overflow-list;
 
 .#{$module} {
     box-sizing: border-box;
@@ -24,6 +25,10 @@ $multiple: #{$module}-multiple;
     cursor: pointer;
     transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
     transform: scale($transform_scale-select);
+
+    max-height: 300px;
+    overflow-y: auto;
+
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -198,6 +203,28 @@ $multiple: #{$module}-multiple;
         display: flex;
         align-items: center;
         height: 100%;
+
+        &-collapse {
+            display: inline-flex;
+            flex-shrink: 0;
+            width: 100%;
+
+            .#{$overflowList}-overflow {
+                max-width: 100%; // when one tag exceed the max width
+                min-width: 50px;
+            }
+
+            &>&-tag {
+                background-color: transparent;
+            }
+
+            &>&-N {
+                background-color: transparent;
+                padding: 4px;
+                color: var(--semi-color-text-0);
+                font-size: 12px;
+            }
+        }
     }
 
     &-multiple {

package/lib/cjs/tabs/tabs.css

@@ -82,6 +82,66 @@
   color: var(--semi-color-disabled-text);
   border-bottom: none;
 }
+.semi-tabs-tab-single.semi-tabs-tab {
+  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;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  color: var(--semi-color-text-2);
+  user-select: none;
+}
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon {
+  position: relative;
+  margin-right: 8px;
+  top: 3px;
+  color: var(--semi-color-text-2);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+}
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon-close {
+  margin-right: 0;
+  font-size: 14px;
+  color: var(--semi-color-text-2);
+  margin-left: 10px;
+  cursor: pointer;
+}
+.semi-tabs-tab-single.semi-tabs-tab:hover {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:active {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
+  cursor: default;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon {
+  color: var(--semi-color-primary);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon-close {
+  color: var(--semi-color-text-2);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close:hover {
+  color: var(--semi-color-text-1);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
+  color: var(--semi-color-disabled-text);
+  border-bottom: none;
+}
 .semi-tabs-bar-collapse,
 .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
   display: flex;
@@ -412,6 +472,142 @@
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
   animation-fill-mode: forwards;
 }
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
+  padding: 16px 4px 14px 4px;
+  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  border-bottom: 2px solid transparent;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
+  padding-left: 0;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: 2px solid var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
+  border-bottom: 2px solid var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
+  padding: 8px 4px 6px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
+  padding: 12px 4px 10px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  border-bottom: 2px solid var(--semi-color-primary);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
+  padding: 12px;
+  border-left: 2px solid transparent;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-left: 2px solid var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
+  border-left: 2px solid var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
+  padding: 6px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
+  padding: 10px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  border-left: 2px solid var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  padding: 8px 12px 7px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-bottom: 1px solid var(--semi-color-bg-1);
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-right: none;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-right: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
+  content: " ";
+  width: 1px;
+  position: absolute;
+  right: -1px;
+  top: 0;
+  bottom: 0;
+  background: var(--semi-color-bg-1);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  padding: 8px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-right: none;
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab {
+  padding: 8px 12px;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-card.semi-tabs-tab:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-card.semi-tabs-tab:active {
+  background: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button {
+  border: none;
+}
+.semi-tabs-tab-button.semi-tabs-tab {
+  padding: 8px 12px;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-2);
+  border: none;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-button.semi-tabs-tab:hover {
+  border: none;
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-button.semi-tabs-tab:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
+  color: var(--semi-color-primary);
+  border: none;
+  background-color: var(--semi-color-primary-light-default);
+}
 
 .semi-rtl .semi-tabs,
 .semi-portal-rtl .semi-tabs {