@aloudata/aloudata-design 2.19.1 → 2.19.3

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.d.ts

@@ -3,7 +3,7 @@ import { DisplayValueType } from '../interface';
 import { RefTriggerProps } from '../SelectTrigger';
 export default function MultipleResponsiveSelectedSection(params: {
     displayValues: DisplayValueType[];
-    renderItem: (valueItem: DisplayValueType) => React.JSX.Element | null;
+    renderItem: (valueItem: DisplayValueType, index?: number) => React.JSX.Element | null;
     onToggleOpen: (open: boolean) => void;
     dropdownRef: RefObject<RefTriggerProps>;
     maxHeight?: number;

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.js

@@ -41,7 +41,9 @@ export default function MultipleResponsiveSelectedSection(params) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "beta-ald-select-selector-multiple-responsive-selected-section-tags"
-  }, displayValues.map(renderItem))), /*#__PURE__*/React.createElement(Suffix, {
+  }, displayValues.map(function (item, index) {
+    return renderItem(item, index);
+  }))), /*#__PURE__*/React.createElement(Suffix, {
     showArrow: true,
     allowClear: false,
     icon: suffixIcon,

package/dist/AldSelect/Selector/MultipleSelector.js

@@ -42,14 +42,14 @@ export default function MultipleSelector(props) {
     _useState2 = _slicedToArray(_useState, 2),
     showItemIndex = _useState2[0],
     setShowItemIndex = _useState2[1];
-  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview) {
+  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview, uniqueKey) {
     var onMouseDown = function onMouseDown(e) {
       onPreventMouseDown(e);
     };
     return /*#__PURE__*/React.createElement("span", {
       className: "beta-ald-select-custom-tag-render-wrapper",
       onMouseDown: onMouseDown,
-      key: value
+      key: uniqueKey !== null && uniqueKey !== void 0 ? uniqueKey : value
     }, tagRender === null || tagRender === void 0 ? void 0 : tagRender({
       label: content,
       value: value,
@@ -58,10 +58,10 @@ export default function MultipleSelector(props) {
       onClose: onClose !== null && onClose !== void 0 ? onClose : function () {}
     }, isPreview));
   };
-  var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, _onClose, isPreview) {
+  var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, _onClose, isPreview, uniqueKey) {
     return /*#__PURE__*/React.createElement(Tag, {
       disabled: itemDisabled,
-      key: item === null || item === void 0 ? void 0 : item.value,
+      key: uniqueKey !== null && uniqueKey !== void 0 ? uniqueKey : item === null || item === void 0 ? void 0 : item.value,
       size: "small",
       closable: isPreview ? false : closable,
       onClose: function onClose(e) {
@@ -72,7 +72,8 @@ export default function MultipleSelector(props) {
   };
   var isResponsiveMode = isResponsive(mode);
   var showSelectedSection = isShowSelectedSection(mode);
-  var renderItem = function renderItem(valueItem) {
+  var renderItem = function renderItem(valueItem, index) {
+    var _valueItem$key;
     var itemDisabled = valueItem.disabled,
       label = valueItem.label,
       value = valueItem.value;
@@ -97,7 +98,10 @@ export default function MultipleSelector(props) {
     if (_.isNil(value)) {
       return null;
     }
-    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, isPreview) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose, isPreview);
+
+    // 生成唯一的 key，如果 value 可能重复，使用 value + index 组合
+    var uniqueKey = (_valueItem$key = valueItem.key) !== null && _valueItem$key !== void 0 ? _valueItem$key : value !== undefined && value !== null ? "".concat(value, "-").concat(index !== null && index !== void 0 ? index : '') : "item-".concat(index !== null && index !== void 0 ? index : '');
+    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, isPreview, uniqueKey) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose, isPreview, uniqueKey);
   };
   var renderRest = function renderRest(omittedValues) {
     if (displayValues.length === 1) {
@@ -132,7 +136,7 @@ export default function MultipleSelector(props) {
       className: "beta-ald-select-selector beta-ald-select-selector-multiple-responsive"
     }, showItemIndex === -1 && displayValues.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: "beta-ald-select-selector-overflow-item-first"
-    }, renderItem(displayValues[0])), /*#__PURE__*/React.createElement(Overflow, {
+    }, renderItem(displayValues[0], 0)), /*#__PURE__*/React.createElement(Overflow, {
       prefixCls: overflowPrefixCls,
       data: displayValues,
       renderItem: renderItem,
@@ -161,5 +165,7 @@ export default function MultipleSelector(props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "beta-ald-select-selector-multiple-default-tags"
-  }, displayValues.map(renderItem)));
+  }, displayValues.map(function (item, index) {
+    return renderItem(item, index);
+  })));
 }

