@aloudata/aloudata-design 1.6.3 → 1.6.4

package/dist/DataPreviewTable/components/Body/Cell.d.ts

@@ -0,0 +1,8 @@
+interface ICell {
+    value: TValue;
+    style?: React.CSSProperties;
+}
+import React from 'react';
+import { TValue } from '../../interface';
+export default function Cell(props: ICell): JSX.Element;
+export {};

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -0,0 +1,43 @@
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+import classNames from 'classnames';
+import React from 'react';
+export default function Cell(props) {
+  var style = props.style,
+      value = props.value;
+
+  if (typeof value === 'string') {
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: "ald-data-preview-body-cell"
+    }, value);
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: "ald-data-preview-body-cell"
+    }, JSON.stringify(value));
+  }
+
+  if (_typeof(value) === 'object' && value === null) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread({
+        fontStyle: 'italic',
+        color: '#858585'
+      }, style),
+      className: classNames('ald-data-preview-body-cell', 'ald-data-preview-body-cell-null')
+    }, "null");
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "ald-data-preview-body-cell"
+  }, value);
+}

package/dist/DataPreviewTable/components/Body/index.js

@@ -12,6 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { memo } from 'react';
 import { CELL_HEIGHT, HEADER_HEIGHT } from "../../constant";
+import Cell from "./Cell";
 
 function Body(props) {
   var columns = props.columns,
@@ -40,11 +41,11 @@ function Body(props) {
         position: 'absolute',
         textAlign: columns[columnIndex].align || 'left'
       };
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Cell, {
         key: columnIndex,
         style: style,
-        className: "ald-data-preview-body-cell"
-      }, cell);
+        value: cell
+      });
     }));
   }));
 }

package/dist/DataPreviewTable/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ITableProps } from './interface';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLDivElement>>>;
+import { DataPreviewTableRef, ITableProps } from './interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<DataPreviewTableRef>>>;
 export default _default;

package/dist/DataPreviewTable/index.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import Progress from "../Progress";
 import ScrollArea from "../ScrollArea";
 import Body from "./components/Body";
@@ -8,9 +8,8 @@ import SkeletonBody from "./components/Body/SkeletonBody";
 import Header from "./components/Header";
 import { CELL_HEIGHT, HEADER_HEIGHT } from "./constant";
 import useDirection from "./hooks/useDirection";
-
-function DataPreviewTable(props, ref) {
-  var _wrapRef$current2;
+var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _wrapRef$current5;
 
   var _props$columns = props.columns,
       columns = _props$columns === void 0 ? [] : _props$columns,
@@ -36,17 +35,45 @@ function DataPreviewTable(props, ref) {
       contentWidth = _useDirection.contentWidth,
       tableColumns = _useDirection.tableColumns;
 
-  useEffect(function () {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(wrapRef.current);
+  useImperativeHandle(ref, function () {
+    return {
+      scrollToColumnInView: function scrollToColumnInView(columnId) {
+        var _wrapRef$current;
+
+        // 实现scrollTo方法
+        console.log(wrapRef.current, columnLayout);
+        var columnPos = columnLayout[columnId]; // 根据容器的宽度，容器的scrollLeft，columnPos，判断当前列是否在可视区域内
+
+        var _ref = wrapRef.current,
+            scrollLeft = _ref.scrollLeft;
+        var left = columnPos.left,
+            width = columnPos.width;
+        var containerWidth = ((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.clientWidth) || 0;
+
+        if (left < scrollLeft) {
+          var _wrapRef$current2;
+
+          // 左边不可见
+          (_wrapRef$current2 = wrapRef.current) === null || _wrapRef$current2 === void 0 ? void 0 : _wrapRef$current2.scrollTo({
+            left: left,
+            behavior: 'smooth'
+          });
+        } else if (left + width > scrollLeft + containerWidth) {
+          var _wrapRef$current3;
+
+          // 右边不可见
+          (_wrapRef$current3 = wrapRef.current) === null || _wrapRef$current3 === void 0 ? void 0 : _wrapRef$current3.scrollTo({
+            left: left + width - containerWidth,
+            behavior: 'smooth'
+          });
+        }
       }
-    }
-  }, [ref]);
+    };
+  });
   var skeletonRows = useMemo(function () {
-    var _wrapRef$current;
+    var _wrapRef$current4;
 
-    var rows = Math.ceil((((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.clientHeight) || 0 - HEADER_HEIGHT) / CELL_HEIGHT);
+    var rows = Math.ceil((((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0 - HEADER_HEIGHT) / CELL_HEIGHT);
     return rows - 1 < 0 ? 0 : rows - 1; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapRef.current]);
   return /*#__PURE__*/React.createElement(ScrollArea, {
@@ -91,9 +118,8 @@ function DataPreviewTable(props, ref) {
     rowRange: rowRange
   }), dataStatus === 'error' && /*#__PURE__*/React.createElement(Error, {
     errorMsg: errorMsg,
-    wrapWidth: ((_wrapRef$current2 = wrapRef.current) === null || _wrapRef$current2 === void 0 ? void 0 : _wrapRef$current2.clientWidth) || 0,
+    wrapWidth: ((_wrapRef$current5 = wrapRef.current) === null || _wrapRef$current5 === void 0 ? void 0 : _wrapRef$current5.clientWidth) || 0,
     contentWidth: contentWidth
   })));
-}
-
-export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(DataPreviewTable));
+});
+export default /*#__PURE__*/memo(DataPreviewTable);

