@schukai/monster 4.136.3 → 4.136.5

package/source/components/form/select.mjs

@@ -41,6 +41,7 @@ import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import {
 	findElementWithSelectorUpwards,
 	getDocument,
+	getWindow,
 } from "../../dom/util.mjs";
 import {
 	getDocumentTranslations,
@@ -69,6 +70,7 @@ import {
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
+	resolveClippingBoundaryElement,
 } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -76,9 +78,14 @@ import { TokenList } from "../../types/tokenlist.mjs";
 import "../datatable/pagination.mjs";
 
 export {
+	getDefaultSelectPopperPositionProfile,
 	getSelectionTemplate,
 	getSummaryTemplate,
 	popperElementSymbol,
+	resolveSelectPopperWidthConstraints,
+	resolveSelectListDimension,
+	resolveSelectVisibleRect,
+	resolveSelectViewportMetrics,
 	Select,
 };
 
@@ -129,6 +136,14 @@ const clearOptionEventHandler = Symbol("clearOptionEventHandler");
  * @type {Symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
+const resizeObserverFrameSymbol = Symbol("resizeObserverFrame");
+const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
+const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
+const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
+const windowResizeHandlerSymbol = Symbol("windowResizeHandler");
+const windowOrientationChangeHandlerSymbol = Symbol(
+	"windowOrientationChangeHandler",
+);
 
 /**
  * local symbol
@@ -343,6 +358,9 @@ const FILTER_POSITION_POPPER = "popper";
  * @type {string}
  */
 const FILTER_POSITION_INLINE = "inline";
+const SELECT_MIN_POPPER_WIDTH = 240;
+const SELECT_MAX_POPPER_HEIGHT = 500;
+const SELECT_VIEWPORT_PADDING = 12;
 
 /**
  * A select control that can be used to select o
@@ -1765,55 +1783,20 @@ function getTranslations() {
  */
 function lookupSelection() {
 	const self = this;
+	const IntersectionObserverImplementation =
+		getGlobal().IntersectionObserver;
+
+	if (!(IntersectionObserverImplementation instanceof Function)) {
+		runSelectionLookupWhenVisible(self);
+		return;
+	}
 
-	const observer = new IntersectionObserver(
+	const observer = new IntersectionObserverImplementation(
 		(entries, obs) => {
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
 					obs.disconnect();
-
-					setTimeout(() => {
-						const selection = self.getOption("selection");
-						if (
-							selection.length === 0 ||
-							self[isLoadingSymbol] ||
-							self[lazyLoadDoneSymbol]
-						) {
-							return;
-						}
-
-						let url = self.getOption("lookup.url") || self.getOption("url");
-						self[cleanupOptionsListSymbol] = false;
-
-						if (self.getOption("lookup.grouping") === true) {
-							const values = selection
-								.map((s) => s?.["value"])
-								.filter(
-									(value) => isEmptyLookupValue.call(self, value) === false,
-								);
-							if (values.length === 0) {
-								return;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: values.join(",") })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-							return;
-						}
-
-						for (const s of selection) {
-							const value = s?.["value"];
-							if (isEmptyLookupValue.call(self, value)) {
-								continue;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: value })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-						}
-					}, 100);
+					runSelectionLookupWhenVisible(self);
 				}
 			}
 		},
@@ -1823,6 +1806,49 @@ function lookupSelection() {
 	observer.observe(self);
 }
 
+function runSelectionLookupWhenVisible(self) {
+	setTimeout(() => {
+		const selection = self.getOption("selection");
+		if (
+			selection.length === 0 ||
+			self[isLoadingSymbol] ||
+			self[lazyLoadDoneSymbol]
+		) {
+			return;
+		}
+
+		let url = self.getOption("lookup.url") || self.getOption("url");
+		self[cleanupOptionsListSymbol] = false;
+
+		if (self.getOption("lookup.grouping") === true) {
+			const values = selection
+				.map((s) => s?.["value"])
+				.filter((value) => isEmptyLookupValue.call(self, value) === false);
+			if (values.length === 0) {
+				return;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: values.join(",") })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			return;
+		}
+
+		for (const s of selection) {
+			const value = s?.["value"];
+			if (isEmptyLookupValue.call(self, value)) {
+				continue;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: value })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+		}
+	}, 100);
+}
+
 /**
  * @private
  * @param {*} value
@@ -1967,21 +1993,8 @@ function initOptionsFromArguments() {
  * @private
  */
 function attachResizeObserver() {
-	// against flickering
-	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
-		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				this[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				delete this[timerCallbackSymbol];
-			}
-		}
-
-		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			updatePopper.call(this);
-			delete this[timerCallbackSymbol];
-		});
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		scheduleResizeObserverPopperUpdate.call(this);
 	});
 
 	let parent = this.parentNode;