package/dist/AldSelect/Selector/index.js

@@ -21,7 +21,10 @@ export default function Selector(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('beta-ald-select-selector')
-  }, displayValues.map(function (item) {
-    return item.label;
+  }, displayValues.map(function (item, index) {
+    var _item$value;
+    return /*#__PURE__*/React.createElement("span", {
+      key: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : "item-".concat(index)
+    }, item.label);
   }));
 }

package/dist/AldSelect/style/index.less

@@ -12,7 +12,7 @@
   cursor: pointer;
 
   &-disabled {
-    cursor: not-allowed;
+    cursor: initial;
 
     .beta-ald-select-prefix {
       svg {

package/dist/AldSelect/utils/commonUtil.js

@@ -18,11 +18,19 @@ export var toString = function toString(value) {
 /** Is client side and not jsdom */
 export var isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
 export function convertOptionsToMenu(options, selectedKeys) {
+  // 使用 Map 来跟踪每个 key 出现的次数，确保 key 的唯一性
+  var keyCountMap = new Map();
   return {
-    items: options.map(function (option) {
+    items: options.map(function (option, index) {
+      var _keyCountMap$get;
+      var baseKey = toString(option.value);
+      // 如果 key 已存在，添加索引后缀确保唯一性
+      var count = (_keyCountMap$get = keyCountMap.get(baseKey)) !== null && _keyCountMap$get !== void 0 ? _keyCountMap$get : 0;
+      keyCountMap.set(baseKey, count + 1);
+      var uniqueKey = count > 0 ? "".concat(baseKey, "-").concat(index) : baseKey;
       return _objectSpread(_objectSpread({}, option), {}, {
         label: option.label,
-        key: toString(option.value),
+        key: uniqueKey,
         disabled: option.disabled,
         onClick: option.onClick,
         className: option.className,

package/dist/ColorPicker/style/index.less

@@ -22,10 +22,27 @@
     cursor: pointer;
     transition: border 0.5s ease-in-out;
     border-radius: 4px;
+    color: var(--content-primary);
 
     &:not(.ald-color-picker-wrapper-disabled):hover {
       border: 1px solid var(--interaction-border-normal);
     }
+
+    &-disabled {
+      border: 1px solid var(--interaction-border-neutral-normal);
+      background: var(--global-cool-gray-alpha-50);
+      color: var(--content-primary);
+
+      &.ald-color-picker-wrapper-borderless {
+        border-color: transparent;
+        background: transparent;
+      }
+
+      &:hover {
+        border-color: var(--interaction-border-neutral-normal);
+        background-color: var(--global-cool-gray-alpha-50);
+      }
+    }
   }
 
   .ald-color-picker-wrapper-borderless {
@@ -165,5 +182,9 @@
 }
 
 .ald-color-picker-disabled {
-  opacity: 0.4;
+  cursor: initial;
+
+  .ald-color-picker-wrapper {
+    cursor: initial;
+  }
 }

package/dist/Dropdown/index.js

@@ -79,7 +79,14 @@ export default function Dropdown(props) {
             width: typeof popupMatchTriggerWidth === 'number' ? "".concat(popupMatchTriggerWidth, "px") : "".concat(rects.reference.width, "px")
           });
         }
-      }) : undefined],
+      }) : size({
+        apply: function apply(_ref2) {
+          var elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            minWidth: '144px'
+          });
+        }
+      })],
       whileElementsMounted: autoUpdatePos ? autoUpdate : undefined
     }),
     refs = _useFloating.refs,