package/dist/DataPreviewTable/interface.d.ts

@@ -9,6 +9,9 @@ export interface ITableProps {
     errorMsg?: string;
     className?: string;
 }
+export interface DataPreviewTableRef {
+    scrollToColumnInView: (columnId: string) => void;
+}
 export declare type Align = 'left' | 'center' | 'right';
 export interface PreviewColumn {
     icon?: React.ReactNode;

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

@@ -8,6 +8,7 @@ interface IMemberSelectionProps {
     selectedUsers: IUser[];
     onSearchValueChange?: (value: string) => void;
     loading: boolean;
+    width: number;
 }
 export default function MemberSelection(props: IMemberSelectionProps): JSX.Element;
 export {};

package/dist/MemberPicker/components/MemberSelection.js

@@ -26,7 +26,8 @@ export default function MemberSelection(props) {
       onChange = props.onChange,
       selectedUsers = props.selectedUsers,
       onSearchValueChange = props.onSearchValueChange,
-      loading = props.loading;
+      loading = props.loading,
+      width = props.width;
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -34,28 +35,44 @@ export default function MemberSelection(props) {
       setSearchValue = _useState2[1];
 
   var deferredSearchValue = useDeferredValue(searchValue);
+  var inputRef = React.useRef(null);
   useEffect(function () {
     onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange(deferredSearchValue);
   }, [deferredSearchValue, onSearchValueChange]);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-member-list-wrap')
   }, /*#__PURE__*/React.createElement(Input, {
     prefix: /*#__PURE__*/React.createElement(SearchLine, null),
+    ref: inputRef,
     className: 'ald-member-picker-search-input',
     onChange: function onChange(e) {
       setSearchValue(e.target.value);
     }
+  }), userList.length === 0 && !loading && /*#__PURE__*/React.createElement(Empty, {
+    title: "\u65E0\u6570\u636E",
+    size: "small",
+    image: Empty.PRESENTED_IMAGE_SEARCH,
+    className: "ald-member-picker-member-list-empty"
   }), /*#__PURE__*/React.createElement(Spin, {
     tip: "Loading",
     spinning: loading,
     size: "small"
-  }, userList.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    title: "\u65E0\u6570\u636E",
-    size: "small",
-    image: Empty.PRESENTED_IMAGE_SEARCH
-  }) : /*#__PURE__*/React.createElement(ScrollArea, {
-    className: 'ald-member-picker-member-list',
+  }, /*#__PURE__*/React.createElement(ScrollArea, {
+    className: classNames('ald-member-picker-member-list', {
+      'ald-member-picker-member-list-null': userList.length === 0 && !loading
+    }),
     innerClassName: "ald-member-picker-member-scroll"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-member-picker-member-list-inner",
+    style: {
+      width: width,
+      overflow: 'hidden'
+    }
   }, userList.map(function (user) {
     var isSelected = selectedUsers.some(function (selectedUser) {
       return selectedUser.userId === user.userId;
@@ -71,5 +88,5 @@ export default function MemberSelection(props) {
       selected: isSelected,
       onChange: onChange
     });
-  }))));
+  })))));
 }

