@aloudata/aloudata-design 1.6.2 → 1.6.4

package/dist/Checkbox/index.js

@@ -1,4 +1,5 @@
-var _excluded = ["className"];
+var _excluded = ["className", "disabled"],
+    _excluded2 = ["className", "disabled"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -7,18 +8,35 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { Checkbox as AntdCheckbox } from 'antd';
+import DisabledContext from 'antd/lib/config-provider/DisabledContext';
 import classNames from 'classnames';
 import React from 'react';
 import CheckboxGroup from "./component/CheckboxGroup";
 
 function Checkbox(props) {
   var className = props.className,
+      customDisabled = props.disabled,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   return /*#__PURE__*/React.createElement(AntdCheckbox, _extends({
-    className: classNames('ald-checkbox', className)
+    className: classNames('ald-checkbox', className),
+    disabled: mergedDisabled
   }, otherProps));
 }
 
-Checkbox.Group = CheckboxGroup;
+Checkbox.Group = function Group(props) {
+  var className = props.className,
+      customDisabled = props.disabled,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(CheckboxGroup, _extends({
+    className: classNames('ald-checkbox-group', className),
+    disabled: mergedDisabled
+  }, otherProps));
+};
+
 export default Checkbox;

package/dist/Checkbox/type.d.ts

@@ -34,7 +34,7 @@ export interface ICheckboxProps extends CheckboxProps {
      * @type boolean
      * @default false
      */
-    indeterminate?: false;
+    indeterminate?: boolean;
     /**
      * @description 变化时的回调函数
      * @type  function(e:Event)
@@ -84,7 +84,7 @@ export interface ICheckboxGroupProps extends CheckboxGroupProps {
      * @type 'vertical' | 'horizontal'
      * @default -
      */
-    direction: EDirection.VERTICAL;
+    direction?: 'vertical' | 'horizontal';
     /**
      * @description className
      * @type string

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/Form/index.d.ts

@@ -10,11 +10,15 @@ declare const AldForm: <Values = any>(props: FormProps<Values> & {
     children?: React.ReactNode;
 } & {
     ref?: React.Ref<FormInstance<Values>> | undefined;
+    labelWidth?: number | undefined;
 }) => React.ReactElement;
+interface IFormItemProps extends FormItemProps {
+    labelWidth?: number;
+}
 declare const AldFormItem: {
-    (props: FormItemProps): JSX.Element;
+    (props: IFormItemProps): JSX.Element;
     useStatus: () => {
-        status?: "" | "error" | "success" | "warning" | "validating" | undefined;
+        status?: "" | "warning" | "error" | "success" | "validating" | undefined;
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/dist/Form/index.js

@@ -1,7 +1,14 @@
-var _excluded = ["children", "colon", "size"];
+var _excluded = ["children", "colon", "size", "labelWidth", "style"],
+    _excluded2 = ["labelWidth", "style"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+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 _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; }
@@ -23,23 +30,37 @@ var AldForm = /*#__PURE__*/forwardRef(function (props, ref) {
       colon = _props$colon === void 0 ? false : _props$colon,
       _props$size = props.size,
       size = _props$size === void 0 ? contextSize : _props$size,
+      labelWidth = props.labelWidth,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
       restProps = _objectWithoutProperties(props, _excluded);
 
+  var customStyle = labelWidth ? _objectSpread(_objectSpread({}, style), {}, {
+    '--label-width': "".concat(labelWidth, "px")
+  }) : style;
   return /*#__PURE__*/React.createElement(SizeContextProvider, {
     size: size
   }, /*#__PURE__*/React.createElement(InternalForm, _extends({
     colon: colon,
-    size: size
+    size: size,
+    style: customStyle
   }, restProps, {
     ref: ref
   }), children));
 });
 
 var AldFormItem = function AldFormItem(props) {
-  //@ts-ignore  antd formItem 的ts接口里面无gutter 但是实际上是支持的
+  var labelWidth = props.labelWidth,
+      _props$style2 = props.style,
+      style = _props$style2 === void 0 ? {} : _props$style2,
+      restProps = _objectWithoutProperties(props, _excluded2);
+
+  var customStyle = labelWidth ? _objectSpread(_objectSpread({}, style), {}, {
+    '--label-width': "".concat(labelWidth, "px")
+  }) : style;
   return /*#__PURE__*/React.createElement(Item, _extends({
-    gutter: 12
-  }, props));
+    style: customStyle
+  }, restProps));
 };
 
 AldFormItem.useStatus = Item.useStatus;

package/dist/Form/style/index.less

