@aloudata/aloudata-design 2.10.4 → 2.10.5

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/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/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/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;
     };