@douyinfe/semi-ui 2.22.0-alpha.0 → 2.22.0-beta.0

package/lib/es/datePicker/quickControl.d.ts

@@ -13,7 +13,7 @@ export interface QuickControlProps {
 declare class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes: {
         presets: PropTypes.Requireable<any[]>;
-        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
         onPresetClick: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
         insetInput: PropTypes.Requireable<boolean>;

package/lib/es/datePicker/yearAndMonth.d.ts

@@ -20,7 +20,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         noBackBtn: PropTypes.Requireable<boolean>;
         disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
         density: PropTypes.Requireable<string>;
-        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };

package/lib/es/dropdown/dropdownMenu.d.ts

@@ -23,6 +23,7 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     componentDidMount(): void;
     render(): JSX.Element;

package/lib/es/dropdown/index.d.ts

@@ -59,7 +59,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         visible: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
@@ -104,6 +104,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     handleVisibleChange: (visible: boolean) => any;
     renderContent(): JSX.Element;

package/lib/es/form/baseForm.d.ts

@@ -80,7 +80,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         emptyContent?: React.ReactNode;
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
-        position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         onSearch?: (value: string) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;

package/lib/es/form/field.d.ts

@@ -28,7 +28,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     emptyContent?: import("react").ReactNode;
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
-    position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+    position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
     onSearch?: (value: string) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;

package/lib/es/image/preview.d.ts

@@ -64,6 +64,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     foundation: PreviewFoundation;
     previewGroupId: string;

package/lib/es/image/previewImage.d.ts

@@ -28,7 +28,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
     };
     get adapter(): PreviewImageAdapter<PreviewImageProps, PreviewImageStates>;
     containerRef: React.RefObject<HTMLDivElement>;
-    imageRef: React.RefObject<HTMLImageElement>;
+    imageRef: HTMLImageElement | null;
     foundation: PreviewImageFoundation;
     constructor(props: any);
     componentDidMount(): void;

package/lib/es/image/previewImage.js

@@ -59,7 +59,7 @@ export default class PreviewImage extends BaseComponent {
 
 
     this.registryImageRef = ref => {
-      if (this.imageRef && this.imageRef.current) {
+      if (this.imageRef) {
         this.imageRef.removeEventListener("wheel", this.handleWheel);
       }
 
@@ -93,7 +93,7 @@ export default class PreviewImage extends BaseComponent {
       left: 0
     };
     this.containerRef = /*#__PURE__*/React.createRef();
-    this.imageRef = /*#__PURE__*/React.createRef();
+    this.imageRef = null;
     this.foundation = new PreviewImageFoundation(this.adapter);
   }
 
@@ -107,10 +107,10 @@ export default class PreviewImage extends BaseComponent {
         originImageWidth = size.originImageWidth;
         originImageHeight = size.originImageHeight;
       },
-      getContainerRef: () => {
-        return this.containerRef;
+      getContainer: () => {
+        return this.containerRef.current;
       },
-      getImageRef: () => {
+      getImage: () => {
         return this.imageRef;
       },
       getMouseMove: () => startMouseMove,
@@ -125,6 +125,9 @@ export default class PreviewImage extends BaseComponent {
         this.setState({
           loading
         });
+      },
+      setImageCursor: canDrag => {
+        this.imageRef.style.cursor = canDrag ? "grab" : "default";
       }
     });
   }

package/lib/es/image/previewInner.js

@@ -56,7 +56,7 @@ export default class PreviewInner extends BaseComponent {
     };
 
     this.handleMouseUp = e => {
-      this.foundation.handleMouseUp(e);
+      this.foundation.handleMouseUp(e.nativeEvent);
     };
 
     this.handleMouseMove = e => {
@@ -299,8 +299,8 @@ export default class PreviewInner extends BaseComponent {
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       onMouseMove: this.handleMouseMove,
-      onMouseOver: e => this.handleMouseEvent(e, "over"),
-      onMouseOut: e => this.handleMouseEvent(e, "out")
+      onMouseOver: e => this.handleMouseEvent(e.nativeEvent, "over"),
+      onMouseOut: e => this.handleMouseEvent(e.nativeEvent, "out")
     }, /*#__PURE__*/React.createElement(Header, {
       className: cls(hideViewerCls),
       onClose: this.handlePreviewClose,

package/lib/es/input/index.d.ts

@@ -158,6 +158,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
     componentDidUpdate(prevProps: InputProps): void;

package/lib/es/input/textarea.js

@@ -68,7 +68,7 @@ class TextArea extends BaseComponent {
           this.foundation.resizeTextarea();
         }
       }),
-      getRef: () => this.libRef,
+      getRef: () => this.libRef.current,
       toggleFocusing: focusing => this.setState({
         isFocus: focusing
       }),

package/lib/es/popover/index.d.ts

@@ -53,7 +53,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         visible: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<boolean | object>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
         trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;

package/lib/es/select/index.d.ts

@@ -168,7 +168,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;

package/lib/es/slider/index.js

@@ -456,8 +456,8 @@ export default class Slider extends BaseComponent {
       setOverallVars: (key, value) => {
         this[key] = value;
       },
-      getMinHandleEl: () => this.minHanleEl,
-      getMaxHandleEl: () => this.maxHanleEl,
+      getMinHandleEl: () => this.minHanleEl.current,
+      getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
 

package/lib/es/spin/index.d.ts

@@ -55,6 +55,7 @@ declare class Spin extends BaseComponent<SpinProps, SpinState> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     componentWillUnmount(): void;
     renderSpin(): JSX.Element;

package/lib/es/table/Table.d.ts

@@ -300,7 +300,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showSizeChanger?: boolean;
         showQuickJumper?: boolean;
         popoverZIndex?: number;
-        popoverPosition?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
+        popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
         hideOnSinglePage?: boolean;
         hoverShowPageSelect?: boolean;
     };

package/lib/es/table/Table.js

@@ -819,6 +819,7 @@ class Table extends BaseComponent {
 
     const columns = this.getColumns(props.columns, props.children);
     const cachedflattenColumns = flattenColumns(columns);
+    const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
     this.state = {
       /**
        * Cached props
@@ -831,7 +832,7 @@ class Table extends BaseComponent {
       /**
        * State calculated based on prop
        */
-      queries: cloneDeep(cachedflattenColumns),
+      queries,
       dataSource: [],
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
@@ -1082,7 +1083,23 @@ class Table extends BaseComponent {
             bodyHasScrollBar
           });
         }
+      },
+
+      stopPropagation(e) {
+        // The event definition here is not very accurate for now, it belongs to a broad structure definition
+        if (e && typeof e === 'object') {
+          if (typeof e.stopPropagation === 'function') {
+            e.stopPropagation();
+          }
+
+          if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
+            e.nativeEvent.stopPropagation();
+          } else if (typeof e.stopImmediatePropagation === 'function') {
+            e.stopImmediatePropagation();
+          }
+        }
       }