package/dist/Icon/components/InProgressFill.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/InProgressFill.js

@@ -24,7 +24,7 @@ var InProgressFill = function InProgressFill(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: "#2986F4"
+    fill: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15 10a5 5 0 0 1-5 5V5a5 5 0 0 1 5 5Z"
   }), /*#__PURE__*/React.createElement("path", {

package/dist/Icon/svg/In-Progress-fill.svg

@@ -1,8 +1,8 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Fill / Interface / In-Progress-fill">
 <g id="Icon">
-<path d="M15.0001 10C15.0001 12.7614 12.7615 15 10.0001 15V5.00001C12.7615 5.00001 15.0001 7.23858 15.0001 10Z" fill="#2986F4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10ZM16.6667 10C16.6667 13.6819 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.6819 3.33341 10C3.33341 6.31811 6.31818 3.33334 10.0001 3.33334C13.682 3.33334 16.6667 6.31811 16.6667 10Z" fill="#2986F4"/>
+<path d="M15.0001 10C15.0001 12.7614 12.7615 15 10.0001 15V5.00001C12.7615 5.00001 15.0001 7.23858 15.0001 10Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10ZM16.6667 10C16.6667 13.6819 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.6819 3.33341 10C3.33341 6.31811 6.31818 3.33334 10.0001 3.33334C13.682 3.33334 16.6667 6.31811 16.6667 10Z" fill="currentColor"/>
 </g>
 </g>
 </svg>

package/dist/InputNumber/style/index.less

@@ -17,13 +17,18 @@
 @inputNumber-padding-small: 0 7px;
 
 //默认 - 使用CSS变量映射
-@inputNumber-bg-color: var(--background-default);
-@inputNumber-border-color: var(--border-default);
+@inputNumber-bg-color: var(--interaction-background-form-field);
+@inputNumber-border-color: var(--interaction-border-neutral-normal);
 @inputNumber-color: var(--content-primary);
 @inputNumber-wrapper-bg-color: var(--background-neutral-subtle);
+
+//hover
+@inputNumber-hover-bg-color: var(--interaction-background-form-field);
+@inputNumber-hover-border-color: var(--interaction-border-hover);
 //激活
 @inputNumber-active-bg-color: var(--background-default);
-@inputNumber-active-border-color: var(--interaction-border-selected);
+@inputNumber-active-border-color: var(--interaction-border-hover);
+@inputNumber-active-outline-color: var(--global-blue-500);
 
 //disable
 @inputNumber-disabled-bg-color: var(--global-cool-gray-alpha-50);
@@ -47,6 +52,7 @@
     background-color: @inputNumber-bg-color;
     border-color: @inputNumber-border-color;
     border-radius: @inputNumber-border-radius-middle;
+    overflow: hidden;
     box-shadow: none;
 
     .ant-input-number-input-wrap {
@@ -55,6 +61,7 @@
       .ant-input-number-input {
         height: 100%;
         caret-color: @inputNumber-cursor-color;
+        border-radius: 0;
       }
     }
 
@@ -156,11 +163,16 @@
       }
     }
 
-    &:hover:not(.ald-input-number-disabled),
+    &:hover:not(.ald-input-number-disabled) {
+      background-color: @inputNumber-hover-bg-color;
+      border-color: @inputNumber-hover-border-color;
+    }
+
     &-focused {
       background-color: @inputNumber-active-bg-color;
       border-color: @inputNumber-active-border-color;
       box-shadow: none;
+      outline: @inputNumber-active-outline-color solid 1px;
     }
   }
 
@@ -172,6 +184,16 @@
     border-color: @inputNumber-border-color;
     box-shadow: none;
 
