@nextui-org/popover - npm Package Compare versions

Comparing version 0.0.0-canary-20250105105357 to 0.0.0-canary-20250105123759

dist/free-solo-popover.d.ts

 import * as _nextui_org_system from '@nextui-org/system';
 import * as React from 'react';
 import { UsePopoverProps } from './use-popover.js';
-import '@react-types/overlays';
 import '@nextui-org/theme';
@@ -9,2 +8,3 @@ import 'framer-motion';
 import '@react-stately/overlays';
+import '@react-types/overlays';
 import '@react-aria/dialog';
@@ -11,0 +11,0 @@ import './use-aria-popover.js';

dist/free-solo-popover.js

@@ -38,3 +38,3 @@ "use client";
 var import_utils3 = require("@react-aria/utils");
-var import_aria_utils3 = require("@nextui-org/aria-utils");
+var import_aria_utils4 = require("@nextui-org/aria-utils");
 var import_framer_utils = require("@nextui-org/framer-utils");
@@ -49,4 +49,5 @@ var import_dialog = require("@react-aria/dialog");
 var import_overlays3 = require("@react-aria/overlays");
+var import_aria_utils2 = require("@nextui-org/aria-utils");
 var import_system = require("@nextui-org/system");
-var import_aria_utils2 = require("@nextui-org/aria-utils");
+var import_aria_utils3 = require("@nextui-org/aria-utils");
 var import_theme = require("@nextui-org/theme");
@@ -191,3 +192,7 @@ var import_utils2 = require("@react-aria/utils");
   const state = stateProp || innerState;
-  const { popoverProps, underlayProps, placement } = useReactAriaPopover(
+  const {
+    popoverProps,
+    underlayProps,
+    placement: ariaPlacement
+  } = useReactAriaPopover(
     {
@@ -213,2 +218,8 @@ triggerRef,
   );
+  const placement = (0, import_react3.useMemo)(() => {
+    if (!ariaPlacement) {
+      return null;
+    }
+    return (0, import_aria_utils2.getShouldUseAxisPlacement)(ariaPlacement, placementProp) ? ariaPlacement : placementProp;
+  }, [ariaPlacement, placementProp]);
   const { triggerProps } = (0, import_overlays3.useOverlayTrigger)({ type: triggerType }, state, triggerRef);
@@ -237,3 +248,3 @@ const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
     "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
-    "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+    "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
     ...(0, import_utils2.mergeProps)(focusProps, dialogPropsProp, props2),
@@ -250,6 +261,6 @@ className: slots.base({ class: (0, import_shared_utils.clsx)(baseStyles) }),
       "data-arrow": (0, import_shared_utils.dataAttr)(showArrow),
-      "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+      "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
       className: slots.content({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.content, props2.className) })
     }),
-    [slots, state.isOpen, showArrow, placement, placementProp, classNames]
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames, ariaPlacement]
   );
@@ -320,3 +331,3 @@ const onPress = (0, import_react3.useCallback)(
     triggerRef,
-    placement: placement || DEFAULT_PLACEMENT,
+    placement,
     isNonModal,
@@ -358,6 +369,6 @@ popoverRef: domRef,
       };
-    } else {
+    } else if (placement) {
       style = {
         ...style,
-        ...(0, import_aria_utils3.getTransformOrigins)(placement === "center" ? "top" : placement)
+        ...(0, import_aria_utils4.getTransformOrigins)(placement === "center" ? "top" : placement)
       };
@@ -364,0 +375,0 @@ }

dist/index.d.ts

@@ -11,3 +11,2 @@ export { default as Popover, PopoverProps } from './popover.js';
 import '@react-aria/dialog';
-import '@react-types/overlays';
 import '@nextui-org/theme';
@@ -17,4 +16,5 @@ import 'framer-motion';
 import '@react-stately/overlays';
+import '@react-types/overlays';
 import './use-aria-popover.js';
 import '@react-aria/overlays';
 import '@nextui-org/aria-utils';

dist/index.js

@@ -52,4 +52,5 @@ "use client";
 var import_overlays3 = require("@react-aria/overlays");
+var import_aria_utils2 = require("@nextui-org/aria-utils");
 var import_system = require("@nextui-org/system");
-var import_aria_utils2 = require("@nextui-org/aria-utils");
+var import_aria_utils3 = require("@nextui-org/aria-utils");
 var import_theme = require("@nextui-org/theme");
