@public-ui/sample-react 2.2.15-rc.0 → 2.2.15

package/src/components/drawer/scrolled.tsx

@@ -0,0 +1,131 @@
+import type { AlignPropType } from '@public-ui/components';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerScrolled: FC = () => {
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+	const [align, setAlign] = useState<AlignPropType>('bottom');
+	const [useOverflowHandling, setUseOverflowHandling] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions and shows the correct way to handle overflow. Use the
+					&#34;Enable Overflow Handling&#34; toggle to see the difference between problematic behavior (content exceeding drawer bounds) and the proper solution
+					(overflow handling within the slot content).
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4 mb-4">
+				<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+				<KolInputCheckbox
+					_label="Enable Overflow Handling (Recommended)"
+					_checked={useOverflowHandling}
+					_on={{ onChange: (_, value) => setUseOverflowHandling(!!value) }}
+				/>
+			</div>
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer ref={drawerElement} _label="Scrollable Drawer" _align={align}>
+					{useOverflowHandling ? (
+						// ✅ Correct approach: Outer container with fixed dimensions and overflow handling
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '90vw' : undefined,
+								height: align === 'top' || align === 'bottom' ? '90vh' : undefined,
+								overflow: 'auto',
+								padding: '0',
+								border: '1px solid #999',
+							}}
+						>
+							<div
+								style={{
+									width: align === 'left' || align === 'right' ? '150vw' : undefined,
+									height: align === 'top' || align === 'bottom' ? '150vh' : undefined,
+									background:
+										'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+									backgroundSize: '20px 20px',
+									backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+									border: '2px dashed #ccc',
+									padding: '20px',
+									display: 'flex',
+									flexDirection: 'column',
+									gap: '20px',
+								}}
+							>
+								<p>✅ Content with proper overflow handling - scrollable within drawer bounds</p>
+								<div>
+									<h3>Large Content Area (Scrollable)</h3>
+									<p>
+										Container: {align === 'left' || align === 'right' ? '400px wide' : '90vw wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '90vh high' : '400px high'}
+									</p>
+									<p>
+										Content: {align === 'left' || align === 'right' ? '150vw wide' : '400px wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '150vh high' : '400px high'}
+									</p>
+									<p>
+										<strong>Overflow Handling:</strong> Enabled - Container has fixed size with overflow: auto
+									</p>
+									<p>
+										Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+										diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+										dolor sit amet.
+									</p>
+									<p>
+										With overflow handling enabled, this content scrolls properly within the drawer container. You can scroll horizontally/vertically to see all
+										content.
+									</p>
+									<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+										<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+									</div>
+								</div>
+							</div>
+						</div>
+					) : (
+						// ❌ Problematic approach: Content directly exceeds drawer bounds
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '150vw' : '400px',
+								height: align === 'top' || align === 'bottom' ? '150vh' : '400px',
+								background:
+									'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+								backgroundSize: '20px 20px',
+								backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+								border: '2px dashed #ccc',
+								padding: '20px',
+								display: 'flex',
+								flexDirection: 'column',
+								gap: '20px',
+							}}
+						>
+							<p>❌ Content exceeding drawer bounds - problematic behavior</p>
+							<div>
+								<h3>Large Content Area</h3>
+								<p>Width: {align === 'left' || align === 'right' ? '150vw (exceeds drawer width)' : '400px'}</p>
+								<p>Height: {align === 'top' || align === 'bottom' ? '150vh (exceeds drawer height)' : '400px'}</p>
+								<p>
+									<strong>Overflow Handling:</strong> Disabled - Content extends beyond drawer boundaries
+								</p>
+								<p>
+									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+									diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+									dolor sit amet.
+								</p>
+								<p>Without overflow handling, this content may extend beyond the drawer boundaries, causing layout issues.</p>
+								<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+									<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+								</div>
+							</div>
+						</div>
+					)}
+				</KolDrawer>
+
+				<KolButton _label="Open scrollable drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
+			</div>
+		</>
+	);
+};

package/src/components/spin/custom.css