package/dist/MemberPicker/components/NickLabel.js

@@ -13,7 +13,8 @@ var NickLabel = function NickLabel(_ref) {
     src: src,
     size: 20
   }, innerName), /*#__PURE__*/React.createElement("div", {
-    className: "ald-member-picker-nick-label-name"
+    className: "ald-member-picker-nick-label-name",
+    title: innerName
   }, innerName));
 };
 

package/dist/MemberPicker/components/Panel.js

@@ -91,8 +91,9 @@ export default function Panel(props) {
       width: panelWidth
     }
   }, multiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MemberSelection, {
-    className: 'ald-member-picker-memberSelection',
+    className: 'ald-member-picker-member-selection-multiple',
     userList: userList,
+    width: (panelWidth - 3) / 2,
     selectedUsers: selectedUsers,
     onChange: onSelectionChange,
     onSearchValueChange: onSearchValueChange,
@@ -101,14 +102,16 @@ export default function Panel(props) {
   }), /*#__PURE__*/React.createElement(SelectedMemberTags, {
     className: 'ald-member-picker-selected-member-tags',
     selectedUsers: selectedUsers,
+    width: (panelWidth - 3) / 2,
     onRemove: onRemove
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: props.onCancel,
     onOk: onOk
   })) : /*#__PURE__*/React.createElement(MemberSelection, {
-    className: 'ald-member-picker-memberSelection',
+    className: 'ald-member-picker-member-selection-single',
     userList: userList,
+    width: panelWidth - 2,
     onChange: onSelectionChange,
     selectedUsers: selectedUsers,
     onSearchValueChange: onSearchValueChange,

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

@@ -4,6 +4,7 @@ interface ISelectedMemberTagsProps {
     className?: string;
     selectedUsers: IUser[];
     onRemove?: (user: IUser) => void;
+    width: number;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -3,16 +3,26 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { CloseMLine } from '@aloudata/icons-react';
 import classNames from 'classnames';
 import React from 'react';
+import ScrollArea from "../../ScrollArea";
 import NickLabel from "./NickLabel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
-      selectedUsers = props.selectedUsers;
+      selectedUsers = props.selectedUsers,
+      width = props.width;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-selected-member-tags-wrap')
   }, /*#__PURE__*/React.createElement("div", {
     className: 'ald-member-picker-has-selected'
-  }, "\u5DF2\u9009 ", selectedUsers.length), /*#__PURE__*/React.createElement("div", {
-    className: 'ald-member-picker-tags'
+  }, "\u5DF2\u9009 ", selectedUsers.length), /*#__PURE__*/React.createElement(ScrollArea, {
+    style: {
+      maxHeight: 'calc(100% - 20px)',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-tags',
+    style: {
+      width: width - 17
+    }
   }, selectedUsers.map(function (user) {
     return /*#__PURE__*/React.createElement("div", {
       className: 'ald-member-picker-selected-member-tag',
@@ -29,5 +39,5 @@ export default function SelectedMemberTags(props) {
         (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, user);
       }
     }));
-  })));
+  }))));
 }

package/dist/MemberPicker/index.js

@@ -8,6 +8,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -26,7 +28,7 @@ import { FoldDownFill } from '@aloudata/icons-react';
 import { useRequest } from 'ahooks';
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ConfigProvider from "../ConfigProvider";
 import Dropdown from "../Dropdown";
 import message from "../message";