@@ -194,3 +195,7 @@ var import_utils2 = require("@react-aria/utils");
   const state = stateProp || innerState;
-  const { popoverProps, underlayProps, placement } = useReactAriaPopover(
+  const {
+    popoverProps,
+    underlayProps,
+    placement: ariaPlacement
+  } = useReactAriaPopover(
     {
@@ -216,2 +221,8 @@ triggerRef,
   );
+  const placement = (0, import_react3.useMemo)(() => {
+    if (!ariaPlacement) {
+      return null;
+    }
+    return (0, import_aria_utils2.getShouldUseAxisPlacement)(ariaPlacement, placementProp) ? ariaPlacement : placementProp;
+  }, [ariaPlacement, placementProp]);
   const { triggerProps } = (0, import_overlays3.useOverlayTrigger)({ type: triggerType }, state, triggerRef);
@@ -240,3 +251,3 @@ const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
     "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
-    "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+    "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
     ...(0, import_utils2.mergeProps)(focusProps, dialogPropsProp, props2),
@@ -253,6 +264,6 @@ className: slots.base({ class: (0, import_shared_utils.clsx)(baseStyles) }),
       "data-arrow": (0, import_shared_utils.dataAttr)(showArrow),
-      "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+      "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
       className: slots.content({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.content, props2.className) })
     }),
-    [slots, state.isOpen, showArrow, placement, placementProp, classNames]
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames, ariaPlacement]
   );
@@ -323,3 +334,3 @@ const onPress = (0, import_react3.useCallback)(
     triggerRef,
-    placement: placement || DEFAULT_PLACEMENT,
+    placement,
     isNonModal,
@@ -402,3 +413,3 @@ popoverRef: domRef,
 var import_framer_motion2 = require("framer-motion");
-var import_aria_utils3 = require("@nextui-org/aria-utils");
+var import_aria_utils4 = require("@nextui-org/aria-utils");
 var import_dialog = require("@react-aria/dialog");
@@ -453,2 +464,3 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
   }, [backdrop, disableAnimation, getBackdropProps]);
+  const style = placement ? (0, import_aria_utils4.getTransformOrigins)(placement === "center" ? "top" : placement) : void 0;
   const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: disableAnimation ? content : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion2.LazyMotion, { features: domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -460,5 +472,3 @@ import_framer_motion2.m.div,
       initial: "initial",
-      style: {
-        ...(0, import_aria_utils3.getTransformOrigins)(placement === "center" ? "top" : placement)
-      },
+      style,
       variants: import_framer_utils.TRANSITION_VARIANTS.scaleSpringOpacity,
@@ -483,3 +493,3 @@ ...motionProps,
 var import_utils4 = require("@react-aria/utils");
-var import_aria_utils4 = require("@nextui-org/aria-utils");
+var import_aria_utils5 = require("@nextui-org/aria-utils");
 var import_framer_utils2 = require("@nextui-org/framer-utils");
@@ -505,6 +515,6 @@ var import_dialog2 = require("@react-aria/dialog");
       };
-    } else {
+    } else if (placement) {
       style = {
         ...style,
-        ...(0, import_aria_utils4.getTransformOrigins)(placement === "center" ? "top" : placement)
+        ...(0, import_aria_utils5.getTransformOrigins)(placement === "center" ? "top" : placement)
       };
@@ -511,0 +521,0 @@ }

dist/popover-content.js

@@ -96,2 +96,3 @@ "use client";
   }, [backdrop, disableAnimation, getBackdropProps]);
+  const style = placement ? (0, import_aria_utils.getTransformOrigins)(placement === "center" ? "top" : placement) : void 0;
   const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: disableAnimation ? content : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -103,5 +104,3 @@ import_framer_motion.m.div,
       initial: "initial",
-      style: {
-        ...(0, import_aria_utils.getTransformOrigins)(placement === "center" ? "top" : placement)
-      },
+      style,
       variants: import_framer_utils.TRANSITION_VARIANTS.scaleSpringOpacity,
@@ -108,0 +107,0 @@ ...motionProps,

dist/popover-context.d.ts

 import * as framer_motion from 'framer-motion';
-import * as _react_types_overlays from '@react-types/overlays';
 import * as _nextui_org_theme from '@nextui-org/theme';
@@ -15,3 +14,3 @@ import * as React from 'react';
     triggerRef: React.RefObject<HTMLElement>;