+    &:hover {
+      border-color: @inputNumber-hover-border-color;
+    }
+
+    &:focus {
+      border-color: @inputNumber-active-border-color;
+      box-shadow: none;
+      outline: @inputNumber-active-outline-color solid 1px;
+    }
+
     &.ald-input-number-large {
       font-size: @inputNumber-font-size-large;
       border-radius: @inputNumber-border-radius-large;
@@ -273,6 +295,18 @@
         color: @inputNumber-addon-disable-color;
       }
     }
+
+    .ant-input-number-focused {
+      outline: none !important;
+    }
+
+    .ant-input-number-handler-wrap {
+      border-radius: 0 !important;
+
+      .ant-input-number-handler {
+        border-radius: 0 !important;
+      }
+    }
   }
 }
 
@@ -281,3 +315,16 @@
   ).ant-input-number.ant-input-number {
   border-color: var(--border-negative-strong);
 }
+
+.ald-input-number.ant-input-number-affix-wrapper {
+  border-color: @inputNumber-border-color;
+
+  &:hover {
+    border-color: @inputNumber-hover-border-color;
+  }
+
+  &-focused {
+    border-color: @inputNumber-hover-border-color;
+    outline: @inputNumber-hover-border-color solid 1px;
+  }
+}

package/dist/InputSearch/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 export default function InputSearch(props: IProps): React.JSX.Element;
 interface IProps {
+    /** 搜索回调，在输入完成时触发（回车、输入法结束、非输入法输入时） */
     onSearch: (value: string) => void;
+    /** 值变化回调（受控模式时推荐使用，每次输入都触发，包括输入法期间） */
+    onChange?: (value: string) => void;
     onBlur?: (value: string, e: React.FocusEvent<HTMLInputElement>) => void;
     className?: string;
     debounce?: boolean;

package/dist/InputSearch/index.js

@@ -30,6 +30,7 @@ export default function InputSearch(props) {
     locale = _useContext.locale;
   var t = getTranslator(locale);
   var onSearch = props.onSearch,
+    onChange = props.onChange,
     className = props.className,
     _props$debounce = props.debounce,
     debounce = _props$debounce === void 0 ? true : _props$debounce,
@@ -91,6 +92,9 @@ export default function InputSearch(props) {
     // 非受控模式才更新内部状态
     if (!isControlled) {
       setSearchValue(newValue);
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      return;
     }
     if (!isComposing.current) {
       // 受控的时候debounce不生效
@@ -100,11 +104,14 @@ export default function InputSearch(props) {
         onSearch(newValue);
       }
     }
-  }, [debounce, debounceSearch, onSearch, isControlled]);
+  }, [debounce, debounceSearch, onSearch, isControlled, onChange]);
   var handleCompositionStart = useCallback(function () {
     isComposing.current = true;
   }, []);
   var handleCompositionEnd = useCallback(function (e) {
+    if (isControlled) {
+      return;
+    }
     isComposing.current = false;
     // 在输入法结束后触发一次搜索
     var value = e.target.value;
@@ -113,7 +120,7 @@ export default function InputSearch(props) {
     } else {
       onSearch(value);
     }
-  }, [debounce, debounceSearch, onSearch]);
+  }, [debounce, debounceSearch, isControlled, onSearch]);
   var iconSize = useMemo(function () {
     if (size === 'middle' || size === 'large') {
       return 20;

package/dist/MemberPicker/components/Panel.d.ts

@@ -22,6 +22,7 @@ interface IPanelProps {
         originNode: ReactNode;
     }) => ReactNode;
     renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
+    filterItem?: (item: IUser | IUserGroup) => boolean;
 }
 export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): React.JSX.Element;

package/dist/MemberPicker/components/Panel.js