@@ -63,14 +65,20 @@ var MemberSelector = function MemberSelector(_ref) {
       searchString = _useState6[0],
       setSearchString = _useState6[1];
 
+  var _useState7 = useState(dropdownWidth),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dropdownContentWidth = _useState8[0],
+      setDropdownContentWidth = _useState8[1];
+
+  var triggerRef = useRef(null);
   var onSearchValueChange = useCallback(function (v) {
     setSearchString(v);
   }, []);
 
-  var _useState7 = useState(!!open),
-      _useState8 = _slicedToArray(_useState7, 2),
-      dropdownOpen = _useState8[0],
-      setDropdownOpen = _useState8[1];
+  var _useState9 = useState(!!open),
+      _useState10 = _slicedToArray(_useState9, 2),
+      dropdownOpen = _useState10[0],
+      setDropdownOpen = _useState10[1];
 
   var queryByKeywords = useMemo(function () {
     if (getUsersByKeywords) {
@@ -81,7 +89,7 @@ var MemberSelector = function MemberSelector(_ref) {
       _objectDestructuringEmpty(_ref2);
 
       return Promise.reject({
-        message: '请在ConfigProvider中配置queryByKeywords方法'
+        message: '请在ConfigProvider中配置getUsersByKeywords方法'
       });
     };
   }, [getUsersByKeywords]);
@@ -94,7 +102,7 @@ var MemberSelector = function MemberSelector(_ref) {
       _objectDestructuringEmpty(_ref3);
 
       return Promise.reject({
-        message: '请在ConfigProvider中配置queryByIds方法'
+        message: '请在ConfigProvider中配置getUsersByIds方法'
       });
     };
   }, [getUsersByIds]);
@@ -160,6 +168,30 @@ var MemberSelector = function MemberSelector(_ref) {
       setDropdownOpen(open);
     }
   }, [open]);
+  useEffect(function () {
+    var resizeEle = triggerRef.current;
+    if (!resizeEle) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          var width = entry.contentRect.width;
+          setDropdownContentWidth(width);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    resizeObserver.observe(resizeEle);
+    return function () {
+      resizeObserver.unobserve(resizeEle);
+    };
+  }, [triggerRef]);
   var onDropdownOpenChange = useCallback(function (open) {
     setDropdownOpen(open);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
@@ -175,7 +207,7 @@ var MemberSelector = function MemberSelector(_ref) {
         userList: totalUserList,
         multiple: multiple,
         loading: loading,
-        dropdownWidth: dropdownWidth,
+        dropdownWidth: dropdownWidth || dropdownContentWidth,
         onSearchValueChange: onSearchValueChange,
         onChange: onSelectedChange,
         onCancel: setDropdownOpen.bind(null, false)
@@ -184,7 +216,8 @@ var MemberSelector = function MemberSelector(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-trigger', {
       'ald-member-picker-trigger-open': dropdownOpen
-    })
+    }),
+    ref: triggerRef
   }, children || /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-member-picker-content-wrap', {
       'ald-member-picker-content-wrap-open': dropdownOpen

package/dist/MemberPicker/style/index.less

