@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

package/dist/popover/index.d.ts

@@ -1,8 +1,7 @@
-import { closeOnEscPlugin, matchWidthModifier } from "./consts.js";
 import { PopoverProvider, usePopoverContext } from "./context.js";
-import { UsePopoverProps } from "./usePopover.types.js";
+import { Placement, UsePopoverProps } from "./usePopover.types.js";
 import { usePopover } from "./usePopover.js";
 import { PopoverContentProps, PopoverProps, PopoverRenderProps, PopoverTriggerProps } from "./popover.types.js";
 import { Popover } from "./popover.js";
 import { PopoverContent } from "./popoverContent.js";
-import { PopoverTrigger } from "./popoverTrigger.js";
+import { PopoverTrigger } from "./popoverTrigger.js";

package/dist/popover/index.js

@@ -0,0 +1,7 @@
+import { PopoverProvider, usePopoverContext } from "./context.js";
+import popoverContent_default from "./popoverContent.js";
+import popoverTrigger_default from "./popoverTrigger.js";
+import usePopover from "./usePopover.js";
+import Popover from "./popover.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/popover/popover.d.ts

@@ -1,16 +1,16 @@
 import { SystemProps } from "../system/system.js";
-import { BoxProps } from "../box/box.types.js";
 import { VuiComponent } from "../core/vui.js";
+import { BoxProps } from "../box/box.types.js";
 import { PopoverProps } from "./popover.types.js";
 import "../index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/popover/popover.d.ts
 /**
  * Uses 'usePopover' hook to expose relevant data to its children parts.
  * By default, renders provided content only when popover is opened (lazy).
  */
