@@ -27,6 +27,9 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
27
27
* Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
28
28
*/
29
29
disableFlipMiddleware ?: boolean ;
30
+ /**
31
+ * Задаёт резервный вариант размещения по перпендикулярной оси.
32
+ */
30
33
flipMiddlewareFallbackAxisSideDirection ?: FlipMiddlewareOptions [ 'fallbackAxisSideDirection' ] ;
31
34
/**
32
35
* Отступ по главной оси.
@@ -75,7 +78,7 @@ export const useFloatingMiddlewaresBootstrap = ({
75
78
customMiddlewares,
76
79
hideWhenReferenceHidden,
77
80
disableFlipMiddleware = false ,
78
- flipMiddlewareFallbackAxisSideDirection = 'start ' ,
81
+ flipMiddlewareFallbackAxisSideDirection = 'end ' ,
79
82
} : UseFloatingMiddlewaresBootstrapOptions ) : {
80
83
middlewares : UseFloatingMiddleware [ ] ;
81
84
strictPlacement : Placement | undefined ;
@@ -89,19 +92,29 @@ export const useFloatingMiddlewaresBootstrap = ({
89
92
} ) ,
90
93
] ;
91
94
92
- // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
95
+ const shiftMiddlewareInstance = shiftMiddleware ( ) ;
96
+
97
+ // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
93
98
if ( isAutoPlacement ) {
94
- middlewares . push ( autoPlacementMiddleware ( { alignment : getAutoPlacementAlign ( placement ) } ) ) ;
95
- } else if ( ! disableFlipMiddleware ) {
96
99
middlewares . push (
97
- flipMiddleware ( {
98
- fallbackAxisSideDirection : flipMiddlewareFallbackAxisSideDirection ,
99
- crossAxis : false ,
100
- } ) ,
100
+ autoPlacementMiddleware ( { alignment : getAutoPlacementAlign ( placement ) } ) ,
101
+ shiftMiddlewareInstance ,
101
102
) ;
102
- }
103
+ } else if ( ! disableFlipMiddleware ) {
104
+ const flipMiddlewareInstance = flipMiddleware ( {
105
+ crossAxis : 'alignment' ,
106
+ fallbackAxisSideDirection : flipMiddlewareFallbackAxisSideDirection ,
107
+ } ) ;
103
108
104
- middlewares . push ( shiftMiddleware ( ) ) ;
109
+ // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs
110
+ if ( placement . includes ( '-' ) ) {
111
+ middlewares . push ( flipMiddlewareInstance , shiftMiddlewareInstance ) ;
112
+ } else {
113
+ middlewares . push ( shiftMiddlewareInstance , flipMiddlewareInstance ) ;
114
+ }
115
+ } else {
116
+ middlewares . push ( shiftMiddlewareInstance ) ;
117
+ }
105
118
106
119
if ( sameWidth ) {
107
120
middlewares . push (
@@ -119,7 +132,7 @@ export const useFloatingMiddlewaresBootstrap = ({
119
132
middlewares . push ( ...customMiddlewares ) ;
120
133
}
121
134
122
- // см. https://floating-ui.com/ docs/arrow#order
135
+ // см. https://github.com/ floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/ docs/arrow.mdx #order
123
136
if ( arrow ) {
124
137
middlewares . push (
125
138
arrowMiddleware ( {
0 commit comments