@vkontakte/vkui 7.4.1 → 7.4.2

package/dist/cssm/lib/floating/useFloatingMiddlewaresBootstrap/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { arrowMiddleware, autoPlacementMiddleware, flipMiddleware, hideMiddleware, offsetMiddleware, shiftMiddleware, sizeMiddleware } from "../adapters.js";
 import { checkIsNotAutoPlacement, getAutoPlacementAlign } from "../functions.js";
-export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', arrowRef = null, arrow, arrowHeight, arrowPadding, sameWidth, offsetByMainAxis = 0, offsetByCrossAxis = 0, customMiddlewares, hideWhenReferenceHidden, disableFlipMiddleware = false, flipMiddlewareFallbackAxisSideDirection = 'start' })=>{
+export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', arrowRef = null, arrow, arrowHeight, arrowPadding, sameWidth, offsetByMainAxis = 0, offsetByCrossAxis = 0, customMiddlewares, hideWhenReferenceHidden, disableFlipMiddleware = false, flipMiddlewareFallbackAxisSideDirection = 'end' })=>{
     return React.useMemo(()=>{
         const isAutoPlacement = !checkIsNotAutoPlacement(placement);
         const middlewares = [
@@ -10,18 +10,26 @@ export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', ar
                 mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis
             })
         ];
-        // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+        const shiftMiddlewareInstance = shiftMiddleware();
+        // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
         if (isAutoPlacement) {
             middlewares.push(autoPlacementMiddleware({
                 alignment: getAutoPlacementAlign(placement)
-            }));
+            }), shiftMiddlewareInstance);
         } else if (!disableFlipMiddleware) {
-            middlewares.push(flipMiddleware({
-                fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
-                crossAxis: false
-            }));
+            const flipMiddlewareInstance = flipMiddleware({
+                crossAxis: 'alignment',
+                fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection
+            });
+            // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs
+            if (placement.includes('-')) {
+                middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);
+            } else {
+                middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);
+            }
+        } else {
+            middlewares.push(shiftMiddlewareInstance);
         }
