@dotss/ui 1.7.1 → 1.7.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dotss/ui
 
+## 1.7.2
+
+### Patch Changes
+
+- 7a94bcd: fix(ui): useCollapse 애니메이션 발생 관련 부수효과함수 로직 수정
+
 ## 1.7.1
 
 ### Patch Changes

package/hooks/interactions/useCollapse/useCollapse.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),v=require("../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),y=require("../../usePrefersReducedMotion/usePrefersReducedMotion.cjs");function P({isCollapsed:t=!0,duration:s=200,delay:f=0,easing:o="ease-in-out",onTransitionStart:i,onTransitionEnd:l}={}){const{prefersReducedMotion:x}=y.default(),h=r.useRef(null),e=r.useRef(null),u=r.useRef(i),c=r.useRef(l),a=r.useRef(!0);u.current=i,c.current=l;const[g,H]=r.useState(t?"0px":"auto");return v.default(()=>{var d;if(a.current){a.current=!1;return}const n=h.current;if(!n)return;e.current&&(e.current.cancel(),e.current=null);const R=n.scrollHeight,M=t?[{height:`${R}px`},{height:"0px"}]:[{height:"0px"},{height:`${R}px`}],q=t?"0px":"auto";return(d=u.current)==null||d.call(u),e.current=n.animate(M,{duration:x?0:s,easing:o,delay:f,fill:"forwards"}),e.current.onfinish=()=>{var m,p;(m=e.current)==null||m.commitStyles(),H(q),(p=c.current)==null||p.call(c),e.current=null},()=>{e.current&&(e.current.cancel(),e.current=null)}},[t,s,f,o]),{targetRef:h,isCollapsed:t,height:g,style:{height:g,overflow:"hidden"},ariaProps:{"aria-hidden":t}}}exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),P=require("../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),q=require("../../usePrefersReducedMotion/usePrefersReducedMotion.cjs");function y({isCollapsed:t=!0,duration:f=200,delay:o=0,easing:s="ease-in-out",onTransitionStart:i,onTransitionEnd:h}={}){const{prefersReducedMotion:p}=q.default(),l=r.useRef(null),e=r.useRef(null),u=r.useRef(i),c=r.useRef(h),a=r.useRef(t);u.current=i,c.current=h;const[g,v]=r.useState(t?"0px":"auto");return P.default(()=>{var m;if(a.current===t)return;a.current=t;const n=l.current;if(!n)return;e.current&&(e.current.cancel(),e.current=null);const R=n.scrollHeight,H=t?[{height:`${R}px`},{height:"0px"}]:[{height:"0px"},{height:`${R}px`}],M=t?"0px":"auto";return(m=u.current)==null||m.call(u),e.current=n.animate(H,{duration:p?0:f,easing:s,delay:o,fill:"forwards"}),e.current.onfinish=()=>{var x,d;(x=e.current)==null||x.commitStyles(),v(M),(d=c.current)==null||d.call(c),e.current=null},()=>{e.current&&(e.current.cancel(),e.current=null)}},[t,f,o,s]),{targetRef:l,isCollapsed:t,height:g,style:{height:g,overflow:"hidden"},ariaProps:{"aria-hidden":t}}}exports.default=y;

package/hooks/interactions/useCollapse/useCollapse.es.js

@@ -1,51 +1,50 @@
-import { useRef as r, useState as M } from "react";
-import P from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { useRef as t, useState as y } from "react";
+import M from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
 import $ from "../../usePrefersReducedMotion/usePrefersReducedMotion.es.js";
-function L({
-  isCollapsed: t = !0,
+function d({
+  isCollapsed: r = !0,
   duration: o = 200,
   delay: f = 0,
-  easing: i = "ease-in-out",
-  onTransitionStart: s,
-  onTransitionEnd: h
+  easing: h = "ease-in-out",
+  onTransitionStart: i,
+  onTransitionEnd: m
 } = {}) {
-  const { prefersReducedMotion: H } = $(), l = r(null), e = r(null), u = r(s), c = r(h), m = r(!0);
-  u.current = s, c.current = h;
-  const [p, d] = M(t ? "0px" : "auto");
-  return P(() => {
-    var g;
-    if (m.current) {
-      m.current = !1;
+  const { prefersReducedMotion: R } = $(), s = t(null), e = t(null), u = t(i), c = t(m), g = t(r);
+  u.current = i, c.current = m;
+  const [l, P] = y(r ? "0px" : "auto");
+  return M(() => {
+    var x;
+    if (g.current === r)
       return;
-    }
-    const n = l.current;
+    g.current = r;
+    const n = s.current;
     if (!n) return;
     e.current && (e.current.cancel(), e.current = null);
-    const a = n.scrollHeight, w = t ? [{ height: `${a}px` }, { height: "0px" }] : [{ height: "0px" }, { height: `${a}px` }], y = t ? "0px" : "auto";
-    return (g = u.current) == null || g.call(u), e.current = n.animate(w, {
-      duration: H ? 0 : o,
-      easing: i,
+    const p = n.scrollHeight, v = r ? [{ height: `${p}px` }, { height: "0px" }] : [{ height: "0px" }, { height: `${p}px` }], w = r ? "0px" : "auto";
+    return (x = u.current) == null || x.call(u), e.current = n.animate(v, {
+      duration: R ? 0 : o,
+      easing: h,
       delay: f,
       fill: "forwards"
     }), e.current.onfinish = () => {
-      var x, R;
-      (x = e.current) == null || x.commitStyles(), d(y), (R = c.current) == null || R.call(c), e.current = null;
+      var a, H;
+      (a = e.current) == null || a.commitStyles(), P(w), (H = c.current) == null || H.call(c), e.current = null;
     }, () => {
       e.current && (e.current.cancel(), e.current = null);
     };
-  }, [t, o, f, i]), {
-    targetRef: l,
-    isCollapsed: t,
-    height: p,
+  }, [r, o, f, h]), {
+    targetRef: s,
+    isCollapsed: r,
+    height: l,
     style: {
-      height: p,
+      height: l,
       overflow: "hidden"
     },
     ariaProps: {
-      "aria-hidden": t
+      "aria-hidden": r
     }
   };
 }
 export {
-  L as default
+  d as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",