@kubit-ui-web/react-components 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/esm/components/popover/hooks/positioning/positionStyles.js

@@ -1 +1,198 @@
-import{DEFAULT_PLACEMENT as t}from"../../types/animation.js";const o=({edgePadding:o=0,isBodyAnchor:r=!0,placement:i=t,strategy:e,useFloatingUICoordinates:n=!1,x:a=0,y:s=0})=>{if(!r)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:e,right:"auto",top:`${s}px`,transform:"",transformOrigin:""};if(n)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:"fixed",right:"auto",top:`${s}px`,transformOrigin:"center bottom"};const x={bottom:{bottom:`${o}px`,boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:"auto",transform:"translateX(-50%)",transformOrigin:"center bottom"},"bottom-end":{bottom:`${o}px`,boxSizing:"border-box",left:"auto",position:"fixed",right:`${o}px`,top:"auto",transform:"none",transformOrigin:"right bottom"},"bottom-start":{bottom:`${o}px`,boxSizing:"border-box",left:`${o}px`,position:"fixed",right:"auto",top:"auto",transform:"none",transformOrigin:"left bottom"},center:{bottom:"auto",boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:"50%",transform:"translate(-50%, -50%)",transformOrigin:"center center"},defaultStyle:{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:e,right:"auto",top:`${s}px`},left:{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:"50%",transform:"translateY(-50%)",transformOrigin:"left center"},"left-end":{bottom:`${o}px`,boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:"auto",transform:"none",transformOrigin:"left bottom"},"left-start":{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:`${o}px`,transform:"none",transformOrigin:"left top"},right:{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:"50%",transform:"translateY(-50%)",transformOrigin:"right center"},"right-end":{bottom:`${o}px`,boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:"auto",transform:"none",transformOrigin:"right bottom"},"right-start":{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:`${o}px`,transform:"none",transformOrigin:"right top"},top:{bottom:"auto",boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:`${o}px`,transform:"translateX(-50%)",transformOrigin:"center top"},"top-end":{bottom:"auto",boxSizing:"border-box",left:"auto",position:"fixed",right:`${o}px`,top:`${o}px`,transform:"none",transformOrigin:"right top"},"top-start":{bottom:"auto",boxSizing:"border-box",left:`${o}px`,position:"fixed",right:"auto",top:`${o}px`,transform:"none",transformOrigin:"left top"}};return x[i]||x.defaultStyle},r=({edgePadding:r=0,hasCustomMiddlewares:i=!1,isBodyAnchor:e,middlewareStack:n=[],placement:a,ref:s,strategy:x,x:f=0,y:b=0})=>{if(s?.current)if(e?s.current.setAttribute("data-kbt-placement",a||t):s.current.setAttribute("data-kbt-placement",s.current.getAttribute("data-kbt-placement")||a||"bottom"),e){const t=n.some(t=>"body-auto-centering"===t.name),e=o({edgePadding:r,placement:a,strategy:x,useFloatingUICoordinates:i||t,x:f,y:b});Object.assign(s.current.style,e)}else{const t=o({edgePadding:r,isBodyAnchor:!1,placement:a,strategy:x,x:f,y:b});Object.assign(s.current.style,t)}};export{r as applyPositionStyles,o as getPositionStyles};
+import { DEFAULT_PLACEMENT } from "../../types/animation.js";
+const getPositionStyles = ({ edgePadding: t = 0, isBodyAnchor: n = !0, placement: r = DEFAULT_PLACEMENT, strategy: i, useFloatingUICoordinates: a = !1, x: o = 0, y: s = 0 }) => {
+	if (!n) return {
+		bottom: "auto",
+		boxSizing: "border-box",
+		left: `${o}px`,
+		position: i,
+		right: "auto",
+		top: `${s}px`,
+		transform: "",
+		transformOrigin: ""
+	};
+	if (a) return {
+		bottom: "auto",
+		boxSizing: "border-box",
+		left: `${o}px`,
+		position: "fixed",
+		right: "auto",
+		top: `${s}px`,
+		transformOrigin: "center bottom"
+	};
+	let c = {
+		bottom: {
+			bottom: `${t}px`,
+			boxSizing: "border-box",
+			left: "50%",
+			position: "fixed",
+			right: "auto",
+			top: "auto",
+			transform: "translateX(-50%)",
+			transformOrigin: "center bottom"
+		},
+		"bottom-end": {
+			bottom: `${t}px`,
+			boxSizing: "border-box",
+			left: "auto",
+			position: "fixed",
+			right: `${t}px`,
+			top: "auto",
+			transform: "none",
+			transformOrigin: "right bottom"
+		},
+		"bottom-start": {
+			bottom: `${t}px`,
+			boxSizing: "border-box",
+			left: `${t}px`,
+			position: "fixed",
+			right: "auto",
+			top: "auto",
+			transform: "none",
+			transformOrigin: "left bottom"
+		},
+		center: {
+			bottom: "auto",
+			boxSizing: "border-box",
+			left: "50%",
+			position: "fixed",
+			right: "auto",
+			top: "50%",
+			transform: "translate(-50%, -50%)",
+			transformOrigin: "center center"
+		},
+		defaultStyle: {
+			bottom: "auto",
+			boxSizing: "border-box",
+			left: `${o}px`,
+			position: i,
+			right: "auto",
+			top: `${s}px`
+		},
+		left: {
+			bottom: "auto",
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: `${t}px`,
+			position: "fixed",
+			right: "auto",
+			top: "50%",
+			transform: "translateY(-50%)",
+			transformOrigin: "left center"
+		},
+		"left-end": {
+			bottom: `${t}px`,
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: `${t}px`,
+			position: "fixed",
+			right: "auto",
+			top: "auto",
+			transform: "none",
+			transformOrigin: "left bottom"
+		},
+		"left-start": {
+			bottom: "auto",
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: `${t}px`,
+			position: "fixed",
+			right: "auto",
+			top: `${t}px`,
+			transform: "none",
+			transformOrigin: "left top"
+		},
+		right: {
+			bottom: "auto",
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: "auto",
+			position: "fixed",
+			right: `${t}px`,
+			top: "50%",
+			transform: "translateY(-50%)",
+			transformOrigin: "right center"
+		},
+		"right-end": {
+			bottom: `${t}px`,
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: "auto",
+			position: "fixed",
+			right: `${t}px`,
+			top: "auto",
+			transform: "none",
+			transformOrigin: "right bottom"
+		},
+		"right-start": {
+			bottom: "auto",
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			left: "auto",
+			position: "fixed",
+			right: `${t}px`,
+			top: `${t}px`,
+			transform: "none",
+			transformOrigin: "right top"
+		},
+		top: {
+			bottom: "auto",
+			boxSizing: "border-box",
+			left: "50%",
+			position: "fixed",
+			right: "auto",
+			top: `${t}px`,
+			transform: "translateX(-50%)",
+			transformOrigin: "center top"
+		},
+		"top-end": {
+			bottom: "auto",
+			boxSizing: "border-box",
+			left: "auto",
+			position: "fixed",
+			right: `${t}px`,
+			top: `${t}px`,
+			transform: "none",
+			transformOrigin: "right top"
+		},
+		"top-start": {
+			bottom: "auto",
+			boxSizing: "border-box",
+			left: `${t}px`,
+			position: "fixed",
+			right: "auto",
+			top: `${t}px`,
+			transform: "none",
+			transformOrigin: "left top"
+		}
+	};
+	return c[r] || c.defaultStyle;
+}, applyPositionStyles = ({ edgePadding: e = 0, hasCustomMiddlewares: n = !1, isBodyAnchor: r, middlewareStack: i = [], placement: a, ref: o, strategy: s, x: c = 0, y: l = 0 }) => {
+	if (o?.current) if (r ? o.current.setAttribute("data-kbt-placement", a || "center") : o.current.setAttribute("data-kbt-placement", o.current.getAttribute("data-kbt-placement") || a || "bottom"), r) {
+		let r = i.some((e) => e.name === "body-auto-centering"), u = getPositionStyles({
+			edgePadding: e,
+			placement: a,
+			strategy: s,
+			useFloatingUICoordinates: n || r,
+			x: c,
+			y: l
+		});
+		Object.assign(o.current.style, u);
+	} else {
+		let n = getPositionStyles({
+			edgePadding: e,
+			isBodyAnchor: !1,
+			placement: a,
+			strategy: s,
+			x: c,
+			y: l
+		});
+		Object.assign(o.current.style, n);
+	}
+};
+export { applyPositionStyles };

