@aloudata/aloudata-design 2.10.4 → 2.10.6

package/dist/DataPreviewTable/index.js

@@ -94,7 +94,8 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       height: dataStatus === 'pending' ? skeletonRows * CELL_HEIGHT + realHeaderHeight : contentHeight,
-      position: 'relative'
+      position: 'relative',
+      width: 'fit-content'
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-data-preview-sticky"

package/dist/DatePicker/index.d.ts

@@ -2,25 +2,25 @@ import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps }
 import { Dayjs } from 'dayjs';
 export type { RangeValue } from 'rc-picker/lib/interface';
 declare const DatePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
-    status?: "" | "error" | "warning" | undefined;
+    status?: "" | "warning" | "error" | undefined;
     hashId?: string | undefined;
     popupClassName?: string | undefined;
     rootClassName?: string | undefined;
 }, unknown> & {
     WeekPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
     MonthPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
     YearPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
@@ -34,9 +34,9 @@ declare const DatePicker: import("antd/es/date-picker/generatePicker/interface")
         size?: import("antd/es/button").ButtonSize;
         placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
         bordered?: boolean | undefined;
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
     } & {
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
@@ -46,9 +46,9 @@ declare const DatePicker: import("antd/es/date-picker/generatePicker/interface")
         size?: import("antd/es/button").ButtonSize;
         placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
         bordered?: boolean | undefined;
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
     } & {
-        status?: "" | "error" | "warning" | undefined;
+        status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;

package/dist/DoubleCircleIcon/index.d.ts

@@ -5,6 +5,6 @@ declare const DoubleCircleIcon: (props: {
     size?: number | undefined;
     innerColor?: string | undefined;
     children: React.ReactNode;
-    type?: "success" | "error" | "info" | "warning" | undefined;
+    type?: "warning" | "error" | "success" | "info" | undefined;
 }) => React.JSX.Element;
 export default DoubleCircleIcon;

package/dist/Form/index.d.ts

@@ -18,7 +18,7 @@ interface IFormItemProps extends FormItemProps {
 declare const AldFormItem: {
     (props: IFormItemProps): React.JSX.Element;
     useStatus: () => {
-        status?: "" | "success" | "error" | "warning" | "validating" | undefined;
+        status?: "" | "warning" | "error" | "success" | "validating" | undefined;
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

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

@@ -11,5 +11,7 @@ interface IMemberSelectionProps {
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
 }
+export declare const OPTION_HEIGHT = 36;
+export declare const WRAPPER_HEIGHT = 300;
 export default function MemberSelection(props: IMemberSelectionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/MemberSelection.js

@@ -4,18 +4,20 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useDeferredValue, useEffect, useState } from 'react';
 import Empty from "../../Empty";
 import { SearchLine } from "../../Icon";
 import Input from "../../Input";
-import ScrollArea from "../../ScrollArea";
 import Spin from "../../Spin";
 import { isUser } from "../utils/getUsersWithUserId";
 import MultipleOption from "./MultipleOption";
 import { userDisplayNameIsRepeated } from "./Panel";
 import SingleOption from "./SingleOption";
+export var OPTION_HEIGHT = 36;
+export var WRAPPER_HEIGHT = 300;
 export default function MemberSelection(props) {
   var className = props.className,
     userList = props.userList,
@@ -26,6 +28,18 @@ export default function MemberSelection(props) {
     loading = props.loading,
     width = props.width,
     lockedIds = props.lockedIds;
+  var parentRef = React.useRef(null);
+
+  // The virtualizer
+  var rowVirtualizer = useVirtualizer({
+    count: userList.length,
+    getScrollElement: function getScrollElement() {
+      return parentRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return OPTION_HEIGHT;
+    }
+  });
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchValue = _useState2[0],
@@ -59,18 +73,27 @@ export default function MemberSelection(props) {
     spinning: loading,
     size: "small",
     className: "ald-member-picker-user-list"
-  }, /*#__PURE__*/React.createElement(ScrollArea, {
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: parentRef,
+    style: {
+      height: WRAPPER_HEIGHT,
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    },
     className: classNames('ald-member-picker-member-list', {
       'ald-member-picker-member-list-null': userList.length === 0 && !loading
-    }),
-    innerClassName: "ald-member-picker-member-scroll"
+    })
+    // innerClassName="ald-member-picker-member-scroll"
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-member-list-inner",
     style: {
       width: multiple ? width : undefined,
-      overflow: 'hidden'
+      overflow: 'hidden',
+      position: 'relative',
+      height: "".concat(rowVirtualizer.getTotalSize(), "px")
     }
-  }, userList.map(function (user) {
+  }, rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+    var user = userList[virtualItem.index];
     var isSelected = selectedUsers.some(function (selectedUser) {
       return selectedUser.userId === user.userId;
     });
@@ -79,7 +102,17 @@ export default function MemberSelection(props) {
       type: user.type
     });
     var disabled = index !== -1;
-    return multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
+    return /*#__PURE__*/React.createElement("div", {
+      key: virtualItem.key,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: "".concat(virtualItem.size, "px"),
+        transform: "translateY(".concat(virtualItem.start, "px)")
+      }
+    }, multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
       key: user.userId,
       user: user,
       disabled: disabled,
@@ -96,6 +129,6 @@ export default function MemberSelection(props) {
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
-    });
+    }));
   })))));
 }