-        middlewares.push(shiftMiddleware());
         if (sameWidth) {
             middlewares.push(sizeMiddleware({
                 apply ({ rects, elements }) {
@@ -34,7 +42,7 @@ export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', ar
         if (customMiddlewares) {
             middlewares.push(...customMiddlewares);
         }
-        // см. https://floating-ui.com/docs/arrow#order
+        // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,

package/dist/cssm/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  flipMiddleware,\n  type FlipMiddlewareOptions,\n  hideMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  sizeMiddleware,\n} from '../adapters';\nimport { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';\nimport {\n  type ArrowOptions,\n  type Placement,\n  type PlacementWithAuto,\n  type UseFloatingMiddleware,\n} from '../types/common';\n\nexport interface UseFloatingMiddlewaresBootstrapOptions {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.\n   * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`\n   */\n  disableFlipMiddleware?: boolean;\n  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];\n  /**\n   * Отступ по главной оси.\n   */\n  offsetByMainAxis?: number;\n  /**\n   * Отступ по вспомогательной оси.\n   */\n  offsetByCrossAxis?: number;\n  arrowRef?: ArrowOptions['element'];\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент.\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Выставлять ширину равной target элементу.\n   */\n  sameWidth?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать).\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * Принудительно скрывает компонент если целевой элемент вышел за область видимости.\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport const useFloatingMiddlewaresBootstrap = ({\n  placement = 'bottom-start',\n  arrowRef = null,\n  arrow,\n  arrowHeight,\n  arrowPadding,\n  sameWidth,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  customMiddlewares,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection = 'start',\n}: UseFloatingMiddlewaresBootstrapOptions): {\n  middlewares: UseFloatingMiddleware[];\n  strictPlacement: Placement | undefined;\n} => {\n  return React.useMemo(() => {\n    const isAutoPlacement = !checkIsNotAutoPlacement(placement);\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetByCrossAxis,\n        mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isAutoPlacement) {\n      middlewares.push(autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }));\n    } else if (!disableFlipMiddleware) {\n      middlewares.push(\n        flipMiddleware({\n          fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,\n          crossAxis: false,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return { middlewares, strictPlacement: isAutoPlacement ? undefined : placement };\n  }, [\n    placement,\n    offsetByCrossAxis,\n    arrow,\n    arrowHeight,\n    offsetByMainAxis,\n    disableFlipMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n    sameWidth,\n    customMiddlewares,\n    hideWhenReferenceHidden,\n    arrowRef,\n    arrowPadding,\n  ]);\n};\n"],"names":["React","arrowMiddleware","autoPlacementMiddleware","flipMiddleware","hideMiddleware","offsetMiddleware","shiftMiddleware","sizeMiddleware","checkIsNotAutoPlacement","getAutoPlacementAlign","useFloatingMiddlewaresBootstrap","placement","arrowRef","arrow","arrowHeight","arrowPadding","sameWidth","offsetByMainAxis","offsetByCrossAxis","customMiddlewares","hideWhenReferenceHidden","disableFlipMiddleware","flipMiddlewareFallbackAxisSideDirection","useMemo","isAutoPlacement","middlewares","crossAxis","mainAxis","push","alignment","fallbackAxisSideDirection","apply","rects","elements","Object","assign","floating","style","width","reference","element","padding","strictPlacement","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,EAEdC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QACT,iBAAc;AACrB,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,kBAAe;AAsD9E,OAAO,MAAMC,kCAAkC,CAAC,EAC9CC,YAAY,cAAc,EAC1BC,WAAW,IAAI,EACfC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,iBAAiB,EACjBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,0CAA0C,OAAO,EACV;IAIvC,OAAOtB,MAAMuB,OAAO,CAAC;QACnB,MAAMC,kBAAkB,CAAChB,wBAAwBG;QACjD,MAAMc,cAAuC;YAC3CpB,iBAAiB;gBACfqB,WAAWR;gBACXS,UAAUd,SAASC,cAAcG,mBAAmBH,cAAcG;YACpE;SACD;QAED,oEAAoE;QACpE,IAAIO,iBAAiB;YACnBC,YAAYG,IAAI,CAAC1B,wBAAwB;gBAAE2B,WAAWpB,sBAAsBE;YAAW;QACzF,OAAO,IAAI,CAACU,uBAAuB;YACjCI,YAAYG,IAAI,CACdzB,eAAe;gBACb2B,2BAA2BR;gBAC3BI,WAAW;YACb;QAEJ;QAEAD,YAAYG,IAAI,CAACtB;QAEjB,IAAIU,WAAW;YACbS,YAAYG,IAAI,CACdrB,eAAe;gBACbwB,OAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE;oBACvBC,OAAOC,MAAM,CAACF,SAASG,QAAQ,CAACC,KAAK,EAAE;wBACrCC,OAAO,GAAGN,MAAMO,SAAS,CAACD,KAAK,CAAC,EAAE,CAAC;oBACrC;gBACF;YACF;QAEJ;QAEA,IAAInB,mBAAmB;YACrBM,YAAYG,IAAI,IAAIT;QACtB;QAEA,+CAA+C;QAC/C,IAAIN,OAAO;YACTY,YAAYG,IAAI,CACd3B,gBAAgB;gBACduC,SAAS5B;gBACT6B,SAAS1B;YACX;QAEJ;QAEA,IAAIK,yBAAyB;YAC3BK,YAAYG,IAAI,CAACxB;QACnB;QAEA,OAAO;YAAEqB;YAAaiB,iBAAiBlB,kBAAkBmB,YAAYhC;QAAU;IACjF,GAAG;QACDA;QACAO;QACAL;QACAC;QACAG;QACAI;QACAC;QACAN;QACAG;QACAC;QACAR;QACAG;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  flipMiddleware,\n  type FlipMiddlewareOptions,\n  hideMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  sizeMiddleware,\n} from '../adapters';\nimport { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';\nimport {\n  type ArrowOptions,\n  type Placement,\n  type PlacementWithAuto,\n  type UseFloatingMiddleware,\n} from '../types/common';\n\nexport interface UseFloatingMiddlewaresBootstrapOptions {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.\n   * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`\n   */\n  disableFlipMiddleware?: boolean;\n  /**\n   * Задаёт резервный вариант размещения по перпендикулярной оси.\n   */\n  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];\n  /**\n   * Отступ по главной оси.\n   */\n  offsetByMainAxis?: number;\n  /**\n   * Отступ по вспомогательной оси.\n   */\n  offsetByCrossAxis?: number;\n  arrowRef?: ArrowOptions['element'];\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент.\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Выставлять ширину равной target элементу.\n   */\n  sameWidth?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать).\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * Принудительно скрывает компонент если целевой элемент вышел за область видимости.\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport const useFloatingMiddlewaresBootstrap = ({\n  placement = 'bottom-start',\n  arrowRef = null,\n  arrow,\n  arrowHeight,\n  arrowPadding,\n  sameWidth,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  customMiddlewares,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection = 'end',\n}: UseFloatingMiddlewaresBootstrapOptions): {\n  middlewares: UseFloatingMiddleware[];\n  strictPlacement: Placement | undefined;\n} => {\n  return React.useMemo(() => {\n    const isAutoPlacement = !checkIsNotAutoPlacement(placement);\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetByCrossAxis,\n        mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis,\n      }),\n    ];\n\n    const shiftMiddlewareInstance = shiftMiddleware();\n\n    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs\n    if (isAutoPlacement) {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }),\n        shiftMiddlewareInstance,\n      );\n    } else if (!disableFlipMiddleware) {\n      const flipMiddlewareInstance = flipMiddleware({\n        crossAxis: 'alignment',\n        fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,\n      });\n\n      // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs\n      if (placement.includes('-')) {\n        middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);\n      } else {\n        middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);\n      }\n    } else {\n      middlewares.push(shiftMiddlewareInstance);\n    }\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return { middlewares, strictPlacement: isAutoPlacement ? undefined : placement };\n  }, [\n    placement,\n    offsetByCrossAxis,\n    arrow,\n    arrowHeight,\n    offsetByMainAxis,\n    disableFlipMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n    sameWidth,\n    customMiddlewares,\n    hideWhenReferenceHidden,\n    arrowRef,\n    arrowPadding,\n  ]);\n};\n"],"names":["React","arrowMiddleware","autoPlacementMiddleware","flipMiddleware","hideMiddleware","offsetMiddleware","shiftMiddleware","sizeMiddleware","checkIsNotAutoPlacement","getAutoPlacementAlign","useFloatingMiddlewaresBootstrap","placement","arrowRef","arrow","arrowHeight","arrowPadding","sameWidth","offsetByMainAxis","offsetByCrossAxis","customMiddlewares","hideWhenReferenceHidden","disableFlipMiddleware","flipMiddlewareFallbackAxisSideDirection","useMemo","isAutoPlacement","middlewares","crossAxis","mainAxis","shiftMiddlewareInstance","push","alignment","flipMiddlewareInstance","fallbackAxisSideDirection","includes","apply","rects","elements","Object","assign","floating","style","width","reference","element","padding","strictPlacement","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,EAEdC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QACT,iBAAc;AACrB,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,kBAAe;AAyD9E,OAAO,MAAMC,kCAAkC,CAAC,EAC9CC,YAAY,cAAc,EAC1BC,WAAW,IAAI,EACfC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,iBAAiB,EACjBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,0CAA0C,KAAK,EACR;IAIvC,OAAOtB,MAAMuB,OAAO,CAAC;QACnB,MAAMC,kBAAkB,CAAChB,wBAAwBG;QACjD,MAAMc,cAAuC;YAC3CpB,iBAAiB;gBACfqB,WAAWR;gBACXS,UAAUd,SAASC,cAAcG,mBAAmBH,cAAcG;YACpE;SACD;QAED,MAAMW,0BAA0BtB;QAEhC,4IAA4I;QAC5I,IAAIkB,iBAAiB;YACnBC,YAAYI,IAAI,CACd3B,wBAAwB;gBAAE4B,WAAWrB,sBAAsBE;YAAW,IACtEiB;QAEJ,OAAO,IAAI,CAACP,uBAAuB;YACjC,MAAMU,yBAAyB5B,eAAe;gBAC5CuB,WAAW;gBACXM,2BAA2BV;YAC7B;YAEA,qIAAqI;YACrI,IAAIX,UAAUsB,QAAQ,CAAC,MAAM;gBAC3BR,YAAYI,IAAI,CAACE,wBAAwBH;YAC3C,OAAO;gBACLH,YAAYI,IAAI,CAACD,yBAAyBG;YAC5C;QACF,OAAO;YACLN,YAAYI,IAAI,CAACD;QACnB;QAEA,IAAIZ,WAAW;YACbS,YAAYI,IAAI,CACdtB,eAAe;gBACb2B,OAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE;oBACvBC,OAAOC,MAAM,CAACF,SAASG,QAAQ,CAACC,KAAK,EAAE;wBACrCC,OAAO,GAAGN,MAAMO,SAAS,CAACD,KAAK,CAAC,EAAE,CAAC;oBACrC;gBACF;YACF;QAEJ;QAEA,IAAItB,mBAAmB;YACrBM,YAAYI,IAAI,IAAIV;QACtB;QAEA,qHAAqH;QACrH,IAAIN,OAAO;YACTY,YAAYI,IAAI,CACd5B,gBAAgB;gBACd0C,SAAS/B;gBACTgC,SAAS7B;YACX;QAEJ;QAEA,IAAIK,yBAAyB;YAC3BK,YAAYI,IAAI,CAACzB;QACnB;QAEA,OAAO;YAAEqB;YAAaoB,iBAAiBrB,kBAAkBsB,YAAYnC;QAAU;IACjF,GAAG;QACDA;QACAO;QACAL;QACAC;QACAG;QACAI;QACAC;QACAN;QACAG;QACAC;QACAR;QACAG;KACD;AACH,EAAE"}

package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.d.ts

@@ -10,6 +10,9 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
      * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
      */
     disableFlipMiddleware?: boolean;
+    /**
+     * Задаёт резервный вариант размещения по перпендикулярной оси.
+     */
     flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
     /**
      * Отступ по главной оси.

package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,qBAAqB,EAK3B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,sCAAsC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uCAAuC,CAAC,EAAE,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;IAC7F;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC5C;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,+BAA+B,GAAI,wNAa7C,sCAAsC,KAAG;IAC1C,WAAW,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,EAAE,SAAS,GAAG,SAAS,CAAC;CAsExC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,qBAAqB,EAK3B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,sCAAsC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,uCAAuC,CAAC,EAAE,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;IAC7F;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC5C;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,+BAA+B,GAAI,wNAa7C,sCAAsC,KAAG;IAC1C,WAAW,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,EAAE,SAAS,GAAG,SAAS,CAAC;CAgFxC,CAAC"}

package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { arrowMiddleware, autoPlacementMiddleware, flipMiddleware, hideMiddleware, offsetMiddleware, shiftMiddleware, sizeMiddleware } from "../adapters.js";
 import { checkIsNotAutoPlacement, getAutoPlacementAlign } from "../functions.js";
-export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', arrowRef = null, arrow, arrowHeight, arrowPadding, sameWidth, offsetByMainAxis = 0, offsetByCrossAxis = 0, customMiddlewares, hideWhenReferenceHidden, disableFlipMiddleware = false, flipMiddlewareFallbackAxisSideDirection = 'start' })=>{
+export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', arrowRef = null, arrow, arrowHeight, arrowPadding, sameWidth, offsetByMainAxis = 0, offsetByCrossAxis = 0, customMiddlewares, hideWhenReferenceHidden, disableFlipMiddleware = false, flipMiddlewareFallbackAxisSideDirection = 'end' })=>{
     return React.useMemo(()=>{
         const isAutoPlacement = !checkIsNotAutoPlacement(placement);
         const middlewares = [
@@ -10,18 +10,26 @@ export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', ar
                 mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis
             })
         ];
-        // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+        const shiftMiddlewareInstance = shiftMiddleware();
+        // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
         if (isAutoPlacement) {
             middlewares.push(autoPlacementMiddleware({
                 alignment: getAutoPlacementAlign(placement)
-            }));
+            }), shiftMiddlewareInstance);
         } else if (!disableFlipMiddleware) {
-            middlewares.push(flipMiddleware({
-                fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
-                crossAxis: false
-            }));
+            const flipMiddlewareInstance = flipMiddleware({
+                crossAxis: 'alignment',
+                fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection
+            });
+            // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs
+            if (placement.includes('-')) {
+                middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);
+            } else {
+                middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);
+            }
+        } else {
+            middlewares.push(shiftMiddlewareInstance);
         }
-        middlewares.push(shiftMiddleware());
         if (sameWidth) {
             middlewares.push(sizeMiddleware({
                 apply ({ rects, elements }) {
@@ -34,7 +42,7 @@ export const useFloatingMiddlewaresBootstrap = ({ placement = 'bottom-start', ar
         if (customMiddlewares) {
             middlewares.push(...customMiddlewares);
         }
-        // см. https://floating-ui.com/docs/arrow#order
+        // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,

package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  flipMiddleware,\n  type FlipMiddlewareOptions,\n  hideMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  sizeMiddleware,\n} from '../adapters';\nimport { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';\nimport {\n  type ArrowOptions,\n  type Placement,\n  type PlacementWithAuto,\n  type UseFloatingMiddleware,\n} from '../types/common';\n\nexport interface UseFloatingMiddlewaresBootstrapOptions {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.\n   * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`\n   */\n  disableFlipMiddleware?: boolean;\n  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];\n  /**\n   * Отступ по главной оси.\n   */\n  offsetByMainAxis?: number;\n  /**\n   * Отступ по вспомогательной оси.\n   */\n  offsetByCrossAxis?: number;\n  arrowRef?: ArrowOptions['element'];\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент.\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Выставлять ширину равной target элементу.\n   */\n  sameWidth?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать).\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * Принудительно скрывает компонент если целевой элемент вышел за область видимости.\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport const useFloatingMiddlewaresBootstrap = ({\n  placement = 'bottom-start',\n  arrowRef = null,\n  arrow,\n  arrowHeight,\n  arrowPadding,\n  sameWidth,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  customMiddlewares,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection = 'start',\n}: UseFloatingMiddlewaresBootstrapOptions): {\n  middlewares: UseFloatingMiddleware[];\n  strictPlacement: Placement | undefined;\n} => {\n  return React.useMemo(() => {\n    const isAutoPlacement = !checkIsNotAutoPlacement(placement);\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetByCrossAxis,\n        mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isAutoPlacement) {\n      middlewares.push(autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }));\n    } else if (!disableFlipMiddleware) {\n      middlewares.push(\n        flipMiddleware({\n          fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,\n          crossAxis: false,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return { middlewares, strictPlacement: isAutoPlacement ? undefined : placement };\n  }, [\n    placement,\n    offsetByCrossAxis,\n    arrow,\n    arrowHeight,\n    offsetByMainAxis,\n    disableFlipMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n    sameWidth,\n    customMiddlewares,\n    hideWhenReferenceHidden,\n    arrowRef,\n    arrowPadding,\n  ]);\n};\n"],"names":["React","arrowMiddleware","autoPlacementMiddleware","flipMiddleware","hideMiddleware","offsetMiddleware","shiftMiddleware","sizeMiddleware","checkIsNotAutoPlacement","getAutoPlacementAlign","useFloatingMiddlewaresBootstrap","placement","arrowRef","arrow","arrowHeight","arrowPadding","sameWidth","offsetByMainAxis","offsetByCrossAxis","customMiddlewares","hideWhenReferenceHidden","disableFlipMiddleware","flipMiddlewareFallbackAxisSideDirection","useMemo","isAutoPlacement","middlewares","crossAxis","mainAxis","push","alignment","fallbackAxisSideDirection","apply","rects","elements","Object","assign","floating","style","width","reference","element","padding","strictPlacement","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,EAEdC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QACT,iBAAc;AACrB,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,kBAAe;AAsD9E,OAAO,MAAMC,kCAAkC,CAAC,EAC9CC,YAAY,cAAc,EAC1BC,WAAW,IAAI,EACfC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,iBAAiB,EACjBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,0CAA0C,OAAO,EACV;IAIvC,OAAOtB,MAAMuB,OAAO,CAAC;QACnB,MAAMC,kBAAkB,CAAChB,wBAAwBG;QACjD,MAAMc,cAAuC;YAC3CpB,iBAAiB;gBACfqB,WAAWR;gBACXS,UAAUd,SAASC,cAAcG,mBAAmBH,cAAcG;YACpE;SACD;QAED,oEAAoE;QACpE,IAAIO,iBAAiB;YACnBC,YAAYG,IAAI,CAAC1B,wBAAwB;gBAAE2B,WAAWpB,sBAAsBE;YAAW;QACzF,OAAO,IAAI,CAACU,uBAAuB;YACjCI,YAAYG,IAAI,CACdzB,eAAe;gBACb2B,2BAA2BR;gBAC3BI,WAAW;YACb;QAEJ;QAEAD,YAAYG,IAAI,CAACtB;QAEjB,IAAIU,WAAW;YACbS,YAAYG,IAAI,CACdrB,eAAe;gBACbwB,OAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE;oBACvBC,OAAOC,MAAM,CAACF,SAASG,QAAQ,CAACC,KAAK,EAAE;wBACrCC,OAAO,GAAGN,MAAMO,SAAS,CAACD,KAAK,CAAC,EAAE,CAAC;oBACrC;gBACF;YACF;QAEJ;QAEA,IAAInB,mBAAmB;YACrBM,YAAYG,IAAI,IAAIT;QACtB;QAEA,+CAA+C;QAC/C,IAAIN,OAAO;YACTY,YAAYG,IAAI,CACd3B,gBAAgB;gBACduC,SAAS5B;gBACT6B,SAAS1B;YACX;QAEJ;QAEA,IAAIK,yBAAyB;YAC3BK,YAAYG,IAAI,CAACxB;QACnB;QAEA,OAAO;YAAEqB;YAAaiB,iBAAiBlB,kBAAkBmB,YAAYhC;QAAU;IACjF,GAAG;QACDA;QACAO;QACAL;QACAC;QACAG;QACAI;QACAC;QACAN;QACAG;QACAC;QACAR;QACAG;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../../../src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  flipMiddleware,\n  type FlipMiddlewareOptions,\n  hideMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  sizeMiddleware,\n} from '../adapters';\nimport { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';\nimport {\n  type ArrowOptions,\n  type Placement,\n  type PlacementWithAuto,\n  type UseFloatingMiddleware,\n} from '../types/common';\n\nexport interface UseFloatingMiddlewaresBootstrapOptions {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.\n   * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`\n   */\n  disableFlipMiddleware?: boolean;\n  /**\n   * Задаёт резервный вариант размещения по перпендикулярной оси.\n   */\n  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];\n  /**\n   * Отступ по главной оси.\n   */\n  offsetByMainAxis?: number;\n  /**\n   * Отступ по вспомогательной оси.\n   */\n  offsetByCrossAxis?: number;\n  arrowRef?: ArrowOptions['element'];\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент.\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Выставлять ширину равной target элементу.\n   */\n  sameWidth?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать).\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * Принудительно скрывает компонент если целевой элемент вышел за область видимости.\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport const useFloatingMiddlewaresBootstrap = ({\n  placement = 'bottom-start',\n  arrowRef = null,\n  arrow,\n  arrowHeight,\n  arrowPadding,\n  sameWidth,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  customMiddlewares,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection = 'end',\n}: UseFloatingMiddlewaresBootstrapOptions): {\n  middlewares: UseFloatingMiddleware[];\n  strictPlacement: Placement | undefined;\n} => {\n  return React.useMemo(() => {\n    const isAutoPlacement = !checkIsNotAutoPlacement(placement);\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetByCrossAxis,\n        mainAxis: arrow && arrowHeight ? offsetByMainAxis + arrowHeight : offsetByMainAxis,\n      }),\n    ];\n\n    const shiftMiddlewareInstance = shiftMiddleware();\n\n    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs\n    if (isAutoPlacement) {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }),\n        shiftMiddlewareInstance,\n      );\n    } else if (!disableFlipMiddleware) {\n      const flipMiddlewareInstance = flipMiddleware({\n        crossAxis: 'alignment',\n        fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,\n      });\n\n      // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs\n      if (placement.includes('-')) {\n        middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);\n      } else {\n        middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);\n      }\n    } else {\n      middlewares.push(shiftMiddlewareInstance);\n    }\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return { middlewares, strictPlacement: isAutoPlacement ? undefined : placement };\n  }, [\n    placement,\n    offsetByCrossAxis,\n    arrow,\n    arrowHeight,\n    offsetByMainAxis,\n    disableFlipMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n    sameWidth,\n    customMiddlewares,\n    hideWhenReferenceHidden,\n    arrowRef,\n    arrowPadding,\n  ]);\n};\n"],"names":["React","arrowMiddleware","autoPlacementMiddleware","flipMiddleware","hideMiddleware","offsetMiddleware","shiftMiddleware","sizeMiddleware","checkIsNotAutoPlacement","getAutoPlacementAlign","useFloatingMiddlewaresBootstrap","placement","arrowRef","arrow","arrowHeight","arrowPadding","sameWidth","offsetByMainAxis","offsetByCrossAxis","customMiddlewares","hideWhenReferenceHidden","disableFlipMiddleware","flipMiddlewareFallbackAxisSideDirection","useMemo","isAutoPlacement","middlewares","crossAxis","mainAxis","shiftMiddlewareInstance","push","alignment","flipMiddlewareInstance","fallbackAxisSideDirection","includes","apply","rects","elements","Object","assign","floating","style","width","reference","element","padding","strictPlacement","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,EAEdC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QACT,iBAAc;AACrB,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,kBAAe;AAyD9E,OAAO,MAAMC,kCAAkC,CAAC,EAC9CC,YAAY,cAAc,EAC1BC,WAAW,IAAI,EACfC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,iBAAiB,EACjBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,0CAA0C,KAAK,EACR;IAIvC,OAAOtB,MAAMuB,OAAO,CAAC;QACnB,MAAMC,kBAAkB,CAAChB,wBAAwBG;QACjD,MAAMc,cAAuC;YAC3CpB,iBAAiB;gBACfqB,WAAWR;gBACXS,UAAUd,SAASC,cAAcG,mBAAmBH,cAAcG;YACpE;SACD;QAED,MAAMW,0BAA0BtB;QAEhC,4IAA4I;QAC5I,IAAIkB,iBAAiB;YACnBC,YAAYI,IAAI,CACd3B,wBAAwB;gBAAE4B,WAAWrB,sBAAsBE;YAAW,IACtEiB;QAEJ,OAAO,IAAI,CAACP,uBAAuB;YACjC,MAAMU,yBAAyB5B,eAAe;gBAC5CuB,WAAW;gBACXM,2BAA2BV;YAC7B;YAEA,qIAAqI;YACrI,IAAIX,UAAUsB,QAAQ,CAAC,MAAM;gBAC3BR,YAAYI,IAAI,CAACE,wBAAwBH;YAC3C,OAAO;gBACLH,YAAYI,IAAI,CAACD,yBAAyBG;YAC5C;QACF,OAAO;YACLN,YAAYI,IAAI,CAACD;QACnB;QAEA,IAAIZ,WAAW;YACbS,YAAYI,IAAI,CACdtB,eAAe;gBACb2B,OAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE;oBACvBC,OAAOC,MAAM,CAACF,SAASG,QAAQ,CAACC,KAAK,EAAE;wBACrCC,OAAO,GAAGN,MAAMO,SAAS,CAACD,KAAK,CAAC,EAAE,CAAC;oBACrC;gBACF;YACF;QAEJ;QAEA,IAAItB,mBAAmB;YACrBM,YAAYI,IAAI,IAAIV;QACtB;QAEA,qHAAqH;QACrH,IAAIN,OAAO;YACTY,YAAYI,IAAI,CACd5B,gBAAgB;gBACd0C,SAAS/B;gBACTgC,SAAS7B;YACX;QAEJ;QAEA,IAAIK,yBAAyB;YAC3BK,YAAYI,IAAI,CAACzB;QACnB;QAEA,OAAO;YAAEqB;YAAaoB,iBAAiBrB,kBAAkBsB,YAAYnC;QAAU;IACjF,GAAG;QACDA;QACAO;QACAL;QACAC;QACAG;QACAI;QACAC;QACAN;QACAG;QACAC;QACAR;QACAG;KACD;AACH,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.4.1",
+  "version": "7.4.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -89,7 +89,7 @@
     "@vkontakte/icons": "^3.0.0",
     "@vkontakte/vkjs": "^2.0.1",
     "@vkontakte/vkui-date-fns-tz": "^0.0.4",
-    "@vkontakte/vkui-floating-ui": "^0.2.3",
+    "@vkontakte/vkui-floating-ui": "^0.2.5",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -27,6 +27,9 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
    * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
    */
   disableFlipMiddleware?: boolean;
+  /**
+   * Задаёт резервный вариант размещения по перпендикулярной оси.
+   */
   flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
   /**
    * Отступ по главной оси.
@@ -75,7 +78,7 @@ export const useFloatingMiddlewaresBootstrap = ({
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
-  flipMiddlewareFallbackAxisSideDirection = 'start',
+  flipMiddlewareFallbackAxisSideDirection = 'end',
 }: UseFloatingMiddlewaresBootstrapOptions): {
   middlewares: UseFloatingMiddleware[];
   strictPlacement: Placement | undefined;
@@ -89,19 +92,29 @@ export const useFloatingMiddlewaresBootstrap = ({
       }),
     ];
 
-    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    const shiftMiddlewareInstance = shiftMiddleware();
+
+    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
     if (isAutoPlacement) {
-      middlewares.push(autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }));
-    } else if (!disableFlipMiddleware) {
       middlewares.push(
-        flipMiddleware({
-          fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
-          crossAxis: false,
-        }),
+        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }),
+        shiftMiddlewareInstance,
       );
-    }
+    } else if (!disableFlipMiddleware) {
+      const flipMiddlewareInstance = flipMiddleware({
+        crossAxis: 'alignment',
+        fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
+      });
 
-    middlewares.push(shiftMiddleware());
+      // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs
+      if (placement.includes('-')) {
+        middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);
+      } else {
+        middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);
+      }
+    } else {
+      middlewares.push(shiftMiddlewareInstance);
+    }
 
     if (sameWidth) {
       middlewares.push(
@@ -119,7 +132,7 @@ export const useFloatingMiddlewaresBootstrap = ({
       middlewares.push(...customMiddlewares);
     }
 
-    // см. https://floating-ui.com/docs/arrow#order
+    // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order
     if (arrow) {
       middlewares.push(
         arrowMiddleware({