package/dist/esm/components/popover/hooks/positioning/types.js

@@ -1 +1,7 @@
-const t={bottom:"top",left:"right",right:"left",top:"bottom"};export{t as ArrowPositions};
+const ArrowPositions = {
+	bottom: "top",
+	left: "right",
+	right: "left",
+	top: "bottom"
+};
+export { ArrowPositions };

package/dist/esm/components/popover/hooks/usePopoverInteractions.js

@@ -1 +1,31 @@
-import{useMemo as e,useCallback as o,useEffect as t}from"react";import{ESCAPE as r}from"../../../lib/constants/keyboardKeys/keyboardKeys.js";import{useClickOutside as s}from"../../../lib/hooks/useClickOutside/useClickOutside.js";import{isKeyPressed as n}from"../../../lib/utils/keyboard/keyboard.js";const i=({disableClickOverlayClose:i=!1,disableEscapeClose:l=!1,isVisible:a,onClose:c,popoverRef:d,preventCloseOnClickElements:k=[]})=>{const u=e(()=>k.filter(Boolean),[k]),m=o(e=>{if(!a||i)return;const o=e.target;d.current?.contains(o)||u.some(e=>e.contains(o))||c?.()},[a,i,d,u,c]);return s(d,m,u),t(()=>{if(!a)return;const e=e=>{n(e.key,...r.key)&&(e.preventDefault(),e.stopPropagation(),l||c?.())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[l,a,c]),{handleClickOutside:m}};export{i as usePopoverInteractions};
+import { ESCAPE } from "../../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../../lib/utils/keyboard/keyboard.js";
+import { useClickOutside } from "../../../lib/hooks/useClickOutside/useClickOutside.js";
+import { useCallback, useEffect, useMemo } from "react";
+const usePopoverInteractions = ({ disableClickOverlayClose: r = !1, disableEscapeClose: i = !1, isVisible: a, onClose: o, popoverRef: s, preventCloseOnClickElements: c = [] }) => {
+	let l = useMemo(() => c.filter(Boolean), [c]), u = useCallback((e) => {
+		if (!a || r) return;
+		let t = e.target;
+		s.current?.contains(t) || l.some((e) => e.contains(t)) || o?.();
+	}, [
+		a,
+		r,
+		s,
+		l,
+		o
+	]);
+	return useClickOutside(s, u, l), useEffect(() => {
+		if (!a) return;
+		let n = (n) => {
+			isKeyPressed(n.key, ...ESCAPE.key) && (n.preventDefault(), n.stopPropagation(), i || o?.());
+		};
+		return document.addEventListener("keydown", n), () => {
+			document.removeEventListener("keydown", n);
+		};
+	}, [
+		i,
+		a,
+		o
+	]), { handleClickOutside: u };
+};
+export { usePopoverInteractions };

package/dist/esm/components/popover/hooks/usePopoverLifecycle.js

@@ -1 +1,61 @@
-import{useRef as e,useState as r,useCallback as o,useEffect as n}from"react";import{useScrollBlock as l}from"../../../lib/hooks/useScrollBlock/useScrollBlock.js";import{convertDurationToNumber as t}from"../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.js";import{focusFirstDescendant as s}from"../../../lib/utils/focusHandlers/focusHandlers.js";import{syncInnerAndForwardedRef as c}from"../../../lib/utils/refs/syncRefs.js";const u=({animationExitDuration:u=200,disableAnimations:i,disableAutoFocusFirstDescendant:a=!1,disableAutoFocusFirstDescendantAfterClose:m=!0,disableRestoreFocusAfterClose:d=!1,disableScrollBackground:f=!1,open:p=!1,popoverContainerRef:b,preventScrollOnCloseFocus:S=!1})=>{const w=e(null),v=e(!1),R=e(null),k=e(null),[F,A]=r(p),[C,D]=r(!1),j=t(u),{allowScroll:T,blockScroll:h}=l(),B=o(()=>{!a&&w.current&&s({element:w.current,preventScroll:!0})},[a]),g=o(()=>{d?m||s({element:document.body}):k.current?.focus({preventScroll:S})},[d,S,m]);n(()=>{p&&(k.current=document.activeElement,A(!0),D(!1))},[p]),n(()=>(!p&&F&&(i?(g(),A(!1),D(!1)):(D(!0),R.current=window.setTimeout(()=>{g(),A(!1),D(!1)},j))),()=>{null!==R.current&&(window.clearTimeout(R.current),R.current=null)}),[p,F,i,j,g]);const x=o(e=>{w.current=e,B(),f&&!v.current&&(v.current=!0,h({elementsToOmit:[w.current]}))},[h,B,f]),y=o(()=>{v.current&&T(),w.current=null},[T]);return{handleInnerRef:o(e=>{e?x(e):y(),c({forwardedRef:b,innerRef:w})},[b,y,x]),isClosing:C,isVisible:F,popoverRef:w}};export{u as usePopoverLifecycle};
+import { useScrollBlock } from "../../../lib/hooks/useScrollBlock/useScrollBlock.js";
+import { syncInnerAndForwardedRef } from "../../../lib/utils/refs/syncRefs.js";
+import { focusFirstDescendant } from "../../../lib/utils/focusHandlers/focusHandlers.js";
+import { convertDurationToNumber } from "../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+const usePopoverLifecycle = ({ animationExitDuration: t = 200, disableAnimations: n, disableAutoFocusFirstDescendant: r = !1, disableAutoFocusFirstDescendantAfterClose: i = !0, disableRestoreFocusAfterClose: a = !1, disableScrollBackground: o = !1, open: s = !1, popoverContainerRef: c, preventScrollOnCloseFocus: l = !1 }) => {
+	let u = useRef(null), d = useRef(!1), f = useRef(null), p = useRef(null), [m, h] = useState(s), [g, _] = useState(!1), v = convertDurationToNumber(t), { allowScroll: y, blockScroll: b } = useScrollBlock(), x = useCallback(() => {
+		!r && u.current && focusFirstDescendant({
+			element: u.current,
+			preventScroll: !0
+		});
+	}, [r]), S = useCallback(() => {
+		if (!a) {
+			p.current?.focus({ preventScroll: l });
+			return;
+		}
+		i || focusFirstDescendant({ element: document.body });
+	}, [
+		a,
+		l,
+		i
+	]);
+	useEffect(() => {
+		s && (p.current = document.activeElement, h(!0), _(!1));
+	}, [s]), useEffect(() => (!s && m && (n ? (S(), h(!1), _(!1)) : (_(!0), f.current = window.setTimeout(() => {
+		S(), h(!1), _(!1);
+	}, v))), () => {
+		f.current !== null && (window.clearTimeout(f.current), f.current = null);
+	}), [
+		s,
+		m,
+		n,
+		v,
+		S
+	]);
+	let C = useCallback((e) => {
+		u.current = e, x(), o && !d.current && (d.current = !0, b({ elementsToOmit: [u.current] }));
+	}, [
+		b,
+		x,
+		o
+	]), w = useCallback(() => {
+		d.current && y(), u.current = null;
+	}, [y]);
+	return {
+		handleInnerRef: useCallback((e) => {
+			e ? C(e) : w(), syncInnerAndForwardedRef({
+				forwardedRef: c,
+				innerRef: u
+			});
+		}, [
+			c,
+			w,
+			C
+		]),
+		isClosing: g,
+		isVisible: m,
+		popoverRef: u
+	};
+};
+export { usePopoverLifecycle };

package/dist/esm/components/popover/hooks/usePopoverPositioning.js

@@ -1 +1,126 @@
-import{computePosition as e,autoUpdate as t}from"@floating-ui/dom";import{useRef as r,useEffect as n,useCallback as i}from"react";import{positionArrow as a}from"./positioning/arrowPositionStyles.js";import{getMiddlewareStack as o,calculateMainAxisOffset as s}from"./positioning/middlewareUtils.js";import{determinePositioningConfig as c}from"./positioning/positionCalculation.js";import{applyPositionStyles as d}from"./positioning/positionStyles.js";const l=({anchorElement:l,arrowStyles:m,isVisible:u,middlewareOptions:p={},middlewares:f=[],placement:w,ref:h,strategy:g})=>{const{edgePadding:y=0,hideWhenDetached:S,offsetDistance:D}=p,b=r(document.body),P=r(null),E=r({anchorElement:l,arrowStyles:m,isVisible:u,middlewareOptions:{edgePadding:y,hideWhenDetached:S,offsetDistance:D},middlewares:f,placement:w,ref:h,strategy:g});n(()=>{E.current={anchorElement:l,arrowStyles:m,isVisible:u,middlewareOptions:{edgePadding:y,hideWhenDetached:S,offsetDistance:D},middlewares:f,placement:w,ref:h,strategy:g}},[l,w,D,y,S,f,g,u,h,m]);const A=i(()=>h?.current&&u&&m?(P.current=h.current.querySelector('[data-kbt-id="popover-arrow"]'),P.current):null,[h,u,m]);n(()=>{const e=()=>{!A()&&u&&m&&h?.current&&requestAnimationFrame(e)};e()},[A,u,m]);const k=i((e,t)=>e&&t?.current&&document.body.contains(t.current),[]),O=i((e,t,r,n,i,o,s,c,l,u,p,f,w,h=[],g=[])=>{e?.current&&(d({edgePadding:s,hasCustomMiddlewares:h.length>0,isBodyAnchor:t,middlewareStack:g,placement:r,ref:e,strategy:o,x:n,y:i}),t||e.current.setAttribute("data-kbt-placement",u),a(!!m,c,l,u,p,f),w?.())},[m]),W=i((e,t,r,n,i,a,c)=>{const d=s({arrowSize:t,hasArrow:!!m,offsetDistance:e}),l=P.current;return{arrowElement:l,middlewareStack:o({arrowElement:l,customMiddlewares:a,edgePadding:n,hideWhenDetached:c?.hideWhenDetached,isBodyAnchor:r,mainAxisOffset:d,offsetDistance:e,placement:i})}},[m]),j=i((e,t,r,n,i,a,o,s,c,d,l,m,u,p=[],f=[])=>{const w=t.hide?.referenceHidden||t.hide?.escaped;e.current&&(e.current.style.opacity=w?"0":"",e.current.style.pointerEvents=w?"none":""),w||O(e,r,n,i,a,o,s,c,t,d,l,m,u,p,f)},[O]),x=i(async()=>{const{anchorElement:t,arrowStyles:r,middlewareOptions:n,middlewares:i,onPositioned:a,placement:o,ref:s,strategy:d}=E.current,l=n?.offsetDistance,m=n?.edgePadding??8,u=r?.size||0,p=t||b.current;if(!s?.current||!k(p,s))return;const f=p===document.body,{arrowElement:w,middlewareStack:h}=W(l,u,f,m,o,i,n||{}),{actualPlacement:g,autoStrategy:y}=c(f,d,o),S="center"===g?"top":g,D=await e(p,s.current,{middleware:h,placement:S,strategy:y}),{middlewareData:P,placement:A,x:O,y:x}=D;j(s,P,f,g,O,x,d,m,w,A,l,u,a,i,h)},[]);n(()=>{if(!u||!h?.current)return;x();const e=l??b.current;let r=()=>{};return r=t(e,h.current,x,{ancestorResize:!0,ancestorScroll:!0,animationFrame:!1,elementResize:!0}),()=>{r()}},[u,l,x])};export{l as usePopoverPositioning};
+import { positionArrow } from "./positioning/arrowPositionStyles.js";
+import { calculateMainAxisOffset, getMiddlewareStack } from "./positioning/middlewareUtils.js";
+import { determinePositioningConfig } from "./positioning/positionCalculation.js";
+import { applyPositionStyles } from "./positioning/positionStyles.js";
+import { useCallback, useEffect, useRef } from "react";
+import { autoUpdate, computePosition } from "@floating-ui/dom";
+const usePopoverPositioning = ({ anchorElement: u, arrowStyles: d, isVisible: f, middlewareOptions: p = {}, middlewares: m = [], placement: h, ref: g, strategy: _ }) => {
+	let { edgePadding: v = 0, hideWhenDetached: y, offsetDistance: b } = p, x = useRef(document.body), S = useRef(null), C = useRef({
+		anchorElement: u,
+		arrowStyles: d,
+		isVisible: f,
+		middlewareOptions: {
+			edgePadding: v,
+			hideWhenDetached: y,
+			offsetDistance: b
+		},
+		middlewares: m,
+		placement: h,
+		ref: g,
+		strategy: _
+	});
+	useEffect(() => {
+		C.current = {
+			anchorElement: u,
+			arrowStyles: d,
+			isVisible: f,
+			middlewareOptions: {
+				edgePadding: v,
+				hideWhenDetached: y,
+				offsetDistance: b
+			},
+			middlewares: m,
+			placement: h,
+			ref: g,
+			strategy: _
+		};
+	}, [
+		u,
+		h,
+		b,
+		v,
+		y,
+		m,
+		_,
+		f,
+		g,
+		d
+	]);
+	let w = useCallback(() => g?.current && f && d ? (S.current = g.current.querySelector("[data-kbt-id=\"popover-arrow\"]"), S.current) : null, [
+		g,
+		f,
+		d
+	]);
+	useEffect(() => {
+		let e = () => {
+			!w() && f && d && g?.current && requestAnimationFrame(e);
+		};
+		e();
+	}, [
+		w,
+		f,
+		d
+	]);
+	let T = useCallback((e, t) => e && t?.current && document.body.contains(t.current), []), E = useCallback((t, n, r, a, o, s, c, l, u, f, p, m, h, g = [], _ = []) => {
+		t?.current && (applyPositionStyles({
+			edgePadding: c,
+			hasCustomMiddlewares: g.length > 0,
+			isBodyAnchor: n,
+			middlewareStack: _,
+			placement: r,
+			ref: t,
+			strategy: s,
+			x: a,
+			y: o
+		}), n || t.current.setAttribute("data-kbt-placement", f), positionArrow(!!d, l, u, f, p, m), h?.());
+	}, [d]), D = useCallback((e, r, i, a, o, s, c) => {
+		let l = calculateMainAxisOffset({
+			arrowSize: r,
+			hasArrow: !!d,
+			offsetDistance: e
+		}), u = S.current;
+		return {
+			arrowElement: u,
+			middlewareStack: getMiddlewareStack({
+				arrowElement: u,
+				customMiddlewares: s,
+				edgePadding: a,
+				hideWhenDetached: c?.hideWhenDetached,
+				isBodyAnchor: i,
+				mainAxisOffset: l,
+				offsetDistance: e,
+				placement: o
+			})
+		};
+	}, [d]), O = useCallback((e, t, n, r, i, a, o, s, c, l, u, d, f, p = [], m = []) => {
+		let h = t.hide?.referenceHidden || t.hide?.escaped;
+		e.current && (e.current.style.opacity = h ? "0" : "", e.current.style.pointerEvents = h ? "none" : ""), h || E(e, n, r, i, a, o, s, c, t, l, u, d, f, p, m);
+	}, [E]), k = useCallback(async () => {
+		let { anchorElement: e, arrowStyles: t, middlewareOptions: n, middlewares: i, onPositioned: a, placement: o, ref: s, strategy: c } = C.current, u = n?.offsetDistance, d = n?.edgePadding ?? 8, f = t?.size || 0, p = e || x.current;
+		if (!s?.current || !T(p, s)) return;
+		let m = p === document.body, { arrowElement: h, middlewareStack: g } = D(u, f, m, d, o, i, n || {}), { actualPlacement: _, autoStrategy: v } = determinePositioningConfig(m, c, o), { middlewareData: y, placement: b, x: S, y: w } = await computePosition(p, s.current, {
+			middleware: g,
+			placement: _ === "center" ? "top" : _,
+			strategy: v
+		});
+		O(s, y, m, _, S, w, c, d, h, b, u, f, a, i, g);
+	}, []);
+	useEffect(() => {
+		if (!f || !g?.current) return;
+		k();
+		let e = u ?? x.current, t = () => {};
+		return t = autoUpdate(e, g.current, k, {
+			ancestorResize: !0,
+			ancestorScroll: !0,
+			animationFrame: !1,
+			elementResize: !0
+		}), () => {
+			t();
+		};
+	}, [
+		f,
+		u,
+		k
+	]);
+};
+export { usePopoverPositioning };

package/dist/esm/components/popover/popover.js

@@ -1 +1,61 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{useTrapFocus as i}from"../../lib/hooks/useTrapFocus/useTrapFocus.js";import{usePopoverInteractions as r}from"./hooks/usePopoverInteractions.js";import{usePopoverLifecycle as l}from"./hooks/usePopoverLifecycle.js";import{usePopoverPositioning as t}from"./hooks/usePopoverPositioning.js";import{PopoverStandAlone as a}from"./popoverStandAlone.js";const n=s(({additionalClasses:s,anchorElement:n,animationExitDuration:c=200,disableAnimations:p=!1,disableAutoFocusFirstDescendant:d=!1,disableAutoFocusFirstDescendantAfterClose:m=!0,disableClickOverlayClose:u=!1,disableEscapeClose:C=!1,disableRestoreFocusAfterClose:b=!1,disableScrollBackground:f=!1,disableTrapFocus:F=!1,middlewareOptions:v,middlewares:A,onClose:k,open:O=!1,popoverContainerRef:E,preventCloseOnClickElements:h=[],preventScrollOnCloseFocus:R=!1,strategy:g="absolute",...y},j)=>{const w=p||!!n,S=o({additionalClassNames:s,component:"POPOVER"}),{handleInnerRef:D,isClosing:P,isVisible:V,popoverRef:x}=l({animationExitDuration:c,disableAnimations:w,disableAutoFocusFirstDescendant:d,disableAutoFocusFirstDescendantAfterClose:m,disableRestoreFocusAfterClose:b,disableScrollBackground:f,open:O,popoverContainerRef:E,preventScrollOnCloseFocus:R});return i({ref:x,trapFocus:!F&&V}),r({disableClickOverlayClose:u,disableEscapeClose:C,isVisible:V,onClose:k,popoverRef:x,preventCloseOnClickElements:h}),t({anchorElement:n,arrowStyles:y.arrowStyles,isVisible:V,middlewareOptions:v,middlewares:A,placement:y.placement,ref:x,strategy:g}),/* @__PURE__ */e(a,{ref:j,...y,anchorElement:!!n,cssClasses:S,disableAnimations:w,isClosing:P,isVisible:V,middlewareOptions:v,popoverContainerRef:D,strategy:g})});export{n as Popover};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useTrapFocus } from "../../lib/hooks/useTrapFocus/useTrapFocus.js";
+import { usePopoverInteractions } from "./hooks/usePopoverInteractions.js";
+import { usePopoverLifecycle } from "./hooks/usePopoverLifecycle.js";
+import { usePopoverPositioning } from "./hooks/usePopoverPositioning.js";
+import { PopoverStandAlone } from "./popoverStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+/**
+* Positioning utilities built on top of Floating UI.
+* @see https://floating-ui.com/docs/platform
+* @license MIT - Floating UI is licensed under MIT
+*/
+const Popover = forwardRef(({ additionalClasses: e, anchorElement: t, animationExitDuration: n = 200, disableAnimations: r = !1, disableAutoFocusFirstDescendant: i = !1, disableAutoFocusFirstDescendantAfterClose: a = !0, disableClickOverlayClose: o = !1, disableEscapeClose: s = !1, disableRestoreFocusAfterClose: c = !1, disableScrollBackground: l = !1, disableTrapFocus: u = !1, middlewareOptions: d, middlewares: f, onClose: p, open: m = !1, popoverContainerRef: h, preventCloseOnClickElements: g = [], preventScrollOnCloseFocus: _ = !1, strategy: v = "absolute", ...y }, b) => {
+	let x = r || !!t, S = useClassName({
+		additionalClassNames: e,
+		component: "POPOVER"
+	}), { handleInnerRef: C, isClosing: w, isVisible: T, popoverRef: E } = usePopoverLifecycle({
+		animationExitDuration: n,
+		disableAnimations: x,
+		disableAutoFocusFirstDescendant: i,
+		disableAutoFocusFirstDescendantAfterClose: a,
+		disableRestoreFocusAfterClose: c,
+		disableScrollBackground: l,
+		open: m,
+		popoverContainerRef: h,
+		preventScrollOnCloseFocus: _
+	});
+	return useTrapFocus({
+		ref: E,
+		trapFocus: !u && T
+	}), usePopoverInteractions({
+		disableClickOverlayClose: o,
+		disableEscapeClose: s,
+		isVisible: T,
+		onClose: p,
+		popoverRef: E,
+		preventCloseOnClickElements: g
+	}), usePopoverPositioning({
+		anchorElement: t,
+		arrowStyles: y.arrowStyles,
+		isVisible: T,
+		middlewareOptions: d,
+		middlewares: f,
+		placement: y.placement,
+		ref: E,
+		strategy: v
+	}), /* @__PURE__ */ jsx(PopoverStandAlone, {
+		ref: b,
+		...y,
+		anchorElement: !!t,
+		cssClasses: S,
+		disableAnimations: x,
+		isClosing: w,
+		isVisible: T,
+		middlewareOptions: d,
+		popoverContainerRef: C,
+		strategy: v
+	});
+});
+export { Popover };

