tdesign-react 0.36.4-alpha.2 → 0.36.4

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.36.3
+ * tdesign v0.36.4
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -10113,14 +10113,7 @@
 
     var btnRef = React.useRef();
     useRipple(ref || btnRef);
-    var hasChildren = typeof children !== "undefined";
-    var hasContent = typeof content !== "undefined";
-    var childrenNode = children;
-
-    if (!hasChildren && hasContent) {
-      childrenNode = content;
-    }
-
+    var renderChildren = content !== null && content !== void 0 ? content : children;
     var iconNode = icon;
     if (loading) iconNode = /* @__PURE__ */React__default["default"].createElement(Loading, {
       loading: loading,
@@ -10142,11 +10135,11 @@
       className: classNames$1(className, ["".concat(classPrefix, "-button"), "".concat(classPrefix, "-button--theme-").concat(renderTheme), "".concat(classPrefix, "-button--variant-").concat(variant)], (_classNames = {}, _defineProperty$3(_classNames, "".concat(classPrefix, "-button--shape-").concat(shape), shape !== "rectangle"), _defineProperty$3(_classNames, "".concat(classPrefix, "-button--ghost"), ghost), _defineProperty$3(_classNames, "".concat(classPrefix, "-is-loading"), loading), _defineProperty$3(_classNames, "".concat(classPrefix, "-is-disabled"), disabled || loading), _defineProperty$3(_classNames, "".concat(classPrefix, "-size-s"), size === "small"), _defineProperty$3(_classNames, "".concat(classPrefix, "-size-l"), size === "large"), _defineProperty$3(_classNames, "".concat(classPrefix, "-size-full-width"), block), _classNames)),
       onClick: !disabled && !loading ? onClick : void 0,
       disabled: disabled || loading
-    }), iconNode ? /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, iconNode, (hasChildren || hasContent) && /* @__PURE__ */React__default["default"].createElement("span", {
+    }), iconNode ? /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, iconNode, renderChildren && /* @__PURE__ */React__default["default"].createElement("span", {
       className: "".concat(classPrefix, "-button__text")
-    }, childrenNode)) : /* @__PURE__ */React__default["default"].createElement("span", {
+    }, renderChildren)) : /* @__PURE__ */React__default["default"].createElement("span", {
       className: "".concat(classPrefix, "-button__text")
-    }, childrenNode));
+    }, renderChildren));
   });
   Button$1.displayName = "Button";
   Button$1.defaultProps = buttonDefaultProps;
@@ -13423,7 +13416,7 @@
 
     var _useState7 = React.useState(""),
         _useState8 = _slicedToArray(_useState7, 2),
-        composingRefValue = _useState8[0],
+        composingValue = _useState8[0],
         setComposingValue = _useState8[1];
 
     var isShowClearIcon = (clearable && value && !disabled || showClearIconOnEmpty) && isHover;
@@ -13465,7 +13458,7 @@
       placeholder: placeholder,
       type: renderType,
       className: "".concat(classPrefix, "-input__inner"),
-      value: composingRef.current ? composingRefValue : value !== null && value !== void 0 ? value : "",
+      value: composingRef.current ? composingValue : value !== null && value !== void 0 ? value : "",
       readOnly: readonly,
       disabled: disabled,
       autoComplete: autocomplete !== null && autocomplete !== void 0 ? autocomplete : local.autocomplete || void 0,
@@ -13572,7 +13565,6 @@
         handleChange(e);
       }
 
-      setComposingValue("");
       onCompositionend === null || onCompositionend === void 0 ? void 0 : onCompositionend(value2, {
         e: e
       });
