diff --git a/lib/dropdown/src/component/dropdown-menu.tsx b/lib/dropdown/src/component/dropdown-menu.tsx index 5443459df2..a723b8fbfe 100644 --- a/lib/dropdown/src/component/dropdown-menu.tsx +++ b/lib/dropdown/src/component/dropdown-menu.tsx @@ -18,6 +18,9 @@ export class DropdownMenu e defaultNestedShow: false, expandOnSearch: false, nestedSearch: false, + flip: false, + shift: true, + offset: 1, }; static inheritNestedProps = [...SearchMenu.inheritNestedProps, 'container', 'tree']; @@ -56,19 +59,24 @@ export class DropdownMenu e } let {maxHeight} = this.props; + const {flip: flipSetting, shift: shiftSetting, offset: offsetSetting} = this.props; computePosition(trigger, element, { placement: this.props.placement, - middleware: [flip(), shift(), offset(1), size({ - apply({availableWidth, availableHeight}) { - if (maxHeight) { - const [maxHeightVal, unit] = parseSize(maxHeight); - maxHeight = Math.min(unit === '%' ? (maxHeightVal * window.innerHeight) : maxHeightVal, availableHeight - 2); - } else { - maxHeight = availableHeight; - } - $element.css({maxHeight, maxWidth: availableWidth - 2}); - }, - })], + middleware: [ + flipSetting ? flip() : null, + shiftSetting ? shift(typeof shiftSetting === 'object' ? shiftSetting : undefined) : null, + offset(offsetSetting), + size({ + apply({availableWidth, availableHeight}) { + if (maxHeight) { + const [maxHeightVal, unit] = parseSize(maxHeight); + maxHeight = Math.min(unit === '%' ? (maxHeightVal * window.innerHeight) : maxHeightVal, availableHeight - 2); + } else { + maxHeight = availableHeight; + } + $element.css({maxHeight, maxWidth: availableWidth - 2}); + }, + })], }).then(({x, y}) => { $element.css({ left: x, diff --git a/lib/dropdown/src/types/dropdown-menu-options.ts b/lib/dropdown/src/types/dropdown-menu-options.ts index 1ae0f968bd..65f29ddbb5 100644 --- a/lib/dropdown/src/types/dropdown-menu-options.ts +++ b/lib/dropdown/src/types/dropdown-menu-options.ts @@ -1,4 +1,4 @@ -import type {Placement} from '@floating-ui/dom'; +import type {Placement, ShiftOptions, Derivable, OffsetOptions} from '@floating-ui/dom'; import type {SearchMenuOptions} from '@zui/menu'; import type {Dropdown} from '../vanilla'; @@ -7,4 +7,7 @@ export interface DropdownMenuOptions extends SearchMenuOptions { relativeTarget?: unknown; tree?: boolean; dropdown?: Dropdown; + flip?: boolean; + shift?: boolean | ShiftOptions | Derivable; + offset?: OffsetOptions; }