package/dist/esm/components/popover/popoverStandAlone.js

@@ -1,3 +1,40 @@
-import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";/* empty css                */import{forwardRef as s}from"react";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{classNames as r}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as i}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{getArrowBorderStyles as n}from"./utils/styling.utils.js";const m=s(({anchorElement:s,arrowStyles:m,children:l,component:d="div",cssClasses:p,disableAnimations:c,id:b,isClosing:u,isVisible:k,overlay:f,placement:v,popoverContainerRef:h,zIndex:y="auto",...C},j)=>{const x=i(C,!0),{"data-testid":w="popover",...N}=x;/* @__PURE__ */
-return t("div",{ref:j,"data-testid":w,id:b,children:k&&/* @__PURE__ */e(o,{children:[f,
-/* @__PURE__ */e(a,{ref:h,...N,...C,className:r(p?.popover),component:d,"data-kbt-anchor-element":s,"data-kbt-closing":u,"data-kbt-disable-animations":c,"data-kbt-has-arrow":!!m,"data-kbt-id":"popover","data-kbt-placement":v,style:{zIndex:y||"auto"},children:[!!m&&/* @__PURE__ */t("div",{className:r(p?.arrow),"data-kbt-arrow-border":!!m,"data-kbt-id":"popover-arrow","data-kbt-placement":v,style:{...v?n(v,m):{},zIndex:"number"==typeof y?y+1:y}}),l]})]})})});export{m as PopoverStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+/* empty css             */
+import { getArrowBorderStyles } from "./utils/styling.utils.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const PopoverStandAlone = forwardRef(({ anchorElement: e, arrowStyles: t, children: n, component: r = "div", cssClasses: i, disableAnimations: a, id: o, isClosing: s, isVisible: c, overlay: l, placement: u, popoverContainerRef: d, zIndex: f = "auto", ...p }, m) => {
+	let { "data-testid": h = "popover", ...g } = pickCustomAttributes(p, !0);
+	return /* @__PURE__ */ jsx("div", {
+		ref: m,
+		"data-testid": h,
+		id: o,
+		children: c && /* @__PURE__ */ jsxs(Fragment$1, { children: [l, /* @__PURE__ */ jsxs(CustomComponent, {
+			ref: d,
+			...g,
+			...p,
+			className: classNames(i?.popover),
+			component: r,
+			"data-kbt-anchor-element": e,
+			"data-kbt-closing": s,
+			"data-kbt-disable-animations": a,
+			"data-kbt-has-arrow": !!t,
+			"data-kbt-id": "popover",
+			"data-kbt-placement": u,
+			style: { zIndex: f || "auto" },
+			children: [!!t && /* @__PURE__ */ jsx("div", {
+				className: classNames(i?.arrow),
+				"data-kbt-arrow-border": !!t,
+				"data-kbt-id": "popover-arrow",
+				"data-kbt-placement": u,
+				style: {
+					...u ? getArrowBorderStyles(u, t) : {},
+					zIndex: typeof f == "number" ? f + 1 : f
+				}
+			}), n]
+		})] })
+	});
+});
+export { PopoverStandAlone };

