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

package/lib/cjs/carousel/foundation.js

@@ -4,212 +4,167 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _constants = require("./constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class CarouselFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this._interval = null;
+    this._forcePlay = false;
+  }
+  setForcePlay(forcePlay) {
+    this._forcePlay = forcePlay;
   }
-
   play(interval) {
     if (this._interval) {
       clearInterval(this._interval);
     }
-
     this._interval = setInterval(() => {
       this.next();
     }, interval);
   }
-
   stop() {
     if (this._interval) {
       clearInterval(this._interval);
     }
   }
-
   goTo(activeIndex) {
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
     const targetIndex = this.getValidIndex(activeIndex);
-
     this._adapter.setIsReverse(stateActiveIndex > targetIndex);
-
     if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
-
       this.handleNewActiveIndex(targetIndex);
     }
   }
-
   next() {
     this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
     const targetIndex = this.getValidIndex(stateActiveIndex + 1);
-
     this._adapter.setIsReverse(false);
-
     if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
-
       this.handleNewActiveIndex(targetIndex);
     }
-
     this.handleAutoPlay();
   }
-
   prev() {
     this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
     const targetIndex = this.getValidIndex(stateActiveIndex - 1);
-
     this._adapter.setIsReverse(true);
-
     if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
-
       this.handleNewActiveIndex(targetIndex);
     }
-
     this.handleAutoPlay();
   }
-
   destroy() {
     this._unregisterInterval();
   }
-
   _unregisterInterval() {
     if (this._interval) {
       clearInterval(this._interval);
       this._interval = null;
     }
   }
-
   _notifyChange(activeIndex) {
     const {
       activeIndex: stateActiveIndex,
       isInit
     } = this.getStates();
-
     if (isInit) {
       this._adapter.setIsInit(false);
     }
-
     if (stateActiveIndex !== activeIndex) {
       this._adapter.setPreActiveIndex(stateActiveIndex);
-
       this._adapter.notifyChange(activeIndex, stateActiveIndex);
     }
   }
-
   getValidIndex(index) {
     const {
       children
     } = this.getStates();
     return (index + children.length) % children.length;
   }