@@ -52023,31 +52015,31 @@
         firstInputElement: inputRefs.firstInputRef.current,
         secondInputElement: inputRefs.secondInputRef.current,
         focus: function focus(options) {
-          var _inputRefs$$current;
+          var _inputRefs$current;
 
           var _ref3 = options || {},
               _ref3$position = _ref3.position,
               position = _ref3$position === void 0 ? "first" : _ref3$position;
 
-          (_inputRefs$$current = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$$current === void 0 ? void 0 : _inputRefs$$current.focus();
+          (_inputRefs$current = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$current === void 0 ? void 0 : _inputRefs$current.focus();
         },
         blur: function blur(options) {
-          var _inputRefs$$current2;
+          var _inputRefs$current2;
 
           var _ref4 = options || {},
               _ref4$position = _ref4.position,
               position = _ref4$position === void 0 ? "first" : _ref4$position;
 
-          (_inputRefs$$current2 = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$$current2 === void 0 ? void 0 : _inputRefs$$current2.blur();
+          (_inputRefs$current2 = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$current2 === void 0 ? void 0 : _inputRefs$current2.blur();
         },
         select: function select(options) {
-          var _inputRefs$$current3;
+          var _inputRefs$current3;
 
           var _ref5 = options || {},
               _ref5$position = _ref5.position,
               position = _ref5$position === void 0 ? "first" : _ref5$position;
 
-          (_inputRefs$$current3 = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$$current3 === void 0 ? void 0 : _inputRefs$$current3.select();
+          (_inputRefs$current3 = inputRefs["".concat(position, "InputRef")].current) === null || _inputRefs$current3 === void 0 ? void 0 : _inputRefs$current3.select();
         }
       };
     });
@@ -54178,10 +54170,11 @@
     EPickerCols2["hour"] = "hour";
     EPickerCols2["minute"] = "minute";
     EPickerCols2["second"] = "second";
+    EPickerCols2["milliSecond"] = "millisecond";
     EPickerCols2["meridiem"] = "meridiem";
     return EPickerCols2;
   }(EPickerCols || {});
-  var TIME_FORMAT$1 = /(a\s+|A\s+)?(h+|H+)?:?(m+)?:?(s+)?(\s+a|\s+A)?/;
+  var TIME_FORMAT$1 = /(a\s+|A\s+)?(h+|H+)?:?(m+)?:?(s+)?:?(S+)?(\s+a|\s+A)?/;
   var TWELVE_HOUR_FORMAT = /[h]{1}/;
 
   function validateInputValue(value, format) {
@@ -54197,7 +54190,7 @@
     })[0];
   }
 