-declare function Popover(props: PopoverProps): react_jsx_runtime6.JSX.Element;
+declare function Popover(props: PopoverProps): react_jsx_runtime5.JSX.Element;
 declare namespace Popover {
   var Content: VuiComponent<"div", BoxProps>;
   var Trigger: VuiComponent<"button", SystemProps>;
@@ -18,4 +18,5 @@ declare namespace Popover {
 }
 //#endregion
 export { Popover };
+
 //# sourceMappingURL=popover.d.ts.map

package/dist/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","names":[],"sources":["../../src/popover/popover.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;iBAWwB,OAAA,QAAe,eAAY,kBAAA,CAAA,GAAA,CAAA;kBAA3B,OAAA;mCAAO,QAAA;EAAP,GAAA,CAAA,OAAO,CAAA,aAAoB,CAAA,CAAA,MAAA,CAAA,CAAA,aAAA;EAA3B,GAAA,CAAA,WAAO,CAAA,CAAA,MAAA"}
+{"version":3,"file":"popover.d.ts","names":[],"sources":["../../src/popover/popover.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;iBAWwB,OAAA,QAAe,eAAY,kBAAA,CAAA,GAAA,CAAA;kBAA3B,OAAA;mCAAO,QAAA;EAAP,IAAA,OAAO,cAAoB,CAAA,QAAA,cAAA;EAA3B,IAAA,WAAO,EAAA,MAAA"}

package/dist/popover/popover.js

@@ -1,5 +1,6 @@
 import { runIfFn } from "../utils/function.js";
 import { filterUndefined } from "../utils/object.js";
+import "../utils/index.js";
 import { PopoverProvider } from "./context.js";
 import popoverContent_default from "./popoverContent.js";
 import popoverTrigger_default from "./popoverTrigger.js";
@@ -12,11 +13,8 @@ import { jsx } from "react/jsx-runtime";
 * By default, renders provided content only when popover is opened (lazy).
 */
 function Popover(props) {
-	const { children, isLazy = true, options,...rest } = props;
-	const popoverProps = usePopover({
-		options,
-		...rest
-	});
+	const { children, isLazy = true, ...rest } = props;
+	const popoverProps = usePopover(rest);
 	const { close, isOpen, open } = popoverProps;
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: filterUndefined({
@@ -36,5 +34,5 @@ Popover.displayName = "Popover";
 
 //#endregion
 export { Popover as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["PopoverContent","PopoverTrigger"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import { filterUndefined, runIfFn } from '../utils'\nimport { PopoverProvider } from './context'\nimport type { PopoverProps } from './popover.types'\nimport PopoverContent from './popoverContent'\nimport PopoverTrigger from './popoverTrigger'\nimport usePopover from './usePopover'\n\n/**\n * Uses 'usePopover' hook to expose relevant data to its children parts.\n * By default, renders provided content only when popover is opened (lazy).\n */\nexport default function Popover(props: PopoverProps) {\n  const { children, isLazy = true, options, ...rest } = props\n  const popoverProps = usePopover({ options, ...rest })\n  const { close, isOpen, open } = popoverProps\n  const context = filterUndefined({ isLazy, ...popoverProps })\n\n  return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>\n}\n\nPopover.Content = PopoverContent\nPopover.Trigger = PopoverTrigger\nPopover.displayName = 'Popover'\n"],"mappings":";;;;;;;;;;;;;AAWA,SAAwB,QAAQ,OAAqB;CACnD,MAAM,EAAE,UAAU,SAAS,MAAM,QAAS,GAAG,SAAS;CACtD,MAAM,eAAe,WAAW;EAAE;EAAS,GAAG;EAAM,CAAC;CACrD,MAAM,EAAE,OAAO,QAAQ,SAAS;AAGhC,QAAO,oBAAC;EAAgB,OAFR,gBAAgB;GAAE;GAAQ,GAAG;GAAc,CAAC;YAEnB,QAAQ,UAAU;GAAE;GAAO;GAAQ;GAAM,CAAC;GAAmB;;AAGxG,QAAQ,UAAUA;AAClB,QAAQ,UAAUC;AAClB,QAAQ,cAAc"}
+{"version":3,"file":"popover.js","names":["PopoverContent","PopoverTrigger"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import { filterUndefined, runIfFn } from '../utils'\nimport { PopoverProvider } from './context'\nimport type { PopoverProps } from './popover.types'\nimport PopoverContent from './popoverContent'\nimport PopoverTrigger from './popoverTrigger'\nimport usePopover from './usePopover'\n\n/**\n * Uses 'usePopover' hook to expose relevant data to its children parts.\n * By default, renders provided content only when popover is opened (lazy).\n */\nexport default function Popover(props: PopoverProps) {\n  const { children, isLazy = true, ...rest } = props\n  const popoverProps = usePopover(rest)\n  const { close, isOpen, open } = popoverProps\n  const context = filterUndefined({ isLazy, ...popoverProps })\n\n  return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>\n}\n\nPopover.Content = PopoverContent\nPopover.Trigger = PopoverTrigger\nPopover.displayName = 'Popover'\n"],"mappings":";;;;;;;;;;;;;;AAWA,SAAwB,QAAQ,OAAqB;CACnD,MAAM,EAAE,UAAU,SAAS,MAAM,GAAG,SAAS;CAC7C,MAAM,eAAe,WAAW,KAAK;CACrC,MAAM,EAAE,OAAO,QAAQ,SAAS;AAGhC,QAAO,oBAAC;EAAgB,OAFR,gBAAgB;GAAE;GAAQ,GAAG;GAAc,CAAC;YAEnB,QAAQ,UAAU;GAAE;GAAO;GAAQ;GAAM,CAAC;GAAmB;;AAGxG,QAAQ,UAAUA;AAClB,QAAQ,UAAUC;AAClB,QAAQ,cAAc"}

package/dist/popover/popover.types.d.ts

@@ -6,7 +6,6 @@ import { BoxProps } from "../box/box.types.js";
 import "../box/index.js";
 import { UsePopoverProps } from "./usePopover.types.js";
 import { UsePopoverType } from "./usePopover.js";
-import { TippyProps } from "@tippyjs/react";
 
 //#region src/popover/popover.types.d.ts
 type PopoverContentProps = BoxProps;
@@ -15,8 +14,6 @@ type PopoverProps = UsePopoverProps & {
   children?: PopoverRenderProps;
   /** Mounts provided content only when popover is opened for performance. @default true */
   isLazy?: boolean;
-  /** Object with any Tippy props. */
-  options?: Partial<TippyProps>;
 };
 type PopoverRenderProps = RenderProps<{
   close: UsePopoverType['close'];
@@ -26,4 +23,5 @@ type PopoverRenderProps = RenderProps<{
 type PopoverTriggerProps = SystemProps;
 //#endregion
 export { PopoverContentProps, PopoverProps, PopoverRenderProps, PopoverTriggerProps };
+
 //# sourceMappingURL=popover.types.d.ts.map

package/dist/popover/popover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.types.d.ts","names":[],"sources":["../../src/popover/popover.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAQY,mBAAA,CAAA,CAAA,CAAsB;KAEtB,YAAA,CAAA,CAAA,CAAe;;aAEd;;EAJD,MAAA,CAAA,CAAA,CAAA,OAAA;EAEA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAe,OAAA,CAAA,CAAA,CAMf,OANe,CAMP,UANO,CAAA;CAEd;AAIO,IAAA,CAGR,kBAAA,CAAA,CAAA,CAAqB,WAHb,CAAA;EAAR,KAAA,CAAA,CAIH,cAJG,CAAA,CAAA,KAAA,CAAA,CAAA;EAAO,MAAA,CAAA,CAKT,cALS,CAAA,CAAA,MAAA,CAAA,CAAA;EAGP,IAAA,CAAA,CAGJ,cAHI,CAAkB,CAAA,IAAA,CAAA,CAAA;CACrB,CAAA;AACC,IAAA,CAIE,mBAAA,CAAA,CAAA,CAAsB,WAJxB"}
+{"version":3,"file":"popover.types.d.ts","names":[],"sources":["../../src/popover/popover.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAMY,mBAAA,GAAsB;KAEtB,YAAA,GAAe;;aAEd;;EAJD,MAAA,CAAA,EAAA,OAAA;AAEZ,CAAA;AAOY,KAAA,kBAAA,GAAqB,WAAH,CAAA;EACrB,KAAA,EAAA,cAAA,CAAA,OAAA,CAAA;EACC,MAAA,EAAA,cAAA,CAAA,QAAA,CAAA;EACF,IAAA,EAAA,cAAA,CAAA,MAAA,CAAA;CAHyB,CAAA;AAAW,KAMhC,mBAAA,GAAsB,WANU"}

package/dist/popover/popoverContent.d.ts

@@ -1,5 +1,5 @@
-import { BoxProps } from "../box/box.types.js";
 import { VuiComponent } from "../core/vui.js";
+import { BoxProps } from "../box/box.types.js";
 import "../index.js";
 
 //#region src/popover/popoverContent.d.ts
@@ -7,4 +7,5 @@ import "../index.js";
 declare const PopoverContent: VuiComponent<"div", BoxProps>;
 //#endregion
 export { PopoverContent };
+
 //# sourceMappingURL=popoverContent.d.ts.map

package/dist/popover/popoverContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popoverContent.d.ts","names":[],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,gBAAc,oBA0BzB,QAAA"}
+{"version":3,"file":"popoverContent.d.ts","names":[],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cASa,gBAAc,oBAmCzB,QAAA"}

package/dist/popover/popoverContent.js

@@ -1,26 +1,30 @@
 import { mergeRefs } from "../utils/react.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
-import { v } from "../core/styled.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
+import "../core/index.js";
 import { usePopoverContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 
 //#region src/popover/popoverContent.tsx
 /** Displays provided content in an overlaying wrapper. */
 const PopoverContent = vui((props, ref) => {
-	const { children, className,...rest } = props;
+	const { children, className, ...rest } = props;
 	const popoverProps = usePopoverContext() ?? {};
-	const { isLazy, isOpen, setPopper } = popoverProps;
+	const { context, floatingStyles, getFloatingProps, isLazy, isMounted, isOpen, setPopper, transitionStyles } = popoverProps;
 	const styles = useStyleConfig("Popover", {
 		...popoverProps,
 		...props
 	});
 	const shouldRenderChildren = isLazy ? isOpen : true;
-	return /* @__PURE__ */ jsx(v.div, {
-		className: "vui-popoverContainer",
-		ring: 0,
+	if (!isMounted) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
 		children: /* @__PURE__ */ jsx(box_default, {
 			bg: "white",
 			borderRadius: "md",
@@ -29,16 +33,21 @@ const PopoverContent = vui((props, ref) => {
 			overflowY: "auto",
 			ref: mergeRefs(setPopper, ref),
 			ring: 0,
+			style: {
+				...floatingStyles,
+				...transitionStyles
+			},
+			...getFloatingProps?.() ?? {},
 			...styles.content,
 			...rest,
 			children: shouldRenderChildren ? children : null
 		})
-	});
+	}) });
 });
 PopoverContent.displayName = "PopoverContent";
 var popoverContent_default = PopoverContent;
 
 //#endregion
 export { popoverContent_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popoverContent.js.map

package/dist/popover/popoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverContent.js","names":["Box"],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { useStyleConfig, v, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverContentProps } from './popover.types'\n\n/** Displays provided content in an overlaying wrapper. */\nexport const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const popoverProps = usePopoverContext() ?? {}\n  const { isLazy, isOpen, setPopper } = popoverProps\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const shouldRenderChildren = isLazy ? isOpen : true\n\n  return (\n    // Wrapping div prevents an error thrown when conditionally unmounting this component\n    <v.div className=\"vui-popoverContainer\" ring={0}>\n      <Box\n        bg=\"white\"\n        borderRadius=\"md\"\n        boxShadow=\"2\"\n        className={cs('vui-popoverContent', className)}\n        overflowY=\"auto\"\n        ref={mergeRefs(setPopper, ref)}\n        ring={0}\n        {...styles.content}\n        {...rest}\n      >\n        {shouldRenderChildren ? children : null}\n      </Box>\n    </v.div>\n  )\n})\n\nPopoverContent.displayName = 'PopoverContent'\n\nexport default PopoverContent\n"],"mappings":";;;;;;;;;;;AAOA,MAAa,iBAAiB,KAAiC,OAAO,QAAQ;CAC5E,MAAM,EAAE,UAAU,UAAW,GAAG,SAAS;CACzC,MAAM,eAAe,mBAAmB,IAAI,EAAE;CAC9C,MAAM,EAAE,QAAQ,QAAQ,cAAc;CACtC,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,uBAAuB,SAAS,SAAS;AAE/C,QAEE,oBAAC,EAAE;EAAI,WAAU;EAAuB,MAAM;YAC5C,oBAACA;GACC,IAAG;GACH,cAAa;GACb,WAAU;GACV,WAAW,GAAG,sBAAsB,UAAU;GAC9C,WAAU;GACV,KAAK,UAAU,WAAW,IAAI;GAC9B,MAAM;GACN,GAAI,OAAO;GACX,GAAI;aAEH,uBAAuB,WAAW;IAC/B;GACA;EAEV;AAEF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"popoverContent.js","names":["Box"],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":["import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react'\n\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverContentProps } from './popover.types'\n\n/** Displays provided content in an overlaying wrapper. */\nexport const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const popoverProps = usePopoverContext() ?? {}\n  const { context, floatingStyles, getFloatingProps, isLazy, isMounted, isOpen, setPopper, transitionStyles } =\n    popoverProps\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const shouldRenderChildren = isLazy ? isOpen : true\n\n  // Use isMounted for render control - handles transition timing\n  if (!isMounted) {\n    return null\n  }\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={context} modal={false}>\n        <Box\n          bg=\"white\"\n          borderRadius=\"md\"\n          boxShadow=\"2\"\n          className={cs('vui-popoverContent', className)}\n          overflowY=\"auto\"\n          ref={mergeRefs(setPopper, ref)}\n          ring={0}\n          style={{ ...floatingStyles, ...transitionStyles }}\n          {...(getFloatingProps?.() ?? {})}\n          {...styles.content}\n          {...rest}\n        >\n          {shouldRenderChildren ? children : null}\n        </Box>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  )\n})\n\nPopoverContent.displayName = 'PopoverContent'\n\nexport default PopoverContent\n"],"mappings":";;;;;;;;;;;;;;AASA,MAAa,iBAAiB,KAAiC,OAAO,QAAQ;CAC5E,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,eAAe,mBAAmB,IAAI,EAAE;CAC9C,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,QAAQ,WAAW,QAAQ,WAAW,qBACvF;CACF,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,uBAAuB,SAAS,SAAS;AAG/C,KAAI,CAAC,UACH,QAAO;AAGT,QACE,oBAAC,4BACC,oBAAC;EAA8B;EAAS,OAAO;YAC7C,oBAACA;GACC,IAAG;GACH,cAAa;GACb,WAAU;GACV,WAAW,GAAG,sBAAsB,UAAU;GAC9C,WAAU;GACV,KAAK,UAAU,WAAW,IAAI;GAC9B,MAAM;GACN,OAAO;IAAE,GAAG;IAAgB,GAAG;IAAkB;GACjD,GAAK,oBAAoB,IAAI,EAAE;GAC/B,GAAI,OAAO;GACX,GAAI;aAEH,uBAAuB,WAAW;IAC/B;GACe,GACR;EAEnB;AAEF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/popover/popoverTrigger.d.ts

@@ -10,4 +10,5 @@ import "../index.js";
 declare const PopoverTrigger: VuiComponent<"button", SystemProps>;
 //#endregion
 export { PopoverTrigger };
+
 //# sourceMappingURL=popoverTrigger.d.ts.map

package/dist/popover/popoverTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTrigger.d.ts","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAUa,gBAAc,uBAwBzB,WAAA"}
+{"version":3,"file":"popoverTrigger.d.ts","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAUa,gBAAc,uBA2BzB,WAAA"}

package/dist/popover/popoverTrigger.js

@@ -1,8 +1,10 @@
 import { mergeRefs } from "../utils/react.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { v } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { usePopoverContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -12,8 +14,8 @@ import { jsx } from "react/jsx-runtime";
 * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
 */
 const PopoverTrigger = vui((props, ref) => {
-	const { as, className, onClick: onClickProp,...rest } = props;
-	const { setReference, isOpen,...popoverProps } = usePopoverContext() ?? {};
+	const { as, className, onClick: onClickProp, ...rest } = props;
+	const { getReferenceProps, setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {};
 	const styles = useStyleConfig("Popover", {
 		...popoverProps,
 		...props
@@ -23,11 +25,13 @@ const PopoverTrigger = vui((props, ref) => {
 		e.stopPropagation();
 		onClickProp?.(e);
 	};
+	const referenceProps = getReferenceProps?.() ?? {};
 	return /* @__PURE__ */ jsx(Element, {
 		isActive: isOpen,
 		className: cs("vui-popoverTrigger", className),
 		onClick,
 		ref: mergeRefs(setReference, ref),
+		...referenceProps,
 		...styles.trigger,
 		...rest
 	});
@@ -37,5 +41,5 @@ var popoverTrigger_default = PopoverTrigger;
 
 //#endregion
 export { popoverTrigger_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popoverTrigger.js.map

package/dist/popover/popoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTrigger.js","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":["import { useStyleConfig, v, vui } from '../core'\nimport type { MouseEvent } from '../utils'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverTriggerProps } from './popover.types'\n\n/**\n * Displays a trigger component to toggle display of the popover content.\n * Can be rendered as any component using the 'as' prop. By default renders as a plain button.\n */\nexport const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {\n  // @ts-expect-error TS incorrectly doesn't recognize 'as' prop\n  const { as, className, onClick: onClickProp, ...rest } = props\n  const { setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {}\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const Element = as || v.button\n\n  const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n    // Avoids triggering parent's onClick, like when inside a ListItem\n    e.stopPropagation()\n    onClickProp?.(e)\n  }\n\n  return (\n    <Element\n      isActive={isOpen}\n      className={cs('vui-popoverTrigger', className)}\n      onClick={onClick}\n      ref={mergeRefs(setReference, ref)}\n      {...styles.trigger}\n      {...rest}\n    />\n  )\n})\n\nPopoverTrigger.displayName = 'PopoverTrigger'\n\nexport default PopoverTrigger\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAE/E,MAAM,EAAE,IAAI,WAAW,SAAS,YAAa,GAAG,SAAS;CACzD,MAAM,EAAE,cAAc,OAAQ,GAAG,iBAAiB,mBAAmB,IAAI,EAAE;CAC3E,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,UAAU,MAAM,EAAE;CAExB,MAAM,WAAW,MAAqC;AAEpD,IAAE,iBAAiB;AACnB,gBAAc,EAAE;;AAGlB,QACE,oBAAC;EACC,UAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EACrC;EACT,KAAK,UAAU,cAAc,IAAI;EACjC,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"popoverTrigger.js","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":["import { useStyleConfig, v, vui } from '../core'\nimport type { MouseEvent } from '../utils'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverTriggerProps } from './popover.types'\n\n/**\n * Displays a trigger component to toggle display of the popover content.\n * Can be rendered as any component using the 'as' prop. By default renders as a plain button.\n */\nexport const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {\n  // @ts-expect-error TS incorrectly doesn't recognize 'as' prop\n  const { as, className, onClick: onClickProp, ...rest } = props\n  const { getReferenceProps, setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {}\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const Element = as || v.button\n\n  const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n    // Avoids triggering parent's onClick, like when inside a ListItem\n    e.stopPropagation()\n    onClickProp?.(e)\n  }\n\n  const referenceProps = getReferenceProps?.() ?? {}\n\n  return (\n    <Element\n      isActive={isOpen}\n      className={cs('vui-popoverTrigger', className)}\n      onClick={onClick}\n      ref={mergeRefs(setReference, ref)}\n      {...referenceProps}\n      {...styles.trigger}\n      {...rest}\n    />\n  )\n})\n\nPopoverTrigger.displayName = 'PopoverTrigger'\n\nexport default PopoverTrigger\n"],"mappings":";;;;;;;;;;;;;;;AAUA,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAE/E,MAAM,EAAE,IAAI,WAAW,SAAS,aAAa,GAAG,SAAS;CACzD,MAAM,EAAE,mBAAmB,cAAc,QAAQ,GAAG,iBAAiB,mBAAmB,IAAI,EAAE;CAC9F,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,UAAU,MAAM,EAAE;CAExB,MAAM,WAAW,MAAqC;AAEpD,IAAE,iBAAiB;AACnB,gBAAc,EAAE;;CAGlB,MAAM,iBAAiB,qBAAqB,IAAI,EAAE;AAElD,QACE,oBAAC;EACC,UAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EACrC;EACT,KAAK,UAAU,cAAc,IAAI;EACjC,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/popover/theme.js

@@ -14,5 +14,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/popover/usePopover.d.ts

@@ -1,25 +1,56 @@
 import { UsePopoverProps } from "./usePopover.types.js";
-import * as react942 from "react";
-import { Instance, Props } from "tippy.js";
+import * as react365 from "react";
+import * as _floating_ui_react0 from "@floating-ui/react";
+import * as _floating_ui_utils0 from "@floating-ui/utils";
+import * as _floating_ui_core0 from "@floating-ui/core";
+import * as _floating_ui_react_dom0 from "@floating-ui/react-dom";
 
 //#region src/popover/usePopover.d.ts
-
 /**
- * Controls the logic of instantiating and managing a tippy instance.
+ * Controls the logic of positioning and managing a floating popover.
  * Takes multiple configuration props that control closing, placement or behavior.
- * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
+ * Exposes functions used for ref callbacks on consuming components, programmatic open/close methods and properties.
  */
 declare function usePopover(props?: UsePopoverProps): {
-  close: () => void | undefined;
-  instance: Instance<Props> | null;
+  close: () => void;
+  context: {
+    x: number;
+    y: number;
+    placement: _floating_ui_utils0.Placement;
+    strategy: _floating_ui_utils0.Strategy;
+    middlewareData: _floating_ui_core0.MiddlewareData;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    open: boolean;
+    onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react0.OpenChangeReason) => void;
+    events: _floating_ui_react0.FloatingEvents;
+    dataRef: React.MutableRefObject<_floating_ui_react0.ContextData>;
+    nodeId: string | undefined;
+    floatingId: string | undefined;
+    refs: _floating_ui_react0.ExtendedRefs<_floating_ui_react0.ReferenceType>;
+    elements: _floating_ui_react0.ExtendedElements<_floating_ui_react0.ReferenceType>;
+  };
+  floatingStyles: react365.CSSProperties;
+  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+  getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+  isMounted: boolean;
   isOpen: boolean;
-  open: () => void | undefined;
+  open: () => void;
   popper: HTMLElement | null;
   reference: HTMLElement | null;
-  setPopper: react942.Dispatch<react942.SetStateAction<HTMLElement | null>>;
-  setReference: react942.Dispatch<react942.SetStateAction<HTMLElement | null>>;
+  refs: {
+    reference: react365.MutableRefObject<_floating_ui_react_dom0.ReferenceType | null>;
+    floating: React.MutableRefObject<HTMLElement | null>;
+    setReference: (node: _floating_ui_react_dom0.ReferenceType | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+  } & _floating_ui_react0.ExtendedRefs<_floating_ui_react0.ReferenceType>;
+  setPopper: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+  setReference: ((node: _floating_ui_react_dom0.ReferenceType | null) => void) & ((node: _floating_ui_react0.ReferenceType | null) => void);
+  transitionStyles: react365.CSSProperties;
 };
 type UsePopoverType = ReturnType<typeof usePopover>;
 //#endregion
 export { UsePopoverType, usePopover };
+
 //# sourceMappingURL=usePopover.d.ts.map

package/dist/popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","names":[],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AAMyD,CAAA,CAAA,CAAA,OAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,GAAA,CAAA,SAAA,CAAA,EAAA,CAAA,SAAA,CAAA,UAAA,CAAA,CAAA,WAAA,CAAA,IAAA,CAAA,KAAA,CAAA,OAAA,CAAA,GAAA,CAAA,UAAA;;iBAOjC,UAAA,SAAkB;;;;;;;;;;KAmH9B,cAAA,CAAA,CAAA,CAAiB,kBAAkB"}
+{"version":3,"file":"usePopover.d.ts","names":[],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;iBAyBwB,UAAA,SAAkB;;EAAlB,OAAA,EAAA;IAAkB,CAAA,EAAA,MAAA;IAAoB,CAAA,EAAA,MAAA;eAAA,mBAAA,CAAA;;;;;;;;;;;;;;;;;;;;EAwGrB,IAAA,EAAA,GAAA,GAAA,IAAA;EAAW,MAAA,aAAA,GAAA,IAAA;aAAX;;yCAAW,uBAAA,CAAA,aAAA;;;;;;;;;KAQxC,cAAA,GAAiB,kBAAkB"}

package/dist/popover/usePopover.js

@@ -1,106 +1,94 @@
 import { useCallbackRef } from "../utils/react.js";
-import { closeOnEscPlugin, matchWidthModifier } from "./consts.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import tippy from "tippy.js";
+import "../utils/index.js";
+import { useCallback, useEffect, useState } from "react";
+import { autoUpdate, flip, offset, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStyles } from "@floating-ui/react";
 
 //#region src/popover/usePopover.ts
 /**
-* Controls the logic of instantiating and managing a tippy instance.
+* Controls the logic of positioning and managing a floating popover.
 * Takes multiple configuration props that control closing, placement or behavior.
-* Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
+* Exposes functions used for ref callbacks on consuming components, programmatic open/close methods and properties.
 */
 function usePopover(props = {}) {
-	const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip = true, isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = "bottom-start", trigger = "click" } = props;
-	const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen);
-	const [instance, setInstance] = useState(null);
-	const [reference, setReference] = useState(null);
-	const [popper, setPopper] = useState(null);
-	const close = useCallback(() => instance?.hide(), [instance]);
+	const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip: flip$1 = true, isOpen: isOpenProp, matchWidth, offset: offset$1, onClose: onCloseProp, onOpen: onOpenProp, placement = "bottom-start", trigger = "click" } = props;
+	const isControlled = isOpenProp !== void 0;
+	const [isOpenState, setIsOpenState] = useState(defaultIsOpen);
+	const isOpen = isControlled ? isOpenProp : isOpenState;
 	const onClose = useCallbackRef(onCloseProp);
 	const onOpen = useCallbackRef(onOpenProp);
-	const open = useCallback(() => instance?.show(), [instance]);
-	const isControlled = isOpenProp !== void 0;
-	const tippyOptions = useMemo(() => {
-		const { aria, offset: optionsOffset, onHidden, onHide, onShow, plugins = [], popperOptions = {},...otherOptions } = options ?? {};
-		return {
-			aria,
-			arrow: false,
-			duration: [200, 150],
-			hideOnClick: !isControlled ? closeOnBlur : false,
-			interactive: true,
-			maxWidth: "none",
-			offset: optionsOffset ?? offset ?? [0, 4],
-			onHidden: (instance$1) => {
-				setIsOpen(false);
-				onHidden?.(instance$1);
-			},
-			onHide: (instance$1) => {
-				onClose(instance$1);
-				onHide?.(instance$1);
-			},
-			onShow: (instance$1) => {
-				setIsOpen(true);
-				onOpen(instance$1);
-				onShow?.(instance$1);
-			},
-			placement,
-			plugins: [...!isControlled && closeOnEsc ? [closeOnEscPlugin] : [], ...plugins],
-			popperOptions: {
-				...popperOptions,
-				modifiers: [
-					{
-						name: "flip",
-						enabled: flip
-					},
-					{
-						...matchWidthModifier,
-						enabled: !!matchWidth
-					},
-					...popperOptions.modifiers ?? []
-				]
-			},
-			showOnCreate: isOpenProp ?? defaultIsOpen,
-			trigger: !isControlled ? trigger : "manual",
-			...otherOptions
-		};
+	const setIsOpen = useCallback((open$1) => {
+		if (!isControlled) setIsOpenState(open$1);
+		if (open$1) onOpen();
+		else onClose();
 	}, [
-		closeOnBlur,
-		closeOnEsc,
-		offset,
-		options,
-		placement,
-		trigger
+		isControlled,
+		onOpen,
+		onClose
 	]);
-	useEffect(() => {
-		if (popper !== null && reference !== null) {
-			instance?.destroy();
-			setInstance(tippy(reference, {
-				...tippyOptions,
-				content: popper
-			}));
-		}
-	}, [
-		popper,
-		tippyOptions,
-		trigger
+	const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+	const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement,
+		middleware: [
+			offset({
+				mainAxis: offset$1?.[1] ?? 4,
+				crossAxis: offset$1?.[0] ?? 0
+			}),
+			flip$1 && flip(),
+			shift({ padding: 5 }),
+			matchWidth && size({ apply({ rects, elements }) {
+				Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+			} })
+		].filter(Boolean),
+		whileElementsMounted: autoUpdate
+	});
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+		duration: 150,
+		initial: { opacity: 0 },
+		open: { opacity: 1 },
+		close: { opacity: 0 }
+	});
+	const clickEnabled = trigger === "click" && !isControlled;
+	const hoverEnabled = trigger === "mouseenter" && !isControlled;
+	const focusEnabled = (trigger === "focus" || trigger === "focusin") && !isControlled;
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context, { enabled: clickEnabled }),
+		useHover(context, {
+			enabled: hoverEnabled,
+			move: false
+		}),
+		useFocus(context, { enabled: focusEnabled }),
+		useDismiss(context, {
+			enabled: !isControlled,
+			escapeKey: closeOnEsc,
+			outsidePress: closeOnBlur
+		}),
+		useRole(context)
 	]);
 	useEffect(() => {
-		if (isControlled) if (isOpenProp) instance?.show();
-		else instance?.hide();
-	}, [isOpenProp]);
+		if (isControlled) setIsOpenState(isOpenProp);
+	}, [isControlled, isOpenProp]);
 	return {
 		close,
-		instance,
+		context,
+		floatingStyles,
+		getFloatingProps,
+		getReferenceProps,
+		isMounted,
 		isOpen,
 		open,
-		popper,
-		reference,
-		setPopper,
-		setReference
+		popper: refs.floating.current,
+		reference: refs.reference.current,
+		refs,
+		setPopper: refs.setFloating,
+		setReference: refs.setReference,
+		transitionStyles
 	};
 }
 
 //#endregion
 export { usePopover as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=usePopover.js.map

package/dist/popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","names":["tippyOptions: Partial<TippyProps>","instance"],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { Instance, Props as TippyProps } from 'tippy.js'\nimport tippy from 'tippy.js'\n\nimport { useCallbackRef } from '../utils'\nimport { closeOnEscPlugin, matchWidthModifier } from './consts'\nimport type { UsePopoverProps } from './usePopover.types'\n\n/**\n * Controls the logic of instantiating and managing a tippy instance.\n * Takes multiple configuration props that control closing, placement or behavior.\n * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.\n */\nexport default function usePopover(props: UsePopoverProps = {}) {\n  const {\n    closeOnBlur = true,\n    closeOnEsc = true,\n    defaultIsOpen = false,\n    flip = true,\n    isOpen: isOpenProp,\n    matchWidth,\n    offset,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n    options,\n    placement = 'bottom-start',\n    trigger = 'click',\n  } = props\n\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)\n  const [instance, setInstance] = useState<Instance | null>(null)\n  const [reference, setReference] = useState<HTMLElement | null>(null)\n  const [popper, setPopper] = useState<HTMLElement | null>(null)\n\n  const close = useCallback(() => instance?.hide(), [instance])\n  const onClose = useCallbackRef(onCloseProp)\n  const onOpen = useCallbackRef(onOpenProp)\n  const open = useCallback(() => instance?.show(), [instance])\n\n  const isControlled = isOpenProp !== undefined\n\n  const tippyOptions: Partial<TippyProps> = useMemo(() => {\n    const {\n      aria,\n      offset: optionsOffset,\n      onHidden,\n      onHide,\n      onShow,\n      plugins = [],\n      popperOptions = {},\n      ...otherOptions\n    } = options ?? {}\n\n    return {\n      aria,\n      arrow: false,\n      duration: [200, 150],\n      hideOnClick: !isControlled ? closeOnBlur : false,\n      interactive: true,\n      maxWidth: 'none',\n      offset: optionsOffset ?? offset ?? [0, 4],\n      onHidden: instance => {\n        setIsOpen(false)\n        onHidden?.(instance)\n      },\n      onHide: instance => {\n        onClose(instance)\n        onHide?.(instance)\n      },\n      onShow: instance => {\n        setIsOpen(true)\n        onOpen(instance)\n        onShow?.(instance)\n      },\n      placement,\n      plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],\n      popperOptions: {\n        ...popperOptions,\n        modifiers: [\n          {\n            name: 'flip',\n            enabled: flip,\n          },\n          { ...matchWidthModifier, enabled: !!matchWidth },\n          ...(popperOptions.modifiers ?? []),\n        ],\n      },\n      showOnCreate: isOpenProp ?? defaultIsOpen,\n      trigger: !isControlled ? trigger : 'manual',\n      ...otherOptions,\n    }\n  }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])\n\n  // Create a new Tippy instance\n  useEffect(() => {\n    if (popper !== null && reference !== null) {\n      // Destroy old instance to ensure new options work\n      instance?.destroy()\n\n      const newInstance = tippy(reference, {\n        ...tippyOptions,\n        content: popper,\n      })\n\n      setInstance(newInstance)\n    }\n  }, [popper, tippyOptions, trigger])\n\n  // Handle showing/hiding popup in controlled mode\n  useEffect(() => {\n    if (isControlled) {\n      if (isOpenProp) instance?.show()\n      else instance?.hide()\n    }\n  }, [isOpenProp])\n\n  return {\n    close,\n    instance,\n    isOpen,\n    open,\n    popper,\n    reference,\n    setPopper,\n    setReference,\n  }\n}\n\nexport type UsePopoverType = ReturnType<typeof usePopover>\n"],"mappings":";;;;;;;;;;;AAaA,SAAwB,WAAW,QAAyB,EAAE,EAAE;CAC9D,MAAM,EACJ,cAAc,MACd,aAAa,MACb,gBAAgB,OAChB,OAAO,MACP,QAAQ,YACR,YACA,QACA,SAAS,aACT,QAAQ,YACR,SACA,YAAY,gBACZ,UAAU,YACR;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc,cAAc;CACjE,MAAM,CAAC,UAAU,eAAe,SAA0B,KAAK;CAC/D,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,MAAM,CAAC,QAAQ,aAAa,SAA6B,KAAK;CAE9D,MAAM,QAAQ,kBAAkB,UAAU,MAAM,EAAE,CAAC,SAAS,CAAC;CAC7D,MAAM,UAAU,eAAe,YAAY;CAC3C,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,OAAO,kBAAkB,UAAU,MAAM,EAAE,CAAC,SAAS,CAAC;CAE5D,MAAM,eAAe,eAAe;CAEpC,MAAMA,eAAoC,cAAc;EACtD,MAAM,EACJ,MACA,QAAQ,eACR,UACA,QACA,QACA,UAAU,EAAE,EACZ,gBAAgB,EAAE,CAClB,GAAG,iBACD,WAAW,EAAE;AAEjB,SAAO;GACL;GACA,OAAO;GACP,UAAU,CAAC,KAAK,IAAI;GACpB,aAAa,CAAC,eAAe,cAAc;GAC3C,aAAa;GACb,UAAU;GACV,QAAQ,iBAAiB,UAAU,CAAC,GAAG,EAAE;GACzC,WAAU,eAAY;AACpB,cAAU,MAAM;AAChB,eAAWC,WAAS;;GAEtB,SAAQ,eAAY;AAClB,YAAQA,WAAS;AACjB,aAASA,WAAS;;GAEpB,SAAQ,eAAY;AAClB,cAAU,KAAK;AACf,WAAOA,WAAS;AAChB,aAASA,WAAS;;GAEpB;GACA,SAAS,CAAC,GAAI,CAAC,gBAAgB,aAAa,CAAC,iBAAiB,GAAG,EAAE,EAAG,GAAG,QAAQ;GACjF,eAAe;IACb,GAAG;IACH,WAAW;KACT;MACE,MAAM;MACN,SAAS;MACV;KACD;MAAE,GAAG;MAAoB,SAAS,CAAC,CAAC;MAAY;KAChD,GAAI,cAAc,aAAa,EAAE;KAClC;IACF;GACD,cAAc,cAAc;GAC5B,SAAS,CAAC,eAAe,UAAU;GACnC,GAAG;GACJ;IACA;EAAC;EAAa;EAAY;EAAQ;EAAS;EAAW;EAAQ,CAAC;AAGlE,iBAAgB;AACd,MAAI,WAAW,QAAQ,cAAc,MAAM;AAEzC,aAAU,SAAS;AAOnB,eALoB,MAAM,WAAW;IACnC,GAAG;IACH,SAAS;IACV,CAAC,CAEsB;;IAEzB;EAAC;EAAQ;EAAc;EAAQ,CAAC;AAGnC,iBAAgB;AACd,MAAI,aACF,KAAI,WAAY,WAAU,MAAM;MAC3B,WAAU,MAAM;IAEtB,CAAC,WAAW,CAAC;AAEhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"usePopover.js","names":["open","offsetMiddleware","offset","flip","flipMiddleware"],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":["import {\n  autoUpdate,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCallbackRef } from '../utils'\nimport type { UsePopoverProps } from './usePopover.types'\n\n/**\n * Controls the logic of positioning and managing a floating popover.\n * Takes multiple configuration props that control closing, placement or behavior.\n * Exposes functions used for ref callbacks on consuming components, programmatic open/close methods and properties.\n */\nexport default function usePopover(props: UsePopoverProps = {}) {\n  const {\n    closeOnBlur = true,\n    closeOnEsc = true,\n    defaultIsOpen = false,\n    flip = true,\n    isOpen: isOpenProp,\n    matchWidth,\n    offset,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n    placement = 'bottom-start',\n    trigger = 'click',\n  } = props\n\n  const isControlled = isOpenProp !== undefined\n  const [isOpenState, setIsOpenState] = useState(defaultIsOpen)\n  const isOpen = isControlled ? isOpenProp : isOpenState\n\n  const onClose = useCallbackRef(onCloseProp)\n  const onOpen = useCallbackRef(onOpenProp)\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (!isControlled) {\n        setIsOpenState(open)\n      }\n      if (open) {\n        onOpen()\n      } else {\n        onClose()\n      }\n    },\n    [isControlled, onOpen, onClose],\n  )\n\n  const close = useCallback(() => setIsOpen(false), [setIsOpen])\n  const open = useCallback(() => setIsOpen(true), [setIsOpen])\n\n  // Build middleware array\n  const middleware = [\n    offsetMiddleware({ mainAxis: offset?.[1] ?? 4, crossAxis: offset?.[0] ?? 0 }),\n    flip && flipMiddleware(),\n    shift({ padding: 5 }),\n    matchWidth &&\n      size({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            width: `${rects.reference.width}px`,\n          })\n        },\n      }),\n  ].filter(Boolean)\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  })\n\n  // Opacity-only transition - no position movement\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: 150,\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n  })\n\n  // Interaction hooks based on trigger type\n  const clickEnabled = trigger === 'click' && !isControlled\n  const hoverEnabled = trigger === 'mouseenter' && !isControlled\n  const focusEnabled = (trigger === 'focus' || trigger === 'focusin') && !isControlled\n\n  const click = useClick(context, { enabled: clickEnabled })\n  const hover = useHover(context, { enabled: hoverEnabled, move: false })\n  const focus = useFocus(context, { enabled: focusEnabled })\n  const dismiss = useDismiss(context, {\n    enabled: !isControlled,\n    escapeKey: closeOnEsc,\n    outsidePress: closeOnBlur,\n  })\n  const role = useRole(context)\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, hover, focus, dismiss, role])\n\n  // Sync controlled state\n  useEffect(() => {\n    if (isControlled) {\n      setIsOpenState(isOpenProp)\n    }\n  }, [isControlled, isOpenProp])\n\n  return {\n    close,\n    context,\n    floatingStyles,\n    getFloatingProps,\n    getReferenceProps,\n    isMounted,\n    isOpen,\n    open,\n    popper: refs.floating.current,\n    reference: refs.reference.current as HTMLElement | null,\n    refs,\n    setPopper: refs.setFloating,\n    setReference: refs.setReference,\n    transitionStyles,\n  }\n}\n\nexport type UsePopoverType = ReturnType<typeof usePopover>\n"],"mappings":";;;;;;;;;;;AAyBA,SAAwB,WAAW,QAAyB,EAAE,EAAE;CAC9D,MAAM,EACJ,cAAc,MACd,aAAa,MACb,gBAAgB,OAChB,eAAO,MACP,QAAQ,YACR,YACA,kBACA,SAAS,aACT,QAAQ,YACR,YAAY,gBACZ,UAAU,YACR;CAEJ,MAAM,eAAe,eAAe;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,cAAc;CAC7D,MAAM,SAAS,eAAe,aAAa;CAE3C,MAAM,UAAU,eAAe,YAAY;CAC3C,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,YAAY,aACf,WAAkB;AACjB,MAAI,CAAC,aACH,gBAAeA,OAAK;AAEtB,MAAIA,OACF,SAAQ;MAER,UAAS;IAGb;EAAC;EAAc;EAAQ;EAAQ,CAChC;CAED,MAAM,QAAQ,kBAAkB,UAAU,MAAM,EAAE,CAAC,UAAU,CAAC;CAC9D,MAAM,OAAO,kBAAkB,UAAU,KAAK,EAAE,CAAC,UAAU,CAAC;CAiB5D,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,MAAM;EACN,cAAc;EACd;EACA,YAlBiB;GACjBC,OAAiB;IAAE,UAAUC,WAAS,MAAM;IAAG,WAAWA,WAAS,MAAM;IAAG,CAAC;GAC7EC,UAAQC,MAAgB;GACxB,MAAM,EAAE,SAAS,GAAG,CAAC;GACrB,cACE,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;AACzB,WAAO,OAAO,SAAS,SAAS,OAAO,EACrC,OAAO,GAAG,MAAM,UAAU,MAAM,KACjC,CAAC;MAEL,CAAC;GACL,CAAC,OAAO,QAAQ;EAOf,sBAAsB;EACvB,CAAC;CAGF,MAAM,EAAE,WAAW,QAAQ,qBAAqB,oBAAoB,SAAS;EAC3E,UAAU;EACV,SAAS,EAAE,SAAS,GAAG;EACvB,MAAM,EAAE,SAAS,GAAG;EACpB,OAAO,EAAE,SAAS,GAAG;EACtB,CAAC;CAGF,MAAM,eAAe,YAAY,WAAW,CAAC;CAC7C,MAAM,eAAe,YAAY,gBAAgB,CAAC;CAClD,MAAM,gBAAgB,YAAY,WAAW,YAAY,cAAc,CAAC;CAYxE,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAVlD,SAAS,SAAS,EAAE,SAAS,cAAc,CAAC;EAC5C,SAAS,SAAS;GAAE,SAAS;GAAc,MAAM;GAAO,CAAC;EACzD,SAAS,SAAS,EAAE,SAAS,cAAc,CAAC;EAC1C,WAAW,SAAS;GAClC,SAAS,CAAC;GACV,WAAW;GACX,cAAc;GACf,CAAC;EACW,QAAQ,QAAQ;EAEuE,CAAC;AAGrG,iBAAgB;AACd,MAAI,aACF,gBAAe,WAAW;IAE3B,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,KAAK,SAAS;EACtB,WAAW,KAAK,UAAU;EAC1B;EACA,WAAW,KAAK;EAChB,cAAc,KAAK;EACnB;EACD"}

package/dist/popover/usePopover.types.d.ts

@@ -1,6 +1,6 @@
 import { AnyString } from "../utils/types.js";
 import "../utils/index.js";
-import { Instance, Placement, Props } from "tippy.js";
+import { Placement as Placement$1 } from "@floating-ui/react";
 
 //#region src/popover/usePopover.types.d.ts
 type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter';
@@ -17,19 +17,18 @@ type UsePopoverProps = {
   isOpen?: boolean;
   /** Sets the content element width to be the same as trigger element. */
   matchWidth?: boolean;
-  /** Displaces content from the trigger in pixels. */
-  offset?: Props['offset'];
+  /** Displaces content from the trigger in pixels. [skidding, distance] */
+  offset?: [number, number];
   /** Invoked once content is fully hidden. */
-  onClose?: (instance: Instance<Props>) => void;
+  onClose?: () => void;
   /** Invoked once content begins to show. */
-  onOpen?: (instance: Instance<Props>) => void;
-  /** Object with any Tippy props. */
-  options?: Partial<Props>;
+  onOpen?: () => void;
   /** Preferred placement of the content. Might be flipped if needs more space. */
-  placement?: Placement;
-  /** Determintes the events that cause the content to show. */
+  placement?: Placement$1;
+  /** Determines the events that cause the content to show. */
   trigger?: PopoverTrigger | AnyString;
 };
 //#endregion
-export { UsePopoverProps };
+export { type Placement$1 as Placement, UsePopoverProps };
+
 //# sourceMappingURL=usePopover.types.d.ts.map