@douyinfe/semi-ui 2.53.3 → 2.54.0-alpha.1

package/dist/umd/semi-ui.js

@@ -22975,7 +22975,9 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
         expandable,
         expandText
       } = this.getEllipsisOpt();
-      const overflowed = !expanded && (isOverflowed || isTruncated);
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      // If the css is truncated, use isOverflowed to judge. If the css is truncated, use isTruncated to judge.
+      const overflowed = !expanded && (canUseCSSEllipsis ? isOverflowed : isTruncated);
       const noExpandText = !expandable && isUndefined_default()(expandText);
       const show = noExpandText && overflowed && showTooltip;
       if (!show) {
@@ -23257,11 +23259,11 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
       copied: false,
       // ellipsis
       // if text is overflow in container
-      isOverflowed: true,
+      isOverflowed: false,
       ellipsisContent: props.children,
       expanded: false,
       // if text is truncated with js
-      isTruncated: true,
+      isTruncated: false,
       prevChildren: null
     };
     this.wrapperRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
@@ -23282,7 +23284,7 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
     newState.prevChildren = props.children;
     if (props.ellipsis && prevChildren !== props.children) {
       // reset ellipsis state if children update
-      newState.isOverflowed = true;
+      newState.isOverflowed = false;
       newState.ellipsisContent = props.children;
       newState.expanded = false;
       newState.isTruncated = true;
@@ -36386,7 +36388,9 @@ const cascader_constants_strings = {
   /* 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'
 };
 const cascader_constants_numbers = {};
 
@@ -47047,6 +47051,10 @@ const resetkey = 0;
 class Cascader extends BaseComponent {
   constructor(props) {
     super(props);
+    // ref method
+    this.search = value => {
+      this.handleInputChange(value);
+    };
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
@@ -47233,12 +47241,13 @@ class Cascader extends BaseComponent {
       const {
         placeholder,
         filterTreeNode,
-        multiple
+        multiple,
+        searchPosition
       } = this.props;
       const {
         checkedKeys
       } = this.state;
-      const searchable = Boolean(filterTreeNode);
+      const searchable = Boolean(filterTreeNode) && searchPosition === cascader_constants_strings.SEARCH_POSITION_TRIGGER;
       if (!searchable) {
         if (multiple) {
           if (checkedKeys.size === 0) {
@@ -47998,7 +48007,8 @@ Cascader.propTypes = {
   leafOnly: (prop_types_default()).bool,
   enableLeafClick: (prop_types_default()).bool,
   preventScroll: (prop_types_default()).bool,
-  position: (prop_types_default()).string
+  position: (prop_types_default()).string,
+  searchPosition: (prop_types_default()).string
 };
 Cascader.defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponentName__, {
   borderless: false,
@@ -48029,7 +48039,8 @@ Cascader.defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponent
   onDropdownVisibleChange: (noop_default()),
   onListScroll: (noop_default()),
   enableLeafClick: false,
-  'aria-label': 'Cascader'
+  'aria-label': 'Cascader',
+  searchPosition: cascader_constants_strings.SEARCH_POSITION_TRIGGER
 });
 /* harmony default export */ const cascader_0 = (Cascader);
 ;// CONCATENATED MODULE: ../semi-foundation/collapse/constants.ts
@@ -48142,9 +48153,8 @@ class Collapsible extends BaseComponent {
     this.isChildrenInRenderTree = () => {
       if (this.domRef.current) {
         return this.domRef.current.offsetHeight > 0;
-      } else {
-        return false;
       }
+      return false;
     };
     this.state = {
       domInRenderTree: false,
@@ -48228,6 +48238,7 @@ class Collapsible extends BaseComponent {
     const wrapperCls = classnames_default()(`${collapsible_constants_cssClasses.PREFIX}-wrapper`, {
       [`${collapsible_constants_cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
+    const shouldRender = this.props.keepDOM && !this.props.lazyRender || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -48246,7 +48257,7 @@ class Collapsible extends BaseComponent {
         overflow: 'hidden'
       },
       id: this.props.id
-    }, (this.props.keepDOM || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen) && this.props.children));
+    }, shouldRender && this.props.children));
   }
 }
 Collapsible.__SemiComponentName__ = "Collapsible";
@@ -48255,6 +48266,7 @@ Collapsible.defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiCom
   duration: 250,
   motion: true,
   keepDOM: false,
+  lazyRender: true,
   collapseHeight: 0,
   fade: false
 });
@@ -60768,7 +60780,8 @@ const descriptions_constants_cssClasses = {
 };
 const descriptions_constants_strings = {
   ALIGN_SET: ['left', 'justify', 'plain', 'center'],
-  SIZE_SET: ['small', 'medium', 'large']
+  SIZE_SET: ['small', 'medium', 'large'],
+  LAYOUT_SET: ['horizontal', 'vertical']
 };
 const descriptions_constants_numbers = {};
 
@@ -60803,38 +60816,45 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
         itemKey,
         hidden,
         className,
+        span,
         style,
         children
       } = _a,
-      rest = descriptions_item_rest(_a, ["itemKey", "hidden", "className", "style", "children"]);
+      rest = descriptions_item_rest(_a, ["itemKey", "hidden", "className", "span", "style", "children"]);
     const {
-      align
+      align,
+      layout
     } = this.context;
     if (hidden) {
       return null;
     }
-    const item = align === 'plain' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("td", {
-      className: `${item_prefixCls}-item`
+    const plainItem = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("td", {
+      className: `${item_prefixCls}-item`,
+      colSpan: span || 1
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: valCls
-    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", Object.assign({
-      className: className,
-      style: style
-    }, getDataAttr(rest)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("th", {
+    }, typeof children === 'function' ? children() : children));
+    const alignItem = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("th", {
       className: `${item_prefixCls}-item ${item_prefixCls}-item-th`
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: keyCls
     }, itemKey)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("td", {
-      className: `${item_prefixCls}-item ${item_prefixCls}-item-td`
+      className: `${item_prefixCls}-item ${item_prefixCls}-item-td`,
+      colSpan: span || 1
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));
-    return item;
+    const item = align === 'plain' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), plainItem) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", Object.assign({
+      className: className,
+      style: style
+    }, getDataAttr(rest)), alignItem);
+    const horizontalItem = align === 'plain' ? plainItem : alignItem;
+    return layout === 'horizontal' ? horizontalItem : item;
   }
 }
 item_Item.propTypes = {
@@ -60844,6 +60864,44 @@ item_Item.propTypes = {
   style: (prop_types_default()).object
 };
 item_Item.contextType = descriptions_context;
+;// CONCATENATED MODULE: ../semi-foundation/descriptions/foundation.ts
+
+class DescriptionsFoundation extends foundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  getHorizontalList() {
+    const {
+      column,
+      data,
+      children
+    } = this.getProps();
+    let columns;
+    if (data === null || data === void 0 ? void 0 : data.length) {
+      columns = data || [];
+    } else {
+      columns = (children === null || children === void 0 ? void 0 : children.map(item => Object.assign({
+        value: item.props.children
+      }, item.props))) || [];
+    }
+    const horizontalList = [];
+    const curSpan = {
+      totalSpan: 0,
+      itemList: []
+    };
+    for (const item of columns) {
+      curSpan.totalSpan += item.span || 1;
+      curSpan.itemList.push(item);
+      if (curSpan.totalSpan >= column) {
+        horizontalList.push(curSpan.itemList);
+        curSpan.itemList = [];
+        curSpan.totalSpan = 0;
+      }
+    }
+    if (curSpan.itemList.length != 0) horizontalList.push(curSpan.itemList);
+    return horizontalList;
+  }
+}
 ;// CONCATENATED MODULE: ./descriptions/index.tsx
 
 var descriptions_rest = undefined && undefined.__rest || function (s, e) {
@@ -60862,8 +60920,43 @@ var descriptions_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
+
 const descriptions_prefixCls = descriptions_constants_cssClasses.PREFIX;
-class Descriptions extends external_root_React_commonjs2_react_commonjs_react_amd_react_.PureComponent {
+class Descriptions extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.renderChildrenList = () => {
+      const props = this.props;
+      const {
+        layout,
+        data,
+        children
+      } = props;
+      if (layout === 'horizontal') {
+        const horizontalList = this.foundation.getHorizontalList();
+        return horizontalList.map((row, index) => {
+          return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", {
+            key: index
+          }, row.map((item, itemIndex) => isPlainObject_default()(item) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(item_Item, Object.assign({
+            itemKey: item.key
+          }, item, {
+            key: index + '-' + itemIndex
+          }), item.value) : null));
+        });
+      } else {
+        return data && data.length ? data.map((item, index) => isPlainObject_default()(item) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(item_Item, Object.assign({
+          itemKey: item.key
+        }, item, {
+          key: index
+        }), item.value) : null) : children;
+      }
+    };
+    this.foundation = new DescriptionsFoundation(this.adapter);
+  }
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
   render() {
     const _a = this.props,
       {
@@ -60873,27 +60966,26 @@ class Descriptions extends external_root_React_commonjs2_react_commonjs_react_am
         className,
         style,
         children,
-        data
+        data,
+        layout
       } = _a,
-      rest = descriptions_rest(_a, ["align", "row", "size", "className", "style", "children", "data"]);
+      rest = descriptions_rest(_a, ["align", "row", "size", "className", "style", "children", "data", "layout"]);
     const classNames = classnames_default()(descriptions_prefixCls, className, {
       [`${descriptions_prefixCls}-${align}`]: !row,
       [`${descriptions_prefixCls}-double`]: row,
-      [`${descriptions_prefixCls}-double-${size}`]: row
+      [`${descriptions_prefixCls}-double-${size}`]: row,
+      [`${descriptions_prefixCls}-horizontal`]: layout === 'horizontal',
+      [`${descriptions_prefixCls}-vertical`]: layout === 'vertical'
     });
-    const childrenList = data && data.length ? data.map((item, index) => isPlainObject_default()(item) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(item_Item, Object.assign({
-      itemKey: item.key
-    }, item, {
-      key: index
-    }), item.value) : null) : children;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
       className: classNames,
       style: style
     }, getDataAttr(rest)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("table", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tbody", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(descriptions_context.Provider, {
       value: {
-        align
+        align,
+        layout
       }
-    }, childrenList))));
+    }, this.renderChildrenList()))));
   }
 }
 Descriptions.Item = item_Item;
@@ -60910,13 +61002,17 @@ Descriptions.propTypes = {
     hidden: (prop_types_default()).bool,
     className: (prop_types_default()).string,
     style: (prop_types_default()).object
-  }))
+  })),
+  layout: prop_types_default().oneOf(descriptions_constants_strings.LAYOUT_SET),
+  column: (prop_types_default()).number
 };
 Descriptions.defaultProps = {
   align: 'center',
   row: false,
   size: 'medium',
-  data: []
+  data: [],
+  layout: 'vertical',
+  column: 3
 };
 /* harmony default export */ const descriptions_0 = (Descriptions);
 ;// CONCATENATED MODULE: ../semi-foundation/divider/constants.ts
@@ -62032,7 +62128,7 @@ var Modal_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const destroyFns = [];
+let destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
@@ -62359,12 +62455,13 @@ Modal.confirm = function (props) {
   return confirm_confirm(withConfirm(props));
 };
 Modal.destroyAll = function destroyAllFn() {
-  while (destroyFns.length) {
-    const close = destroyFns.pop();
+  for (let i = 0, len = destroyFns.length; i < len; i++) {
+    const close = destroyFns[i];
     if (close) {
       close();
     }
   }
+  destroyFns = [];
 };
 /* harmony default export */ const modal_Modal = (Modal);
 ;// CONCATENATED MODULE: ./modal/index.tsx
@@ -75870,7 +75967,8 @@ class SliderFoundation extends foundation {
     this.onHandleLeave = () => {
       // this._adapter.setEventDefault(e);
       const disabled = this._adapter.getState('disabled');
-      if (!disabled && this.getStates()['focusPos'] === "") {
+      const isDrag = this._adapter.getState('isDrag');
+      if (!disabled && !isDrag) {
         this._adapter.onHandleLeave();
       }
     };
@@ -76555,11 +76653,13 @@ class Slider extends BaseComponent {
     var _this = this;
     return Object.assign(Object.assign({}, super.adapter), {
       getSliderLengths: () => {
+        var _a;
         if (this.sliderEl && this.sliderEl.current) {
           const rect = this.sliderEl.current.getBoundingClientRect();
+          const offsetParentRect = (_a = this.sliderEl.current.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
           const offset = {
-            x: this.sliderEl.current.offsetLeft,
-            y: this.sliderEl.current.offsetTop
+            x: offsetParentRect ? rect.left - offsetParentRect.left : this.sliderEl.current.offsetLeft,
+            y: offsetParentRect ? rect.top - offsetParentRect.top : this.sliderEl.current.offsetTop
           };
           return {
             sliderX: offset.x,
@@ -87407,6 +87507,9 @@ const createBaseToast = () => {
           ToastList.defaultOpts[pos] = opts[pos];
         }
       });
+      if (typeof opts.theme === 'string' && toast_constants_strings.themes.includes(opts.theme)) {
+        ToastList.defaultOpts.theme = opts.theme;
+      }
       if (typeof opts.zIndex === 'number') {
         ToastList.defaultOpts.zIndex = opts.zIndex;
       }
@@ -100119,6 +100222,33 @@ PreviewImage.defaultProps = {
   zoom: undefined
 };
 ;// CONCATENATED MODULE: ../semi-foundation/image/utils.ts
+var image_utils_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 const isTargetEmit = (event, targetClasses) => {
   // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
   // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
@@ -100132,27 +100262,25 @@ const isTargetEmit = (event, targetClasses) => {
   });
   return isTarget;
 };
-const downloadImage = (src, filename) => {
-  const image = new Image();
-  image.src = src;
-  image.crossOrigin = "anonymous";
-  image.onload = e => {
-    const eleLink = document.createElement("a");
-    eleLink.download = filename;
-    eleLink.style.display = "none";
-    eleLink.download = filename;
-    eleLink.href = src;
-    const canvas = document.createElement("canvas");
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const context = canvas.getContext("2d");
-    context.drawImage(image, 0, 0, image.width, image.height);
-    eleLink.href = canvas.toDataURL("image/jpeg");
-    document.body.appendChild(eleLink);
-    eleLink.click();
-    document.body.removeChild(eleLink);
-  };
-};
+const downloadImage = (src, filename, downloadErrorCb) => image_utils_awaiter(void 0, void 0, void 0, function* () {
+  try {
+    const response = yield fetch(src);
+    if (response.ok) {
+      const blob = yield response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.click();
+      URL.revokeObjectURL(url);
+      link.remove();
+    } else {
+      downloadErrorCb(src);
+    }
+  } catch (error) {
+    downloadErrorCb(src);
+  }
+});
 const crossMerge = function () {
   let leftArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let rightArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -100375,7 +100503,7 @@ class PreviewInnerFoundation extends foundation {
       const setDownloadName = this._adapter.getSetDownloadFunc();
       const downloadSrc = imgSrc[currentIndex];
       const downloadName = setDownloadName ? setDownloadName(downloadSrc) : downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1).split('?')[0];
-      downloadImage(downloadSrc, downloadName);
+      downloadImage(downloadSrc, downloadName, this._adapter.notifyDownloadError);
       this._adapter.notifyDownload(downloadSrc, currentIndex);
     };
     this.handlePreviewClose = e => {
@@ -100632,6 +100760,12 @@ class PreviewInner extends BaseComponent {
         } = this.props;
         isFunction_default()(onDownload) && onDownload(src, index);
       },
+      notifyDownloadError: src => {
+        const {
+          onDownloadError
+        } = this.props;
+        isFunction_default()(onDownloadError) && onDownloadError(src);
+      },
       registerKeyDownListener: () => {
         window && window.addEventListener("keydown", this.handleKeyDown);
       },