@@ -8,15 +8,15 @@
 @import '../../Spin/style/index.less';
 
 .ald-member-picker-wrapper {
+  box-sizing: border-box;
   border: 1px solid var(--colors-gray-400, #dbdbdb);
   background: var(--colors-neutral-white, #fff);
   box-shadow: 0 20px 24px -4px rgb(16 24 40 / 0.08),
     0 8px 8px -4px rgb(16 24 40 / 0.03);
 
   &.ald-member-picker-multiple {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 320px 56px;
+    display: flex;
+    flex-wrap: wrap;
     border-radius: 4px;
     // .memberSelection {
     // }
@@ -31,15 +31,36 @@
 }
 
 .ald-member-picker-member-list-wrap {
-  .ald-member-picker-search-input {
+  &.ald-member-picker-member-selection-multiple {
+    width: 50%;
+  }
+
+  &.ald-member-picker-member-selection-single {
+    width: 100%;
+  }
+
+  .ald-member-picker-search-input.ald-member-picker-search-input {
     border: none;
     border-bottom: 1px solid var(--colors-gray-300, #e8e8e8);
+    border-radius: 0;
+
+    &.ant-input-affix-wrapper-focused {
+      border-color: #dbdbdb;
+    }
+  }
+
+  .ald-member-picker-member-list-empty {
+    min-height: 180px;
   }
 
   .ald-member-picker-member-list {
     height: calc(100% - 32px);
     min-height: 180px;
 
+    &.ald-member-picker-member-list-null {
+      display: none;
+    }
+
     .ald-member-picker-member-scroll {
       max-height: 288px;
     }
@@ -47,12 +68,9 @@
 }
 
 .ald-member-picker-selected-member-tags-wrap {
+  width: 50%;
   max-height: 320px;
   padding: 8px;
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: 20px auto;
-  gap: 8px;
 
   .ald-member-picker-has-selected {
     color: var(--colors-gray-900, #171717);
@@ -60,6 +78,7 @@
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
+    margin-bottom: 8px;
   }
 
   .ald-member-picker-tags {
@@ -80,6 +99,7 @@
       font-weight: 400;
       line-height: 20px;
       height: 24px;
+      max-width: 100%;
 
       .ald-member-picker-close {
         cursor: pointer;
@@ -89,6 +109,7 @@
 }
 
 .ald-member-picker-footer {
+  width: 100%;
   display: flex;
   padding: var(--global-number-spacing-spacing-sm, 12px)
     var(--global-number-spacing-spacing-lg, 24px);
@@ -183,6 +204,12 @@
   gap: 4px;
   flex-wrap: nowrap;
   align-items: center;
+  max-width: fit-content;
+  overflow: hidden;
+
+  .ald-avatar {
+    flex-shrink: 0;
+  }
 
   .ald-member-picker-nick-label-name {
     color: var(--colors-gray-900, #171717);
@@ -191,5 +218,7 @@
     font-weight: 400;
     line-height: 20px;
     white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }

package/dist/Select/components/MultipleOption.js

@@ -1,7 +1,11 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 import classnames from 'classnames';
 import React from 'react';
 import Checkbox from "../../Checkbox";
 export default function MultipleList(params) {
+  var _option$label;
+
   var disabled = params.disabled,
       option = params.option,
       selected = params.selected,
@@ -22,6 +26,7 @@ export default function MultipleList(params) {
     checked: selected,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("span", {
-    className: "ald-multiple-option-label"
+    className: "ald-multiple-option-label",
+    title: _typeof(option.label) !== 'object' ? (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString() : ''
   }, option.label));
 }

package/dist/Select/components/SingleOption.js

@@ -1,6 +1,10 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 import classnames from 'classnames';
 import React from 'react';
 export default function SingleOption(params) {
+  var _option$label;
+
   var disabled = params.disabled,
       selected = params.selected,
       option = params.option,
@@ -20,6 +24,7 @@ export default function SingleOption(params) {
     }),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("span", {
-    className: "ald-single-option-text"
+    className: "ald-single-option-text",
+    title: _typeof(option.label) !== 'object' ? (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString() : ''
   }, option.label));
 }

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as ColorPicker } from './ColorPicker';
 export type { IColorPickerProps } from './ColorPicker';
 export { default as ConfigProvider } from './ConfigProvider';
 export { default as DataPreviewTable } from './DataPreviewTable';
+export type { DataPreviewTableRef, ITableProps as DataPreviewTableProps, PreviewColumn, } from './DataPreviewTable/interface';
 export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
 export { default as Divider } from './Divider';

package/dist/style/mixins/index.less

@@ -15,3 +15,12 @@
 * :focus {
   outline: none;
 }
+
+* {
+  box-sizing: border-box;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",