@@ -9,8 +9,8 @@
     }
 
     .ant-form-item-label {
-      display: inline-flex;
-      align-items: center;
+      width: var(--label-width);
+      margin-right: 12px;
 
       label {
         overflow: hidden;
@@ -19,15 +19,9 @@
         font-style: normal;
         font-weight: 500;
         line-height: 20px;
-        height: auto !important;
-
-        &[for='textarea'] {
-          align-self: flex-start;
-        }
+        height: 32px;
 
         &.ant-form-item-no-colon {
-          display: flex;
-
           &::after {
             display: none;
           }
@@ -37,6 +31,7 @@
 
     .ant-form-item-control {
       line-height: 20px;
+      justify-content: center;
 
       .ant-form-item-control-input {
         min-height: 20px;
@@ -64,15 +59,25 @@
     }
   }
 
-  // &.ant-form-small {
-  //   .ant-form-item {
-  //     .ant-form-item-control {
-  //       .ant-form-item-control-input {
-  //         min-height: 16px;
-  //       }
-  //     }
-  //   }
-  // }
+  &-small {
+    .ant-form-item {
+      .ant-form-item-label {
+        label {
+          height: 28px;
+        }
+      }
+    }
+  }
+
+  &-large {
+    .ant-form-item {
+      .ant-form-item-label {
+        label {
+          height: 36px;
+        }
+      }
+    }
+  }
 }
 
 .ant-form-vertical {

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/Menu/style/index.less

@@ -54,8 +54,8 @@
       }
 
       .ant-menu-submenu-expand-icon {
-        inset-inline-end: 0;
         width: initial;
+        right: 8px;
       }
     }
   }

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/Select/style/multiple.less

@@ -1,38 +1,37 @@
 @import './variables.less';
 
-.ald-multiple-option-list{
+.ald-multiple-option-list {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   color: @NL0;
   font-size: 13px;
   line-height: 20px;
-
 }
 
-.ald-multiple-option{
-  padding: 8px 14px;
+.ald-multiple-option {
+  padding: 8px 12px;
   // height: 20px;
   margin-left: 0;
   display: flex;
   height: 36px;
   box-sizing: border-box;
 
-  &:hover{
+  &:hover {
     background-color: @BG90;
   }
 
-  &.ald-multiple-option-disabled{
+  &.ald-multiple-option-disabled {
     opacity: 0.5;
 
-    &:hover{
+    &:hover {
       background: none;
       cursor: default;
     }
   }
 }
 
-.ald-multiple-option-label{
+.ald-multiple-option-label {
   white-space: nowrap;
   margin-left: 10px;
   flex: 1;
@@ -48,8 +47,8 @@
     cursor: text;
     align-items: flex-start;
 
-    .ant-select-selection-overflow{
+    .ant-select-selection-overflow {
       height: 100%;
     }
   }
-}
+}

package/dist/Switch/style/index.less

@@ -9,20 +9,22 @@
 @switch-text-margin-left: 8px;
 @switch-aspect-ratio: 2; //宽高比
 @switch-height-radius-ratio: 2; //高度和边框圆角比
+@switch-background-color: #dbdbdb;
+@switch-background-color-checked: #3271c9;
 
 .ald-switch.ald-switch {
   display: inline-block;
   font-size: 0;
 
   .ald-switch-btn {
-    background: @BG60;
+    background: @switch-background-color;
 
     &:focus {
       box-shadow: none;
     }
 
     &:hover {
-      background: @BG60;
+      background: @switch-background-color;
     }
   }
 
@@ -36,10 +38,10 @@
 
   &.ald-switch-checked {
     .ald-switch-btn {
-      background-color: @B40;
+      background-color: @switch-background-color-checked;
 
       &:hover {
-        background-color: @B40;
+        background-color: @switch-background-color-checked;
       }
     }
   }
@@ -67,7 +69,6 @@
       min-width: @switch-handle-height-middle * @switch-aspect-ratio;
       height: @switch-handle-height-middle;
       line-height: @switch-handle-height-middle;
-      border-radius: @switch-handle-height-middle / @switch-height-radius-ratio;
 
       .ant-switch-handle {
         top: @switch-handle-gap-middle;
@@ -79,7 +80,7 @@
           width: @switch-handle-middle - 4px;
           height: @switch-handle-middle - 4px;
           font-size: @switch-handle-middle - 4px;
-          
+
           svg {
             width: @switch-handle-middle - 4px;
             height: @switch-handle-middle - 4px;
@@ -110,7 +111,6 @@
       min-width: @switch-handle-height-small * @switch-aspect-ratio;
       height: @switch-handle-height-small;
       line-height: @switch-handle-height-small;
-      border-radius: @switch-handle-height-small / @switch-height-radius-ratio;
 
       .ant-switch-handle {
         top: @switch-handle-gap-small;

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.2",
+  "version": "1.6.4",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",