Skip to content

Commit cf9e25b

Browse files
authored
fix(floating-ui): resolve flip() and shift() conflicts (#8712)
h2. Описание Поправил конфликт `flip()` и `shift()` по новой документации [Combining with `shift`](https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs) ([ссылка на старую рекомендацию](https://github.com/floating-ui/floating-ui/blob/1925eff74061c9937ffe2f236f457a7cdb391fce/website/pages/docs/flip.mdx#combining-with-shiftjs)). Значение по умолчанию `flipMiddlewareFallbackAxisSideDirection` также как в примере заменил на `'end'`, заодно добавил JSDoc. h2. Release notes h2. Исправления - Поправлена проблема, когда всплывающие элементы не меняли своё положение на противоположное по горизонтальной оси – вместо этого они смещались по оси, чтобы оставаться в области видимости. В частности, это касалось [Popover](https://vkcom.github.io/VKUI/${version}/#/Popover).
1 parent ba0f9cd commit cf9e25b

File tree

1 file changed

+24
-11
lines changed
  • packages/vkui/src/lib/floating/useFloatingMiddlewaresBootstrap

1 file changed

+24
-11
lines changed

packages/vkui/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
2727
* Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
2828
*/
2929
disableFlipMiddleware?: boolean;
30+
/**
31+
* Задаёт резервный вариант размещения по перпендикулярной оси.
32+
*/
3033
flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
3134
/**
3235
* Отступ по главной оси.
@@ -75,7 +78,7 @@ export const useFloatingMiddlewaresBootstrap = ({
7578
customMiddlewares,
7679
hideWhenReferenceHidden,
7780
disableFlipMiddleware = false,
78-
flipMiddlewareFallbackAxisSideDirection = 'start',
81+
flipMiddlewareFallbackAxisSideDirection = 'end',
7982
}: UseFloatingMiddlewaresBootstrapOptions): {
8083
middlewares: UseFloatingMiddleware[];
8184
strictPlacement: Placement | undefined;
@@ -89,19 +92,29 @@ export const useFloatingMiddlewaresBootstrap = ({
8992
}),
9093
];
9194

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
9398
if (isAutoPlacement) {
94-
middlewares.push(autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }));
95-
} else if (!disableFlipMiddleware) {
9699
middlewares.push(
97-
flipMiddleware({
98-
fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
99-
crossAxis: false,
100-
}),
100+
autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }),
101+
shiftMiddlewareInstance,
101102
);
102-
}
103+
} else if (!disableFlipMiddleware) {
104+
const flipMiddlewareInstance = flipMiddleware({
105+
crossAxis: 'alignment',
106+
fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
107+
});
103108

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+
}
105118

106119
if (sameWidth) {
107120
middlewares.push(
@@ -119,7 +132,7 @@ export const useFloatingMiddlewaresBootstrap = ({
119132
middlewares.push(...customMiddlewares);
120133
}
121134

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
123136
if (arrow) {
124137
middlewares.push(
125138
arrowMiddleware({

0 commit comments

Comments
 (0)