@launchpad-ui/popover - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

dist/index.es.js

 import './style.css';
+import { jsx, jsxs } from "react/jsx-runtime";
 import { shift, flip, offset, arrow, computePosition } from "@floating-ui/dom";
@@ -8,3 +9,2 @@ import { FocusTrap } from "@launchpad-ui/focus-trap";
 import { useState, useRef, useCallback, useId, useEffect, isValidElement, createElement, cloneElement, Children } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 const Popover$1 = "_Popover_dzhew_12";
@@ -59,3 +59,3 @@ const styles = {
   var _a;
-  const [isOpen, setIsOpen] = useState(isOpenProp != null ? isOpenProp : void 0);
+  const [isOpen, setIsOpen] = useState(isOpenProp ?? void 0);
   const [popoverElement, setPopoverElement] = useState();
@@ -80,10 +80,6 @@ const targetRef = useRef(null);
     if (!allowBoundaryElementOverflow) {
-      middleware.push(shift({
-        padding: 5
-      }));
+      middleware.push(shift({ padding: 5 }));
     }
     if (!disablePlacementFlip && !offset$1) {
-      middleware.push(flip({
-        padding: 5
-      }));
+      middleware.push(flip({ padding: 5 }));
     }
@@ -94,5 +90,3 @@ if (offset$1) {
     if (enableArrow && arrowRef.current) {
-      middleware.push(arrow({
-        element: arrowRef.current
-      }));
+      middleware.push(arrow({ element: arrowRef.current }));
     }
@@ -127,6 +121,3 @@ const hasModal = (_a2 = targetRef.current) == null ? void 0 : _a2.closest(".has-overlay");
     if (enableArrow && arrowRef.current && middlewareData.arrow) {
-      const {
-        x: arrowX,
-        y: arrowY
-      } = middlewareData.arrow;
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
       const staticSide = {
@@ -148,3 +139,11 @@ top: "bottom",
     }
-  }, [allowBoundaryElementOverflow, disablePlacementFlip, enableArrow, isFixed, offset$1, placement, popoverElement]);
+  }, [
+    allowBoundaryElementOverflow,
+    disablePlacementFlip,
+    enableArrow,
+    isFixed,
+    offset$1,
+    placement,
+    popoverElement
+  ]);
   useEffect(() => {
@@ -160,8 +159,4 @@ return () => {
       if (isOpen && !(popoverElement === null || popoverElement === void 0)) {
-        window.addEventListener("scroll", updatePosition, {
-          passive: true
-        });
-        window.addEventListener("resize", updatePosition, {
-          passive: true
-        });
+        window.addEventListener("scroll", updatePosition, { passive: true });
+        window.addEventListener("resize", updatePosition, { passive: true });
         await updatePosition();
@@ -236,4 +231,4 @@ } else {
     return {
-      target: targetChild != null ? targetChild : targetProp,
-      content: contentChild != null ? contentChild : contentProp
+      target: targetChild ?? targetProp,
+      content: contentChild ?? contentProp
     };
@@ -268,44 +263,35 @@ };
     }
-    const popoverContent = /* @__PURE__ */ jsx(LazyMotion, {
-      strict: true,
-      features: loadFeatures,
-      children: /* @__PURE__ */ jsxs(m.div, {
-        transition: {
-          duration: 0.15
-        },
-        initial: {
-          opacity: 0
-        },
-        animate: {
-          opacity: 1
-        },
-        className: cx(styles["Popover-content"], restrictWidth && styles["Popover-content--restrictWidth"], popoverContentClassName),
+    const popoverContent = /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        transition: { duration: 0.15 },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        className: cx(
+          styles["Popover-content"],
+          restrictWidth && styles["Popover-content--restrictWidth"],
+          popoverContentClassName
+        ),
         tabIndex: interactionKind === "click" ? -1 : void 0,
-        children: [enableArrow && /* @__PURE__ */ jsx("div", {
-          id: "arrow",
-          ref: arrowRef
-        }), restrictHeight ? /* @__PURE__ */ jsx("div", {
-          className: styles["Popover-scroller"],
-          children: content2
-        }) : content2]
-      })
-    });
-    return /* @__PURE__ */ jsx("div", {
-      id: popoverId.current,
-      ref: contentRef,
-      className: classes,
-      role: "tooltip",
-      "data-test-id": testId,
-      "aria-hidden": !isOpen,
-      ...handlers,
-      children: enforceFocus || interactionKind === "click" ? /* @__PURE__ */ jsx(FocusTrap, {
-        autoFocus: true,
-        children: popoverContent
-      }) : popoverContent
-    });
+        children: [
+          enableArrow && /* @__PURE__ */ jsx("div", { id: "arrow", ref: arrowRef }),
+          restrictHeight ? /* @__PURE__ */ jsx("div", { className: styles["Popover-scroller"], children: content2 }) : content2
+        ]
+      }
+    ) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: popoverId.current,
+        ref: contentRef,
+        className: classes,
+        role: "tooltip",
+        "data-test-id": testId,
+        "aria-hidden": !isOpen,
+        ...handlers,
+        children: enforceFocus || interactionKind === "click" ? /* @__PURE__ */ jsx(FocusTrap, { autoFocus: true, children: popoverContent }) : popoverContent
+      }
+    );
   };