-    placement: _react_types_overlays.PlacementAxis;
+    placement: "center" | "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
     isNonModal: boolean;
@@ -39,3 +38,3 @@ popoverRef: React.RefObject<HTMLDivElement>;
     triggerRef: React.RefObject<HTMLElement>;
-    placement: _react_types_overlays.PlacementAxis;
+    placement: "center" | "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
     isNonModal: boolean;
@@ -42,0 +41,0 @@ popoverRef: React.RefObject<HTMLDivElement>;

dist/popover.d.ts

 import * as _nextui_org_system from '@nextui-org/system';
 import { ReactNode } from 'react';
 import { UsePopoverProps } from './use-popover.js';
-import '@react-types/overlays';
 import '@nextui-org/theme';
@@ -9,2 +8,3 @@ import 'framer-motion';
 import '@react-stately/overlays';
+import '@react-types/overlays';
 import '@react-aria/dialog';
@@ -11,0 +11,0 @@ import './use-aria-popover.js';

dist/popover.js

@@ -38,4 +38,5 @@ "use client";
 var import_overlays3 = require("@react-aria/overlays");
+var import_aria_utils2 = require("@nextui-org/aria-utils");
 var import_system = require("@nextui-org/system");
-var import_aria_utils2 = require("@nextui-org/aria-utils");
+var import_aria_utils3 = require("@nextui-org/aria-utils");
 var import_theme = require("@nextui-org/theme");
@@ -180,3 +181,7 @@ var import_utils2 = require("@react-aria/utils");
   const state = stateProp || innerState;
-  const { popoverProps, underlayProps, placement } = useReactAriaPopover(
+  const {
+    popoverProps,
+    underlayProps,
+    placement: ariaPlacement
+  } = useReactAriaPopover(
     {
@@ -202,2 +207,8 @@ triggerRef,
   );
+  const placement = (0, import_react3.useMemo)(() => {
+    if (!ariaPlacement) {
+      return null;
+    }
+    return (0, import_aria_utils2.getShouldUseAxisPlacement)(ariaPlacement, placementProp) ? ariaPlacement : placementProp;
+  }, [ariaPlacement, placementProp]);
   const { triggerProps } = (0, import_overlays3.useOverlayTrigger)({ type: triggerType }, state, triggerRef);
@@ -226,3 +237,3 @@ const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
     "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
-    "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+    "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
     ...(0, import_utils2.mergeProps)(focusProps, dialogPropsProp, props2),
@@ -239,6 +250,6 @@ className: slots.base({ class: (0, import_shared_utils.clsx)(baseStyles) }),
       "data-arrow": (0, import_shared_utils.dataAttr)(showArrow),
-      "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+      "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
       className: slots.content({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.content, props2.className) })
     }),
-    [slots, state.isOpen, showArrow, placement, placementProp, classNames]
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames, ariaPlacement]
   );
@@ -309,3 +320,3 @@ const onPress = (0, import_react3.useCallback)(
     triggerRef,
-    placement: placement || DEFAULT_PLACEMENT,
+    placement,
     isNonModal,
@@ -312,0 +323,0 @@ popoverRef: domRef,

dist/use-popover.d.ts

@@ -1,3 +0,1 @@
-import * as _react_types_overlays from '@react-types/overlays';
-import { OverlayTriggerProps } from '@react-types/overlays';
 import * as React from 'react';
@@ -11,2 +9,3 @@ import { RefObject } from 'react';
 import { OverlayTriggerState } from '@react-stately/overlays';
+import { OverlayTriggerProps } from '@react-types/overlays';
 import { AriaDialogProps } from '@react-aria/dialog';
@@ -82,3 +81,3 @@ import { ReactAriaPopoverProps } from './use-aria-popover.js';
     triggerRef: RefObject<HTMLElement>;
-    placement: _react_types_overlays.PlacementAxis;
+    placement: "center" | "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
     isNonModal: boolean;
@@ -85,0 +84,0 @@ popoverRef: RefObject<HTMLDivElement>;

dist/use-popover.js

@@ -32,4 +32,5 @@ "use client";
 var import_overlays3 = require("@react-aria/overlays");
+var import_aria_utils2 = require("@nextui-org/aria-utils");
 var import_system = require("@nextui-org/system");
-var import_aria_utils2 = require("@nextui-org/aria-utils");
+var import_aria_utils3 = require("@nextui-org/aria-utils");
 var import_theme = require("@nextui-org/theme");
@@ -174,3 +175,7 @@ var import_utils2 = require("@react-aria/utils");
   const state = stateProp || innerState;
-  const { popoverProps, underlayProps, placement } = useReactAriaPopover(
+  const {
+    popoverProps,
+    underlayProps,
+    placement: ariaPlacement
+  } = useReactAriaPopover(
     {
@@ -196,2 +201,8 @@ triggerRef,
   );
+  const placement = (0, import_react3.useMemo)(() => {
+    if (!ariaPlacement) {
+      return null;
+    }
+    return (0, import_aria_utils2.getShouldUseAxisPlacement)(ariaPlacement, placementProp) ? ariaPlacement : placementProp;
+  }, [ariaPlacement, placementProp]);
   const { triggerProps } = (0, import_overlays3.useOverlayTrigger)({ type: triggerType }, state, triggerRef);
@@ -220,3 +231,3 @@ const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)();
     "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
-    "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+    "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
     ...(0, import_utils2.mergeProps)(focusProps, dialogPropsProp, props2),
@@ -233,6 +244,6 @@ className: slots.base({ class: (0, import_shared_utils.clsx)(baseStyles) }),
       "data-arrow": (0, import_shared_utils.dataAttr)(showArrow),
-      "data-placement": (0, import_aria_utils2.getArrowPlacement)(placement || DEFAULT_PLACEMENT, placementProp),
+      "data-placement": ariaPlacement ? (0, import_aria_utils3.getArrowPlacement)(ariaPlacement, placementProp) : void 0,
       className: slots.content({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.content, props2.className) })
     }),
