@nkey-ui/collapse - npm Package Compare versions

Comparing version 1.1.18 to 1.1.19

dist/collapse.d.ts

@@ -5,10 +5,7 @@ import * as react from 'react';
 import { CollapseVariantProps } from '@nkey-ui/theme';
+import { motion } from 'framer-motion';
 
-interface CollapseProps extends MergeTypes<ComponentPropsWithoutRef<'div'>, CollapseVariantProps, 'onChange'> {
+interface CollapseProps extends MergeTypes<ComponentPropsWithoutRef<typeof motion.div>, CollapseVariantProps> {
     open: boolean;
-    onChange?(open: boolean): void;
-    classNames?: {
-        wrapper?: string;
-        content?: string;
-    };
+    animate?: boolean;
 }
@@ -15,0 +12,0 @@ declare const Collapse: react.ForwardRefExoticComponent<CollapseProps & react.RefAttributes<HTMLDivElement>>;

dist/collapse.js

@@ -28,22 +28,20 @@ "use client";
 var import_react = require("react");
-var import_react_utils = require("@nkey-ui/react-utils");
+var import_framer_transitions = require("@nkey-ui/framer-transitions");
 var import_theme = require("@nkey-ui/theme");
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime = require("react/jsx-runtime");
-var timeout;
-var Collapse = (0, import_react.forwardRef)(function Collapse2({ children, open, animation, onChange, className, classNames = {}, ...rest }, ref) {
-  const [height, setHeight] = (0, import_react.useState)(0);
-  const childrenRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (timeout)
-      clearTimeout(timeout);
-    if (open) {
-      setHeight((0, import_react_utils.getElementHeight)(childrenRef.current));
-      timeout = setTimeout(() => setHeight(void 0), 300);
-    } else {
-      setHeight((prev) => prev === 0 ? 0 : (0, import_react_utils.getElementHeight)(childrenRef.current));
-      timeout = setTimeout(() => setHeight(0), 10);
+var Collapse = (0, import_react.forwardRef)(function Collapse2({ children, open, animate = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      ref,
+      animate: "enter",
+      exit: "exit",
+      initial: "exit",
+      variants: animate ? import_framer_transitions.TRANSITION_VARIANTS.collapse : void 0,
+      className: (0, import_theme.collapse)({ className }),
+      ...rest,
+      children
     }
-    onChange == null ? void 0 : onChange(open);
-  }, [open, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: (0, import_theme.collapse)({ animation, className: classNames.wrapper }), style: { height }, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: childrenRef, className: classNames.content || className, children }) });
+  ) });
 });
@@ -50,0 +48,0 @@ Collapse.displayName = "NkeyUI.Collapse";

dist/index.d.ts

@@ -5,1 +5,2 @@ export { default as Collapse, CollapseProps } from './collapse.js';
 import '@nkey-ui/theme';
+import 'framer-motion';

dist/index.js

@@ -30,22 +30,20 @@ "use client";
 var import_react = require("react");
-var import_react_utils = require("@nkey-ui/react-utils");
+var import_framer_transitions = require("@nkey-ui/framer-transitions");
 var import_theme = require("@nkey-ui/theme");
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime = require("react/jsx-runtime");
-var timeout;
-var Collapse = (0, import_react.forwardRef)(function Collapse2({ children, open, animation, onChange, className, classNames = {}, ...rest }, ref) {
-  const [height, setHeight] = (0, import_react.useState)(0);
-  const childrenRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (timeout)
-      clearTimeout(timeout);
-    if (open) {
-      setHeight((0, import_react_utils.getElementHeight)(childrenRef.current));
-      timeout = setTimeout(() => setHeight(void 0), 300);
-    } else {
-      setHeight((prev) => prev === 0 ? 0 : (0, import_react_utils.getElementHeight)(childrenRef.current));
-      timeout = setTimeout(() => setHeight(0), 10);
+var Collapse = (0, import_react.forwardRef)(function Collapse2({ children, open, animate = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      ref,
+      animate: "enter",
+      exit: "exit",
+      initial: "exit",
+      variants: animate ? import_framer_transitions.TRANSITION_VARIANTS.collapse : void 0,
+      className: (0, import_theme.collapse)({ className }),
+      ...rest,
+      children
     }
-    onChange == null ? void 0 : onChange(open);
-  }, [open, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: (0, import_theme.collapse)({ animation, className: classNames.wrapper }), style: { height }, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: childrenRef, className: classNames.content || className, children }) });
+  ) });
 });
@@ -52,0 +50,0 @@ Collapse.displayName = "NkeyUI.Collapse";

package.json

 {
   "name": "@nkey-ui/collapse",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "A React component to collapse content with animations.",
@@ -26,5 +26,7 @@ "keywords": [
   "dependencies": {
-    "@nkey-ui/react-utils": "1.0.7",
-    "@nkey-ui/shared-utils": "1.1.0",
-    "@nkey-ui/theme": "1.0.46"
+    "framer-motion": "^10.16.4",
+    "@nkey-ui/framer-transitions": "1.1.0",
+    "@nkey-ui/react-utils": "1.0.8",
+    "@nkey-ui/shared-utils": "1.1.1",
+    "@nkey-ui/theme": "1.0.47"
   },
@@ -31,0 +33,0 @@ "clean-package": "../../../clean-package.config.json",

No alert changes

Worsened metrics

Total package byte prevSize

7023

decreased by-14.65%

Dependency count

6

increased by50%

Lines of code

158

decreased by-5.95%

Dependency changes

• + Added@nkey-ui/framer-transitions@1.1.0

• + Addedframer-motion@^10.16.4

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@nkey-ui/framer-transitions@1.1.0(transitive)

• + Added@nkey-ui/react-utils@1.0.8(transitive)

• + Added@nkey-ui/shared-utils@1.1.1(transitive)

• + Added@nkey-ui/theme@1.0.47(transitive)

• + Addedframer-motion@10.18.0(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removed@nkey-ui/react-utils@1.0.7(transitive)

• - Removed@nkey-ui/shared-utils@1.1.0(transitive)

• - Removed@nkey-ui/theme@1.0.46(transitive)

• Updated@nkey-ui/react-utils@1.0.8

• Updated@nkey-ui/shared-utils@1.1.1

• Updated@nkey-ui/theme@1.0.47