@aloudata/aloudata-design 2.19.8 → 2.19.10

package/dist/AldSelect/interface.d.ts

@@ -22,6 +22,11 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     dropdownClassName?: string;
     popupClassName?: string;
     placement?: PlacementType;
+    /**
+     * 空间不足时自动计算下拉面板最大高度并启用内部滚动，继承自 dropdown。
+     * 透传至底层 Dropdown 的 size middleware，避免短视口下面板溢出浏览器。
+     */
+    allowOverlap?: boolean;
     labelInValue?: boolean;
     options?: OptionType[];
     menu?: SelectMenuProps;

package/dist/MemberPicker/components/Panel.js

@@ -150,6 +150,8 @@ export default function Panel(props) {
       width: panelwidth
     }
   }, multiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-inner'
+  }, /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-member-selection-wrapper"
   }, renderDropdown()), /*#__PURE__*/React.createElement(SelectedMemberTags, {
     className: 'ald-member-picker-selected-member-tags',
@@ -159,7 +161,7 @@ export default function Panel(props) {
     lockedIds: lockedIds,
     userList: dataList,
     renderSelectedTag: renderSelectedTag
-  }), /*#__PURE__*/React.createElement(SelectorFooter, {
+  })), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: onCancel,
     onOk: function onOk() {

package/dist/MemberPicker/index.js

@@ -35,6 +35,7 @@ import { EMemberPicker } from "./interface";
 import { isUser, isUserGroup } from "./utils/getUsersWithUserId";
 import AldSelect from "../AldSelect";
 var Component = function Component(props) {
+  var _props$allowOverlap;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -63,6 +64,8 @@ var Component = function Component(props) {
     renderItem = props.renderItem,
     renderSelectedTag = props.renderSelectedTag,
     restProps = _objectWithoutProperties(props, _excluded);
+  // 自适应高度开关：默认开启，consumer 可显式传 allowOverlap={false} 关闭
+  var allowOverlap = (_props$allowOverlap = props.allowOverlap) !== null && _props$allowOverlap !== void 0 ? _props$allowOverlap : false;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -263,6 +266,8 @@ var Component = function Component(props) {
   return /*#__PURE__*/React.createElement(AldSelect, _extends({
     prefix: propPrefix
   }, restProps, {
+    // 默认开启自适应高度，短视口下面板不再溢出浏览器
+    allowOverlap: allowOverlap,
     size: size,
     className: classNames('ald-member-picker-select', className),
     value: selectedUserList.map(function (item) {
@@ -322,7 +327,9 @@ var Component = function Component(props) {
       }
       _onClear === null || _onClear === void 0 ? void 0 : _onClear();
     },
-    popupClassName: classNames('ald-member-picker-popup', props.popupClassName),
+    popupClassName: classNames('ald-member-picker-popup',
+    // allowOverlap 开启时去掉列表固定高度，让面板高度由浮层 max-height 兜底
+    allowOverlap && 'ald-member-picker-popup-adaptive', props.popupClassName),
     mode: mode,
     options: selectedUserList.map(function (item) {
       if (item.type === EUserType.USER_GROUP) return {
@@ -354,7 +361,11 @@ var Component = function Component(props) {
     placeholder: placeholder,
     dropdownRender: function dropdownRender() {
       return /*#__PURE__*/React.createElement("div", {
-        ref: triggerRef
+        ref: triggerRef,
+        className: classNames({
+          // 自适应高度 flex 链：把浮层高度透传给面板
+          'ald-member-picker-popup-body': allowOverlap
+        })
       }, /*#__PURE__*/React.createElement(Panel, {
         type: type,
         footer: footer,

package/dist/MemberPicker/style/index.less

@@ -31,6 +31,12 @@
   }
 }
 
+// 上半区：选择列 + 已选列并排（footer 由 wrapper 排在其下方）
+.ald-member-picker-inner {
+  display: flex;
+  width: 100%;
+}
+
 .ald-member-picker-member-selection-wrapper {
   width: 50%;
   border-right: 1px solid var(--border-default);
@@ -84,6 +90,96 @@
   height: 260px;
 }
 
+// allowOverlap 自适应高度：把浮层 size middleware 的 max-height 沿 flex 链传到列表。
+// 面板上下分区——上半区(inner) flex 占满剩余高度、footer 固定最下，仅列表/已选内部滚动。
+.ald-member-picker-popup-adaptive {
+  display: flex;
+  flex-direction: column;
+
+  // SelectTrigger 的 popup 容器
+  .beta-ald-select-popup {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 430px;
+  }
+
+  // dropdownRender 包裹层（triggerRef）
+  .ald-member-picker-popup-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // 面板根：flex 列，上半区占满、footer 固定底部
+  .ald-member-picker-wrapper {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  // 上半区：撑满剩余高度
+  .ald-member-picker-inner {
+    flex: 1;
+    min-height: 0;
+  }
+
+  // footer：自然高度，固定最下方
+  .ald-member-picker-selector-footer {
+    flex: 0 0 auto;
+  }
+
+  // 左侧选择列：撑满并把高度传给 Tabs
+  .ald-member-picker-member-selection-wrapper {
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // antd Tabs 撑满，把高度透传到 tabpane
+  .ald-member-tabs.ant-tabs {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .ant-tabs-content-holder {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  }
+
+  .ald-member-picker-member-list-wrap {
+    height: 100%;
+    min-height: 0;
+  }
+
+  // 列表去掉固定高度，flex 撑满剩余空间，内部滚动（user-list 类已是 flex:1）
+  .ald-member-picker-member-list {
+    height: auto !important;
+    min-height: 0;
+  }
+
+  // 右侧"已选"列：撑满 + 内部滚动
+  .ald-member-picker-selected-member-tags-wrap {
+    min-height: 0;
+    max-height: none;
+    overflow: hidden;
+  }
+}
+
 .ald-member-picker-selected-member-tags-wrap {
   width: 50%;
   max-height: 377px;
@@ -357,7 +453,7 @@
 }
 
 .ald-member-selected-member-wrapper {
-  height: calc(100% - 24px);
+  height: calc(100% - 32px) !important;
 }
 
 .ald-member-picker-ban-badge {

package/dist/Table/components/Footer/index.js

@@ -31,8 +31,8 @@ export default function TableFooter(props) {
   var btnItems = [{
     key: '$UN_SELECT_ALL$',
     label: t.Table.cancelSelect,
-    onClick: function onClick(e) {
-      return rowSelectionInfo.unSelectAll(e);
+    onClick: function onClick() {
+      return rowSelectionInfo.unSelectAll();
     }
   }].concat(_toConsumableArray(items));
   var rowSelectionNode = isShowRowSelectionInFooter && /*#__PURE__*/React.createElement("div", {

package/dist/Table/hooks/useRowSelection.d.ts

@@ -1,16 +1,17 @@
 import React from 'react';
-import { ITableProps } from '../types';
+import { IRowSelection, ITableProps } from '../types';
 export default function useRowSelection<TDataItem extends object>(props: ITableProps<TDataItem> & {
     isExpandable?: boolean;
     flattenData?: TDataItem[];
 }): IRowSelectionInfo<TDataItem>;
+export declare function getCheckboxAllStatus<TDataItem extends object>(data: TDataItem[], selectedRowKeys: string[], rowKey: ITableProps<TDataItem>['rowKey'], getCheckboxProps?: IRowSelection<TDataItem>['getCheckboxProps']): 'all' | 'none' | 'indeterminate';
 export interface IRowSelectionInfo<TDataItem extends object> {
     columns: ITableProps<TDataItem>['columns'];
     isRowSelectionEnabled: boolean;
     getCheckboxAllNode: ((children?: React.ReactNode) => React.ReactNode) | null;
     selectedRowKeys: string[];
     selectedRowKeysInCurrPage: string[];
-    unSelectAll: (e: React.MouseEvent) => void;
+    unSelectAll: () => void;
     isShowRowSelectionInFooter: boolean;
     items: {
         key: string;

package/dist/Table/hooks/useRowSelection.js

@@ -64,11 +64,12 @@ export default function useRowSelection(props) {
   }, [getAllSelectedRows, rowSelection]);
   var checkboxAllStatus = getCheckboxAllStatus(allDataForSelection, selectedRowKeys, rowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
   var selectAll = useCallback(function () {
-    var newKeys = allDataForSelection.map(function (record) {
+    // 仅选中未禁用项；禁用项不允许进入选中态
+    var newKeys = getDataWithoutDisabled(allDataForSelection, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps).map(function (record) {
       return getRowKey(record, rowKey);
     });
     changeSelectedRowKeys(newKeys);
-  }, [allDataForSelection, rowKey, changeSelectedRowKeys]);
+  }, [allDataForSelection, rowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps, changeSelectedRowKeys]);
   var unSelectAll = useCallback(function () {
     changeSelectedRowKeys([]);
   }, [changeSelectedRowKeys]);
@@ -176,21 +177,21 @@ export default function useRowSelection(props) {
     onChange: changeSelectedRowKeys
   };
 }
-function getCheckboxAllStatus(data, selectedRowKeys, rowKey, getCheckboxProps) {
-  var selectedKeysInData = data.map(function (record) {
-    var key = getRowKey(record, rowKey);
-    if (selectedRowKeys.includes(key)) {
-      return key;
-    }
-    return null;
-  }).filter(function (key) {
-    return key !== null;
-  });
-  if (selectedKeysInData.length === 0) {
+export function getCheckboxAllStatus(data, selectedRowKeys, rowKey, getCheckboxProps) {
+  // 全选状态只由「未禁用」项决定：禁用项无论是否预选都不影响全选/半选/未选的判定，
+  // 否则会出现「全部可选项已勾选 + 1 个禁用预选」被错算成 indeterminate，
+  // 或者「全部可选项中某项已取消 + 1 个禁用预选」被错算成 all 的情况。
+  var enabledData = getDataWithoutDisabled(data, getCheckboxProps);
+  if (enabledData.length === 0) {
+    return 'none';
+  }
+  var selectedEnabledCount = enabledData.filter(function (record) {
+    return selectedRowKeys.includes(getRowKey(record, rowKey));
+  }).length;
+  if (selectedEnabledCount === 0) {
     return 'none';
   }
-  var dataWithoutDisabled = getDataWithoutDisabled(data, getCheckboxProps);
-  if (selectedKeysInData.length === dataWithoutDisabled.length) {
+  if (selectedEnabledCount === enabledData.length) {
     return 'all';
   }
   return 'indeterminate';

package/dist/Table/style/index.less

@@ -366,6 +366,32 @@
   height: 100%;
 }
 
+// 加深 rowSelection checkbox disabled 态的可见度：默认 Checkbox 的 disabled
+// 背景/边框与正常态一致（都是表单底色 + 默认描边），单看一行根本看不出来这是禁
+// 用项。这里仅在 Table 选择列内覆盖，避免影响其他场景。仅处理 unchecked+disabled，
+// checked+disabled 与 indeterminate+disabled 保留组件原本样式。
+//
+// 注：直接用 semantic 层 token 而非 --alias-colors-bg-disabled / --alias-colors-border-disabled，
+// 是因为这两个 alias token 都是 rgba(0,0,0,0.06)，边框几乎透明，套上去等于没改 ——
+// 也正是这次 bug 的根因。等设计系统把 disabled alias 加深后再切回 alias 层即可。
+//
+// `[class][class]` 是为了把选择符特异度抬到比 Checkbox/style/index.less 里
+// `.ald-checkbox.ald-checkbox.ant-checkbox-wrapper .ant-checkbox-disabled
+//   .ant-checkbox-inner[class][class]` 更高，否则覆盖不掉。
+.ald-table-row-selection-all,
+.ald-table-row-selection-item {
+  .ald-checkbox.ant-checkbox-wrapper-disabled {
+    .ant-checkbox-disabled:not(.ant-checkbox-checked):not(
+        .ant-checkbox-indeterminate
+      ) {
+      .ant-checkbox-inner[class][class] {
+        background-color: var(--semantic-neutral-100);
+        border-color: var(--semantic-neutral-300);
+      }
+    }
+  }
+}
+
 /** Footer **/
 .ald-table-footer {
   padding: 16px;