+
     });
   }
 

package/lib/es/table/TableHeaderRow.d.ts

@@ -51,6 +51,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     headerNode: HTMLElement;
     context: TableContextProps;

package/lib/es/table/interface.d.ts

@@ -133,6 +133,8 @@ export interface FilterDropdownItem {
 }
 export interface RenderOptions {
     expandIcon?: React.ReactNode;
+    selection?: React.ReactNode;
+    indentText?: React.ReactNode;
 }
 export interface OnCellReturnObject extends React.TdHTMLAttributes<HTMLElement> {
     [x: string]: any;

package/lib/es/tooltip/index.d.ts

@@ -39,7 +39,6 @@ export interface TooltipProps extends BaseProps {
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
     spacing?: number;
-    margin?: number;
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
     rePosKey?: string | number;
@@ -82,7 +81,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean | object>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
@@ -98,7 +97,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         spacing: PropTypes.Requireable<number>;
-        margin: PropTypes.Requireable<number>;
         showArrow: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         zIndex: PropTypes.Requireable<number>;
         rePosKey: PropTypes.Requireable<string | number>;
@@ -137,7 +135,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         onVisibleChange: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
         spacing: 8;
-        margin: 0;
         showArrow: boolean;
         wrapWhenSpecial: boolean;
         zIndex: 1060;

package/lib/es/tooltip/index.js

@@ -703,7 +703,6 @@ Tooltip.propTypes = {
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
   spacing: PropTypes.number,
-  margin: PropTypes.number,
   showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   zIndex: PropTypes.number,
   rePosKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -733,7 +732,6 @@ Tooltip.defaultProps = {
   onVisibleChange: _noop,
   onClickOutSide: _noop,
   spacing: numbers.SPACING,
-  margin: numbers.MARGIN,
   showArrow: true,
   wrapWhenSpecial: true,
   zIndex: numbers.DEFAULT_Z_INDEX,

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.22.0-alpha.0",
+    "version": "2.22.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.22.0-alpha.0",
-        "@douyinfe/semi-foundation": "2.22.0-alpha.0",
-        "@douyinfe/semi-icons": "2.22.0-alpha.0",
+        "@douyinfe/semi-animation-react": "2.22.0-beta.0",
+        "@douyinfe/semi-foundation": "2.22.0-beta.0",
+        "@douyinfe/semi-icons": "2.22.0-beta.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.22.0-alpha.0",
+        "@douyinfe/semi-theme-default": "2.22.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "bb316f98269de321274b842e2b6b9b463bca1c53",
+    "gitHead": "6dbdc576c3bfa810e1fac609d87ee53ee0925483",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.22.0-alpha.0",
+        "@douyinfe/semi-scss-compile": "2.22.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",
@@ -97,7 +97,6 @@
         "jsdom": "^15.2.1",
         "merge2": "^1.4.1",
         "null-loader": "^3.0.0",
-        "prop-types": "15.7.2",
         "react-dnd": "^9.5.1",
         "react-infinite-scroller": "^1.2.4",
         "react-storybook-addon-props-combinations": "^1.1.0",