@@ -1992,6 +2005,70 @@ function attachResizeObserver() {
 	if (parent instanceof HTMLElement) {
 		this[resizeObserverSymbol].observe(parent);
 	}
+
+	for (const element of [
+		this,
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+		this[popperFilterContainerElementSymbol],
+		this[optionsElementSymbol],
+		this[paginationElementSymbol],
+	]) {
+		if (element instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(element);
+		}
+	}
+
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	if (boundaryElement instanceof HTMLElement) {
+		this[resizeObserverSymbol].observe(boundaryElement);
+	}
+
+	const viewport = getGlobal().visualViewport;
+	const windowObject = getWindow();
+	this[visualViewportResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visualViewportScrollHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visibilityChangeHandlerSymbol] = () => {
+		if (document.visibilityState === "visible") {
+			updatePopper.call(this);
+		}
+	};
+	this[windowResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[windowOrientationChangeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+
+	if (viewport) {
+		viewport.addEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+		viewport.addEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+
+	document.addEventListener(
+		"visibilitychange",
+		this[visibilityChangeHandlerSymbol],
+	);
+	if (windowObject?.addEventListener instanceof Function) {
+		windowObject.addEventListener("resize", this[windowResizeHandlerSymbol]);
+		windowObject.addEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
 }
 
 /**
@@ -2001,6 +2078,83 @@ function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
+	cancelScheduledResizeObserverPopperUpdate.call(this);
+
+	const viewport = getGlobal().visualViewport;
+	if (
+		viewport &&
+		this[visualViewportResizeHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+	}
+	if (
+		viewport &&
+		this[visualViewportScrollHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+	if (this[visibilityChangeHandlerSymbol] instanceof Function) {
+		document.removeEventListener(
+			"visibilitychange",
+			this[visibilityChangeHandlerSymbol],
+		);
+	}
+	const windowObject = getWindow();
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowResizeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener("resize", this[windowResizeHandlerSymbol]);
+	}
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowOrientationChangeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
+}
+
+function scheduleResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	if (typeof this[resizeObserverFrameSymbol] === "number") {
+		return;
+	}
+
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => {
+					return globalObject.setTimeout(callback, 16);
+			  };
+
+	this[resizeObserverFrameSymbol] = schedule(() => {
+		delete this[resizeObserverFrameSymbol];
+		updatePopper.call(this);
+	});
+}
+
+function cancelScheduledResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	const frameId = this[resizeObserverFrameSymbol];
+	if (typeof frameId !== "number") {
+		return;
+	}
+
+	if (globalObject?.cancelAnimationFrame instanceof Function) {
+		globalObject.cancelAnimationFrame(frameId);
+	} else {
+		globalObject.clearTimeout(frameId);
+	}
+	delete this[resizeObserverFrameSymbol];
 }
 
 /**
@@ -2460,10 +2614,9 @@ function calcAndSetOptionsDimension() {
 	}
 
 	let visible = 0;
-	let optionHeight = 0;
+	const visibleOptionHeights = [];
 	const max = this.getOption("showMaxOptions", 10);
 
-	let scrollFlag = false;
 	for (const [, option] of Object.entries(options)) {
 		const computedStyle = getGlobal().getComputedStyle(option);
 		if (computedStyle.display === "none") continue;
@@ -2471,18 +2624,8 @@ function calcAndSetOptionsDimension() {
 		let h = option.getBoundingClientRect().height;
 		h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
 		h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
-		optionHeight += h;
-
+		visibleOptionHeights.push(h);
 		visible++;
-
-		if (visible > max) {
-			break;
-		}
-	}
-
-	if (visible > max) {
-		visible = max;
-		scrollFlag = true;
 	}
 
 	if (visible === 0) {
@@ -2527,61 +2670,299 @@ function calcAndSetOptionsDimension() {
 	let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
 	margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
 
-	let containerHeight = optionHeight + padding + margin;
-	const maxViewportHeight = Math.floor(getVisibleHeightLimit(this) / 3);
-	if (containerHeight > maxViewportHeight) {
-		containerHeight = maxViewportHeight;
-	}
+	const geometry = getSelectPopperGeometry.call(this);
+	const listDimension = resolveSelectListDimension({
+		visibleOptionHeights,
+		maxVisibleOptions: max,
+		availableHeight: geometry.availableHeight,
+		padding,
+		margin,
+	});
+	const widthConstraints = resolveSelectPopperWidthConstraints({
+		controlWidth: this[controlElementSymbol].getBoundingClientRect().width,
+		availableWidth: geometry.availableWidth,
+	});
 
-	container.style.height = `${containerHeight}px`;
+	container.style.height =
+		listDimension.desiredHeight > 0 ? `${listDimension.desiredHeight}px` : "0px";
+	container.style.maxHeight =
+		listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "0px";
+	container.style.overflowY = listDimension.overflowY;
 
-	if (scrollFlag === true) {
-		container.style.overflowY = "scroll";
+	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
+		widthConstraints.preferredWidth,
+	)}`;
+	if (
+		Number.isFinite(widthConstraints.maxWidth) &&
+		widthConstraints.maxWidth > 0
+	) {
+		this[popperElementSymbol].dataset.monsterPreferredMaxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}`;
+		this[popperElementSymbol].style.maxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}px`;
 	} else {
-		container.style.overflowY = "auto";
+		delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+		this[popperElementSymbol].style.removeProperty("maxWidth");
 	}
+	this[popperElementSymbol].style.width = "";
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	)}px`;
+	container.style.overflowX = "hidden";
 
-	const domRect = this[controlElementSymbol].getBoundingClientRect();
+	if (content instanceof HTMLElement) {
+		content.style.overflow = "hidden";
+		content.style.maxHeight =
+			listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "";
+	}
+}
 
-	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
-		domRect.width,
-	)}`;
-	this[popperElementSymbol].style.width = `${domRect.width}px`;
-	this[popperElementSymbol].style.minWidth = `${domRect.width}px`;
-	container.style.overflowX = "auto";
+function resolveSelectPopperPreferredWidth(controlWidth) {
+	return Math.max(Math.ceil(controlWidth), SELECT_MIN_POPPER_WIDTH);
+}
 
-	if (content instanceof HTMLElement) {
-		content.style.overflowX = "hidden";
-		content.style.overflowY = "hidden";
+function resolveSelectPopperWidthConstraints({
+	controlWidth = 0,
+	availableWidth = 0,
+}) {
+	const preferredWidth = resolveSelectPopperPreferredWidth(controlWidth);
+	const maxWidth = Math.max(0, availableWidth);
+
+	return {
+		preferredWidth,
+		maxWidth: maxWidth > 0 ? maxWidth : Infinity,
+	};
+}
+
+function resolveSelectListDimension({
+	visibleOptionHeights = [],
+	maxVisibleOptions = 10,
+	availableHeight,
+	padding = 0,
+	margin = 0,
+}) {
+	const visibleHeights = visibleOptionHeights.filter((height) => {
+		return Number.isFinite(height) && height > 0;
+	});
+	const naturalListHeight =
+		visibleHeights
+			.slice(0, Math.max(0, maxVisibleOptions))
+			.reduce((sum, height) => {
+				return sum + height;
+			}, 0) +
+		padding +
+		margin;
+	const fullListHeight =
+		visibleHeights.reduce((sum, height) => {
+			return sum + height;
+		}, 0) +
+		padding +
+		margin;
+	const maxHeight = resolveSelectListMaxHeight({
+		availableHeight,
+	});
+	const desiredHeight = Math.min(
+		maxHeight,
+		fullListHeight > 0 ? naturalListHeight : 0,
+	);
+
+	return {
+		desiredHeight,
+		fullHeight: fullListHeight,
+		maxHeight,
+		overflowY: fullListHeight > desiredHeight ? "auto" : "hidden",
+	};
+}
+
+function resolveSelectListMaxHeight(geometry) {
+	if (!geometry || !Number.isFinite(geometry.availableHeight)) {
+		return SELECT_MAX_POPPER_HEIGHT;
 	}
+
+	return Math.max(
+		0,
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	);
 }
 
-/**
- * @private
- */
-function getVisibleHeightLimit(startEl) {
-	let el = startEl;
-	const gcs = getGlobal().getComputedStyle;
+function getViewportMetrics() {
+	const globalObject = getGlobal();
+	const documentElement = globalObject.document?.documentElement;
+	const viewport = globalObject.visualViewport;
+	const metrics = resolveSelectViewportMetrics({
+		layoutWidth: Math.max(
+			documentElement?.clientWidth || 0,
+			globalObject.innerWidth || 0,
+		),
+		layoutHeight: Math.max(
+			documentElement?.clientHeight || 0,
+			globalObject.innerHeight || 0,
+		),
+		visualWidth: viewport?.width || 0,
+		visualHeight: viewport?.height || 0,
+		offsetLeft: viewport?.offsetLeft || 0,
+		offsetTop: viewport?.offsetTop || 0,
+		padding: SELECT_VIEWPORT_PADDING,
+	});
 
-	while (el) {
-		const style = gcs(el);
-		const overflowY = style.overflowY;
+	return {
+		width: metrics.width,
+		height: metrics.height,
+		left: metrics.left,
+		top: metrics.top,
+		padding: metrics.padding,
+	};
+}
 
-		const isScrollable = ["auto", "scroll", "hidden"].includes(overflowY);
+function resolveSelectViewportMetrics({
+	layoutWidth = 0,
+	layoutHeight = 0,
+	visualWidth = 0,
+	visualHeight = 0,
+	offsetLeft = 0,
+	offsetTop = 0,
+	padding = SELECT_VIEWPORT_PADDING,
+}) {
+	return {
+		width: Math.max(layoutWidth, visualWidth),
+		height: Math.max(layoutHeight, visualHeight),
+		left: offsetLeft,
+		top: offsetTop,
+		padding,
+	};
+}
 
-		if (isScrollable && el.clientHeight > 0) {
-			return el.clientHeight;
-		}
+function resolveSelectVisibleRect({
+	viewportMetrics,
+	boundaryRect = null,
+}) {
+	const viewportLeft = (viewportMetrics?.left || 0) + (viewportMetrics?.padding || 0);
+	const viewportTop = (viewportMetrics?.top || 0) + (viewportMetrics?.padding || 0);
+	const viewportRight =
+		(viewportMetrics?.left || 0) +
+		(viewportMetrics?.width || 0) -
+		(viewportMetrics?.padding || 0);
+	const viewportBottom =
+		(viewportMetrics?.top || 0) +
+		(viewportMetrics?.height || 0) -
+		(viewportMetrics?.padding || 0);
+
+	const left = boundaryRect
+		? Math.max(viewportLeft, boundaryRect.left)
+		: viewportLeft;
+	const top = boundaryRect
+		? Math.max(viewportTop, boundaryRect.top)
+		: viewportTop;
+	const right = boundaryRect
+		? Math.min(viewportRight, boundaryRect.right)
+		: viewportRight;
+	const bottom = boundaryRect
+		? Math.min(viewportBottom, boundaryRect.bottom)
+		: viewportBottom;
 
-		const root = el.getRootNode?.();
-		if (root instanceof ShadowRoot && root.host) {
-			el = root.host;
-		} else {
-			el = el.parentElement;
-		}
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top),
+	};
+}
+
+function getSelectPopperGeometry() {
+	const viewport = getViewportMetrics();
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	const controlRect = this[controlElementSymbol].getBoundingClientRect();
+	const boundaryRect =
+		boundaryElement instanceof HTMLElement
+			? boundaryElement.getBoundingClientRect()
+			: null;
+	const visibleRect = resolveSelectVisibleRect({
+		viewportMetrics: viewport,
+		boundaryRect,
+	});
+	const spaceAbove = Math.max(
+		0,
+		controlRect.top - visibleRect.top,
+	);
+	const spaceBelow = Math.max(
+		0,
+		visibleRect.bottom - controlRect.bottom,
+	);
+	const availableHeight = Math.max(spaceAbove, spaceBelow, 0);
+
+	return {
+		spaceAbove,
+		spaceBelow,
+		availableHeight,
+		availableWidth: visibleRect.width,
+		boundaryElement,
+	};
+}
+
+function getSelectPopperPositionOptions() {
+	const popperOptions = Object.assign({}, this.getOption("popper", {}));
+	const middleware = popperOptions.middleware;
+	const usesLegacyDefaultMiddleware =
+		isArray(middleware) &&
+		middleware.length === 2 &&
+		middleware[0] === "flip" &&
+		middleware[1] === "offset:1";
+
+	if (
+		!isArray(middleware) ||
+		middleware.length === 0 ||
+		usesLegacyDefaultMiddleware
+	) {
+		popperOptions.middleware = getDefaultSelectPopperPositionProfile().middleware;
 	}
 
-	return window.innerHeight;
+	if (
+		!isString(popperOptions.placement) ||
+		popperOptions.placement === "bottom"
+	) {
+		popperOptions.placement =
+			getDefaultSelectPopperPositionProfile().placement;
+	}
+
+	return popperOptions;
+}
+
+function getDefaultSelectPopperPositionProfile() {
+	return {
+		placement: "bottom-start",
+		middleware: ["flip", "offset:4", "shift:crossAxis", "size"],
+	};
+}
+
+function resetSelectPopperDimensionStyles() {
+	if (!(this[popperElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	delete this[popperElementSymbol].dataset.monsterPreferredWidth;
+	delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+	this[popperElementSymbol].style.removeProperty("width");
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.removeProperty("maxWidth");
+	this[popperElementSymbol].style.removeProperty("maxHeight");
+
+	const content = this[popperElementSymbol].querySelector('[part="content"]');
+	if (content instanceof HTMLElement) {
+		content.style.removeProperty("maxHeight");
+	}
+
+	if (this[optionsElementSymbol] instanceof HTMLElement) {
+		this[optionsElementSymbol].style.removeProperty("height");
+		this[optionsElementSymbol].style.removeProperty("maxHeight");
+	}
 }
 
 /**
@@ -3743,6 +4124,7 @@ function fetchData(url) {
  * @private
  */
 function hide() {
+	resetSelectPopperDimensionStyles.call(this);
 	closePositionedPopper(this[popperElementSymbol]);
 	setStatusOrRemoveBadges.call(this, "closed");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
@@ -3811,11 +4193,12 @@ function show() {
 		return;
 	}
 
+	resetSelectPopperDimensionStyles.call(this);
 	this[popperElementSymbol].style.visibility = "hidden";
 	openPositionedPopper(
 		this[controlElementSymbol],
 		this[popperElementSymbol],
-		this.getOption("popper", {}),
+		getSelectPopperPositionOptions.call(this),
 	);
 	setStatusOrRemoveBadges.call(this, "open");
 
@@ -4485,7 +4868,7 @@ function updatePopper() {
 			this,
 			this[controlElementSymbol],
 			this[popperElementSymbol],
-			this.getOption("popper", {}),
+			getSelectPopperPositionOptions.call(this),
 		);
 		requestAnimationFrame(() => {
 			refreshSelectPaginationLayout.call(this);