-    [slots, state.isOpen, showArrow, placement, placementProp, classNames]
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames, ariaPlacement]
   );
@@ -303,3 +314,3 @@ const onPress = (0, import_react3.useCallback)(
     triggerRef,
-    placement: placement || DEFAULT_PLACEMENT,
+    placement,
     isNonModal,
@@ -306,0 +317,0 @@ popoverRef: domRef,

package.json

 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-canary-20250105105357",
+  "version": "0.0.0-canary-20250105123759",
   "description": "A popover is an overlay element positioned relative to a trigger.",
@@ -28,4 +28,4 @@ "keywords": [
   "peerDependencies": {
-    "@nextui-org/system": "0.0.0-canary-20250105105357",
-    "@nextui-org/theme": "0.0.0-canary-20250105105357",
+    "@nextui-org/system": "0.0.0-canary-20250105123759",
+    "@nextui-org/theme": "0.0.0-canary-20250105123759",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
@@ -44,6 +44,6 @@ "react": ">=18 || >=19.0.0-rc.0",
     "@react-types/overlays": "3.8.11",
-    "@nextui-org/aria-utils": "0.0.0-canary-20250105105357",
-    "@nextui-org/button": "0.0.0-canary-20250105105357",
-    "@nextui-org/framer-utils": "0.0.0-canary-20250105105357",
-    "@nextui-org/react-utils": "0.0.0-canary-20250105105357",
+    "@nextui-org/aria-utils": "0.0.0-canary-20250105123759",
+    "@nextui-org/button": "0.0.0-canary-20250105123759",
+    "@nextui-org/framer-utils": "0.0.0-canary-20250105123759",
+    "@nextui-org/react-utils": "0.0.0-canary-20250105123759",
     "@nextui-org/shared-utils": "2.1.2",
@@ -50,0 +50,0 @@ "@nextui-org/use-aria-button": "2.2.4",

No alert changes

Improved metrics

Total package byte prevSize

133946

increased by1.6%

Lines of code

3223

increased by1.58%

Dependency changes

• + Added@nextui-org/aria-utils@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/button@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/framer-utils@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/react-utils@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/ripple@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/spinner@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/system@0.0.0-canary-20250105123759(transitive)

• + Added@nextui-org/theme@0.0.0-canary-20250105123759(transitive)

• - Removed@nextui-org/aria-utils@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/button@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/framer-utils@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/react-utils@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/ripple@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/spinner@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/system@0.0.0-canary-20250105105357(transitive)

• - Removed@nextui-org/theme@0.0.0-canary-20250105105357(transitive)

• Updated@nextui-org/aria-utils@0.0.0-canary-20250105123759

• Updated@nextui-org/button@0.0.0-canary-20250105123759

• Updated@nextui-org/framer-utils@0.0.0-canary-20250105123759

• Updated@nextui-org/react-utils@0.0.0-canary-20250105123759