package/dist/esm/components/popover/positioning/middlewares.js

@@ -0,0 +1,2 @@
+import { arrow as popoverMWArrow, autoPlacement as popoverMWAutoPlacement, flip as popoverMWFlip, hide as popoverMWHide, offset as popoverMWOffset, shift as popoverMWShift, size as popoverMWSize } from "@floating-ui/dom";
+export { popoverMWArrow, popoverMWAutoPlacement, popoverMWFlip, popoverMWHide, popoverMWOffset, popoverMWShift, popoverMWSize };

package/dist/esm/components/popover/types/animation.js

@@ -1 +1,2 @@
-const e="center";export{e as DEFAULT_PLACEMENT};
+const DEFAULT_PLACEMENT = "center";
+export { DEFAULT_PLACEMENT };

package/dist/esm/components/popover/utils/animation.utils.js

@@ -1 +1,16 @@
-const t=t=>({bottom:"translateX(-50%)","bottom-end":"","bottom-start":"",center:"translate(-50%, -50%)",left:"translateY(-50%)","left-end":"","left-start":"",right:"translateY(-50%)","right-end":"","right-start":"",top:"translateX(-50%)","top-end":"","top-start":""}[t]||"");export{t as getPositioningTransforms};
+const getPositioningTransforms = (e) => ({
+	bottom: "translateX(-50%)",
+	"bottom-end": "",
+	"bottom-start": "",
+	center: "translate(-50%, -50%)",
+	left: "translateY(-50%)",
+	"left-end": "",
+	"left-start": "",
+	right: "translateY(-50%)",
+	"right-end": "",
+	"right-start": "",
+	top: "translateX(-50%)",
+	"top-end": "",
+	"top-start": ""
+})[e] || "";
+export { getPositioningTransforms };