-  const {
-    target,
-    content
-  } = parseChildren();
+  const { target, content } = parseChildren();
   const hasEmptyContent = content === null || content === void 0 || typeof content === "string" && !content;
@@ -315,3 +301,7 @@ const isTargetDisabled = isValidElement(target) ? !!((_a = target == null ? void 0 : target.props) == null ? void 0 : _a.disabled) : false;
     ref: targetRef,
-    className: cx(styles["Popover-target"], targetClassName, isTargetDisabled && styles["Popover-target--disabled"]),
+    className: cx(
+      styles["Popover-target"],
+      targetClassName,
+      isTargetDisabled && styles["Popover-target--disabled"]
+    ),
     style: rootElementStyle,
@@ -332,18 +322,22 @@ "data-test-id": targetTestId || "popover-target"
   }
-  return createElement(rootElementTag, targetProps, cloneElement(target, {
-    ref: targetElementRef,
-    ...isOpen && {
-      "aria-describedby": popoverId.current
-    },
-    "data-state": isOpen ? "open" : "closed"
-  }), /* @__PURE__ */ jsx(Overlay, {
-    isOpen: !!isOpen && !hasEmptyContent,
-    canOutsideClickClose: interactionKind === "click",
-    isModal,
-    enforceFocus,
-    onClose: handleOverlayClose,
-    children: /* @__PURE__ */ jsx("div", {
-      children: renderPopover(content)
-    })
-  }));
+  return createElement(
+    rootElementTag,
+    targetProps,
+    cloneElement(target, {
+      ref: targetElementRef,
+      ...isOpen && { "aria-describedby": popoverId.current },
+      "data-state": isOpen ? "open" : "closed"
+    }),
+    /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        isOpen: !!isOpen && !hasEmptyContent,
+        canOutsideClickClose: interactionKind === "click",
+        isModal,
+        enforceFocus,
+        onClose: handleOverlayClose,
+        children: /* @__PURE__ */ jsx("div", { children: renderPopover(content) })
+      }
+    )
+  );
 };