@@ -46,7 +46,8 @@ export default function Panel(props) {
     footer = props.footer,
     onCancel = props.onCancel,
     renderItem = props.renderItem,
-    renderSelectedTag = props.renderSelectedTag;
+    renderSelectedTag = props.renderSelectedTag,
+    filterItem = props.filterItem;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedUsers = _useState2[0],
@@ -97,6 +98,7 @@ export default function Panel(props) {
     var userSelection = /*#__PURE__*/React.createElement(MemberSelection, {
       className: 'ald-member-picker-member-selection-multiple',
       userList: dataList.filter(isUser),
+      filterItem: filterItem,
       width: (panelwidth - 6) / 2,
       selectedUsers: selectedUsers.filter(isUser),
       onChange: onSelectionChange,
@@ -109,6 +111,7 @@ export default function Panel(props) {
     var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
       className: 'ald-member-picker-member-selection-multiple',
       userGroupList: dataList.filter(isUserGroup),
+      filterItem: filterItem,
       width: (panelwidth - 6) / 2,
       selectedUsersGroup: selectedUsers.filter(isUserGroup),
       onChange: onSelectionChange,

package/dist/MemberPicker/components/PanelWrapper.d.ts

@@ -20,6 +20,7 @@ interface IProps {
         originNode: ReactNode;
     }) => ReactNode;
     renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
+    filterItem?: (item: IUser | IUserGroup) => boolean;
 }
-export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, renderItem, renderSelectedTag, }: IProps) => React.JSX.Element;
+export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, renderItem, renderSelectedTag, filterItem, }: IProps) => React.JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -26,7 +26,8 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     _ref$lockedIds = _ref.lockedIds,
     lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds,
     renderItem = _ref.renderItem,
-    renderSelectedTag = _ref.renderSelectedTag;
+    renderSelectedTag = _ref.renderSelectedTag,
+    filterItem = _ref.filterItem;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -88,12 +89,17 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     loading = _useRequest.loading,
     run = _useRequest.run;
   var totalUserList = useMemo(function () {
-    var totalUsers = searchUserList.concat(selectedUserList);
+    var totalUsers = searchUserList.concat(selectedUserList).filter(function (item) {
+      if (filterItem) {
+        return filterItem(item);
+      }
+      return true;
+    });
     return _.uniqBy(totalUsers, function (data) {
       if (data.type === EUserType.USER) return data.userId;
       return data.groupId;
     });
-  }, [searchUserList, selectedUserList]);
+  }, [searchUserList, selectedUserList, filterItem]);
   useEffect(function () {
     run();
   }, [run, searchString]);

package/dist/Table/hooks/useScroll.js

@@ -51,6 +51,18 @@ export default function useScroll(props) {
     if (!elem) {
       return;
     }
+
+    // 先检查表格是否真的需要横向滚动
+    var DEVIATION = 2;
+    var needsHorizontalScroll = elem.scrollWidth > elem.clientWidth + DEVIATION;
+    if (!needsHorizontalScroll) {
+      // 表格宽度足够，不需要横向滚动，隐藏左右两侧阴影
+      setIsPingLeft(false);
+      setIsPingRight(false);
+      return;
+    }
+
+    // 表格需要横向滚动，根据滚动位置判断是否显示阴影
     var scrollLeft = elem.scrollLeft;
     if (scrollLeft <= 0) {
       setIsPingLeft(false);

package/dist/TextLink/style/index.less

@@ -10,5 +10,6 @@
   &.ald-text-link-disabled {
     pointer-events: none;
     cursor: default;
+    opacity: 0.5;
   }
 }

package/dist/TextLink/style/type.less

@@ -20,14 +20,6 @@
       color: var(--interaction-default-selected);
     }
   }
-
-  &.ald-text-link-disabled {
-    color: var(--alias-colors-text-disabled);
-
-    .ald-icon {
-      color: var(--alias-colors-icon-disabled);
-    }
-  }
 }
 
 .ald-text-link-secondary {
@@ -52,14 +44,6 @@
       color: var(--interaction-default-selected);
     }
   }
-
-  &.ald-text-link-disabled {
-    color: var(--alias-colors-text-disabled);
-
-    .ald-icon {
-      color: var(--alias-colors-icon-disabled);
-    }
-  }
 }
 
 .ald-text-link-show-underline {