-
   getSwitchingTime() {
     const {
       autoPlay,
       speed
     } = this.getProps();
     const autoPlayType = typeof autoPlay;
-
-    if (autoPlayType === 'boolean' && autoPlay) {
+    if (autoPlayType === 'boolean') {
       return _constants.numbers.DEFAULT_INTERVAL + speed;
     }
-
     if ((0, _isObject2.default)(autoPlay)) {
       return (0, _get2.default)(autoPlay, 'interval', _constants.numbers.DEFAULT_INTERVAL) + speed;
     }
-
     return speed;
   }
-
   getIsControlledComponent() {
     return this._isInProps('activeIndex');
   }
-
   handleAutoPlay() {
     const {
       autoPlay
     } = this.getProps();
     const autoPlayType = typeof autoPlay;
-
-    if (autoPlayType === 'boolean' && autoPlay || (0, _isObject2.default)(autoPlay)) {
+    // when user manually call the play function, force play
+    if (autoPlayType === 'boolean' && autoPlay || (0, _isObject2.default)(autoPlay) || this._forcePlay) {
       this.play(this.getSwitchingTime());
     }
   }
-
   handleKeyDown(event) {
     if (event.key === 'ArrowLeft') {
       this.prev();
     }
-
     if (event.key === 'ArrowRight') {
       this.next();
     }
   }
-
   onIndicatorChange(activeIndex) {
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
-
     this._adapter.setIsReverse(stateActiveIndex > activeIndex);
-
     this._notifyChange(activeIndex);
-
     if (!this.getIsControlledComponent()) {
       this.handleNewActiveIndex(activeIndex);
     }
   }
-
   handleNewActiveIndex(activeIndex) {
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
-
     if (stateActiveIndex !== activeIndex) {
       this._adapter.setNewActiveIndex(activeIndex);
     }
   }
-
   getDefaultActiveIndex() {
     let activeIndex;
     const props = this.getProps();
-
     if ('activeIndex' in props) {
       activeIndex = props.activeIndex;
     } else if ('defaultActiveIndex' in props) {
       activeIndex = props.defaultActiveIndex;
     }
-
     return activeIndex;
   }
-
 }
-
 var _default = CarouselFoundation;
 exports.default = _default;

package/lib/cjs/cascader/cascader.css

@@ -21,6 +21,14 @@
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
+.semi-cascader:focus:not(.semi-cascader-disabled) {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-cascader:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-small {
   min-height: 24px;
   line-height: 24px;
@@ -38,10 +46,13 @@
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
-.semi-cascader-focus:hover, .semi-cascader-focus:active {
+.semi-cascader-focus:hover {
   background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
 }
+.semi-cascader-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -107,6 +118,7 @@
 }
 .semi-cascader-selection-tag-disabled.semi-tag {
   color: var(--semi-color-disabled-text);
+  background-color: transparent;
   cursor: not-allowed;
 }
 .semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
@@ -136,13 +148,13 @@
   background: transparent;
   margin-left: -4px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-default {
+.semi-cascader-selection .semi-tagInput {
   min-height: 30px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-small {
+.semi-cascader-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-large {
+.semi-cascader-selection .semi-tagInput-large {
   min-height: 38px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {
@@ -263,6 +275,12 @@
   align-items: center;
   position: relative;
 }
+.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small {
+  height: 22px;
+}
+.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large {
+  height: 38px;
+}
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
   position: absolute;
   top: 0;
@@ -396,6 +414,29 @@
   padding-right: 64px;
 }
 
+.semi-cascader-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow {
+  opacity: 0;
+}
+.semi-cascader-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-cascader-borderless.semi-cascader-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-cascader-borderless.semi-cascader-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-cascader,
 .semi-portal-rtl .semi-cascader {
   direction: rtl;

package/lib/cjs/cascader/cascader.scss

@@ -25,6 +25,17 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
+    &:focus:not(&-disabled) {
+        border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        background-color: $color-cascader_default-bg-default;
+        outline: 0;
+    }
+
+
+    &:active {
+        background-color: $color-cascader_default-bg-active;
+    }
+
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
@@ -41,11 +52,13 @@ $module: #{$prefix}-cascader;
     &-focus {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         outline: 0;
-        &:hover,
-        &:active {
+        &:hover{
             background-color: $color-cascader_default-bg-default;
             border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         }
+        &:active {
+            background-color: $color-cascader_default-bg-active;
+        }
     }
 
     &-warning {
@@ -124,6 +137,7 @@ $module: #{$prefix}-cascader;
 
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
+                background-color: $color-cascader_tag_disabled-bg-default;
                 cursor: not-allowed;
 
                 .#{$prefix}-tag-close {
@@ -161,22 +175,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +202,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {
@@ -256,7 +258,7 @@ $module: #{$prefix}-cascader;
     &-inset-label {
         display: inline;
         margin-right: $spacing-cascader_label-marginRight;
-        font-weight: 600;
+        font-weight: $font-weight-bold;
         @include font-size-regular;
         color: $color-cascader_label-text-default;
         flex-shrink: 0;
@@ -336,6 +338,14 @@ $module: #{$prefix}-cascader;
             align-items: center;
             position: relative;
 
+            &-small {
+                height: $height-cascader_selection_wrapper_small;
+            }
+
+            &-large {
+                height: $height-cascader_selection_wrapper_large;
+            }
+
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
@@ -385,6 +395,7 @@ $module: #{$prefix}-cascader;
         padding-right: $spacing-cascader_option-paddingRight;
     }
 
+
     .#{$module}-option-list {
         box-sizing: border-box;
         display: inline-block;
@@ -499,4 +510,36 @@ $module: #{$prefix}-cascader;
     }
 }
 
+.#{$module}-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+
+}
+
 @import './rtl.scss';

package/lib/cjs/cascader/constants.d.ts

@@ -12,6 +12,9 @@ declare const strings: {
     readonly LEAF_ONLY_MERGE_TYPE: "leafOnly";
     readonly AUTO_MERGE_VALUE_MERGE_TYPE: "autoMergeValue";
     readonly NONE_MERGE_TYPE: "none";
+    readonly SEARCH_POSITION_TRIGGER: "trigger";
+    readonly SEARCH_POSITION_CUSTOM: "custom";
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };
+export declare const VALUE_SPLIT = "_SEMI_CASCADER_SPLIT_";

package/lib/cjs/cascader/constants.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.strings = exports.numbers = exports.cssClasses = void 0;
-
+exports.strings = exports.numbers = exports.cssClasses = exports.VALUE_SPLIT = void 0;
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-cascader"),
-  PREFIX_OPTION: "".concat(_constants.BASE_CLASS_PREFIX, "-cascader-option")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-cascader`,
+  PREFIX_OPTION: `${_constants.BASE_CLASS_PREFIX}-cascader-option`
 };
 exports.cssClasses = cssClasses;
 const strings = {
@@ -19,12 +17,15 @@ const strings = {
   IS_VALUE: 'isValue',
   SHOW_NEXT_BY_CLICK: 'click',
   SHOW_NEXT_BY_HOVER: 'hover',
-
   /* Merge Type */
   LEAF_ONLY_MERGE_TYPE: 'leafOnly',
   AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
-  NONE_MERGE_TYPE: 'none'
+  NONE_MERGE_TYPE: 'none',
+  SEARCH_POSITION_TRIGGER: 'trigger',
+  SEARCH_POSITION_CUSTOM: 'custom'
 };
 exports.strings = strings;
 const numbers = {};
-exports.numbers = numbers;
+exports.numbers = numbers;
+const VALUE_SPLIT = '_SEMI_CASCADER_SPLIT_';
+exports.VALUE_SPLIT = VALUE_SPLIT;

package/lib/cjs/cascader/foundation.d.ts

@@ -4,6 +4,12 @@ export interface BasicData {
     disabled: boolean;
     key: string;
     searchText: any[];
+    pathData?: BasicCascaderData[];
+}
+export interface Virtualize {
+    itemSize: number;
+    height?: number | string;
+    width?: number | string;
 }
 export interface BasicEntities {
     [idx: string]: BasicEntity;
@@ -18,6 +24,7 @@ export interface BasicEntity {
     parent?: BasicEntity;
     parentKey?: string;
     path: Array<string>;
+    pos: string;
     valuePath: Array<string>;
 }
 export interface BasicCascaderData {
@@ -29,10 +36,10 @@ export interface BasicCascaderData {
     loading?: boolean;
     children?: BasicCascaderData[];
 }
-export declare type CascaderType = 'large' | 'small' | 'default';
-export declare type BasicSimpleValueType = string | number | BasicCascaderData;
-export declare type BasicValue = BasicSimpleValueType | Array<BasicSimpleValueType> | Array<Array<BasicSimpleValueType>>;
-export declare type ShowNextType = 'click' | 'hover';
+export type CascaderType = 'large' | 'small' | 'default';
+export type BasicSimpleValueType = string | number | BasicCascaderData;
+export type BasicValue = BasicSimpleValueType | Array<BasicSimpleValueType> | Array<Array<BasicSimpleValueType>>;
+export type ShowNextType = 'click' | 'hover';
 export interface BasicTriggerRenderProps {
     componentProps: BasicCascaderProps;
     disabled: boolean;
@@ -46,14 +53,17 @@ export interface BasicTriggerRenderProps {
      * should call this function when the value of the Input component
      * customized by triggerRender is updated to synchronize the state
      * with Cascader. */
+    onSearch: (inputValue: string) => void;
     onChange: (inputValue: string) => void;
     onClear: (e: any) => void;
+    onRemove: (key: string) => void;
 }
 export interface BasicScrollPanelProps {
     panelIndex: number;
     activeNode: BasicCascaderData;
 }
 export interface BasicCascaderProps {
+    borderless?: boolean;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
     separator?: string;
@@ -68,7 +78,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;
@@ -99,6 +111,7 @@ export interface BasicCascaderProps {
     leafOnly?: boolean;
     enableLeafClick?: boolean;
     preventScroll?: boolean;
+    virtualizeInSearch?: Virtualize;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -143,6 +156,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateInputValue: (value: string) => void;
     updateInputPlaceHolder: (value: string) => void;
     focusInput: () => void;
+    blurInput: () => void;
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
@@ -163,6 +177,10 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnExceed: (data: BasicEntity[]) => void;
     toggleInputShow: (show: boolean, cb: () => void) => void;
     updateFocusState: (focus: boolean) => void;
+    updateLoadingKeyRefValue: (keys: Set<string>) => void;
+    getLoadingKeyRefValue: () => Set<string>;
+    updateLoadedKeyRefValue: (keys: Set<string>) => void;
+    getLoadedKeyRefValue: () => Set<string>;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
@@ -176,7 +194,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     _notifyBlur(e: any): void;
     _notifyFocus(e: any): void;
     _isOptionDisabled(key: string, keyEntities: BasicEntities): boolean;
-    getCopyFromState(items: string | string[]): Partial<BasicCascaderInnerData>;
     getItemPropPath(selectedKey: string, prop: string | any[], keyEntities?: BasicEntities): any[];
     _getCacheValue(keyEntities: BasicEntities): any;
     collectOptions(init?: boolean): void;
@@ -190,8 +207,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    focus(): void;
+    blur(): void;
     toggle2SearchInput(isShow: boolean): void;
-    focusInput(): void;
     updateSearching: (isSearching: boolean) => void;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;
@@ -233,5 +251,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;
-    handleTagRemove(e: any, tagValuePath: string[]): void;
+    handleTagRemoveByKey: (key: string) => void;
+    handleTagRemoveInTrigger: (pos: string) => void;
 }