package/dist/esm/components/popover/utils/placement.utils.js

@@ -1 +1,3 @@
-import{DEFAULT_PLACEMENT as t}from"../types/animation.js";const o=o=>o?o.startsWith("top")?"top":o.startsWith("bottom")?"bottom":o.startsWith("left")?"left":o.startsWith("right")?"right":t:t;export{o as getPlacementDirection};
+import { DEFAULT_PLACEMENT } from "../types/animation.js";
+const getPlacementDirection = (e) => e ? e.startsWith("top") ? "top" : e.startsWith("bottom") ? "bottom" : e.startsWith("left") ? "left" : e.startsWith("right") ? "right" : DEFAULT_PLACEMENT : DEFAULT_PLACEMENT;
+export { getPlacementDirection };

package/dist/esm/components/popover/utils/styling.utils.js

@@ -1 +1,34 @@
-import{getPlacementDirection as r}from"./placement.utils.js";const o={bottom:r=>({borderLeft:r,borderTop:r}),left:r=>({borderRight:r,borderTop:r}),right:r=>({borderBottom:r,borderLeft:r}),top:r=>({borderBottom:r,borderRight:r})},t=(t,e)=>{if(!e)return{};const b={"--arrow-size":`${e.size}px`,backgroundColor:e.backgroundColor,height:`${e.size}px`,width:`${e.size}px`};if(e.border){const i=r(t),d=o[i];d&&Object.assign(b,d(e.border))}return b};export{t as getArrowBorderStyles};
+import { getPlacementDirection } from "./placement.utils.js";
+var ARROW_BORDER_CONFIG = {
+	bottom: (e) => ({
+		borderLeft: e,
+		borderTop: e
+	}),
+	left: (e) => ({
+		borderRight: e,
+		borderTop: e
+	}),
+	right: (e) => ({
+		borderBottom: e,
+		borderLeft: e
+	}),
+	top: (e) => ({
+		borderBottom: e,
+		borderRight: e
+	})
+};
+const getArrowBorderStyles = (t, n) => {
+	if (!n) return {};
+	let r = {
+		"--arrow-size": `${n.size}px`,
+		backgroundColor: n.backgroundColor,
+		height: `${n.size}px`,
+		width: `${n.size}px`
+	};
+	if (n.border) {
+		let i = ARROW_BORDER_CONFIG[getPlacementDirection(t)];
+		i && Object.assign(r, i(n.border));
+	}
+	return r;
+};
+export { getArrowBorderStyles };

package/dist/esm/components/portal/portal.js

@@ -1 +1,10 @@
-import{createPortal as e}from"react-dom";const t=({children:t,wrapperId:d})=>{let r=document.body;return d&&(r=document.getElementById(d),r||(r=(e=>{const t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t})(d))),e(t,r)};export{t as Portal};
+import { createPortal } from "react-dom";
+var createWrapperAndAppendToBody = (e) => {
+	let t = document.createElement("div");
+	return t.setAttribute("id", e), document.body.appendChild(t), t;
+};
+const Portal = ({ children: n, wrapperId: r }) => {
+	let i = document.body;
+	return r && (i = document.getElementById(r), i ||= createWrapperAndAppendToBody(r)), createPortal(n, i);
+};
+export { Portal };