@radix-ui/react-presence - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0-rc.1

dist/index.d.ts

@@ -1,3 +0,4 @@
-import * as React from "react";
-export interface PresenceProps {
+import * as React from 'react';
+
+interface PresenceProps {
     children: React.ReactElement | ((props: {
@@ -8,4 +9,4 @@ present: boolean;
 }
-export const Presence: React.FC<PresenceProps>;
+declare const Presence: React.FC<PresenceProps>;
 
-//# sourceMappingURL=index.d.ts.map
+export { Presence, type PresenceProps };

dist/index.js

@@ -1,143 +0,140 @@
-var $fnLeV$react = require("react");
-var $fnLeV$reactdom = require("react-dom");
-var $fnLeV$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
-var $fnLeV$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
+"use strict";
+(() => {
+  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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  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
+  ));
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
+  // packages/react/presence/src/Presence.tsx
+  var React2 = __toESM(__require("react"));
+  var ReactDOM = __toESM(__require("react-dom"));
+  var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
+  var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
 
-$parcel$export(module.exports, "Presence", () => $a2fa0214bb2735a1$export$99c2b779aa4e8b8b);
-
-
-
-
-
-function $8f63844556d0d3cd$export$3e6543de14f8614f(initialState, machine) {
-    return $fnLeV$react.useReducer((state, event)=>{
-        const nextState = machine[state][event];
-        return nextState !== null && nextState !== void 0 ? nextState : state;
+  // packages/react/presence/src/useStateMachine.tsx
+  var React = __toESM(__require("react"));
+  function useStateMachine(initialState, machine) {
+    return React.useReducer((state, event) => {
+      const nextState = machine[state][event];
+      return nextState ?? state;
     }, initialState);
-}
+  }
 
-
-const $a2fa0214bb2735a1$export$99c2b779aa4e8b8b = (props)=>{
-    const { present: present , children: children  } = props;
-    const presence = $a2fa0214bb2735a1$var$usePresence(present);
-    const child = typeof children === 'function' ? children({
-        present: presence.isPresent
-    }) : $fnLeV$react.Children.only(children);
-    const ref = $fnLeV$radixuireactcomposerefs.useComposedRefs(presence.ref, child.ref);
-    const forceMount = typeof children === 'function';
-    return forceMount || presence.isPresent ? /*#__PURE__*/ $fnLeV$react.cloneElement(child, {
-        ref: ref
-    }) : null;
-};
-$a2fa0214bb2735a1$export$99c2b779aa4e8b8b.displayName = 'Presence';
-/* -------------------------------------------------------------------------------------------------
- * usePresence
- * -----------------------------------------------------------------------------------------------*/ function $a2fa0214bb2735a1$var$usePresence(present) {
-    const [node1, setNode] = $fnLeV$react.useState();
-    const stylesRef = $fnLeV$react.useRef({});
-    const prevPresentRef = $fnLeV$react.useRef(present);
-    const prevAnimationNameRef = $fnLeV$react.useRef('none');
-    const initialState = present ? 'mounted' : 'unmounted';
-    const [state, send] = $8f63844556d0d3cd$export$3e6543de14f8614f(initialState, {
-        mounted: {
-            UNMOUNT: 'unmounted',
-            ANIMATION_OUT: 'unmountSuspended'
-        },
-        unmountSuspended: {
-            MOUNT: 'mounted',
-            ANIMATION_END: 'unmounted'
-        },
-        unmounted: {
-            MOUNT: 'mounted'
-        }
+  // packages/react/presence/src/Presence.tsx
+  var Presence = (props) => {
+    const { present, children } = props;
+    const presence = usePresence(present);
+    const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children);
+    const ref = (0, import_react_compose_refs.useComposedRefs)(presence.ref, child.ref);
+    const forceMount = typeof children === "function";
+    return forceMount || presence.isPresent ? React2.cloneElement(child, { ref }) : null;
+  };
+  Presence.displayName = "Presence";
+  function usePresence(present) {
+    const [node, setNode] = React2.useState();
+    const stylesRef = React2.useRef({});
+    const prevPresentRef = React2.useRef(present);
+    const prevAnimationNameRef = React2.useRef("none");
+    const initialState = present ? "mounted" : "unmounted";
+    const [state, send] = useStateMachine(initialState, {
+      mounted: {
+        UNMOUNT: "unmounted",
+        ANIMATION_OUT: "unmountSuspended"
+      },
+      unmountSuspended: {
+        MOUNT: "mounted",
+        ANIMATION_END: "unmounted"
+      },
+      unmounted: {
+        MOUNT: "mounted"
+      }
     });
-    $fnLeV$react.useEffect(()=>{
-        const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
-        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
-    }, [
-        state
-    ]);
-    $fnLeV$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        const styles = stylesRef.current;
-        const wasPresent = prevPresentRef.current;
-        const hasPresentChanged = wasPresent !== present;
-        if (hasPresentChanged) {
-            const prevAnimationName = prevAnimationNameRef.current;
-            const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(styles);
-            if (present) send('MOUNT');
-            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            send('UNMOUNT');
-            else {
-                /**
-         * When `present` changes to `false`, we check changes to animation-name to
-         * determine whether an animation has started. We chose this approach (reading
-         * computed styles) because there is no `animationrun` event and `animationstart`
-         * fires after `animation-delay` has expired which would be too late.
-         */ const isAnimating = prevAnimationName !== currentAnimationName;
-                if (wasPresent && isAnimating) send('ANIMATION_OUT');
-                else send('UNMOUNT');
-            }
-            prevPresentRef.current = present;
+    React2.useEffect(() => {
+      const currentAnimationName = getAnimationName(stylesRef.current);
+      prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+    }, [state]);
+    (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+      const styles = stylesRef.current;
+      const wasPresent = prevPresentRef.current;
+      const hasPresentChanged = wasPresent !== present;
+      if (hasPresentChanged) {
+        const prevAnimationName = prevAnimationNameRef.current;
+        const currentAnimationName = getAnimationName(styles);
+        if (present) {
+          send("MOUNT");
+        } else if (currentAnimationName === "none" || styles?.display === "none") {
+          send("UNMOUNT");
+        } else {
+          const isAnimating = prevAnimationName !== currentAnimationName;
+          if (wasPresent && isAnimating) {
+            send("ANIMATION_OUT");
+          } else {
+            send("UNMOUNT");
+          }
         }
-    }, [
-        present,
-        send
-    ]);
-    $fnLeV$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (node1) {
-            /**
-       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
-       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
-       * make sure we only trigger ANIMATION_END for the currently active animation.
-       */ const handleAnimationEnd = (event)=>{
-                const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
-                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
-                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
-                // a frame after the animation ends, creating a flash of visible content.
-                // By manually flushing we ensure they sync within a frame, removing the flash.
-                $fnLeV$reactdom.flushSync(()=>send('ANIMATION_END')
-                );
-            };
-            const handleAnimationStart = (event)=>{
-                if (event.target === node1) // if animation occurred, store its name as the previous animation.
-                prevAnimationNameRef.current = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
-            };
-            node1.addEventListener('animationstart', handleAnimationStart);
-            node1.addEventListener('animationcancel', handleAnimationEnd);
-            node1.addEventListener('animationend', handleAnimationEnd);
-            return ()=>{
-                node1.removeEventListener('animationstart', handleAnimationStart);
-                node1.removeEventListener('animationcancel', handleAnimationEnd);
-                node1.removeEventListener('animationend', handleAnimationEnd);
-            };
-        } else // Transition to the unmounted state if the node is removed prematurely.
-        // We avoid doing so during cleanup as the node may change but still exist.
-        send('ANIMATION_END');
-    }, [
-        node1,
-        send
-    ]);
+        prevPresentRef.current = present;
+      }
+    }, [present, send]);
+    (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+      if (node) {
+        const handleAnimationEnd = (event) => {
+          const currentAnimationName = getAnimationName(stylesRef.current);
+          const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+          if (event.target === node && isCurrentAnimation) {
+            ReactDOM.flushSync(() => send("ANIMATION_END"));
+          }
+        };
+        const handleAnimationStart = (event) => {
+          if (event.target === node) {
+            prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+          }
+        };
+        node.addEventListener("animationstart", handleAnimationStart);
+        node.addEventListener("animationcancel", handleAnimationEnd);
+        node.addEventListener("animationend", handleAnimationEnd);
+        return () => {
+          node.removeEventListener("animationstart", handleAnimationStart);
+          node.removeEventListener("animationcancel", handleAnimationEnd);
+          node.removeEventListener("animationend", handleAnimationEnd);
+        };
+      } else {
+        send("ANIMATION_END");
+      }
+    }, [node, send]);
     return {
-        isPresent: [
-            'mounted',
-            'unmountSuspended'
-        ].includes(state),
-        ref: $fnLeV$react.useCallback((node)=>{
-            if (node) stylesRef.current = getComputedStyle(node);
-            setNode(node);
-        }, [])
+      isPresent: ["mounted", "unmountSuspended"].includes(state),
+      ref: React2.useCallback((node2) => {
+        if (node2) stylesRef.current = getComputedStyle(node2);
+        setNode(node2);
+      }, [])
     };
-}
-/* -----------------------------------------------------------------------------------------------*/ function $a2fa0214bb2735a1$var$getAnimationName(styles) {
-    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
-}
-
-
-
-
+  }
+  function getAnimationName(styles) {
+    return styles?.animationName || "none";
+  }
+})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@radix-ui/react-presence",
-  "version": "1.0.1",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
@@ -31,5 +31,4 @@ "exports": {
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-compose-refs": "1.0.1",
-    "@radix-ui/react-use-layout-effect": "1.0.1"
+    "@radix-ui/react-compose-refs": "1.1.0-rc.1",
+    "@radix-ui/react-use-layout-effect": "1.1.0-rc.1"
   },
@@ -57,3 +56,4 @@ "peerDependencies": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  }
+  },
+  "stableVersion": "1.0.1"
 }

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Dependency count

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

29994

decreased by-23.71%

Number of package files

8

decreased by-11.11%

Lines of code

255

decreased by-4.14%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-compose-refs@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-layout-effect@1.1.0-rc.1(transitive)

• - Removed@babel/runtime@^7.13.10

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@radix-ui/react-compose-refs@1.0.1(transitive)

• - Removed@radix-ui/react-use-layout-effect@1.0.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@radix-ui/react-compose-refs@1.1.0-rc.1

• Updated@radix-ui/react-use-layout-effect@1.1.0-rc.1