@@ -350,0 +344,0 @@ export {

dist/index.js

 require('./style.css');
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const dom = require("@floating-ui/dom");
@@ -10,21 +33,2 @@ const focusTrap = require("@launchpad-ui/focus-trap");
 const react = require("react");
-const jsxRuntime = require("react/jsx-runtime");
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
 const Popover$1 = "_Popover_dzhew_12";
@@ -39,5 +43,7 @@ const styles = {
 };
-const loadFeatures = () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(
+const loadFeatures = () => import(
+  /* webpackChunkName: "lp-popover-framer-features" */
+  /* webpackExports: "domAnimation" */
   "framer-motion"
-))).then((res) => res.domAnimation);
+).then((res) => res.domAnimation);
 const isOrContainsElement = (referenceElement, element) => {
@@ -78,3 +84,3 @@ return referenceElement === element || referenceElement && referenceElement.contains(element);
   var _a;
-  const [isOpen, setIsOpen] = react.useState(isOpenProp != null ? isOpenProp : void 0);
+  const [isOpen, setIsOpen] = react.useState(isOpenProp ?? void 0);
   const [popoverElement, setPopoverElement] = react.useState();
@@ -99,10 +105,6 @@ const targetRef = react.useRef(null);
     if (!allowBoundaryElementOverflow) {
-      middleware.push(dom.shift({
-        padding: 5
-      }));
+      middleware.push(dom.shift({ padding: 5 }));
     }
     if (!disablePlacementFlip && !offset) {
-      middleware.push(dom.flip({
-        padding: 5
-      }));
+      middleware.push(dom.flip({ padding: 5 }));
     }
@@ -113,5 +115,3 @@ if (offset) {
     if (enableArrow && arrowRef.current) {
-      middleware.push(dom.arrow({
-        element: arrowRef.current
-      }));
+      middleware.push(dom.arrow({ element: arrowRef.current }));
     }
@@ -146,6 +146,3 @@ const hasModal = (_a2 = targetRef.current) == null ? void 0 : _a2.closest(".has-overlay");
     if (enableArrow && arrowRef.current && middlewareData.arrow) {
-      const {
-        x: arrowX,
-        y: arrowY
-      } = middlewareData.arrow;
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
       const staticSide = {
@@ -167,3 +164,11 @@ top: "bottom",
     }
-  }, [allowBoundaryElementOverflow, disablePlacementFlip, enableArrow, isFixed, offset, placement, popoverElement]);
+  }, [
+    allowBoundaryElementOverflow,
+    disablePlacementFlip,
+    enableArrow,
+    isFixed,
+    offset,
+    placement,
+    popoverElement
+  ]);
   react.useEffect(() => {
@@ -179,8 +184,4 @@ return () => {
       if (isOpen && !(popoverElement === null || popoverElement === void 0)) {
-        window.addEventListener("scroll", updatePosition, {
-          passive: true
-        });
-        window.addEventListener("resize", updatePosition, {
-          passive: true
-        });
+        window.addEventListener("scroll", updatePosition, { passive: true });
+        window.addEventListener("resize", updatePosition, { passive: true });
         await updatePosition();
@@ -255,4 +256,4 @@ } else {
     return {
-      target: targetChild != null ? targetChild : targetProp,
-      content: contentChild != null ? contentChild : contentProp
+      target: targetChild ?? targetProp,
+      content: contentChild ?? contentProp
     };
@@ -287,44 +288,35 @@ };
     }
-    const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
-      strict: true,
-      features: loadFeatures,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
-        transition: {
-          duration: 0.15
-        },
-        initial: {
-          opacity: 0
-        },
-        animate: {
-          opacity: 1
-        },
-        className: classix.cx(styles["Popover-content"], restrictWidth && styles["Popover-content--restrictWidth"], popoverContentClassName),
+    const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.m.div,
+      {
+        transition: { duration: 0.15 },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        className: classix.cx(
+          styles["Popover-content"],
+          restrictWidth && styles["Popover-content--restrictWidth"],
+          popoverContentClassName
+        ),
         tabIndex: interactionKind === "click" ? -1 : void 0,
-        children: [enableArrow && /* @__PURE__ */ jsxRuntime.jsx("div", {
-          id: "arrow",
-          ref: arrowRef
-        }), restrictHeight ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: styles["Popover-scroller"],
-          children: content2
-        }) : content2]
-      })
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      id: popoverId.current,
-      ref: contentRef,
-      className: classes,
-      role: "tooltip",
-      "data-test-id": testId,
-      "aria-hidden": !isOpen,
-      ...handlers,
-      children: enforceFocus || interactionKind === "click" ? /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
-        autoFocus: true,
-        children: popoverContent
-      }) : popoverContent
-    });
+        children: [
+          enableArrow && /* @__PURE__ */ jsxRuntime.jsx("div", { id: "arrow", ref: arrowRef }),
+          restrictHeight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles["Popover-scroller"], children: content2 }) : content2
+        ]
+      }
+    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: popoverId.current,
+        ref: contentRef,
+        className: classes,
+        role: "tooltip",
+        "data-test-id": testId,
+        "aria-hidden": !isOpen,
+        ...handlers,
+        children: enforceFocus || interactionKind === "click" ? /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, { autoFocus: true, children: popoverContent }) : popoverContent
+      }
+    );
   };