package/dist/MemberPicker/components/MultipleOption.js

@@ -41,10 +41,11 @@ export default function MultipleList(params) {
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
-    account: getAccount(user)
-  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
-    className: 'ald-member-picker-option-id'
-  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+    account: getAccount(user),
+    addonBefore: showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("span", {
+      className: 'ald-member-picker-option-id'
+    }, user.userId)
+  }))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

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

@@ -1,11 +1,12 @@
 import { EUserType } from "../../ConfigProvider/getUserList";
-import React from 'react';
+import React, { ReactNode } from 'react';
 interface INickLabelProps {
     name?: string;
     id: string;
     photo?: React.ReactNode;
     account?: string;
     type: EUserType;
+    addonBefore?: ReactNode;
 }
 declare const _default: React.NamedExoticComponent<INickLabelProps>;
 export default _default;

package/dist/MemberPicker/components/NickLabel.js

@@ -7,7 +7,8 @@ var NickLabel = function NickLabel(_ref) {
     name = _ref.name,
     id = _ref.id,
     account = _ref.account,
-    type = _ref.type;
+    type = _ref.type,
+    addonBefore = _ref.addonBefore;
   var innerName = name || id;
   var photoSrc = !photo && type === EUserType.USER_GROUP ? /*#__PURE__*/React.createElement(UserGroup, {
     size: 20
@@ -21,6 +22,6 @@ var NickLabel = function NickLabel(_ref) {
   }, innerName), /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-nick-label-name",
     title: account ? "".concat(name, "(").concat(account, ")") : "".concat(name)
-  }, innerName));
+  }, innerName, addonBefore));
 };
 export default /*#__PURE__*/memo(NickLabel);

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -54,10 +54,11 @@ export default function SelectedMemberTags(props) {
       id: getId(user),
       name: user.name,
       photo: getPhoto(user),
-      account: getAccount(user)
-    }), isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("div", {
-      className: "ald-member-picker-option-id"
-    }, user.userId)), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+      account: getAccount(user),
+      addonBefore: isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("span", {
+        className: "ald-member-picker-option-id"
+      }, user.userId)
+    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

package/dist/MemberPicker/components/SingleOption.js

@@ -35,10 +35,11 @@ export default function SingleOption(params) {
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
-    account: getAccount(user)
-  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
-    className: 'ald-member-picker-option-id'
-  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+    account: getAccount(user),
+    addonBefore: showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("span", {
+      className: 'ald-member-picker-option-id'
+    }, user.userId)
+  }))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/index.js

@@ -14,7 +14,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { useRequest } from 'ahooks';
+import { usePrevious, useRequest } from 'ahooks';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -57,6 +57,7 @@ var Component = function Component(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedUserList = _useState2[0],
     setSelectedUserList = _useState2[1];
+  var prevValue = usePrevious(value);
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     searchUserList = _useState4[0],
@@ -131,6 +132,9 @@ var Component = function Component(_ref) {
     run();
   }, [dropdownOpen, run, searchString]);
   useEffect(function () {
+    if (_.isEqual(value, prevValue)) {
+      return;
+    }
     if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {
       setSelectedUserList(value);
     } else if (isUser(value) || isUserGroup(value)) {

package/dist/MemberPicker/style/index.less

@@ -205,13 +205,9 @@
 }
 
 .ald-member-picker-option-id {
-  max-width: 50%;
-  white-space: nowrap; /* 防止内容换行，保持内容长度 */
-  text-overflow: ellipsis;
-  overflow: hidden;
   color: var(--alias-colors-text-subtle, #4b5563);
   font-size: 12px;
-  line-height: 16px; /* 133.333% */
+  margin-left: 4px;
 }
 
 .ald-member-picker-trigger {
@@ -281,6 +277,7 @@
   }
 
   .ald-member-picker-nick-label-name {
+    flex: 1;
     color: var(--alias-colors-text-default, #1f2937);
     font-size: 14px;
     font-weight: 400;
@@ -288,7 +285,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: 130px;
   }
 }
 

package/dist/Popconfirm/style/index.less

@@ -51,7 +51,7 @@
       display: flex;
       align-items: center;
       flex-direction: row-reverse;
-      justify-content: start;
+      justify-content: flex-start;
     }
   }
 }

package/dist/Radio/components/Group/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IRadioGroupProps } from '../../interface/radioGroup';
-export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "children" | "className">>;
+export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "className" | "children">>;
 export default function RadioGroup(props: IRadioGroupProps): React.JSX.Element;

package/dist/Radio/style/index.less

@@ -20,7 +20,7 @@
   display: inline-flex;
   gap: 4px;
   align-items: center;
-  justify-content: start;
+  justify-content: flex-start;
   height: 20px;
   padding: 0;
   cursor: pointer;

package/dist/Table/helper.d.ts

@@ -21,7 +21,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "left" | "center" | "right" | undefined;
+        align?: "center" | "left" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };

package/dist/Tabs/style/index.less

@@ -148,10 +148,8 @@
     }
   }
 
-  &.ald-tabs-compact {
-    .ant-tabs-nav {
-      margin-bottom: 0;
-    }
+  &.ald-tabs-compact > .ant-tabs-nav {
+    margin-bottom: 0;
   }
 }