@@ -1,26 +1,27 @@
 .loader {
-	width: 48px;
-	height: 48px;
-	border: 5px solid #333;
 	border-radius: 50%;
 	display: inline-block;
-	box-sizing: border-box;
 	position: relative;
+	box-sizing: border-box;
+	width: 48px;
+	height: 48px;
 	animation: pulse 1s linear infinite;
+	border: 5px solid #333;
 }
 .loader:after {
-	content: '';
-	position: absolute;
-	width: 48px;
-	height: 48px;
-	border: 5px solid #f00;
+	transform: translate(-50%, -50%);
 	border-radius: 50%;
 	display: inline-block;
-	box-sizing: border-box;
-	left: 50%;
+	position: absolute;
 	top: 50%;
-	transform: translate(-50%, -50%);
+	left: 50%;
+	box-sizing: border-box;
+	width: 48px;
+	height: 48px;
+
+	content: '';
 	animation: scaleUp 1s linear infinite;
+	border: 5px solid #f00;
 }
 
 @keyframes scaleUp {

package/src/main.ts

@@ -1,5 +1,16 @@
 import 'uno.css'; // https://github.com/antfu/unocss
 // App style
 import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations) */
+if (process.env.THEME_CSS) {
+	if (process.env.PLATFORM === 'win32') {
+		/* Add leading slash, required for ESBuild on Windows.
+			 Note: process.env.THEME_CSS must be used literally in the import(). Moving it to a constant breaks the import. */
+		process.env.THEME_CSS = `/${process.env.THEME_CSS}`;
+	}
+	import(/* @vite-ignore */ process.env.THEME_CSS);
+}
+
 // App
 import './react.main';

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -54,7 +54,13 @@ function TableHorizontalScrollbarAdvanced() {
 
 	return (
 		<>
-			<SampleDescription></SampleDescription>
+			<SampleDescription>
+				<p>
+					This advanced scenario demonstrates a complex layout with KolTable featuring horizontal scrollbar within a tab-based navigation system. The table
+					automatically calculates its minimum width based on column definitions and provides smooth horizontal scrolling when content exceeds the container
+					width. This example showcases real-world usage in a dashboard-like interface with sidebar navigation and tabbed content areas.
+				</p>
+			</SampleDescription>
 			<div className="mainlayout">
 				<aside className="nav-area">
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,13 +1,13 @@
 @use '../../@shared/mixins' as *;
 
 .mainlayout {
-	min-height: calc(100vh - to-rem(32));
-	width: 100%;
 	display: grid;
+	width: 100%;
+	min-height: calc(100vh - to-rem(32));
 	column-gap: to-rem(16);
+	grid-template-areas: 'nav content';
 	grid-template-columns: to-rem(400) calc(100% - to-rem(460));
 	grid-template-rows: 1fr;
-	grid-template-areas: 'nav content';
 
 	&>.nav-area {
 		grid-area: nav;

package/src/style.scss

@@ -7,6 +7,7 @@
 
 body {
 	margin: 0;
+
 	font-family: Verdana;
 	font-size: to-rem(16);
 	line-height: normal;
@@ -34,15 +35,14 @@ hr {
 	overflow: hidden;
 
 	white-space: nowrap;
-	clip: rect(0 0 0 0);
 	clip-path: inset(50%);
 }
 
 .black-background {
 	background-color: black;
 	display: flex;
-	flex-direction: column;
 	padding: to-rem(8);
+	flex-direction: column;
 }
 
 .w-image {
@@ -56,17 +56,18 @@ hr {
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: to-rem(360) calc(100% - to-rem(360));
-		min-height: 100vh;
 		height: 100%;
+		min-height: 100vh;
+		grid-template-columns: to-rem(360) calc(100% - to-rem(360));
 	}
 
 	.app-sidebar {
-		border-right: 1px solid gray;
 		position: relative;
 		z-index: 1;
+		border-right: 1px solid gray;
 
 		& .scrollable-container-wrapper {
+			display: flex;
 			position: fixed;
 			top: 0;
 			bottom: 0;
@@ -74,11 +75,10 @@ hr {
 			width: to-rem(330);
 			margin: to-rem(16);
 			flex-direction: column;
-			display: flex;
 
 			& .scrollable-container {
-				flex: 1 auto;
 				overflow: auto;
+				flex: 1 auto;
 			}
 		}
 	}

package/vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
 	define: {
 		'process.env.THEME_MODULE': JSON.stringify(process.env.THEME_MODULE || ''),
 		'process.env.THEME_EXPORT': JSON.stringify(process.env.THEME_EXPORT || ''),
+		'process.env.THEME_CSS': JSON.stringify(process.env.THEME_CSS || ''),
 		'process.env.ENABLE_I18N_OVERWRITING': JSON.stringify(process.env.ENABLE_I18N_OVERWRITING || ''),
 		'process.env.ENABLE_TAG_NAME_TRANSFORMER': JSON.stringify(process.env.ENABLE_TAG_NAME_TRANSFORMER || ''),
 		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
@@ -31,7 +32,11 @@ export default defineConfig({
 	server: {
 		port: 9191,
 		fs: {
-			allow: [path.resolve(__dirname), ...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : [])],
+			allow: [
+				path.resolve(__dirname),
+				...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : []),
+				...(process.env.THEME_CSS ? [path.resolve(process.env.THEME_CSS, '..')] : []),
+			],
 		},
 	},
 });

package/dist/assets/Collapsible-40f90188-DKuVZXNF.js

@@ -1,4 +0,0 @@
-import{_ as g}from"./tslib.es6-1173d062-BAJoBDh7.js";import{h as s,l as m,c as f}from"./index-CJwtOLCA.js";import{c as a}from"./clsx-09a06a12-BT_IL7Fz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const H=(d,r)=>{const{id:n,class:t,label:p,level:v=1,disabled:c,open:e,onClick:_,HeadingProps:i={},HeadingButtonProps:l={},ContentProps:o={}}=d,b=g(d,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),u=e?"remove":"add";return s("div",Object.assign({id:n,class:a("collapsible",{disabled:c===!0,open:e===!0},t)},b),s(m,{ref:i==null?void 0:i.ref,_label:"",_level:v,class:a("collapsible__heading",i==null?void 0:i.class)},s(f,{class:a("collapsible__heading-button",l==null?void 0:l.class),ref:l==null?void 0:l.ref,slot:"expert",_ariaControls:`${n}-control`,_ariaExpanded:e,_disabled:c,_icons:(l==null?void 0:l._icons)||`codicon codicon-${u}`,_label:p,_on:{onClick:_}})),s("div",{class:a("collapsible__wrapper",o==null?void 0:o.wrapperClass)},s("div",{class:a("collapsible__wrapper-animation",o==null?void 0:o.animationClass)},s("div",{"aria-hidden":e===!1?"true":void 0,class:a("collapsible__content",o==null?void 0:o.class),id:`${n}-control`},r))))};export{H as K};
-//# sourceMappingURL=Collapsible-40f90188-DKuVZXNF.js.map

package/dist/assets/align-floating-elements-f88f945f-DNJFvZ9i.js

@@ -1,4 +0,0 @@
-import{U as Wt}from"./index-CJwtOLCA.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const Y=Math.min,_=Math.max,nt=Math.round,et=Math.floor,S=t=>({x:t,y:t}),$t={left:"right",right:"left",bottom:"top",top:"bottom"},Bt={start:"end",end:"start"};function ft(t,e,n){return _(t,Y(e,n))}function Q(t,e){return typeof t=="function"?t(e):t}function z(t){return t.split("-")[0]}function Z(t){return t.split("-")[1]}function At(t){return t==="x"?"y":"x"}function dt(t){return t==="y"?"height":"width"}function B(t){return["top","bottom"].includes(z(t))?"y":"x"}function mt(t){return At(B(t))}function Mt(t,e,n){n===void 0&&(n=!1);const o=Z(t),i=mt(t),r=dt(i);let s=i==="x"?o===(n?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[r]>e.floating[r]&&(s=ot(s)),[s,ot(s)]}function Nt(t){const e=ot(t);return[at(t),e,at(e)]}function at(t){return t.replace(/start|end/g,e=>Bt[e])}function Vt(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:s;default:return[]}}function Ht(t,e,n,o){const i=Z(t);let r=Vt(z(t),n==="start",o);return i&&(r=r.map(s=>s+"-"+i),e&&(r=r.concat(r.map(at)))),r}function ot(t){return t.replace(/left|right|bottom|top/g,e=>$t[e])}function _t(t){return{top:0,right:0,bottom:0,left:0,...t}}function Ot(t){return typeof t!="number"?_t(t):{top:t,right:t,bottom:t,left:t}}function it(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function wt(t,e,n){let{reference:o,floating:i}=t;const r=B(e),s=mt(e),c=dt(s),l=z(e),f=r==="y",d=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,g=o[c]/2-i[c]/2;let a;switch(l){case"top":a={x:d,y:o.y-i.height};break;case"bottom":a={x:d,y:o.y+o.height};break;case"right":a={x:o.x+o.width,y:u};break;case"left":a={x:o.x-i.width,y:u};break;default:a={x:o.x,y:o.y}}switch(Z(e)){case"start":a[s]-=g*(n&&f?-1:1);break;case"end":a[s]+=g*(n&&f?-1:1);break}return a}const zt=async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:s}=n,c=r.filter(Boolean),l=await(s.isRTL==null?void 0:s.isRTL(e));let f=await s.getElementRects({reference:t,floating:e,strategy:i}),{x:d,y:u}=wt(f,o,l),g=o,a={},m=0;for(let h=0;h<c.length;h++){const{name:x,fn:p}=c[h],{x:w,y,data:b,reset:v}=await p({x:d,y:u,initialPlacement:o,placement:g,strategy:i,middlewareData:a,rects:f,platform:s,elements:{reference:t,floating:e}});d=w??d,u=y??u,a={...a,[x]:{...a[x],...b}},v&&m<=50&&(m++,typeof v=="object"&&(v.placement&&(g=v.placement),v.rects&&(f=v.rects===!0?await s.getElementRects({reference:t,floating:e,strategy:i}):v.rects),{x:d,y:u}=wt(f,g,l)),h=-1)}return{x:d,y:u,placement:g,strategy:i,middlewareData:a}};async function Rt(t,e){var n;e===void 0&&(e={});const{x:o,y:i,platform:r,rects:s,elements:c,strategy:l}=t,{boundary:f="clippingAncestors",rootBoundary:d="viewport",elementContext:u="floating",altBoundary:g=!1,padding:a=0}=Q(e,t),m=Ot(a),x=c[g?u==="floating"?"reference":"floating":u],p=it(await r.getClippingRect({element:(n=await(r.isElement==null?void 0:r.isElement(x)))==null||n?x:x.contextElement||await(r.getDocumentElement==null?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:d,strategy:l})),w=u==="floating"?{x:o,y:i,width:s.floating.width,height:s.floating.height}:s.reference,y=await(r.getOffsetParent==null?void 0:r.getOffsetParent(c.floating)),b=await(r.isElement==null?void 0:r.isElement(y))?await(r.getScale==null?void 0:r.getScale(y))||{x:1,y:1}:{x:1,y:1},v=it(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:w,offsetParent:y,strategy:l}):w);return{top:(p.top-v.top+m.top)/b.y,bottom:(v.bottom-p.bottom+m.bottom)/b.y,left:(p.left-v.left+m.left)/b.x,right:(v.right-p.right+m.right)/b.x}}const jt=t=>({name:"arrow",options:t,async fn(e){const{x:n,y:o,placement:i,rects:r,platform:s,elements:c,middlewareData:l}=e,{element:f,padding:d=0}=Q(t,e)||{};if(f==null)return{};const u=Ot(d),g={x:n,y:o},a=mt(i),m=dt(a),h=await s.getDimensions(f),x=a==="y",p=x?"top":"left",w=x?"bottom":"right",y=x?"clientHeight":"clientWidth",b=r.reference[m]+r.reference[a]-g[a]-r.floating[m],v=g[a]-r.reference[a],F=await(s.getOffsetParent==null?void 0:s.getOffsetParent(f));let R=F?F[y]:0;(!R||!await(s.isElement==null?void 0:s.isElement(F)))&&(R=c.floating[y]||r.floating[m]);const X=b/2-v/2,N=R/2-h[m]/2-1,k=Y(u[p],N),K=Y(u[w],N),V=k,G=R-h[m]-K,A=R/2-h[m]/2+X,H=ft(V,A,G),W=!l.arrow&&Z(i)!=null&&A!==H&&r.reference[m]/2-(A<V?k:K)-h[m]/2<0,C=W?A<V?A-V:A-G:0;return{[a]:g[a]+C,data:{[a]:H,centerOffset:A-H-C,...W&&{alignmentOffset:C}},reset:W}}}),It=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:s,initialPlacement:c,platform:l,elements:f}=e,{mainAxis:d=!0,crossAxis:u=!0,fallbackPlacements:g,fallbackStrategy:a="bestFit",fallbackAxisSideDirection:m="none",flipAlignment:h=!0,...x}=Q(t,e);if((n=r.arrow)!=null&&n.alignmentOffset)return{};const p=z(i),w=B(c),y=z(c)===c,b=await(l.isRTL==null?void 0:l.isRTL(f.floating)),v=g||(y||!h?[ot(c)]:Nt(c)),F=m!=="none";!g&&F&&v.push(...Ht(c,h,m,b));const R=[c,...v],X=await Rt(e,x),N=[];let k=((o=r.flip)==null?void 0:o.overflows)||[];if(d&&N.push(X[p]),u){const A=Mt(i,s,b);N.push(X[A[0]],X[A[1]])}if(k=[...k,{placement:i,overflows:N}],!N.every(A=>A<=0)){var K,V;const A=(((K=r.flip)==null?void 0:K.index)||0)+1,H=R[A];if(H&&(!(u==="alignment"?w!==B(H):!1)||k.every(T=>T.overflows[0]>0&&B(T.placement)===w)))return{data:{index:A,overflows:k},reset:{placement:H}};let W=(V=k.filter(C=>C.overflows[0]<=0).sort((C,T)=>C.overflows[1]-T.overflows[1])[0])==null?void 0:V.placement;if(!W)switch(a){case"bestFit":{var G;const C=(G=k.filter(T=>{if(F){const $=B(T.placement);return $===w||$==="y"}return!0}).map(T=>[T.placement,T.overflows.filter($=>$>0).reduce(($,kt)=>$+kt,0)]).sort((T,$)=>T[1]-$[1])[0])==null?void 0:G[0];C&&(W=C);break}case"initialPlacement":W=c;break}if(i!==W)return{reset:{placement:W}}}return{}}}};async function Yt(t,e){const{placement:n,platform:o,elements:i}=t,r=await(o.isRTL==null?void 0:o.isRTL(i.floating)),s=z(n),c=Z(n),l=B(n)==="y",f=["left","top"].includes(s)?-1:1,d=r&&l?-1:1,u=Q(e,t);let{mainAxis:g,crossAxis:a,alignmentAxis:m}=typeof u=="number"?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis||0,crossAxis:u.crossAxis||0,alignmentAxis:u.alignmentAxis};return c&&typeof m=="number"&&(a=c==="end"?m*-1:m),l?{x:a*d,y:g*f}:{x:g*f,y:a*d}}const qt=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:r,placement:s,middlewareData:c}=e,l=await Yt(e,t);return s===((n=c.offset)==null?void 0:n.placement)&&(o=c.arrow)!=null&&o.alignmentOffset?{}:{x:i+l.x,y:r+l.y,data:{...l,placement:s}}}}},Ut=function(t){return t===void 0&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:c={fn:x=>{let{x:p,y:w}=x;return{x:p,y:w}}},...l}=Q(t,e),f={x:n,y:o},d=await Rt(e,l),u=B(z(i)),g=At(u);let a=f[g],m=f[u];if(r){const x=g==="y"?"top":"left",p=g==="y"?"bottom":"right",w=a+d[x],y=a-d[p];a=ft(w,a,y)}if(s){const x=u==="y"?"top":"left",p=u==="y"?"bottom":"right",w=m+d[x],y=m-d[p];m=ft(w,m,y)}const h=c.fn({...e,[g]:a,[u]:m});return{...h,data:{x:h.x-n,y:h.y-o,enabled:{[g]:r,[u]:s}}}}}};function st(){return typeof window<"u"}function U(t){return Ct(t)?(t.nodeName||"").toLowerCase():"#document"}function O(t){var e;return(t==null||(e=t.ownerDocument)==null?void 0:e.defaultView)||window}function E(t){var e;return(e=(Ct(t)?t.ownerDocument:t.document)||window.document)==null?void 0:e.documentElement}function Ct(t){return st()?t instanceof Node||t instanceof O(t).Node:!1}function L(t){return st()?t instanceof Element||t instanceof O(t).Element:!1}function D(t){return st()?t instanceof HTMLElement||t instanceof O(t).HTMLElement:!1}function yt(t){return!st()||typeof ShadowRoot>"u"?!1:t instanceof ShadowRoot||t instanceof O(t).ShadowRoot}function tt(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=P(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function Xt(t){return["table","td","th"].includes(U(t))}function rt(t){return[":popover-open",":modal"].some(e=>{try{return t.matches(e)}catch{return!1}})}function gt(t){const e=ht(),n=L(t)?P(t):t;return["transform","translate","scale","rotate","perspective"].some(o=>n[o]?n[o]!=="none":!1)||(n.containerType?n.containerType!=="normal":!1)||!e&&(n.backdropFilter?n.backdropFilter!=="none":!1)||!e&&(n.filter?n.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(o=>(n.willChange||"").includes(o))||["paint","layout","strict","content"].some(o=>(n.contain||"").includes(o))}function Kt(t){let e=M(t);for(;D(e)&&!q(e);){if(gt(e))return e;if(rt(e))return null;e=M(e)}return null}function ht(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function q(t){return["html","body","#document"].includes(U(t))}function P(t){return O(t).getComputedStyle(t)}function ct(t){return L(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function M(t){if(U(t)==="html")return t;const e=t.assignedSlot||t.parentNode||yt(t)&&t.host||E(t);return yt(e)?e.host:e}function Tt(t){const e=M(t);return q(e)?t.ownerDocument?t.ownerDocument.body:t.body:D(e)&&tt(e)?e:Tt(e)}function J(t,e,n){var o;e===void 0&&(e=[]),n===void 0&&(n=!0);const i=Tt(t),r=i===((o=t.ownerDocument)==null?void 0:o.body),s=O(i);if(r){const c=ut(s);return e.concat(s,s.visualViewport||[],tt(i)?i:[],c&&n?J(c):[])}return e.concat(i,J(i,[],n))}function ut(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function Lt(t){const e=P(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=D(t),r=i?t.offsetWidth:n,s=i?t.offsetHeight:o,c=nt(n)!==r||nt(o)!==s;return c&&(n=r,o=s),{width:n,height:o,$:c}}function pt(t){return L(t)?t:t.contextElement}function I(t){const e=pt(t);if(!D(e))return S(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Lt(e);let s=(r?nt(n.width):n.width)/o,c=(r?nt(n.height):n.height)/i;return(!s||!Number.isFinite(s))&&(s=1),(!c||!Number.isFinite(c))&&(c=1),{x:s,y:c}}const Gt=S(0);function Pt(t){const e=O(t);return!ht()||!e.visualViewport?Gt:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function Jt(t,e,n){return e===void 0&&(e=!1),!n||e&&n!==O(t)?!1:e}function j(t,e,n,o){e===void 0&&(e=!1),n===void 0&&(n=!1);const i=t.getBoundingClientRect(),r=pt(t);let s=S(1);e&&(o?L(o)&&(s=I(o)):s=I(t));const c=Jt(r,n,o)?Pt(r):S(0);let l=(i.left+c.x)/s.x,f=(i.top+c.y)/s.y,d=i.width/s.x,u=i.height/s.y;if(r){const g=O(r),a=o&&L(o)?O(o):o;let m=g,h=ut(m);for(;h&&o&&a!==m;){const x=I(h),p=h.getBoundingClientRect(),w=P(h),y=p.left+(h.clientLeft+parseFloat(w.paddingLeft))*x.x,b=p.top+(h.clientTop+parseFloat(w.paddingTop))*x.y;l*=x.x,f*=x.y,d*=x.x,u*=x.y,l+=y,f+=b,m=O(h),h=ut(m)}}return it({width:d,height:u,x:l,y:f})}function xt(t,e){const n=ct(t).scrollLeft;return e?e.left+n:j(E(t)).left+n}function St(t,e,n){n===void 0&&(n=!1);const o=t.getBoundingClientRect(),i=o.left+e.scrollLeft-(n?0:xt(t,o)),r=o.top+e.scrollTop;return{x:i,y:r}}function Qt(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r=i==="fixed",s=E(o),c=e?rt(e.floating):!1;if(o===s||c&&r)return n;let l={scrollLeft:0,scrollTop:0},f=S(1);const d=S(0),u=D(o);if((u||!u&&!r)&&((U(o)!=="body"||tt(s))&&(l=ct(o)),D(o))){const a=j(o);f=I(o),d.x=a.x+o.clientLeft,d.y=a.y+o.clientTop}const g=s&&!u&&!r?St(s,l,!0):S(0);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-l.scrollLeft*f.x+d.x+g.x,y:n.y*f.y-l.scrollTop*f.y+d.y+g.y}}function Zt(t){return Array.from(t.getClientRects())}function te(t){const e=E(t),n=ct(t),o=t.ownerDocument.body,i=_(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=_(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let s=-n.scrollLeft+xt(t);const c=-n.scrollTop;return P(o).direction==="rtl"&&(s+=_(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:s,y:c}}function ee(t,e){const n=O(t),o=E(t),i=n.visualViewport;let r=o.clientWidth,s=o.clientHeight,c=0,l=0;if(i){r=i.width,s=i.height;const f=ht();(!f||f&&e==="fixed")&&(c=i.offsetLeft,l=i.offsetTop)}return{width:r,height:s,x:c,y:l}}function ne(t,e){const n=j(t,!0,e==="fixed"),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=D(t)?I(t):S(1),s=t.clientWidth*r.x,c=t.clientHeight*r.y,l=i*r.x,f=o*r.y;return{width:s,height:c,x:l,y:f}}function vt(t,e,n){let o;if(e==="viewport")o=ee(t,n);else if(e==="document")o=te(E(t));else if(L(e))o=ne(e,n);else{const i=Pt(t);o={x:e.x-i.x,y:e.y-i.y,width:e.width,height:e.height}}return it(o)}function Dt(t,e){const n=M(t);return n===e||!L(n)||q(n)?!1:P(n).position==="fixed"||Dt(n,e)}function oe(t,e){const n=e.get(t);if(n)return n;let o=J(t,[],!1).filter(c=>L(c)&&U(c)!=="body"),i=null;const r=P(t).position==="fixed";let s=r?M(t):t;for(;L(s)&&!q(s);){const c=P(s),l=gt(s);!l&&c.position==="fixed"&&(i=null),(r?!l&&!i:!l&&c.position==="static"&&!!i&&["absolute","fixed"].includes(i.position)||tt(s)&&!l&&Dt(t,s))?o=o.filter(d=>d!==s):i=c,s=M(s)}return e.set(t,o),o}function ie(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const s=[...n==="clippingAncestors"?rt(e)?[]:oe(e,this._c):[].concat(n),o],c=s[0],l=s.reduce((f,d)=>{const u=vt(e,d,i);return f.top=_(u.top,f.top),f.right=Y(u.right,f.right),f.bottom=Y(u.bottom,f.bottom),f.left=_(u.left,f.left),f},vt(e,c,i));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function se(t){const{width:e,height:n}=Lt(t);return{width:e,height:n}}function re(t,e,n){const o=D(e),i=E(e),r=n==="fixed",s=j(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const l=S(0);function f(){l.x=xt(i)}if(o||!o&&!r)if((U(e)!=="body"||tt(i))&&(c=ct(e)),o){const a=j(e,!0,r,e);l.x=a.x+e.clientLeft,l.y=a.y+e.clientTop}else i&&f();r&&!o&&i&&f();const d=i&&!o&&!r?St(i,c):S(0),u=s.left+c.scrollLeft-l.x-d.x,g=s.top+c.scrollTop-l.y-d.y;return{x:u,y:g,width:s.width,height:s.height}}function lt(t){return P(t).position==="static"}function bt(t,e){if(!D(t)||P(t).position==="fixed")return null;if(e)return e(t);let n=t.offsetParent;return E(t)===n&&(n=n.ownerDocument.body),n}function Et(t,e){const n=O(t);if(rt(t))return n;if(!D(t)){let i=M(t);for(;i&&!q(i);){if(L(i)&&!lt(i))return i;i=M(i)}return n}let o=bt(t,e);for(;o&&Xt(o)&&lt(o);)o=bt(o,e);return o&&q(o)&&lt(o)&&!gt(o)?n:o||Kt(t)||n}const ce=async function(t){const e=this.getOffsetParent||Et,n=this.getDimensions,o=await n(t.floating);return{reference:re(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function le(t){return P(t).direction==="rtl"}const fe={convertOffsetParentRelativeRectToViewportRelativeRect:Qt,getDocumentElement:E,getClippingRect:ie,getOffsetParent:Et,getElementRects:ce,getClientRects:Zt,getDimensions:se,getScale:I,isElement:L,isRTL:le};function Ft(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}function ae(t,e){let n=null,o;const i=E(t);function r(){var c;clearTimeout(o),(c=n)==null||c.disconnect(),n=null}function s(c,l){c===void 0&&(c=!1),l===void 0&&(l=1),r();const f=t.getBoundingClientRect(),{left:d,top:u,width:g,height:a}=f;if(c||e(),!g||!a)return;const m=et(u),h=et(i.clientWidth-(d+g)),x=et(i.clientHeight-(u+a)),p=et(d),y={rootMargin:-m+"px "+-h+"px "+-x+"px "+-p+"px",threshold:_(0,Y(1,l))||1};let b=!0;function v(F){const R=F[0].intersectionRatio;if(R!==l){if(!b)return s();R?s(!1,R):o=setTimeout(()=>{s(!1,1e-7)},1e3)}R===1&&!Ft(f,t.getBoundingClientRect())&&s(),b=!1}try{n=new IntersectionObserver(v,{...y,root:i.ownerDocument})}catch{n=new IntersectionObserver(v,y)}n.observe(t)}return s(!0),r}function xe(t,e,n,o){o===void 0&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:s=typeof ResizeObserver=="function",layoutShift:c=typeof IntersectionObserver=="function",animationFrame:l=!1}=o,f=pt(t),d=i||r?[...f?J(f):[],...J(e)]:[];d.forEach(p=>{i&&p.addEventListener("scroll",n,{passive:!0}),r&&p.addEventListener("resize",n)});const u=f&&c?ae(f,n):null;let g=-1,a=null;s&&(a=new ResizeObserver(p=>{let[w]=p;w&&w.target===f&&a&&(a.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame(()=>{var y;(y=a)==null||y.observe(e)})),n()}),f&&!l&&a.observe(f),a.observe(e));let m,h=l?j(t):null;l&&x();function x(){const p=j(t);h&&!Ft(h,p)&&n(),h=p,m=requestAnimationFrame(x)}return n(),()=>{var p;d.forEach(w=>{i&&w.removeEventListener("scroll",n),r&&w.removeEventListener("resize",n)}),u==null||u(),(p=a)==null||p.disconnect(),a=null,l&&cancelAnimationFrame(m)}}const ue=qt,de=Ut,me=It,ge=jt,he=(t,e,n)=>{const o=new Map,i={platform:fe,...n},r={...i.platform,_c:o};return zt(t,e,{...i,platform:r})},we=async({floatingElement:t,referenceElement:e,arrowElement:n,align:o="top"})=>{var i,r,s;if(Wt!=="test"){const c=[ue((i=n==null?void 0:n.offsetHeight)!==null&&i!==void 0?i:10),me(),de()];n&&c.push(ge({element:n}));const{x:l,y:f,middlewareData:d,placement:u}=await he(e,t,{placement:o,middleware:c,strategy:"fixed"});Object.assign(t.style,{left:`${l}px`,top:`${f}px`,visibility:"visible"}),n&&(!((r=d.arrow)===null||r===void 0)&&r.x?Object.assign(n.style,{left:`${d.arrow.x}px`,top:u==="bottom"?`${-n.offsetHeight/2}px`:"",bottom:u==="top"?`${-n.offsetHeight/2}px`:""}):!((s=d.arrow)===null||s===void 0)&&s.y&&Object.assign(n.style,{left:u==="right"?`${-n.offsetWidth/2}px`:"",right:u==="left"?`${-n.offsetWidth/2}px`:"",top:`${d.arrow.y}px`}))}};export{we as a,xe as b};
-//# sourceMappingURL=align-floating-elements-f88f945f-DNJFvZ9i.js.map