-  var timeArr = [EPickerCols.hour, EPickerCols.minute, EPickerCols.second];
+  var timeArr = [EPickerCols.hour, EPickerCols.minute, EPickerCols.second, EPickerCols.milliSecond];
   dayjs.extend(customParseFormat);
 
   var SinglePanel$1 = function SinglePanel(props) {
@@ -54241,18 +54234,20 @@
     React.useEffect(function () {
       var match = format.match(TIME_FORMAT$1);
 
-      var _match = _slicedToArray(match, 6),
+      var _match = _slicedToArray(match, 7),
           startCol = _match[1],
           hourCol = _match[2],
           minuteCol = _match[3],
           secondCol = _match[4],
-          endCol = _match[5];
+          milliSecondCol = _match[5],
+          endCol = _match[6];
 
       var meridiem = EPickerCols.meridiem,
           hour = EPickerCols.hour,
           minute = EPickerCols.minute,
-          second = EPickerCols.second;
-      var renderCol = [startCol && meridiem, hourCol && hour, minuteCol && minute, secondCol && second, endCol && meridiem].filter(function (v) {
+          second = EPickerCols.second,
+          milliSecond = EPickerCols.milliSecond;
+      var renderCol = [startCol && meridiem, hourCol && hour, minuteCol && minute, secondCol && second, milliSecondCol && milliSecond, endCol && meridiem].filter(function (v) {
         return !!v;
       });
       setCols(renderCol);
@@ -54284,8 +54279,8 @@
 
       if (timeArr.includes(col)) {
         var colIdx = timeArr.indexOf(col);
-        var colStep = steps[colIdx];
-        if (col === EPickerCols.hour) count = TWELVE_HOUR_FORMAT.test(format) ? 11 : 23;else count = 59;
+        var colStep = steps[colIdx] || 1;
+        if (col === EPickerCols.hour) count = TWELVE_HOUR_FORMAT.test(format) ? 11 : 23;else if (col === EPickerCols.milliSecond) count = 999;else count = 59;
         var colList = range_1(0, count + 1, Number(colStep)).map(function (v) {
           return padStart_1(String(v), 2, "0");
         }) || [];
@@ -54322,14 +54317,10 @@
 
       if (timeArr.includes(col)) {
         var max = 59;
-
-        if (col === EPickerCols.hour) {
-          max = /[h]{1}/.test(format) ? 11 : 23;
-        }
-
+        if (col === EPickerCols.hour) max = /[h]{1}/.test(format) ? 11 : 23;else if (col === EPickerCols.milliSecond) max = 999;
         var colIdx = timeArr.indexOf(col);
-        var availableArr = range_1(0, max + 1, Number(steps[colIdx]));
-        val = closestLookup(availableArr, Number(getColList(col)[Math.min(colStep - 1, max + 1, availableArr.length - 1)]), Number(steps[colIdx]));
+        var availableArr = range_1(0, max + 1, Number(steps[colIdx]) || 1);
+        val = closestLookup(availableArr, Number(getColList(col)[Math.min(colStep - 1, max + 1, availableArr.length - 1)]), Number(steps[colIdx]) || 1);
         if (Number.isNaN(val)) val = availableArr[availableArr.length - 1];
 
         if (col === EPickerCols.hour && cols.includes(EPickerCols.meridiem) && dayjsValue.hour() >= 12) {
@@ -54341,6 +54332,8 @@
       if (!dayjs(dayjsValue).isValid()) return;
 
       if (distance !== scrollTop) {
+        var _scrollCtrl$scrollTo;
+
         if (timeArr.includes(col)) {
           var _dayjsValue$col;
 
@@ -54358,7 +54351,7 @@
         onChange(formattedVal);
         var scrollCtrl = colsRef.current[cols.indexOf(col)];
         if (!distance || !scrollCtrl || scrollCtrl.scrollTop === distance) return;
-        scrollCtrl.scrollTo({
+        (_scrollCtrl$scrollTo = scrollCtrl.scrollTo) === null || _scrollCtrl$scrollTo === void 0 ? void 0 : _scrollCtrl$scrollTo.call(scrollCtrl, {
           top: distance,
           behavior: "smooth"
         });
@@ -54366,11 +54359,13 @@
     };
 
     var scrollToTime = React.useCallback(function (col, time, idx) {
+      var _scrollCtrl$scrollTo2;
+
       var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
       var distance = getScrollDistance(col, time);
       var scrollCtrl = colsRef.current[idx];
       if (!distance || !scrollCtrl || scrollCtrl.scrollTop === distance || !timeItemCanUsed(col, time)) return;
-      scrollCtrl.scrollTo({
+      (_scrollCtrl$scrollTo2 = scrollCtrl.scrollTo) === null || _scrollCtrl$scrollTo2 === void 0 ? void 0 : _scrollCtrl$scrollTo2.call(scrollCtrl, {
         top: distance,
         behavior: behavior
       });
@@ -57319,6 +57314,69 @@
     visible: false
   };
 
+  var useDrag$1 = function useDrag(placement, sizeDraggable) {
+    var _useState = React.useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        dragSizeValue = _useState2[0],
+        changeDragSizeValue = _useState2[1];
+
+    var handleMousemove = function handleMousemove(e) {
+      var x = e.x,
+          y = e.y;
+
+      if (sizeDraggable) {
+        if (placement === "right") {
+          changeDragSizeValue("".concat(document.documentElement.clientWidth - x + 8, "px"));
+        }
+
+        if (placement === "left") {
+          changeDragSizeValue("".concat(x + 8, "px"));
+        }
+
+        if (placement === "top") {
+          changeDragSizeValue("".concat(y + 8, "px"));
+        }
+
+        if (placement === "bottom") {
+          changeDragSizeValue("".concat(document.documentElement.clientHeight - y + 8, "px"));
+        }
+      }
+    };
+
+    var handleMouseup = function handleMouseup() {
+      document.removeEventListener("mouseup", handleMouseup, true);
+      document.removeEventListener("mousemove", handleMousemove, true);
+    };
+
+    var draggableLineStyles = React.useMemo(function () {
+      var _ref;
+
+      var isHorizontal = ["right", "left"].includes(placement);
+      var oppositeMap = {
+        left: "right",
+        right: "left",
+        top: "bottom",
+        bottom: "top"
+      };
+      return _ref = {
+        zIndex: 1,
+        position: "absolute",
+        background: "transparent"
+      }, _defineProperty$3(_ref, oppositeMap[placement], 0), _defineProperty$3(_ref, "width", isHorizontal ? "16px" : "100%"), _defineProperty$3(_ref, "height", isHorizontal ? "100%" : "16px"), _defineProperty$3(_ref, "cursor", isHorizontal ? "col-resize" : "row-resize"), _ref;
+    }, [placement]);
+
+    var enableDrag = function enableDrag() {
+      document.addEventListener("mouseup", handleMouseup, true);
+      document.addEventListener("mousemove", handleMousemove, true);
+    };
+
+    return {
+      dragSizeValue: dragSizeValue,
+      enableDrag: enableDrag,
+      draggableLineStyles: draggableLineStyles
+    };
+  };
+
   function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -57328,16 +57386,6 @@
     CLICK_CANCEL_BTN: "cancel",
     KEYDOWN_ESC: "esc"
   };
-
-  var getSizeValue = function getSizeValue(size) {
-    var defaultSize = isNaN(Number(size)) ? size : "".concat(size, "px");
-    return {
-      small: "300px",
-      medium: "500px",
-      large: "760px"
-    }[size] || defaultSize;
-  };
-
   var Drawer$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _classnames;
 
@@ -57369,7 +57417,8 @@
         destroyOnClose = props.destroyOnClose,
         mode = props.mode,
         _props$preventScrollT = props.preventScrollThrough,
-        preventScrollThrough = _props$preventScrollT === void 0 ? true : _props$preventScrollT;
+        preventScrollThrough = _props$preventScrollT === void 0 ? true : _props$preventScrollT,
+        sizeDraggable = props.sizeDraggable;
 
     var _useLocaleReceiver = useLocaleReceiver("drawer"),
         _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
@@ -57391,6 +57440,11 @@
     var transform = visible ? "translate(0px)" : "";
     var closeIcon = /*#__PURE__*/React__default["default"].isValidElement(closeBtn) ? closeBtn : /* @__PURE__ */React__default["default"].createElement(CloseIcon, null);
 
+    var _useDrag = useDrag$1(placement, sizeDraggable),
+        dragSizeValue = _useDrag.dragSizeValue,
+        enableDrag = _useDrag.enableDrag,
+        draggableLineStyles = _useDrag.draggableLineStyles;
+
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         isDestroyOnClose = _useState2[0],
@@ -57412,6 +57466,15 @@
       if (!destroyOnClose || !visible) return;
       setIsDestroyOnClose(false);
     }, [visible, destroyOnClose]);
+    var getSizeValue = React.useCallback(function (size2) {
+      if (dragSizeValue) return dragSizeValue;
+      var defaultSize = isNaN(Number(size2)) ? size2 : "".concat(size2, "px");
+      return {
+        small: "300px",
+        medium: "500px",
+        large: "760px"
+      }[size2] || defaultSize;
+    }, [dragSizeValue]);
     React.useEffect(function () {
       var documentBodyCssText = "";
 
@@ -57446,7 +57509,7 @@
         containerRef.current.focus();
         contentWrapperRef.current.style.transform = transform;
       }
-    }, [attach, mode, transform, visible, placement, size]);
+    }, [attach, mode, transform, visible, placement, size, getSizeValue]);
 
     function onMaskClick(e) {
       onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick({
@@ -57571,7 +57634,10 @@
       ref: contentWrapperRef,
       className: contentWrapperClass,
       style: contentWrapperStyle
-    }, renderCloseBtn, renderHeader, renderBody, renderFooter)));
+    }, renderCloseBtn, renderHeader, renderBody, renderFooter, sizeDraggable && /* @__PURE__ */React__default["default"].createElement("div", {
+      style: draggableLineStyles,
+      onMouseDown: enableDrag
+    }))));
   });
   Drawer$1.displayName = "Drawer";
   Drawer$1.defaultProps = drawerDefaultProps;
@@ -60809,59 +60875,53 @@
 
   var Transfer = Transfer$1;
 
-  // refs, but then host hooks / components could not opt out of renders.
-  // This could've been exported to its own module, but the current build doesn't
-  // seem to work with module imports and I had no more time to spend on this...
+  // refs to such extent, but then composing hooks and components could not opt out of unnecessary renders.
 
   function useResolvedElement(subscriber, refOrElement) {
-    var callbackRefElement = React.useRef(null);
     var lastReportRef = React.useRef(null);
-    var cleanupRef = React.useRef();
-    var callSubscriber = React.useCallback(function () {
-      var element = null;
-
-      if (callbackRefElement.current) {
-        element = callbackRefElement.current;
-      } else if (refOrElement) {
-        if (refOrElement instanceof HTMLElement) {
-          element = refOrElement;
-        } else {
-          element = refOrElement.current;
-        }
-      }
+    var refOrElementRef = React.useRef(null);
+    refOrElementRef.current = refOrElement;
+    var cbElementRef = React.useRef(null); // Calling re-evaluation after each render without using a dep array,
+    // as the ref object's current value could've changed since the last render.
 
-      if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.reporter === callSubscriber) {
+    React.useEffect(function () {
+      evaluateSubscription();
+    });
+    var evaluateSubscription = React.useCallback(function () {
+      var cbElement = cbElementRef.current;
+      var refOrElement = refOrElementRef.current; // Ugly ternary. But smaller than an if-else block.
+
+      var element = cbElement ? cbElement : refOrElement ? refOrElement instanceof Element ? refOrElement : refOrElement.current : null;
+
+      if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.subscriber === subscriber) {
         return;
       }
 
-      if (cleanupRef.current) {
-        cleanupRef.current(); // Making sure the cleanup is not called accidentally multiple times.
-
-        cleanupRef.current = null;
+      if (lastReportRef.current && lastReportRef.current.cleanup) {
+        lastReportRef.current.cleanup();
       }
 
       lastReportRef.current = {
-        reporter: callSubscriber,
-        element: element
-      }; // Only calling the subscriber, if there's an actual element to report.
-
-      if (element) {
-        cleanupRef.current = subscriber(element);
-      }
-    }, [refOrElement, subscriber]); // On each render, we check whether a ref changed, or if we got a new raw
-    // element.
+        element: element,
+        subscriber: subscriber,
+        // Only calling the subscriber, if there's an actual element to report.
+        // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
+        cleanup: element ? subscriber(element) : undefined
+      };
+    }, [subscriber]); // making sure we call the cleanup function on unmount
 
     React.useEffect(function () {
-      // With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
-      // render accompanying that change as well.
-      // To guarantee we always have the right element, one must use the ref callback provided instead, but we support
-      // RefObjects to make the hook API more convenient in certain cases.
-      callSubscriber();
-    }, [callSubscriber]);
+      return function () {
+        if (lastReportRef.current && lastReportRef.current.cleanup) {
+          lastReportRef.current.cleanup();
+          lastReportRef.current = null;
+        }
+      };
+    }, []);
     return React.useCallback(function (element) {
-      callbackRefElement.current = element;
-      callSubscriber();
-    }, [callSubscriber]);
+      cbElementRef.current = element;
+      evaluateSubscription();
+    }, [evaluateSubscription]);
   } // We're only using the first element of the size sequences, until future versions of the spec solidify on how
   // exactly it'll be used for fragments in multi-column scenarios:
   // From the spec:
@@ -60889,7 +60949,7 @@
   // regardless of box option.
 
 
-  var extractSize = function extractSize(entry, boxProp, sizeType) {
+  function extractSize(entry, boxProp, sizeType) {
     if (!entry[boxProp]) {
       if (boxProp === "contentBoxSize") {
         // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
@@ -60908,7 +60968,7 @@
     // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
     // @ts-ignore
     entry[boxProp][sizeType];
-  };
+  }
 
   function useResizeObserver(opts) {
     if (opts === void 0) {
@@ -60936,6 +60996,7 @@
 
     var didUnmount = React.useRef(false);
     React.useEffect(function () {
+      didUnmount.current = false;
       return function () {
         didUnmount.current = true;
       };
@@ -60998,7 +61059,7 @@
         width: size.width,
         height: size.height
       };
-    }, [refCallback, size ? size.width : null, size ? size.height : null]);
+    }, [refCallback, size.width, size.height]);
   }
 
   var AvatarContext = /*#__PURE__*/React__default["default"].createContext("default");