-  const {
-    target,
-    content
-  } = parseChildren();
+  const { target, content } = parseChildren();
   const hasEmptyContent = content === null || content === void 0 || typeof content === "string" && !content;
@@ -334,3 +326,7 @@ const isTargetDisabled = react.isValidElement(target) ? !!((_a = target == null ? void 0 : target.props) == null ? void 0 : _a.disabled) : false;
     ref: targetRef,
-    className: classix.cx(styles["Popover-target"], targetClassName, isTargetDisabled && styles["Popover-target--disabled"]),
+    className: classix.cx(
+      styles["Popover-target"],
+      targetClassName,
+      isTargetDisabled && styles["Popover-target--disabled"]
+    ),
     style: rootElementStyle,
@@ -351,20 +347,24 @@ "data-test-id": targetTestId || "popover-target"
   }
-  return react.createElement(rootElementTag, targetProps, react.cloneElement(target, {
-    ref: targetElementRef,
-    ...isOpen && {
-      "aria-describedby": popoverId.current
-    },
-    "data-state": isOpen ? "open" : "closed"
-  }), /* @__PURE__ */ jsxRuntime.jsx(overlay.Overlay, {
-    isOpen: !!isOpen && !hasEmptyContent,
-    canOutsideClickClose: interactionKind === "click",
-    isModal,
-    enforceFocus,
-    onClose: handleOverlayClose,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      children: renderPopover(content)
-    })
-  }));
+  return react.createElement(
+    rootElementTag,
+    targetProps,
+    react.cloneElement(target, {
+      ref: targetElementRef,
+      ...isOpen && { "aria-describedby": popoverId.current },
+      "data-state": isOpen ? "open" : "closed"
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      overlay.Overlay,
+      {
+        isOpen: !!isOpen && !hasEmptyContent,
+        canOutsideClickClose: interactionKind === "click",
+        isModal,
+        enforceFocus,
+        onClose: handleOverlayClose,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderPopover(content) })
+      }
+    )
+  );
 };
 exports.Popover = Popover;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@launchpad-ui/popover",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "status": "beta",
@@ -32,4 +32,4 @@ "publishConfig": {
     "classix": "2.1.17",
-    "framer-motion": "9.0.3",
-    "@launchpad-ui/focus-trap": "~0.1.6",
+    "framer-motion": "10.12.16",
+    "@launchpad-ui/focus-trap": "~0.1.7",
     "@launchpad-ui/overlay": "~0.3.28",
@@ -36,0 +36,0 @@ "@launchpad-ui/tokens": "~0.5.6"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

72812

decreased by-6.44%

Lines of code

828

decreased by-0.72%

Dependency changes

• + Addedframer-motion@10.12.16(transitive)

• - Removed@motionone/animation@10.18.0(transitive)

• - Removed@motionone/dom@10.18.0(transitive)

• - Removed@motionone/easing@10.18.0(transitive)

• - Removed@motionone/generators@10.18.0(transitive)

• - Removed@motionone/types@10.17.1(transitive)

• - Removed@motionone/utils@10.18.0(transitive)

• - Removedframer-motion@9.0.3(transitive)

• - Removedhey-listen@1.0.8(transitive)

• Updated@launchpad-ui/focus-trap@~0.1.7

• Updatedframer-motion@10.12.16