one-design-next 0.0.78 → 0.0.81

package/dist/clarify-dock/style/index.css

@@ -545,13 +545,15 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
 div[data-odn-clarify-dock] [data-odn-date-picker-container]:not([data-odn-date-picker-container-range]) {
   display: inline-block;
   box-sizing: border-box;
-  width: calc(12ch + 10px + 32px + 2px);
+  font-size: var(--odn-font-size-text-sm);
+  width: calc(10ch + 10px + 32px + 2px);
 }
 
 div[data-odn-clarify-dock] [data-odn-date-picker-container-range] {
   display: inline-block;
   box-sizing: border-box;
-  width: calc(25ch + 10px + 32px + 2px);
+  font-size: var(--odn-font-size-text-sm);
+  width: calc(21ch + 10px + 32px + 2px);
 }
 
 div[data-odn-clarify-dock] [data-odn-date-picker-input] {

package/dist/index.d.ts

@@ -50,7 +50,7 @@ export { default as TextSwap, type TextSwapFlipProps, type TextSwapProps, } from
 export { default as TimePicker, type TimePickerProps } from './time-picker';
 export { default as Tooltip } from './tooltip';
 export { default as TreeSelect, type TreeNodeData, type TreeSelectProps, } from './tree-select';
-export { default as VirtualList, type VirtualListProps } from './virtual-list';
+export { default as VirtualList, type VirtualListProps, type VirtualListRef, } from './virtual-list';
 export { default as ActionBar, type ActionBarProps } from './action-bar';
 export { default as AgentStep, type AgentStepGroupProps, type AgentStepProps, } from './agent-step';
 export { default as AgentThink, type AgentThinkProps } from './agent-think';

package/dist/select/SelectFeedback.d.ts

@@ -6,6 +6,8 @@ export type SelectFeedbackState = {
 export interface SelectFeedbackProps {
     feedback: SelectFeedbackState | null;
     onUndo?: () => void;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 declare const SelectFeedback: React.FC<SelectFeedbackProps>;
 export default SelectFeedback;

package/dist/select/SelectFeedback.js

@@ -1,17 +1,114 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+var ANIMATE_MS = 300;
+var ANIMATE_DELAY_MS = 50;
+var COLLAPSED_STYLE = {
+  height: '0px',
+  marginTop: '0',
+  marginBottom: '0',
+  paddingTop: '0',
+  paddingBottom: '0',
+  opacity: '0'
+};
+var EXPANDED_STYLE = {
+  height: '',
+  marginTop: '',
+  marginBottom: '',
+  paddingTop: '',
+  paddingBottom: '',
+  opacity: ''
+};
+function prefersReducedMotion() {
+  return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
 var SelectFeedback = function SelectFeedback(_ref) {
   var feedback = _ref.feedback,
-    onUndo = _ref.onUndo;
-  if (!feedback) {
+    onUndo = _ref.onUndo,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  var _useState = useState(feedback),
+    _useState2 = _slicedToArray(_useState, 2),
+    rendered = _useState2[0],
+    setRendered = _useState2[1];
+  var _useState3 = useState(Boolean(feedback)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var rootRef = useRef(null);
+  var timersRef = useRef([]);
+  var clearTimers = function clearTimers() {
+    timersRef.current.forEach(function (id) {
+      return window.clearTimeout(id);
+    });
+    timersRef.current = [];
+  };
+  useEffect(function () {
+    if (feedback) {
+      setRendered(feedback);
+      setOpen(true);
+      return;
+    }
+    setOpen(false);
+  }, [feedback]);
+  useLayoutEffect(function () {
+    var el = rootRef.current;
+    if (!el) {
+      return;
+    }
+    clearTimers();
+    if (prefersReducedMotion()) {
+      if (open) {
+        Object.assign(el.style, EXPANDED_STYLE);
+        return;
+      }
+      setRendered(null);
+      return;
+    }
+    if (open) {
+      el.style.transition = 'none';
+      Object.assign(el.style, EXPANDED_STYLE);
+      el.style.height = '';
+      var height = el.offsetHeight;
+      Object.assign(el.style, COLLAPSED_STYLE);
+      void el.offsetHeight;
+      el.style.transition = '';
+      var expandId = window.setTimeout(function () {
+        Object.assign(el.style, EXPANDED_STYLE, {
+          height: "".concat(height, "px")
+        });
+        var settleId = window.setTimeout(function () {
+          el.style.height = '';
+        }, ANIMATE_MS + ANIMATE_DELAY_MS);
+        timersRef.current.push(settleId);
+      }, 0);
+      timersRef.current.push(expandId);
+    } else {
+      el.style.height = "".concat(el.offsetHeight, "px");
+      void el.offsetHeight;
+      var collapseId = window.setTimeout(function () {
+        Object.assign(el.style, COLLAPSED_STYLE);
+        var doneId = window.setTimeout(function () {
+          setRendered(null);
+        }, ANIMATE_MS);
+        timersRef.current.push(doneId);
+      }, 0);
+      timersRef.current.push(collapseId);
+    }
+    return clearTimers;
+  }, [open]);
+  if (!rendered) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
     className: "odn-select-feedback",
     role: "status",
-    "data-odn-select-feedback": true
+    "data-odn-select-feedback": true,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React.createElement("span", {
     className: "odn-select-feedback-message"
-  }, feedback.message), feedback.undoable ? /*#__PURE__*/React.createElement("button", {
+  }, rendered.message), rendered.undoable ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "odn-select-feedback-undo",
     onClick: onUndo

package/dist/select/index.d.ts

@@ -72,7 +72,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
      * 传入 tokenSeparators 时默认 true；也可单独开启（需 allowClear）。
      */
     clearUndo?: boolean;
-    /** 反馈条自动消失时长（ms） */
+    /** 反馈条自动消失时长（ms）。下拉打开或悬停反馈条时不计时，离开后再开始 */
     feedbackDuration?: number;
 }
 export interface SelectButtonProps {

package/dist/select/index.js

@@ -5,7 +5,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "rootClassName", "style", "light", "mode", "suffixIcon", "popupClassName", "popupMatchSelectWidth", "visible", "onVisibleChange", "showInnerSearch", "popupRender", "searchValue", "onSearch", "maxCount", "defaultValue", "value", "onChange", "placeholder", "showSearch", "size", "autoClearSearchValue", "optionRender", "tagRender", "options", "allowClear", "onClear", "tokenSeparators", "tokenMismatch", "tokenFeedback", "validateTokens", "onTokenPaste", "clearUndo", "feedbackDuration", "disabled"];
+var _excluded = ["className", "rootClassName", "style", "light", "mode", "suffixIcon", "popupClassName", "popupMatchSelectWidth", "visible", "open", "onVisibleChange", "showInnerSearch", "popupRender", "searchValue", "onSearch", "maxCount", "defaultValue", "value", "onChange", "placeholder", "showSearch", "size", "autoClearSearchValue", "optionRender", "tagRender", "options", "allowClear", "onClear", "tokenSeparators", "tokenMismatch", "tokenFeedback", "validateTokens", "onTokenPaste", "clearUndo", "feedbackDuration", "disabled"];
 import clsx from 'clsx';
 import RcSelect, { OptGroup, Option } from 'rc-select';
 import React, { useEffect, useRef, useState } from 'react';
@@ -17,6 +17,7 @@ import "./style";
 import { countValidValues, formatTokenPasteFeedback, readClipboardText, resolveTokenPaste, splitByTokenSeparators, toRawValueList } from "./tokenUtils";
 import useIcons from "./useIcons";
 var InternalSelect = function InternalSelect(props, ref) {
+  var _ref;
   var className = props.className,
     rootClassName = props.rootClassName,
     style = props.style,
@@ -29,6 +30,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     popupClassName = props.popupClassName,
     popupMatchSelectWidth = props.popupMatchSelectWidth,
     visibleProp = props.visible,
+    openProp = props.open,
     onVisibleChange = props.onVisibleChange,
     _props$showInnerSearc = props.showInnerSearch,
     showInnerSearch = _props$showInnerSearc === void 0 ? false : _props$showInnerSearc,
@@ -102,10 +104,14 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     feedback = _useState10[0],
     setFeedback = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    feedbackHovered = _useState12[0],
+    setFeedbackHovered = _useState12[1];
   var undoSnapshotRef = useRef(null);
-  var feedbackTimerRef = useRef();
   var dropdownSearchInputRef = useRef(null);
   var pastingRef = useRef(false);
+  var mergedOpen = (_ref = visibleProp !== null && visibleProp !== void 0 ? visibleProp : openProp) !== null && _ref !== void 0 ? _ref : Boolean(visible);
   var handleVisibleChange = function handleVisibleChange(bool) {
     if (visibleProp === undefined) {
       setVisible(bool);
@@ -144,12 +150,24 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [visible]);
   useEffect(function () {
+    if (!feedback) {
+      setFeedbackHovered(false);
+    }
+  }, [feedback]);
+
+  // 下拉盖住 / 悬停反馈条时不计时；可看见且离开后再开始 duration
+  useEffect(function () {
+    if (!feedback || mergedOpen || feedbackHovered) {
+      return;
+    }
+    var timer = window.setTimeout(function () {
+      setFeedback(null);
+      undoSnapshotRef.current = null;
+    }, feedbackDuration);
     return function () {
-      if (feedbackTimerRef.current) {
-        clearTimeout(feedbackTimerRef.current);
-      }
+      window.clearTimeout(timer);
     };
-  }, []);
+  }, [feedback, mergedOpen, feedbackHovered, feedbackDuration]);
   var showFeedback = function showFeedback(next) {
     if (!enableTokenFeedback && !(next !== null && next !== void 0 && next.undoable)) {
       setFeedback(null);
@@ -160,15 +178,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       return;
     }
     setFeedback(next);
-    if (feedbackTimerRef.current) {
-      clearTimeout(feedbackTimerRef.current);
-    }
-    if (next) {
-      feedbackTimerRef.current = setTimeout(function () {
-        setFeedback(null);
-        undoSnapshotRef.current = null;
-      }, feedbackDuration);
-    }
   };
   var commitValue = function commitValue(next, option) {
     if (valueProp === undefined) {
@@ -187,7 +196,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     });
   };
   var handlePasteCapture = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var text, tokens, currentRaw, result;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -243,18 +252,23 @@ var InternalSelect = function InternalSelect(props, ref) {
               onSearch === null || onSearch === void 0 || onSearch('');
             }
 
+            // 分隔符拆词是提交，关掉下拉让反馈条可见
+            if (mergedOpen) {
+              handleVisibleChange(false);
+            }
+
             // 让受控/非受控 onChange 完成后再放开，避免同一次粘贴被 rc-select 再处理
             window.setTimeout(function () {
               pastingRef.current = false;
             }, 0);
-          case 21:
+          case 22:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
     return function handlePasteCapture(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var handleClear = function handleClear() {
@@ -346,7 +360,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     removeIcon: removeIcon,
     clearIcon: clearIcon,
     maxCount: maxCount,
-    open: visible,
+    open: mergedOpen,
     onDropdownVisibleChange: handleVisibleChange,
     searchValue: searchValue,
     onSearch: handleSearch,
@@ -420,32 +434,38 @@ var InternalSelect = function InternalSelect(props, ref) {
     "data-odn-select-shell": true
   }, selectNode, /*#__PURE__*/React.createElement(SelectFeedback, {
     feedback: enableTokenFeedback || feedback !== null && feedback !== void 0 && feedback.undoable && enableClearUndo ? feedback : null,
-    onUndo: handleUndo
+    onUndo: handleUndo,
+    onMouseEnter: function onMouseEnter() {
+      return setFeedbackHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setFeedbackHovered(false);
+    }
   }));
 };
 
 // Select.Button 组件接口
 
 // Select.Button 组件
-var SelectButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref2$showArrow = _ref2.showArrow,
-    showArrow = _ref2$showArrow === void 0 ? true : _ref2$showArrow,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'middle' : _ref2$size,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    prefix = _ref2.prefix,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? '请选择' : _ref2$placeholder,
-    value = _ref2.value,
-    _ref2$active = _ref2.active,
-    active = _ref2$active === void 0 ? false : _ref2$active,
-    _ref2$allowClear = _ref2.allowClear,
-    allowClear = _ref2$allowClear === void 0 ? false : _ref2$allowClear,
-    onClick = _ref2.onClick,
-    onClear = _ref2.onClear,
-    className = _ref2.className,
-    style = _ref2.style;
+var SelectButton = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var _ref3$showArrow = _ref3.showArrow,
+    showArrow = _ref3$showArrow === void 0 ? true : _ref3$showArrow,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'middle' : _ref3$size,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    prefix = _ref3.prefix,
+    _ref3$placeholder = _ref3.placeholder,
+    placeholder = _ref3$placeholder === void 0 ? '请选择' : _ref3$placeholder,
+    value = _ref3.value,
+    _ref3$active = _ref3.active,
+    active = _ref3$active === void 0 ? false : _ref3$active,
+    _ref3$allowClear = _ref3.allowClear,
+    allowClear = _ref3$allowClear === void 0 ? false : _ref3$allowClear,
+    onClick = _ref3.onClick,
+    onClear = _ref3.onClear,
+    className = _ref3.className,
+    style = _ref3.style;
   var buttonClasses = clsx('odn-select-button odn-select odn-select-outlined odn-select-single odn-select-allow-clear odn-select-show-arrow', "odn-select-button-".concat(size), {
     'odn-select-button-disabled': disabled,
     'odn-select-open': active

package/dist/select/style/index.css

@@ -1904,6 +1904,7 @@ html {
   display: flex;
   align-items: center;
   gap: 8px;
+  overflow: hidden;
   margin-top: 8px;
   padding: 8px 12px;
   border-radius: var(--odn-select-border-radius-sm);
@@ -1911,8 +1912,14 @@ html {
   color: var(--odn-select-feedback-color);
   font-size: 13px;
   line-height: 20px;
+  transition: all 300ms cubic-bezier(0.32, 0.72, 0, 1) 50ms, opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .odn-select-feedback {
+    transition: none;
+  }
+}
 .odn-select-feedback-message {
   flex: 1;
   min-width: 0;

package/dist/virtual-list/index.d.ts

@@ -1,5 +1,7 @@
+import type { ListRef } from 'rc-virtual-list';
 import * as React from 'react';
 import './style';
+export type VirtualListRef = ListRef;
 export interface VirtualListProps<T = unknown> extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * @description 列表项的渲染函数
@@ -94,5 +96,7 @@ export interface VirtualListProps<T = unknown> extends Omit<React.HTMLAttributes
 /**
  * VirtualList 虚拟列表
  */
-declare const VirtualList: <T = unknown>({ component, className, styles, showScrollBar, ...otherProps }: VirtualListProps<T>) => React.ReactElement;
+declare const VirtualList: <T = unknown>(props: VirtualListProps<T> & {
+    ref?: React.Ref<ListRef>;
+}) => React.ReactElement;
 export default VirtualList;

package/dist/virtual-list/index.js

@@ -8,7 +8,7 @@ import "./style";
 /**
  * VirtualList 虚拟列表
  */
-var VirtualList = function VirtualList(_ref) {
+var VirtualList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     className = _ref.className,
@@ -18,18 +18,16 @@ var VirtualList = function VirtualList(_ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var defaultStyles = {
     verticalScrollBar: {
-      width: '6px'
+      width: 'var(--odn-virtual-list-scrollbar-thickness, 10px)'
     },
     verticalScrollBarThumb: {
-      right: 2,
-      backgroundColor: 'var(--odn-color-border)'
+      backgroundColor: 'transparent'
     },
     horizontalScrollBar: {
-      height: '6px'
+      height: 'var(--odn-virtual-list-scrollbar-thickness, 10px)'
     },
     horizontalScrollBarThumb: {
-      bottom: 2,
-      backgroundColor: 'var(--odn-color-border)'
+      backgroundColor: 'transparent'
     }
   };
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, defaultStyles), styles), {}, {
@@ -39,6 +37,7 @@ var VirtualList = function VirtualList(_ref) {
     horizontalScrollBarThumb: _objectSpread(_objectSpread({}, defaultStyles.horizontalScrollBarThumb), styles === null || styles === void 0 ? void 0 : styles.horizontalScrollBarThumb)
   });
   return /*#__PURE__*/React.createElement(RcVirtualList, _extends({
+    ref: ref,
     "data-odn-virtual-list": true,
     prefixCls: "odn-virtual-list",
     component: component,
@@ -46,5 +45,5 @@ var VirtualList = function VirtualList(_ref) {
     styles: mergedStyles,
     showScrollBar: showScrollBar
   }, otherProps));
-};
+});
 export default VirtualList;

package/dist/virtual-list/style/index.css

@@ -1,7 +1,61 @@
 html {
   --odn-virtual-list-background-color: transparent;
+  --odn-virtual-list-scrollbar-thickness: 10px;
+  --odn-virtual-list-scrollbar-side-padding: 1px;
+  --odn-virtual-list-scrollbar-side-hover-padding: 1px;
+  --odn-virtual-list-scrollbar-color: var(--odn-color-border);
+  --odn-virtual-list-scrollbar-hover-color: var(--odn-color-border);
+  --odn-virtual-list-scrollbar-hover-cursor: default;
+  --odn-virtual-list-scrollbar-radius: 9999px;
 }
 
 [data-odn-virtual-list] {
   background-color: var(--odn-virtual-list-background-color);
+}
+
+.odn-virtual-list-scrollbar {
+  touch-action: none;
+  user-select: none;
+}
+.odn-virtual-list-scrollbar:hover {
+  cursor: var(--odn-virtual-list-scrollbar-hover-cursor);
+}
+.odn-virtual-list-scrollbar:hover .odn-virtual-list-scrollbar-thumb {
+  background-color: var(--odn-virtual-list-scrollbar-hover-color) !important;
+}
+
+.odn-virtual-list-scrollbar-vertical {
+  width: var(--odn-virtual-list-scrollbar-thickness) !important;
+}
+.odn-virtual-list-scrollbar-vertical .odn-virtual-list-scrollbar-thumb {
+  width: auto !important;
+  left: var(--odn-virtual-list-scrollbar-side-padding);
+  right: var(--odn-virtual-list-scrollbar-side-padding);
+  transition: left 0.1s, right 0.1s, background-color 0.15s;
+}
+.odn-virtual-list-scrollbar-vertical:hover .odn-virtual-list-scrollbar-thumb {
+  left: var(--odn-virtual-list-scrollbar-side-hover-padding);
+  right: var(--odn-virtual-list-scrollbar-side-hover-padding);
+}
+
+.odn-virtual-list-scrollbar-horizontal {
+  height: var(--odn-virtual-list-scrollbar-thickness) !important;
+}
+.odn-virtual-list-scrollbar-horizontal .odn-virtual-list-scrollbar-thumb {
+  height: auto !important;
+  top: var(--odn-virtual-list-scrollbar-side-padding);
+  bottom: var(--odn-virtual-list-scrollbar-side-padding);
+  transition: top 0.1s, bottom 0.1s, background-color 0.15s;
+}
+.odn-virtual-list-scrollbar-horizontal:hover .odn-virtual-list-scrollbar-thumb {
+  top: var(--odn-virtual-list-scrollbar-side-hover-padding);
+  bottom: var(--odn-virtual-list-scrollbar-side-hover-padding);
+}
+
+.odn-virtual-list-scrollbar-thumb {
+  background-color: var(--odn-virtual-list-scrollbar-color) !important;
+  border-radius: var(--odn-virtual-list-scrollbar-radius) !important;
+}
+.odn-virtual-list-scrollbar-thumb.odn-virtual-list-scrollbar-thumb-moving {
+  background-color: var(--odn-virtual-list-scrollbar-hover-color) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.78",
+  "version": "0.0.81",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",