From 44d3443f66d93c1dc6720bddb05780bea7406982 Mon Sep 17 00:00:00 2001
From: Sergiu Cazac <kilobyte2007@gmail.com>
Date: Thu, 2 Jan 2025 20:26:22 +0200
Subject: [PATCH] feat(core): Allow using a CSS selector as breakpointsBase
 (#7818)

* Allow using a CSS selector as breakpointsBase

* Fix to use document selector instead of closets as the el can be inside shadow DOM

* add CSS Selector to types and use swiper.el

---------

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>
---
 src/core/breakpoints/setBreakpoint.mjs | 17 ++++++++++++++---
 src/types/swiper-options.d.ts          |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/core/breakpoints/setBreakpoint.mjs b/src/core/breakpoints/setBreakpoint.mjs
index 453f9ef47..cade40911 100644
--- a/src/core/breakpoints/setBreakpoint.mjs
+++ b/src/core/breakpoints/setBreakpoint.mjs
@@ -1,3 +1,4 @@
+import { getDocument } from 'ssr-window';
 import { extend } from '../../shared/utils.mjs';
 
 const isGridEnabled = (swiper, params) => {
@@ -9,9 +10,19 @@ export default function setBreakpoint() {
   const { realIndex, initialized, params, el } = swiper;
   const breakpoints = params.breakpoints;
   if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
-
-  // Get breakpoint for window width and update parameters
-  const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
+  const document = getDocument();
+
+  // Get breakpoint for window/container width and update parameters
+  const breakpointsBase =
+    params.breakpointsBase === 'window' || !params.breakpointsBase
+      ? params.breakpointsBase
+      : 'container';
+  const breakpointContainer =
+    ['window', 'container'].includes(params.breakpointsBase) || !params.breakpointsBase
+      ? swiper.el
+      : document.querySelector(params.breakpointsBase);
+
+  const breakpoint = swiper.getBreakpoint(breakpoints, breakpointsBase, breakpointContainer);
 
   if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
 
diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
index 7a9791093..ac7080116 100644
--- a/src/types/swiper-options.d.ts
+++ b/src/types/swiper-options.d.ts
@@ -741,7 +741,7 @@ export interface SwiperOptions {
    *
    * @default 'window'
    */
-  breakpointsBase?: 'window' | 'container';
+  breakpointsBase?: 'window' | 'container' | CSSSelector;
 
   // Observer
   /**